/* ==========================================================================
   Open Enterprise — Site (non-estimator) styles
   Mirrors the same --oe-* brand tokens defined in estimator.css so both
   files can be linked in either order without conflict. If the brand
   palette ever changes, update both :root blocks together.
   Scoped loosely under "oe-" (not "oe-est-", which is reserved for the
   calculator component) so the two style sheets never collide.

   Single theme only — the light/dark toggle was removed. If it ever
   comes back, reintroduce a :root[data-theme="dark"] block with the
   values that used to live there (see git history / earlier drafts).
   ========================================================================== */

:root {
  --oe-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
  --oe-font-figure: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --oe-radius: 10px;
  --oe-radius-sm: 6px;
  --oe-radius-lg: 16px;

  --oe-navy: #1f2e57;
  --oe-navy-deep: #0d1730;
  --oe-green-light: #aed791;
  --oe-green-dark: #007a45;
  --oe-green-mid: #158f5f;
  --oe-blue-badge: #9cdbf0;
  --oe-blue-pale: #d6eff8;

  --oe-bg: #f6f8fc;
  --oe-panel: #ffffff;
  --oe-panel-alt: #eef1f8;
  --oe-border: rgba(35, 47, 102, 0.14);
  --oe-border-strong: rgba(35, 47, 102, 0.24);
  --oe-ink: #1b2242;
  --oe-ink-heading: var(--oe-navy);
  --oe-ink-muted: #5a6180;
  --oe-ink-faint: #8a90ab;
  --oe-accent: var(--oe-green-mid);
  --oe-accent-strong: var(--oe-green-dark);
  --oe-accent-contrast: #ffffff;
  --oe-summary-grad: linear-gradient(165deg, #ffffff, #eef2fa 70%);
  --oe-focus: #0f7a52;

  /* Rendered height of the fixed header (logo + padding + border).
     Drives anchor offsets and sticky positions; update with the logo. */
  --oe-header-h: 129px;
}
/* Scrolled header shrinks to the same 85px it uses on mobile */
:root:has(.oe-site-header--scrolled) { --oe-header-h: 85px; }
@media (max-width: 860px) {
  :root { --oe-header-h: 85px; }
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--oe-bg);
  color: var(--oe-ink);
  font-family: var(--oe-font-ui);
  transition: background 160ms ease, color 160ms ease;
}
main { display: block; }
/* Every in-page anchor target clears the fixed header, including FAQ
   deep links like #faq-setup-fee. */
main [id] { scroll-margin-top: calc(var(--oe-header-h) + 16px); }
a { color: inherit; }
[hidden] { display: none !important; }

.oe-site-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.oe-eyebrow {
  margin: 0 0 10px;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oe-accent-strong);
}
.oe-eyebrow--on-dark { color: var(--oe-green-light); }

.oe-section { padding: 88px 0; }
.oe-section--alt { background: var(--oe-panel); }
.oe-section__heading {
  margin: 0 0 16px;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--oe-ink-heading);
  max-width: 46ch;
}
.oe-section__sub {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--oe-ink-muted);
  max-width: 68ch;
}

.oe-section__sub span {
  font-weight: bold;
  color:#0d1730;
}
/* Buttons (shared) */
.oe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border-radius: var(--oe-radius-sm);
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  transition: filter 140ms ease, transform 140ms ease, background 140ms ease;
}
.oe-btn:active { transform: translateY(1px); }
.oe-btn--primary {
  background: linear-gradient(135deg, var(--oe-green-light), var(--oe-green-dark));
  color: #ffffff;
}
.oe-btn--primary:hover { filter: brightness(1.08); }
.oe-btn--ghost-on-dark {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.oe-btn--ghost-on-dark:hover { background: rgba(255, 255, 255, 0.14); }

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */
.oe-site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 200ms ease, border-color 200ms ease;
}
/* Solidifies to solid white once scrolled past the hero, so nav stays
   legible over the lighter sections below rather than staying
   permanently transparent. */
.oe-site-header--scrolled {
  background: #ffffff;
  border-bottom: 1px solid var(--oe-border);
}
/* Unscrolled: header floats transparently over the dark hero image, so
   nav links and the menu button need a light-on-dark treatment instead
   of their normal (light-background) colors. */
.oe-site-header:not(.oe-site-header--scrolled) .oe-site-header__nav a {
  color: rgba(255, 255, 255, 0.85);
}
.oe-site-header:not(.oe-site-header--scrolled) .oe-site-header__nav a:hover {
  color: #ffffff;
}
.oe-site-header:not(.oe-site-header--scrolled) .oe-site-header__menu-btn {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}
.oe-site-header:not(.oe-site-header--scrolled) .oe-site-header__menu-btn span {
  background: rgba(255, 255, 255, 0.9);
}
.oe-site-header__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.oe-site-header__brand { position: relative; display: flex; align-items: center; }
.oe-site-header__logo {
  height: 100px;
  width: auto;
  display: block;
  transition: height 260ms ease, opacity 260ms ease;
}
/* The two logos sit stacked and crossfade on scroll instead of swapping */
.oe-site-header__logo[data-scroll-img="scrolled"] {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
}
.oe-site-header--scrolled .oe-site-header__logo { height: 56px; }
.oe-site-header--scrolled .oe-site-header__logo[data-scroll-img="unscrolled"] { opacity: 0; }
.oe-site-header--scrolled .oe-site-header__logo[data-scroll-img="scrolled"] { opacity: 1; }

.oe-site-header__nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14.5px;
  font-weight: 600;
}
.oe-site-header__nav a {
  color: var(--oe-ink-muted);
  text-decoration: none;
  transition: color 120ms ease;
}
.oe-site-header__nav a:hover { color: var(--oe-ink-heading); }
.oe-site-header__pill {
  color: var(--oe-ink-muted);
  white-space: nowrap;
}
.oe-site-header__pill--logo {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  border: none;
  /* 9cdbf0 (brand PMS 304C) at 90% opacity, per brand sheet */
  text-decoration: none;
  transition: filter 140ms ease;
}
.oe-site-header__pill--logo:hover { filter: brightness(0.97); }
.oe-site-header__pill-logo {
  height: 75px;
  width: auto;
  display: block;
  transition: height 260ms ease;
}
.oe-site-header--scrolled .oe-site-header__pill-logo { height: 44px; }

.oe-site-header__actions { display: flex; align-items: center; gap: 10px; }

.oe-site-header__menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--oe-border-strong);
  border-radius: var(--oe-radius-sm);
  background: var(--oe-panel);
  cursor: pointer;
}
.oe-site-header__menu-btn span {
  display: block;
  height: 2px;
  margin: 0 7px;
  background: var(--oe-ink-muted);
  border-radius: 1px;
}

.oe-site-mobile-nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--oe-border);
  background: var(--oe-panel);
}
.oe-site-mobile-nav a {
  padding: 14px 24px;
  text-decoration: none;
  color: var(--oe-ink);
  font-weight: 600;
  border-bottom: 1px solid var(--oe-border);
}

@media (max-width: 860px) {
  .oe-site-header__nav { display: none; }
  .oe-site-header__menu-btn { display: flex; }
  .oe-site-header__logo { height: 56px; }
}

/* --------------------------------------------------------------------------
   Keyboard focus visibility — site-wide interactive elements
   (estimator.css already covers its own .oe-est__* controls separately)
   -------------------------------------------------------------------------- */
.oe-site-header__nav a:focus-visible,
.oe-site-mobile-nav a:focus-visible,
.oe-site-header__pill:focus-visible,
.oe-site-header__menu-btn:focus-visible,
.oe-btn:focus-visible {
  outline: 2px solid var(--oe-focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.oe-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--oe-navy-deep);
  background-image: url('../media/1920x1080_OE_backgroundimage.webp');
  background-size: cover;
  background-position: center;
  color: #ffffff;
  padding: 160px 0 84px;
}
.oe-hero__mesh {
  /* Now a darkening scrim over the background photo/graphic rather than
     the old CSS-generated gradient mesh — keeps hero text legible
     regardless of what's happening in the image underneath. */
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 23, 48, 0.4), rgba(13, 23, 48, 0.65));
}
.oe-hero__inner { position: relative; z-index: 1; max-width: 760px; text-align: left; }
.oe-hero__subtitle {
  margin: 0 0 12px;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  max-width: 56ch;
}
.oe-hero__heading {
  margin: 0 0 18px;
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.12;
  font-weight: 680;
  letter-spacing: -0.015em;
  color: var(--oe-green-light);
}
.oe-hero__sub {
  margin: 0 0 30px;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 62ch;
}
.oe-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }

/* Entrance on load: heading, subtitle, body, buttons rise in sequence */
.oe-hero__heading,
.oe-hero__subtitle,
.oe-hero__sub,
.oe-hero__cta {
  animation: oe-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.oe-hero__subtitle { animation-delay: 120ms; }
.oe-hero__sub { animation-delay: 240ms; }
.oe-hero__cta { animation-delay: 360ms; }
@keyframes oe-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
/* --------------------------------------------------------------------------
   Problem section
   -------------------------------------------------------------------------- */
.oe-problem { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; }
.oe-problem__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.oe-problem__card {
  padding: 18px 18px 18px 16px;
  border-left: 3px solid var(--oe-navy);
  background: var(--oe-panel-alt);
  border-radius: 0 var(--oe-radius-sm) var(--oe-radius-sm) 0;
}
.oe-problem__card--accent { border-left-color: var(--oe-accent-strong); }
#problem.oe-section { background: var(--oe-blue-pale); }
.oe-problem__card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 650; color: var(--oe-ink-heading); }
.oe-problem__card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--oe-ink-muted); }

@media (max-width: 900px) {
  .oe-problem { grid-template-columns: 1fr; }
  .oe-problem__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Commitment band ("You run the work / We run the GIS") — its own
   section, sized to the photo's natural aspect ratio rather than a
   fixed short height, and constrained to the same content width as
   the rest of the page rather than bleeding to the viewport edge.
   No vertical section padding and no radius here on purpose — the
   photo IS the section's full height, so it reads as the section's
   own background rather than a card floating inside it. The outer
   horizontal gutters (outside the 1160px container) still show the
   page's base gray-blue, which is intentional.
   -------------------------------------------------------------------------- */
#commitment.oe-section { padding: 0; }

.oe-wyg__band {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--oe-navy-deep);
  background-image:
    linear-gradient(180deg, rgba(13, 23, 48, 0.1), rgba(13, 23, 48, 0.55)),
    url('../media/stock_worker.webp');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 36px;
}

/* --------------------------------------------------------------------------
   What you get
   -------------------------------------------------------------------------- */
.oe-wyg__intro { max-width: 680px; margin-bottom: 40px; }

.oe-wyg__body {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: stretch;
}

.oe-wyg__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 32px;
  align-content: start;
}
.oe-wyg__item h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 650; color: var(--oe-ink-heading); }
.oe-wyg__item p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--oe-ink-muted); }

.oe-wyg__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oe-wyg__panel {
  background: linear-gradient(165deg, rgba(31, 46, 87, 0.6), rgba(13, 23, 48, 0.6) 75%);
  color: #ffffff;
  border-radius: var(--oe-radius-lg);
  padding: 32px 28px;
  max-width: 420px;
  box-shadow: 0 18px 40px rgba(13, 23, 48, 0.35);
}
.oe-wyg__panel h3 { margin: 4px 0 14px; font-size: 30px; line-height: 1.3; font-weight: 650; color: #ffffff; }
.oe-wyg__panel-line { display: block; }
.oe-wyg__divider {
  display: block;
  /* Width is set dynamically in site.js to match the rendered width of
     "You run the work." — can't be done reliably in CSS alone since it
     depends on actual font metrics. This is just a safe fallback in case
     JS hasn't run yet. */
  width: 140px;
  height: 3px;
  margin: 10px 0;
  background: var(--oe-green-light);
  border-radius: 2px;
  transform-origin: left center;
}
/* Draws in left to right when the commitment panel comes into view.
   Only hidden when JS is running to reveal it (html.oe-js). */
html.oe-js .oe-wyg__divider {
  transform: scaleX(0);
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 250ms;
}
html.oe-js .oe-wyg__panel.is-inview .oe-wyg__divider { transform: scaleX(1); }
.oe-wyg__panel p { margin: 0; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, 0.8); }

@media (max-width: 900px) {
  .oe-wyg__band { aspect-ratio: 4 / 5; padding: 22px; }
  .oe-wyg__panel { max-width: 100%; }
  .oe-wyg__body { grid-template-columns: 1fr; }
  .oe-wyg__photo { order: -1; }
  .oe-wyg__photo-img { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .oe-wyg__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   How it works / steps
   -------------------------------------------------------------------------- */
/* No bottom padding: the navy photo strip is the section's last element
   and should sit flush against the next section. */
#how-it-works.oe-section {
  position: relative;
  background-color: var(--oe-blue-pale);
  padding-bottom: 0;
}
.oe-steps-image {
  margin: 36px 0 40px;
}
.oe-steps-image__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Full-bleed navy photo strip. Photos are cropped to a fixed 3:2 frame
   so source images of any size line up as an even row. */
.oe-photo-strip {
  background: var(--oe-navy);
  padding: 32px 0;
}
.oe-photo-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.oe-photo-strip__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--oe-navy-deep);
}

/* Crop focus per photo: keep hard hats in frame when the 3:2 / 16:9 crop
   trims top and bottom. */
/* Staggered reveal, triggered by .is-inview on the grid (site.js) */
html.oe-js .oe-photo-strip__img {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.oe-js .oe-photo-strip__img:nth-child(2) { transition-delay: 150ms; }
html.oe-js .oe-photo-strip__img:nth-child(3) { transition-delay: 300ms; }
html.oe-js .oe-photo-strip__grid.is-inview .oe-photo-strip__img { opacity: 1; transform: none; }

.oe-photo-strip__img--linework { object-position: 50% 20%; }
.oe-photo-strip__img--panel { object-position: 50% 15%; }

@media (max-width: 700px) {
  .oe-photo-strip { padding: 20px 0; }
  .oe-photo-strip__grid { grid-template-columns: 1fr; gap: 14px; }
  .oe-photo-strip__img { aspect-ratio: 16 / 9; }
}

/* --------------------------------------------------------------------------
   When needs change (scope): text list left, photo right
   -------------------------------------------------------------------------- */
.oe-scope__heading { margin-bottom: 32px; }
.oe-scope {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  max-width: 1000px;
}
.oe-scope__list {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.oe-scope__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--oe-navy);
}
/* Darkened brand light blue: #9CDBF0 fails contrast on white for text */
.oe-scope__tag {
  margin: 2px 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #2f7d9e;
}
.oe-scope__body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--oe-ink);
  max-width: 44ch;
}
.oe-scope__photo-img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  /* Wide source; subject sits right of center */
  object-position: 72% 50%;
  background: var(--oe-panel-alt);
}

@media (max-width: 900px) {
  .oe-scope { grid-template-columns: 1fr; gap: 36px; }
  .oe-scope__body { max-width: 62ch; }
}

/* --------------------------------------------------------------------------
   Self-qualification
   -------------------------------------------------------------------------- */
/* ---- Self-qualification: fit cards ---- */
.oe-fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 330px));
  justify-content: start;
  gap: 56px;
  margin: 32px 0 44px;
}

.oe-fit__col {
  display: flex;
  flex-direction: column;
}

.oe-fit__col-header {
  display: block;
  width: 100%;
  height: auto;
}

.oe-fit__col-frame {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: 1px solid var(--oe-border);
  border-top: none;
  border-radius: 0 0 var(--oe-radius) var(--oe-radius);
  overflow: hidden;
  background: var(--oe-panel);
}
.oe-fit__col--yes .oe-fit__col-frame { border-color: var(--oe-accent-strong); }

.oe-fit__col-body { padding: 20px 20px 22px; flex: 1; }
.oe-fit__col-body h3 {
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--oe-border);
  font-size: 18px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--oe-ink-heading);
}
.oe-fit__col-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.oe-fit__col-body li {
  padding-left: 26px;
  position: relative;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--oe-ink-muted);
}
.oe-fit__col-body li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 17px;
  color: var(--oe-accent-strong);
  font-weight: 700;
}

.oe-fit__col-bar { width: 100%; }
.oe-fit__col--yes .oe-fit__col-bar { height: 6px; background: var(--oe-accent-strong); }
.oe-fit__col--no .oe-fit__col-bar { height: 3px; background: var(--oe-border-strong); }

@media (max-width: 760px) {
  .oe-fit { grid-template-columns: minmax(0, 330px); }
}

/* ---- Interop callout ---- */
.oe-interop {
  padding: 32px 40px;
  border-radius: var(--oe-radius);
  background: #DEF1FB;
}
.oe-interop h3 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 650;
  color: var(--oe-ink-heading);
  line-height: 1.35;
}
.oe-interop p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--oe-ink-muted);
  max-width: 68ch;
}
/* --------------------------------------------------------------------------
   Pricing intro + next-step note (estimator itself styled by estimator.css)
   -------------------------------------------------------------------------- */
.oe-pricing-intro { max-width: 720px; margin-bottom: 8px; }
.oe-pricing-next {
  max-width: 1160px;
  margin: 28px auto 0;
  padding: 0 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--oe-ink-muted);
}
.oe-pricing-next strong { color: var(--oe-ink-heading); }

/* The estimator brings its own generous top/bottom padding designed for
   standalone use. Nested inside .oe-section (which also pads), that would
   stack into an oversized gap — trim just the top here rather than
   editing estimator.css, so the component stays untouched elsewhere. */
#pricing.oe-section { padding-bottom: 56px; }
#pricing.oe-section {
  position: relative;
  color: #ffffff;
  background-color: var(--oe-navy-deep);
  background-image:
    linear-gradient(180deg, rgba(13, 23, 48, 0.25), rgba(13, 23, 48, 0.5)),
    url('../media/OE_background_image_flipped.webp');
  background-size: cover;
  background-position: center;
}
#pricing .oe-pricing-intro .oe-section__heading { color: var(--oe-green-light); }
#pricing .oe-pricing-intro .oe-section__sub { color: rgba(255, 255, 255, 0.78); }
#pricing .oe-pricing-next { color: var(--oe-green-light); }
#pricing .oe-pricing-next strong { color: var(--oe-green-light); }
/* Match .oe-site-container's width and 24px gutters at every size so the
   estimator lines up with the section intro and the note below it. */
#pricing .oe-est { padding-top: 12px; padding-left: 24px; padding-right: 24px; max-width: 1160px; }
#pricing .oe-est__summary { top: calc(var(--oe-header-h) + 16px); }
/* The estimator's own intro heading/sub sit outside the white card, so
   they need the same dark-bg treatment as the section intro above them
   — otherwise they inherit estimator.css's light-theme navy/gray, which
   is nearly invisible against this section's new dark background. */
#pricing .oe-est__heading { color: var(--oe-green-light); }
#pricing .oe-est__sub { color: rgba(255, 255, 255, 0.78); }

/* --------------------------------------------------------------------------
   Why GEOACE
   -------------------------------------------------------------------------- */
.oe-why-callout {
  margin: 18px 0 0;
  padding: 16px 20px;
  border-radius: var(--oe-radius-sm);
  background: var(--oe-panel-alt);
  border-left: 3px solid var(--oe-accent-strong);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--oe-ink);
  max-width: 68ch;
}

.oe-proof { margin: 28px 0 0; }
.oe-proof__label {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--oe-ink-faint);
}
.oe-proof__grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.oe-proof__item {
  padding: 14px 16px;
  border: 1px solid var(--oe-border);
  border-radius: var(--oe-radius-sm);
  background: var(--oe-panel);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.oe-proof__logo-box {
  flex-shrink: 0;
  width: 92px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Client logos vary wildly in native shape (a wide wordmark next to two
     round seals) — a fixed box with object-fit:contain on the image makes
     all three present at a consistent size regardless of that. A fixed
     white chip also keeps them readable regardless of site theme, same
     reasoning as the GEOACE nav badge. */
  background: #ffffff;
  border-radius: 4px;
  padding: 6px;
}
.oe-proof__logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.oe-proof__item p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--oe-ink-muted);
}

@media (max-width: 560px) {
  .oe-proof__item { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Why GEOACE + FAQ (paired side by side, per the wireframe)
   -------------------------------------------------------------------------- */
.oe-why-faq {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
}
.oe-why-faq__why { position: sticky; top: calc(var(--oe-header-h) + 16px); }
.oe-why-faq__faq .oe-section__heading { margin-bottom: 24px; }

@media (max-width: 900px) {
  .oe-why-faq { grid-template-columns: 1fr; }
  .oe-why-faq__why { position: static; }
}

/* --------------------------------------------------------------------------
   Footer / final CTA
   -------------------------------------------------------------------------- */
.oe-footer {
  background: var(--oe-navy-deep);
  color: #ffffff;
  padding: 56px 0;
}
.oe-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.oe-footer__copy { max-width: 620px; }
.oe-footer__copy h2 { margin: 0 0 10px; font-size: 26px; font-weight: 650; color: var(--oe-green-light); }
.oe-footer__copy p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.75); }
.oe-footer__contact { font-size: 13.5px; color: rgba(255, 255, 255, 0.6); }
.oe-footer__contact a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }
.oe-footer__cta { display: flex; flex-direction: column; gap: 10px; min-width: 200px; }

/* --------------------------------------------------------------------------
   Scroll-driven reveal — native CSS, no JS, no library. Progressive
   enhancement: every element below is fully visible by default; the
   fade/rise only applies inside @supports, so browsers without native
   animation-timeline support (older Firefox/Safari) just see the
   normal, static page. Content is never gated behind this loading.
   -------------------------------------------------------------------------- */
/* FAQ items animate their children, not the <details> itself: a transform
   on a deep-link target throws off the scroll position by the offset. */
@supports (animation-timeline: view()) {
  .oe-problem__card,
  .oe-wyg__item,
  .oe-scope__item,
  .oe-scope__photo-img,
  .oe-fit__col,
  .oe-interop,
  .oe-proof__item,
  .oe-est__faq-item > *,
  .oe-steps-image__img {
    animation: oe-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
}

@keyframes oe-reveal {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .oe-btn { transition: none; }
  .oe-hero__heading,
  .oe-hero__subtitle,
  .oe-hero__sub,
  .oe-hero__cta { animation: none; }
  .oe-site-header__logo,
  .oe-site-header__pill-logo { transition: none; }
  html.oe-js .oe-wyg__divider { transform: none; transition: none; }
  html.oe-js .oe-photo-strip__img { opacity: 1; transform: none; transition: none; }
  .oe-problem__card,
  .oe-wyg__item,
  .oe-scope__item,
  .oe-scope__photo-img,
  .oe-fit__col,
  .oe-interop,
  .oe-proof__item,
  .oe-est__faq-item > *,
  .oe-steps-image__img {
    animation: none;
  }
}