/* ═══════════════════════════════════════════════════════════════════
   SILEX MARKETING · v4 repositioning layer (Oct 2026)
   Fractional CMO + Fractional Field Marketing, AI and cloud focus.
   Loaded after style.css and silex-v3.css. Uses the v3 tokens.
═══════════════════════════════════════════════════════════════════ */

/* ── NAV: five items plus CTA ─────────────────────────────────────── */
.nav-links { gap: 1.45rem; }
.nav-links .nav-dropdown-menu { min-width: 210px; }
.nav-links .has-dropdown > a::before {
  content: ''; position: absolute; right: -11px; top: 50%; margin-top: -2px;
  border: 4px solid transparent; border-top-color: rgba(255,255,255,.55); border-bottom: 0;
}
.nav-links .has-dropdown { margin-right: 8px; }
@media (max-width: 1100px) and (min-width: 821px) {
  .nav-links { gap: 1.05rem; }
  .nav-links a { font-size: .68rem; }
  .nav-cta { padding: .5rem 1rem; }
}
@media (max-width: 820px) {
  .nav-links { max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
  .nav-links .has-dropdown > a::before { display: none; }
}

/* ── FOOTER: three link columns ───────────────────────────────────── */
.footer-links { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.footer-legal { font-size: .68rem; color: var(--muted); margin-top: .35rem; }
@media (max-width: 480px) { .footer-links { grid-template-columns: 1fr 1fr; } }

/* ── HOME HERO (v4) ───────────────────────────────────────────────── */
.hero-v4 .hero-trademark { font-size: clamp(.9rem, 1.6vw, 1.15rem); letter-spacing: .24em; margin: 1.25rem 0 1.25rem; }
.hero-v4 .hero-h1-center { white-space: normal; max-width: 900px; margin-left: auto; margin-right: auto; font-size: clamp(1.9rem, 4.2vw, 3.3rem); }
.hero-sub-v4 {
  color: rgba(221,222,230,.86); font-size: 1.08rem; line-height: 1.7;
  max-width: 680px; margin: 0 auto 2.25rem;
}
.hero-path {
  display: block; text-align: left; text-decoration: none; position: relative;
  padding-right: 3rem !important;
}
.hero-path .hc-kicker {
  font-family: var(--sx-mono); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sx-gold2); margin-bottom: .55rem; display: block;
}
.hero-path .hc-go {
  position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: background .2s, border-color .2s, transform .2s var(--sx-ease);
}
.hero-path:hover .hc-go { background: var(--sx-gold); border-color: var(--sx-gold); color: var(--sx-navy); transform: translateY(-50%) translateX(3px); }
.hero-path .hc-go svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.hero-tagline-small {
  font-family: var(--sx-mono); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--sx-silver); margin-top: .9rem;
}
@media (max-width: 820px) {
  .hero-v4 .hero-h1-center { font-size: clamp(1.55rem, 7vw, 2.1rem); }
  .hero-sub-v4 { font-size: .95rem; }
}

/* ── LIFECYCLE (signature graphic) ────────────────────────────────── */
.lc { margin: 3rem auto 0; max-width: 1120px; position: relative; }
.lc-band {
  border-radius: 8px; padding: 1.15rem 1.5rem; text-align: center; position: relative; z-index: 1;
}
.lc-band b { display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: .01em; }
.lc-band span { display: block; font-size: .84rem; margin-top: .2rem; line-height: 1.5; }
.lc-band .lc-tag {
  font-family: var(--sx-mono); font-size: .58rem; letter-spacing: .24em; text-transform: uppercase;
  display: inline-block; margin-bottom: .35rem;
}
.lc-band.cmo { background: rgba(198,146,20,.12); border: 2px solid var(--sx-gold); color: var(--sx-navy); }
.lc-band.cmo .lc-tag { color: #8a6610; }
.lc-band.team { background: var(--sx-navy); color: #fff; border: 2px solid var(--sx-navy); }
.lc-band.team span { color: var(--sx-silver-lt); }
.lc-band.team .lc-tag { color: var(--sx-gold2); }
.lc-stages {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
  padding: 2rem 0; position: relative;
}
/* vertical ties from both bands into every stage */
.lc-stage { position: relative; background: #fff; border: 1px solid var(--sx-border); border-radius: 8px; padding: 1.4rem 1.2rem 1.25rem; box-shadow: 0 10px 28px rgba(11,31,42,.06); }
.lc-stage::before, .lc-stage::after {
  content: ''; position: absolute; left: 50%; width: 2px; height: 2rem; background: var(--sx-border);
}
.lc-stage::before { top: calc(-2rem - 1px); background: var(--sx-gold); opacity: .6; }
.lc-stage::after { bottom: calc(-2rem - 1px); background: var(--sx-navy); opacity: .35; }
.lc-stage + .lc-stage .lc-arrow { display: block; }
.lc-arrow {
  display: none; position: absolute; left: -2rem; top: 50%; width: 2rem; height: 14px; margin-top: -7px;
}
.lc-arrow svg { width: 100%; height: 100%; stroke: var(--sx-gold); fill: none; stroke-width: 2; }
.lc-num { font-family: var(--sx-mono); font-size: .6rem; letter-spacing: .2em; color: var(--sx-gold); }
.lc-name { font-size: 1.15rem; font-weight: 800; color: var(--sx-navy); margin: .25rem 0 .7rem; display: flex; align-items: center; gap: .55rem; }
.lc-name svg { width: 22px; height: 22px; stroke: var(--sx-red); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.lc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.lc-list li { font-size: .8rem; color: var(--sx-muted); line-height: 1.4; padding-left: .9rem; position: relative; }
.lc-list li::before { content: ''; position: absolute; left: 0; top: .5em; width: 5px; height: 5px; border-radius: 50%; background: var(--sx-gold); }
.lc-note { text-align: center; font-size: .82rem; color: var(--sx-muted); margin-top: 1.25rem; }
.sx-navy .lc-stage { background: var(--sx-navy2); border-color: rgba(255,255,255,.1); box-shadow: none; }
.sx-navy .lc-name { color: #fff; }
.sx-navy .lc-list li { color: var(--sx-silver); }
.sx-navy .lc-band.cmo { color: #fff; }
.sx-navy .lc-band.cmo .lc-tag { color: var(--sx-gold2); }
.sx-navy .lc-band.team { background: transparent; border-color: rgba(255,255,255,.3); }
@media (max-width: 960px) {
  .lc-stages { grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.25rem 0; }
  .lc-stage::before, .lc-stage::after, .lc-arrow { display: none !important; }
}
@media (max-width: 520px) { .lc-stages { grid-template-columns: 1fr; } }

/* ── TWO PATHS (startup vs integrator) ────────────────────────────── */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 3rem; }
.path-card {
  position: relative; overflow: hidden; border-radius: 8px; background: var(--sx-navy); color: #fff;
  padding: 2.25rem 2.25rem 2rem; display: flex; flex-direction: column; min-height: 420px;
  text-decoration: none; isolation: isolate; transition: transform .3s var(--sx-ease), box-shadow .3s;
}
.path-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(11,31,42,.25); }
.path-card.red { background: linear-gradient(160deg, #3a1219 0%, var(--sx-navy) 70%); }
.path-art { position: absolute; right: -10px; top: -10px; width: 62%; max-width: 300px; z-index: -1; opacity: .9; }
.path-art svg { width: 100%; height: auto; display: block; }
.path-kicker { font-family: var(--sx-mono); font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--sx-gold2); }
.path-card h3 { color: #fff; font-size: 1.55rem; font-weight: 700; line-height: 1.2; margin: .75rem 0 .9rem; max-width: 340px; text-align: left; }
.path-card p { color: var(--sx-silver-lt); font-size: .9rem; line-height: 1.7; max-width: 420px; }
.path-list { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; display: grid; gap: .45rem; }
.path-list li { display: flex; gap: .6rem; font-size: .84rem; color: #fff; align-items: flex-start; }
.path-list li::before {
  content: ''; width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; border-radius: 50%;
  background: var(--sx-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1F2A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/10px no-repeat;
}
.path-go { margin-top: auto; font-weight: 700; font-size: .82rem; letter-spacing: .06em; color: var(--sx-gold2); display: inline-flex; gap: .5rem; align-items: center; }
.path-card:hover .path-go { color: #fff; }
@media (max-width: 820px) {
  .paths { grid-template-columns: 1fr; }
  .path-card { min-height: 0; padding: 1.75rem 1.5rem; }
  .path-art { width: 45%; opacity: .45; }
}

/* ── PILLARS (four icon tiles) ────────────────────────────────────── */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 3rem; }
.pillar {
  background: #fff; border: 1px solid var(--sx-border); border-radius: 8px; padding: 1.75rem 1.4rem 1.5rem;
  border-top: 4px solid var(--pc, var(--sx-navy)); text-decoration: none; display: flex; flex-direction: column;
  transition: transform .25s var(--sx-ease), box-shadow .25s;
}
.pillar:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(11,31,42,.1); }
.pillar-ico { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--pc, #0B1F2A) 12%, white); margin-bottom: 1rem; }
.pillar-ico svg { width: 24px; height: 24px; stroke: var(--pc, var(--sx-navy)); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pillar-k { font-family: var(--sx-mono); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sx-muted); }
.pillar-t { font-size: 1.05rem; font-weight: 800; color: var(--sx-navy); margin: .3rem 0 .5rem; }
.pillar-d { font-size: .82rem; color: var(--sx-muted); line-height: 1.6; flex: 1; }
.pillar-go { font-size: .76rem; font-weight: 700; color: var(--sx-navy); margin-top: 1rem; letter-spacing: .04em; }
.pillar.p1 { --pc: #0B1F2A; } .pillar.p2 { --pc: #C69214; } .pillar.p3 { --pc: #7A1F2B; } .pillar.p4 { --pc: #4F6575; }
@media (max-width: 960px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pillars { grid-template-columns: 1fr; } }

/* ── AI CREDIBILITY BAND ──────────────────────────────────────────── */
.ai-band { display: grid; grid-template-columns: 1.05fr 1fr; gap: 4rem; align-items: center; }
.ai-band h2 { color: #fff; text-align: left !important; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.15; margin: 0 0 1rem; font-weight: 400; }
.ai-band h2 strong { color: var(--sx-gold2); font-weight: 700; }
.ai-band p { color: var(--sx-silver); font-size: .98rem; line-height: 1.75; margin-bottom: 1.5rem; }
.ai-band .sx-kicker { justify-content: flex-start; }
.ai-proof { display: grid; gap: .85rem; }
.ai-proof-row {
  display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 8px; padding: 1.1rem 1.2rem;
}
.ai-proof-row .ico { width: 44px; height: 44px; border-radius: 50%; background: rgba(198,146,20,.14); display: flex; align-items: center; justify-content: center; }
.ai-proof-row .ico svg { width: 22px; height: 22px; stroke: var(--sx-gold2); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ai-proof-row b { display: block; color: #fff; font-size: .95rem; margin-bottom: .2rem; }
.ai-proof-row span { color: var(--sx-silver); font-size: .82rem; line-height: 1.55; }
.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .25rem; }
.chip-row span {
  font-family: var(--sx-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid rgba(198,146,20,.45); color: var(--sx-gold2); padding: .38rem .6rem; border-radius: 3px;
}
.sx-light .chip-row span, .sx-cream .chip-row span, .sx-oat .chip-row span { color: #8a6610; border-color: rgba(198,146,20,.55); background: #fff; }
@media (max-width: 960px) { .ai-band { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ── INNER PAGE HERO ADD-ONS ──────────────────────────────────────── */
.hero-ctas { display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.btn-ghost-light { border: 1.5px solid rgba(255,255,255,.55); color: #fff; padding: .88rem 2.1rem; }
.btn-ghost-light:hover { background: #fff; color: var(--sx-navy); }

/* ── PERSONA / ICON TILES ─────────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 1.25rem; margin-top: 3rem; }
.tile { background: #fff; border: 1px solid var(--sx-border); border-radius: 8px; padding: 1.75rem 1.5rem; }
.sx-cream .tile, .sx-oat .tile { background: #fff; }
.tile-ico { width: 52px; height: 52px; border-radius: 50%; background: rgba(198,146,20,.12); display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; }
.tile-ico svg { width: 25px; height: 25px; stroke: var(--sx-gold); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tile.red .tile-ico { background: rgba(122,31,43,.1); } .tile.red .tile-ico svg { stroke: var(--sx-red); }
.tile.navy .tile-ico { background: rgba(11,31,42,.08); } .tile.navy .tile-ico svg { stroke: var(--sx-navy); }
.tile-t { font-size: 1.02rem; font-weight: 800; color: var(--sx-navy); margin-bottom: .45rem; line-height: 1.3; }
.tile-d { font-size: .85rem; color: var(--sx-muted); line-height: 1.65; }
.sx-navy .tile { background: var(--sx-navy2); border-color: rgba(255,255,255,.1); }
.sx-navy .tile-t { color: #fff; }
.sx-navy .tile-d { color: var(--sx-silver); }
@media (max-width: 960px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tiles { grid-template-columns: 1fr; } }

/* ── OWNERSHIP WHEEL (CMO responsibilities) ───────────────────────── */
.own { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: center; margin-top: 3rem; }
.own-wheel svg { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto; }
.own-list { display: grid; gap: .1rem; counter-reset: own; }
.own-item { display: grid; grid-template-columns: 38px 1fr; gap: .9rem; padding: .85rem 0; border-bottom: 1px solid var(--sx-border); }
.own-item:last-child { border-bottom: none; }
.own-item::before {
  counter-increment: own; content: counter(own, decimal-leading-zero);
  font-family: var(--sx-mono); font-size: .7rem; color: var(--sx-navy); background: rgba(198,146,20,.16);
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.own-item b { display: block; font-size: .95rem; color: var(--sx-navy); }
.own-item span { font-size: .82rem; color: var(--sx-muted); line-height: 1.55; }
@media (max-width: 960px) { .own { grid-template-columns: 1fr; gap: 2rem; } .own-wheel svg { max-width: 340px; } }

/* ── PHASED TIMELINE (30/60/90, launch runway) ────────────────────── */
.phases { margin-top: 3rem; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); position: relative; }
.phases::before {
  content: ''; position: absolute; left: 0; right: 0; top: 46px; height: 4px; border-radius: 3px;
  background: linear-gradient(90deg, var(--sx-gold), var(--sx-red));
}
.phase { padding: 0 1.25rem 0 0; position: relative; }
.phase-when { font-family: var(--sx-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sx-muted); height: 28px; }
.phase-dot { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--sx-gold); position: relative; z-index: 1; margin: 7px 0 1.25rem; }
.phase:nth-child(even) .phase-dot { border-color: var(--sx-red); }
.phase.milestone .phase-dot { width: 24px; height: 24px; transform: rotate(45deg); border-radius: 3px; margin-top: 5px; background: var(--sx-gold); border-color: var(--sx-gold); }
.phase-t { font-size: 1.05rem; font-weight: 800; color: var(--sx-navy); margin-bottom: .5rem; }
.phase ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.phase li { font-size: .82rem; color: var(--sx-muted); line-height: 1.5; padding-left: .85rem; position: relative; }
.phase li::before { content: ''; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; background: var(--sx-gold); border-radius: 50%; }
.sx-navy .phase-dot { background: var(--sx-navy); }
.sx-navy .phase-t { color: #fff; }
.sx-navy .phase li, .sx-navy .phase-when { color: var(--sx-silver); }
@media (max-width: 820px) {
  .phases { grid-template-columns: 1fr; padding-left: 2.25rem; }
  .phases::before { left: 9px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; background: linear-gradient(var(--sx-gold), var(--sx-red)); }
  .phase { padding: 0 0 1.75rem 0; }
  .phase-dot { position: absolute; left: -2.25rem; top: 0; margin: 0; }
  .phase.milestone .phase-dot { left: calc(-2.25rem - 2px); }
  .phase-when { height: auto; margin-bottom: .3rem; }
}

/* ── PRICING / ENGAGEMENT CARDS ───────────────────────────────────── */
.offers { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 1.25rem; margin-top: 3rem; align-items: stretch; }
.offer {
  background: #fff; border: 1px solid var(--sx-border); border-radius: 10px; padding: 2rem 1.6rem 1.75rem;
  display: flex; flex-direction: column; position: relative;
}
.offer.rec { border: 2px solid var(--sx-gold); box-shadow: 0 24px 54px rgba(11,31,42,.13); transform: translateY(-10px); }
.offer-flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--sx-gold); color: var(--sx-navy); font-family: var(--sx-mono); font-size: .58rem;
  letter-spacing: .18em; text-transform: uppercase; padding: .35rem .75rem; border-radius: 3px; white-space: nowrap;
}
.offer-k { font-family: var(--sx-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sx-gold); }
.offer-t { font-size: 1.3rem; font-weight: 800; color: var(--sx-navy); margin: .35rem 0 .25rem; line-height: 1.25; }
.offer-s { font-size: .8rem; color: var(--sx-muted); margin-bottom: 1.1rem; }
.offer-d { font-size: .86rem; color: var(--sx-muted); line-height: 1.65; margin-bottom: 1.1rem; }
.offer ul { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; flex: 1; align-content: start; }
.offer li { font-size: .84rem; color: var(--sx-navy); display: flex; gap: .55rem; line-height: 1.45; }
.offer li::before {
  content: ''; width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; border-radius: 50%;
  background: rgba(198,146,20,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C69214' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/10px no-repeat;
}
.offer .btn { justify-content: center; }
@media (max-width: 1100px) { .offers { grid-template-columns: 1fr 1fr; } .offer.rec { transform: none; } }
@media (max-width: 640px) { .offers { grid-template-columns: 1fr; } }

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq { max-width: 820px; margin: 2.5rem auto 0; display: grid; gap: .75rem; }
.faq details { background: #fff; border: 1px solid var(--sx-border); border-radius: 8px; padding: 0 1.4rem; }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.15rem 2rem 1.15rem 0; font-weight: 700; color: var(--sx-navy);
  font-size: .98rem; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400; color: var(--sx-gold); transition: transform .2s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 1.25rem; color: var(--sx-muted); font-size: .9rem; line-height: 1.7; }

/* ── DIAGRAM FIGURE (inline SVG, light and dark sections) ─────────── */
.dia { margin: 3rem auto 0; max-width: 1000px; }
.dia svg { width: 100%; height: auto; display: block; }
.dia-cap { text-align: center; font-size: .82rem; color: var(--sx-muted); margin-top: 1rem; }
.sx-navy .dia-cap { color: var(--sx-silver); }
.dia-m { display: none; }
@media (max-width: 720px) { .dia-d { display: none; } .dia-m { display: block; } }

/* ── TWO-COLUMN TEXT + LIST ───────────────────────────────────────── */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.duo h2 { text-align: left !important; margin: 0 0 1rem !important; font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.2; }
.duo .sx-kicker { justify-content: flex-start; }
.duo p { color: var(--sx-muted); font-size: .98rem; line-height: 1.75; margin-bottom: 1rem; }
.sx-navy .duo p { color: var(--sx-silver); }
.sx-navy .duo h2 { color: #fff; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; gap: 2rem; } }

/* ── BEFORE / AFTER ───────────────────────────────────────────────── */
.ba { display: grid; grid-template-columns: 1fr 60px 1fr; align-items: stretch; margin-top: 3rem; }
.ba-col { border-radius: 8px; padding: 1.75rem 1.6rem; }
.ba-col.before { background: #fff; border: 1px dashed #c9c2b6; }
.ba-col.after { background: var(--sx-navy); color: #fff; }
.ba-col h4 { font-family: var(--sx-mono); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 1rem; color: var(--sx-muted); font-weight: 500; }
.ba-col.after h4 { color: var(--sx-gold2); }
.ba-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.ba-col li { font-size: .88rem; line-height: 1.5; padding-left: 1.4rem; position: relative; color: var(--sx-muted); }
.ba-col.before li::before { content: '\00d7'; position: absolute; left: 0; top: -1px; color: #b0a89b; font-weight: 700; }
.ba-col.after li { color: #fff; }
.ba-col.after li::before { content: ''; position: absolute; left: 0; top: .3em; width: 12px; height: 12px; border-radius: 50%; background: var(--sx-gold); }
.ba-arrow { display: flex; align-items: center; justify-content: center; }
.ba-arrow svg { width: 36px; height: 36px; stroke: var(--sx-gold); fill: none; stroke-width: 2; }
@media (max-width: 820px) { .ba { grid-template-columns: 1fr; gap: .5rem; } .ba-arrow svg { transform: rotate(90deg); } }

/* ── CASE CARD (anonymized proof) ─────────────────────────────────── */
.case { display: grid; grid-template-columns: 1.2fr 1fr; border-radius: 10px; overflow: hidden; margin-top: 3rem; background: #fff; border: 1px solid var(--sx-border); }
.case-photo { position: relative; min-height: 320px; }
.case-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,31,42,.15), rgba(11,31,42,.0)); }
.case-body { padding: 2.25rem 2rem; }
.case-body .offer-k { display: block; margin-bottom: .5rem; }
.case-body h3 { font-size: 1.35rem; color: var(--sx-navy); text-align: left; margin-bottom: .75rem; line-height: 1.3; font-weight: 800; }
.case-body p { font-size: .88rem; color: var(--sx-muted); line-height: 1.7; margin-bottom: 1.25rem; }
.case-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; border-top: 1px solid var(--sx-border); padding-top: 1.1rem; }
.case-stats b { display: block; font-size: 1.6rem; font-weight: 900; color: var(--sx-navy); line-height: 1; }
.case-stats span { font-size: .7rem; color: var(--sx-muted); letter-spacing: .03em; }
@media (max-width: 820px) { .case { grid-template-columns: 1fr; } .case-photo { min-height: 220px; } }

/* ── COMMITMENT ROW (5 stats) ─────────────────────────────────────── */
.sx-stats.five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 960px) { .sx-stats.five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .sx-stats.five { grid-template-columns: 1fr 1fr; } }

/* ── FOUNDERS ─────────────────────────────────────────────────────── */
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 3rem; }
.founder { background: #fff; border: 1px solid var(--sx-border); border-radius: 10px; padding: 2rem; display: grid; grid-template-columns: 96px 1fr; gap: 1.4rem; align-items: start; }
.founder-ph {
  width: 96px; height: 96px; border-radius: 50%; background: var(--sx-navy); color: var(--sx-gold2);
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; letter-spacing: .04em;
  border: 3px solid #fff; box-shadow: 0 0 0 2px var(--sx-gold);
}
.founder-ph img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.founder h3 { text-align: left; font-size: 1.15rem; color: var(--sx-navy); margin-bottom: .15rem; font-weight: 800; }
.founder .role { font-family: var(--sx-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sx-gold); margin-bottom: .75rem; display: block; }
.founder p { font-size: .86rem; color: var(--sx-muted); line-height: 1.65; }
.founder a.li { display: inline-block; margin-top: .75rem; font-size: .78rem; font-weight: 700; color: var(--sx-navy); }
.badges { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.badge-pill { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--sx-border); background: #fff; border-radius: 30px; padding: .55rem 1rem; font-size: .78rem; font-weight: 700; color: var(--sx-navy); }
.badge-pill svg { width: 16px; height: 16px; stroke: var(--sx-gold); fill: none; stroke-width: 2; }
@media (max-width: 820px) { .founders { grid-template-columns: 1fr; } .founder { grid-template-columns: 72px 1fr; padding: 1.5rem; } .founder-ph { width: 72px; height: 72px; font-size: 1.2rem; } }

/* ── SPARK STORY (about) ──────────────────────────────────────────── */
.spark { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 2.5rem; position: relative; }
.spark::before { content: ''; position: absolute; left: 16%; right: 16%; top: 38px; height: 2px; background: linear-gradient(90deg, var(--sx-silver), var(--sx-gold), var(--sx-red)); }
.spark-step { text-align: center; position: relative; padding: 0 1rem; }
.spark-ico { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 1rem; background: var(--sx-navy); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--sx-border); }
.spark-ico svg { width: 32px; height: 32px; stroke: var(--sx-gold2); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.spark-t { font-weight: 800; color: var(--sx-navy); font-size: 1rem; }
.spark-d { font-size: .82rem; color: var(--sx-muted); line-height: 1.55; margin-top: .3rem; }
@media (max-width: 640px) { .spark { grid-template-columns: 1fr; gap: 1.5rem; } .spark::before { display: none; } }

/* ── INSIGHT CARDS (news) ─────────────────────────────────────────── */
.insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.insight { background: #fff; border: 1px solid var(--sx-border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: transform .25s var(--sx-ease), box-shadow .25s; }
.insight:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(11,31,42,.1); }
.insight-cover { aspect-ratio: 16 / 9; background: var(--sx-navy); position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 1.1rem 1.25rem; }
.insight-cover::before { content: ''; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; border: 2px solid rgba(198,146,20,.35); }
.insight-cover::after { content: ''; position: absolute; right: 22px; top: 22px; width: 22px; height: 22px; background: var(--sx-gold2); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.insight-cover.red { background: linear-gradient(150deg, var(--sx-red), var(--sx-navy) 75%); }
.insight-cover.slate { background: linear-gradient(150deg, #4F6575, var(--sx-navy) 80%); }
.insight-cover span { position: relative; z-index: 1; color: #fff; font-weight: 800; font-size: 1.05rem; line-height: 1.3; max-width: 85%; }
.insight-body { padding: 1.2rem 1.25rem 1.4rem; flex: 1; display: flex; flex-direction: column; }
.insight-meta { font-family: var(--sx-mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sx-gold); margin-bottom: .45rem; }
.insight-body p { font-size: .84rem; color: var(--sx-muted); line-height: 1.6; flex: 1; }
.insight-go { font-size: .76rem; font-weight: 700; color: var(--sx-navy); margin-top: .9rem; }
@media (max-width: 960px) { .insights { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .insights { grid-template-columns: 1fr; } }

/* ── SMALL HELPERS ────────────────────────────────────────────────── */
.mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.center { text-align: center; }
.sx-navy .sx-kicker { color: var(--sx-gold2); }
.sx-navy .sx-kicker::before { background: var(--sx-gold2); }
.lede-left { color: var(--sx-muted); font-size: 1rem; line-height: 1.75; }
.footer-g { grid-template-columns: 1fr 1.6fr; }
@media (max-width: 960px) { .footer-g { grid-template-columns: 1fr; gap: 2rem; } }
.path-card.red .path-art { width: 50%; opacity: .6; }
.sx-split > *, .duo > *, .ai-band > *, .own > * { min-width: 0; }
@media (max-width: 520px) { .btn { white-space: normal; text-align: center; justify-content: center; } .hero-actions .btn { width: 100%; } }
.lc.nobands .lc-stage::before, .lc.nobands .lc-stage::after { display: none; }
.contact-g > * { min-width: 0; } .form-shell select, .form-shell input, .form-shell textarea { max-width: 100%; }
/* Home: new offers as a text strip, not boxes */
.offer-strip { width: 100%; margin-top: 2rem; padding: 1.4rem 0 .4rem; border-top: 1px solid rgba(255,255,255,.12); }
.offer-strip-label { font-family: var(--sx-mono); font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--sx-gold2); margin-bottom: 1rem; }
.offer-strip-row { display: flex; justify-content: center; align-items: stretch; gap: 2.5rem; }
.offer-strip-rule { width: 1px; background: linear-gradient(transparent, var(--sx-gold), transparent); }
.offer-strip-item { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-decoration: none; }
.os-name { font-size: 1.2rem; font-weight: 800; color: #fff; letter-spacing: .01em; transition: color .2s; }
.os-detail { font-size: .84rem; color: var(--sx-silver); }
.os-go { font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--sx-gold2); margin-top: .15rem; }
.offer-strip-item:hover .os-name { color: var(--sx-gold2); }
.divisions-more { text-align: center; margin-top: 2rem; font-size: .92rem; color: var(--muted); }
.divisions-more a { color: var(--red); font-weight: 700; border-bottom: 1px solid rgba(122,31,43,.35); }
@media (max-width: 820px) { .offer-strip-row { flex-direction: column; gap: 1.25rem; } .offer-strip-rule { width: 60px; height: 1px; margin: 0 auto; background: var(--sx-gold); opacity: .5; } }

/* ── v4.1 VISUAL COMPONENTS (less copy, more imagery) ─────────────── */
.ai-visual { display: grid; gap: 1rem; }
.ai-photo { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; }
.ai-photo img { width: 100%; height: 100%; object-fit: cover; }
.ai-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,31,42,.92) 0%, rgba(11,31,42,.2) 60%, transparent 100%); }
.ai-photo-cap { position: absolute; left: 1.4rem; bottom: 1.2rem; z-index: 1; color: #fff; display: flex; flex-direction: column; gap: .15rem; }
.ai-photo-cap b { font-size: 1.6rem; font-weight: 900; line-height: 1.1; }
.ai-photo-cap span { font-size: .8rem; color: var(--sx-silver-lt); }
.ai-photo-cap .ai-photo-k { font-family: var(--sx-mono); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sx-gold2); }
.icon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.ig { display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center; padding: 1rem .5rem; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); }
.ig svg { width: 28px; height: 28px; stroke: var(--sx-gold2); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ig span { font-size: .74rem; font-weight: 700; color: #fff; line-height: 1.25; }
.sx-cream .ig, .sx-oat .ig, .sx-light .ig { background: #fff; border-color: var(--sx-border); }
.sx-cream .ig span, .sx-oat .ig span { color: var(--sx-navy); }
.sx-cream .ig svg, .sx-oat .ig svg { stroke: var(--sx-gold); }
@media (max-width: 520px) { .icon-grid { grid-template-columns: repeat(2, 1fr); } }

/* Icon row: big icon, two-word label, no paragraph */
.icon-row { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 1rem; margin-top: 2.75rem; }
.icon-row .ir { text-align: center; padding: 1.75rem 1rem 1.5rem; background: #fff; border: 1px solid var(--sx-border); border-radius: 10px; border-top: 3px solid var(--c, var(--sx-gold)); }
.icon-row .ir:nth-child(3n+2) { --c: var(--sx-red); }
.icon-row .ir:nth-child(3n) { --c: var(--sx-navy); }
.icon-row .ir-ico { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto .9rem; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c, #C69214) 12%, white); }
.icon-row .ir-ico svg { width: 30px; height: 30px; stroke: var(--c, var(--sx-gold)); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-row .ir-t { font-size: .95rem; font-weight: 800; color: var(--sx-navy); line-height: 1.3; }
.icon-row .ir-d { font-size: .78rem; color: var(--sx-muted); margin-top: .3rem; line-height: 1.45; }
.sx-navy .icon-row .ir { background: var(--sx-navy2); border-color: rgba(255,255,255,.1); border-top-color: var(--c, var(--sx-gold)); }
.sx-navy .icon-row .ir-ico { background: rgba(255,255,255,.06); }
.sx-navy .icon-row .ir:nth-child(3n) { --c: var(--sx-silver); }
.sx-navy .icon-row .ir-t { color: #fff; }
.sx-navy .icon-row .ir-d { color: var(--sx-silver); }
@media (max-width: 960px) { .icon-row { grid-template-columns: repeat(2, 1fr); } }

/* Photo strip: three captioned images */
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 2.5rem; }
.photo-strip figure { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sx-ease); }
.photo-strip figure:hover img { transform: scale(1.05); }
.photo-strip figure::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,31,42,.85), transparent 60%); }
.photo-strip figcaption { position: absolute; left: 1rem; bottom: .9rem; z-index: 1; color: #fff; font-weight: 800; font-size: 1rem; }
.photo-strip figcaption small { display: block; font-family: var(--sx-mono); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sx-gold2); font-weight: 400; margin-bottom: .2rem; }
@media (max-width: 720px) { .photo-strip { grid-template-columns: 1fr; } }

/* Shorter copy: own-list titles only */
.own-item span { display: none; }
.own-item { padding: .7rem 0; align-items: center; }
/* Campaigns: headline-only benefit cards */
.cp-benefit-card p { display: none; }
.cp-benefit-card h3 { margin-bottom: 0; }
/* Summit stat panel without a photo (home) */
.ai-photo.noimg { background: radial-gradient(circle at 85% 20%, rgba(198,146,20,.35), transparent 45%), linear-gradient(150deg, #1E3A4D, #0B1F2A 70%); border: 1px solid rgba(255,255,255,.1); aspect-ratio: 16 / 7; }
.ai-photo.noimg::after { background: none; content: ''; position: absolute; right: 28px; top: 26px; width: 34px; height: 34px; inset: auto 28px auto auto; background: var(--sx-gold2); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.offer-strip { padding-top: 1.75rem; }

/* ── v4.2 ENGAGEMENT LAYER ─────────────────────────────────────────── */
/* Brighter, moving hero photos */
.page-hero.has-photo .hero-photo, .cp-hero.has-photo .hero-photo, .hero.has-photo .hero-photo { opacity: .78; animation: sxZoom 22s ease-in-out infinite alternate; }
.hero-photo-shade { background: linear-gradient(180deg, rgba(11,31,42,.78) 0%, rgba(11,31,42,.45) 45%, rgba(11,31,42,.92) 100%) !important; }
@keyframes sxZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .hero-photo { animation: none !important; } }
.hero-tall { padding-top: calc(var(--nav-h) + 7rem) !important; padding-bottom: 7rem !important; }
.hero-pills { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.75rem; }
.hero-pills span { border: 1px solid rgba(212,162,32,.55); color: #fff; background: rgba(11,31,42,.45); backdrop-filter: blur(4px); padding: .5rem 1rem; border-radius: 30px; font-size: .78rem; font-weight: 700; letter-spacing: .03em; }

/* Service photo cards */
.svc-photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.75rem; }
.svc-photo { position: relative; min-height: 380px; border-radius: 12px; overflow: hidden; display: flex; align-items: flex-end; text-decoration: none; isolation: isolate; scroll-margin-top: 110px; }
.svc-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--sx-ease); }
.svc-photo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11,31,42,.95) 0%, rgba(11,31,42,.55) 45%, rgba(11,31,42,.05) 100%); }
.svc-photo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--sx-gold); }
.svc-photo.red::after { background: var(--sx-red); } .svc-photo.slate::after { background: #4F6575; }
.svc-photo:hover > img { transform: scale(1.07); }
.svc-photo-body { padding: 2rem; width: 100%; }
.svc-photo-k { font-family: var(--sx-mono); font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--sx-gold2); }
.svc-photo h3 { color: #fff; text-align: left; font-size: 1.7rem; font-weight: 800; margin: .35rem 0 .9rem; line-height: 1.15; }
.svc-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.svc-chips span { font-size: .74rem; font-weight: 700; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); padding: .35rem .7rem; border-radius: 30px; backdrop-filter: blur(4px); }
.svc-photo-go { display: inline-block; margin-top: 1rem; font-size: .8rem; font-weight: 700; color: var(--sx-gold2); letter-spacing: .06em; transition: transform .25s; }
.svc-photo:hover .svc-photo-go { transform: translateX(5px); color: #fff; }
@media (max-width: 820px) { .svc-photo-grid { grid-template-columns: 1fr; } .svc-photo { min-height: 320px; } .svc-photo h3 { font-size: 1.4rem; } }

/* Launch program splits */
.launch-split { display: grid; grid-template-columns: 1.1fr 1fr; border-radius: 12px; overflow: hidden; background: var(--sx-navy2); border: 1px solid rgba(255,255,255,.08); margin-top: 2.5rem; }
.launch-split.flip { grid-template-columns: 1fr 1.1fr; }
.launch-split.flip .launch-img { order: 2; }
.launch-img { position: relative; min-height: 360px; }
.launch-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.launch-tag { position: absolute; left: 1.25rem; top: 1.25rem; background: var(--sx-gold); color: var(--sx-navy); font-family: var(--sx-mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; padding: .45rem .75rem; border-radius: 3px; }
.launch-tag.red { background: var(--sx-red); color: #fff; }
.launch-body { padding: 2.5rem 2.25rem; }
.launch-body h3 { color: #fff; text-align: left; font-size: 1.6rem; font-weight: 800; margin-bottom: 1.25rem; }
.launch-steps { display: flex; gap: 0; margin-bottom: 1.25rem; counter-reset: ls; }
.launch-steps span { flex: 1; position: relative; text-align: center; font-size: .66rem; font-weight: 700; color: var(--sx-silver-lt); padding-top: 30px; letter-spacing: .02em; }
.launch-steps span::before { counter-increment: ls; content: counter(ls); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--sx-navy); border: 2px solid var(--sx-gold); color: #fff; font-size: .65rem; display: flex; align-items: center; justify-content: center; z-index: 1; }
.launch-steps span::after { content: ''; position: absolute; top: 11px; left: 50%; width: 100%; height: 2px; background: rgba(198,146,20,.45); }
.launch-steps span:last-child::after { display: none; }
@media (max-width: 820px) { .launch-split, .launch-split.flip { grid-template-columns: 1fr; } .launch-split.flip .launch-img { order: 0; } .launch-img { min-height: 220px; } .launch-body { padding: 1.75rem 1.4rem; } }

/* Engagement model cards */
.scale-bar { display: flex; align-items: center; gap: 1rem; max-width: 1000px; margin: 2rem auto 0; font-family: var(--sx-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sx-muted); }
.scale-track { flex: 1; height: 8px; border-radius: 6px; background: linear-gradient(90deg, #B1B3B3, #1E3A4D 40%, #C69214); position: relative; }
.scale-track i { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; border: 3px solid var(--sx-navy); }
.scale-track i:last-child { border-color: var(--sx-gold); }
.models { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.25rem; align-items: stretch; }
.model { position: relative; background: #fff; border: 1px solid var(--sx-border); border-radius: 12px; padding: 1.6rem 1.4rem; display: flex; flex-direction: column; scroll-margin-top: 110px; transition: transform .25s var(--sx-ease), box-shadow .25s; }
.model:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(11,31,42,.12); }
.model.rec { border: 2px solid var(--sx-gold); box-shadow: 0 22px 50px rgba(198,146,20,.22); }
.model-head { display: flex; gap: .85rem; align-items: center; margin-bottom: 1rem; }
.model-ico { width: 48px; height: 48px; border-radius: 12px; background: var(--sx-navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.model.rec .model-ico { background: var(--sx-gold); }
.model-ico svg { width: 24px; height: 24px; stroke: var(--sx-gold2); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.model.rec .model-ico svg { stroke: var(--sx-navy); }
.model-k { font-family: var(--sx-mono); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sx-gold); }
.model-t { font-size: 1.12rem; font-weight: 800; color: var(--sx-navy); line-height: 1.2; }
.model-commit { display: inline-block; align-self: flex-start; font-size: .72rem; font-weight: 700; color: var(--sx-navy); background: var(--sx-oat); border-radius: 30px; padding: .35rem .75rem; margin-bottom: 1rem; }
.model ul { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .5rem; flex: 1; align-content: start; }
.model li { font-size: .82rem; color: var(--sx-navy); display: flex; gap: .5rem; line-height: 1.4; }
.model li::before { content: ''; width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; border-radius: 50%; background: rgba(198,146,20,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C69214' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/9px no-repeat; }
.model .btn { justify-content: center; }
@media (max-width: 1100px) { .models { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .models { grid-template-columns: 1fr; } .scale-bar { display: none; } }

/* ── HOME HERO: Option B (photo collage) ───────────────────────────── */
.o-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: calc(var(--nav-h) + 4.5rem) 0 3.5rem; }
.o-hero h1 { color: #fff; font-family: var(--sans); font-weight: 900; line-height: 1.02; letter-spacing: -.02em; margin: 0 0 1.25rem; text-align: left; }
.o-hero h1 em { font-style: italic; font-weight: 300; color: var(--sx-gold2); }
.o-eyebrow { font-family: var(--sx-mono); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--sx-gold2); margin-bottom: 1.1rem; }
.o-sub { font-size: 1.12rem; line-height: 1.6; color: #E6E8EE; max-width: 560px; margin-bottom: 1.75rem; }
.o-cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 2rem; }
.o-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin-bottom: 1.25rem; }
.o-card { display: block; padding: 1.1rem 1.2rem; border-radius: 10px; text-decoration: none; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-top: 3px solid var(--sx-gold); backdrop-filter: blur(8px); transition: background .2s, transform .2s; }
.o-card:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
.o-card.red { border-top-color: #B7323F; }
.o-card b { display: block; font-size: 1rem; color: #fff; margin-bottom: .3rem; }
.o-card span { font-size: .8rem; color: #D5D8E0; line-height: 1.5; }
.o-offers { display: flex; flex-direction: column; gap: .45rem; font-size: .8rem; color: #C9CDD6; }
.o-offers a { color: #C9CDD6; text-decoration: none; }
.o-offers b { color: #fff; margin-right: .35rem; transition: color .2s; }
.o-offers a:hover b { color: var(--sx-gold2); }
.o-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.o-stats b { display: block; font-size: 2.4rem; font-weight: 900; line-height: 1; }
.o-stats i { font-style: normal; color: var(--sx-gold2); font-size: 1.3rem; vertical-align: super; }
.o-stats span { font-size: .72rem; color: #C9CDD6; letter-spacing: .04em; }
.vb { background: linear-gradient(135deg, #0B1F2A 0%, #152B3A 55%, #3a1219 100%); }
.vb::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--sx-gold), transparent 60%); }
.vb-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; }
.vb h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); }
.collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 210px 210px; gap: 10px; position: relative; }
.collage img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.collage .tall { grid-row: span 2; }
.collage::before { content: ''; position: absolute; inset: -14px -14px auto auto; width: 120px; height: 120px; border-top: 3px solid var(--sx-gold); border-right: 3px solid var(--sx-gold); border-radius: 0 14px 0 0; }
.collage .badge { position: absolute; left: -22px; bottom: 26px; background: var(--sx-gold); color: #0B1F2A; padding: .8rem 1.1rem; border-radius: 10px; font-weight: 900; font-size: 1.3rem; line-height: 1; box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.collage .badge span { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: .25rem; }
.vb .o-stats { margin-top: 2.75rem; border-top: 1px solid rgba(255,255,255,.15); padding-top: 1.5rem; }
@media (max-width: 960px) {
  .vb-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .collage { grid-template-rows: 170px 170px; margin: 0 14px 0 22px; }
}
@media (max-width: 600px) {
  .o-hero { padding-top: calc(var(--nav-h) + 2.5rem); }
  .o-cards { grid-template-columns: 1fr; }
  .o-stats { grid-template-columns: 1fr 1fr; row-gap: 1.25rem; }
  .o-stats b { font-size: 2rem; }
  .collage { grid-template-rows: 130px 130px; }
}
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ── HOME HERO: Option J (one calm photo, centered) ────────────────── */
.vj { text-align: center; padding-bottom: 3.5rem; }
.vj .vj-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.8); animation: sxZoom 26s ease-in-out infinite alternate; }
.vj::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,31,42,.82) 0%, rgba(11,31,42,.72) 50%, rgba(11,31,42,.96) 100%), radial-gradient(ellipse 50% 40% at 50% 0%, rgba(198,146,20,.3), transparent 70%); }
.vj::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--sx-gold), transparent); }
.vj h1 { font-size: clamp(2.9rem, 6.4vw, 5.6rem); text-align: center; }
.vj .o-sub { margin-left: auto; margin-right: auto; }
.vj .o-cta { justify-content: center; }
.vj .o-cards { max-width: 820px; margin: 0 auto 1.25rem; text-align: left; }
.vj .o-offers { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 1.5rem; }
.vj .o-stats { max-width: 900px; margin: 2rem auto 0; border-top: 1px solid rgba(255,255,255,.15); padding-top: 1.75rem; }
@media (max-width: 600px) { .vj h1 { font-size: clamp(2.2rem, 10vw, 2.8rem); } .vj .o-offers { flex-direction: column; gap: .6rem; } }

/* ── NAV SPACING (roomier menu) ───────────────────────────────────── */
.nav-links { gap: 2.4rem; }
.nav-links a { font-size: .8rem; letter-spacing: .03em; }
.nav-links .has-dropdown { margin-right: 4px; }
.nav-links .has-dropdown > a { padding-right: 14px; }
.nav-links .has-dropdown > a::before { right: 0; }
.nav-links .nav-dropdown-menu a { font-size: .78rem; padding: .6rem 1.2rem; }
.nav-cta { padding: .62rem 1.5rem !important; font-size: .78rem !important; margin-left: .4rem; }
@media (max-width: 1240px) and (min-width: 821px) {
  .nav-links { gap: 1.6rem; }
  .nav-links a { font-size: .74rem; }
  .nav-cta { padding: .55rem 1.1rem !important; }
}
@media (max-width: 960px) and (min-width: 821px) {
  .nav-links { gap: 1.15rem; }
  .nav-links a { font-size: .7rem; }
  .logo-img-link img { height: 30px !important; }
}
/* Hero: the two new offer boxes (kicker + arrow, as in the earlier version) */
.o-card.o-new { position: relative; padding-right: 3.4rem; }
.o-kicker { display: block; font-style: normal; font-family: var(--sx-mono); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sx-gold2); margin-bottom: .45rem; }
.o-go { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; color: #fff; transition: background .2s, border-color .2s, transform .2s; }
.o-go svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.o-card.o-new:hover .o-go { background: var(--sx-gold); border-color: var(--sx-gold); color: var(--sx-navy); transform: translateY(-50%) translateX(3px); }