/* ==========================================================================
   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.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: 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.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 {
  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;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--sf-blue); text-decoration: none; transition: color .3s cubic-bezier(.25,.46,.45,.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: .4em; }
li:last-child { margin-bottom: 0; }
ul ul, ul ol, ol ul, ol ol { margin-bottom: 0; margin-top: .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 .6em; }
h5, h6 { font-family: var(--font-secondary); color: var(--dark); font-weight: 600; margin: 1.2em 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,.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: .94em; margin-bottom: .5em; font-size: .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: .81em; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; line-height: 130%;
  padding: 1.5em; border-radius: var(--pill); border: 1px solid transparent;
  cursor: pointer; transition: background-color .3s cubic-bezier(.25,.46,.45,.94), color .3s cubic-bezier(.25,.46,.45,.94), border-color .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,.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: 1em 0;
  transition: background-color .3s ease, padding .3s ease;
}
.site-header.is-scrolled { padding: .5em 0; 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: .4em; display: inline-flex; }
.nav__brand img { width: 60px; height: auto; object-fit: contain; }
.nav__menu { display: flex; align-items: center; }
.nav__link {
  color: var(--white); font-size: .81em; font-weight: 500; text-transform: uppercase;
  letter-spacing: .08em; line-height: 130%; padding: 1em 1.5em;
  transition: color .3s cubic-bezier(.25,.46,.45,.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: .6em 2em; font-size: .81em; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em; line-height: 130%;
  transition: background-color .3s, color .3s;
}
.nav__cta:hover { background: var(--accent); color: var(--white); }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: .5em; }
.nav__toggle span { display: block; width: 26px; height: 2px; background: var(--white); margin: 5px 0; transition: .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,.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,.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 .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: .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: .08em; font-size: .81em; font-weight: 500; line-height: 130%;
  transition: background-color .3s cubic-bezier(.25,.46,.45,.94);
}
.reel-link:hover { background: var(--dark); color: var(--white); }
.reel-link img { width: .9em; height: .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 .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(.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: .81em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.service-card:hover .service-card__link { color: var(--hover); }
.section--dark .service-card { color: rgba(255,255,255,.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,.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: .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 .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: .1em; }
.portfolio-item__tags { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-top: .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: .8; transition: .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,.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 .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 .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: .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: .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: .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: .81em; font-weight: 600; letter-spacing: .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: .5em 0; margin-bottom: 1.6em; width: 100%;
  transition: border-color .3s cubic-bezier(.25,.46,.45,.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: .08em; border-radius: var(--pill);
  padding: 1.5em 3.6em; font-size: .81em; font-weight: 500; line-height: 130%; font-family: var(--font-secondary);
  transition: background-color .3s cubic-bezier(.25,.46,.45,.94), color .3s;
}
.submit-button:hover { background: var(--paragraph); color: var(--white); }
.form-note { font-size: .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,.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,.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: .2em;
}
.modal__close:hover { color: var(--dark); }
.modal__dialog h2 { margin-top: .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,.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,.04);
  opacity: 1; transition: opacity .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,.75); font-family: var(--font-secondary); font-size: .85em; text-align: center;
}
.lightbox__counter { color: rgba(255,255,255,.5); letter-spacing: .08em; }
.lightbox__meta:empty { display: none; }
.lightbox__close, .lightbox__nav {
  background: none; border: 0; cursor: pointer; color: var(--white);
  padding: .3em; line-height: 1; transition: opacity .2s ease;
}
.lightbox__close { position: absolute; top: 1em; right: 1.2em; font-size: 2.4em; opacity: .7; }
.lightbox__nav { justify-self: center; opacity: .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 .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,.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,.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: .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: .5em 0; margin-bottom: 1.6em; width: 100%;
  transition: border-color .3s cubic-bezier(.25,.46,.45,.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: .08em; border-radius: var(--pill);
  padding: 1.5em 3.6em; font-size: .81em; font-weight: 500; line-height: 130%; font-family: var(--font-secondary);
  transition: background-color .3s cubic-bezier(.25,.46,.45,.94), color .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: .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: .8em 1.2em; background: var(--secondary-bg); }

/* Related services on blog singles (A11) */
.related-services { padding-top: 0; }
.related-services__links { display: flex; flex-wrap: wrap; gap: .8em; margin-top: 1em; }
.related-services__link {
  display: inline-block; padding: .7em 1.4em; border: 1px solid var(--border-dark);
  border-radius: var(--pill); color: var(--dark); font-family: var(--font-secondary);
  font-size: .85em; font-weight: 500; transition: border-color .3s, color .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,.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 .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: .6em; margin-bottom: .7em; }
.plan-card__check { width: 18px; height: 18px; flex: none; margin-top: .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,.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,.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: .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 .4em; font-size: 1em; }
.contact-sidebar__item p { margin: 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 .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,.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: .8; color: rgba(13,13,13,.15); margin-bottom: -.4em; }
.process-step__heading { text-transform: uppercase; }
.section--dark .process-step__num { color: rgba(255,255,255,.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: .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 .6em; }
.cta p { color: rgba(255,255,255,.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,.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: .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: .04em; }
.footer-brand p, .footer-address p { color: rgba(255,255,255,.5); font-size: 1em; line-height: 155%; margin: 0; }
.footer-brand p { max-width: 90%; }
.footer-address a { color: rgba(255,255,255,.5); }
.footer-address a:hover { color: var(--white); }
.link-footer { color: rgba(255,255,255,.5); letter-spacing: .08em; text-transform: uppercase; padding: .6em 0; font-size: .81em; font-weight: 500; line-height: 130%; display: block; transition: color .3s cubic-bezier(.25,.46,.45,.94); }
.link-footer:hover { color: var(--sf-blue); }
.footer-divider { background: rgba(255,255,255,.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,.5); }

/* ==========================================================================
   Interior page hero + 404
   ========================================================================== */
.page-hero { background: var(--dark); padding: 12em 0 5em; }
.page-hero h1 { color: var(--white); max-width: 12em; margin-top: 0; }
.page-hero p { color: rgba(255,255,255,.75); max-width: 40em; 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: 14em 0 6em; }
.interior-hero--image { padding-top: 16em; }
.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,.72) 0%, rgba(16,41,61,.88) 100%); }
.interior-hero .content { position: relative; z-index: 2; }
.interior-hero h1 { color: var(--white); max-width: 11em; font-size: clamp(2.6rem, 5vw, 4.1rem); line-height: 1.08; }
.interior-hero__sub { color: rgba(255,255,255,.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; }

/* Team grid (About) */
.team-section .lead { color: rgba(255,255,255,.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: .9em; margin-top: .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 .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: .8em 0 .2em; }
.work-item__tags { font-family: var(--font-secondary); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .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: .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: .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 .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 .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: .9em; font-family: var(--font-secondary); font-weight: 600;
  font-size: .95em; line-height: 1.3; color: var(--dark); transition: color .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: .35rem 1.6rem; margin-bottom: 3em; }
.work-filter__link { font-family: var(--font-secondary); font-size: .78rem; font-weight: 500; letter-spacing: .02em; color: var(--accent); padding: .45rem 0; transition: color .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: .5rem; margin-bottom: 2.5em; }
.work-filter--chips .work-filter__link {
  padding: .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 .3s ease, border-color .3s ease, background-color .3s ease;
}
.work-filter--chips .work-filter__link:hover { color: var(--sf-blue); border-color: var(--sf-blue); background: rgba(5, 131, 242, .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: .4rem; }
  .work-filter--chips .work-filter__link { padding: .4rem .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: .08em; color: var(--white); }
.blog-card--light .blog-card__cat { color: var(--paragraph); }
.blog-card__cat + .blog-card__title { margin-top: .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: .5em; }
.page-numbers {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-width: 2.75em; height: 2.75em; padding: 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 .3s ease, border-color .3s ease, background-color .3s ease, transform .3s ease;
}
a.page-numbers:hover { color: var(--sf-blue); border-color: var(--sf-blue); background: rgba(5, 131, 242, .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: .1em; }
.page-numbers.prev { margin-right: .35em; }
.page-numbers.next { margin-left: .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: .1em; text-transform: uppercase; color: var(--paragraph); }
@media (max-width: 600px) {
  .page-numbers { min-width: 2.5em; height: 2.5em; padding: 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: .3em 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: .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; }
.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 .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: .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: .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: .95rem; }
.rich-text th, .rich-text td { border: 1px solid var(--border-dark); padding: .7em .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: .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: .1em .35em; font-size: .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: .8em; font-size: .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 .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: .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: .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: .25em; }
.stat-card h3 { font-size: 1.15em; }
.stat-card p { margin-top: .4em; }
.section--dark .results-item p { color: rgba(255,255,255,.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 .7s ease, transform .7s ease; }
.js .reveal.is-visible { opacity: 1; transform: 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: 11em 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 .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 .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: .8em 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; }
}