/* ============================================================
   Statera — Investment page styles
   Loaded after css/style.css
   ============================================================ */

/* ---------- Elementor container reset ---------- */
/* The Investments sections are Elementor widgets inside one container.
   Elementor's default flex container adds a 20px gap and 10px padding, which
   would show up as extra space between every section; the sections carry their
   own padding, so the container is reduced to a plain block. */
.elementor .elementor-element.inv-root {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  --content-width: 100%;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --margin-block-start: 0px;
  --margin-block-end: 0px;
  --gap: 0px;
}

.elementor .elementor-element[class*="elementor-widget-statera-investment-"]:not(:last-child),
.elementor .elementor-element.elementor-widget-statera-insights:not(:last-child) {
  margin-block-end: 0;
}

body.wp-theme-statera /* ---------- Shared page bits ---------- */
.inv-eyebrow {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: #686E76;
}
body.wp-theme-statera .inv-eyebrow-light { color: var(--white); }

.inv-head-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 569px;
}
.inv-head-wide { max-width: 633px; }
.inv-head-text .h2 { color: #2B2B29; }

.inv-section-head {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* Dark pill button (#404040, white text, right-pointing white arrow) */
.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  gap: 10px;
  height: 50px;
  padding: 0 20px;
  background: var(--text-grey);
  border: none;
  border-radius: 80px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.16px;
  color: var(--white);
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
/* Hover feedback is guarded to real pointer devices — on touch, a tap leaves
   the element "stuck" hovered until the next tap lands elsewhere. :focus-visible
   stays unguarded outside the query so keyboard focus still gets the state. */
@media (hover: hover) and (pointer: fine) {
  .btn-dark:hover {
    background: var(--green-accent);
    color: var(--charcoal);
  }
}
  .btn-dark:active {
    background: var(--green-accent);
    color: var(--charcoal);
  }

.btn-dark:focus-visible {
  background: var(--green-accent);
  color: var(--charcoal);
}
.btn-dark img { width: 24px; height: 24px; transform: scaleX(-1); }

/* White pill button (black text, right-pointing black arrow) */
.btn-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  gap: 10px;
  height: 50px;
  padding: 0 20px;
  background: var(--white);
  border: none;
  border-radius: 80px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.16px;
  color: var(--black);
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
/* See .btn-dark above: hover is guarded to real pointer devices, focus stays open. */
@media (hover: hover) and (pointer: fine) {
  .btn-light:hover { background: var(--green-accent); color: var(--black); }
}
  .btn-light:active { background: var(--green-accent); color: var(--black); }

.btn-light:focus-visible { background: var(--green-accent); color: var(--black); }
.btn-light img { width: 24px; height: 24px; transform: scaleX(-1); }

/* ---------- Hero ---------- */
.inv-hero {
  display: flex;
  align-items: center;
  gap: 30px;
}
.inv-hero-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 680px;
  flex: none;
  padding: 70px 40px;
  background: var(--green-pale);
  border-radius: 40px;
  min-height: 762.309px;
}
.inv-hero-card > .btn-dark { flex: none; }
.inv-hero-quote { width: 33.7px; height: 26.3px; }
.inv-hero-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  width: 100%;
}
.inv-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.inv-hero-title { color: var(--black); }

.inv-person-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 363px;
  border-radius: 16px;
}
.inv-person-photo {
  width: 70px;
  height: 70px;
  flex: none;
  border-radius: 10px;
  background: var(--white);
  overflow: hidden;
}
.inv-person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 20%;
}
.inv-person-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 16px;
  color: var(--black);
}

body.wp-theme-statera .inv-person-name { font-weight: 600; }
.inv-person-role {
  font-weight: 500;
  opacity: .5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inv-hero-media {
  flex: 1;
  min-width: 0;
  height: 761px;
  background: #ECE8E2;
  border-radius: 40px;
  overflow: hidden;
}
.inv-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}

/* ---------- Philosophy ---------- */
.inv-philosophy-head { margin-bottom: 60px; }
.inv-two-col-text {
  display: flex;
  gap: 54px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--charcoal);
}
.inv-two-col-text p { flex: 1; min-width: 0; }

.inv-principles {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.inv-principle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 140px;
  padding: 90px 50px;
  background: var(--green-pale-2);
  border-radius: var(--radius-lg);
}
.inv-principle-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 315px;
  flex: none;
}
.inv-badge-dark {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 80px;
  background: var(--charcoal);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: var(--white);
  flex: none;
}

body.wp-theme-statera .inv-principle-title {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: var(--black);
}
.inv-principle-body {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
}
.inv-principle-body p {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--black);
}

/* ---------- Process ---------- */
.inv-process-row {
  display: flex;
  align-items: stretch;
  gap: 30px;
}
.inv-process-text-card {
  flex: 1;
  min-width: 0;
  padding: 40px;
  background: var(--green-pale-2);
  border-radius: var(--radius-lg);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--charcoal);
}
.inv-process-text-card p + p { margin-top: 33px; }
.inv-process-media {
  position: relative;
  width: 547px;
  flex: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Elementor's frontend sheet carries `.elementor img { height: auto }`, which
   outranks a bare class selector, so the photo fell back to its intrinsic
   height and left 67px of the frame empty on the live site. The prefix only
   exists to win that specificity contest. */
body.wp-theme-statera .inv-process-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 75%; /* the design frames this photo low */
}
.inv-process-badge {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 56px;
  height: 56px;
  z-index: 1;
}

.inv-planning {
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin-top: 60px;
  padding: 60px 0;
  border-top: 1px solid #E3E3E3;
}

body.wp-theme-statera .inv-planning-title {
  max-width: 559px;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: #2B2B29;
}
.inv-planning-row {
  display: flex;
  align-items: flex-start;
  gap: 44px;
}
.inv-planning-media {
  flex: 1;
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.inv-planning-media img {
  width: 100%;
  height: 495px;
  object-fit: cover;
}
.inv-planning-list {
  width: 549px;
  flex: none;
  display: flex;
  flex-direction: column;
}
.inv-planning-list li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 38px 20px 38px 14px;
  border-bottom: 1px solid rgba(51,51,51,.2);
}
.inv-planning-list img {
  width: 22px;
  height: 22px;
  margin-top: 4px;
  flex: none;
}
.inv-planning-list p {
  flex: 1;
  min-width: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--black);
}

/* ---------- CIO ---------- */
.inv-cio-card {
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 30px;
  background: var(--footer-ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.inv-cio-media {
  position: relative;
  flex: 1;
  min-width: 0;
  align-self: stretch;
  min-height: 617px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.inv-cio-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 61% 55%;
}
.inv-cio-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  background: var(--white);
  font-size: 16px;
  color: var(--black);
  z-index: 1;
}
.inv-cio-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  width: 542px;
  flex: none;
}
.inv-cio-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}
.inv-cio-title { color: var(--white); }
.inv-cio-desc {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--white);
}

/* ---------- Six-step timeline ---------- */
.inv-steps-container {
  max-width: 1022px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.inv-steps-intro {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--charcoal);
}
.inv-steps-intro p + p { margin-top: 33px; }

.inv-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.inv-steps::before {
  content: '';
  position: absolute;
  left: 35px;
  top: 45px;
  width: 3px;
  height: 1367px;
  background: var(--white);
}
.inv-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 30px;
}
.inv-step-badge {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 80px;
  background: var(--white);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: var(--black);
  flex: none;
}
/* The accent green marks the step being read, not a fixed first step;
   js/investment.js moves .is-active as the reader scrolls. */
.inv-step.is-active .inv-step-badge {
  background: var(--green-accent);
  color: var(--charcoal);
}
.inv-step-badge { transition: background-color .25s ease, color .25s ease; }
.inv-step-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px;
  background: var(--text-grey);
  border-radius: var(--radius-lg);
}

body.wp-theme-statera .inv-step-title {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: var(--fog);
}
.inv-step-text {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--white);
  opacity: .8;
}

.inv-models-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  padding: 40px;
  background: var(--green-pale-2);
  border-radius: var(--radius-lg);
}
.inv-models-text {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--charcoal);
}
.inv-models-text p + p { margin-top: 33px; }

/* ---------- Insights carousel ---------- */
.inv-insights {
  /* full-bleed within .page: cards scroll to the right edge like the design */
  overflow: hidden;
}
.inv-insights-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  max-width: 1192px;
  margin: 0 auto 60px;
  padding: 0 24px;
}
.inv-insights-track {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  padding-left: max(24px, calc((100% - 1192px) / 2 + 24px));
  padding-right: 24px;
}
.inv-insights-track::-webkit-scrollbar { display: none; }
.inv-insights-track.dragging { cursor: grabbing; }

/* The insights rail's scroll-snap rules are global now (home-sections.css
   .st-ins-row) — the arrows show on every page, not just investments. */
.inv-blog-card {
  width: 343px;
  flex: none;
  overflow: hidden;
}
.inv-blog-media {
  width: 100%;
  aspect-ratio: 265.44 / 165.9;
  border-radius: 18px;
  overflow: hidden;
}
.inv-blog-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.inv-blog-media-dim { opacity: .8; }
.inv-blog-body {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 30px 0;
  font-weight: 500;
  line-height: 1.5;
}

body.wp-theme-statera .inv-blog-title {
  min-height: 117px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -1.04px;
  color: #2B2B29;
}
.inv-blog-title-underline { text-decoration: underline; }
.inv-blog-date {
  font-size: 14px;
  font-weight: 500;
  color: #777777;
  white-space: nowrap;
}

/* ---------- CTA ---------- */
.inv-cta-section { padding-bottom: 54px; }
.inv-cta-card {
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 30px 30px 30px 50px;
  background: var(--green-pale);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.inv-cta-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.inv-cta-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  max-width: 542px;
}
.inv-cta-title { color: var(--black); }
.inv-cta-desc {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--black);
}
.btn-primary .btn-disc--blue {
  background: var(--signal-blue);
  border-radius: 0 999px 999px 0;
  transition: background .2s ease;
}
/* No :focus-visible pairing exists for this rule, so the whole thing is
   guarded — touch has no hover to fake and would otherwise stick the blue
   disc green after a tap. */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover .btn-disc--blue { background: var(--green-accent); }
}
  .btn-primary:active .btn-disc--blue { background: var(--green-accent); }

.btn-disc--blue img { transform: scaleX(-1); }
.inv-cta-media {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  min-height: 530px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.inv-cta-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .container { padding: 0 24px; }
  .inv-principle { gap: 60px; }
}

@media (max-width: 900px) {
  /* This file's own 1180px tier below sets ".container { padding: 0 24px }"
     unconditionally, and — because investment.css loads after style.css —
     that rule otherwise keeps winning over style.css's own 900px tier
     (padding: 0 20px) all the way down to 390px, leaving a 350px column 8px
     narrower than the mobile system's content-width token. Restated here so
     the true mobile gutter is 20px, matching every other page. */
  .container { padding: 0 20px; }

  .inv-hero { flex-direction: column; align-items: stretch; }
  .inv-hero-card { width: 100%; padding: 40px 24px; height: auto; min-height: 0; }
  .inv-hero-media { height: 380px; }
  .inv-person-card { width: 100%; }
  .inv-two-col-text { flex-direction: column; gap: 24px; font-size: 18px; }

.inv-principle {
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
    padding: 40px 24px;
}
  .inv-principle-lead { width: 100%; }
  /* Matches the reduction already given to .inv-planning-title / .inv-step-title
     below — this title was the one left at its 30px desktop size. */
body.wp-theme-statera .inv-principle-title { font-size: 24px; }
  .inv-principle-body p { font-size: 18px; }

  .inv-process-row { flex-direction: column; gap: 24px; }
  .inv-process-text-card { padding: 24px; font-size: 18px; }
  .inv-process-text-card p + p { margin-top: 20px; }
  .inv-process-media { width: 100%; height: 280px; }
  .inv-process-badge { top: 16px; right: 16px; width: 48px; height: 48px; }

  .inv-planning { gap: 30px; margin-top: 36px; padding: 48px 0; }

body.wp-theme-statera .inv-planning-title { font-size: 24px; }
  .inv-planning-row { flex-direction: column; gap: 30px; }
  .inv-planning-media { width: 100%; }
  .inv-planning-media img { height: 280px; }
  .inv-planning-list { width: 100%; }
  .inv-planning-list li { padding: 24px 0; }
  .inv-planning-list p { font-size: 18px; }

  .inv-cio-card { flex-direction: column; align-items: stretch; padding: 24px; }
  .inv-cio-media { min-height: 380px; }
  .inv-cio-body { width: 100%; gap: 40px; }

  .inv-steps-section { padding-left: 24px; padding-right: 24px; }
  .inv-steps-container { gap: 40px; }
  .inv-steps::before { display: none; }
  .inv-step { gap: 12px; }
  .inv-step-badge { width: 44px; height: 44px; font-size: 13px; }
  .inv-step-card { padding: 20px; gap: 16px; }

body.wp-theme-statera .inv-step-title { font-size: 22px; }
  .inv-step-text { font-size: 16px; }

  /* Matches the reduction already given to the sibling .inv-process-text-card;
     this card was the one left at its 40px desktop padding. */
  .inv-models-card { padding: 24px; }

  .inv-insights-head { flex-direction: column; align-items: flex-start; }
  .inv-blog-card { width: 280px; }

body.wp-theme-statera .inv-blog-title { font-size: 22px; min-height: 0; }

  .inv-cta-card { flex-direction: column; align-items: stretch; padding: 30px 24px; }
  .inv-cta-media { min-height: 280px; }
}

/* ============================================================
   Design heights that the copy must not set
   The theme's typeface is not the one the design was drawn in, so several
   copy blocks wrap to one line fewer and come out short. Where the design
   fixes a height, it is pinned here; otherwise every section below rides up.
   All of it is released once the layout stacks (see the media queries).
   ============================================================ */
/* The hero card ends at 903 and Philosophy starts at 957. */
.inv-philosophy { margin-top: 56px; }

/* The shared Insights widget carries the home page's 54px section rhythm;
   here it butts straight up against the step list, as the design has it. */
.inv-root .st-insights { margin-top: 0; }

/* The design makes every principle row 336; the third card's copy wraps
   shorter under the substituted typeface and would otherwise shrink it. */
.inv-principle { min-height: 336px; }
.inv-two-col-text { min-height: 264px; }
.inv-steps-intro { min-height: 264px; }
.inv-planning { min-height: 767px; }
.inv-process-row { min-height: 476px; }
.inv-models-card { min-height: 388.005px; }

/* Step rows are individually sized in the design. */
.inv-steps .inv-step:nth-child(1) { min-height: 261px; }
.inv-steps .inv-step:nth-child(2) { min-height: 234px; }
.inv-steps .inv-step:nth-child(3) { min-height: 261px; }
.inv-steps .inv-step:nth-child(4) { min-height: 261px; }
.inv-steps .inv-step:nth-child(5) { min-height: 234px; }
.inv-steps .inv-step:nth-child(6) { min-height: 288px; }

@media (max-width: 900px) {
  .inv-principle,
  .inv-two-col-text,
  .inv-steps-intro,
  .inv-planning,
  .inv-process-row,
  .inv-models-card,
  .inv-steps .inv-step { min-height: 0; }
}