/* invest.aitcoh.com — international investor landing page
   Dealerships division palette: Dealer Green Dark #154440, Dealer Green #20605c,
   Dealer Green Light #dff7c1, plus shared Radiant Gold #fdd841, Charcoal #333333,
   Light Linen #fffce5. Gold is reserved for CTAs, step markers and emphasis. */

/* ---------- Fonts (self-hosted, brand standard) ---------- */
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("../assets/fonts/SourceSans3-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("../assets/fonts/SourceSans3-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --green-dark: #154440;
  --green: #20605c;
  --green-light: #dff7c1;
  --gold: #fdd841;
  --gold-deep: #f0c516;
  --linen: #fffce5;
  --white: #ffffff;
  --charcoal: #333333;
  --muted: #5a6a68;
  --on-dark: #e8f3e6;
  --on-dark-soft: #a9c4bf;
  --hairline: rgba(21, 68, 64, 0.14);
  --hairline-light: rgba(255, 252, 229, 0.16);
  --shadow-soft: 0 16px 40px rgba(21, 68, 64, 0.1);
  --radius: 12px;
  /* Every CTA renders at one of these two widths so all buttons match each
     other at every viewport. The longest label, "Schedule an Introduction",
     measures 209px; --btn-sm is the largest width that still fits inside the
     form card's padding at 320px, the narrowest viewport worth supporting.
     Keep CTA copy to three words of similar length so no label outgrows these. */
  --btn-min: 18.5rem;
  --btn-sm: 15.5rem;
  /* Liquid glass + motion, mirroring brand/styles/{glass,tokens}.css so this
     page keeps the house frosted-surface look without bundling the brand CSS.
     backdrop-filter is GPU-expensive: keep blur soft and the count small. */
  --blur-soft: 10px;
  --blur-medium: 16px;
  --blur-strong: 20px;
  --glass-rgb-white: 255 255 255;
  --glass-rgb-linen: 255 252 229;
  --glass-rgb-green: 32 96 92;
  --ease-out: cubic-bezier(0.16, 1, 0.30, 1);
  --motion-base: 260ms;
  --font-head: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Source Sans Pro", "Segoe UI", sans-serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--charcoal);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.85rem;
  color: var(--green-dark);
  text-wrap: balance;
}
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--green); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 2px; }
.hero :focus-visible, .section-green :focus-visible,
.site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--gold); }

.container { width: min(1140px, 92vw); margin: 0 auto; }
.container-narrow { width: min(860px, 92vw); }
.brand-name { font-style: italic; }
.brand-name sup { font-size: 0.58em; line-height: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.015em; text-decoration: none; cursor: pointer;
  padding: 0.9rem 1.7rem; border-radius: 9px;
  /* An explicit line-height and a transparent border keep <a> and <button>
     buttons, and outlined vs filled ones, at exactly the same height. */
  line-height: 1.25; border: 1.5px solid transparent;
  min-width: var(--btn-min); text-align: center; white-space: nowrap;
  /* position + overflow contain the specular sweep below. Nothing here may
     change the box: button geometry is locked at 296/248 x 49.8. */
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform var(--motion-base) var(--ease-out),
              background var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out),
              border-color var(--motion-base) var(--ease-out);
}
/* Specular sweep: a narrow highlight that travels across the face on hover,
   the same light-refraction cue the brand glass surfaces use. */
.btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%, rgb(255 255 255 / 0.42) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 720ms var(--ease-out);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(130%); }
.btn:active { transform: translateY(0) scale(0.995); }
.btn-gold { background: var(--gold); color: var(--charcoal); }
.btn-gold:hover {
  background: var(--gold-deep); transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(253, 216, 65, 0.34), 0 2px 6px rgba(21, 68, 64, 0.18);
}
.btn-ghost {
  background: rgb(var(--glass-rgb-linen) / 0.06); color: var(--linen);
  border-color: rgba(255, 252, 229, 0.55);
  backdrop-filter: blur(var(--blur-soft)); -webkit-backdrop-filter: blur(var(--blur-soft));
}
.btn-ghost:hover {
  background: rgb(var(--glass-rgb-linen) / 0.14); border-color: var(--linen);
  transform: translateY(-2px); box-shadow: 0 12px 26px rgba(6, 26, 24, 0.28);
}
.btn-ghost::after { background: linear-gradient(105deg,
    transparent 38%, rgb(255 255 255 / 0.22) 50%, transparent 62%); }
.btn[disabled] { opacity: 0.6; cursor: wait; transform: none; }
.btn[disabled]::after { display: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgb(21 68 64 / 0.82);
  backdrop-filter: blur(var(--blur-strong)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(160%);
  border-bottom: 1px solid var(--hairline-light);
  transition: background var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}
/* Firms up once the page scrolls under it (class toggled in main.js) */
.site-header.is-stuck {
  background: rgb(21 68 64 / 0.94);
  box-shadow: 0 10px 30px rgba(6, 26, 24, 0.34);
}
/* Without backdrop-filter the translucent bar would let text show through */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .site-header.is-stuck { background: var(--green-dark); }
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 0.75rem 0; }
.header-logo { display: inline-flex; align-items: center; gap: 0.9rem; text-decoration: none; }
.header-logo img { height: 44px; width: auto; display: block; }
.header-logo-tag {
  font-family: var(--font-head); font-weight: 600; font-size: 0.7rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
  border-left: 1px solid var(--hairline-light); padding-left: 0.9rem;
}
.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a:not(.btn) {
  font-family: var(--font-head); font-weight: 600; font-size: 0.83rem;
  letter-spacing: 0.03em; color: var(--on-dark-soft); text-decoration: none; padding: 0.4rem 0;
}
.nav a:not(.btn):hover { color: var(--white); }

/* ---------- Language switcher ----------
   Replaces the nav CTA (removed 2026-07-29). Plain links, no JS, so it works
   with scripting off and each locale is a real crawlable URL. */
.lang-switch {
  display: inline-flex; align-items: center; gap: 0.15rem;
  padding: 0.24rem 0.5rem 0.24rem 0.42rem;
  border: 1px solid rgb(var(--glass-rgb-linen) / 0.2);
  border-radius: 999px;
  background: rgb(var(--glass-rgb-linen) / 0.06);
  backdrop-filter: blur(var(--blur-soft)); -webkit-backdrop-filter: blur(var(--blur-soft));
}
.lang-icon { width: 15px; height: 15px; color: var(--on-dark-soft); margin-right: 0.3rem; flex: none; }
.nav .lang-switch a.lang-link {
  font-family: var(--font-head); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.06em; color: var(--on-dark-soft); text-decoration: none;
  padding: 0.28rem 0.5rem; border-radius: 999px; line-height: 1.2;
  transition: color var(--motion-base) var(--ease-out),
              background var(--motion-base) var(--ease-out);
}
.nav .lang-switch a.lang-link:hover { color: var(--white); background: rgb(var(--glass-rgb-linen) / 0.12); }
.nav .lang-switch a.lang-link[aria-current="page"] {
  color: var(--charcoal); background: var(--gold);
}

/* Courtesy-translation notice on the non-English pages */
.lang-note {
  margin-top: 0.7rem; padding-top: 0.7rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.8rem; line-height: 1.5; color: var(--muted);
}
.footer-lang-note { margin-top: 0.9rem; font-style: italic; }
.nav-toggle { display: none; background: none; border: 0; padding: 0.5rem; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--linen); margin: 5px 0; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  background:
    radial-gradient(820px 440px at 88% -15%, rgba(32, 96, 92, 0.55), transparent 62%),
    linear-gradient(160deg, #103633 0%, var(--green-dark) 58%, #1c5551 100%);
  color: var(--linen);
}
/* Blueprint grid: a drafting-paper cue that reads as construction without
   adding an asset. Masked so it fades out before it reaches the copy. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgb(var(--glass-rgb-linen) / 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--glass-rgb-linen) / 0.055) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 72%);
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem;
  align-items: center; padding: clamp(3.5rem, 6.5vw, 5.5rem) 0 clamp(2.5rem, 4vw, 3.5rem);
}
.eyebrow {
  font-family: var(--font-head); font-weight: 700; font-size: 0.76rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--green);
  display: flex; align-items: center; gap: 0.7rem; margin: 0 0 1.1rem;
}
.eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--gold); flex: none; }
.eyebrow-light { color: var(--on-dark-soft); }
.section-head-center .eyebrow { justify-content: center; }
.hero h1 {
  color: var(--white); font-size: clamp(2.4rem, 4.8vw, 3.7rem);
  letter-spacing: -0.015em; margin-bottom: 1.2rem;
}
.accent-underline { box-shadow: inset 0 -0.18em 0 0 rgba(253, 216, 65, 0.5); }
.hero-sub { font-size: clamp(1.1rem, 1.7vw, 1.26rem); line-height: 1.55; color: #e4efe6; max-width: 34em; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 1.9rem 0 1.3rem; }
.hero-qualifier { font-size: 0.85rem; line-height: 1.55; color: var(--on-dark-soft); max-width: 42em; }

.hero-visual { position: relative; }
.hero-photo {
  display: block; width: 100%; height: auto;
  border-radius: 16px;
  /* Outer depth plus an inset rim light along the glass edge */
  box-shadow: 0 26px 60px rgba(6, 26, 24, 0.5),
              inset 0 0 0 1px rgb(var(--glass-rgb-linen) / 0.28);
}
/* Frosted corner: a soft specular bloom on the upper-left rim of the photo,
   the light-source cue the brand's .glass-solid surfaces carry. */
.hero-visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: 16px;
  background: linear-gradient(135deg,
    rgb(255 255 255 / 0.20) 0%, rgb(255 255 255 / 0.05) 18%,
    transparent 42%, transparent 100%);
  mix-blend-mode: overlay;
}
/* Floating frosted card overlapping the photo */
.float-card {
  position: absolute; left: -1.4rem; bottom: -1.4rem; z-index: 2;
  max-width: 17.5rem; padding: 1.05rem 1.25rem;
  border-radius: 14px;
  background: rgb(21 68 64 / 0.72);
  backdrop-filter: blur(var(--blur-strong)) saturate(170%);
  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(170%);
  border: 1px solid rgb(var(--glass-rgb-linen) / 0.22);
  border-top-color: rgb(var(--glass-rgb-linen) / 0.45);
  border-left-color: rgb(var(--glass-rgb-linen) / 0.45);
  box-shadow: 0 18px 44px rgba(6, 26, 24, 0.45);
}
.float-card-label {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 0.68rem; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.35rem;
}
.float-card p { font-size: 0.9rem; line-height: 1.45; color: var(--linen); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .float-card { background: rgb(21 68 64 / 0.96); }
}
.hero-strip { border-top: 1px solid var(--hairline-light); }
.hero-strip-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  padding: 1.05rem 0;
}
.hero-strip-inner span {
  font-family: var(--font-head); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--on-dark-soft);
}

/* ---------- Sections ---------- */
/* scroll-margin keeps anchored section headings clear of the sticky header */
.section { padding: clamp(3.5rem, 6vw, 5.5rem) 0; scroll-margin-top: 4.5rem; }
.section-white { background: var(--white); }
.section-linen, .section-green { position: relative; isolation: isolate; }
.section-linen > *, .section-green > * { position: relative; }
.section-linen { background: var(--linen); }
.section-green { background: var(--green-dark); color: var(--on-dark); }
/* Light business pattern: a fine dot field on the linen sections and a woven
   diagonal on the dark band. Both are masked to fade toward the section edges
   so they never compete with the copy. */
.section-linen::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgb(var(--glass-rgb-green) / 0.10) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.35) 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.35) 55%, transparent 100%);
}
.section-green::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(45deg,
    rgb(var(--glass-rgb-linen) / 0.030) 0 1px, transparent 1px 13px);
  -webkit-mask-image: radial-gradient(100% 75% at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(100% 75% at 50% 0%, #000 0%, transparent 78%);
}
.section-green h2, .section-green h3 { color: var(--linen); }
.section-green .section-lede { color: var(--on-dark-soft); }
.section-head { max-width: 56rem; margin-bottom: clamp(2rem, 3.5vw, 2.8rem); }
.section-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.01em; }
.section-lede { font-size: 1.08rem; color: var(--muted); max-width: 50rem; margin: 0.3rem 0 0; }
.section-head-center .section-lede { margin-inline: auto; }

/* ---------- Split layouts ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.2rem, 4vw, 3.6rem); align-items: center; }
.split-tight { align-items: start; }
.split-copy h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.split-copy p { max-width: 36em; }
.label-line {
  font-family: var(--font-head); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--green);
  margin: 1.6rem 0 0.8rem;
}
.service-list { list-style: none; columns: 2; column-gap: 1.8rem; margin-top: 1.4rem; }
.service-list li {
  break-inside: avoid; padding: 0.35rem 0 0.35rem 1.6rem; position: relative;
  font-size: 0.99rem; line-height: 1.45;
}
.service-list li::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.85em;
  width: 0.6em; height: 0.32em; border-left: 2.5px solid var(--green);
  border-bottom: 2.5px solid var(--green); transform: rotate(-45deg);
}
.note-line {
  margin-top: 1.4rem; padding-left: 1rem; border-left: 3px solid var(--green-light);
  font-size: 0.86rem; line-height: 1.55; color: var(--muted);
}
.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.55rem; }
.chip-list li {
  border: 1px solid rgba(32, 96, 92, 0.3); background: var(--linen);
  border-radius: 999px; padding: 0.42rem 0.95rem; font-size: 0.92rem; color: var(--green-dark);
}
.split-panel {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, #174a45 0%, var(--green-dark) 62%, #123c39 100%);
  color: var(--on-dark);
  border: 1px solid rgb(var(--glass-rgb-linen) / 0.14);
  border-top-color: rgb(var(--glass-rgb-linen) / 0.3);
  border-radius: var(--radius); padding: 2.1rem;
  box-shadow: 0 18px 44px rgba(21, 68, 64, 0.24);
}
.split-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.14) 0%, transparent 38%),
    repeating-linear-gradient(45deg,
      rgb(var(--glass-rgb-linen) / 0.028) 0 1px, transparent 1px 13px);
}
.split-panel > * { position: relative; }
.panel-title { font-size: 1.05rem; color: var(--linen); margin-bottom: 1.2rem; }
.role-list { list-style: none; display: grid; gap: 0.75rem; }
.role-list li {
  font-size: 0.97rem; line-height: 1.45; padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--hairline-light); color: var(--on-dark);
}
.role-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.role-list strong {
  display: block; font-family: var(--font-head); font-size: 0.72rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.15rem;
}
.panel-note { margin-top: 1.3rem; font-size: 0.84rem; color: var(--on-dark-soft); line-height: 1.55; }

/* ---------- Photography ----------
   Images carry width/height attributes and are sized by intrinsic ratio, so no
   aspect-ratio box or object-fit is needed and nothing crops or shifts on load.
   Both current photos are 1100x829 (4:3). If a slot ever needs a stand-in
   before its photo exists, re-add `.placeholder-image` from
   brand/styles/components.css rather than inventing artwork. */
.media-frame {
  display: block; width: 100%; height: auto;
  border-radius: 16px;
  box-shadow: 0 20px 46px rgba(21, 68, 64, 0.18),
              inset 0 0 0 1px rgb(var(--glass-rgb-white) / 0.55);
}

/* ---------- Feature photo ----------
   Sits above the "What You Receive" heading. Shown in full: the source is the
   uncropped 16:9 frame and there is no object-fit or fixed height, so the
   image is never cut. Width is capped so it reads as a feature image rather
   than a second hero. */
.photo-feature {
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  max-width: 780px; line-height: 0;
}
.photo-feature img {
  display: block; width: 100%; height: auto;
  border-radius: 16px;
  box-shadow: 0 24px 54px rgba(6, 26, 24, 0.45),
              inset 0 0 0 1px rgb(var(--glass-rgb-linen) / 0.18);
}

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.card {
  position: relative; overflow: hidden;
  background: rgb(var(--glass-rgb-white) / 0.72);
  backdrop-filter: blur(var(--blur-soft)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-soft)) saturate(140%);
  border: 1px solid var(--hairline);
  border-top-color: rgb(var(--glass-rgb-white) / 0.9);
  border-radius: var(--radius); padding: 1.8rem;
  transition: transform var(--motion-base) var(--ease-out),
              border-color var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}
/* Frosted corner bloom, top-left, matching the hero photo's light source */
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg,
    rgb(255 255 255 / 0.85) 0%, rgb(255 255 255 / 0.28) 16%, transparent 40%);
}
.card > * { position: relative; }
.card:hover {
  transform: translateY(-4px); border-color: rgba(32, 96, 92, 0.4);
  box-shadow: var(--shadow-soft);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card { background: var(--white); }
}
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--green-light); color: var(--green-dark); margin-bottom: 1rem;
}
.card-icon svg { width: 22px; height: 22px; }
.card h3 { font-size: 1.08rem; margin-bottom: 0.45rem; }
.card p { font-size: 0.96rem; color: var(--muted); line-height: 1.55; }

/* ---------- Pillars ---------- */
.pillar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.pillar {
  position: relative; overflow: hidden;
  background: rgb(var(--glass-rgb-linen) / 0.055);
  backdrop-filter: blur(var(--blur-medium)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-medium)) saturate(150%);
  border: 1px solid var(--hairline-light);
  border-top-color: rgb(var(--glass-rgb-linen) / 0.34);
  border-left-color: rgb(var(--glass-rgb-linen) / 0.34);
  border-radius: var(--radius); padding: 1.9rem;
  box-shadow: 0 14px 34px rgba(6, 26, 24, 0.22);
  transition: transform var(--motion-base) var(--ease-out),
              border-color var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}
/* Frosted corner + faint lens sheen across the panel */
.pillar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg,
    rgb(255 255 255 / 0.16) 0%, rgb(255 255 255 / 0.04) 20%,
    transparent 46%, rgb(255 255 255 / 0.05) 100%);
}
.pillar > * { position: relative; }
.pillar:hover {
  transform: translateY(-3px);
  border-color: rgba(253, 216, 65, 0.4);
  box-shadow: 0 20px 44px rgba(6, 26, 24, 0.3);
}
.pillar-num {
  display: inline-block; font-family: var(--font-head); font-weight: 700;
  font-size: 0.76rem; letter-spacing: 0.18em; color: var(--green-dark);
  background: var(--gold); border-radius: 5px; padding: 0.24rem 0.62rem;
  margin-bottom: 0.9rem;
}
.pillar h3 { font-size: 1.12rem; margin-bottom: 0.5rem; }
.pillar p { font-size: 0.97rem; color: var(--on-dark); line-height: 1.6; }
.facts-bar {
  margin-top: 1.6rem; border-left: 4px solid var(--gold);
  background: rgba(223, 247, 193, 0.09); border-radius: 8px;
  padding: 1.35rem 1.7rem;
}
.facts-bar p { font-size: 0.98rem; line-height: 1.6; color: var(--on-dark); }
.facts-bar strong, .disclosure-block strong { color: var(--linen); }
.disclosure-block strong { color: var(--green-dark); }
.fine-note { font-size: 0.84rem; color: var(--muted); margin-top: 1.3rem; line-height: 1.6; }
.section-green .fine-note { color: var(--on-dark-soft); }

/* ---------- Steps ---------- */
.steps {
  list-style: none; counter-reset: step;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem;
}
.steps li {
  counter-increment: step; position: relative; overflow: hidden;
  background: rgb(var(--glass-rgb-white) / 0.74);
  backdrop-filter: blur(var(--blur-soft)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-soft)) saturate(140%);
  border: 1px solid var(--hairline);
  border-top-color: rgb(var(--glass-rgb-white) / 0.9);
  border-radius: var(--radius); padding: 1.6rem 1.4rem;
  transition: transform var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}
.steps li::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg,
    rgb(255 255 255 / 0.8) 0%, rgb(255 255 255 / 0.2) 15%, transparent 38%);
}
.steps li > * { position: relative; z-index: 1; }
.steps li:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .steps li { background: var(--white); }
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--gold); color: var(--charcoal);
  font-family: var(--font-head); font-weight: 700; font-size: 0.88rem;
  margin-bottom: 0.9rem;
}
.steps h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.steps p { font-size: 0.92rem; color: var(--muted); line-height: 1.5; }

/* ---------- EB-5 ---------- */
.eb5-facts {
  position: relative; overflow: hidden;
  background: rgb(var(--glass-rgb-linen) / 0.82);
  backdrop-filter: blur(var(--blur-soft)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-soft)) saturate(150%);
  border: 1px solid var(--hairline);
  border-top-color: rgb(var(--glass-rgb-white) / 0.9);
  border-radius: var(--radius); padding: 2rem 2.2rem;
  box-shadow: 0 14px 34px rgba(21, 68, 64, 0.1);
}
.eb5-facts::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg,
    rgb(255 255 255 / 0.7) 0%, rgb(255 255 255 / 0.18) 14%, transparent 36%);
}
.eb5-facts > * { position: relative; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .eb5-facts { background: var(--linen); }
}
.eb5-facts h3 { font-size: 1.05rem; margin-bottom: 1.1rem; }
.asof { color: var(--green); font-size: 0.86em; font-weight: 600; white-space: nowrap; }
.eb5-facts ul { list-style: none; display: grid; gap: 0.7rem; }
.eb5-facts li {
  position: relative; padding-left: 1.5rem; font-size: 0.98rem; line-height: 1.55; color: var(--charcoal);
}
.eb5-facts li::before {
  content: ""; position: absolute; left: 0.1rem; top: 0.55em;
  width: 8px; height: 8px; background: var(--gold); border-radius: 2px;
}
.eb5-source {
  margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--hairline);
  font-size: 0.87rem; color: var(--muted); line-height: 1.6;
}
.disclaimer-panel {
  margin-top: 1.3rem; border: 1px solid rgba(32, 96, 92, 0.3);
  border-left: 5px solid var(--green); border-radius: 10px;
  background: var(--white); padding: 1.4rem 1.7rem;
}
.disclaimer-panel p { font-size: 0.93rem; line-height: 1.6; color: var(--muted); }

/* ---------- Form ---------- */
.investor-form {
  position: relative; overflow: hidden;
  background: rgb(var(--glass-rgb-white) / 0.86);
  backdrop-filter: blur(var(--blur-medium)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-medium)) saturate(150%);
  border: 1px solid var(--hairline);
  border-top-color: rgb(var(--glass-rgb-white) / 0.95);
  border-radius: 16px; padding: clamp(1.6rem, 3.5vw, 2.6rem);
  box-shadow: 0 22px 50px rgba(21, 68, 64, 0.12);
}
/* Gold rim along the top edge, so the conversion surface reads as the
   destination of the page rather than one more card. */
.investor-form::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0;
  height: 3px; pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%, var(--gold) 22%, var(--gold) 78%, transparent 100%);
  opacity: 0.85;
}
.investor-form > * { position: relative; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .investor-form { background: var(--white); }
}
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.4rem; }
.field { display: flex; flex-direction: column; }
.field-full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-head); font-weight: 600; font-size: 0.84rem;
  color: var(--charcoal); margin-bottom: 0.35rem;
}
.req { color: var(--green); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--charcoal);
  background: #fdfdf8; border: 1px solid #c3cfcb; border-radius: 8px;
  padding: 0.72rem 0.9rem; width: 100%;
}
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2.5px solid var(--green); outline-offset: 0; border-color: var(--green);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #b3261e; background: #fff8f7; }
.disclosure-block {
  margin-top: 1.6rem; padding: 1.15rem 1.4rem;
  background: var(--linen); border: 1px solid var(--hairline); border-radius: 10px;
}
.disclosure-block p { font-size: 0.83rem; line-height: 1.55; color: var(--muted); }
.disclosure-block p + p { margin-top: 0.7rem; }
.form-actions { margin-top: 1.6rem; text-align: center; }
.form-status { margin: 0.9rem 0 0; font-size: 0.93rem; min-height: 1.2em; }
.form-status.is-error { color: #b3261e; }
.form-success {
  background: var(--white); border: 1px solid var(--hairline); border-top: 5px solid var(--gold);
  border-radius: 16px; padding: 2.6rem; text-align: center; box-shadow: var(--shadow-soft);
}
.form-success h3 { font-size: 1.3rem; }
.form-success p { color: var(--muted); max-width: 38em; margin: 0 auto; }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-dark); color: var(--on-dark-soft); }
.footer-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2.5rem;
  padding: clamp(2.6rem, 5vw, 3.6rem) 0 1.9rem;
}
.footer-brand img { height: 54px; width: auto; margin-bottom: 1.1rem; }
.footer-brand p { font-size: 0.93rem; line-height: 1.65; }
.footer-tm { font-size: 0.82rem; }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.6rem; align-content: start; }
.footer-nav a { color: var(--on-dark-soft); text-decoration: none; font-size: 0.92rem; }
.footer-nav a:hover { color: var(--gold); text-decoration: underline; }
.footer-legal { border-top: 1px solid var(--hairline-light); padding: 1.7rem 0 2.2rem; }
.footer-legal p { font-size: 0.79rem; line-height: 1.6; color: rgba(169, 196, 191, 0.85); }
.footer-copy { margin-top: 1.1rem; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card, .pillar, .steps li, .site-header { transition: none; }
  /* No specular sweep, no lift: the frosted surfaces stay, the motion goes. */
  .btn::after { display: none; }
  .btn:hover, .btn:active, .card:hover, .pillar:hover, .steps li:hover { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.8rem; }
  .hero-visual { max-width: 600px; }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 1120px) {
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--green-dark); border-bottom: 1px solid var(--hairline-light);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.5rem 4vw 1.1rem; display: none;
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { padding: 0.8rem 0; font-size: 0.95rem; border-bottom: 1px solid rgba(255, 252, 229, 0.09); }
  .lang-switch { align-self: flex-start; margin-top: 1rem; }
  .nav .lang-switch a.lang-link { padding: 0.34rem 0.62rem; font-size: 0.78rem; border-bottom: 0; }
  .nav-toggle { display: block; }
}
@media (max-width: 720px) {
  .hero-strip-inner { justify-content: flex-start; gap: 0.4rem 1.4rem; }
  /* The floating card would overhang the viewport edge, so it sits under the
     photo as a normal frosted panel instead. */
  .float-card {
    position: static; max-width: none; margin-top: 0.9rem;
  }
  /* The grid mask lands closer to the copy on a narrow screen, so dial it back */
  .hero::before { background-size: 52px 52px; opacity: 0.55; }
  .card-grid, .pillar-grid, .steps { grid-template-columns: 1fr; }
  .service-list { columns: 1; }
  .field-grid { grid-template-columns: 1fr; }
  /* Narrow screens: the hero sits in .container and the submit button sits
     inside the form card's padding, so "100% wide" would not match. Cap both at
     --btn-sm instead, which fits the narrower of the two. */
  .btn { width: 100%; min-width: 0; max-width: var(--btn-sm); padding-inline: 1.1rem; }
  .hero-ctas { display: grid; justify-items: start; gap: 0.8rem; }
  .investor-form { padding-inline: 1.15rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}