/* ==========================================================================
   SLIDEFACTORY theme — clean rebuild matching the original Webflow design
   Values are translated 1:1 from the source stylesheet.
   Fonts: Abril Fatface (display), Montserrat (body)
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Abril Fatface";
  src:
    url("../fonts/AbrilFatface-Regular.woff2") format("woff2"),
    url("../fonts/AbrilFatface-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src:
    url("../fonts/Montserrat-VariableFont_wght.woff2") format("woff2"),
    url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src:
    url("../fonts/Montserrat-Italic-VariableFont_wght.woff2") format("woff2"),
    url("../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  --dark: #10293d;
  --accent: #10293d;
  --paragraph: rgba(13, 13, 13, 0.65);
  --sf-blue: #0583f2;
  --hover: #ffae00;
  --white: #ffffff;
  --secondary-bg: #f8f8f8;
  --border-dark: rgba(13, 13, 13, 0.15);
  --border-white: rgba(255, 255, 255, 0.15);

  --font-main: "Abril Fatface", Georgia, serif;
  --font-secondary:
    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1260px; /* sitewide max width — .content / .nav-block / .reel__frame */
  --radius: 10px;
  --pill: 10em;
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  /* Pairs with the #sf-boot inline style in header.php: the head hides the
     body until this stylesheet applies, so no unstyled frame can ever paint.
     Keep this visibility declaration or the site never becomes visible. */
  visibility: visible;
  margin: 0;
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 400;
  line-height: 155%; /* original body leading */
  color: var(--paragraph);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* While the document is still streaming/parsing, show the site's dark canvas
   instead of blank white: every section paints its own background, so this
   color is only ever visible in partially-parsed frames and behind the dark
   header/heroes. Reset once DOMContentLoaded fires (html.sf-loaded). */
html.js:not(.sf-loaded) body {
  background: var(--dark);
}
img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--sf-blue);
  text-decoration: none;
  transition: color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
a:hover {
  color: var(--hover);
}
/* Editor content needs real bullets. The nav menus emit bare <a>s (no list markup at
   all), so the only theme-authored list is the pricing feature list, which opts out
   below — a blanket `list-style: none` here only ever hid content lists. */
ul,
ol {
  margin: 0 0 1rem;
  padding-left: 1.4em;
}
ul {
  list-style: disc outside;
}
ol {
  list-style: decimal outside;
}
li {
  margin-bottom: 0.4em;
}
li:last-child {
  margin-bottom: 0;
}
ul ul,
ul ol,
ol ul,
ol ol {
  margin-bottom: 0;
  margin-top: 0.4em;
}
/* Structured lists that are laid out, not read as prose. */
.plan-card__features,
.wpforms-container ul,
.wpforms-container ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Core outputs this on pagination/navigation headings; don't rely on wp-block-library for it. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Typography (exact original scale) ---------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-main);
  color: var(--dark);
  font-weight: 400;
  margin: 1.2em 0 0.6em;
}
h5,
h6 {
  font-family: var(--font-secondary);
  color: var(--dark);
  font-weight: 600;
  margin: 1.2em 0 0.6em;
}
h1 {
  font-size: 4.12em;
  line-height: 113%;
}
h2 {
  font-size: 46px;
  line-height: 115%;
}
h3 {
  font-size: 1.5em;
  line-height: 117%;
}
h4 {
  font-size: 2.12em;
  line-height: 118%;
}
h5 {
  font-size: 1.5em;
  line-height: 122%;
}
h6 {
  font-size: 1.125em;
  line-height: 112%;
}
p {
  margin: 0 0 1rem;
}
p:last-child {
  margin-bottom: 0;
}

.rich-text > *:first-child {
  margin-top: 0;
}
.rich-text img {
  border-radius: var(--radius);
  margin: 1.5rem 0;
}
.rich-text a {
  color: var(--sf-blue);
}
.rich-text a:hover {
  color: var(--hover);
}

/* ---------- Editor image layouts ----------
   Live ships these in a <style> block on the project template plus webflow.css. The
   wrappers (.two-images / .three-images) and the w-richtext-* figures are authored in
   the rich text itself, so without these rules every group collapses to stacked
   full-width images. Measured against theslidefactory.com/project/batchgeo at an 852px
   column: .two-images renders 421 + 421, a centred figure 511 (60%), a fullwidth one 852.
   .blog-body opts out — it keeps its own grid treatment further down. */
.rich-text:not(.blog-body) .two-images,
.rich-text:not(.blog-body) .three-images {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  justify-content: space-around;
  padding-bottom: 20px;
}
.rich-text:not(.blog-body) .two-images img {
  width: calc(50% - 5px);
}
.rich-text:not(.blog-body) .three-images img {
  width: calc(33% - 5px);
}
.rich-text:not(.blog-body) .two-images img,
.rich-text:not(.blog-body) .three-images img {
  border: 1px solid rgb(236, 236, 236);
  margin: 0 0 10px;
}
@media (max-width: 840px) {
  .rich-text:not(.blog-body) .two-images img,
  .rich-text:not(.blog-body) .three-images img {
    width: 100%;
  }
}

/* Webflow rich-text figures. Centred figures shrink-wrap to 60% of the column on live;
   fullwidth ones span it. Scoped to the w-richtext-* classes so WordPress's own
   <figure class="wp-block-image"> is left alone. */
.rich-text figure[class*="w-richtext"] {
  position: relative;
  max-width: 60%;
  margin: 2.9em 0;
}
.rich-text figure[class*="w-richtext"] img {
  width: 100%;
  margin: 0;
}
.rich-text figure.w-richtext-figure-type-image {
  display: table;
}
.rich-text figure.w-richtext-figure-type-image > div {
  display: inline-block;
}
/* Video figures carry their aspect ratio as an inline padding-bottom on the <figure>
   (e.g. 56.206%), so the height must collapse to 0 and let that padding define the box —
   otherwise the figure keeps its content height *and* the padding, which is the tall empty
   gap under the video. The iframe then has to be absolutely positioned to fill that box;
   left static it falls back to the 300x150 default size of a replaced element. Order
   matters: these sit before the align-* rules so a fullwidth video's width: 100% still
   wins over the 60% default, exactly as the cascade runs in Webflow's own stylesheet. */
.rich-text figure.w-richtext-figure-type-video {
  width: 60%;
  height: 0;
}
.rich-text figure.w-richtext-figure-type-video > div {
  width: 100%;
}
.rich-text figure.w-richtext-figure-type-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.rich-text figure.w-richtext-align-center {
  margin-left: auto;
  margin-right: auto;
  clear: both;
}
.rich-text figure.w-richtext-align-normal {
  clear: both;
}
.rich-text figure.w-richtext-align-fullwidth {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: center;
  clear: both;
  margin-left: auto;
  margin-right: auto;
}
/* padding-bottom: inherit passes the aspect ratio down to the inline-block wrapper so it
   spans the figure instead of shrink-wrapping the iframe. */
.rich-text figure.w-richtext-align-fullwidth > div {
  display: inline-block;
  padding-bottom: inherit;
}

/* Pull quote in case-study bodies. Live styles the bare <quote>/<owner> tags the editor
   emits, so they need explicit display — unknown elements are inline by default. */
.rich-text quote {
  display: flex;
  margin-top: 20px;
  padding: 40px 0 20px;
  border-top: 1px solid rgb(221, 221, 221);
  font-family: var(--font-main);
  font-size: 28px;
  line-height: 38px;
  color: var(--dark);
}
.rich-text owner {
  display: flex;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgb(221, 221, 221);
  color: #000;
}

/* ---------- Layout ---------- */
.content {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 2em;
  position: relative;
}
.section {
  padding: 8em 0;
  background: var(--white);
} /* .section-basic */
.section--secondary {
  background: var(--secondary-bg);
  padding: 4em 0;
} /* .sectionsecondary */
.section--dark {
  background: var(--dark);
  color: rgba(255, 255, 255, 0.85);
}
.section--dark h1,
.section--dark h2,
.section--dark h3 {
  color: var(--white);
}
.section--short {
  padding-top: 6em;
}
/* Module-built pages stack sections whose padding otherwise depends on background:
   .section is 8em and .section--secondary is 4em, so consecutive modules jump between
   a 128px gap (grey→grey) and 256px (white→white). One rhythm instead, so every module
   boundary is the same. Bespoke bands (.logo-strip, .partners, .full-width-image) and
   the --tight modifiers are defined later and still win. */
:where(.sf-modules:not(.home)) .section {
  padding: 4em 0;
}
/* Services runs a long stack of alternating solution rows, so its section rhythm is
   cut right down from the sitewide 8em to keep consecutive rows from drifting apart.
   :where() keeps this at the page class's specificity so the --tight modifiers
   below still win on this page. */
.page-template-page-services :where(.section) {
  padding: 1em 0;
}
.section--tight {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
}
.section--tight-bottom {
  padding-bottom: 1.5em;
}
.section--tight-top {
  padding-top: 1.5em;
}
.section--short-top {
  padding-top: 3em;
}

/* ---------- Eyebrow (.sabtitle) ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.94em;
  margin-bottom: 0.5em;
  font-size: 0.94em;
  font-weight: 500;
  color: var(--dark);
}
.eyebrow::before {
  content: "";
  width: 2.4em;
  height: 1px;
  background: currentColor;
  display: inline-block;
  flex: none;
}
.eyebrow--light {
  color: var(--white);
}
a.eyebrow:hover {
  color: var(--sf-blue);
}

/* ---------- Buttons (.button-dark) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-secondary);
  font-size: 0.81em;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 130%;
  padding: 1.5em;
  border-radius: var(--pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.3s;
}
.btn--dark {
  background: var(--accent);
  color: var(--white);
  padding-left: 2.4em;
  padding-right: 2.4em;
}
.btn--dark:hover {
  background: var(--paragraph);
  color: var(--white);
}
.btn--light {
  background: var(--white);
  color: var(--accent);
  padding-left: 2.4em;
  padding-right: 2.4em;
}
.btn--light:hover {
  background: var(--dark);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.3);
}
.btn--outline {
  background: transparent;
  color: var(--dark);
  border-color: var(--dark);
  padding: 1.45em 2.4em;
}
.btn--outline:hover {
  background: var(--dark);
  color: var(--white);
}

/* ==========================================================================
   Header / navbar  (fixed + transparent over the hero, like the original)
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 999;
  background: var(
    --dark
  ); /* solid by default so nav is visible on light pages */
  padding: 0.625em 0;
  transition:
    background-color 0.3s ease,
    padding 0.3s ease;
}
.site-header.is-scrolled {
  border-bottom: 1px solid var(--border-white);
}
/* Transparent only over the homepage hero video (fills in on scroll). */
body.home .site-header:not(.is-scrolled) {
  background: transparent;
}
.nav {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 2em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__brand {
  padding: 0.15em 0.4em;
  display: inline-flex;
}
.nav__brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.nav__menu {
  display: flex;
  align-items: center;
}
.nav__link {
  color: var(--white);
  font-size: 0.81em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 130%;
  padding: 1em 1.5em;
  transition: color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav__link:hover,
.nav__menu .current-menu-item {
  color: var(--sf-blue);
}
.nav__cta {
  background: var(--white);
  color: var(--dark);
  border: 1px solid #000;
  border-radius: var(--pill);
  margin-left: 1.5em;
  padding: 0.6em 2em;
  font-size: 0.81em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 130%;
  transition:
    background-color 0.3s,
    color 0.3s;
}
.nav__cta:hover {
  background: var(--accent);
  color: var(--white);
}
.nav__toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.5em;
}
.nav__toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--white);
  margin: 5px 0;
  transition: 0.3s;
}

/* ==========================================================================
   Homepage
   ========================================================================== */
/* Hero — dark overlay over background video, content bottom-left */
.hero {
  position: relative;
  height: 70vh;
  min-height: 730px;
  background: var(--dark);
  overflow: hidden;
  display: flex;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero__video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 3.1em;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.56);
}
.hero .eyebrow {
  margin-bottom: 1.5em;
}
.hero__title {
  color: var(--white);
  font-family: var(--font-main);
  font-size: 60px;
  line-height: 60px;
  max-width: 15em;
  margin: 0 0 0.4em;
}
.hero__sub {
  display: block;
  font-family: var(--font-secondary);
  font-size: 22px;
  line-height: 36px;
  font-weight: 400;
  padding-top: 20px;
  max-width: 34em;
  text-shadow: none;
}
.hero .btn {
  margin-top: 1.5em;
  align-self: flex-start;
}

/* Intro — dark pill "View Reel" button + paragraph (.block-button.intro-paragraph-container) */
.intro {
  background: var(--white);
}
.intro__inner {
  display: flex;
  align-items: center;
  gap: 3em;
  flex-wrap: wrap;
}
.reel-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  flex: none;
  min-width: 170px;
  padding: 1.2em 1.5em;
  border-radius: var(--pill);
  background: var(--paragraph);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.81em;
  font-weight: 500;
  line-height: 130%;
  transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reel-link:hover {
  background: var(--dark);
  color: var(--white);
}
.reel-link img {
  width: 0.9em;
  height: 0.9em;
  filter: brightness(0) invert(1);
}
.intro__text {
  flex: 1 1 30em;
  max-width: 70%;
  margin: 0;
}

/* Two-column about — matches .grid-2-columns + .grid-image.second (min-height 40em) */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5em;
  align-items: center;
}
.about-grid__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
  min-height: 40em;
  align-items: stretch;
}
.about-grid__images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.about-grid__images .down {
  margin-top: 40px;
} /* staggered, like the source */
.about-grid__images .up {
  margin-bottom: 40px;
}
.about-grid__images--single {
  grid-template-columns: 1fr;
}
.about-grid--reverse .about-grid__images {
  order: 2;
}
.about-grid__images--contain img {
  object-fit: contain;
}

/* Generic "center this section's text" modifier */
.section--center .content {
  text-align: center;
}
.section--center .eyebrow {
  justify-content: center;
}
.section--center .lead {
  margin-left: auto;
  margin-right: auto;
}
.about-grid__text {
  padding: 4em 0;
}
.about-grid__text .btn {
  margin-top: 40px;
}

/* Section intros: heading + lead paragraph share the eyebrow rhythm */
.section h2 {
  max-width: none;
  margin-top: 0;
}
.section .lead {
  max-width: 61em;
  margin-top: 0;
}

/* Card grids (services) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2em;
  margin-top: 3.4em;
}
.card-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.service-card {
  text-align: left;
  color: var(--paragraph);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.service-card__icon {
  width: 150px;
  height: 150px;
  margin-bottom: 1em;
  object-fit: contain;
}
.service-card__icon-wrap {
  width: 40px;
  height: 40px;
  margin-bottom: 1em;
  color: var(--sf-blue);
}
.section--dark .service-card__icon-wrap {
  color: var(--hover);
}
.service-card__icon-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
}
.service-card h3 {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 1.35em;
  line-height: 1.2;
  color: var(--dark);
  margin: 0 0 0.5em;
}
.service-card p {
  min-height: 70px;
  margin-bottom: 1.4em;
}
.service-card__thumb {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.25em;
}
.service-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-card__thumb--contain img {
  object-fit: contain;
}
/* Icon/illustration cards: uncropped, flush left with the copy, 15% smaller than the box.
   The scale leaves slack under the icon, so the copy is pulled back up. */
.service-card__thumb--icon {
  margin-bottom: -20px;
}
.service-card__thumb--icon img {
  object-position: left center;
  transform: scale(0.85);
  transform-origin: left center;
}
.service-card--logo .service-card__thumb {
  aspect-ratio: auto;
  height: 90px;
  border-radius: 0;
  overflow: visible;
  display: flex;
  align-items: center;
}
.service-card--logo .service-card__thumb img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.service-card__link {
  margin-top: auto;
  color: var(--sf-blue);
  font-size: 0.81em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.service-card:hover .service-card__link {
  color: var(--hover);
}
.section--dark .service-card {
  color: rgba(255, 255, 255, 0.85);
}
.section--dark .service-card h3 {
  color: var(--white);
}
.text-link-arrow {
  display: inline-block;
  margin-top: 1em;
  color: var(--sf-blue);
  font-weight: 500;
}
.text-link-arrow:hover {
  color: var(--hover);
}

/* Checklist module */
.checklist {
  margin-top: 2em;
}
.checklist-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.3em 0;
  border-bottom: 1px solid #e2e2e2;
}
.section--dark .checklist-row {
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

/* Portfolio — staggered columns (.portfolio height 38em, nth-child(2n) offset) */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5em;
  margin-top: 3em;
  align-items: start;
}
.portfolio-item {
  color: var(--paragraph);
  display: flex;
  flex-direction: column;
}
.portfolio-item:nth-child(2n) {
  margin-top: 4em;
}
/* Two-up variant (single project's "More Work"): matches live's .blog-card —
   no stagger, a 16:9 cropped thumb, and plain (not uppercase) tags above the title. */
.portfolio-grid--2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5em;
}
.portfolio-grid--2 .portfolio-item:nth-child(2n) {
  margin-top: 0;
}
.portfolio-grid--2 .portfolio-item__img {
  height: auto;
}
.portfolio-grid--2 .portfolio-item__img img {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}
.portfolio-grid--2 .portfolio-item__tags {
  margin-top: 2em;
  text-transform: none;
  letter-spacing: normal;
}
.portfolio-grid--2 .portfolio-item__title {
  font-size: 1.125em;
  font-weight: 600;
  line-height: 112%;
  margin-top: 0.5em;
  margin-bottom: 0;
}
.portfolio-item__img {
  border-radius: 5px;
  overflow: hidden;
  height: 38em;
}
.portfolio-item__img img {
  border-radius: 5px;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.portfolio-item:hover .portfolio-item__img img {
  transform: scale(1.03);
}
.portfolio-item__title {
  font-family: var(--font-secondary);
  font-size: 1.15em;
  font-weight: 600;
  color: var(--dark);
  margin-top: 1.4em;
  margin-bottom: 0.1em;
}
.portfolio-item__tags {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-top: 0.25em;
}

/* Partners */
.partners {
  padding: 2em 0 6em;
  background: var(--secondary-bg);
  text-align: center;
}
.partners .eyebrow {
  margin-bottom: 40px;
}
.partners__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5em 3.5em;
}
.partners__logos img {
  max-height: 56px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.8;
  transition: 0.3s;
}
.partners__logos img:hover {
  filter: none;
  opacity: 1;
}

/* Blog dark section */
.blog-dark {
  background: var(--dark);
}
.blog-dark h1,
.blog-dark h2,
.blog-dark h3 {
  color: var(--white);
}
.blog-dark .lead {
  color: rgba(255, 255, 255, 0.85);
}
.blog-dark .card-grid {
  margin-top: 3.4em;
}
.blog-card {
  display: flex;
  flex-direction: column;
  color: inherit;
}
.blog-card__thumb {
  border-radius: 5px;
  overflow: hidden;
  height: 200px;
} /* .block-image.blog-thumb */
.blog-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.blog-card:hover .blog-card__thumb img {
  transform: scale(1.04);
}
.blog-card__title {
  color: var(--white);
  font-family: var(--font-secondary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  margin: 1em 0 0.4em;
}
.blog-card__excerpt {
  color: var(--white);
  font-size: 16px;
  line-height: 155%;
  min-height: 4em;
}
.blog-card__more {
  color: var(--hover);
  font-weight: 600;
  display: inline-block;
  margin-top: 0.5em;
}
.blog-card__more:hover {
  color: var(--sf-blue);
}

/* Logo carousel */
.logo-carousel {
  overflow: hidden;
  padding: 1em 0;
}
.logo-carousel__track {
  display: flex;
  align-items: center;
  gap: 4em;
  animation: scroll-x 40s linear infinite;
  width: max-content;
}
.logo-carousel__track img {
  width: 130px;
  max-width: 130px;
  height: auto;
  filter: grayscale(1);
  opacity: 0.7;
}
@keyframes scroll-x {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   Testimonials (.testimonial-grid)
   ========================================================================== */
.testimonials {
  background: var(--secondary-bg);
}
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  margin-top: 40px;
}
.testimonial-card {
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.testimonial-card__stars {
  display: flex;
  gap: 3px;
  padding-bottom: 20px;
}
.testimonial-card__stars img {
  width: 23px;
  height: auto;
}
.testimonial-quote {
  color: #333;
  font-size: 16px;
  font-style: italic;
  line-height: 1.7;
  margin-bottom: 24px;
}
.testimonial-author {
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}
.author-site {
  color: var(--paragraph);
  padding-top: 5px;
  line-height: 1;
  font-size: 0.95em;
}
/* Butts straight onto a same-coloured section above (the homepage's logo carousel). */
.testimonials--flush {
  padding-bottom: 0;
}
/* Optional "Read on Google/Clutch" link out to the original review. */
.testimonial-source {
  display: inline-block;
  margin-top: 14px;
  color: var(--sf-blue);
  font-size: 0.81em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}
.testimonial-source:hover {
  color: var(--hover);
}

/* ==========================================================================
   Contact (.grid-contact — image + form)
   ========================================================================== */
.contact-section {
  background: var(--secondary-bg);
  padding-bottom: 8em;
}
.grid-contact {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  min-height: 35em;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
}
.grid-contact__image {
  position: relative;
}
.grid-contact__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 5em 15%;
}
.paragraph-contact {
  max-width: 100%;
  margin-bottom: 2.6em;
  line-height: 175%;
}
.form-block {
  width: 100%;
}
.block-field {
  display: flex;
  gap: 1.8em;
  align-items: flex-start;
}
.block-field .text-field {
  flex: 1;
}
.text-field,
.textarea {
  border: none;
  border-bottom: 1px solid var(--border-dark);
  background: var(--white);
  color: var(--dark);
  font-family: var(--font-secondary);
  font-size: 1em;
  line-height: 130%;
  padding: 0.5em 0;
  margin-bottom: 1.6em;
  width: 100%;
  transition: border-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.text-field {
  height: 2.8em;
}
.textarea {
  min-height: 5em;
  max-height: 16em;
  resize: vertical;
}
.text-field:focus,
.textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.text-field::placeholder,
.textarea::placeholder {
  color: #0d0d0d73;
}
.submit-button {
  background: var(--accent);
  color: var(--white);
  border: 0;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--pill);
  padding: 1.5em 3.6em;
  font-size: 0.81em;
  font-weight: 500;
  line-height: 130%;
  font-family: var(--font-secondary);
  transition:
    background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    color 0.3s;
}
.submit-button:hover {
  background: var(--paragraph);
  color: var(--white);
}
.form-note {
  font-size: 0.8em;
  color: var(--paragraph);
  margin-top: 1em;
}

/* Sitewide contact modal (template-parts/contact-modal.php) */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2em;
  overflow-y: auto;
}
body.modal-open {
  overflow: hidden;
}
.modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 41, 61, 0.6);
}
.modal__dialog {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-radius: var(--radius);
  max-width: 40em;
  width: calc(100% - 2.5em);
  max-height: calc(100vh - 4em);
  overflow-y: auto;
  margin: auto;
  padding: 3em;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.modal__close {
  position: absolute;
  top: 1em;
  right: 1.2em;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.8em;
  line-height: 1;
  color: var(--paragraph);
  padding: 0.2em;
}
.modal__close:hover {
  color: var(--dark);
}
.modal__dialog h2 {
  margin-top: 0.3em;
  font-size: 1.9em;
}
.modal__dialog .form-block {
  margin-top: 1.6em;
}
@media (max-width: 767px) {
  .modal__dialog {
    padding: 2em 1.5em;
  }
  .modal__dialog .block-field {
    flex-direction: column;
    gap: 0;
  }
}

/* Sitewide image lightbox (template-parts/lightbox.php) — opened from any
   gallery marked with data-lightbox, e.g. the `photo_gallery` Page Module.
   Shares body.modal-open (scroll lock) with the contact modal above. */
[data-lightbox] .gallery-grid__item {
  cursor: zoom-in;
}
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
}
.lightbox.is-open {
  display: block;
}
.lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(16, 41, 61, 0.92);
}
.lightbox__dialog {
  position: relative;
  height: 100%;
  display: grid;
  align-items: center;
  grid-template-columns: 4.5em minmax(0, 1fr) 4.5em;
  padding: 4.5em 1.5em 2em;
}
.lightbox__figure {
  grid-column: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
  min-height: 0;
  height: 100%;
}
.lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 11em);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  opacity: 1;
  transition: opacity 0.2s ease;
}
.lightbox.is-loading .lightbox__img {
  opacity: 0;
}
.lightbox__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-secondary);
  font-size: 0.85em;
  text-align: center;
}
.lightbox__counter {
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.08em;
}
.lightbox__meta:empty {
  display: none;
}
.lightbox__close,
.lightbox__nav {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--white);
  padding: 0.3em;
  line-height: 1;
  transition: opacity 0.2s ease;
}
.lightbox__close {
  position: absolute;
  top: 1em;
  right: 1.2em;
  font-size: 2.4em;
  opacity: 0.7;
}
.lightbox__nav {
  justify-self: center;
  opacity: 0.6;
}
.lightbox__nav svg {
  width: 2.2em;
  height: 2.2em;
  display: block;
}
.lightbox__nav--prev {
  grid-column: 1;
}
.lightbox__nav--next {
  grid-column: 3;
}
.lightbox__close:hover,
.lightbox__nav:hover,
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  opacity: 1;
}
/* Single-image galleries: keep the layout, just hide the arrows. */
.lightbox.is-single .lightbox__nav {
  visibility: hidden;
}
@media (max-width: 767px) {
  .lightbox__dialog {
    grid-template-columns: 2.6em minmax(0, 1fr) 2.6em;
    padding: 4em 0.75em 1.5em;
  }
  .lightbox__nav svg {
    width: 1.6em;
    height: 1.6em;
  }
  .lightbox__img {
    max-height: calc(100vh - 12em);
  }
}

/* Sitewide video modal (template-parts/video-modal.php) — the "View Reel"
   button and any other [data-video] link play here instead of leaving the
   site. Shares body.modal-open (scroll lock) with the modals above. */
.video-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
}
.video-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2em;
}
.video-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(16, 41, 61, 0.92);
}
/* The second max-width term keeps the 16:9 frame (plus room for the close
   button above it) inside short or very wide viewports. */
.video-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(68em, calc((100vh - 9em) * 16 / 9));
}
.video-modal__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.video-modal__frame iframe,
.video-modal__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
.video-modal__close {
  position: absolute;
  top: -1.5em;
  right: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--white);
  font-size: 2.4em;
  line-height: 1;
  padding: 0;
  opacity: 0.7;
}
.video-modal__close:hover,
.video-modal__close:focus-visible {
  opacity: 1;
}
@media (max-width: 767px) {
  .video-modal.is-open {
    padding: 1em;
  }
  .video-modal__close {
    top: -1.3em;
    font-size: 2em;
  }
}

/* WPForms — plugin CSS is disabled (Settings > Include Form Styling: none);
   the theme styles the markup to match the built-in .form-block design. */
.contact-copy .wpforms-container {
  width: 100%;
}
/* The two-column grid has to sit on .wpforms-field-container, not on the form.
   WPForms wraps every field in that one container, so a grid on <form> saw only
   two children (the field stack and the submit button) and dropped the entire
   stack into a single half-width column — which is why this form rendered as one
   narrow column while the hand-built .block-field form next to it did not. */
.wpforms-form .wpforms-field-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.8em;
  align-items: start;
}
.wpforms-form .wpforms-field {
  min-width: 0;
}
.wpforms-form .wpforms-field.sf-span2 {
  grid-column: 1 / -1;
}
.wpforms-form .wpforms-field-label.wpforms-label-hide {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form select,
.wpforms-form textarea {
  border: none;
  border-bottom: 1px solid var(--border-dark);
  background: var(--white);
  color: var(--dark);
  font-family: var(--font-secondary);
  font-size: 1em;
  line-height: 130%;
  padding: 0.5em 0;
  margin-bottom: 1.6em;
  width: 100%;
  transition: border-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form select {
  height: 2.8em;
}
.wpforms-form textarea {
  min-height: 5em;
  max-height: 16em;
  resize: vertical;
}
.wpforms-form input:focus,
.wpforms-form textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.wpforms-form input::placeholder,
.wpforms-form textarea::placeholder {
  color: #0d0d0d73;
}
.wpforms-form button[type="submit"],
.wpforms-form .wpforms-submit {
  background: var(--accent);
  color: var(--white);
  border: 0;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--pill);
  padding: 1.5em 3.6em;
  font-size: 0.81em;
  font-weight: 500;
  line-height: 130%;
  font-family: var(--font-secondary);
  transition:
    background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    color 0.3s;
}
.wpforms-form button[type="submit"]:hover,
.wpforms-form .wpforms-submit:hover {
  background: var(--paragraph);
  color: var(--white);
}
.wpforms-form em.wpforms-error,
.wpforms-form .wpforms-error-container {
  font-size: 0.8em;
  color: #c0392b;
  font-style: normal;
  display: block;
  margin: -1.2em 0 1.2em;
}
.wpforms-confirmation-container-full,
div[id^="wpforms-confirmation-"] {
  font-family: var(--font-secondary);
  color: var(--dark);
  border-left: 3px solid var(--accent);
  padding: 0.8em 1.2em;
  background: var(--secondary-bg);
}

/* Related services on blog singles (A11) */
.related-services {
  padding-top: 0;
}
/* When Related Services directly follows the FAQ accordion band, the zero
   top padding leaves it crowding the grey section — restore breathing room
   there only, and pull the bottom in (8em → 6em) so the band sits evenly
   between the FAQs and whatever follows. */
.faqs-section + .related-services {
  padding-top: 4em;
  padding-bottom: 6em;
}
.related-services__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
  margin-top: 1em;
}
.related-services__link {
  display: inline-block;
  padding: 0.7em 1.4em;
  border: 1px solid var(--border-dark);
  border-radius: var(--pill);
  color: var(--dark);
  font-family: var(--font-secondary);
  font-size: 0.85em;
  font-weight: 500;
  transition:
    border-color 0.3s,
    color 0.3s;
}
.related-services__link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Plan-tier funnel cards (W9 — /webflow-plans) */
.plan-cards {
  align-items: stretch;
}
.plan-card {
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.plan-card--featured {
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.plan-card h3 {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 1.35em;
  line-height: 1.2;
  color: var(--dark);
  margin: 0 0 0.3em;
}
.plan-card p {
  color: var(--paragraph);
}
.plan-card__price {
  font-family: var(--font-secondary);
  font-weight: 600;
  color: var(--sf-blue);
  margin-bottom: 1em;
}
.plan-card ul {
  margin: 0 0 1.6em 1.1em;
  padding: 0;
  color: var(--paragraph);
  line-height: 1.6;
}
.plan-card .plan-card__btn {
  margin-top: auto;
  text-align: center;
}
.plan-card__icon {
  width: 32px;
  height: 32px;
  margin-bottom: 1em;
  color: var(--dark);
}
.plan-card__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.plan-card__features {
  list-style: none;
  margin: 0 0 1.6em;
  padding: 0;
  color: var(--paragraph);
  line-height: 1.5;
}
.plan-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  margin-bottom: 0.7em;
}
.plan-card__check {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 0.1em;
  color: var(--sf-blue);
}
.plan-card__check svg {
  width: 100%;
  height: 100%;
  display: block;
}
.plan-card--dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
}
.plan-card--dark h3,
.plan-card--dark .plan-card__price {
  color: var(--white);
}
.plan-card--dark p,
.plan-card--dark .plan-card__features {
  color: rgba(255, 255, 255, 0.75);
}
.plan-card--dark .plan-card__check {
  color: var(--white);
}
.plan-card--dark .btn--dark {
  background: transparent;
  border: 1px solid var(--white);
  color: var(--white);
}
.plan-card--dark .btn--dark:hover {
  background: var(--white);
  color: var(--dark);
}

/* "Proof row" — checkmark + label strip under a pricing/plan-cards module */
.proof-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5em;
  margin-top: 3em;
}
.proof-row__item {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-secondary);
  font-weight: 500;
}
.proof-row__check {
  width: 18px;
  height: 18px;
  flex: none;
  color: currentColor;
}
.proof-row__check svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Feature Split module (text + icon grid) — distinct classes from the
   solution-page .split-grid/.split-grid--reverse alternating-image component
   above, even though both share the base .split-grid grid layout, so their
   `order` rules don't collide when a page uses both. Text column is
   narrower than the card grid (matches live's ~30/70 split, not an even
   50/50) and stretches full-height so its content sits at the top instead
   of vertically centering against a much taller multi-row card grid —
   reverse is done by physically swapping the two blocks' markup order in
   feature-split.php rather than a CSS `order` swap, since a grid `order`
   swap would leave the narrow/wide track sizes in place and flip which
   side is narrow.
   The rule itself lives further down, next to .split-grid — see the note there. */

/* Contact page (page-contact.php) — "Let's Connect." form + details sidebar */
.contact-split {
  display: grid;
  grid-template-columns: 10fr 3fr;
  gap: 3.5em;
  align-items: start;
  margin-top: 3em;
}
.contact-form-lg .textarea {
  min-height: 8em;
}
.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
.contact-sidebar__title {
  margin: 0 0 0.4em;
  font-size: 1em;
}
.contact-sidebar__item p {
  margin: 0 0 0.6em;
  color: var(--paragraph);
}
.contact-sidebar__item a {
  font-weight: 500;
}

/* Feature Steps module (text + vertical numbered list) */
.feature-steps {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
.feature-steps__item {
  display: flex;
  align-items: flex-start;
  gap: 1.5em;
}
.feature-steps__item h5 {
  margin: 0 0 0.3em;
}
.feature-steps__item p {
  margin: 0;
  color: var(--paragraph);
}
.feature-steps__num {
  font-family: var(--font-main);
  font-size: 2.2em;
  line-height: 1;
  color: rgba(13, 13, 13, 0.15);
  flex: none;
}

/* Process Steps module (large decorative number, e.g. "Our Process") */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3em;
  margin-top: 3.5em;
}
.process-step__num {
  font-family: var(--font-main);
  font-size: 8.2em;
  line-height: 0.8;
  color: rgba(13, 13, 13, 0.15);
  margin-bottom: -0.4em;
}
.process-step__heading {
  text-transform: uppercase;
}
.section--dark .process-step__num {
  color: rgba(255, 255, 255, 0.15);
}
.process-grid--compact {
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5em;
}
.process-grid--compact .process-step__num {
  font-family: var(--font-secondary);
  font-size: 1.3em;
  font-weight: 700;
  color: var(--sf-blue);
  margin-bottom: 0.5em;
}
.process-grid--compact .process-step__heading {
  text-transform: none;
}

/* ==========================================================================
   Reusable CTA (interior pages)
   ========================================================================== */
.cta {
  background: var(--dark);
  text-align: center;
  padding: 6em 0;
}
.cta h2 {
  color: var(--white);
  max-width: 16em;
  margin: 0 auto 0.6em;
}
.cta p {
  color: rgba(255, 255, 255, 0.75);
  max-width: 40em;
  margin: 0 auto 2em;
}

/* ==========================================================================
   Footer  (.section-footer) — two rows: brand/address/social, then link columns
   ========================================================================== */
.site-footer {
  background: var(--dark);
  color: rgba(255, 255, 255, 0.8);
  padding: 4em 0 0;
  margin-top: auto;
}
.footer-row {
  display: grid;
  gap: 1em;
}
.footer-row--top {
  grid-template-columns: 2.3fr 1fr 1fr;
  margin-bottom: 3em;
}
.footer-row--links {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer-col__title {
  font-family: var(--font-secondary);
  color: var(--white);
  font-size: 1.125em;
  font-weight: 600;
  line-height: 112%;
  margin: 0.6em 0 1.7em;
}
.footer-brand__name {
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}
.footer-brand__name img {
  max-width: 40px;
  margin-right: 10px;
}
.footer-brand__name span {
  color: var(--white);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.footer-brand p,
.footer-address p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1em;
  line-height: 155%;
  margin: 0;
}
.footer-brand p {
  max-width: 90%;
}
.footer-address a {
  color: rgba(255, 255, 255, 0.5);
}
.footer-address a:hover {
  color: var(--white);
}
.link-footer {
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.6em 0;
  font-size: 0.81em;
  font-weight: 500;
  line-height: 130%;
  display: block;
  transition: color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.link-footer:hover {
  color: var(--sf-blue);
}
.footer-divider {
  background: rgba(255, 255, 255, 0.32);
  height: 1px;
  width: 100%;
  margin-bottom: 40px;
}
.footer-bottom {
  border-top: 1px solid var(--border-white);
  margin-top: 1em;
  padding: 3.2em 0;
  font-size: 1em;
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Interior page hero + 404
   ========================================================================== */
.page-hero {
  background: var(--dark);
  padding: 5.5em 0 5em;
  position: relative;
  overflow: hidden;
}
/* Hero background-animation canvas (hero-fx.js); content stacks above it. */
.page-hero > .hero-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.page-hero .content {
  position: relative;
  z-index: 2;
}
.page-hero h1 {
  color: var(--white);
  max-width: 13em;
  margin-top: 0;
}
/* 44em (not 40) so this matches .interior-hero__sub — this rule outranks it on
   specificity, so its value is what all hero subtitles actually render at. */
.page-hero p {
  color: rgba(255, 255, 255, 0.75);
  max-width: 44em;
  margin-top: 1em;
}
.error-404 {
  text-align: center;
  padding: 14em 0 10em;
}
.error-404 h1 {
  font-size: 8em;
  color: var(--dark);
  margin: 0;
}

/* ==========================================================================
   Interior hero (dark, optional full-bleed background image)
   ========================================================================== */
.interior-hero {
  position: relative;
  overflow: hidden;
  padding: 7.5em 0 6em;
}
.interior-hero--image {
  padding-top: 9.5em;
}
.interior-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.interior-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(16, 41, 61, 0.72) 0%,
    rgba(16, 41, 61, 0.88) 100%
  );
}
.interior-hero__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.interior-hero .content {
  position: relative;
  z-index: 2;
}
.interior-hero h1 {
  color: var(--white);
  max-width: 13em;
  font-size: clamp(2.6rem, 5vw, 4.1rem);
  line-height: 1.08;
}
.interior-hero__sub {
  color: rgba(255, 255, 255, 0.8);
  max-width: 44em;
  margin-top: 1.2em;
  line-height: 1.75;
}
.interior-hero--light {
  background: var(--secondary-bg);
}
.interior-hero--light h1 {
  color: var(--dark);
}
.interior-hero--light .interior-hero__sub {
  color: var(--paragraph);
}
.interior-hero--centered {
  background: var(--white);
  text-align: center;
}
.interior-hero--centered h1 {
  color: var(--dark);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
.interior-hero--centered .interior-hero__sub {
  color: var(--paragraph);
  max-width: 34em;
  margin-left: auto;
  margin-right: auto;
}
.interior-hero--centered .eyebrow {
  justify-content: center;
}
/* .page-hero p caps paragraphs at 40em with no auto margins, which
   left-aligns the CTA wrapper in the centered hero. */
.interior-hero--centered .content > p {
  margin-left: auto;
  margin-right: auto;
}

/* Team grid (About) */
.team-section .lead {
  color: rgba(255, 255, 255, 0.8);
  max-width: 44em;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2em;
  margin-top: 3em;
}
.team-member__photo {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1;
  margin-bottom: 1em;
}
.team-member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.team-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.team-member__name {
  color: var(--white);
  font-weight: 600;
  font-size: 1.1em;
}
.team-member__role {
  color: var(--sf-blue);
  font-size: 0.9em;
  margin-top: 0.1em;
}
/* Light/secondary variant of the same grid (Team Grid module on a non-dark section) */
.team-section--light .lead {
  color: var(--paragraph);
}
.team-section--light .team-member__name {
  color: var(--dark);
}

/* Logo strip */
.logo-strip {
  padding: 4em 0;
}
.logo-strip__title {
  text-align: center;
  color: var(--dark);
  margin: 0 0 2.5em;
  font-size: 1.125em;
}
/* Homepage rhythm: full section top padding, tighter gap under the heading. */
.logo-strip--roomy {
  padding: 8em 0 4em;
}
.logo-strip--roomy .logo-strip__title {
  margin-bottom: 1.5em;
}

/* Reel — white top / navy bottom split so the video straddles the transition */
.reel {
  text-align: center;
  padding: 6em 0 4em;
  background-color: var(--white);
  background-image: linear-gradient(180deg, var(--white) 68%, var(--dark) 68%);
}
.reel__title {
  margin: 0 0 1em;
}
.reel__frame {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.reel__frame iframe,
.reel__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* "Selected Works" 2-column grid (work archive) */
.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3em 2em;
  margin-top: 3em;
}
.work-item {
  display: block;
  color: inherit;
}
.work-item:nth-child(2n) {
  margin-top: 4em;
}
.work-item__img {
  border-radius: 5px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.work-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.work-item:hover .work-item__img img {
  transform: scale(1.04);
}
.work-item__title {
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 1.3em;
  color: var(--dark);
  margin: 0.8em 0 0.2em;
}
.work-item__tags {
  font-family: var(--font-secondary);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0;
}

/* ==========================================================================
   Interior templates (single project/service/solution/gallery, archives, blog)
   ========================================================================== */
/* Project single — mirrors live's case-study layout (.work-subpage / .project-body). */
.project-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 350px;
  padding: 8em 0 2em;
}
/* margin-top:0 — the global h1 rule's 1.2em top margin is what pushed the title
   away from the eyebrow. Live's .heading-hero zeroes it and uses .4em below. */
.project-hero__title {
  font-size: 3.4em;
  max-width: none;
  margin-top: 0;
  margin-bottom: 0.4em;
}
.project-hero__sub {
  max-width: none;
  margin: 0;
}
.project-image {
  padding: 2em 0 6em;
  background: var(--white);
}
.project-image__img {
  width: 100%;
  max-height: 550px;
  object-fit: cover;
  border: 1px solid #f5f5f5;
  border-radius: 5px;
}
.project-body {
  padding: 3em 0 0;
}
/* No align-items:start here — the aside has to stretch the full row height or the
   sticky child below has nothing to travel within. */
.project-body__grid {
  display: grid;
  grid-template-columns: 25% 72%;
  gap: 3%;
  align-items: stretch;
}
/* The overview column tracks the reader down the case study, as on live: it pins
   just under the fixed header, dropping lower only on wide screens (live's 1440 rule). */
.project-body__aside .work-overview {
  position: sticky;
  top: 80px;
}
.project-body__aside .side-block {
  margin-bottom: 20px;
  padding: 0 0 5px 10px;
  border-bottom: 1px solid #abc7d1;
}
.project-body__aside .side-block p {
  margin: 5px 0 0;
}
/* Live leaves these at the inherited body colour until 1440px, where they go dark. */
.side-title {
  font-family: var(--font-secondary);
  font-size: 23px;
  font-weight: 400;
  margin-bottom: 0;
}
.post-heading-box {
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 5px;
}
.category-link {
  color: #07332f;
  font-weight: 500;
}
.case-study-title {
  margin-top: 0.25em;
}
.project-rich-text {
  margin-top: 1.5em;
}

/* Service highlight sections */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5em;
  margin-top: 2.5em;
}
.feature-item h3 {
  color: var(--dark);
  margin: 0 0 0.4em;
}
.lead-block {
  font-size: 1.15em;
  margin-bottom: 2em;
}

/* Solution alternating split sections */
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5em;
  align-items: center;
}
/* feature_split overrides both. Two classes, and declared after .split-grid: the single
   class version used to sit ~150 lines earlier and lost the cascade to .split-grid on
   equal specificity, which is why the narrow column and top alignment weren't applying. */
.split-grid.feature-split {
  grid-template-columns: 1fr 2fr;
  align-items: start;
}
/* Reversed rows emit the card grid first (feature-split.php swaps the markup, not the
   visual order), so the narrow track has to move to the second column with it —
   otherwise the cards get squeezed into 1fr and the text sprawls across 2fr. */
.split-grid.feature-split--reverse {
  grid-template-columns: 2fr 1fr;
}
/* The heading sits in a third-width column, so it needs to be smaller than the 46px
   sitewide h2 or a normal-length title wraps to four or five lines. */
.feature-split__text h2 {
  font-size: 2.25em;
}
/* Author-set vertical alignment (feature_split's "Column alignment" field). */
.split-grid.split-grid--align-start {
  align-items: start;
}
.split-grid.split-grid--align-center {
  align-items: center;
}
.split-grid.split-grid--align-stretch {
  align-items: stretch;
}
.split-grid--reverse .split-grid__media {
  order: 2;
}
.split-grid__media img {
  width: 100%;
  border-radius: 5px;
}

/* Gallery grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5em;
}
.gallery-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.gallery-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
.gallery-grid__item {
  display: block;
  border-radius: 5px;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.gallery-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery-grid__item:hover img {
  transform: scale(1.04);
}
/* Titled variant (the `gallery_posts` module): image box + a caption below it, so the
   tile itself can't be a fixed-ratio clipping box any more. */
.gallery-grid__item--card {
  aspect-ratio: auto;
  overflow: visible;
  border-radius: 0;
}
.gallery-grid__media {
  display: block;
  aspect-ratio: 4/3;
  border-radius: 5px;
  overflow: hidden;
}
.gallery-grid__title {
  display: block;
  margin-top: 0.9em;
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 0.95em;
  line-height: 1.3;
  color: var(--dark);
  transition: color 0.3s ease;
}
a.gallery-grid__item--card:hover .gallery-grid__title {
  color: var(--sf-blue);
}

/* Work / blog category filter — matches original .filter-radio-item */
.work-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.6rem;
  margin-bottom: 3em;
}
.work-filter__link {
  font-family: var(--font-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent);
  padding: 0.45rem 0;
  transition: color 0.2s ease;
}
.work-filter__link:hover,
.work-filter__link.is-active {
  color: var(--sf-blue);
}
.work-filter__link.is-active {
  position: relative;
}
.work-filter__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--sf-blue);
}

/* Chip variant — blog category filter (sf_category_filter()). Short labels in
   pill buttons so the whole set stays on one or two compact rows. */
.work-filter--chips {
  gap: 0.5rem;
  margin-bottom: 2.5em;
}
.work-filter--chips .work-filter__link {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-dark);
  border-radius: var(--pill);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--dark);
  background: var(--white);
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}
.work-filter--chips .work-filter__link:hover {
  color: var(--sf-blue);
  border-color: var(--sf-blue);
  background: rgba(5, 131, 242, 0.06);
}
.work-filter--chips .work-filter__link.is-active {
  color: var(--white);
  background: var(--sf-blue);
  border-color: var(--sf-blue);
}
.work-filter--chips .work-filter__link.is-active::after {
  content: none;
}
.work-filter--chips .work-filter__link:focus-visible {
  outline: 2px solid var(--sf-blue);
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .work-filter--chips {
    gap: 0.4rem;
  }
  .work-filter--chips .work-filter__link {
    padding: 0.4rem 0.8rem;
    font-size: 12px;
  }
}

/* Blog card — light variant (blog index / related) */
.blog-card--light .blog-card__title {
  color: var(--dark);
}
.blog-card--light .blog-card__excerpt {
  color: var(--paragraph);
}
.blog-card--light .blog-card__more {
  color: var(--sf-blue);
}
.blog-card--light .blog-card__more:hover {
  color: var(--hover);
}
.blog-card__cat {
  display: inline-block;
  margin-top: 1em;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white);
}
.blog-card--light .blog-card__cat {
  color: var(--paragraph);
}
.blog-card__cat + .blog-card__title {
  margin-top: 0.35em;
}

/* ---------- Archive pagination (see sf_pagination() in inc/template-tags.php) ---------- */
.pagination-wrap {
  margin-top: 3.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}
.navigation.pagination {
  width: 100%;
}
.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-width: 2.75em;
  height: 2.75em;
  padding: 0 0.8em;
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  background: var(--white);
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--dark);
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s ease;
}
a.page-numbers:hover {
  color: var(--sf-blue);
  border-color: var(--sf-blue);
  background: rgba(5, 131, 242, 0.06);
  transform: translateY(-1px);
}
.page-numbers:focus-visible {
  outline: 2px solid var(--sf-blue);
  outline-offset: 2px;
}
.page-numbers.current {
  color: var(--white);
  background: var(--sf-blue);
  border-color: var(--sf-blue);
}
.page-numbers.dots {
  min-width: 1.6em;
  padding: 0;
  border-color: transparent;
  background: none;
  color: var(--paragraph);
  letter-spacing: 0.1em;
}
.page-numbers.prev {
  margin-right: 0.35em;
}
.page-numbers.next {
  margin-left: 0.35em;
}
.pagination__icon {
  width: 15px;
  height: 15px;
  display: block;
}
.pagination__arrow {
  display: inline-flex;
}
.pagination__arrow--prev {
  transform: rotate(180deg);
}
.pagination__status {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paragraph);
}
@media (max-width: 600px) {
  .page-numbers {
    min-width: 2.5em;
    height: 2.5em;
    padding: 0 0.6em;
    font-size: 13px;
  }
  .page-numbers.prev .pagination__label,
  .page-numbers.next .pagination__label {
    display: none;
  }
}

/* Blog single — white intro, full-bleed header image, wide body */
.blog-intro {
  background: var(--white);
  padding: 11em 0 2.5em;
}
.blog-title {
  font-family: var(--font-main);
  color: var(--dark);
  font-size: clamp(2.4rem, 4.5vw, 3.1rem);
  line-height: 1.1;
  max-width: 18em;
  margin: 0.3em 0 0.4em;
}
.blog-lead {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--paragraph);
  max-width: 46em;
  margin-bottom: 1em;
}
.blog-byline {
  color: var(--paragraph);
  font-size: 0.95rem;
}
.blog-byline a {
  color: var(--sf-blue);
}

/* Author bio box under a post credited to a named author (single.php). */
.author-bio {
  padding-top: 0px;
  margin-top: -60px;
  padding-bottom: 90px;
}
.author-bio__card {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  max-width: 52em;
  margin: 0 auto;
  padding: 1.5rem;
  background: var(--secondary-bg, #f5f5f5);
  border-radius: 8px;
}
.author-bio__photo {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  border-radius: 50%;
  object-fit: cover;
}
.author-bio__text p {
  margin: 0 0 0.35rem;
}
.author-bio__text p:last-child {
  margin-bottom: 0;
  color: var(--paragraph);
}
.author-bio__name {
  font-weight: 700;
  font-size: 1.05rem;
}
.author-bio__role {
  color: var(--paragraph);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
@media (max-width: 600px) {
  .author-bio__card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
.blog-header-image {
  width: 100%;
  height: 600px;
  overflow: hidden;
}
.blog-header-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.blog-post-body {
  padding-top: 4em;
}
.blog-body {
  font-size: 1.06rem;
}
.blog-body > h1,
.blog-body > h2,
.blog-body > h3,
.blog-body > h4 {
  margin-top: 1.6em;
}
.blog-body h2 {
  font-size: 2rem;
  line-height: 1.2;
}
.blog-body h3 {
  font-size: 1.6rem;
}
.blog-body h4 {
  font-size: 1.3rem;
}
.blog-body ul,
.blog-body ol {
  margin: 0 0 1.2em 1.2em;
}
.blog-body li {
  margin-bottom: 0.5em;
}
.blog-body a {
  color: var(--sf-blue);
  text-decoration: underline;
}
.blog-body a:hover {
  color: var(--hover);
}
.blog-body img {
  border-radius: 8px;
  margin: 1.5rem 0;
}
.blog-body .three-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
}
.blog-body .three-images img {
  margin: 0;
}

/* Tables in article bodies (comparison/pricing tables). */
.rich-text table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-family: var(--font-secondary);
  font-size: 0.95rem;
}
.rich-text th,
.rich-text td {
  border: 1px solid var(--border-dark);
  padding: 0.7em 0.9em;
  text-align: left;
  vertical-align: top;
}
.rich-text thead th {
  background: var(--secondary-bg);
  font-weight: 700;
}
.rich-text tbody th {
  font-weight: 600;
}
@media (max-width: 600px) {
  .rich-text table {
    display: block;
    overflow-x: auto;
  }
}

/* Code blocks — dark treatment matching the Webflow originals (w-code-block). */
.rich-text pre {
  background: #2b2b2b;
  color: #f8f8f2;
  padding: 1em 1.25em;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.88rem;
  line-height: 1.55;
}
.rich-text pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
  white-space: pre;
}
.rich-text :not(pre) > code {
  background: var(--secondary-bg);
  border: 1px solid var(--border-dark);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
  color: var(--dark);
}

/* FAQ accordion */
.faq-list {
  margin-top: 2em;
}
.faq-item {
  border-bottom: 1px solid var(--border-dark);
  padding: 1.2em 0;
}
.faq-item__q {
  cursor: pointer;
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 1.1em;
  color: var(--dark);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item__q::-webkit-details-marker {
  display: none;
}
.faq-item__q::after {
  content: "+";
  font-size: 1.4em;
  color: var(--sf-blue);
  margin-left: 1em;
}
.faq-item[open] .faq-item__q::after {
  content: "\2013";
}
.faq-item__a {
  padding-top: 1em;
}

/* Full Width Image module */
.full-width-image {
  padding: 4em 0;
}
.full-width-image.section--tight {
  padding: 0;
}
.full-width-image__wrap {
  width: 100%;
}
.full-width-image__frame {
  position: relative;
  margin: 0;
  width: 100%;
  overflow: hidden;
}
.full-width-image__frame img {
  width: 100%;
  height: 100%;
  display: block;
}
/* Natural-ratio variant: no fixed box, so the image keeps its own proportions. */
.full-width-image__frame--auto {
  height: auto !important;
}
.full-width-image__frame--auto img {
  height: auto;
}
/* Constrained (full bleed off) picks up the container's rounded treatment. */
.full-width-image .content .full-width-image__frame {
  border-radius: 5px;
}
.full-width-image__caption {
  margin-top: 0.8em;
  font-size: 0.9em;
  color: var(--muted, #6b7280);
  text-align: center;
}
.full-width-image--bleed .full-width-image__caption {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding: 0 2em;
}
@media (max-width: 800px) {
  .full-width-image {
    padding: 2.5em 0;
  }
  .full-width-image.section--tight {
    padding: 0;
  }
}

/* Landing content — give raw imported HTML sensible spacing */
.landing-content > * + * {
  margin-top: 1.2em;
}
.landing-content img {
  max-width: 100%;
  border-radius: 5px;
}

/* Landing component: industry / feature icon grid */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2em;
  margin-top: 3em;
  text-align: center;
}
.icon-grid__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 0.8em;
  color: var(--sf-blue);
}
.icon-grid__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.section--dark .icon-grid__icon {
  color: var(--hover);
}
.icon-grid__label {
  font-family: var(--font-secondary);
  font-weight: 600;
  color: var(--dark);
}
.section--dark .icon-grid__label {
  color: var(--white);
}

/* Landing component: numbered results grid */
.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2.5em;
  margin-top: 3em;
}
.results-item__num {
  font-family: var(--font-main);
  font-size: 2.4em;
  color: var(--sf-blue);
  line-height: 1;
  margin-bottom: 0.2em;
}
.section--dark .results-item__num {
  color: var(--hover);
}
.results-item p {
  font-size: 1.15em;
  color: inherit;
}
.results-item__desc {
  font-size: 1em;
  color: var(--paragraph);
  margin-top: 0.4em;
}
/* Stats in the split layout: the number takes the place of feature_split's icon. */
.stat-card .results-item__num {
  font-size: 2.8em;
  margin-bottom: 0.25em;
}
.stat-card h3 {
  font-size: 1.15em;
}
.stat-card p {
  margin-top: 0.4em;
}
.section--dark .results-item p {
  color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   Reveal-on-scroll (replaces Webflow IX2)
   ========================================================================== */
/* Only hide when JS is present (html.js), so content is never stuck invisible. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Above-the-fold reveals on initial load: visible instantly, no animation. */
.js .reveal.reveal--instant {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .logo-carousel__track {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   Responsive (mirrors original breakpoints: 991 / 767 / 479)
   ========================================================================== */
@media (max-width: 991px) {
  h1 {
    font-size: 3.5em;
  }
  h2 {
    font-size: 2.7em;
  }
  .card-grid,
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-row--top {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-row--links {
    grid-template-columns: 1fr 1fr;
    gap: 1em 2em;
  }
  .hero__inner {
    padding-left: 2em;
  }
  .about-grid__images {
    min-height: 30em;
  }
}
@media (max-width: 767px) {
  h1 {
    font-size: 2.8em;
  }
  h2 {
    font-size: 2.3em;
  }
  .hero__title {
    font-size: 3em;
    line-height: 1.08;
  }
  .section {
    padding: 5em 0;
  }
  .about-grid {
    grid-template-columns: 1fr;
  }
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
  .grid-contact {
    grid-template-columns: 1fr;
  }
  .grid-contact__image {
    min-height: 260px;
  }
  .contact-copy {
    padding: 3em 2em;
  }
  .block-field {
    flex-direction: column;
    gap: 0;
  }
  .wpforms-form .wpforms-field-container {
    grid-template-columns: 1fr;
  }
  .intro__text {
    max-width: 100%;
  }
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .portfolio-item__img {
    height: 28em;
  }
  .project-body__grid {
    grid-template-columns: 1fr;
    gap: 2em;
  }
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .process-grid,
  .process-grid--compact {
    grid-template-columns: 1fr;
    gap: 2.5em;
  }
  .split-grid,
  .split-grid.feature-split,
  .split-grid.feature-split--reverse {
    grid-template-columns: 1fr;
    gap: 2em;
  }
  .split-grid--reverse .split-grid__media {
    order: 0;
  }
  .contact-split {
    grid-template-columns: 1fr;
    gap: 2.5em;
  }
  .gallery-grid,
  .gallery-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .work-grid {
    grid-template-columns: 1fr;
    gap: 2.5em;
  }
  .work-item:nth-child(2n) {
    margin-top: 0;
  }
  .interior-hero {
    padding: 6em 0 4em;
  }
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .blog-header-image {
    height: 360px;
  }
  .icon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .results-grid {
    grid-template-columns: 1fr;
  }
  .nav__menu {
    position: fixed;
    inset: 0 0 0 30%;
    background: var(--dark);
    border-left: 1px solid var(--border-white);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1em;
    padding: 2em;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 99;
  }
  .site-header.is-open {
    background: var(--dark);
  }
  .site-header.is-open .nav__menu {
    transform: none;
  }
  .nav__cta {
    margin-left: 1.5em;
  }
  .nav__toggle {
    display: block;
    position: relative;
    z-index: 100;
  }
  .site-header.is-open .nav__toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .site-header.is-open .nav__toggle span:nth-child(2) {
    opacity: 0;
  }
  .site-header.is-open .nav__toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}
@media (max-width: 560px) {
  h1 {
    font-size: 2.3em;
  }
  h2 {
    font-size: 1.9em;
  }
  .card-grid,
  .portfolio-grid,
  .card-grid--2 {
    grid-template-columns: 1fr;
  }
  .footer-row--top,
  .footer-row--links {
    grid-template-columns: 1fr;
  }
  .hero {
    min-height: 600px;
  }
  .about-grid__images {
    min-height: 22em;
  }
}

/* Wide screens — mirrors live's own min-width:1440px project-page overrides. */
@media (min-width: 1440px) {
  .side-title {
    color: var(--dark);
  }
  .project-body__aside .work-overview {
    top: 150px;
  }
}

/* ---------- Gallery Showcase module ---------- */
.gallery-showcase__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 32px;
  row-gap: 48px;
  margin-top: 3em;
}
.gallery-showcase__grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.gallery-showcase__item[hidden] {
  display: none;
}
.gallery-showcase__media {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--secondary-bg);
}
.gallery-showcase__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.gallery-showcase__media:hover img {
  transform: scale(1.03);
}
/* Extra slides exist only to feed the lightbox group — never rendered. */
.gallery-showcase__media a + a {
  display: none;
}
.gallery-showcase__title {
  font-family: var(--font-secondary);
  font-size: 1.3em;
  font-weight: 600;
  color: var(--dark);
  margin: 0.8em 0 0.3em;
}
.gallery-showcase__text {
  color: var(--paragraph);
  margin: 0;
}
.gallery-showcase__more {
  text-align: center;
  margin-top: 3.5em;
}
.section--dark .gallery-showcase__title {
  color: var(--white);
}
@media (max-width: 767px) {
  .gallery-showcase__grid,
  .gallery-showcase__grid--3 {
    grid-template-columns: 1fr;
    row-gap: 2.5em;
  }
}

/* Contact form honeypot (sf_contact_security_fields() in inc/contact-form.php).
   Moved off-screen rather than display:none — bots routinely skip fields hidden
   that way, and this field only works if they fill it in. */
.sf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Contact form confirmation + error states.
   The old confirmation was a 0.8em grey .form-note below the button, which
   read as incidental text — people submitted and couldn't tell it had worked.
   On success the form is replaced by this panel, so the change is impossible
   to miss. Errors stay inline but are no longer styled like a passive note. */
:root {
  --error: #b32d2e;
}
.form-success {
  display: flex;
  align-items: flex-start;
  gap: 1.1em;
  margin: 0.5em 0;
  padding: 1.9em 2.1em;
  background: var(--secondary-bg);
  border-left: 4px solid var(--dark);
  border-radius: var(--radius);
  animation: sf-success-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.form-success:focus {
  outline: none; /* Focused programmatically so screen readers land here. */
}
.form-success__icon {
  flex: 0 0 auto;
  width: 2.1em;
  height: 2.1em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--dark);
  color: var(--white);
}
.form-success__icon svg {
  width: 1.05em;
  height: 1.05em;
  display: block;
}
.form-success__title {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: 1.12em;
  font-weight: 600;
  line-height: 1.4;
  color: var(--dark);
}
@keyframes sf-success-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.form-note--error {
  color: var(--error);
  font-size: 0.92em;
  font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
  .form-success { animation: none; }
}

/* The `hidden` attribute is a user-agent stylesheet rule, so ANY author
   `display` declaration silently beats it. `.block-field { display: flex }`
   was doing exactly that to the contact modal's plan selector, leaving an
   empty "Which plan are you interested in?" dropdown on pages with no pricing
   — the JS was correctly setting hidden, and the CSS was ignoring it.
   `.gallery-showcase__item[hidden]` above is the same fix applied locally;
   this makes it hold everywhere so the next `hidden` element can't inherit
   the bug. */
[hidden] {
  display: none !important;
}