/* ===========================================================================
   ENOS marketing site — page-level styles built on the Enos Design System
   tokens (styles.css). This file only adds layout/components; all color,
   type, spacing values are pulled from the token custom properties.
   =========================================================================== */

:root {
  /* 2026 masterbrand override: no ivory grounds on new pages (see CLAUDE.md).
     Light grounds are white / #FAFAFA / Alabaster Grey. */
  --surface-page: var(--white);
  --surface-alt: var(--grey-100);
  --surface-accent: var(--iris-100);
  --border-hairline-on-green: rgba(255,255,255,0.18);
}

html { scroll-behavior: smooth; }
body { background: var(--surface-page); }

img { max-width: 100%; display: block; }

/* --- Brand design elements: the stylized e, the signature mark, the slash-arrow ---
   Per the Enos brand book: the e is a cropped watermark anchored to an edge; the
   signature mark is the canonical standalone mark; the slash is drawn as an arrow
   for direction/movement. See guidelines/brand-*.card.html in the design system. */

/* The stylized e — a real graphic device, correctly oriented (never mirrored —
   a flipped "e" isn't the mark), sized to sit in a corner without floating
   into the copy. Uses the real chartreuse (lime) PNG asset directly via
   background-image — the earlier CSS-mask + background-color tinting
   approach silently failed to render in practice, so this is the guaranteed-
   to-render version, matching the lime corner mark on every interior page. */
.brand-e-watermark {
  position: absolute;
  width: clamp(140px, 15vw, 220px);
  height: clamp(140px, 15vw, 220px);
  pointer-events: none;
  z-index: 0;
  background-image: url('assets/elements/enos-e-chartreuse.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.95;
}
.brand-e-watermark.sm { width: clamp(100px, 11vw, 150px); height: clamp(100px, 11vw, 150px); }
.brand-e-watermark.pos-br { bottom: -8%; right: -4%; }
.brand-e-watermark.pos-tr { top: -8%; right: -4%; }
.brand-e-watermark.pos-bl { bottom: -8%; left: -4%; }
/* Ensure section content stacks above the watermark */
.watermark-host { position: relative; overflow: hidden; }
/* On phones the 140px clamp floor is a big chunk of a ~360-390px viewport, so
   the corner offset (-8%/-4%) crops far more of the mark than intended. Scale
   it down so it still reads as a corner accent instead of a clipped blob. */
@media (max-width: 480px) {
  .brand-e-watermark { width: clamp(90px, 26vw, 140px); height: clamp(90px, 26vw, 140px); }
  .brand-e-watermark.sm { width: clamp(70px, 20vw, 100px); height: clamp(70px, 20vw, 100px); }
}
.watermark-host > .container { position: relative; z-index: 1; }

/* CTA banner frame — two real signature-mark PNGs (not a CSS mask, so it's
   guaranteed to render) bleeding from opposite corners, echoing the brand
   book's "to frame photography" reference card. Content sits in .cta-content
   so it stacks above the marks without a blanket ">*" rule that would
   otherwise also catch (and break the positioning of) the marks themselves. */
.cta-banner .inner { position: relative; overflow: hidden; }
.cta-content { position: relative; z-index: 1; }
.cta-mark { position: absolute; z-index: 0; pointer-events: none; }
.cta-mark img { width: 100%; height: auto; display: block; }
.cta-mark-br { bottom: -18%; right: -7%; width: clamp(210px, 24vw, 360px); opacity: 0.95; }

/* The signature mark — standalone brand accent */
.signature-mark { display: block; }
.signature-mark img { width: 100%; height: auto; }

/* The slash, drawn as an arrow — replaces plain directional arrows */
.brand-arrow {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  vertical-align: middle;
  margin: 0 0.12em;
  position: relative;
  top: -0.05em;
}

.container {
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: clamp(48px, 6vw, 96px) 0; }
.section-tight { padding: clamp(32px, 4vw, 56px) 0; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-text); font-weight: 600; font-size: 15px;
  padding: 13px 26px; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              background var(--duration-base) var(--ease-standard);
  line-height: 1;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: scale(0.97); }
.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn-primary { background: var(--green-700); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--green-800); box-shadow: var(--shadow-md); }
.btn-accent { background: var(--chartreuse); color: var(--green-900); }
.btn-accent:hover { background: var(--chartreuse-deep); }
.btn-secondary { background: transparent; color: var(--text-strong); border-color: var(--stone-600); }
.btn-secondary:hover { background: var(--grey-100); }
.btn-ghost-on-green { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.35); }
.btn-ghost-on-green:hover { background: rgba(255,255,255,0.08); }

/* --- Nav ------------------------------------------------------------------ */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-nav .container { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-nav .logo img { height: 22px; }
.site-nav nav.links { display: flex; gap: 30px; }
.site-nav nav.links a { font-family: var(--font-text); font-size: 15px; font-weight: 500; color: var(--text-strong); text-decoration: none; padding-bottom: 5px; border-bottom: 2px solid transparent; }
.site-nav nav.links a.active { font-weight: 600; border-bottom-color: var(--chartreuse-deep); }
.site-nav nav.links a:hover { text-decoration: none; color: var(--green-700); }
.nav-actions { display: flex; align-items: center; gap: 18px; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; }

@media (max-width: 880px) {
  .site-nav nav.links { position: fixed; inset: 76px 0 0 0; background: var(--white); flex-direction: column;
    padding: 28px var(--gutter); gap: 20px; transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: all var(--duration-base) var(--ease-standard); z-index: 60; }
  .site-nav nav.links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-toggle { display: block; }
  /* backdrop-filter on .site-nav hijacks the containing block of any
     position:fixed descendant (a well-known CSS quirk), which made the
     mobile dropdown render see-through over the page instead of solid white.
     Drop the filter on the header itself while the dropdown is open so the
     fixed panel gets a normal viewport-relative solid-white paint. */
  .site-nav:has(nav.links.open) {
    background: var(--white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* --- Eyebrow / headings --------------------------------------------------- */
.eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-subtle); }
.eyebrow-on-green { color: rgba(255,255,255,0.7); }
.eyebrow-lime { color: var(--chartreuse-700); }

h1.display, .display-xl { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; color: var(--text-strong); margin: 0; }
.display-xl { font-size: clamp(2.6rem, 1.3rem + 5.2vw, 4.75rem); }
.display-lg { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.07; color: var(--text-strong); font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.25rem); margin: 0; }
.display-md { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; color: var(--text-strong); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); margin: 0; }
em.accent, .italic-accent { font-style: italic; font-weight: 500; color: var(--lagoon-700); }
.italic-accent.on-dark { color: var(--lagoon-300); }
.link-on-dark { color: var(--lagoon-300); text-decoration: underline; }
.link-on-dark:hover { color: var(--white); }
.italic-accent.lime { color: var(--chartreuse-700); }
.text-lime { color: var(--chartreuse); }

.lead { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); line-height: 1.55; color: var(--text-muted); margin: 0; }

/* --- Hero ------------------------------------------------------------------
   Full-bleed brand-dark section (per brand book: the e is bold color-on-color,
   not a faded watermark on white) — so the whole hero carries the contrast
   color, not just a small box around the mark. */
.hero {
  padding: clamp(48px, 6vw, 88px) 0 clamp(32px,5vw,72px);
  background-color: var(--green-900);
  background-image: linear-gradient(160deg, rgba(0,20,11,0.94), rgba(0,20,11,0.86)), url('assets/textures/tex_statement_pullquote_wide.jpg');
  background-size: cover;
  background-position: center;
}
.hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); gap: clamp(28px,4vw,64px); align-items: center; }
@media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-copy .eyebrow { display: block; margin-bottom: 16px; color: rgba(255,255,255,0.7); }
.hero-copy h1 { margin-top: 0; color: var(--white); }
.hero-copy .lead { max-width: 480px; margin-top: 22px; color: rgba(255,255,255,0.78); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* Routing / product visual panel (dark) */
.panel-dark {
  background: var(--green-700); border-radius: var(--radius-xl); padding: 26px;
  color: var(--white); box-shadow: var(--shadow-lg);
}

/* --- Home hero: dressed as a real product screenshot instead of a plain
   floating card. Browser chrome (traffic-light dots + fake URL) sits on top,
   the panel loses its own top corners/shadow so the two read as one frame,
   and a small cursor icon implies an actual live interaction. */
.product-shot { position: relative; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.32)); }
.browser-chrome {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface-alt);
  border: 1px solid var(--border-subtle);
  border-bottom: none;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 11px 16px;
}
.browser-chrome .dot { width: 10px; height: 10px; border-radius: 50%; }
.browser-chrome .dot-red { background: #ff5f57; }
.browser-chrome .dot-yellow { background: #febc2e; }
.browser-chrome .dot-green { background: #28c840; }
.browser-chrome .browser-url {
  flex: 1; margin-right: 54px;
  font-family: var(--font-text); font-weight: 600; font-size: 12.5px; color: var(--text-strong);
  text-align: center;
}
/* White panel, scoped to the home-hero product shot only — Platform's own
   .panel-dark usage elsewhere on the site stays dark/untouched. */
.product-shot .panel-dark {
  background: var(--white); color: var(--text-strong);
  border: 1px solid var(--border-subtle); border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl); box-shadow: none;
}
.product-shot .panel-head .tag { color: var(--text-muted); }
.product-shot .route-row { border-top-color: var(--border-subtle); }
.product-shot .route-row .pair { color: var(--text-strong); }
.product-shot .route-row .meta { color: var(--text-muted); }
.product-shot .route-badge.speed { background: var(--lagoon-100); color: var(--lagoon-700); }
.product-shot .route-badge.cost { background: var(--marigold-100); color: var(--marigold-700); }
.product-shot .route-badge.kyb { background: var(--iris-100); color: var(--iris-700); }
.product-cursor { position: absolute; top: 108px; right: 78px; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); }
.panel-dark .panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.panel-dark .panel-head .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.62); }
.route-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.14); gap: 12px; }
.route-row:first-child { border-top: none; }
.route-row .pair { font-family: var(--font-text); font-size: 15px; font-weight: 600; color: var(--white); }
.route-row .meta { font-family: var(--font-mono); font-size: 11.5px; color: rgba(255,255,255,0.62); margin-top: 2px; }
.route-badge { font-family: var(--font-text); font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: var(--radius-pill); white-space: nowrap; }
.route-badge.speed { background: rgba(48,187,187,0.18); color: var(--lagoon-300); }
.route-badge.cost { background: rgba(255,194,51,0.16); color: var(--marigold-300); }
.route-badge.kyb { background: rgba(152,152,225,0.2); color: var(--iris-300); }

/* --- Proof / stat bar ------------------------------------------------------ */
.proof-bar { background: var(--surface-alt); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.proof-bar .container { padding: clamp(28px,4vw,44px) var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
/* Corridors page reuses .proof-bar as a nested rounded card (border-radius +
   border, inline) around a single .stat-row, not the full-bleed tagline+stats
   banner .proof-bar .container is designed for. That flex rule shrinks the
   lone .stat-row to its content width and left-aligns it, leaving dead space
   on wide screens. Scope back to plain block layout here so .stat-row (a
   block-level flex row itself) fills the card and its own
   justify-content:space-between actually has room to distribute the stats. */
.proof-bar .proof-card-inner { display: block; }
.proof-tagline { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem,1.1rem+0.9vw,1.75rem); letter-spacing: -0.01em; color: var(--text-strong); }
.stat-row { display: flex; gap: clamp(24px,4vw,56px); flex-wrap: wrap; }
.stat-row > div { border-left: 3px solid var(--lagoon); padding-left: 14px; }
.stat-row .stat-num { font-family: var(--font-display); font-weight: 700; font-size: 27px; color: var(--text-strong); letter-spacing: -0.01em; }
.stat-row .stat-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-subtle); margin-top: 3px; max-width: 130px; }

/* --- Cards ------------------------------------------------------------------ */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 820px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.card .icon-wrap { width: 50px; height: 50px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.card h3 { font-size: 22px; margin: 10px 0 10px; }
.card p { font-size: 15.5px; line-height: 1.55; color: var(--text-muted); margin: 0; }

.icon-lagoon { background: var(--lagoon-100); color: var(--lagoon-700); }
.icon-marigold { background: var(--marigold-100); color: var(--marigold-700); }
.icon-iris { background: var(--iris-100); color: var(--iris-700); }
.icon-green { background: var(--green-100); color: var(--green-700); }
.icon-navy { background: var(--navy-100); color: var(--navy-700); }
.card-tag-future { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--navy-100); color: var(--navy-700); padding: 4px 11px; border-radius: var(--radius-pill); margin-bottom: 12px; }
.card-tag-future.is-amber { background: var(--marigold-100); color: var(--marigold-700); }
.card-tag-future.is-iris { background: var(--iris-100); color: var(--iris-700); }

/* Product pillar card (Commerce / Payments / Accounts) */
.pillar {
  border-radius: var(--radius-xl); padding: clamp(24px,3vw,36px); position: relative; overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
}
.pillar .kicker { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.pillar h3 { font-family: var(--font-display); font-weight: 700; font-size: 27px; margin: 10px 0 10px; }
.pillar p.desc { font-size: 15.5px; line-height: 1.55; margin: 0 0 20px; }
/* Footer zone (AI line + optional source line/tag) sits directly under the
   description, top-aligned — no divider, since description lengths differ
   per card and a bottom-anchored divider never actually lined up across
   the 3 pillar cards. */
.pillar-footer { margin-top: 18px; }
.pillar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pillar li { font-size: 13.5px; font-family: var(--font-mono); }
.pillar.pillar-dark, .pillar.pillar-navy { color: var(--white); }
.pillar.pillar-dark h3, .pillar.pillar-navy h3 { color: var(--white); }
.pillar.pillar-dark .kicker, .pillar.pillar-navy .kicker { color: var(--chartreuse); }
.pillar.pillar-dark p.desc, .pillar.pillar-navy p.desc { color: rgba(255,255,255,0.86); }
.pillar.pillar-dark .pillar-footer, .pillar.pillar-navy .pillar-footer { border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.75); }
.pillar.pillar-dark { background: var(--green-700); }
.pillar.pillar-navy { background: var(--navy-700); }
.pillar.pillar-light { background: var(--surface-alt); border: 1px solid var(--border-subtle); }
.pillar.pillar-light .kicker { color: var(--green-700); }
.pillar.pillar-light h3 { color: var(--text-strong); }
.pillar.pillar-light p.desc { color: var(--text-muted); }
.pillar.pillar-light .pillar-footer { border-color: var(--border-subtle); color: var(--text-subtle); }
.pillar-tag, .future-tag { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(255,255,255,0.16); color: var(--white); padding: 5px 12px; border-radius: var(--radius-pill); margin-bottom: 14px; width: fit-content; }
.pillar-tag.tag-flagship { background: var(--chartreuse); color: var(--green-900); }
.pillar-tag.pillar-tag-bottom { margin: 14px 0 0; }
.pillar-source { font-family: var(--font-mono); font-size: 11.5px; opacity: 0.72; display: flex; align-items: flex-start; gap: 6px; }
.pillar-source a { color: inherit; text-decoration: underline; opacity: 0.9; }
.pillar-source a:hover { opacity: 1; }
.pillar-source-logo { height: 13px; width: auto; display: inline-block; opacity: 0.92; margin-top: 1px; }
.pillar-source-text { display: flex; flex-direction: column; gap: 2px; }
.pillar-icon { width: 42px; height: 42px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; background: rgba(102,215,215,0.16); color: var(--lagoon-300); }
.pillar-icon.icon-amber { background: rgba(255,212,112,0.18); color: var(--marigold-300); }
.pillar-icon.icon-periwinkle { background: rgba(199,197,238,0.2); color: var(--iris-300); }

/* --- FAQ accordion ----------------------------------------------------------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 20px 24px; }
.faq-item summary { cursor: pointer; list-style: none; font-family: var(--font-text); font-weight: 600; font-size: 17px; color: var(--text-strong); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-family: var(--font-mono); font-size: 20px; color: var(--lagoon-700); flex-shrink: 0; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p { margin-top: 12px; color: var(--text-body); line-height: 1.6; }

/* --- Prompt demo animation (Enos One example) ------------------------------- */
.prompt-demo-cursor { display: inline-block; width: 2px; height: 13px; background: var(--chartreuse); margin-left: 2px; vertical-align: -2px; opacity: 0; }
.prompt-demo.is-typing .prompt-demo-cursor { opacity: 1; animation: prompt-demo-blink 0.9s steps(1) infinite; }
@keyframes prompt-demo-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.prompt-demo-step { opacity: 0; transform: translateY(8px); transition: opacity 0.45s ease, transform 0.45s ease; }
.prompt-demo-step.is-visible { opacity: 1; transform: translateY(0); }

/* --- Inverse (green) section ----------------------------------------------- */
.section-inverse { background: var(--green-700); color: var(--white); }
.section-inverse h2, .section-inverse h3 { color: var(--white); }
.section-inverse .lead { color: rgba(255,255,255,0.75); }
.section-inverse .eyebrow { color: rgba(255,255,255,0.62); }

.section-navy { background: var(--navy-700); color: var(--white); }
.section-navy h2, .section-navy h3 { color: var(--white); }
.section-navy .lead { color: rgba(255,255,255,0.78); }

/* --- Corridor chips / coverage ---------------------------------------------- */
.corridor-tabs { display: flex; flex-direction: column; gap: 10px; }
.corridor-tab { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 16px 20px; border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.18); background: transparent; cursor: pointer; text-align: left; color: var(--white);
  font-family: var(--font-text); transition: all var(--duration-base) var(--ease-standard); }
.corridor-tab[aria-selected="true"] { background: rgba(255,255,255,0.08); border-color: var(--chartreuse); }
.corridor-tab .name { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.corridor-tab .count { font-family: var(--font-mono); font-size: 12.5px; color: rgba(255,255,255,0.62); }
.corridor-tab[aria-selected="true"] .count { color: var(--chartreuse); }
.corridor-tabs-soon-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 14px 0 2px; }
.corridor-tab-soon { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 12px 20px; border-radius: var(--radius-md);
  border: 1px dashed rgba(255,255,255,0.16); color: rgba(255,255,255,0.65); font-family: var(--font-text); }
.corridor-tab-soon .name { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.corridor-tab-soon .count { font-family: var(--font-mono); font-size: 11.5px; color: var(--marigold-300); }
.corridor-tab-soon .count.count-teal { color: var(--lagoon-300); }

.corridor-panel { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-xl); padding: clamp(22px,3vw,36px); min-height: 260px; }
.flow-chip { font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; color: var(--white); padding: 9px 16px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); display: inline-block; margin: 0 8px 8px 0; }

/* --- Statement / pull-quote --------------------------------------------------- */
.statement { max-width: var(--container-md); margin: 0 auto; padding: clamp(56px,7vw,104px) var(--gutter); text-align: center; }
.statement blockquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.55rem,1.15rem+2vw,2.6rem); line-height: 1.24; letter-spacing: -0.01em; color: var(--text-strong); margin: 0; }
.statement .attribution { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-subtle); margin-top: 26px; }

/* --- CTA banner --------------------------------------------------------------- */
.cta-banner { margin: clamp(48px,6vw,88px) var(--gutter); }
.cta-banner .inner { max-width: var(--container-lg); margin: 0 auto; background: var(--green-900); border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,0.18);
  padding: clamp(40px,5vw,76px) clamp(24px,4vw,60px); text-align: center; }
.cta-banner h2 { color: var(--white); font-size: clamp(2rem,1.4rem+2.6vw,3.25rem); margin: 0 auto; max-width: 720px; }
.cta-banner p.lead { color: rgba(255,255,255,0.72); max-width: 520px; margin: 18px auto 30px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --- PROTOTYPE: textured section background (masterbrand deck slides 27/29/30) —
   an abstract, blurred, glossy photo-texture tinted in brand dark green/teal,
   with the slash mark rendered large and translucent on top. The .cta-tex jpg is
   a generated placeholder standing in for real photography; swap the background-
   image url below for a licensed/shot photo and this treatment carries over as-is. */
.cta-banner.cta-textured .inner {
  background-image: linear-gradient(180deg, rgba(0,26,15,0.35), rgba(0,26,15,0.75)), url('assets/textures/cta-texture.jpg');
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.14);
}
.cta-banner.cta-textured .cta-mark-br { width: clamp(320px, 38vw, 560px); opacity: 0.5; }
.cta-banner.cta-textured h2 { font-style: italic; font-weight: 500; }
.cta-banner.cta-textured .eyebrow-on-green { display: block; margin-bottom: 14px; }
.cta-banner.cta-textured.cta-art-sunset .inner {
  background-image: linear-gradient(180deg, rgba(0,20,11,0.5), rgba(0,20,11,0.8)), url('assets/art/chu-liu-guosong-sunset.jpg');
  background-position: center;
}

/* --- Chu Foundation artwork backgrounds (owned art, licensed for use) ---------
   Same pattern as .statement-textured / .hero-collage-*: real artwork photo,
   dark green gradient/wash for legibility, background-size:cover (no stretch). */
.section-art-coverage {
  background-image: linear-gradient(rgba(0,20,11,0.62), rgba(0,20,11,0.62)), url('assets/art/chu-liu-guosong-metamorphosis.jpg');
  background-size: cover; background-position: center;
}
.section-art-platform-why {
  background-image: linear-gradient(rgba(0,20,11,0.68), rgba(0,20,11,0.68)), url('assets/art/chu-hernandez-untitled.jpg');
  background-size: cover; background-position: center;
}
.section-art-platform-why .card {
  background: rgba(0,20,11,0.55) !important;
  border-color: rgba(255,255,255,0.14) !important;
  backdrop-filter: blur(2px);
}

.section-art-careers-roles {
  background-image: linear-gradient(rgba(0,20,11,0.55), rgba(0,20,11,0.55)), url('assets/art/chu-rosenkranz-express-nothing.jpg');
  background-size: cover; background-position: center;
}
.section-art-careers-roles .card {
  background: rgba(0,20,11,0.55);
  border-color: rgba(255,255,255,0.14);
}
.section-art-careers-roles .card p {
  color: rgba(255,255,255,0.8);
}
.section-art-corridors {
  background-image: linear-gradient(rgba(0,20,11,0.5), rgba(0,20,11,0.5)), url('assets/art/chu-rosenkranz-express-nothing.jpg');
  background-size: cover; background-position: center;
}
.statement-textured.statement-art-company {
  background-image: linear-gradient(160deg, rgba(0,20,11,0.76), rgba(0,20,11,0.86)), url('assets/art/chu-haegue-yang-sol-lewitt.jpg');
}

/* --- PROTOTYPE: the stylized e used as a hard-edge photo window (masterbrand
   deck slide 18 — "as an overt design element, e.g. to frame photography").
   hero-e-photo-window.png is the e-mark's own alpha channel pre-composited over
   a placeholder color/mood texture via PIL — same "guaranteed to render" pattern
   as .brand-e-watermark, just with a photo behind the letterform instead of a
   flat fill. Swap the source texture for a real photo and re-run the same
   composite step to update. */
.hero-e-photo { position: absolute; top: -6%; right: 2%; width: clamp(150px, 15vw, 220px); height: clamp(150px, 15vw, 220px); z-index: 0; pointer-events: none; opacity: 0.92; }
.hero-e-photo img { width: 100%; height: 100%; object-fit: contain; }

/* --- Corridor spotlight cards ---------------------------------------------------
   Full-card background photo per corridor, dark gradient overlay for text
   legibility, chartreuse slash-mark accent on top of the photo. Photos are
   real corridor photography, cropped via background-size:cover (no stretch). */
.corridor-spotlight-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 820px) { .corridor-spotlight-grid { grid-template-columns: 1fr; } }
.corridor-spotlight-card {
  position: relative; overflow: hidden; border-radius: var(--radius-xl);
  padding: 28px; min-height: 280px; display:flex; flex-direction:column; justify-content:flex-end;
  background-size: cover; background-position: center;
}
.corridor-spotlight-card .corridor-mark { position:absolute; top:-10%; right:-8%; width:34%; opacity:0.32; z-index:0; }
.corridor-spotlight-card h3 { font-family: var(--font-display); color:#fff; font-size:24px; margin:0 0 8px; position:relative; z-index:1; }
.corridor-spotlight-card p { color: rgba(255,255,255,0.82); font-size:14px; line-height:1.5; margin:0; position:relative; z-index:1; max-width:92%; }
.corridor-spotlight-card .tag { font-family: var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color: var(--chartreuse); margin-bottom:10px; position:relative; z-index:1; }
.cs-ph { background-image: linear-gradient(0deg, rgba(0,26,15,0.92) 15%, rgba(0,26,15,0.25) 65%, rgba(0,26,15,0.5) 100%), url('assets/photos_corridors/corridor-philippines.jpg'); background-position: 50% 38%; }
.cs-uae { background-image: linear-gradient(0deg, rgba(0,26,15,0.92) 15%, rgba(0,26,15,0.25) 65%, rgba(0,26,15,0.5) 100%), url('assets/photos_corridors/corridor-uae.jpg'); background-position: 50% 25%; }
.cs-hk { background-image: linear-gradient(0deg, rgba(0,26,15,0.92) 15%, rgba(0,26,15,0.25) 65%, rgba(0,26,15,0.5) 100%), url('assets/photos_corridors/corridor-hongkong.jpg'); background-position: 45% 50%; }

/* --- Statement / pull-quote divider ---------------------------------------------
   Textured-photo variant of .section-inverse for standalone mission/POV
   statements (not a features section). Cropped via background-size:cover,
   no stretching. Combine with .section-inverse.section on the same element. */
.statement-textured {
  background-image: linear-gradient(160deg, rgba(0,26,15,0.72), rgba(0,26,15,0.86)), url('assets/art/chu-abad-oh-happy-days-pullquote.jpg');
  background-size: cover; background-position: center;
  text-align: center;
}
.statement-textured .eyebrow { color: var(--iris-300); display:block; margin-bottom:18px; }
.statement-textured h2 { font-style: italic; font-weight: 500; max-width: 780px; margin: 0 auto; }
.statement-textured .attribution { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 24px; }

/* --- Footer -------------------------------------------------------------------- */
.site-footer { background: var(--green-900); color: var(--white); border-top: 1px solid rgba(255,255,255,0.14); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding: clamp(44px,5vw,68px) 0 28px; }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid img { height: 26px; margin-bottom: 16px; }
.footer-grid p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.62); max-width: 260px; margin: 0; }
.footer-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.62); margin: 0 0 16px; font-weight: 500; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { color: var(--white); opacity: 0.86; font-size: 14.5px; }
.footer-col a:hover { opacity: 1; text-decoration: none; color: var(--chartreuse); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.14);
  font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.6); }

/* --- Page hero (interior pages) -------------------------------------------- */
.page-hero { padding: clamp(56px,7vw,96px) 0 clamp(36px,5vw,64px); background: var(--green-900); }
.page-hero .eyebrow { display: block; margin-bottom: 16px; color: rgba(255,255,255,0.7); }
.page-hero h1 { color: var(--white); }
.page-hero .lead { max-width: 640px; margin-top: 18px; color: rgba(255,255,255,0.78); }
/* The nav floats (sticky, translucent) over the hero by design, but at the
   clamp() floor there isn't enough top padding on phones to clear it — the
   heading sits right under/behind the bar. Give both heroes extra breathing
   room under the nav specifically on mobile widths. */
@media (max-width: 640px) {
  .hero { padding-top: 96px; }
  .page-hero { padding-top: 108px; }
}

/* --- Page-hero photo-collage variant --------------------------------------------
   Multi-photo mosaic background per interior page, brand-graded (desaturated +
   dark green wash + left/bottom gradient baked into the image itself so text
   stays legible without extra CSS gradients). One class per page. */
.hero-collage-platform {
  background-image:
    linear-gradient(rgba(0,18,10,0.58), rgba(0,18,10,0.58)),
    url('assets/hero_collages/pagehero.jpg');
  background-size: cover;
  background-position: center;
}
.hero-collage-corridors {
  background-image:
    linear-gradient(rgba(0,18,10,0.58), rgba(0,18,10,0.58)),
    url('assets/hero_collages/pagehero-corridors.jpg');
  background-size: cover;
  background-position: center 38%;
}
.hero-collage-company {
  background-image:
    linear-gradient(rgba(0,18,10,0.58), rgba(0,18,10,0.58)),
    url('assets/hero_collages/pagehero-company.jpg');
  background-size: cover;
  background-position: center;
}
.hero-collage-careers {
  background-image:
    linear-gradient(rgba(0,18,10,0.58), rgba(0,18,10,0.58)),
    url('assets/hero_collages/pagehero-careers.jpg');
  background-size: cover;
  background-position: center;
}
.hero-collage-press {
  background-image:
    linear-gradient(rgba(0,18,10,0.58), rgba(0,18,10,0.58)),
    url('assets/hero_collages/pagehero-press.jpg');
  background-size: cover;
  background-position: center;
}

/* Text scrim for photo-collage page-heroes: a soft radial glow hugging just the
   copy block, fading to fully transparent at its edges (no hard box), layered
   on top of the uniform brand wash above for extra legibility where the text is. */
.hero-text-panel {
  display: inline-block;
  background: radial-gradient(ellipse 85% 82% at 50% 50%, rgba(0,16,9,0.6) 0%, rgba(0,16,9,0.4) 50%, rgba(0,16,9,0.15) 78%, rgba(0,16,9,0) 100%);
  padding: clamp(14px,2vw,24px) clamp(24px,3vw,36px);
  max-width: 660px;
}

/* --- Tags / badges -------------------------------------------------------- */
.tag-pill { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em;
  padding: 6px 14px; border-radius: var(--radius-pill); }
.tag-lime { background: var(--chartreuse); color: var(--green-900); }
.tag-outline { border: 1px solid var(--border-subtle); color: var(--text-subtle); }
.tag-teal { background: var(--lagoon-100); color: var(--lagoon-700); }
.tag-amber { background: var(--marigold-100); color: var(--marigold-700); }
.tag-iris { background: var(--iris-100); color: var(--iris-700); }

/* --- Contact drawer -------------------------------------------------------- */
.overlay { position: fixed; inset: 0; background: rgba(0,26,15,0.45); opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-standard); z-index: 90; }
.overlay.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(460px, 94vw); background: var(--white); z-index: 100;
  box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform var(--duration-slow) var(--ease-entrance);
  display: flex; flex-direction: column; }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; border-bottom: 1px solid var(--border-subtle); }
.drawer-close { background: none; border: none; cursor: pointer; padding: 6px; color: var(--text-strong); }
.drawer-body { flex: 1; overflow-y: auto; padding: 28px; }
.drawer-body h2 { font-size: 27px; line-height: 1.15; margin-bottom: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field label { font-family: var(--font-text); font-size: 13px; font-weight: 600; color: var(--text-strong); }
.field input, .field select, .field textarea { font-family: var(--font-text); font-size: 15px; padding: 12px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--stone-600); background: var(--white); color: var(--text-body); width: 100%; }
.field textarea { resize: vertical; min-height: 100px; font-family: var(--font-text); line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green-700); box-shadow: var(--shadow-focus); }
.application-question .q { font-family: var(--font-display); font-style: italic; font-size: 17px; line-height: 1.45; color: var(--text-strong); margin-bottom: 12px; }
.role-question { background: var(--surface-alt); border-left: 3px solid var(--chartreuse-deep); padding: 22px 24px; margin-bottom: 30px; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.role-question .q-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 10px; }
.role-question .q-label .role-name { color: var(--text-strong); margin-left: 6px; }
.application-submit-row { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border-subtle); flex-wrap: wrap; gap: 16px; }
.application-submit-note { font-size: 13px; color: var(--text-muted); }
.application-success { display: none; margin-top: 32px; padding: 28px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-alt); font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--text-strong); text-align: center; }
.drawer-foot { padding: 24px 28px; border-top: 1px solid var(--border-subtle); background: var(--surface-alt); }
.drawer-foot .note { text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-subtle); margin-top: 12px; }
.drawer-success { margin-top: 40px; text-align: center; }
.drawer-success .check { width: 56px; height: 56px; border-radius: 50%; background: var(--lagoon-100); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }

/* --- Enos Console demo (Platform page) -------------------------------------
   A compact recreation of the Enos One console UI, animated to show a prompt
   being picked up and routed through to settlement. */
.enos-console {
  max-width: 880px; margin: 0 auto; border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--border-subtle);
  /* Layered shadow for a "pop" / floating-device feel: tight contact shadow +
     large soft ambient shadow + a faint chartreuse-tinted glow. */
  box-shadow:
    0 2px 6px rgba(24,58,45,0.10),
    0 24px 60px -16px rgba(24,58,45,0.28),
    0 40px 100px -24px rgba(130,153,0,0.22);
}
.console-topbar { background: var(--green-900); padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.console-brand { display: flex; align-items: center; gap: 10px; }
.console-logo { height: 15px; width: auto; display: block; }
.console-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); white-space: nowrap; }
.console-brand { flex-shrink: 0; }
.console-tabs { display: flex; gap: 4px; }
.console-tab { font-family: var(--font-text); font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.55); padding: 6px 12px; border-radius: var(--radius-pill); }
.console-tab.is-active { background: rgba(255,255,255,0.1); color: var(--white); }
.console-body {
  background: var(--white); padding: clamp(28px,4vw,44px) clamp(20px,4vw,40px);
  height: 560px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.console-screen { display: none; text-align: center; width: 100%; max-height: 100%; overflow: hidden; }
.console-screen.is-active { display: block; animation: console-fade-in 0.4s ease; }
@keyframes console-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.console-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--green-700); color: var(--white); font-family: var(--font-display); font-style: italic; font-size: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.console-screen h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem,1.1rem+0.8vw,1.7rem); color: var(--text-strong); margin: 0 0 10px; }
.console-screen > p { font-size: 14.5px; color: var(--text-muted); max-width: 440px; margin: 0 auto 26px; line-height: 1.5; }
.console-suggestions { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.console-suggestion { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-alt); }
.console-suggestion .s-icon { font-size: 18px; color: var(--lagoon-700); flex-shrink: 0; }
.console-suggestion .s-copy { flex: 1; }
.console-suggestion .s-title { font-family: var(--font-text); font-weight: 600; font-size: 14.5px; color: var(--text-strong); }
.console-suggestion .s-sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-subtle); margin-top: 2px; }
.console-suggestion .s-arrow { color: var(--text-subtle); flex-shrink: 0; }
.console-suggestion.is-selected { border-color: var(--lagoon); background: var(--lagoon-100); }
.console-prompt-echo { font-family: var(--font-mono); font-size: 14px; color: var(--text-strong); text-align: left; margin-bottom: 18px; }
.console-step { text-align: left; font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); padding: 12px 0; border-top: 1px solid var(--border-subtle); opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease; }
.console-step:first-of-type { border-top: none; }
.console-step.is-visible { opacity: 1; transform: translateY(0); }
.console-step-done { font-family: var(--font-text); font-weight: 600; color: var(--lagoon-700); }
.console-inputbar { background: var(--surface-alt); border-top: 1px solid var(--border-subtle); padding: 16px 22px; font-family: var(--font-text); font-size: 13.5px; color: var(--text-subtle); }

/* --- Utility --------------------------------------------------------------- */
.mt-0 { margin-top: 0 !important; }
.center { text-align: center; }
.max-content { max-width: 640px; }
.max-content-lg { max-width: 760px; }
@media (max-width: 820px) { .hide-mobile { display: none; } }