/* ============================================================
   Adobe Fonts faces, declared here rather than relying on the kit
   stylesheet so the theme carries its own typography. These are the faces
   production serves: franklin-gothic-urw for body copy (roman + italic) and
   franklin-gothic-urw-cond for headings.
   ============================================================ */
@font-face {
  font-family: "franklin-gothic-urw";
  src: url("https://use.typekit.net/af/79292d/00000000000000007735d6ac/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),
       url("https://use.typekit.net/af/79292d/00000000000000007735d6ac/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),
       url("https://use.typekit.net/af/79292d/00000000000000007735d6ac/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
  font-display: auto; font-style: normal; font-weight: 400; font-stretch: normal;
}

@font-face {
  font-family: "franklin-gothic-urw";
  src: url("https://use.typekit.net/af/c58440/00000000000000007735d6dd/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),
       url("https://use.typekit.net/af/c58440/00000000000000007735d6dd/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),
       url("https://use.typekit.net/af/c58440/00000000000000007735d6dd/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
  font-display: auto; font-style: italic; font-weight: 400; font-stretch: normal;
}

@font-face {
  font-family: "franklin-gothic-urw-cond";
  src: url("https://use.typekit.net/af/d93512/00000000000000007735d6b3/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),
       url("https://use.typekit.net/af/d93512/00000000000000007735d6b3/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),
       url("https://use.typekit.net/af/d93512/00000000000000007735d6b3/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
  font-display: auto; font-style: normal; font-weight: 700; font-stretch: normal;
}

/* ============================================================
   Statera — shared styles
   Design tokens pulled from the design (file: nilesh-pro-11-aug)
   ============================================================ */

:root {
  /* Colors */
  --signal-blue: #65A8E5;
  --charcoal: #333333;
  --green-accent: #A8E565; /* "Stronger Green" — bright CTA green */
  --green-pale: #E2E6D1; /* pale green section background */
  --green-pale-2: #E6E9D7; /* "Softer Green" */
  --fog: #F2F2F2;
  --text-grey: #404040;
  --footer-ink: #304A69;
  --footer-ink-soft: #4D7096;
  --black: #000000;
  --white: #FFFFFF;

  /* Type */
  /* Adobe Fonts kit myo1msh, matching production (see /home-2/): headings are
     set in Franklin Gothic URW Condensed, body copy in Adobe Caslon Pro. The
     design is drawn in Libre Franklin, which stays as the fallback — the
     font is the one intentional departure from the design. */
  /* Production sets body copy in franklin-gothic-urw and headings in the
     condensed cut; /about-2/ on production confirms both. */
  --font: 'franklin-gothic-urw', 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'franklin-gothic-urw-cond', 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;

  /* Layout */
  --nav-h: 70px; /* nav container height */
  --page-max: 1512px;
  /* Desktop content column. 1512 canvas - 1158 content = 177 each side. */
  --content-max: 1158px;
  --gutter: 177px;
  --radius-lg: 30px;
  --radius-md: 20px;
  --radius-sm: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Production applies a 1.5em bottom margin to every paragraph from a stylesheet
   that is not enumerable from the page (it survives the reset above and shows
   up as one line-height of space under every <p>). It threw section heights out
   by 25-85px. Scoped to the section roots so it cannot affect editor chrome or
   other plugins' output. */
body.wp-theme-statera .st-root p,
body.wp-theme-statera .about-root p,
body.wp-theme-statera .plan-root p,
body.wp-theme-statera .inv-root p,
body.wp-theme-statera .team-root p,
body.wp-theme-statera .member-root p {
  margin-block: 0;
}

html { scroll-behavior: smooth; overflow-x: clip; }

/* Elementor's kit writes ".elementor-kit-N { font-family: ... }" straight onto
   the body at (0,1,0), which beats a bare "body" rule. The theme's own body
   class lifts this to (0,1,1) so the design's typeface governs. */
body,
body.wp-theme-statera {
  font-family: var(--font);
  color: var(--charcoal);
  background: var(--fog);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Elementor image widgets: give lazy-loaded images a sized box so they
   actually load (a lazy img with a 0x0 box never intersects the viewport
   and stays blank). Per-widget widths in Elementor's own post CSS are
   more specific and win over this. */
.elementor-widget-image img { width: 100%; height: auto; }

/* Team page "Meet the Owners": enlarge leadership photos to match the
   design (two tall portraits on the left of the card). */
.elementor-element-0385813, .elementor-element-81d06bd { width: 285px !important; height: 490px !important; align-self: center; }
.elementor-element-0385813 .e-con-inner, .elementor-element-81d06bd .e-con-inner { height: 100%; }
.elementor-element-a828bca, .elementor-element-dbad3c6 { width: 100% !important; height: 100% !important; }
.elementor-element-a828bca img, .elementor-element-dbad3c6 img { width: 100% !important; height: 100% !important; object-fit: cover; }

.site-page {
  max-width: var(--page-max);
  margin: 0 auto;
  overflow: visible;
}

.container {
  max-width: var(--content-max);
  margin: 0 auto;
}

/* ---------- Type scale (from the design text styles) ---------- */
.eyebrow {
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.2px;
}

/* Elementor's global kit writes ".elementor-kit-N h1" (0,1,1) and loads after
   the theme, so a bare "h1" here loses and headings render at the kit's sizes.
   The body class WordPress prints for the active theme lifts these to (0,1,2),
   which wins without depending on the kit's id. */
body.wp-theme-statera h1, body.wp-theme-statera .h1 {
  font-size: 54px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1.62px;
}

body.wp-theme-statera h2, body.wp-theme-statera .h2 {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1.44px;
}

body.wp-theme-statera h3, body.wp-theme-statera .h3 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.64px;
}

.body-lg {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.54px;
}

.body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.16px;
}

/* Elementor's kit styles link hover with the accent colour, and every button
   here is an <a>, so the label turned green on hover. The accent green belongs
   on the arrow disc and on the dark pill's fill — never on the label itself.
   Each button keeps its resting text colour. */
/* The disc button keeps its white pill and black label; only the disc moves to
   the accent (node 40:5212). */
body.wp-theme-statera a.btn-primary:focus-visible,
body.wp-theme-statera a.st-btn-disc:focus-visible {
  color: var(--black);
}
/* :hover is deliberately NOT gated to (hover: hover) here. A tap on a touch
   device leaves a sticky :hover on the link, and the Elementor kit's
   unguarded `.elementor-kit-5 a:hover { color: accent }` would then paint the
   label green and keep it green after the tap. Black is the resting colour,
   so pinning it under :hover/:active is invisible on desktop and exactly
   what touch needs. */
body.wp-theme-statera a.btn-primary:hover,
body.wp-theme-statera a.st-btn-disc:hover,
body.wp-theme-statera a.btn-primary:active,
body.wp-theme-statera a.st-btn-disc:active {
  color: var(--black);
}

/* The plain white pills have no disc to colour, so they take the same accent
   fill as the dark pill, with a black label. */
body.wp-theme-statera a.btn-light:focus-visible,
body.wp-theme-statera a.team-lead-btn:focus-visible,
body.wp-theme-statera a.member-hero__schedule:focus-visible {
  color: var(--black);
}
/* :hover split from :focus-visible — see the touch note above btn-primary. */
@media (hover: hover) and (pointer: fine) {
  body.wp-theme-statera a.btn-light:hover,
  body.wp-theme-statera a.team-lead-btn:hover,
  body.wp-theme-statera a.member-hero__schedule:hover {
    color: var(--black);
  }
}
  body.wp-theme-statera a.btn-light:active,
  body.wp-theme-statera a.team-lead-btn:active,
  body.wp-theme-statera a.member-hero__schedule:active {
    color: var(--black);
  }

/* The dark pill inverts on hover: #A8E565 behind #333333 (node 40:5212). The
   prefix is only here to outrank the kit's own link hover colour. */
body.wp-theme-statera a.btn-dark:focus-visible,
body.wp-theme-statera a.member-btn-dark:focus-visible {
  color: var(--charcoal);
}
/* :hover split from :focus-visible — see the touch note above btn-primary. */
@media (hover: hover) and (pointer: fine) {
  body.wp-theme-statera a.btn-dark:hover,
  body.wp-theme-statera a.member-btn-dark:hover {
    color: var(--charcoal);
  }
}
  body.wp-theme-statera a.btn-dark:active,
  body.wp-theme-statera a.member-btn-dark:active {
    color: var(--charcoal);
  }

body.wp-theme-statera a.btn-ghost:focus-visible {
  color: var(--charcoal);
}
/* :hover split from :focus-visible — see the touch note above btn-primary. */
@media (hover: hover) and (pointer: fine) {
  body.wp-theme-statera a.btn-ghost:hover {
    color: var(--charcoal);
  }
}
  body.wp-theme-statera a.btn-ghost:active {
    color: var(--charcoal);
  }

/* Card-shaped links: the label colours are set on the inner spans, but the
   anchor itself must not inherit the kit's green or any text added later
   picks it up. */
body.wp-theme-statera a.legal-cta:focus-visible,
body.wp-theme-statera a.team-card:focus-visible,
body.wp-theme-statera a.inv-person-card:focus-visible {
  color: inherit;
}
/* :hover split from :focus-visible — see the touch note above btn-primary. */
@media (hover: hover) and (pointer: fine) {
  body.wp-theme-statera a.legal-cta:hover,
  body.wp-theme-statera a.team-card:hover,
  body.wp-theme-statera a.inv-person-card:hover {
    color: inherit;
  }
}
  body.wp-theme-statera a.legal-cta:active,
  body.wp-theme-statera a.team-card:active,
  body.wp-theme-statera a.inv-person-card:active {
    color: inherit;
  }

/* ---------- Buttons ---------- */
/* Primary: white pill + green arrow disc (from hero "Start a Conversation") */
.btn-primary {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: 20px;
  padding-left: 19px;
  background: var(--white);
  border: none;
  border-radius: 80px;
  /* Clips the square arrow disc into the pill's rounded end (node 39:2376:
     the disc is a plain 50 x 50.005 rect, shaped by the pill's own clip). */
  overflow: clip;
  cursor: pointer;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.16px;
  color: var(--black);
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}
/* The white pill keeps its fill; the design moves only the disc to the accent
   green (node 40:5212). */
.btn-primary:focus-visible .btn-disc { background: var(--green-accent); }
/* :hover split from :focus-visible — a tap has no "unhover", so unguarded
   this disc would stay green on touch until the user tapped elsewhere. */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover .btn-disc { background: var(--green-accent); }
}
  .btn-primary:active .btn-disc { background: var(--green-accent); }

.btn-primary .btn-disc {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50.005px;
  background: var(--green-accent);
  flex: none;
}
/* The arrow's centre sits 3px left of the disc's centre (node 39:2379), so
   the glyph clears the pill's clipped right edge. */
.btn-primary .btn-disc img { width: 24px; height: 24px; margin-right: 6px; }

/* Outline pill (nav CTA) */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  padding: 14px 18px;
  border: 1px solid var(--charcoal);
  border-radius: 90px;
  background: transparent;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.14px;
  color: var(--charcoal);
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
/* Hover-only decorative fill — no focus-visible pair exists for this one, so
   the whole rule is guarded to keep a tap from leaving it stuck inverted. */
@media (hover: hover) and (pointer: fine) {
  .btn-outline:hover { background: var(--charcoal); color: var(--white); }
}
  .btn-outline:active { background: var(--charcoal); color: var(--white); }

/* Ghost text button ("Read more") */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  padding: 14px 20px;
  border-radius: 80px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.16px;
  color: var(--charcoal);
  white-space: nowrap;
}

/* Numbered badge (01 / 02 / 03 …) */
.badge-num {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--white);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--charcoal);
  flex: none;
}

/* ---------- CTA section (one shared card, every page) ---------- */
/* The closing CTA is a single design rendered everywhere by
   statera_render_cta() — via the "Statera CTA Section" widget or the
   [statera_cta] shortcode in footer.php. Copy and the default photo live in
   Customizer → Statera: CTA section. These rules are global (style.css) so
   no per-page sheet is needed. The legacy per-page CTA styles in
   home-sections/about/planning/investment/team.css remain for the five
   deprecated widgets they were built for; nothing new emits them. */
/* The CTA's wrapper carries the spacing, same model as the Elementor
   section wrappers: 56px gap above, 100px top padding before the card. */
.st-cta-wrap {
  margin-top: 56px;
  padding-top: 100px;
}
.st-cta-card {
  width: var(--content-max);
  /* Track the section gutters (177px desktop, 60px mid) so the card stays
     flush with the sections and footer below the 1512px canvas; the plain
     40px margin used before left the card wider than every section on
     laptop-width viewports. */
  max-width: calc(100% - (var(--gutter) * 2));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 30px 30px 30px 50px;
  background: var(--green-pale);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.st-cta-card__content {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.st-cta-card__text {
  width: 542px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
/* Design type: eyebrow 16/1.3 w500 #686E76 ls -0.2 uppercase;
   h2 48/1.1 w600 ls -1.44; body 20/1.5 — same spec the per-page versions
   each carried. */
.st-cta-card__eyebrow {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: #686E76;
  text-transform: uppercase;
}
.st-cta-card__title {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1.44px;
  color: var(--black);
}
.st-cta-card__body {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--black);
}
/* White arrow glyph points left in the source asset; the blue disc's arrow
   points right. Same flip the per-page sheets each declared. */
.st-cta-card .btn-disc { background: var(--signal-blue); }
.st-cta-card .btn-disc img { transform: scaleX(-1); }
.st-cta-card__media {
  flex: 1 1 0;
  min-width: 0;
  height: 530px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.st-cta-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}

@media (max-width: 1180px) {
  .st-cta-card { flex-direction: column; align-items: stretch; gap: 32px; padding: 30px; }
  .st-cta-card__content { gap: 28px; }
  .st-cta-card__text { width: 100%; gap: 20px; }
  /* flex: 1 1 0 is for the row direction — its basis: 0 becomes a main-axis
     size of 0 once the card stacks, zeroing the panel no matter what height
     is set. Release it so the height rules below govern. */
  .st-cta-card__media { flex: none; width: 100%; height: 320px; }
}

@media (max-width: 900px) {
  /* Mobile sections drop to a 20px side gutter (they override padding
     directly, --gutter stays 60px), so the card follows suit. */
  .st-cta-card { max-width: calc(100% - 40px); }
}

@media (max-width: 600px) {
  .st-cta-wrap { margin-top: 36px; padding-top: 48px; }
  .st-cta-card { gap: 24px; padding: 24px; border-radius: 24px; }
  .st-cta-card__title { font-size: 32px; letter-spacing: -0.8px; }
  .st-cta-card__body { font-size: 16px; }
  .st-cta-card__media { height: 240px; border-radius: 16px; }
}

/* ---------- Nav ---------- */
.nav {
  position: relative;
  z-index: 50;
  max-width: 1420px;
  margin: 0 auto;
  /* Reference navbar (statera_web .nav-row): 18px vertical padding around
     the 66px logo — the bar is content-sized, not fixed-height. */
  padding: 18px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-sm);
}
.nav-logo { display: flex; align-items: center; }
/* Reference navbar (statera_web): logo is height-driven, 66px desktop. */
.nav-logo img { width: auto; height: 66px; }
.nav-menu {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-menu a {
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.14px;
  color: var(--charcoal);
  white-space: nowrap;
  transition: background .2s ease;
}
/* Hover-only pill background — guarded so a tapped nav link doesn't keep its
   pill lit until the next tap elsewhere. */
@media (hover: hover) and (pointer: fine) {
  .nav-menu a:hover { background: rgba(0,0,0,.06); }
}
  .nav-menu a:active { background: rgba(0,0,0,.06); }

/* Elementor's kit colours every link's hover state with the accent green. The
   accent is a hover colour for discs and fills, never for a nav label, so the
   menu keeps its resting colour and only the pill behind it reacts. */
body.wp-theme-statera .nav-menu a:focus-visible {
  color: inherit;
}
/* :hover split from :focus-visible — see the touch note above btn-primary. */
@media (hover: hover) and (pointer: fine) {
  body.wp-theme-statera .nav-menu a:hover {
    color: inherit;
  }
}
  body.wp-theme-statera .nav-menu a:active {
    color: inherit;
  }

.nav-menu a.active { background: var(--charcoal); color: var(--white); }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: var(--charcoal);
  border-radius: 2px;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--fog);
  padding: 40px var(--gutter) 10px;
  color: var(--footer-ink);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 70px;
  padding-top: 80px;
}
.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 363px;
  flex: none;
}
.footer-brand img.footer-logo { width: 189px; height: auto; }
.footer-brand p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
.footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-social .social-disc {
  display: grid;
  place-items: center;
  width: 47.9px;
  height: 47.9px;
  border-radius: 50%;
  background: var(--signal-blue);
  flex: none;
}
.footer-social .social-disc img { width: 18px; height: 18px; }
.footer-social span {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.footer-links {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  width: 225px;
  flex: none;
  font-size: 16px;
  letter-spacing: -0.16px;
}
/* The body prefix outranks the Elementor kit's `.elementor-kit-5 h4`
   (20px/1.5em), which otherwise wins on equal specificity by loading later. */
body.wp-theme-statera .footer-links h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 8px;
}
.footer-links ul { display: flex; flex-direction: column; gap: 8px; }
/* Stacked disclosure cards (Form CRS + Form ADV) keep the group's 15px rhythm. */
.cta-card + .cta-card { margin-top: 15px; }
.footer-links a {
  font-weight: 500;
  line-height: 1.3;
  opacity: .7;
  transition: opacity .2s ease;
}
/* Hover-only decorative fade — guarded so a tapped link doesn't stay at full
   opacity until the next tap elsewhere. */
@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover { opacity: 1; }
}
  .footer-links a:active { opacity: 1; }

/* Footer text links and disclosure cards turn accent green on hover. On
   Elementor pages the kit's global `a:hover` does this; the team member bio
   template doesn't load the kit, so pin it here for parity everywhere. */
@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover,
  .footer-bottom a:hover,
  .footer-social:hover,
  .footer-ctas .cta-card:hover { color: var(--green-accent); }
}
.footer-links a:focus-visible,
.footer-bottom a:focus-visible,
.footer-social:focus-visible,
.footer-ctas .cta-card:focus-visible { color: var(--green-accent); }

.footer-ctas {
  display: flex;
  flex-direction: column;
  gap: 39px;
  width: 363px;
  flex: none;
}
body.wp-theme-statera .footer-ctas h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.16px;
  margin-bottom: 15px;
}
.cta-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  background: var(--white);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cta-card:focus-within { box-shadow: 0 8px 24px rgba(48,74,105,.12); }
/* :hover split from :focus-within — a tap on the card would otherwise leave
   the shadow stuck on until the user tapped elsewhere. */
@media (hover: hover) and (pointer: fine) {
  .cta-card:hover { box-shadow: 0 8px 24px rgba(48,74,105,.12); }
}
  .cta-card:active { box-shadow: 0 8px 24px rgba(48,74,105,.12); }

.cta-card .icon-badge {
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  border-radius: 10px;
  background: var(--footer-ink);
  flex: none;
}
.cta-card .icon-badge img { width: 28px; height: 28px; }
.cta-card .cta-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
}
/* the design keeps this label on a single line; the browser needs ~219px for
   it against a 218px box, so stop it wrapping into a second line. */
.cta-card .cta-text .cta-sub { color: var(--footer-ink-soft); white-space: nowrap; }
.cta-card .cta-text .cta-title {
  color: var(--signal-blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cta-card > svg.cta-chevron { width: 28px; height: 28px; flex: none; color: var(--black); }
.cta-card:focus-within .cta-chevron { color: var(--signal-blue); }
@media (hover: hover) and (pointer: fine) {
  .cta-card:hover .cta-chevron { color: var(--signal-blue); }
}
  .cta-card:active .cta-chevron { color: var(--signal-blue); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 51px;
  padding: 15px 0;
  border-top: 1px solid rgba(0,0,0,.1);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.16px;
  color: var(--black);
}
.footer-bottom p, .footer-bottom a { opacity: .7; }
.footer-bottom nav { display: flex; gap: 32px; }
/* wp_nav_menu wraps the links in <ul class="menu"> once a menu is assigned
   in Appearance > Menus; keep the bar's flex rhythm on that list. */
.footer-bottom nav ul { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.footer-links ul.menu { list-style: none; margin: 0; padding: 0; }
/* Hover-only decorative fade — guarded so a tapped link doesn't stay at full
   opacity until the next tap elsewhere. */
@media (hover: hover) and (pointer: fine) {
  .footer-bottom a:hover { opacity: 1; }
}
  .footer-bottom a:active { opacity: 1; }

/* ---------- Section helpers ---------- */
/* STRICT spacing convention, every page: sections carry 100px padding top
   and bottom, and consecutive sections are separated by a 56px gap
   (margin-top: 56px on the section, or the footer's own top margin).
   Mobile steps down to 60px padding. Do not invent per-section values. */
.section { padding: 100px 0; }
.section-center { text-align: center; }
.section-center .eyebrow { display: block; }

/* ---------- Rail arrows (shared: member page, investments insights) ---------- */
.member-rail__nav { display: flex; gap: 17px; }
/* The body prefix outranks the Elementor kit's `.elementor-kit-5 button
   { border-radius: 15px }` (0,1,2), which squared the discs off on
   Elementor pages — member pages never load the kit, so only they kept the
   full 80px disc. */
body.wp-theme-statera .member-rail__arrow {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 80px;
  background: var(--white);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease;
}
.member-rail__arrow img { width: 38px; height: 38px; display: block; }
.member-rail__arrow--prev img { transform: rotate(180deg); }
.member-rail__arrow[disabled] { opacity: .35; cursor: default; }
.member-rail__arrow:not([disabled]):focus-visible { background: var(--green-accent); }
@media (hover: hover) and (pointer: fine) {
  .member-rail__arrow:not([disabled]):hover { background: var(--green-accent); }
}
  .member-rail__arrow:not([disabled]):active { background: var(--green-accent); }

/* Visible on every page the insights rail appears on (home, investments,
   member pages). The section is a centred column flex, so the nav takes the
   row's 1192 width and right-aligns flush with it; gap and the 30px drop
   match the member page's rail. main.js dims the arrows when the row has no
   overflow to scroll. */
.st-ins-nav {
  display: flex;
  gap: 17px;
  justify-content: flex-end;
  width: 1192px;
  max-width: 100%;
  margin-top: -30px; /* nets 30px under the rail against the section's 60px gap */
}
@media (max-width: 900px) {
  .st-ins-nav { width: calc(100% - 40px); }
}
@media (max-width: 600px) {
  .st-ins-nav { justify-content: center; }
}

/* Card used across service / process grids */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  :root { --gutter: 60px; }
  .footer { padding: 40px 60px 10px; }
  .footer-top { flex-wrap: wrap; }
}

@media (max-width: 900px) {
  /* Bare "h1, .h1" here loses to the desktop rule at line 142
     (body.wp-theme-statera h1 = 0,1,2 beats h1 = 0,0,1) regardless of this
     media query matching, so headings never actually shrank below 900px.
     Same body.wp-theme-statera prefix restores equal specificity so the
     later (mobile) rule wins as intended. */
  body.wp-theme-statera h1, body.wp-theme-statera .h1 { font-size: 38px; letter-spacing: -1px; }
  body.wp-theme-statera h2, body.wp-theme-statera .h2 { font-size: 28px; letter-spacing: -0.8px; }
  body.wp-theme-statera h3, body.wp-theme-statera .h3 { font-size: 24px; }

  .container { padding: 0 20px; }

  /* The open menu stacks under the bar, so the fixed desktop height is dropped. */
  .nav { flex-wrap: wrap; height: auto; padding: 14px 20px; }
  /* Reference navbar (statera_web): 54px logo at its 980px step, mapped to
     our 900px breakpoint. */
  .nav-logo img { height: 54px; }
  .nav-toggle { display: block; }
.nav-menu {
  display: none;
  flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 12px 0;
}
  .nav-menu.open { display: flex; }
  .nav-menu a { padding: 10px 14px; }
  /* The CTA pill leaves the mobile bar and moves to the foot of the open
     hamburger menu (it sits right after the menu container in header.php,
     so the adjacent-sibling selector reveals it only while the menu is
     open). Desktop keeps it in the bar. */
  .nav .btn-outline { display: none; }
  .nav-menu.open + .btn-outline {
    display: inline-flex;
    align-self: center;
    margin: 4px 0 10px;
  }

  .footer { padding: 40px 20px 10px; }
  .footer-inner { gap: 40px; padding-top: 48px; }
  .footer-top { flex-direction: column; }
  .footer-brand, .footer-ctas, .footer-links { width: 100%; }
  /* Desktop spreads the two link columns edge to edge (space-between);
     on mobile they group left with the base 40px gap. */
  .footer-links { justify-content: unset; }
  .footer-bottom { flex-direction: column; height: auto; gap: 12px; }

  /* STRICT mobile spacing, matching the desktop rule above: every section
     48px padding top/bottom, 36px between-section gap (margin-top: 36px).
     Heroes keep their own design padding. */
  .section { padding: 48px 0; }
}

@media (max-width: 600px) {
  /* Same specificity fix as the 900px block above — without the prefix these
     lose to body.wp-theme-statera h1/.h1 etc. at line 142 and never apply. */
  body.wp-theme-statera h1, body.wp-theme-statera .h1 { font-size: 32px; letter-spacing: -0.8px; }
  body.wp-theme-statera h2, body.wp-theme-statera .h2 { font-size: 28px; letter-spacing: -0.6px; }
  body.wp-theme-statera h3, body.wp-theme-statera .h3 { font-size: 24px; }
  .cta-card .cta-text .cta-sub { white-space: normal; }

  /* Mobile system (Figma 40:5175, 390 viewport): 30px gap between stacked
     cards. The two footer CTA cards stack in a column at this width, so
     tighten their 39px desktop gap to match. */
  .footer-ctas { gap: 30px; }
}

/* ---------- WordPress wp_nav_menu output (ul/li inside .nav-menu) ---------- */
.nav-menu ul {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}

@media (max-width: 900px) {
.nav-menu ul {
  flex-direction: column;
    align-items: stretch;
    width: 100%;
}
}