/* ============================================================
   INTEGRUM — component styles (hero, router, sections, lanes)
   LIGHT THEME
   ============================================================ */

/* ============================================================
   V2 STRUCTURE — immersive hero, stat bar, bento, spark spine
   ============================================================ */
.btn-solar { background: var(--solar); color:#1F1604; box-shadow: 0 8px 22px rgba(255,206,3,.34); }
.btn-solar:hover { background:#fff; color:#013049; box-shadow: 0 12px 28px rgba(255,255,255,.28); }

/* ---- full-bleed video hero (turbine bg) ---- */
.hero-l { position:relative; overflow:clip; color:#EAF2F8; background:#01344f; display:flex; align-items:center; padding-block: clamp(46px,6vw,92px); min-height:min(calc(100svh - var(--nav-h)), 940px); }
.hero-l .photo-bg { z-index:0; }
.hero-l-inner { position:relative; z-index:1; width:100%; display:grid; grid-template-columns:1fr .96fr; gap:clamp(28px,4vw,60px); align-items:center; }
@media (max-width:1000px){ .hero-l-inner { grid-template-columns:1fr; gap:36px; } }
.hero-l-copy { max-width:620px; }
.chip-eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; letter-spacing:.02em; color:#EAF2F8; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22); padding:8px 15px; border-radius:999px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.hero-l h1 { font-size:clamp(42px,6vw,80px); line-height:.95; letter-spacing:-.045em; margin-top:22px; color:#fff; text-wrap:balance; }
.hl-underline { position:relative; white-space:nowrap; color:var(--solar); }
.hl-plain { color:var(--solar); }
.hero-l-sub { color:#B9CDDE; font-size:clamp(16px,1.25vw,18.5px); line-height:1.62; margin-top:20px; max-width:520px; }
.hero-l-cta { display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.hero-mw-ticker { display:inline-flex; align-items:center; gap:9px; margin-top:20px; font-size:13.5px; color:#EAF2F8; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:9px 16px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.hero-mw-ticker strong { color:var(--solar); font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; }
.hero-l-stats { display:flex; gap:clamp(18px,2.4vw,40px); margin-top:34px; flex-wrap:nowrap; }
.hxs { min-width:0; }
.hxs-v { font-family:var(--font-display); font-weight:700; font-size:clamp(30px,3.2vw,48px); color:#fff; line-height:1; letter-spacing:-.02em; white-space:nowrap; }
.hxs-v .u { font-size:.46em; color:var(--solar); margin-left:4px; }
.hxs-k { font-size:clamp(11px,1vw,13.5px); color:#B9CDDE; margin-top:8px; text-transform:uppercase; letter-spacing:.1em; font-weight:600; white-space:nowrap; }
.hero-l-media { display:flex; justify-content:flex-end; }
.hero-l-live { width:100%; max-width:none; }
.hero-l-live .counter-card { width:100%; padding:44px 30px 40px; box-shadow:0 40px 90px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.12); }
@media (max-width:1000px){ .hero-l-media { justify-content:stretch; } .hero-l-live { max-width:560px; } }

/* ---- raised stat bar (overlaps hero) ---- */
.statbar-sec { background:var(--canvas); padding-bottom:clamp(22px,3vw,44px); }
.statbar { display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--sh-3); margin-top:-52px; position:relative; z-index:3; overflow:hidden; }
@media (max-width:700px){ .statbar { grid-template-columns:1fr 1fr; } }
.statbar-item { padding:clamp(22px,2.6vw,34px); border-right:1px solid var(--hairline); }
.statbar-item:last-child { border-right:none; }
@media (max-width:700px){ .statbar-item:nth-child(2n){ border-right:none; } .statbar-item:nth-child(-n+2){ border-bottom:1px solid var(--hairline); } }
.sb-n { font-family:var(--font-display); font-weight:600; font-size:clamp(30px,3.4vw,44px); letter-spacing:-.03em; color:var(--logo-blue); line-height:1; }
.sb-n .u { color:var(--solar-deep); font-size:.5em; }
.sb-s { color:var(--ink-2); font-size:13.5px; margin-top:10px; line-height:1.45; }
.trust-marquee { display:flex; align-items:center; gap:clamp(16px,3vw,36px); flex-wrap:wrap; margin-top:clamp(28px,3vw,42px); }
.tm-label { font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--ink-3); white-space:nowrap; }
.tm-row { display:flex; flex-wrap:wrap; gap:12px 26px; flex:1; }
.tm-item { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ink-2); }
.tm-item svg { color:var(--amber); opacity:.7; }

/* ---- bento mosaic (outcomes) ---- */
.bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:212px; gap:16px; margin-top:44px; }
.bento-tile { position:relative; overflow:hidden; border-radius:var(--r-lg); cursor:pointer; box-shadow:var(--sh-1); }
.bento-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.bento-tile:hover img { transform:scale(1.06); }
.bento-ov { position:absolute; inset:0; background:linear-gradient(180deg, rgba(1,44,70,.12) 0%, rgba(1,44,70,.42) 44%, rgba(1,26,43,.92) 100%); }
.bento-body { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; padding:clamp(18px,2vw,26px); color:#fff; }
.bento-chip { align-self:flex-start; font-size:11.5px; font-weight:600; letter-spacing:.02em; background:rgba(255,255,255,.18); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); padding:6px 12px; border-radius:999px; }
.bento-spacer { flex:1; }
.bento-metric { font-family:var(--font-display); font-weight:600; letter-spacing:-.025em; color:var(--solar); line-height:1; font-size:clamp(28px,3vw,42px); }
.bento-metric.esg { color:#7FE6C0; }
.bento-ml { font-size:12.5px; color:#C6D8E7; margin-top:6px; }
.bento-body h3 { color:#fff; font-size:clamp(18px,1.6vw,23px); margin-top:12px; line-height:1.16; letter-spacing:-.01em; text-wrap:balance; }
.bento-link { display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:13.5px; color:#fff; margin-top:14px; opacity:.85; }
.bento-tile:hover .bento-link { opacity:1; }
.bento-link svg { transition:transform .2s; }
.bento-tile:hover .bento-link svg { transform:translateX(4px); }
.bt-0 { grid-column:span 2; grid-row:span 2; }
.bt-1 { grid-column:span 2; }
.bt-2 { grid-column:span 2; }
.bt-3 { grid-column:span 4; }
@media (max-width:820px){ .bento { grid-template-columns:1fr 1fr; grid-auto-rows:200px; } .bt-0 { grid-column:span 2; grid-row:span 2; } .bt-1,.bt-2 { grid-column:span 1; } .bt-3 { grid-column:span 2; } }
@media (max-width:560px){ .bento { grid-template-columns:1fr; } .bt-0,.bt-1,.bt-2,.bt-3 { grid-column:span 1; grid-row:auto; } .bt-0 { min-height:300px; } }

/* ---- what we do ---- */
.wwd-sec { background:var(--surface); }
.wwd-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:clamp(28px,3vw,44px); }
@media (max-width:860px){ .wwd-grid { grid-template-columns:1fr; } }
.wwd-card { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:28px 26px; box-shadow:var(--sh-1); transition:transform .2s, box-shadow .2s, border-color .2s; }
.wwd-card:hover { transform:translateY(-4px); box-shadow:var(--sh-2); border-color:color-mix(in srgb,var(--accent) 34%,var(--hairline)); }
.wwd-ico { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; color:var(--accent-deep); background:var(--amber-soft); }
.wwd-card h3 { font-size:19px; letter-spacing:-.015em; line-height:1.2; margin-top:18px; }
.wwd-card p { font-size:14.5px; color:var(--ink-2); line-height:1.6; margin-top:12px; }
.wwd-grid-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:1040px){ .wwd-grid-4 { grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .wwd-grid-4 { grid-template-columns:1fr; } }
.wwd-foot { display:inline-flex; align-items:center; gap:10px; margin-top:22px; padding:14px 22px; border-radius:999px; background:var(--amber-soft); border:1px solid color-mix(in srgb,var(--accent) 34%,transparent); font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink); }
.wwd-foot svg { color:var(--accent-deep); flex:none; }
.wwd-foot-center { display:flex; width:fit-content; margin-inline:auto; }
.wwd-card.is-link { cursor:pointer; }
.wwd-card.is-link:hover h3 { color:var(--accent-deep); }
.sb-n .u.u-big { font-size:.72em; }

/* ---- calculator disclaimer ---- */
.ss-disclaimer { font-size:12.5px; color:var(--ink-3); line-height:1.5; margin-top:16px; padding-top:14px; border-top:1px solid var(--hairline); }

/* ---- measured outcomes (context / intervention / outcome) ---- */
.proof-sec { background:var(--surface-2); padding-bottom:clamp(14px,1.8vw,26px); }
.proof-list { display:flex; flex-direction:column; gap:18px; margin-top:clamp(28px,3vw,44px); }
.proof-card { display:grid; grid-template-columns:280px 1fr; background:#fff; border:1px solid var(--hairline); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-1); transition:box-shadow .2s, transform .2s; }
.proof-card:hover { box-shadow:var(--sh-2); transform:translateY(-3px); }
@media (max-width:880px){ .proof-card { grid-template-columns:1fr; } }
.proof-media { position:relative; min-height:200px; overflow:hidden; background:var(--surface-2); }
.proof-media img { width:100%; height:100%; object-fit:cover; display:block; }
.proof-sector { position:absolute; top:14px; left:14px; font-size:12px; font-weight:600; color:#fff; background:rgba(6,20,36,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:6px 12px; border-radius:999px; }
.proof-body { padding:clamp(24px,2.6vw,32px); }
.proof-body h3 { font-size:22px; letter-spacing:-.02em; }
.proof-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:20px; border:1px solid var(--hairline); border-radius:var(--r-md); overflow:hidden; }
@media (max-width:760px){ .proof-steps { grid-template-columns:1fr; } }
.proof-step { padding:16px 18px; border-right:1px solid var(--hairline); }
.proof-step:last-child { border-right:none; }
@media (max-width:760px){ .proof-step { border-right:none; border-bottom:1px solid var(--hairline); } .proof-step:last-child { border-bottom:none; } }
.proof-step.is-mid { background:var(--amber-soft); }
.proof-step.is-out { background:var(--green-soft); }
.ps-k { display:block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.proof-step.is-mid .ps-k { color:var(--accent-deep); }
.proof-step.is-out .ps-k { color:#0F7A56; }
.proof-step p { font-size:14px; color:var(--ink-2); line-height:1.55; margin-top:7px; }
.proof-step.is-out p { color:var(--ink); font-weight:600; }
.proof-buckets { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }
@media (max-width:620px){ .proof-buckets { grid-template-columns:1fr; } }
.proof-bucket { background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--r-md); padding:14px 16px; border-top:3px solid var(--solar); }
.pb-k { display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.pb-v { display:block; font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-.015em; color:var(--logo-blue); margin-top:6px; }
.proof-body .link-arrow { margin-top:18px; }
.proof-note { font-size:13px; color:var(--ink-3); margin-top:20px; text-align:center; }

/* ---- why not EPC: shift cards ---- */
.shift-legend { display:flex; align-items:center; gap:12px; margin-top:clamp(22px,2.6vw,32px); font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; }
.shift-legend .sl-a { color:var(--ink-3); }
.shift-legend .sl-arrow { color:var(--solar-deep); display:flex; }
.shift-legend .sl-b { color:var(--logo-blue); }
.shift-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px; }
@media (max-width:940px){ .shift-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .shift-grid { grid-template-columns:1fr; } }
.shift-card { position:relative; display:flex; flex-direction:column; gap:10px; background:#fff; border:1px solid var(--hairline); border-radius:var(--r-lg); padding:24px 22px 22px; box-shadow:var(--sh-1); overflow:hidden; transition:transform .2s, box-shadow .2s, border-color .2s; }
.shift-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--solar); }
.shift-card:hover { transform:translateY(-4px); box-shadow:var(--sh-2); border-color:color-mix(in srgb,var(--solar) 52%,var(--hairline)); }
.shift-num { font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.1em; color:var(--ink-3); }
.shift-from { font-size:13.5px; color:var(--ink-3); text-decoration:line-through; text-decoration-color:color-mix(in srgb,var(--ink-3) 55%,transparent); line-height:1.4; }
.shift-to { font-family:var(--font-display); font-weight:600; font-size:17.5px; letter-spacing:-.015em; line-height:1.28; color:var(--logo-blue); }
.epc-close { margin-top:24px; font-family:var(--font-display); font-weight:600; font-size:clamp(18px,2vw,24px); letter-spacing:-.02em; line-height:1.4; color:var(--ink); max-width:820px; border-left:4px solid var(--solar); padding-left:20px; }

/* ---- careers page ---- */
.culture-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(28px,3vw,40px); }
@media (max-width:820px){ .culture-grid { grid-template-columns:1fr; } }
.culture-card { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-lg); padding:26px 24px; box-shadow:var(--sh-1); height:100%; }
.culture-n { font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--solar-deep); }
.culture-card h4 { font-size:18px; letter-spacing:-.015em; margin-top:10px; }
.culture-card p { font-size:14.5px; color:var(--ink-2); line-height:1.6; margin-top:10px; }
.awards-row { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:clamp(28px,3vw,40px); padding:20px 24px; background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--r-lg); }
.awards-k { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.awards-badges { display:flex; flex-wrap:wrap; gap:10px; }
.role-filters { display:flex; flex-wrap:wrap; gap:9px; margin-top:clamp(24px,3vw,36px); }
.role-filter { font-size:13.5px; font-weight:600; color:var(--ink-2); background:#fff; border:1px solid var(--hairline-2); border-radius:999px; padding:8px 16px; transition:.16s; }
.role-filter:hover { border-color:var(--accent); color:var(--accent-deep); }
.role-filter.is-active { background:var(--accent); border-color:var(--accent); color:#fff; }
.role-list { display:flex; flex-direction:column; gap:14px; margin-top:22px; }
.role-card { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background:#fff; border:1px solid var(--hairline); border-radius:var(--r-lg); padding:24px 26px; box-shadow:var(--sh-1); transition:transform .18s, box-shadow .18s, border-color .18s; }
.role-card:hover { transform:translateY(-3px); box-shadow:var(--sh-2); border-color:color-mix(in srgb,var(--accent) 34%,var(--hairline)); }
.role-main { flex:1 1 340px; }
.role-card h4 { font-size:19px; letter-spacing:-.015em; }
.role-card p { font-size:14.5px; color:var(--ink-2); line-height:1.55; margin-top:7px; max-width:620px; }
.role-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.role-tag { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--hairline); border-radius:999px; padding:6px 12px; }

/* ---- Solutions: impact numbers + SPARK ribbon ---- */
.impact-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:clamp(28px,3vw,44px); }
@media (max-width:820px){ .impact-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .impact-grid { grid-template-columns:1fr; } }
.impact-card { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-lg); padding:24px 22px; box-shadow:var(--sh-1); border-top:3px solid var(--solar); transition:transform .2s, box-shadow .2s; }
.impact-card:hover { transform:translateY(-4px); box-shadow:var(--sh-2); }
.impact-n { font-family:var(--font-display); font-weight:700; font-size:clamp(34px,3.6vw,46px); letter-spacing:-.03em; color:var(--logo-blue); line-height:1; }
.impact-n .u { font-size:.42em; color:var(--solar-deep); margin-left:2px; font-weight:600; }
.impact-k { font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink); margin-top:12px; }
.impact-s { font-size:13.5px; color:var(--ink-2); line-height:1.5; margin-top:6px; }
.cni-spark-ribbon { margin-top:22px; background:linear-gradient(158deg,#014976,#012c46); color:#EAF2F8; border-radius:var(--r-xl); padding:clamp(28px,3.4vw,44px); position:relative; overflow:hidden; box-shadow:var(--sh-3); }
.cni-spark-ribbon::before { content:""; position:absolute; inset:0; background:radial-gradient(56% 80% at 92% 0%, rgba(245,184,28,.16), transparent 58%); pointer-events:none; }
.cni-spark-ribbon > * { position:relative; z-index:1; }
.csr-head .eyebrow { color:#F5B81C; }
.csr-head .eyebrow::before { background:#F5B81C; }
.csr-head h3 { color:#fff; font-size:clamp(22px,2.4vw,30px); letter-spacing:-.02em; margin-top:12px; max-width:640px; text-wrap:balance; }
.csr-head .muted { color:#A9C4DC; margin-top:10px; max-width:560px; font-size:15px; }
.csr-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:26px 0; }
@media (max-width:760px){ .csr-steps { grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .csr-steps { grid-template-columns:1fr; } }
.csr-step { display:flex; align-items:center; gap:12px; text-align:left; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:14px 15px; cursor:pointer; transition:.18s; }
.csr-step:hover { background:rgba(255,255,255,.12); border-color:rgba(245,184,28,.55); transform:translateY(-3px); }
.csr-l { width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:19px; color:#1F1604; background:var(--solar); }
.csr-t { font-family:var(--font-display); font-weight:600; font-size:14.5px; color:#EAF2F8; line-height:1.15; }

/* ---- SPARK compact stepper (homepage) ---- */
.spark-sec { background:var(--surface-2); }
.spark-head .spark-word { color:var(--logo-blue); letter-spacing:.02em; }
.spark-stepper { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:clamp(28px,3vw,44px); }
@media (max-width:900px){ .spark-stepper { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .spark-stepper { grid-template-columns:1fr; } }
.spark-node { text-align:left; background:#fff; border:1px solid var(--hairline); border-radius:var(--r-lg); padding:22px 20px; box-shadow:var(--sh-1); display:flex; flex-direction:column; gap:10px; cursor:pointer; position:relative; overflow:hidden; transition:transform .2s, box-shadow .2s, border-color .2s; }
.spark-node::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--sc); transform:scaleX(0); transform-origin:left; transition:transform .28s ease; }
.spark-node:hover { transform:translateY(-5px); box-shadow:var(--sh-2); border-color:color-mix(in srgb,var(--sc) 55%,var(--hairline)); }
.spark-node:hover::before { transform:scaleX(1); }
.spark-node-badge { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:22px; color:#fff; background:var(--sc); box-shadow:0 6px 16px color-mix(in srgb,var(--sc) 40%,transparent); }
.spark-node-title { font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:-.015em; color:var(--ink); }
.spark-node-one { font-size:13.5px; color:var(--ink-2); line-height:1.45; }
.spark-node-dur { font-size:12px; color:var(--ink-3); }
.spark-node-go { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--sc); margin-top:auto; padding-top:6px; }
.spark-node-go svg { transition:transform .2s; }
.spark-node:hover .spark-node-go svg { transform:translateX(4px); }
.spark-cta-row { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:26px; padding:18px 22px; background:var(--amber-soft); border:1px solid color-mix(in srgb,var(--accent) 34%,transparent); border-radius:var(--r-md); }
.spark-cta-note { font-size:14.5px; color:var(--ink-2); }
.spark-cta-note strong { color:var(--logo-blue); font-weight:700; }

/* ---- energy marquee strip ---- */
.marquee { background:#012c46; color:#fff; overflow:hidden; padding:16px 0; border-block:1px solid rgba(255,255,255,.08); }
.marquee-track { display:inline-flex; align-items:center; white-space:nowrap; animation:marqueeMove 34s linear infinite; }
.marquee-item { display:inline-flex; align-items:center; gap:22px; font-family:var(--font-display); font-weight:600; font-size:clamp(18px,2vw,26px); letter-spacing:-.01em; color:#EAF2F8; padding-right:22px; }
.marquee-dot { color:var(--solar); font-size:.6em; }
@keyframes marqueeMove { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media (prefers-reduced-motion:reduce){ .marquee-track { animation:none; } }

/* ---- savings studio (chart + calculator, no overlap) ---- */
.ss { background:linear-gradient(180deg,var(--canvas),var(--surface)); }
.ss-grid { display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(20px,2.6vw,32px); margin-top:clamp(28px,3.4vw,44px); align-items:start; }
@media (max-width:960px){ .ss-grid { grid-template-columns:1fr; } }
.ss-viz { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-lg); padding:clamp(20px,2.4vw,28px); box-shadow:var(--sh-1); }
.ss-viz-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.chart-legend { display:flex; gap:20px; flex-wrap:wrap; }
.leg { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); font-weight:500; }
.leg .sw { width:20px; height:3px; border-radius:2px; }
.ss-badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#146B49; background:var(--green-soft); border:1px solid color-mix(in srgb,var(--green) 34%,transparent); padding:5px 11px; border-radius:999px; }
.ss-pills { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:18px; }
@media (max-width:520px){ .ss-pills { grid-template-columns:1fr 1fr; } }
.ss-pill { display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--hairline); border-radius:12px; padding:12px 13px; }
.ss-pill-ic { flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:#fff; box-shadow:var(--sh-1); }
.ss-pill-v { font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-.01em; color:var(--ink); line-height:1; }
.ss-pill-k { font-size:11px; color:var(--ink-3); margin-top:4px; }
.ss-case { display:flex; align-items:center; gap:14px; width:100%; text-align:left; margin-top:16px; padding:12px; background:var(--surface-2); border:1px solid var(--hairline); border-radius:14px; cursor:pointer; transition:.18s; }
.ss-case:hover { border-color:var(--accent); box-shadow:var(--sh-2); transform:translateY(-2px); }
.ss-case img { width:88px; height:66px; object-fit:cover; border-radius:9px; flex:none; }
.ss-case-body { flex:1; min-width:0; }
.ss-case-tag { font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); }
.ss-case-metric { font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--logo-blue); letter-spacing:-.02em; margin-top:2px; }
.ss-case-h { font-size:13px; color:var(--ink-2); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ss-case-arrow { color:var(--accent-deep); flex:none; }
/* panel = the blue calculator card */
.ss-panel { margin:0; position:relative; }
.ss-err { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:13.5px; font-weight:500; color:#C23A26; }
.ss-result { margin-top:22px; border-top:1px solid #B6D3EC; padding-top:20px; position:relative; }
.ss-result-k { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); }
.ss-result-big { font-family:var(--font-display); font-weight:700; font-size:clamp(30px,3.4vw,42px); color:var(--accent-deep); letter-spacing:-.02em; line-height:1; margin-top:6px; }
.ss-narrative { font-size:14.5px; line-height:1.62; color:var(--ink-2); margin-top:14px; }
.ss-narrative strong { color:var(--ink); font-weight:700; }
.ss-result-link { color:var(--accent-deep) !important; margin-top:16px; }
.ss-result-link:hover { color:var(--amber) !important; }

/* ---- why: vs split ---- */
.why-sec { background:var(--surface-2); }
.why-split { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(18px,2.5vw,30px); margin-top:44px; align-items:stretch; }
@media (max-width:900px){ .why-split { grid-template-columns:1fr; } }
.why-feature { background:linear-gradient(158deg,#014976,#012c46); color:#EAF2F8; border-radius:var(--r-xl); padding:clamp(28px,3vw,42px); position:relative; overflow:hidden; box-shadow:var(--sh-3); }
.why-feature::before { content:\"\"; position:absolute; inset:0; background:radial-gradient(60% 70% at 100% 0, rgba(255,206,3,.18), transparent 58%); pointer-events:none; }
.why-tag { position:relative; display:inline-block; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#012c46; background:var(--solar); padding:6px 12px; border-radius:999px; }
.why-feature h3 { position:relative; color:#fff; font-size:clamp(24px,2.6vw,32px); letter-spacing:-.02em; margin-top:16px; }
.why-feature ul { position:relative; list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:14px; }
.why-feature li { display:flex; gap:12px; font-size:15.5px; color:#DCE9F3; line-height:1.45; }
.why-feature li svg { flex:none; margin-top:2px; color:var(--solar); }
.why-alts { display:flex; flex-direction:column; gap:clamp(18px,2.5vw,30px); }
.why-alt { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-lg); padding:24px 26px; flex:1; box-shadow:var(--sh-1); }
.why-alt-tag { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.why-alt h4 { font-size:19px; letter-spacing:-.01em; margin-top:6px; }
.why-alt ul { list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:11px; }
.why-alt li { display:flex; gap:10px; font-size:14.5px; color:var(--ink-2); line-height:1.45; }
.why-alt li svg { flex:none; margin-top:3px; color:#C23A26; }

/* ===== photo backgrounds ===== */
.photo-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.photo-bg-img { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; }
.photo-bg-ov { position: absolute; inset: 0; }
.video-bg-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; }
.has-photo { position: relative; }
.has-photo > .shell, .has-photo > .ask-inner { position: relative; z-index: 1; }
.photo-frame { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--surface-2); }
.photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-credit { position: absolute; right: 8px; bottom: 6px; z-index: 2; font-size: 10px; color: rgba(255,255,255,.55); letter-spacing: .02em; }

/* ===== legacy simple hero (unused by home, kept for safety) ===== */
.hero { padding-top: clamp(22px, 3vw, 40px); padding-bottom: clamp(18px, 2.4vw, 30px); position: relative; overflow: clip; }
.hero > .shell { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(33px, 4.4vw, 54px); letter-spacing: -.034em; line-height: 1.0; margin: 14px 0 0; text-wrap: balance; }
.hero h1 .accent-word { color: var(--accent-deep); }
.hero-sub { font-size: clamp(15px, 1.2vw, 16.5px); color: var(--ink-2); max-width: 520px; margin-top: 14px; line-height: 1.55; }

/* ============================================================
   CINEMATIC HERO — bright daytime video + LIGHT overlay
   ============================================================ */
.hero-cine {
  position: relative; overflow: clip; color: var(--ink);
  padding-top: clamp(34px, 4.4vw, 68px);
  padding-bottom: clamp(40px, 5vw, 76px);
  min-height: min(calc(100svh - var(--nav-h)), 940px);
  display: flex; align-items: center;
  background: var(--canvas);
}
.hero-cine .photo-bg { z-index: 0; }
.hero-cine-inner { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; gap: clamp(26px, 3vw, 40px); }
.hero-cine-top { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 1000px){ .hero-cine-top { grid-template-columns: 1fr; } }

.hero-cine-copy { max-width: 640px; }
.hero-cine .eyebrow-light { color: var(--accent-deep); }
.hero-cine .eyebrow-light::before { background: var(--solar); }
.hero-cine h1 {
  color: var(--ink); font-size: clamp(36px, 5vw, 62px); line-height: 1.0;
  letter-spacing: -.035em; margin-top: 18px; text-wrap: balance;
}
.hero-cine h1 .accent-word { color: var(--accent-deep); position: relative; }
.hero-cine h1 .accent-word::after { content:""; position:absolute; left:-.04em; right:-.04em; bottom:.06em; height:.34em; background: var(--solar); opacity:.85; border-radius:3px; z-index:-1; transform: rotate(-.4deg); }
.hero-sub.on-dark { color: var(--ink-2); max-width: 540px; margin-top: 18px; font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.6; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 26px; }

.hero-cine-stats { display: flex; gap: clamp(22px, 3vw, 44px); margin-top: 28px; flex-wrap: wrap; }
.hcstat .hcv { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; font-size: clamp(26px, 2.6vw, 34px); color: var(--logo-blue); line-height: 1; }
.hcstat .hcv .u { font-size: .5em; color: var(--solar-deep); margin-left: 3px; font-weight: 600; }
.hcstat .hck { font-size: 12.5px; color: var(--ink-3); margin-top: 7px; max-width: 150px; line-height: 1.35; }

.hero-cine-aside { display: flex; }
.hero-cine-aside .counter-card { width: 100%; box-shadow: 0 30px 70px rgba(11,32,56,.28); border: 1px solid rgba(255,255,255,.09); }

.hero-scroll-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ink-3);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; pointer-events: none;
  animation: hintBob 2.2s ease-in-out infinite; }
@keyframes hintBob { 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%,6px);} }
@media (max-width: 1000px){ .hero-scroll-hint { display: none; } }
@media (prefers-reduced-motion: reduce){ .hero-scroll-hint { animation: none; } }

/* ===== PERSONA ROUTER BAND (own light band under hero) ===== */
.router-band { padding-block: clamp(30px, 3.4vw, 46px); background: var(--surface-2); border-block: 1px solid var(--hairline); position: relative; scroll-margin-top: 80px; }
.router-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.router-head .hrh-eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#7A5A02; background: var(--solar-soft); border:1px solid color-mix(in srgb, var(--solar) 40%, transparent); padding:6px 12px; border-radius:999px; }
.router-head .rh-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.3vw, 30px); letter-spacing: -.02em; }
.router-head .rh-note { font-size: 13.5px; color: var(--ink-3); margin-left: auto; }
@media (max-width: 660px){ .router-head .rh-note { margin-left: 0; width: 100%; } }
.prouter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px){ .prouter-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .prouter-grid { grid-template-columns: 1fr; } }

.prouter {
  position: relative; text-align: left; background: var(--surface);
  border: 1px solid var(--hairline-2); border-radius: var(--r-md);
  padding: 22px 20px 18px; display: flex; flex-direction: column; gap: 14px; overflow: hidden;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .2s;
  min-height: 178px;
}
.prouter::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background: var(--p-color); transform: scaleX(0); transform-origin: left; transition: transform .28s ease; }
.prouter:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--p-color) 55%, var(--hairline-2)); }
.prouter:hover::before, .prouter.is-active::before { transform: scaleX(1); }
.prouter.is-active { border-color: var(--p-color); box-shadow: var(--sh-2); }
.prouter-top { display:flex; align-items:flex-start; justify-content: space-between; }
.prouter-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--p-color); background: color-mix(in srgb, var(--p-color) 12%, transparent); transition: .22s; }
.prouter:hover .prouter-ico { background: var(--p-color); color: #fff; }
.prouter.primary { background: linear-gradient(165deg, var(--amber-soft), var(--surface) 62%); }
.prouter h3 { font-size: 20px; letter-spacing: -.02em; line-height: 1.08; }
.prouter .p-tag { font-size: 13px; color: var(--ink-3); margin-top: 5px; }
.prouter .p-foot { margin-top: auto; display:inline-flex; align-items:center; gap:7px; font-size: 13px; font-weight: 600; color: var(--p-color); }
.prouter .p-foot svg { transition: transform .2s; }
.prouter:hover .p-foot svg { transform: translateX(4px); }
.prouter .p-badge { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #4A3702; background: var(--solar); border-radius: 6px; padding: 4px 9px; align-self: flex-start; white-space: nowrap; }
/* hover popover — replaces the old two-click select/continue flow */
.prouter { overflow: visible; }
.prouter-pop { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 10px); z-index: 20; display: flex; flex-direction: column; gap: 7px; text-align: left; padding: 14px 16px; border-radius: 14px; background: linear-gradient(158deg, var(--p-color), color-mix(in srgb, var(--p-color) 76%, #000)); color: #fff; box-shadow: 0 18px 44px rgba(11,32,56,.34); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; pointer-events: none; }
.prouter-pop::after { content: ""; position: absolute; left: 26px; top: 100%; border: 7px solid transparent; border-top-color: color-mix(in srgb, var(--p-color) 76%, #000); }
.prouter:hover .prouter-pop, .prouter:focus-visible .prouter-pop { opacity: 1; visibility: visible; transform: translateY(0); }
.prouter-pop .pp-line { font-size: 13.5px; line-height: 1.5; font-weight: 500; }
.prouter-pop .pp-next { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #fff; opacity: .82; }
@media (hover: none){ .prouter-pop { display: none; } }

/* promise strip under the band */
.router-promise { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:16px; padding:16px 20px; border-radius: var(--r-md); background: var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.router-promise .rp-line { font-weight: 600; color: var(--ink); font-size: 15.5px; line-height: 1.4; }
.router-promise .rp-next { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; }

/* ===== live counter card (KEPT DARK — the live platform tab) ===== */
.counter-card {
  background: var(--navy); color: #EAF1F8; border-radius: var(--r-xl); padding: 24px 26px 20px;
  position: relative; overflow: hidden; box-shadow: var(--sh-3);
}
.counter-card > *:not(.photo-bg) { position: relative; z-index: 1; }
.counter-card::before { content:""; position:absolute; inset:0; z-index:0; background:
  radial-gradient(120% 80% at 100% 0%, rgba(0,91,150,.34), transparent 55%),
  radial-gradient(90% 70% at 0% 100%, rgba(29,158,117,.14), transparent 55%); pointer-events:none; }
.cc-head { display:flex; justify-content: space-between; align-items:center; }
.cc-live { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#9FE1CB; }
.cc-big { font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.cc-n1 { font-size: clamp(40px, 5.4vw, 54px); }
.cc-n2 { font-size: clamp(26px, 3.2vw, 34px); }
.cc-unit { font-size: .42em; color: #9FB7CF; font-weight: 500; margin-left: 6px; letter-spacing: 0; }
.cc-label { color: #8FA8C0; font-size: 13.5px; margin-top: 4px; max-width: 280px; }
.cc-divider { height: 1px; background: rgba(255,255,255,.12); margin: 18px 0; }
.cc-sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.cc-src-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.cc-src-k { font-size: 12px; color: #8FA8C0; font-weight: 500; }
.cc-src-v { font-size: 13.5px; color: #EAF1F8; font-weight: 600; font-family: var(--font-display); }
.cc-src-bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,.12); margin-top: 7px; overflow: hidden; }
.cc-src-bar > div { height: 100%; border-radius: 999px; transition: width .6s ease; }
.cc-co2row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cc-co2row .spark-svg { width: 150px; flex: none; margin-top: 0; }
.cc-foot { display:flex; align-items:center; justify-content: space-between; gap:8px; color:#8AA0B8; font-size: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.10); }
.cc-foot > span:first-child { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.cc-foot-link { display:inline-flex; align-items:center; gap:6px; color:#7FC4F0; font-weight:600; cursor:pointer; transition:.15s; white-space:nowrap; }
.cc-foot-link:hover { color:#fff; }
.cc-foot-link svg { transition: transform .2s; }
.cc-foot-link:hover svg { transform: translateX(3px); }
.spark-svg { width: 100%; height: 50px; display:block; margin-top: 10px; }

/* ===== PROOF BAND — deep-blue ribbon ===== */
.band-proof { background: linear-gradient(155deg, #014976 0%, #013049 100%); color:#EAF2F8; border:none; padding-block: clamp(48px,5.5vw,80px); position:relative; overflow:hidden; }
.band-proof::before { content:""; position:absolute; inset:0; background: radial-gradient(60% 80% at 92% 6%, rgba(255,206,3,.16), transparent 58%), radial-gradient(50% 70% at 4% 100%, rgba(95,180,235,.16), transparent 60%); pointer-events:none; }
.band-proof > .shell { position:relative; z-index:1; }
.band-proof .eyebrow { color:#BFD8EC; }
.proof-shell { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px,4vw,64px); align-items: center; }
@media (max-width: 900px){ .proof-shell { grid-template-columns: 1fr; gap: 28px; } }
.proof-lead h2 { font-size: clamp(26px,3vw,38px); letter-spacing:-.03em; margin-top:14px; line-height:1.08; color:#fff; }
.band-proof .proof-lead .muted { color:#A9C4DC; }
.proof-stats { display: grid; grid-template-columns: repeat(4,1fr); }
@media (max-width: 560px){ .proof-stats { grid-template-columns: 1fr 1fr; gap: 26px 0; } }
.proof-stat { padding: 2px 22px; border-left: 1px solid rgba(255,255,255,.18); }
.proof-stat:first-child { border-left: none; padding-left: 0; }
@media (max-width: 560px){ .proof-stat { border-left: none; padding-left: 0; } }
.proof-n { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px,4vw,50px); letter-spacing:-.03em; color: #fff; line-height:1; }
.proof-n .u { color: var(--solar); font-size:.5em; }
.proof-sub { color: #A9C4DC; font-size:13.5px; margin-top:10px; line-height:1.45; }
.proof-logos { display:flex; align-items:center; gap: clamp(16px,3vw,40px); margin-top: clamp(30px,4vw,52px); padding-top: clamp(24px,3vw,36px); border-top: 1px solid rgba(255,255,255,.16); flex-wrap:wrap; }
.proof-logos-label { font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color: #8FB0CC; white-space:nowrap; }
.logo-row { display:flex; flex-wrap:wrap; gap: 12px 28px; align-items:center; flex:1; }
.logo-name { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color: #D6E4F0; }
.logo-name svg { color: var(--solar); opacity:.9; }

/* ===== SECTION HEADERS ===== */
.sec-head { max-width: 720px; }
.sec-head .eyebrow { margin-bottom: 4px; }
.sec-head h2 { font-size: clamp(30px, 3.9vw, 48px); letter-spacing: -.035em; margin-top: 18px; line-height: 1.03; }
.sec-head .lead { font-size: 18px; color: var(--ink-2); margin-top: 18px; line-height: 1.62; max-width: 620px; }
.amber-num { color: var(--accent-deep); }

/* ===== COST CURVE + CALCULATOR ===== */
.cost-wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); align-items: stretch; margin-top: clamp(28px, 3vw, 40px); }
@media (max-width: 940px){ .cost-wrap { grid-template-columns: 1fr; } }
.chart-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-1); }
.chart-legend { display:flex; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.leg { display:inline-flex; align-items:center; gap:8px; font-size: 13.5px; color: var(--ink-2); font-weight: 500; }
.leg .sw { width: 20px; height: 3px; border-radius: 2px; }

/* calculator — DEEP BLUE card, yellow CTA + result highlight */
.calc { background: linear-gradient(158deg, #EEF6FD 0%, #CFE4F8 100%); border: 1px solid #BFDCF3; color: var(--ink); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--sh-2); position: relative; overflow: hidden; }
.calc::before { content:""; position:absolute; inset:0; background: radial-gradient(100% 80% at 100% 0, rgba(255,255,255,.7), transparent 55%); pointer-events:none; }
.calc h3 { color: var(--ink); font-size: 24px; position: relative; letter-spacing:-.02em; }
.calc-sub { color: var(--ink-2); font-size: 14.5px; margin-top: 8px; position: relative; }
.calc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; position: relative; }
.field label { display:block; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 7px; }
.field input, .field select {
  width: 100%; padding: 13px 14px; border-radius: 11px; border: 1px solid #B6D3EC;
  background: rgba(255,255,255,.75); color: var(--ink); font-family: var(--font-sans); font-size: 15px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder { color: var(--ink-3); }
.field select option { color: #0B2036; }
.field input:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(1,73,118,.16); }
.calc .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 34%, transparent); }
.calc .btn-primary:hover { background: var(--solar); color: #1F1604; }
.calc-result { margin-top: 22px; border-top: 1px solid rgba(255,255,255,.16); padding-top: 22px; position: relative; }
.calc-result .k { color: #9FB7CF !important; }
.calc-result .big { font-family: var(--font-display); font-weight: 600; font-size: 38px; color: var(--solar); letter-spacing: -.02em; line-height: 1; }
.result-row { display:flex; gap: 28px; flex-wrap: wrap; margin-top: 14px; }
.result-stat .k { font-size: 12px; color: #9FB7CF; text-transform: uppercase; letter-spacing: .06em; }
.result-stat .v { font-family: var(--font-display); font-size: 22px; color: #fff; margin-top: 3px; }
.calc .link-arrow { color: var(--solar); }
.calc .link-arrow:hover { color: #fff; }
.slidein { animation: slideIn .5s cubic-bezier(.2,.7,.2,1); }
@keyframes slideIn { from { transform: translateY(14px); } to { transform:none; } }

/* ===== SPARK TIMELINE ===== */
.spark-sec { background: var(--surface-2); }
/* ===== OUTCOMES ===== */
.outcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 48px; }
@media (max-width: 760px){ .outcome-grid { grid-template-columns: 1fr; } }
.outcome {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); transition: transform .2s, box-shadow .2s; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.outcome:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.outcome:hover .outcome-photo img { transform: scale(1.05); }
.outcome-photo { position: relative; height: 168px; overflow: hidden; background: var(--surface-2); }
.outcome-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.outcome-chip { position: absolute; top: 13px; left: 13px; background: rgba(11,32,56,.72); backdrop-filter: blur(6px); color: #EAF1F8; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 6px 12px; border-radius: 999px; }
.outcome-body { padding: 22px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.o-metric { font-family: var(--font-display); font-weight: 600; font-size: 34px; letter-spacing: -.025em; line-height: 1; color: var(--logo-blue); }
.o-metric.esg { color: var(--green); }
.o-metric-label { font-size: 13.5px; color: var(--ink-3); margin-top: 7px; }
.outcome h3 { font-size: 21px; letter-spacing: -.02em; margin-top: 16px; line-height: 1.18; }
.outcome .o-foot { margin-top: auto; padding-top: 20px; }

/* editorial outcomes: featured + open row */
.outcome-featured { display:grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px,3.5vw,52px); align-items:stretch; margin-top:44px; cursor:pointer; }
@media (max-width: 820px){ .outcome-featured { grid-template-columns: 1fr; } }
.of-photo { position:relative; border-radius: var(--r-lg); overflow:hidden; min-height: 340px; background: var(--surface-2); box-shadow: var(--sh-1); }
.of-photo img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.outcome-featured:hover .of-photo img { transform: scale(1.05); }
.of-body { display:flex; flex-direction:column; justify-content:center; padding: 4px; }
.of-body .o-metric { line-height:.95; }
.outcome-row { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2.4vw,30px); margin-top: clamp(28px,3vw,44px); }
@media (max-width: 820px){ .outcome-row { grid-template-columns:1fr; } }
.outcome-open { background:none; border:none; box-shadow:none; transition: transform .2s; }
.outcome-open .outcome-photo { border-radius: var(--r-md); height: 190px; }
.outcome-open .outcome-body { padding: 18px 2px 0; }
.outcome-open:hover { transform: translateY(-5px); box-shadow:none; }

/* ===== COMPARISON ===== */
.compare-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 16px; margin-top: 48px; }
@media (max-width: 820px){ .compare-grid { grid-template-columns: 1fr; } }
.cmp { border-radius: var(--r-lg); padding: 28px; border: 1px solid var(--hairline); background: var(--surface); }
.cmp.featured { background: linear-gradient(165deg, var(--accent), var(--accent-deep)); color: #EAF1F8; border-color: var(--accent-deep); box-shadow: var(--sh-2); }
.cmp h4 { font-size: 19px; }
.cmp.featured h4 { color: #fff; }
.cmp .cmp-tag { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cmp.featured .cmp-tag { color: var(--solar); }
.cmp ul { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 14px; }
.cmp li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.cmp.featured li { color: #DCE7F2; }
.cmp li svg { flex: none; margin-top: 2px; }

/* trust badges row */
.trust-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; align-items: center; }
.trust-badge { display:inline-flex; align-items:center; gap:9px; font-size: 13px; font-weight: 600; color: var(--ink-2); border: 1px solid var(--hairline-2); border-radius: 10px; padding: 11px 15px; background: var(--surface); }
.trust-badge .ti { color: var(--accent-deep); }

/* ===== ONE ASK (CTA strip) — bright video + brand-blue overlay ===== */
.ask { background: var(--accent-deep); color: #EAF1F8; border-radius: 0; position: relative; overflow: hidden; }
.ask-inner { padding-block: clamp(56px, 7vw, 96px); position: relative; }
.ask h2 { color: #fff; font-size: clamp(30px, 4vw, 48px); max-width: 700px; letter-spacing: -.03em; }
.ask .eyebrow { color: #BFD8EC; }
.ask .eyebrow::before { background: var(--solar); }
.ask-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.ask-contact { display: flex; gap: 36px; flex-wrap: wrap; margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.16); }
.ask-contact .k { font-size: 12px; color: #A9C4DC; text-transform: uppercase; letter-spacing: .08em; }
.ask-contact .v { color: #EAF1F8; font-size: 16px; margin-top: 5px; font-weight: 500; }

/* ===== generic page header ===== */
.page-hero { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(36px, 4vw, 56px); }
.breadcrumb { display:flex; align-items:center; gap:9px; font-size: 13.5px; color: var(--ink-3); }
.breadcrumb a:hover { color: var(--accent-deep); }
.lane-accent { --accent: var(--p-color); --accent-deep: color-mix(in srgb, var(--p-color) 78%, #000); --accent-soft: color-mix(in srgb, var(--p-color) 14%, #fff); }

/* ============================================================
   Platform page
   ============================================================ */
.plat-hero { position:relative; overflow:hidden; background:linear-gradient(150deg,#01344f,#012234); color:#EAF2F8; padding-block:clamp(40px,5vw,72px) clamp(46px,5.6vw,80px); }
.plat-hero-glow { position:absolute; inset:0; pointer-events:none; background:radial-gradient(48% 70% at 90% 0%, rgba(245,184,28,.16), transparent 58%), radial-gradient(42% 60% at 2% 100%, rgba(18,165,148,.18), transparent 60%); }
.plat-hero > .shell { position:relative; z-index:1; }
.plat-hero h1 { color:#fff; font-size:clamp(34px,4.8vw,62px); letter-spacing:-.04em; line-height:1.02; margin-top:14px; text-wrap:balance; max-width:900px; }
.plat-hero-sub { color:#B9CDDE; font-size:clamp(16px,1.3vw,18.5px); line-height:1.62; margin-top:20px; max-width:760px; }
.plat-stack { display:flex; flex-direction:column; align-items:stretch; gap:10px; }
.plat-band { display:flex; flex-direction:column; gap:6px; padding:20px 26px; border-radius:var(--r-lg); text-align:center; }
.plat-need { background:var(--amber-soft); border:1px solid color-mix(in srgb,var(--accent) 32%,transparent); }
.plat-out { background:var(--green-soft); border:1px solid color-mix(in srgb,var(--green) 32%,transparent); }
.pb-k { font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.pb-v { font-family:var(--font-display); font-weight:600; font-size:clamp(16px,1.7vw,21px); letter-spacing:-.015em; color:var(--ink); }
.plat-arrow { text-align:center; font-size:22px; color:var(--ink-3); line-height:1; }
.plat-core { background:linear-gradient(158deg,#01344f,#012234); border-radius:var(--r-xl); padding:clamp(22px,2.6vw,32px); box-shadow:var(--sh-3); }
.plat-core-k { display:block; text-align:center; font-family:var(--font-display); font-weight:700; font-size:clamp(18px,2vw,24px); color:#fff; letter-spacing:-.02em; }
.plat-layers { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-top:22px; }
@media (max-width:1000px){ .plat-layers { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .plat-layers { grid-template-columns:1fr; } }
.plat-layer { display:flex; flex-direction:column; gap:8px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:16px 15px; }
.pl-ico { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:#012c46; background:var(--solar); }
.pl-k { font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.06em; color:#fff; }
.pl-d { font-size:12.5px; color:#9FC1DC; line-height:1.45; }
.plat-note { font-size:16px; color:var(--ink-2); line-height:1.65; margin-top:24px; max-width:900px; }
.journey-row { display:flex; align-items:stretch; gap:14px; margin-top:clamp(26px,3vw,40px); }
@media (max-width:900px){ .journey-row { flex-direction:column; } .journey-arrow { transform:rotate(90deg); align-self:center; } }
.journey-col { flex:1 1 0; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-1); }
.journey-col.is-design { border-top:3px solid var(--solar); }
.journey-col.is-out { background:var(--green-soft); border-color:color-mix(in srgb,var(--green) 30%,transparent); }
.jc-k { display:block; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.journey-col.is-out .jc-k { color:#0F7A56; }
.journey-col ul { list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:9px; }
.journey-col li { font-size:14.5px; color:var(--ink-2); line-height:1.45; padding-left:14px; position:relative; }
.journey-col li::before { content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--solar); }
.journey-col.is-out li { color:var(--ink); font-weight:600; }
.journey-arrow { display:flex; align-items:center; color:var(--ink-3); }
.conn-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-top:clamp(26px,3vw,40px); }
@media (max-width:1000px){ .conn-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .conn-grid { grid-template-columns:1fr; } }
.conn-card { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:22px 20px; box-shadow:var(--sh-1); }
.conn-n { font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--solar-deep); }
.conn-card h4 { font-size:16.5px; letter-spacing:-.015em; line-height:1.2; margin-top:10px; }
.conn-card p { font-size:13.5px; color:var(--ink-2); line-height:1.5; margin-top:8px; }
.conn-close { margin-top:24px; font-family:var(--font-display); font-weight:600; font-size:clamp(18px,2vw,24px); letter-spacing:-.02em; line-height:1.4; color:var(--ink); border-left:4px solid var(--solar); padding-left:20px; max-width:820px; }
.agnostic-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.agn-chip { font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); background:var(--surface); border:1px solid var(--hairline-2); border-radius:999px; padding:10px 18px; }
.life-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(26px,3vw,40px); }
@media (max-width:760px){ .life-row { grid-template-columns:1fr; } }
.life-card { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:26px; box-shadow:var(--sh-1); border-top:3px solid var(--accent); }
.life-y { display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.4vw,30px); letter-spacing:-.025em; color:var(--logo-blue); }
.life-d { display:block; font-size:15px; color:var(--ink-2); line-height:1.5; margin-top:8px; }
.biz-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-top:clamp(26px,3vw,40px); }
@media (max-width:1000px){ .biz-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .biz-grid { grid-template-columns:1fr; } }
.biz-card { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:22px 20px; box-shadow:var(--sh-1); }
.biz-ico { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:var(--accent-deep); background:var(--amber-soft); }
.biz-card h4 { font-size:16px; letter-spacing:-.015em; line-height:1.2; margin-top:14px; }
.biz-card p { font-size:13px; color:var(--ink-2); line-height:1.5; margin-top:7px; }
.cross-list { display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.cross-row { display:grid; grid-template-columns:200px 180px 1fr auto; gap:16px; align-items:center; text-align:left; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md); padding:18px 22px; cursor:pointer; transition:transform .18s, box-shadow .18s, border-color .18s; }
.cross-row:hover { transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--accent); }
@media (max-width:900px){ .cross-row { grid-template-columns:1fr; gap:8px; } }
.cr-k { font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink); letter-spacing:-.015em; }
.cr-seg { font-size:13px; font-weight:600; color:var(--accent-deep); }
.cr-d { font-size:14px; color:var(--ink-2); line-height:1.45; }
.cr-go { color:var(--accent-deep); }

/* ============================================================
   About page — new sections
   ============================================================ */
.cx-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(22px,2.4vw,32px); }
.cx-chip { font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); background:var(--surface); border:1px solid var(--hairline-2); border-radius:999px; padding:10px 18px; }
.evo-rail { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-top:clamp(26px,3vw,40px); }
@media (max-width:1040px){ .evo-rail { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:620px){ .evo-rail { grid-template-columns:1fr 1fr; } }
.evo-step { display:flex; flex-direction:column; gap:7px; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md); padding:20px 18px; box-shadow:var(--sh-1); border-top:3px solid var(--solar); }
.evo-n { font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--solar-deep); line-height:1; }
.evo-k { font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--ink); line-height:1.2; letter-spacing:-.015em; }
.evo-d { font-size:12.5px; color:var(--ink-3); line-height:1.45; }
.today-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-top:clamp(26px,3vw,40px); }
@media (max-width:1040px){ .today-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:560px){ .today-grid { grid-template-columns:1fr 1fr; } }
.today-card { display:flex; flex-direction:column; gap:6px; text-align:center; align-items:center; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md); padding:22px 16px; box-shadow:var(--sh-1); }
.today-v { font-family:var(--font-display); font-weight:700; font-size:clamp(26px,2.8vw,36px); color:var(--logo-blue); line-height:1; letter-spacing:-.02em; }
.today-k { font-size:13px; color:var(--ink-2); line-height:1.35; font-weight:600; }
.today-note { font-size:11.5px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; }
.diff-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:clamp(26px,3vw,40px); }
@media (max-width:900px){ .diff-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .diff-grid { grid-template-columns:1fr; } }
.diff-card { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:24px 22px; box-shadow:var(--sh-1); }
.diff-ico { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:var(--accent-deep); background:var(--amber-soft); }
.diff-card h4 { font-size:17.5px; letter-spacing:-.015em; margin-top:14px; }
.diff-card p { font-size:14px; color:var(--ink-2); line-height:1.55; margin-top:8px; }
.vmv-card.is-purpose .val-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px; }
@media (max-width:900px){ .val-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .val-grid { grid-template-columns:1fr; } }
.val-card { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:24px 22px; box-shadow:var(--sh-1); border-left:3px solid var(--solar); }
.val-n { font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--solar-deep); }
.val-card h4 { font-size:17px; letter-spacing:-.015em; line-height:1.2; margin-top:8px; }
.val-card p { font-size:13.5px; color:var(--ink-2); line-height:1.55; margin-top:9px; }
.pillar-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(26px,3vw,40px); }
@media (max-width:900px){ .pillar-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pillar-grid { grid-template-columns:1fr; } }
.pillar-card { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:24px 22px; box-shadow:var(--sh-1); border-top:3px solid var(--accent); }
.pillar-card h4 { font-size:16.5px; letter-spacing:-.015em; line-height:1.25; }
.pillar-card p { font-size:13.5px; color:var(--ink-2); line-height:1.55; margin-top:10px; }
.intent-band { margin-top:22px; background:linear-gradient(120deg,var(--accent),var(--accent-deep)); color:#fff; border-radius:var(--r-xl); padding:clamp(26px,3vw,40px); box-shadow:var(--sh-2); }
.intent-k { display:block; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--solar); }
.intent-band p { font-family:var(--font-display); font-weight:600; font-size:clamp(19px,2.2vw,27px); letter-spacing:-.02em; line-height:1.35; margin-top:12px; max-width:900px; }
.gov-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(22px,2.4vw,32px); }
.gov-chip { display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:600; color:var(--ink-2); background:var(--surface); border:1px solid var(--hairline-2); border-radius:999px; padding:10px 17px; }
.gov-chip svg { color:var(--green); flex:none; }
.prin-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:18px; }
@media (max-width:900px){ .prin-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .prin-grid { grid-template-columns:1fr; } }
.prin-card { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:22px 20px; box-shadow:var(--sh-1); }
.prin-card h4 { font-size:16.5px; letter-spacing:-.015em; line-height:1.2; }
.prin-card p { font-size:13.5px; color:var(--ink-2); line-height:1.55; margin-top:9px; }
.tl-rail { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; align-items:start; margin-top:clamp(26px,3vw,40px); position:relative; }
@media (max-width:1040px){  }
@media (max-width:620px){  }
.tl-item { display:flex; flex-direction:column; gap:8px; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md); padding:22px 20px; box-shadow:var(--sh-1); }
.tl-dot { width:10px; height:10px; border-radius:50%; background:var(--solar); }
.tl-y { font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--logo-blue); line-height:1; }
.tl-k { font-size:13px; color:var(--ink-2); line-height:1.4; }
.dl-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:clamp(24px,2.6vw,36px); }
@media (max-width:700px){ .dl-row { grid-template-columns:1fr; } }
.dl-card { display:flex; flex-direction:column; gap:8px; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:26px; box-shadow:var(--sh-1); transition:transform .18s, box-shadow .18s, border-color .18s; }
.dl-card:hover { transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--accent); }
.dl-ic { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; color:var(--accent-deep); background:var(--amber-soft); }
.dl-t { font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--ink); letter-spacing:-.015em; margin-top:6px; }
.dl-m { font-size:13px; color:var(--ink-3); }

/* ---- case study headline cards + outcome groups ---- */
.hl-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
@media (max-width:960px){ .hl-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .hl-grid { grid-template-columns:1fr; } }
.hl-card { width:100%; height:100%; text-align:left; display:flex; flex-direction:column; gap:7px; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:26px 24px; box-shadow:var(--sh-1); cursor:pointer; border-top:3px solid var(--solar); transition:transform .2s, box-shadow .2s, border-color .2s; }
.hl-card:hover { transform:translateY(-5px); box-shadow:var(--sh-2); }
.hl-group { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.hl-metric { font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3vw,38px); letter-spacing:-.03em; color:var(--logo-blue); line-height:1; margin-top:6px; }
.hl-seg { font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink); letter-spacing:-.015em; margin-top:8px; }
.hl-sol { font-size:14px; color:var(--accent-deep); font-weight:600; }
.hl-res { font-size:14px; color:var(--ink-2); line-height:1.5; }
.hl-go { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--accent-deep); margin-top:auto; padding-top:14px; }
.hl-card:hover .hl-go svg { transform:translateX(4px); }
.hl-go svg { transition:transform .2s; }
.og-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:clamp(26px,3vw,40px); }
@media (max-width:1000px){ .og-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .og-grid { grid-template-columns:1fr; } }
.og-card { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:24px 22px; box-shadow:var(--sh-1); }
.og-card h4 { font-size:17px; letter-spacing:-.015em; line-height:1.2; }
.og-d { font-size:13px; color:var(--ink-3); line-height:1.5; margin-top:8px; }
.og-list { display:flex; flex-direction:column; gap:9px; margin-top:16px; }
.og-item { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; text-align:left; background:var(--surface-2); border:1px solid var(--hairline); border-radius:10px; padding:11px 13px; cursor:pointer; transition:.16s; }
.og-item:hover { border-color:var(--accent); background:var(--amber-soft); }
.og-item svg { margin-left:auto; color:var(--accent-deep); flex:none; }
.ogi-m { font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--logo-blue); }
.ogi-s { font-size:12.5px; color:var(--ink-2); min-width:0; }
.og-card h4, .og-d { overflow-wrap:anywhere; }

/* legal / policy pages */
.legal-body { max-width: 780px; margin: 0 auto; }
.legal-body h3 { font-size: 22px; margin-top: 36px; letter-spacing: -.02em; }
.legal-body > div:first-child h3:first-child { margin-top: 0; }
.legal-body p, .legal-body li { font-size: 16px; color: var(--ink-2); line-height: 1.7; margin-top: 12px; }
.legal-body ul { margin: 8px 0 0; padding-left: 22px; }
.legal-updated { font-size: 13.5px; color: var(--ink-3); margin-top: 10px; }

/* ============================================================
   SPARK full page
   ============================================================ */
.spark-page { background:var(--canvas); }
.spark-hero { position:relative; overflow:hidden; background:linear-gradient(150deg,#01344f,#012234); color:#EAF2F8; padding-block:clamp(40px,5vw,72px) clamp(48px,6vw,84px); }
.spark-hero-glow { position:absolute; inset:0; pointer-events:none; background:radial-gradient(46% 70% at 88% 0%, rgba(245,184,28,.16), transparent 58%), radial-gradient(40% 60% at 4% 100%, rgba(18,165,148,.20), transparent 60%); }
.spark-hero > .shell { position:relative; z-index:1; }
.spark-hero h1 { color:#fff; font-size:clamp(38px,5.4vw,68px); letter-spacing:-.04em; line-height:1.0; margin-top:14px; text-wrap:balance; }
.spark-hero .sp-word { color:var(--solar); position:relative; letter-spacing:.02em; }
.spark-hero .sp-word::after { content:""; position:absolute; left:0; right:0; bottom:.02em; height:4px; background:var(--solar); border-radius:3px; opacity:.7; }
.spark-hero-sub { color:#B9CDDE; font-size:clamp(16px,1.3vw,18.5px); line-height:1.62; margin-top:20px; max-width:820px; }
.spark-journey { display:flex; align-items:stretch; gap:0; margin-top:clamp(30px,3.4vw,46px); flex-wrap:wrap; }
.sj-stage { flex:1 1 0; min-width:150px; text-align:left; display:flex; flex-direction:column; gap:9px; padding:18px 18px 20px; border-radius:16px; cursor:pointer; background:linear-gradient(160deg, color-mix(in srgb,var(--sc) 30%, transparent), rgba(255,255,255,.04)); border:1px solid color-mix(in srgb,var(--sc) 50%, transparent); border-top:3px solid var(--sc); transition:transform .2s, box-shadow .2s, background .2s; }
.sj-stage:hover { transform:translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.34); background:linear-gradient(160deg, color-mix(in srgb,var(--sc) 46%, transparent), rgba(255,255,255,.06)); }
.sj-top { display:flex; align-items:center; justify-content:space-between; }
.sj-badge { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:21px; color:#fff; background:var(--sc); box-shadow:0 6px 16px color-mix(in srgb,var(--sc) 50%, transparent); }
.sj-step { font-family:var(--font-display); font-weight:700; font-size:15px; color:rgba(255,255,255,.42); }
.sj-name { font-family:var(--font-display); font-weight:600; font-size:16.5px; color:#fff; letter-spacing:-.01em; line-height:1.15; }
.sj-phase { font-size:12px; color:#9FC1DC; letter-spacing:.01em; }
.sj-link { display:flex; align-items:center; color:rgba(255,255,255,.32); padding:0 4px; align-self:center; }
@media (max-width:860px){ .sj-link { display:none; } .spark-journey { gap:10px; } .sj-stage { flex:1 1 44%; } }
@media (max-width:760px){ .spark-pill { flex:0 0 auto; } }

.spark-subnav { position:sticky; top:var(--nav-h); z-index:40; background:rgba(255,255,255,.9); -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--hairline); }
.spark-subnav-inner { display:flex; gap:8px; overflow-x:auto; padding-block:12px; scrollbar-width:none; }
.spark-subnav-inner::-webkit-scrollbar { display:none; }
.spark-pill { flex:1 1 0; justify-content:center; display:inline-flex; align-items:center; gap:9px; white-space:nowrap; font-size:14px; font-weight:600; color:var(--ink-2); background:transparent; border:1px solid var(--hairline-2); border-radius:999px; padding:9px 15px; transition:.16s; }
.spark-pill:hover { color:var(--ink); border-color:var(--sc); background:color-mix(in srgb,var(--sc) 8%,#fff); }
.spark-pill.is-active { color:#fff; background:var(--sc); border-color:var(--sc); box-shadow:0 6px 16px color-mix(in srgb,var(--sc) 36%,transparent); }
.spark-pill-l { width:22px; height:22px; border-radius:7px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:13px; background:color-mix(in srgb,var(--sc) 16%,#fff); color:var(--sc); }
.spark-pill.is-active .spark-pill-l { background:rgba(255,255,255,.24); color:#fff; }

.spark-detail { position:relative; padding-block:clamp(44px,5vw,74px); border-bottom:1px solid var(--hairline); scroll-margin-top:130px; overflow:hidden; }
.spark-detail:nth-child(even) { background:var(--surface); }
.spark-detail:nth-child(odd) { background:var(--canvas); }
.spark-detail > .shell { position:relative; }
.spark-wm { position:absolute; top:-46px; right:-10px; z-index:0; font-family:var(--font-display); font-weight:700; font-size:clamp(220px,26vw,380px); line-height:1; color:var(--sc); opacity:.06; pointer-events:none; user-select:none; }
.spark-detail > .shell > *:not(.spark-wm) { position:relative; z-index:1; }
.spark-detail-head { display:flex; align-items:flex-start; gap:20px; }
.spark-detail-badge { width:70px; height:70px; flex:none; border-radius:20px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:34px; color:#fff; background:linear-gradient(155deg,var(--sc),color-mix(in srgb,var(--sc) 72%,#000)); box-shadow:0 14px 30px color-mix(in srgb,var(--sc) 44%,transparent); }
.spark-detail-step { font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--sc); }
.spark-detail-head h2 { font-size:clamp(28px,3.4vw,44px); letter-spacing:-.03em; margin-top:6px; }
.spark-detail-tag { font-size:16.5px; color:var(--ink-2); margin-top:8px; }
.spark-detail-top { display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:stretch; margin-top:26px; }
@media (max-width:820px){ .spark-detail-top { grid-template-columns:1fr; } }
.spark-detail.is-flip .spark-detail-media { order:2; }
.spark-detail-media { position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2); min-height:300px; }
.spark-media-img { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.spark-detail-media:hover .spark-media-img { transform:scale(1.05); }
.spark-media-tag { position:absolute; left:14px; bottom:14px; z-index:1; display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; font-size:14.5px; color:#fff; background:rgba(6,20,36,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:8px 14px 8px 8px; border-radius:999px; }
.smt-l { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:14px; font-weight:700; color:#fff; background:var(--sc); }
.spark-detail-obj { margin:0; align-self:center; font-size:16.5px; color:var(--ink); line-height:1.62; background:var(--sc-soft); border-left:4px solid var(--sc); border-radius:0 14px 14px 0; padding:22px 26px; }
.spark-detail-obj .sdo-k { display:block; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sc); margin-bottom:6px; }
.spark-detail-cols { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:24px; }
@media (max-width:760px){ .spark-detail-cols { grid-template-columns:1fr; } }
.spark-col { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-lg); padding:26px 28px; box-shadow:var(--sh-1); }
.spark-col-opt { background:var(--sc-soft); border-color:color-mix(in srgb,var(--sc) 30%,transparent); box-shadow:none; }
.spark-col h4 { display:flex; align-items:center; gap:9px; font-size:13px; letter-spacing:.05em; text-transform:uppercase; font-family:var(--font-sans); font-weight:700; color:var(--sc); }
.spark-list { list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:14px; }
.spark-list li { display:flex; align-items:flex-start; gap:11px; font-size:15.5px; color:var(--ink-2); line-height:1.5; }
.spark-list li svg { flex:none; margin-top:3px; color:var(--sc); }
.spark-outcome { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:22px; padding:20px 26px; border-radius:var(--r-md); background:linear-gradient(120deg,var(--sc),color-mix(in srgb,var(--sc) 68%,#000)); color:#fff; box-shadow:0 16px 34px color-mix(in srgb,var(--sc) 30%,transparent); }
.spark-outcome-ico { width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.18); color:#fff; }
.spark-outcome-k { font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.82); white-space:nowrap; }
.spark-outcome-v { flex:1 1 240px; font-family:var(--font-display); font-weight:600; font-size:clamp(18px,1.8vw,23px); letter-spacing:-.01em; line-height:1.3; }
.spark-close { background:var(--surface); }

/* ---- awards & recognition ---- */
.award-feature { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,3vw,42px); align-items:center; margin-top:clamp(24px,3vw,38px); background:#fff; border:1px solid var(--hairline); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-2); }
@media (max-width:860px){ .award-feature { grid-template-columns:1fr; } }
.award-photo { position:relative; height:100%; min-height:280px; background:var(--surface-2); }
.award-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.award-copy { padding:clamp(24px,3vw,40px) clamp(24px,3vw,40px) clamp(24px,3vw,40px) 0; }
@media (max-width:860px){ .award-copy { padding:clamp(22px,3vw,32px); } }
.award-year { display:inline-block; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.1em; color:#7A5A02; background:var(--solar-soft); border:1px solid color-mix(in srgb,var(--solar) 42%,transparent); padding:5px 12px; border-radius:999px; }
.award-copy h3 { font-size:clamp(21px,2.3vw,28px); letter-spacing:-.02em; line-height:1.22; margin-top:14px; }
.award-org { font-size:14px; font-weight:600; color:var(--accent-deep); margin-top:8px; }
.award-copy p { font-size:15px; color:var(--ink-2); line-height:1.62; margin-top:14px; }

/* ---- GPTW mark beside the logo ---- */
.nav-gptw { height:34px; width:auto; display:block; margin-left:10px; }
@media (max-width:600px){ .nav-gptw { height:26px; margin-left:7px; } }

/* ---- tighter home spacing ---- */
.proof-note-tight { margin-bottom:0; }
.spark-sec { padding-block:clamp(38px,4.4vw,64px); }
.why-sec { padding-top:clamp(34px,4vw,56px); }

/* ---- legal definition lists ---- */
.legal-dl { margin:14px 0 0; }
.legal-dl dt { font-weight:700; color:var(--ink); font-size:15.5px; margin-top:14px; }
.legal-dl dd { margin:4px 0 0; font-size:15.5px; color:var(--ink-2); line-height:1.65; }
.legal-sub { font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink); margin:18px 0 0; letter-spacing:-.01em; }

/* ---- hero stat card (replaces the live panel) ---- */
.hero-stat-card { width:100%; background:rgba(255,255,255,.10); -webkit-backdrop-filter:saturate(1.3) blur(14px); backdrop-filter:saturate(1.3) blur(14px); border:1px solid rgba(255,255,255,.24); border-radius:var(--r-xl); padding:clamp(26px,3vw,38px); box-shadow:0 30px 70px rgba(1,32,54,.34); }
.hsc-k { display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--solar); }
.hsc-grid { display:flex; flex-direction:column; gap:22px; margin-top:20px; }
.hsc-item { display:flex; flex-direction:column; gap:5px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.16); }
.hsc-item:last-child { padding-bottom:0; border-bottom:none; }
.hsc-v { font-family:var(--font-display); font-weight:700; font-size:clamp(38px,4.4vw,54px); letter-spacing:-.035em; line-height:1; color:#fff; }
.hsc-v .u { font-size:.4em; color:var(--solar); margin-left:4px; letter-spacing:-.01em; }
.hsc-l { font-size:12.5px; letter-spacing:.11em; text-transform:uppercase; color:#B9CDDE; font-weight:600; }
.hsc-foot { margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.16); font-size:12.5px; color:#9FC1DC; line-height:1.5; }
@media (max-width:1000px){ .hero-stat-card { max-width:560px; } .hsc-grid { flex-direction:row; flex-wrap:wrap; gap:18px 34px; } .hsc-item { flex:1 1 130px; padding-bottom:0; border-bottom:none; } }

/* ---- tighten Outcomes → Why not EPC ---- */
.why-sec { padding-top:clamp(10px,1.4vw,20px); }

/* ---- hero stats: plain numbers on the video (no glass card) ---- */
.hero-stats-plain { width:100%; }
.hero-stats-plain .hsc-k { display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--solar); text-shadow:0 1px 8px rgba(1,32,54,.55); }
.hsp-grid { display:flex; flex-direction:column; gap:26px; margin-top:20px; }
.hsp-v { font-family:var(--font-display); font-weight:700; font-size:clamp(40px,4.6vw,58px); letter-spacing:-.035em; line-height:1; color:#fff; text-shadow:0 2px 18px rgba(1,32,54,.6); }
.hsp-v .u { font-size:.4em; color:var(--solar); margin-left:4px; letter-spacing:-.01em; }
.hsp-l { font-size:12.5px; letter-spacing:.11em; text-transform:uppercase; color:#D5E4F1; font-weight:600; margin-top:6px; text-shadow:0 1px 10px rgba(1,32,54,.6); }
@media (max-width:1000px){ .hsp-grid { flex-direction:row; flex-wrap:wrap; gap:20px 36px; } .hsp-item { flex:1 1 130px; } }

.hero-l-sub { text-shadow:0 1px 12px rgba(1,32,54,.55); }

/* ---- horizontal hero stat band ---- */
.hsp-grid { flex-direction:row !important; flex-wrap:wrap; gap:18px 40px; align-items:flex-end; }
.hsp-item { flex:0 1 auto; }
.hsp-v { font-size:clamp(34px,3.6vw,48px); }
@media (max-width:520px){ .hsp-grid { gap:16px 26px; } .hsp-v { font-size:clamp(28px,8vw,38px); } }

/* ---- chart-only savings section ---- */
.ss-grid-solo { grid-template-columns:1fr !important; }

/* ---- One Ask: copy + calculator side by side ---- */
.ask-inner-split { display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,4vw,56px); align-items:center; }
@media (max-width:960px){ .ask-inner-split { grid-template-columns:1fr; } }
.ask-calc .calc { box-shadow:0 30px 70px rgba(1,32,54,.34); }

/* ---- calculator result on the light card ---- */
.calc-result .k { color:var(--ink-3) !important; }
.calc-result .big { color:var(--accent-deep); }
.calc-result .result-stat .k { color:var(--ink-3) !important; }
.calc-result .result-stat .v { color:var(--ink); }
.calc-result .link-arrow { color:var(--accent-deep); }
.calc-result .link-arrow:hover { color:var(--solar-deep); }
.calc-result { border-top:1px solid #B6D3EC; }

/* ---- 25-year cost curve ---- */
.cc25 { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-lg); padding:clamp(20px,2.4vw,30px); box-shadow:var(--sh-1); }
.cc25-legend { display:flex; justify-content:center; gap:28px; flex-wrap:wrap; margin-bottom:14px; }
.cc25-svg { width:100%; height:auto; display:block; }
.cc25-ax { font-family:var(--font-sans); font-size:13px; fill:var(--ink-3); font-variant-numeric:tabular-nums; }
.cc25-note { font-family:var(--font-sans); font-size:12.5px; font-weight:600; fill:var(--ink-3); letter-spacing:.04em; text-transform:uppercase; }

/* ---- wider hero copy + bigger stat band ---- */
.hero-l-inner { grid-template-columns:1.12fr .88fr; }
.hero-l-copy { max-width:760px; }
.hero-l h1 { font-size:clamp(44px,6.4vw,86px); }
.hero-l-sub { max-width:620px; font-size:clamp(16.5px,1.35vw,19.5px); }
.hsp-grid { gap:20px 46px; }
.hsp-v { font-size:clamp(44px,4.8vw,66px) !important; }
.hsp-v .u { font-size:.36em; }
.hsp-l { font-size:13.5px; letter-spacing:.12em; }
.hero-stats-plain .hsc-k { font-size:12.5px; }
@media (max-width:1000px){ .hero-l-inner { grid-template-columns:1fr; } }
@media (max-width:520px){ .hsp-v { font-size:clamp(32px,9vw,44px) !important; } }

/* ---- stat band: one row, wider column ---- */
.hero-l-inner { grid-template-columns:1fr 1.02fr; }
.hsp-grid { flex-wrap:nowrap !important; gap:16px 30px; }
.hsp-item { min-width:0; }
.hsp-v { white-space:nowrap; font-size:clamp(34px,3.5vw,52px) !important; }
.hsp-l { font-size:12px; letter-spacing:.09em; white-space:nowrap; }
@media (max-width:1000px){ .hero-l-inner { grid-template-columns:1fr; } }
@media (max-width:560px){ .hsp-grid { flex-wrap:wrap !important; } .hsp-v { font-size:clamp(30px,8.5vw,40px) !important; } }

/* ---- hero: widen copy AND grow the stat band (spend the slack, tighter gutter) ---- */
.hero-l-inner { grid-template-columns:1.06fr .94fr; gap:clamp(20px,2.2vw,34px); }
.hero-l-copy { max-width:none; }
.hsp-grid { gap:14px 26px; }
.hsp-v { font-size:clamp(34px,4.2vw,58px) !important; }
.hsp-l { font-size:13px; letter-spacing:.09em; }
@media (max-width:1000px){ .hero-l-inner { grid-template-columns:1fr; gap:34px; } }

/* ---- second chart block ---- */
.chart-second { margin-top:clamp(30px,3.4vw,50px); }
.chart-second-head { margin-bottom:16px; }
.chart-second-head h3 { font-size:clamp(21px,2.3vw,29px); letter-spacing:-.025em; margin-top:12px; }
.cc25-cap { font-size:13.5px; color:var(--ink-2); line-height:1.6; margin-top:16px; padding-top:14px; border-top:1px solid var(--hairline); }

/* ---- two charts side by side ---- */
.chart-duo { display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.2vw,30px); align-items:start; }
@media (max-width:1000px){ .chart-duo { grid-template-columns:1fr; } }
.chart-col { min-width:0; display:flex; flex-direction:column; }
.chart-col-head { margin-bottom:14px; }
.chart-col-head h3 { font-size:clamp(18px,1.7vw,23px); letter-spacing:-.02em; line-height:1.25; margin-top:10px; }
.chart-col .cc25 { flex:1; }
.chart-duo .cc25-legend { gap:16px; font-size:13px; }
.chart-duo .cc25-ax { font-size:15px; }
.chart-duo .cc25-note { font-size:14px; }

/* ---- legible SVG text at half width (viewBox units, scale ~0.47) ---- */
.chart-duo { align-items:stretch; }
.chart-duo .cc25-ax { font-size:28px; }
.chart-duo .cc25-note { font-size:26px; }

/* ---- captions: same position inside both cards ---- */
.chart-col .cc25 { display:flex; flex-direction:column; }
.chart-col .cc25-svg { flex:0 0 auto; }
.chart-col .cc25-cap { margin-top:16px; }

/* calculator field labels: AA contrast on the blue gradient card */
.calc .field label { color: var(--ink-2); }

/* ---- Energy Intelligence Platform ---- */
.eip-hero-sec { background:linear-gradient(155deg,#01344f,#012234); position:relative; overflow:hidden; }
.eip-hero-sec::before { content:""; position:absolute; inset:0; background:radial-gradient(50% 74% at 90% 0%, rgba(245,184,28,.15), transparent 58%); pointer-events:none; }
.eip-hero-sec > .shell { position:relative; z-index:1; }
.eip-hero-sec .sec-head { max-width:860px; }
.eip-hero-sec .lead + .lead { margin-top:14px; }
.eip-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(26px,3vw,42px); }
@media (max-width:900px){ .eip-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .eip-grid { grid-template-columns:1fr; } }
.eip-card { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-lg); padding:26px 24px; box-shadow:var(--sh-1); transition:transform .2s, box-shadow .2s, border-color .2s; }
.eip-card:hover { transform:translateY(-4px); box-shadow:var(--sh-2); border-color:color-mix(in srgb,var(--accent) 32%,var(--hairline)); }
.eip-ico { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; color:var(--accent-deep); background:var(--amber-soft); }
.eip-card h4 { font-size:17.5px; letter-spacing:-.015em; line-height:1.22; margin-top:16px; }
.eip-card p { font-size:14px; color:var(--ink-2); line-height:1.6; margin-top:10px; }
.eip-two { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:860px){ .eip-two { grid-template-columns:1fr; } }
.eip-block { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-xl); padding:clamp(26px,3vw,36px); box-shadow:var(--sh-1); }
.eip-block h3 { font-size:clamp(20px,2.2vw,26px); letter-spacing:-.02em; line-height:1.2; margin-top:14px; }
.eip-block > p { font-size:15px; color:var(--ink-2); line-height:1.65; margin-top:14px; }
.eip-sub { display:flex; flex-direction:column; gap:16px; margin-top:22px; padding-top:22px; border-top:1px solid var(--hairline); }
.eip-subitem h5 { font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--accent-deep); margin:0; }
.eip-subitem p { font-size:14px; color:var(--ink-2); line-height:1.6; margin-top:6px; }
.eip-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.eip-tags span { font-size:12.5px; font-weight:600; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--hairline); border-radius:999px; padding:6px 12px; }
.eip-calc-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:clamp(26px,3vw,40px); }
@media (max-width:760px){ .eip-calc-grid { grid-template-columns:1fr; } }
.eip-calc-card { background:linear-gradient(158deg, #EEF6FD 0%, #DCEBF8 100%); border:1px solid #BFDCF3; border-radius:var(--r-lg); padding:28px 26px; }
.eip-calc-card h4 { font-size:19px; letter-spacing:-.02em; }
.eip-calc-card p { font-size:14.5px; color:var(--ink-2); line-height:1.62; margin-top:10px; }

/* ---- People: disciplines + life-at grid ---- */
.team-disc { display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(24px,3vw,36px); }
.team-disc-chip { font-size:13.5px; font-weight:600; color:var(--accent-deep); background:var(--amber-soft); border:1px solid color-mix(in srgb,var(--accent) 26%,transparent); border-radius:999px; padding:9px 16px; }
.life-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:clamp(24px,3vw,36px); }
@media (max-width:900px){ .life-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .life-grid { grid-template-columns:1fr 1fr; } }
.life-tile { aspect-ratio:4/3; border-radius:var(--r-md); background:var(--surface-2); border:1px dashed var(--hairline-2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:12px; transition:border-color .2s, background .2s; }
.life-tile:hover { border-color:var(--accent); background:var(--amber-soft); }
.life-tile-ph { color:var(--ink-3); }
.life-tile-t { font-size:13px; font-weight:600; color:var(--ink-2); line-height:1.3; }

/* ---- stat band: slightly larger, still one row ---- */
.hsp-grid { gap:14px 22px; }
.hsp-v { font-size:clamp(36px,4.7vw,66px) !important; }
.hsp-v .u { font-size:.34em; }
.hsp-l { font-size:13.5px; letter-spacing:.08em; }
@media (max-width:560px){ .hsp-v { font-size:clamp(30px,8.5vw,42px) !important; } }

/* ---- leadership: initials fallback where no photo is supplied ---- */
.leader-initials { display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:26px; color:#fff; letter-spacing:.01em; }

/* ---- CO2 avoided table ---- */
.co2-card { margin-top:clamp(26px,3vw,40px); background:#fff; border:1px solid var(--hairline); border-radius:var(--r-xl); padding:clamp(24px,3vw,34px); box-shadow:var(--sh-1); }
.co2-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.co2-head h3 { font-size:clamp(19px,2.1vw,25px); letter-spacing:-.02em; }
.co2-formula { font-size:12.5px; color:var(--ink-3); }
.co2-table-wrap { overflow-x:auto; margin-top:20px; }
.co2-table { width:100%; border-collapse:collapse; font-size:15px; }
.co2-table th { text-align:left; font-family:var(--font-sans); font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#0B2038; background:var(--solar); padding:12px 16px; }
.co2-table th:first-child { border-radius:10px 0 0 0; }
.co2-table th:last-child { border-radius:0 10px 0 0; }
.co2-table td { padding:13px 16px; border-bottom:1px solid var(--hairline); color:var(--ink-2); }
.co2-table tbody tr:hover td { background:var(--amber-soft); }
.co2-table td:first-child { font-weight:600; color:var(--ink); }
.co2-table .ta-r { text-align:right; }
.co2-table tfoot td { background:var(--logo-blue); color:#fff; font-weight:700; border-bottom:none; }
.co2-table tfoot td:first-child { color:#fff; border-radius:0 0 0 10px; }
.co2-table tfoot td:last-child { border-radius:0 0 10px 0; }

/* ---- Solutions hero: technology teaser (replaces the calculator) ---- */
.tech-teaser { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-xl); padding:clamp(22px,2.6vw,30px); box-shadow:var(--sh-2); }
.tt-k { display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-deep); }
.tt-list { display:flex; flex-direction:column; gap:9px; margin-top:12px; }
.tt-item { border:1px solid var(--hairline); border-radius:var(--r-md); padding:12px 16px; transition:border-color .2s, background .2s; }
.tt-item:hover { border-color:color-mix(in srgb,var(--accent) 42%,transparent); background:var(--amber-soft); }
.tt-item.is-flag { background:linear-gradient(158deg,#01344f,#012234); border-color:transparent; }
.tt-top { display:flex; align-items:center; gap:10px; }
.tt-name { font-family:var(--font-display); font-weight:600; font-size:16.5px; letter-spacing:-.015em; color:var(--ink); }
.tt-item.is-flag .tt-name { color:#fff; }
.tt-flag { font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#012c46; background:var(--solar); border-radius:6px; padding:4px 8px; }
.tt-item p { font-size:13px; color:var(--ink-2); line-height:1.5; margin-top:4px; }
.tt-item.is-flag p { color:#B9CDDE; }

/* ---- dedicated customer enquiry form ---- */
.enq-card { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-xl); padding:clamp(26px,3.2vw,44px); box-shadow:var(--sh-2); scroll-margin-top:96px; }
.enq-head h3 { font-size:clamp(22px,2.6vw,32px); letter-spacing:-.025em; line-height:1.16; margin-top:14px; }
.enq-sub { font-size:15.5px; color:var(--ink-2); line-height:1.6; margin-top:12px; max-width:640px; }
.enq-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px; }
@media (max-width:640px){ .enq-grid { grid-template-columns:1fr; } }
.enq-f { display:block; }
.enq-f > span { display:block; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; }
.enq-opt { font-style:normal; font-weight:600; text-transform:none; letter-spacing:0; color:var(--ink-3); opacity:.8; }
.enq-f input, .enq-f select, .enq-f textarea { width:100%; padding:13px 14px; border-radius:11px; border:1px solid var(--hairline-2); background:var(--surface); color:var(--ink); font-family:var(--font-sans); font-size:15px; outline:none; transition:border-color .15s, box-shadow .15s; }
.enq-f textarea { resize:vertical; }
.enq-f input::placeholder, .enq-f textarea::placeholder { color:var(--ink-3); }
.enq-f input:focus, .enq-f select:focus, .enq-f textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--amber-soft); }
.enq-f input.invalid, .enq-f select.invalid, .enq-f textarea.invalid { border-color:#D9503B; box-shadow:0 0 0 3px rgba(217,80,59,.14); }
.enq-wide { grid-column:1 / -1; }
.enq-submit { margin-top:22px; }
.enq-note { font-size:12.5px; color:var(--ink-3); margin-top:14px; }
.enq-done { text-align:center; padding:clamp(22px,3vw,40px) 0; }
.enq-tick { width:58px; height:58px; border-radius:50%; background:var(--green-soft); color:var(--green); display:grid; place-items:center; margin:0 auto 18px; }
.enq-done h3 { font-size:clamp(20px,2.3vw,27px); letter-spacing:-.02em; max-width:560px; margin:0 auto; line-height:1.2; }
.enq-done p { font-size:15.5px; color:var(--ink-2); line-height:1.6; margin-top:12px; max-width:520px; margin-inline:auto; }
/* dark-surface variant */
.enq-dark { background:linear-gradient(158deg,#01344f,#012234); border-color:rgba(255,255,255,.14); }
.enq-dark .enq-head h3, .enq-dark .enq-done h3 { color:#fff; }
.enq-dark .enq-sub, .enq-dark .enq-done p { color:#B9CDDE; }
.enq-dark .eyebrow { color:var(--solar); }
.enq-dark .enq-f > span { color:#9FC1DC; }
.enq-dark .enq-f input, .enq-dark .enq-f select, .enq-dark .enq-f textarea { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); color:#fff; }
.enq-dark .enq-f input::placeholder, .enq-dark .enq-f textarea::placeholder { color:#7E9BB5; }
.enq-dark .enq-f select option { color:#0B2038; }
.enq-dark .enq-f input:focus, .enq-dark .enq-f select:focus, .enq-dark .enq-f textarea:focus { border-color:var(--solar); box-shadow:0 0 0 3px rgba(245,184,28,.20); }
.enq-dark .enq-note { color:#8FB0CC; }
.enq-dark .enq-note a { color:var(--solar); }

/* ---- global: tighter section rhythm (client feedback) ---- */
.section { padding-block: clamp(34px, 4vw, 62px); }
.plat-hero-note { color:#B9CDDE; font-size:clamp(14.5px,1.15vw,16px); line-height:1.62; margin-top:20px; max-width:760px; padding-top:18px; border-top:1px solid rgba(255,255,255,.16); }
/* centred divider between sections */
.section + .section::before { content:""; display:block; width:56px; height:2px; border-radius:2px; background:var(--solar); opacity:.5; margin:0 auto clamp(22px,2.6vw,34px); }

/* ---- resume upload ---- */
.resume-drop { display:flex; align-items:center; gap:11px; margin-top:7px; padding:13px 15px; border:1px dashed var(--hairline-2); border-radius:11px; background:var(--surface); cursor:pointer; transition:border-color .18s, background .18s; }
.resume-drop:hover { border-color:var(--accent); background:var(--amber-soft); }
.resume-drop input { display:none; }
.resume-drop .rd-ic { color:var(--accent-deep); flex:none; }
.resume-drop .rd-t { font-size:14.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- awards list ---- */
.award-list { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(22px,2.6vw,34px); align-items:stretch; }
@media (max-width:860px){ .award-list { grid-template-columns:1fr; } }
.award-item { display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--hairline); border-radius:var(--r-lg); padding:28px 26px; box-shadow:var(--sh-1); height:100%; border-top:3px solid var(--solar); transition:transform .2s, box-shadow .2s; }
.award-item:hover { transform:translateY(-4px); box-shadow:var(--sh-2); }
.ai-y { flex:none; font-family:var(--font-display); font-weight:700; font-size:14px; color:#7A5A02; background:var(--solar-soft); border:1px solid color-mix(in srgb,var(--solar) 42%,transparent); border-radius:999px; padding:5px 11px; }
.award-item h4 { font-size:19px; letter-spacing:-.018em; line-height:1.24; }
.ai-o { font-size:13.5px; color:var(--ink-3); margin-top:8px; line-height:1.45; }

/* ---- Solutions: tighter rhythm between outcome / risk / FAQ blocks ---- */
.sol-outcomes-sec { padding-bottom: clamp(20px,2.4vw,30px); }
.sol-outcomes-sec + .section::before { display:none; }
.tech-grid + * { margin-top:0; }

/* ---- platform + solutions: tighter section rhythm ---- */
.plat-page .section, .sol-page .section { padding-block: clamp(26px,3.2vw,48px); }
.plat-page .section + .section::before, .sol-page .section + .section::before { margin-bottom: clamp(16px,2vw,24px); }
.plat-page .sec-head .lead, .sol-page .sec-head .lead { margin-top:14px; }

/* ---- customer journey (generic platform layout) ---- */
.jrn-sec { background:#EEF6FD; }
.jrn-head { max-width:900px; }
.jrn-head h2 { font-size:clamp(26px,3.4vw,44px); letter-spacing:-.032em; line-height:1.08; margin-top:14px; }
.jrn-dot { color:var(--solar); }
.jrn-sub { font-size:15.5px; color:var(--ink-2); line-height:1.62; margin-top:14px; max-width:680px; }
.jrn-row { display:grid; grid-template-columns:1fr auto 1.06fr auto 1fr; gap:0 12px; align-items:stretch; margin-top:clamp(22px,2.6vw,34px); }
@media (max-width:960px){ .jrn-row { grid-template-columns:1fr; gap:14px; } .jrn-arrow { display:none; } }
.jrn-card { background:#fff; border:1px solid var(--hairline); border-radius:16px; padding:22px 20px; box-shadow:var(--sh-1); }
.jrn-card.is-platform { border-top:3px solid var(--solar); box-shadow:var(--sh-2); }
.jrn-card.is-portfolio { background:linear-gradient(178deg,#F1FAF5,#fff 40%); }
.jrn-card-top { display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--hairline); }
.jrn-ic { width:40px; height:40px; flex:none; border-radius:11px; display:grid; place-items:center; color:var(--accent-deep); background:var(--amber-soft); }
.is-platform .jrn-ic { color:#7A5A02; background:var(--solar-soft); }
.is-portfolio .jrn-ic { color:var(--green); background:var(--green-soft); }
.jrn-n { display:block; font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--accent-deep); line-height:1; }
.is-platform .jrn-n { color:var(--solar-deep); }
.is-portfolio .jrn-n { color:var(--green); }
.jrn-t { display:block; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-top:5px; }
.jrn-list { list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:10px; }
.jrn-list li { display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--ink-2); line-height:1.45; }
.jrn-list li::before { content:""; flex:none; width:5px; height:5px; border-radius:50%; background:var(--solar); margin-top:6px; }
.jrn-list-ic li::before { display:none; }
.jrn-list-ic .jli { flex:none; color:var(--accent-deep); display:grid; place-items:center; width:16px; margin-top:1px; }
.jrn-arrow { display:flex; align-items:center; color:var(--ink-3); }
.jrn-foot { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:16px; background:#fff; border:1px solid var(--hairline); border-radius:14px; padding:18px 22px; box-shadow:var(--sh-1); }
.jrn-foot-mark { width:42px; height:42px; flex:none; border-radius:11px; display:grid; place-items:center; color:var(--accent-deep); background:var(--amber-soft); }
.jrn-foot-brand { font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:.06em; color:var(--logo-blue); }
.jrn-foot p { flex:1 1 320px; font-size:14px; color:var(--ink-2); line-height:1.55; padding-left:16px; border-left:1px solid var(--hairline); }
@media (max-width:640px){ .jrn-foot p { padding-left:0; border-left:none; } }
.jrn-note { font-size:12px; color:var(--ink-3); text-align:center; margin-top:14px; }

/* ---- Energy Intelligence hero (light, mockup right) ---- */
.eip-hero-light { background:linear-gradient(168deg,#F4F9FE,#E9F2FB); }
.eip-hero-grid { display:grid; grid-template-columns:1fr 1.02fr; gap:clamp(26px,3.4vw,52px); align-items:center; }
@media (max-width:980px){ .eip-hero-grid { grid-template-columns:1fr; } }
.eip-h { font-size:clamp(26px,3.4vw,44px); letter-spacing:-.032em; line-height:1.06; margin-top:14px; }
.eip-p { font-size:15.5px; color:var(--ink-2); line-height:1.65; margin-top:14px; max-width:560px; }
.eip-mock { position:relative; }
.eip-mock-note { display:block; font-size:11.5px; color:var(--ink-3); text-align:right; margin-top:8px; }
.mk-win { background:#fff; border:1px solid var(--hairline); border-radius:16px; overflow:hidden; box-shadow:var(--sh-3); }
.mk-bar { display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--surface-2); border-bottom:1px solid var(--hairline); }
.mk-bar span { width:9px; height:9px; border-radius:50%; background:var(--hairline-2); }
.mk-bar em { margin-left:8px; font-style:normal; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.mk-body { padding:16px; display:flex; flex-direction:column; gap:14px; }
.mk-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mk-kpi { background:var(--surface-2); border:1px solid var(--hairline); border-radius:11px; padding:12px 13px; }
.mk-k { display:block; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.mk-v { display:block; font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--logo-blue); margin-top:6px; letter-spacing:-.02em; }
.mk-d { display:block; font-size:11.5px; font-weight:600; color:var(--green); margin-top:3px; }
.mk-chart { border:1px solid var(--hairline); border-radius:12px; padding:14px; }
.mk-ct { font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
.mk-bars { display:flex; align-items:flex-end; gap:5px; height:96px; margin-top:12px; }
.mk-b { flex:1; position:relative; border-radius:4px 4px 0 0; background:var(--solar); min-height:8px; display:flex; align-items:flex-end; }
.mk-b i { display:block; width:100%; border-radius:4px 4px 0 0; background:var(--logo-blue); }
.mk-legend { display:flex; gap:16px; margin-top:11px; }
.mk-legend span { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-2); }
.mk-legend i { width:12px; height:3px; border-radius:2px; }
.mk-legend .lg-a { background:var(--solar); }
.mk-legend .lg-b { background:var(--logo-blue); }
.mk-rows { display:flex; flex-direction:column; gap:8px; }
.mk-row { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12.5px; color:var(--ink-2); padding:10px 12px; background:var(--surface-2); border-radius:9px; }
.mk-row strong { color:var(--ink); font-weight:600; }

/* ---- industry panel: case hover ---- */
.ip-side .ip-case:hover { border-color:color-mix(in srgb,var(--accent) 45%,var(--hairline)); }

/* ---- company page: tighter section rhythm ---- */
.about-page .section { padding-block: clamp(26px,3.2vw,48px); }
.about-page .section + .section::before { margin-bottom: clamp(16px,2vw,24px); }
.about-page .sec-head .lead { margin-top:14px; }

/* ---- platform hero note sits inside the blue area ---- */
.plat-hero-note-in { border-top:none; padding-top:0; margin-top:16px; }
/* minimal white intersection under the SPARK band */
.plat-page .spark-sec { padding-bottom: clamp(22px,2.6vw,34px); }
.plat-page .spark-sec + .section { padding-top: clamp(18px,2.2vw,28px); }
.plat-page .spark-sec + .section::before { display:none; }

/* ---- awards: alternate the featured block ---- */
@media (max-width:860px){ .award-list { grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .award-list { grid-template-columns:1fr; } }
.award-feature + .award-feature, .award-feature.is-flip { margin-top:18px; }
.award-feature.is-flip { grid-template-columns:.95fr 1.05fr; }
.award-feature.is-flip .award-photo { order:2; }
.award-feature.is-flip .award-copy { order:1; padding:clamp(24px,3vw,40px) 0 clamp(24px,3vw,40px) clamp(24px,3vw,40px); }
.award-feature.is-flip .award-photo img { object-fit:cover; object-position:center 30%; }
@media (max-width:860px){ .award-feature.is-flip { grid-template-columns:1fr; } .award-feature.is-flip .award-photo { order:1; } .award-feature.is-flip .award-copy { order:2; padding:clamp(22px,3vw,32px); } }

/* ---- SPARK: platform note inside the blue band ---- */
.spark-note { font-size:14.5px; color:var(--ink-2); line-height:1.62; max-width:820px; margin-top:16px; padding:14px 18px; background:rgba(255,255,255,.66); border:1px solid var(--hairline); border-radius:12px; }

/* ---- awards: both featured photos the same height ---- */
.award-photo { min-height:0; height:100%; }
.award-feature, .award-feature.is-flip { align-items:stretch; }
.award-feature .award-photo { aspect-ratio:auto; }
.award-feature .award-photo img { height:100%; max-height:360px; }
@media (max-width:860px){ .award-feature .award-photo img { max-height:300px; } }

/* ---- global: reduce space between sections on every page ---- */
.section { padding-block: clamp(26px,3.2vw,48px); }
.section + .section::before { margin-bottom: clamp(16px,2vw,24px); }
.sec-head .lead { margin-top:14px; }

/* ---- narrow-width overflow fixes (320–420px) ---- */
/* grid tracks must be allowed to shrink below their content's min-content width */
.eip-hero-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.02fr); }
@media (max-width:980px){ .eip-hero-grid { grid-template-columns: minmax(0,1fr); } }
.mk-win, .mk-body, .mk-kpis, .mk-chart { min-width:0; }
@media (max-width:520px){ .mk-kpis { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (max-width:420px){ .mk-kpis { grid-template-columns: minmax(0,1fr); } }

/* ---- responsive grids previously locked by inline styles ---- */
.wwd-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width:860px){ .wwd-grid-3 { grid-template-columns: minmax(0,1fr); } }
.inv-bottom { display:grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap:22px; margin-top:48px; }
@media (max-width:860px){ .inv-bottom { grid-template-columns: minmax(0,1fr); } }
.dl-grid-2 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
@media (max-width:620px){ .dl-grid-2 { grid-template-columns: minmax(0,1fr); } }
.contact-grid { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,64px); margin-top:20px; align-items:start; }
@media (max-width:860px){ .contact-grid { grid-template-columns: minmax(0,1fr); } }
.contact-fields { margin-top:20px; display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:14px; }
@media (max-width:520px){ .contact-fields { grid-template-columns: minmax(0,1fr); } }
/* buttons must never force the page wider than the viewport */
@media (max-width:420px){ .btn { max-width:100%; white-space:normal; text-align:center; } }

/* ---- contact form: required markers + invalid state ---- */
.req { color:#C23A26; font-weight:700; }
.opt { font-style:normal; font-weight:600; color:var(--ink-3); opacity:.85; }
.field-l input.invalid, .field-l select.invalid, .field-l textarea.invalid { border-color:#D9503B !important; box-shadow:0 0 0 3px rgba(217,80,59,.14); }

/* ---- segment leader icons ---- */
.tm-row { gap:14px 22px; }
.tm-item { gap:10px; align-items:center; }
.tm-ic { flex:none; width:26px; height:26px; display:grid; place-items:center; color:var(--accent); opacity:1; }
.tm-ic svg { width:20px; height:20px; }
.tm-item svg { color:var(--accent); opacity:1; }

/* ---- client-supplied chart images ---- */
/* the two sources have different aspect ratios, so pin a shared box and letterbox
   inside it (both have white backgrounds) — keeps the captions on one baseline */
.chart-img { margin:0; display:flex; flex-direction:column; flex:1; min-height:0; }
.chart-img img { display:block; width:100%; height:auto; border:1px solid var(--hairline); border-radius:14px; background:#fff; }
/* captions pin to the bottom of the equal-height columns, so differing image
   aspect ratios can't knock them out of alignment */
.chart-img figcaption { font-size:13px; color:var(--ink-3); line-height:1.55; margin-top:auto; padding-top:14px; }
.chart-col { display:flex; flex-direction:column; }

/* ---- segment leaders: even grid so rows align ---- */
.trust-marquee { align-items:flex-start; }
.tm-label { padding-top:6px; }
.tm-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px 20px; }
@media (max-width:1100px){ .tm-row { grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){ .tm-row { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .tm-row { grid-template-columns:repeat(2,1fr); gap:10px 14px; } .tm-item { font-size:13px; } }
.tm-item { align-items:center; line-height:1.35; }

/* ---- Life at Integrum: real photography ---- */
.life-photos { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:14px; margin-top:clamp(20px,2.4vw,32px); }
@media (max-width:900px){ .life-photos { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .life-photos { grid-template-columns:1fr; grid-auto-rows:220px; } }
.life-photo { position:relative; overflow:hidden; border-radius:var(--r-md); background:var(--surface-2); box-shadow:var(--sh-1); }
.life-photo.is-wide { grid-column:span 2; }
.life-photo.is-tall { grid-row:span 2; }
@media (max-width:520px){ .life-photo.is-wide, .life-photo.is-tall { grid-column:auto; grid-row:auto; } }
.life-photo img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.life-photo:hover img { transform:scale(1.05); }
.lp-cap { position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:2px; padding:26px 14px 12px; font-size:12px; color:rgba(255,255,255,.86); line-height:1.35; background:linear-gradient(180deg, transparent, rgba(6,20,36,.82)); }
.lp-cap strong { font-family:var(--font-display); font-weight:600; font-size:14px; color:#fff; letter-spacing:-.01em; }

/* ---- Life at Integrum: complete the tiling (no empty cells) ---- */
/* 4 columns: row1 = wide(2) + tall(1, spans 2 rows) + gptw(1); row2 = hackathon wide(2) + [tall continues] + gptw? */
.life-photos { grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; }
.life-photo.is-wide { grid-column:span 2; }
.life-photo.is-tall { grid-row:span 2; }
/* placeholder row: 4 columns so 8 labels make two even rows */
.life-grid { grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .life-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .life-grid { grid-template-columns:1fr 1fr; } }

/* ---- Life at Integrum: 3-col grid tiles exactly (wide=2 + tall=2rows + 2 singles = 6 cells) ---- */
.life-photos { grid-template-columns:repeat(3,1fr); grid-auto-rows:200px; }
@media (max-width:900px){ .life-photos { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .life-photos { grid-template-columns:1fr; } }
/* 6 placeholder labels → two even rows of 3 */
.life-grid { grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .life-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .life-grid { grid-template-columns:1fr 1fr; } }

/* ---- Life at Integrum: 8 photos = 1 wide + 7 singles = 9 cells over 3 rows ---- */
.life-photo.is-tall { grid-row:auto; }
@media (max-width:900px){ .life-photo.is-wide { grid-column:span 2; } }
@media (max-width:520px){ .life-photo.is-wide { grid-column:auto; } }

/* ---- Life at Integrum: tablet — no spans, so 8 photos make 4 even rows of 2 ---- */
@media (max-width:900px){
  .life-photos { grid-template-columns:1fr 1fr; }
  .life-photo.is-wide { grid-column:auto; }
  /* 3 placeholder labels stay on one even row until single-column */
  .life-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:520px){
  .life-photos { grid-template-columns:1fr; }
  .life-grid { grid-template-columns:1fr; }
}

/* ---- leader cards fill their grid row (stretch stops at the Reveal wrapper) ---- */
.leader-grid > * { display:flex; }
.leader-card { height:100%; }

/* ---- leads endpoint setup panel ---- */
.lead-setup { margin-top:22px; max-width:820px; background:#fff; border:1px solid var(--hairline); border-left:3px solid #D9503B; border-radius:var(--r-lg); padding:22px 24px; box-shadow:var(--sh-1); }
.lead-setup.is-live { border-left-color:var(--green); }
.ls-head { display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--ink); }
.ls-dot { width:9px; height:9px; border-radius:50%; background:#D9503B; flex:none; }
.ls-dot.on { background:var(--green); }
.ls-p { font-size:14px; color:var(--ink-2); line-height:1.6; margin-top:10px; }
.ls-p code, .ls-warn code { font-size:12.5px; background:var(--surface-2); border:1px solid var(--hairline); border-radius:5px; padding:2px 6px; }
.ls-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.ls-input { flex:1 1 340px; min-width:0; padding:12px 14px; border-radius:11px; border:1px solid var(--hairline-2); background:var(--surface); color:var(--ink); font-family:var(--font-sans); font-size:14.5px; outline:none; }
.ls-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--amber-soft); }
.ls-warn { font-size:13px; color:var(--ink-2); line-height:1.7; margin-top:14px; padding-top:14px; border-top:1px dashed var(--hairline-2); }
.ls-code { display:inline-block; margin-top:6px; }

/* ---- endpoint panel: unverified state ---- */
.lead-setup.is-unproven { border-left-color:var(--solar-deep); }
.ls-dot.warn { background:var(--solar-deep); }

/* ---- three-chart row ---- */
.chart-trio { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
@media (max-width:1080px){ .chart-trio { grid-template-columns:1fr 1fr; } }
@media (max-width:720px){ .chart-trio { grid-template-columns:1fr; } }
.chart-svg svg { display:block; width:100%; height:auto; border:1px solid var(--hairline); border-radius:14px; background:#fff; }
.sc-ax { font-family:var(--font-sans); font-size:11px; fill:var(--ink-3); }
.sc-cap { font-family:var(--font-sans); font-size:10.5px; fill:var(--ink-3); }
.sc-legend { display:flex; gap:18px; margin-top:10px; }
.sc-legend span { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-2); }
.sc-legend i { width:12px; height:12px; border-radius:3px; }

/* seasonal chart: mark it as an indicative shape, not measured data */
.sc-illus { margin-left:auto; font-size:11.5px; font-weight:600; color:#7A5A02; background:var(--solar-soft); border:1px solid color-mix(in srgb,var(--solar) 42%,transparent); border-radius:999px; padding:3px 10px; }
.sc-legend { align-items:center; }
/* Separate grids can't share rows, so instead pin the MEDIA to one height:
   equal media + equal legend space ⇒ caption tops line up in all three columns. */
.chart-trio .chart-img { display:flex; flex-direction:column; }
.chart-trio .chart-img > img, .chart-trio .chart-img > svg { height:196px; width:100%; object-fit:contain; background:#fff; }
/* Every column reserves an identical, explicitly-sized legend slot — the two
   image figures get an empty spacer of the same height — so caption tops align
   no matter how the legend text changes or wraps. */
.chart-trio .chart-img > figcaption { margin-top:14px; }
.sc-legend .sc-illus { color:#7A5A02; }

/* real dashboard capture inside the window chrome */
.mk-shot { background:#0B1220; padding:10px; }
.mk-shot img { display:block; width:100%; height:auto; border-radius:8px; }

/* dashboard capture: readable legend in HTML, click to enlarge */
.mk-shot { display:block; width:100%; padding:10px; background:#0B1220; border:none; position:relative; cursor:zoom-in; }
.mk-shot img { display:block; width:100%; height:auto; border-radius:8px; }
.mk-zoom { position:absolute; right:16px; top:16px; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:#fff; background:rgba(11,18,32,.72); border:1px solid rgba(255,255,255,.24); border-radius:999px; padding:5px 11px; opacity:0; transition:opacity .18s; }
.mk-shot:hover .mk-zoom { opacity:1; }
.mk-leg { display:flex; flex-wrap:wrap; gap:8px 16px; padding:14px 16px; background:#fff; border-top:1px solid var(--hairline); }
.mk-leg span { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-2); }
.mk-leg i { width:11px; height:11px; border-radius:3px; flex:none; }
/* lightbox */
.shot-lb { position:fixed; inset:0; z-index:200; background:rgba(6,14,26,.88); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:grid; place-items:center; padding:clamp(16px,4vw,56px); cursor:zoom-out; animation:pageIn .2s ease; }
.shot-lb figure { margin:0; max-width:1400px; width:100%; cursor:default; }
.shot-lb img { display:block; width:100%; height:auto; border-radius:12px; box-shadow:0 40px 90px rgba(0,0,0,.6); }
.shot-lb figcaption { color:#B9CDDE; font-size:13px; text-align:center; margin-top:14px; }
.shot-lb-x { position:absolute; top:18px; right:18px; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); cursor:pointer; }
.shot-lb-x:hover { background:rgba(255,255,255,.22); }

/* give the analytics capture more of the row, and make Enlarge always visible */
.eip-hero-grid { grid-template-columns:0.86fr 1.14fr; }
@media (max-width:980px){ .eip-hero-grid { grid-template-columns:1fr; } }
.mk-zoom { opacity:1; }

.sc-dash { width:14px; height:0; border-top:2.5px dashed #1F8F63; border-radius:0; background:none !important; }

/* shared legend-slot height for the three-chart row */
.chart-trio { --legend-h:48px; }
@media (max-width:1080px){ .chart-trio { --legend-h:26px; } }
.sc-legend { flex-wrap:wrap; }
/* dashed "Your demand" chip, centred against the solid swatches */
.sc-legend .sc-dash { width:14px; height:12px; border:none; background:none; position:relative; }
.sc-legend .sc-dash::after { content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); border-top:2.5px dashed #1F8F63; }

/* dense packing so a wide tile landing in column 3 can't leave a blank cell */
.life-photos { grid-auto-flow: dense; }

/* legend drawn inside the seasonal plot, mirroring the cost chart's own key */
.sc-key text { font-family:var(--font-sans); font-size:11.5px; font-weight:600; fill:var(--ink-2); }
.sc-key text.sc-unit { font-weight:500; fill:var(--ink-3); font-size:10.5px; }

/* ---- certifications: certificate shown in place, not as a download ---- */
.cert-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:clamp(24px,3vw,38px); }
@media (max-width:760px){ .cert-row { grid-template-columns:1fr; } }
.cert-card { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1); display:flex; flex-direction:column; }
.cert-shot { background:var(--surface-2); border-bottom:1px solid var(--hairline); padding:18px; display:flex; justify-content:center; }
.cert-shot img { display:block; width:100%; max-width:340px; height:auto; border:1px solid var(--hairline); border-radius:8px; box-shadow:var(--sh-1); background:#fff; }
.cert-shot.is-empty { min-height:280px; align-items:center; border-bottom-style:dashed; }
.cert-ph { display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--ink-3); }
.cert-ph em { font-style:normal; font-size:13px; font-weight:600; }
.cert-meta { padding:20px 22px 22px; }
.cert-meta h4 { font-size:17.5px; letter-spacing:-.015em; }
.cert-meta p { font-size:13.5px; color:var(--ink-2); margin-top:6px; line-height:1.5; }

/* ---- open roles: actions + expandable job description ---- */
.role-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; flex:none; }
.role-jd-btn { white-space:nowrap; }
@media (max-width:600px){ .role-actions { width:100%; } .role-actions .btn { flex:1 1 auto; justify-content:center; } }
.role-jd { margin-top:0; padding:24px 26px 26px; background:var(--surface-2); border:1px solid var(--hairline); border-top:none; border-radius:0 0 var(--r-lg) var(--r-lg); }
.jd-meta { display:inline-flex; align-items:baseline; gap:8px; font-size:12.5px; color:var(--ink-3); margin-bottom:12px; }
.jd-meta strong { color:var(--ink); font-weight:600; }
.jd-purpose { font-size:15px; color:var(--ink-2); line-height:1.65; padding-left:14px; border-left:3px solid var(--solar); }
.jd-block { margin-top:20px; }
.jd-block h5 { font-family:var(--font-sans); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); margin:0 0 10px; }
.jd-block ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.jd-block li { display:flex; align-items:flex-start; gap:9px; font-size:14.5px; color:var(--ink-2); line-height:1.5; }
.jd-block li svg { flex:none; margin-top:3px; color:var(--green); }
.jd-cols { display:grid; grid-template-columns:1.25fr .75fr; gap:24px; }
@media (max-width:760px){ .jd-cols { grid-template-columns:1fr; gap:0; } }
.jd-chips { display:flex; flex-wrap:wrap; gap:8px; }
.jd-chips span { font-size:12.5px; font-weight:600; color:var(--ink-2); background:#fff; border:1px solid var(--hairline-2); border-radius:999px; padding:6px 12px; }
.jd-profile { margin-top:20px; background:#fff; border:1px solid var(--hairline); border-radius:var(--r-md); padding:18px 20px; }
.jd-profile-k { display:block; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--solar-deep); }
.jd-profile p { font-size:14.5px; color:var(--ink-2); line-height:1.6; margin-top:8px; }
.jd-pending { font-size:13px; color:var(--ink-3); margin-top:18px; font-style:italic; }
.role-card:has(+ .role-jd) { border-radius:var(--r-lg) var(--r-lg) 0 0; }

/* ---- platform hero: chart alongside the copy ---- */
.plat-hero-grid { display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(26px,3.4vw,54px); align-items:center; }
@media (max-width:1000px){ .plat-hero-grid { grid-template-columns:1fr; gap:32px; } }
.plat-hero-shot { min-width:0; }
.phs-win { background:#fff; border:1px solid rgba(255,255,255,.16); border-radius:16px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.42); }
.phs-bar { display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--surface-2); border-bottom:1px solid var(--hairline); }
.phs-bar span { width:9px; height:9px; border-radius:50%; background:var(--hairline-2); }
.phs-bar em { margin-left:8px; font-style:normal; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.phs-img { display:block; width:100%; padding:0; border:none; background:#fff; cursor:zoom-in; position:relative; }
.phs-img img { display:block; width:100%; height:auto; }
.phs-img .mk-zoom { opacity:0; transition:opacity .18s; }
.phs-img:hover .mk-zoom { opacity:1; }
.phs-note { display:block; font-size:11.5px; color:#9FC1DC; margin-top:9px; }

/* ============================================================
   Investor relations — styles from the client's investor build
   ============================================================ */
.ir-subnav { display:flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.ir-subnav a { font-size: 14px; font-weight: 600; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--hairline-2); color: var(--ink-2); transition: .15s; }
.ir-subnav a:hover { border-color: var(--p-color); color: var(--ink); }
.ir-subnav a.active { background: var(--p-color); color: #fff; border-color: var(--p-color); }
.ir-sidebar { background: var(--navy); color:#EAF1F8; border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-2); position: relative; overflow: hidden; }
.ir-sidebar::before { content:""; position:absolute; inset:0; background: radial-gradient(90% 70% at 100% 0, rgba(62,111,214,.28), transparent 60%); }
.ir-sidebar h4 { color:#fff; position: relative; font-size: 19px; }
.ir-input { width:100%; padding: 13px 14px; border-radius: 11px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color:#fff; font-family: var(--font-sans); font-size: 15px; margin-top: 14px; outline: none; position: relative; }
.ir-input::placeholder { color: #7E97B0; }
/* ===== form validation (login/signup/forgot + contact) ===== */
.login-form input.invalid, .field input.invalid, .ir-input.invalid, .cform-field input.invalid, .cform-field select.invalid, .cform-field textarea.invalid { border-color: #D9503B; box-shadow: 0 0 0 3px rgba(217,80,59,.14); }
/* ===== ir.css ===== */
/* ============================================================
   ir.css — Investor Relations components
   Loaded after pages.css. Uses only existing design tokens from
   styles.css, so the Tweaks panel keeps recolouring everything.
   ============================================================ */

/* ---------- demo-content banner ---------- */
.ir-demo-note {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--solar-soft); border: 1px solid rgba(224,180,0,.45);
  color: #5A4600; border-radius: var(--r-md);
  padding: 13px 16px; margin: 18px 0 4px; font-size: 13.5px; line-height: 1.5;
}
.ir-demo-note svg { flex: none; margin-top: 2px; }
.ir-demo-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  background: rgba(255,255,255,.6); padding: 1px 5px; border-radius: 5px;
}
/* ---------- section heading inside a route ---------- */
.ir-h3 {
  font-family: var(--font-display); font-size: 22px; letter-spacing: -.02em;
  margin: 40px 0 14px;
}
/* ---------- inner group tabs ---------- */
.ir-tabs {
  display: flex; gap: 22px; flex-wrap: wrap;
  border-bottom: 1px solid var(--hairline); margin: 22px 0 0;
}
.ir-tabs button {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: 14.5px; font-weight: 600;
  color: var(--ink-3); padding: 0 0 12px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; transition: .15s;
}
.ir-tabs button:hover { color: var(--ink); }
.ir-tabs button.active { color: var(--p-color); border-bottom-color: var(--p-color); }
/* ---------- full-width card on the snapshot ---------- */
.ir-wide-card { margin-top: 26px; }
/* ---------- explanatory note under a group tab ---------- */
.ir-note {
  max-width: 720px; margin: 18px 0 -4px;
  font-size: 14px; line-height: 1.55; color: var(--ink-3);
}
/* ---------- filter bar ---------- */
.ir-filterbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 22px;
}
.ir-select {
  appearance: none; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600;
  color: var(--ink-2); background: var(--surface); cursor: pointer;
  border: 1px solid var(--hairline-2); border-radius: 999px;
  padding: 9px 34px 9px 15px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236C7E90' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.ir-select:hover { border-color: var(--p-color); }
.ir-searchwrap {
  display: inline-flex; align-items: center; gap: 8px; flex: 1 1 220px; max-width: 320px;
  background: var(--surface); border: 1px solid var(--hairline-2); border-radius: 999px;
  padding: 0 13px; color: var(--ink-3);
}
.ir-searchwrap:focus-within { border-color: var(--p-color); }
.ir-search {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font-family: var(--font-sans); font-size: 14px; color: var(--ink);
  padding: 9px 0;
}
.ir-clear {
  appearance: none; border: 0; background: none; cursor: pointer;
  color: var(--ink-3); display: inline-flex; padding: 2px;
}
.ir-clear:hover { color: var(--ink); }
.ir-count { font-size: 13px; color: var(--ink-3); margin-left: auto; }
/* ---------- document list ---------- */
.ir-doclist { list-style: none; margin: 16px 0 0; padding: 0;
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--sh-1); overflow: hidden; }
.ir-doc-row {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 26px minmax(0,1fr) 108px 104px 34px;
  padding: 15px 20px; border-top: 1px solid var(--hairline);
  transition: background .15s;
}
.ir-doc-row:first-child { border-top: 0; }
.ir-doc-row:hover { background: var(--surface-2); }
.ir-doc-row .dl-ico { display: inline-flex; color: var(--p-color); }
.ir-doc-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ir-doc-row .dt {
  font-size: 15px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ir-doc-tag {
  flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--p-color); background: var(--accent-soft);
  border-radius: 999px; padding: 2px 8px;
}
.ir-doc-date { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.ir-doc-row .dm { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.ir-doc-row .dl-arrow {
  display: inline-flex; justify-content: center; color: var(--ink-3);
  border-radius: 8px; padding: 6px; transition: .15s;
}
.ir-doc-row .dl-arrow:hover { color: var(--p-color); background: var(--accent-soft); }
.ir-doc-row.locked { background: repeating-linear-gradient(135deg, transparent, transparent 9px, rgba(1,73,118,.022) 9px, rgba(1,73,118,.022) 18px); }
.ir-doc-row.locked .dt, .ir-doc-row.locked .dl-ico { color: var(--ink-3); font-weight: 500; }
.ir-lock {
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  color: var(--ink-3); border: 1px dashed var(--hairline-2);
  border-radius: 999px; padding: 3px 10px; justify-self: end;
}
@media (max-width: 860px) {
  .ir-doc-row { grid-template-columns: 26px minmax(0,1fr) 34px; row-gap: 6px; }
  .ir-doc-row .dt { white-space: normal; }
  .ir-doc-date { grid-column: 2; font-size: 12.5px; }
  .ir-doc-row .dm { grid-column: 2; grid-row: 3; }
  .ir-lock { grid-column: 2; justify-self: start; }
}
.ir-loadmore { margin-top: 16px; }
.ir-empty {
  margin-top: 16px; padding: 34px 24px; text-align: center;
  border: 1px dashed var(--hairline-2); border-radius: var(--r-md);
  color: var(--ink-3); font-size: 14.5px; background: var(--surface);
}
/* ---------- tables (asset register, disclosures, matrix, key-value) ---------- */
.ir-table-wrap {
  margin-top: 18px; overflow-x: auto;
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--sh-1);
}
.ir-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ir-table th {
  text-align: left; font-family: var(--font-sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
  padding: 14px 18px; border-bottom: 1px solid var(--hairline); white-space: nowrap;
}
.ir-table td { padding: 14px 18px; border-top: 1px solid var(--hairline); color: var(--ink-2); vertical-align: top; }
.ir-table tbody tr:first-child td { border-top: 0; }
.ir-table tbody tr:hover { background: var(--surface-2); }
.ir-table td b { color: var(--ink); font-weight: 600; }
.ir-table .sr { width: 46px; color: var(--ink-3); }
.ir-table .rt { text-align: right; }
.ir-table .ctr { text-align: center; }
.ir-link {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  color: var(--p-color); font-weight: 600; cursor: pointer;
}
.ir-link:hover { text-decoration: underline; }
/* key-value table inside a snap-card */
.ir-table.ir-kv { margin-top: 14px; font-size: 14px; }
.ir-table.ir-kv td { padding: 11px 0; }
.ir-table.ir-kv td.rt { font-weight: 600; color: var(--ink); font-family: var(--font-display); }
/* committee matrix */
.ir-matrix .mk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 12px; font-weight: 700; font-family: var(--font-display);
  background: var(--accent-soft); color: var(--p-color);
}
.ir-matrix .mk.chair { background: var(--p-color); color: #fff; }
.ir-matrix .mk.none { background: none; color: var(--ink-3); font-weight: 400; }
.ir-legend { display: flex; gap: 18px; margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.ir-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ir-legend i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; font-style: normal;
  font-size: 11px; font-weight: 700; background: var(--accent-soft); color: var(--p-color);
}
.ir-legend i.chair { background: var(--p-color); color: #fff; }
/* ---------- board cards ---------- */
.ir-people { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 24px; }
@media (max-width: 900px) { .ir-people { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .ir-people { grid-template-columns: minmax(0,1fr); } }
.ir-person {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sh-1);
}
.ir-person.ph { background: none; border-style: dashed; box-shadow: none; }
.ir-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; margin-bottom: 14px;
  background: var(--accent-soft); color: var(--p-color);
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .02em;
}
.ir-person.ph .ir-avatar { background: var(--hairline); color: var(--ink-3); }
.ir-person-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.ir-person.ph .ir-person-name { color: var(--ink-3); }
.ir-person-role { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; }
.ir-tag {
  display: inline-block; margin-top: 12px; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px;
  background: var(--hairline); color: var(--ink-2);
}
.ir-tag.t-independent { background: var(--green-soft); color: #12704F; }
.ir-tag.t-executive { background: var(--accent-soft); color: var(--p-color); }
.ir-person-bio { font-size: 13.5px; color: var(--ink-3); line-height: 1.55; margin: 12px 0 0; }
/* ---------- snapshot: jump-into-the-library cards ---------- */
.ir-jump { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 20px; }
@media (max-width: 900px) { .ir-jump { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .ir-jump { grid-template-columns: minmax(0,1fr); } }
.ir-jump-card {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 20px; box-shadow: var(--sh-1);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.ir-jump-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--p-color); }
.ir-jump-head { display: flex; align-items: center; gap: 11px; }
.ir-jump-head .dl-ico { display: inline-flex; color: var(--p-color); }
.ir-jump-head .dt { font-size: 16px; font-weight: 600; font-family: var(--font-display); }
.ir-jump-head .dl-arrow { margin-left: auto; color: var(--ink-3); display: inline-flex; }
.ir-jump-card:hover .dl-arrow { color: var(--p-color); }
.ir-jump-sub { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
.ir-jump-n { font-size: 12.5px; color: var(--ink-2); font-weight: 600; margin-top: auto; padding-top: 6px; }
/* ---------- bottom rail: IR contact card ---------- */
.ir-rail { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: stretch; }
@media (max-width: 860px) { .ir-rail { grid-template-columns: minmax(0,1fr); } }
.ir-contact {
  height: 100%; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-1);
}
.ir-contact h4 { font-size: 19px; margin: 0 0 14px; }
.ir-contact-row { display: block; font-size: 14.5px; color: var(--ink); margin-top: 6px; }
.ir-contact-row.muted { color: var(--ink-3); }

/* ---- company timeline: milestone detail ---- */
.tl-d { display:block; font-size:13.5px; color:var(--ink-2); line-height:1.55; margin-top:6px; }

/* ---- Life at Integrum: group photos need height, not width, or faces get cropped ---- */
.life-photo.is-tall { grid-row: span 2; }
@media (max-width:900px){ .life-photo.is-tall { grid-row: span 2; } }
@media (max-width:520px){ .life-photo.is-tall { grid-row: auto; } }

/* ---- Contact: keep the copy top-aligned with the form card. pages.css sets
   .lane-hero{align-items:center} and loads later, so the left column drifted
   downward whenever selecting Talent/careers made the form taller. ---- */
.lane-hero.contact-grid { align-items: start; }

/* Solutions hero: keep the copy top-aligned with the technologies card so the
   card growing (e.g. a 4th technology) never opens a gap above the eyebrow. */
.lane-hero:has(.tech-teaser) { align-items: start; }

/* ============================================================
   Company timeline — alternating spine. One line per milestone;
   the detail reveals on hover / focus so the rail stays scannable.
   ============================================================ */
.tline { position:relative; margin-top:clamp(26px,3vw,42px); padding-block:6px; }
.tline-spine { position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, var(--hairline-2) 6%, var(--hairline-2) 94%, transparent); }
.tline-row { position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:0; margin-bottom:14px; }
.tline-row:last-child { margin-bottom:0; }
.tline-row > * { grid-row:1; }
.tline-node { grid-column:2; display:grid; place-items:center; width:72px; }
.tline-year { position:relative; z-index:2; font-family:var(--font-display); font-weight:700; font-size:13.5px;
  color:var(--logo-blue); background:#fff; border:2px solid var(--solar); border-radius:999px;
  padding:7px 13px; letter-spacing:-.01em; box-shadow:0 2px 10px rgba(11,32,56,.08); white-space:nowrap; }
.tline-card { position:relative; background:#fff; border:1px solid var(--hairline); border-radius:14px;
  padding:16px 20px; box-shadow:var(--sh-1); transition:transform .2s, box-shadow .2s, border-color .2s; }
.tline-row.is-left  .tline-card { grid-column:1; margin-right:18px; text-align:right; }
.tline-row.is-right .tline-card { grid-column:3; margin-left:18px; }
/* connector from card to spine */
.tline-card::after { content:""; position:absolute; top:50%; width:18px; height:2px; background:var(--hairline-2); }
.tline-row.is-left  .tline-card::after { right:-18px; }
.tline-row.is-right .tline-card::after { left:-18px; }
.tline-k { display:block; font-family:var(--font-display); font-weight:600; font-size:16.5px;
  letter-spacing:-.015em; color:var(--ink); line-height:1.25; }
/* detail: collapsed by default, revealed on hover or keyboard focus */
.tline-d { display:block; font-size:13.5px; color:var(--ink-2); line-height:1.55;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .34s cubic-bezier(.2,.7,.2,1), opacity .24s ease, margin-top .34s cubic-bezier(.2,.7,.2,1); }
.tline-card.has-more { cursor:default; }
.tline-card.has-more::before { content:""; position:absolute; top:14px; width:5px; height:5px; border-radius:50%;
  background:var(--solar); opacity:.85; }
.tline-row.is-left  .tline-card.has-more::before { left:12px; }
.tline-row.is-right .tline-card.has-more::before { right:12px; }
.tline-card:hover, .tline-card:focus-visible { transform:translateY(-2px); box-shadow:var(--sh-2);
  border-color:color-mix(in srgb, var(--accent) 40%, var(--hairline)); outline:none; }
.tline-card:hover .tline-d, .tline-card:focus-visible .tline-d { max-height:200px; opacity:1; margin-top:8px; }
.tline-row:hover .tline-year { border-color:var(--accent); }
/* single-column below tablet: spine to the left, everything reads top-down */
@media (max-width:820px){
  .tline-spine { left:26px; }
  .tline-row { grid-template-columns:auto 1fr; margin-bottom:12px; }
  .tline-node { grid-column:1; width:52px; justify-items:start; }
  .tline-year { font-size:12.5px; padding:6px 10px; }
  .tline-row.is-left .tline-card, .tline-row.is-right .tline-card {
    grid-column:2; margin:0 0 0 18px; text-align:left; }
  .tline-row.is-left .tline-card::after, .tline-row.is-right .tline-card::after { left:-18px; right:auto; }
  .tline-row.is-left .tline-card.has-more::before,
  .tline-row.is-right .tline-card.has-more::before { left:auto; right:12px; }
  /* touch: no hover, so always show the detail */
  .tline-d { max-height:200px; opacity:1; margin-top:8px; }
}
@media (hover:none){ .tline-d { max-height:200px; opacity:1; margin-top:8px; } }

/* ============================================================
   Company page — infographic layouts replacing card grids
   ============================================================ */

/* Values → numbered ledger. Rows, not cards: the numbering carries
   the structure so the section reads as one list. */
.val-ledger { list-style:none; margin:clamp(18px,2.2vw,28px) 0 0; padding:0;
  border-top:2px solid var(--logo-blue); }
.val-ledger li { display:grid; grid-template-columns:auto minmax(180px,.9fr) 1.6fr; gap:clamp(14px,2.4vw,34px);
  align-items:baseline; padding:20px 4px; border-bottom:1px solid var(--hairline); transition:background .18s; }
.val-ledger li:hover { background:var(--amber-soft); }
.vl-n { font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.2vw,28px);
  color:var(--solar-deep); line-height:1; letter-spacing:-.02em; min-width:2.2ch; }
.vl-k { font-family:var(--font-display); font-weight:600; font-size:clamp(16px,1.6vw,19px);
  letter-spacing:-.015em; color:var(--ink); line-height:1.25; }
.vl-d { font-size:14.5px; color:var(--ink-2); line-height:1.6; }
@media (max-width:760px){
  .val-ledger li { grid-template-columns:auto 1fr; row-gap:6px; }
  .vl-d { grid-column:2; }
}

/* How we're different → chevron flow, reading left to right */
.diff-flow { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:clamp(22px,2.6vw,36px); }
@media (max-width:1000px){ .diff-flow { grid-template-columns:1fr 1fr; gap:14px; } }
@media (max-width:560px){ .diff-flow { grid-template-columns:1fr; } }
.diff-chev { position:relative; background:linear-gradient(178deg,#fff,var(--surface-2));
  border:1px solid var(--hairline); padding:22px 24px 22px 26px;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
  transition:transform .2s, background .2s; }
.diff-chev:first-child { clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); padding-left:22px; }
.diff-chev:last-child  { clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%); }
.diff-chev:hover { transform:translateY(-3px); background:linear-gradient(178deg,var(--amber-soft),#fff); }
.dc-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dc-ico { width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  color:var(--accent-deep); background:var(--amber-soft); }
.dc-n { font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--hairline-2); }
.diff-chev h4 { font-size:16.5px; letter-spacing:-.015em; line-height:1.24; margin-top:14px; }
.diff-chev p { font-size:13.5px; color:var(--ink-2); line-height:1.55; margin-top:8px; }
@media (max-width:1000px){
  .diff-chev, .diff-chev:first-child, .diff-chev:last-child {
    clip-path:none; border-radius:var(--r-md); padding:22px 24px; }
}

/* Operating principles → definition rows against a rule, not tiles */
.prin-list { margin:16px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(28px,4vw,56px); }
@media (max-width:820px){ .prin-list { grid-template-columns:1fr; } }
.prin-row { padding:18px 0 18px 20px; border-left:2px solid var(--hairline-2);
  border-bottom:1px solid var(--hairline); transition:border-left-color .2s; }
.prin-row:hover { border-left-color:var(--solar); }
.prin-row dt { font-family:var(--font-display); font-weight:600; font-size:16.5px;
  letter-spacing:-.015em; color:var(--ink); line-height:1.25; }
.prin-row dd { margin:7px 0 0; font-size:14.5px; color:var(--ink-2); line-height:1.6; }

/* ---- platform charts: never upscale past the source's native width, which
   only softens them. Sources are now 985×385 and 975×325, so these caps track
   the real exports; replace the values if higher-resolution files arrive. ---- */
.phs-img img { max-width:985px; width:100%; margin-inline:auto; image-rendering:auto; }
.mk-shot img { max-width:975px; width:100%; margin-inline:auto; image-rendering:auto; }
.phs-img, .mk-shot { display:flex; justify-content:center; background:#fff; }

/* ---- CO2 table footnote ---- */
.co2-star { color:var(--solar-deep); font-weight:700; }
.co2-foot { font-size:12.5px; color:var(--ink-3); margin-top:12px; }

/* ---- platform hero: "quickest to deliver" positioning ---- */
.plat-quickest { margin-top:22px; padding:16px 20px; border-radius:14px; background:rgba(245,184,28,.10); border:1px solid rgba(245,184,28,.34); max-width:600px; }
.pq-badge { display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--solar); }
.plat-quickest p { font-size:14.5px; color:#D8E7F2; line-height:1.6; margin-top:9px; }

/* ---- platform charts: larger, and no dead space above/below ----
   The source charts are wide and short (985×385, 975×325). In a two-column
   grid with align-items:center they sat as a small band with big gaps above
   and below, and were being squeezed into ~48% of the shell. Give the chart
   the larger share of the row and let it fill that width. */
.plat-hero-grid { grid-template-columns:0.84fr 1.16fr; align-items:center; }
.plat-hero-shot .phs-win { width:100%; }
.phs-img img { width:100%; height:auto; display:block; }
.phs-note { margin-top:10px; }
@media (max-width:1000px){ .plat-hero-grid { grid-template-columns:1fr; } }

.eip-hero-grid { grid-template-columns:0.78fr 1.22fr; align-items:center; }
.eip-mock .mk-win { width:100%; }
.mk-shot { padding:6px; }
.mk-shot img { width:100%; height:auto; display:block; }
@media (max-width:980px){ .eip-hero-grid { grid-template-columns:1fr; } }

/* ---- platform hero: close the dead space around the chart ----
   The row height was set by the tall copy column (~800px) while the chart card
   is only ~320px, so align-items:center split ~480px of slack evenly above and
   below it. The CTAs now sit under the chart, which shortens the copy column
   and lengthens the chart column at the same time; the hero's own vertical
   padding is trimmed so the row height sits close to the content height. */
.plat-hero { padding-block: clamp(30px,3.6vw,54px); }
.plat-hero-cta { display:flex; gap:14px; flex-wrap:wrap; margin-top:20px; }
@media (max-width:1000px){ .plat-hero-cta { margin-top:18px; } }

/* ---- investors: operations map beside a state panel ---- */
.geo-split { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(18px,2.6vw,40px); align-items:center; }
@media (max-width:900px){ .geo-split { grid-template-columns:1fr; gap:22px; } }
.geo-map-col { min-width:0; }
.geo-state-col { display:flex; flex-direction:column; gap:14px; min-width:0; }
.geo-state { padding:14px 16px; border:1px solid rgba(255,255,255,.13); border-radius:13px; background:rgba(255,255,255,.04); transition:background .2s, border-color .2s; }
.geo-state:hover { background:rgba(255,255,255,.08); border-color:color-mix(in srgb, var(--gc) 55%, transparent); }
.gs-main { display:flex; align-items:baseline; gap:10px; }
.gs-dot { width:9px; height:9px; flex:none; border-radius:50%; background:var(--gc); box-shadow:0 0 12px var(--gc); align-self:center; }
.gs-name { font-family:var(--font-display); font-weight:600; font-size:16.5px; color:#EAF2F8; letter-spacing:-.01em; }
.gs-n { margin-left:auto; font-family:var(--font-display); font-weight:700; font-size:20px; color:#fff; letter-spacing:-.02em; }
.gs-n em { font-style:normal; font-family:var(--font-sans); font-weight:600; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#8FB0CC; margin-left:6px; }
.gs-track { height:4px; border-radius:3px; background:rgba(255,255,255,.10); margin-top:11px; overflow:hidden; }
.gs-track > span { display:block; height:100%; border-radius:3px; background:var(--gc); }
.geo-state-foot { display:flex; gap:12px; align-items:flex-start; padding-top:14px; border-top:1px solid rgba(255,255,255,.12); }
.gsf-ic { flex:none; color:var(--solar); margin-top:1px; }
.geo-state-foot p { font-size:13px; color:#9FC1DC; line-height:1.55; }

/* ============================================================
   Knowledge Hub — articles & insights
   ============================================================ */
.art-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(24px,3vw,38px); }
@media (max-width:900px){ .art-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .art-grid { grid-template-columns:1fr; } }
.art-card { display:flex; flex-direction:column; text-align:left; height:100%; background:#fff; border:1px solid var(--hairline); border-radius:var(--r-lg); padding:26px 24px; box-shadow:var(--sh-1); cursor:pointer; border-top:3px solid var(--solar); transition:transform .2s, box-shadow .2s, border-color .2s; }
.art-card:hover { transform:translateY(-4px); box-shadow:var(--sh-2); }
.art-card-top { display:flex; align-items:center; gap:10px; }
.art-card-part { font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#7A5A02; background:var(--solar-soft); border:1px solid color-mix(in srgb,var(--solar) 42%,transparent); border-radius:999px; padding:5px 11px; }
.art-card-series { font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); }
.art-card h4 { font-size:19px; letter-spacing:-.02em; line-height:1.26; margin-top:16px; }
.art-card p { font-size:14px; color:var(--ink-2); line-height:1.6; margin-top:11px; }
.art-card-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:18px; }
.art-card-read { font-size:12.5px; color:var(--ink-3); }
.art-card-go { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--accent-deep); }
.art-card-go svg { transition:transform .2s; }
.art-card:hover .art-card-go svg { transform:translateX(4px); }

/* ---- article hero ---- */
.art-hero { background:linear-gradient(155deg,#01344f,#012234); color:#EAF2F8; padding-block:clamp(30px,3.6vw,52px) clamp(34px,4vw,58px); position:relative; overflow:hidden; }
.art-hero::before { content:""; position:absolute; inset:0; background:radial-gradient(48% 70% at 88% 0%, rgba(245,184,28,.15), transparent 58%); pointer-events:none; }
.art-hero > .shell { position:relative; z-index:1; }
.art-hero-body { max-width:840px; margin-top:20px; }
.art-series { display:flex; align-items:center; gap:12px; }
.art-series-k { font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--solar); }
.art-series-p { font-size:12px; color:#9FC1DC; }
.art-hero h1 { color:#fff; font-size:clamp(29px,4vw,50px); letter-spacing:-.035em; line-height:1.06; margin-top:14px; }
.art-standfirst { font-size:clamp(16px,1.35vw,19px); color:#B9CDDE; line-height:1.62; margin-top:18px; max-width:720px; }
.art-meta { display:flex; align-items:center; gap:12px; margin-top:20px; font-size:12.5px; color:#8FB0CC; }
.art-meta i { width:4px; height:4px; border-radius:50%; background:var(--solar); }

/* ---- article body ---- */
.art-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(24px,3.4vw,52px); align-items:start; }
@media (max-width:960px){ .art-layout { grid-template-columns:1fr; } }
.art-body { max-width:760px; }
.art-p { font-size:16.5px; color:var(--ink-2); line-height:1.75; margin-top:18px; }
.art-body > .art-p:first-child { margin-top:0; }
.art-h { font-size:clamp(20px,2.1vw,26px); letter-spacing:-.022em; line-height:1.24; margin-top:34px; }
.art-eq { font-family:var(--font-display); font-weight:600; font-size:clamp(14.5px,1.4vw,17px); color:var(--accent-deep); background:var(--amber-soft); border:1px solid color-mix(in srgb,var(--accent) 26%,transparent); border-radius:12px; padding:16px 20px; margin-top:20px; line-height:1.5; }
.art-pull { margin:26px 0 0; padding:20px 24px; border-left:4px solid var(--solar); background:var(--surface-2); border-radius:0 14px 14px 0; font-family:var(--font-display); font-weight:600; font-size:clamp(17px,1.7vw,21px); letter-spacing:-.015em; color:var(--ink); line-height:1.42; }
.art-ul { list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:11px; }
.art-ul li { display:flex; align-items:flex-start; gap:11px; font-size:16px; color:var(--ink-2); line-height:1.6; }
.art-ul li svg { flex:none; margin-top:4px; color:var(--green); }
.art-qh { display:flex; align-items:flex-start; gap:16px; margin-top:38px; padding-top:26px; border-top:1px solid var(--hairline); }
.art-qn { flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:19px; color:#fff; background:var(--logo-blue); }
.art-qh h3 { font-size:clamp(19px,2vw,25px); letter-spacing:-.022em; line-height:1.26; }
.art-shift { display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; margin-top:24px; }
@media (max-width:700px){ .art-shift { grid-template-columns:1fr; } .as-arrow { transform:rotate(90deg); justify-self:center; } }
.as-row { background:#fff; border:1px solid var(--hairline); border-radius:14px; padding:16px 18px; }
.as-row.is-to { border-color:color-mix(in srgb,var(--solar) 55%,transparent); background:var(--solar-soft); }
.as-k { display:block; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.as-row.is-to .as-k { color:#7A5A02; }
.as-row p { font-size:15px; color:var(--ink); line-height:1.5; margin-top:7px; font-weight:500; }
.as-arrow { color:var(--ink-3); display:flex; }

/* ---- comparison table ---- */
.art-table-wrap { margin-top:22px; overflow-x:auto; border:1px solid var(--hairline); border-radius:14px; background:#fff; }
.art-table { width:100%; border-collapse:collapse; font-size:14px; min-width:660px; }
.art-table th { text-align:left; font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#0B2038; background:var(--solar); padding:13px 14px; line-height:1.3; vertical-align:bottom; }
.art-table td { padding:13px 14px; border-bottom:1px solid var(--hairline); color:var(--ink-2); line-height:1.45; }
.art-table tbody tr:last-child td { border-bottom:none; background:var(--amber-soft); font-weight:600; color:var(--ink); }
.art-table .art-td-k { font-weight:600; color:var(--ink); }
.art-table .ta-c { text-align:center; }
.art-table-note { font-size:12px; color:var(--ink-3); padding:11px 14px; border-top:1px solid var(--hairline); }

/* ---- assumptions disclosure ---- */
.art-assum { margin-top:24px; background:var(--surface-2); border:1px solid var(--hairline); border-radius:14px; padding:16px 20px; }
.art-assum summary { cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--accent-deep); }
.art-assum summary::marker { color:var(--solar); }
.art-assum ul { margin:14px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:8px; }
.art-assum li { font-size:13.5px; color:var(--ink-2); line-height:1.6; }

/* ---- next-part CTA ---- */
.art-next { margin-top:32px; padding:22px 24px; border-radius:16px; background:linear-gradient(158deg,#01344f,#012234); color:#B9CDDE; }
.art-next p { font-size:15.5px; line-height:1.62; }
.art-next .btn { margin-top:16px; }
.art-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; padding-top:22px; border-top:1px solid var(--hairline); }
.art-tags span { font-size:12.5px; font-weight:600; color:var(--ink-3); }

/* ---- article sidebar ---- */
.art-side { display:flex; flex-direction:column; gap:16px; position:sticky; top:calc(var(--nav-h) + 18px); }
@media (max-width:960px){ .art-side { position:static; } }
.art-side-card { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-lg); padding:20px; box-shadow:var(--sh-1); }
.asc-k { display:block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; }
.asc-item { display:block; width:100%; text-align:left; background:transparent; border:none; border-left:2px solid var(--hairline-2); padding:10px 0 10px 14px; cursor:pointer; transition:border-color .18s; }
.asc-item:hover { border-left-color:var(--solar); }
.asc-item.is-active { border-left-color:var(--accent); }
.asc-p { display:block; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.asc-item.is-active .asc-p { color:var(--accent-deep); }
.asc-t { display:block; font-size:14px; color:var(--ink-2); line-height:1.4; margin-top:4px; }
.asc-item.is-active .asc-t { color:var(--ink); font-weight:600; }
.art-side-cta { background:var(--amber-soft); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); border-radius:var(--r-lg); padding:22px 20px; }
.art-side-cta h4 { font-size:17px; letter-spacing:-.018em; line-height:1.26; }
.art-side-cta p { font-size:14px; color:var(--ink-2); line-height:1.6; margin-top:9px; }
.art-side-cta .btn { margin-top:16px; width:100%; }

/* ============================================================
   Company page — non-card section treatments
   ============================================================ */


.vmv-purpose p { font-family:var(--font-display); font-weight:400; font-size:clamp(19px,2.3vw,31px); line-height:1.34; letter-spacing:-.022em; color:#fff; margin-top:16px; }
.vmv-purpose em { font-style:normal; color:var(--solar); }

@media (max-width:760px){  }
.vmv-pair .vmv-stmt + .vmv-stmt { padding-left:clamp(24px,3.4vw,58px); border-left:1px solid rgba(255,255,255,.18); }
@media (max-width:760px){ .vmv-pair .vmv-stmt + .vmv-stmt { padding-left:0; border-left:none; padding-top:24px; border-top:1px solid rgba(255,255,255,.18); } }


/* ---- strategic pillars: numbered index, no boxes ---- */
.pillar-index { list-style:none; padding:0; margin:clamp(24px,3vw,40px) 0 0; counter-reset:pil; }
.pil-row { display:grid; grid-template-columns:64px minmax(0,1.05fr) minmax(0,1.6fr); gap:clamp(14px,2.2vw,34px); align-items:baseline; padding:clamp(18px,2.2vw,26px) 0; border-top:1px solid var(--hairline); transition:background .2s; }
.pil-row:last-child { border-bottom:1px solid var(--hairline); }
.pil-row:hover { background:linear-gradient(90deg, var(--amber-soft), transparent 72%); }
.pil-n { font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.4vw,30px); color:var(--solar); letter-spacing:-.02em; line-height:1; }
.pil-row h4 { font-size:clamp(17px,1.8vw,21px); letter-spacing:-.02em; line-height:1.24; }
.pil-row p { font-size:15px; color:var(--ink-2); line-height:1.62; }
@media (max-width:860px){
  .pil-row { grid-template-columns:48px minmax(0,1fr); }
  .pil-row p { grid-column:2; margin-top:8px; }
}

/* ---- Integrum today: inline figures separated by rules ---- */
.today-rule { display:grid; grid-template-columns:repeat(4,1fr); margin-top:clamp(26px,3vw,42px); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
@media (max-width:820px){ .today-rule { grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .today-rule { grid-template-columns:1fr; } }
.today-fig { padding:clamp(22px,2.6vw,32px) clamp(16px,2vw,26px); border-left:1px solid var(--hairline); }
.today-fig:first-child { border-left:none; padding-left:0; }
@media (max-width:820px){
  .today-fig:nth-child(2n+1) { border-left:none; padding-left:0; }
  .today-fig:nth-child(n+3) { border-top:1px solid var(--hairline); }
}
@media (max-width:460px){
  .today-fig { border-left:none; padding-left:0; }
  .today-fig + .today-fig { border-top:1px solid var(--hairline); }
}
.today-fig .today-v { display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(30px,3.6vw,46px); letter-spacing:-.035em; line-height:1; color:var(--logo-blue); }
.today-fig .today-k { display:block; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-top:12px; line-height:1.4; }
.today-fig .today-note { display:block; font-size:12.5px; color:var(--ink-3); margin-top:7px; line-height:1.45; }

/* ---- platform hero: copy column carries the CTAs again ---- */
.plat-hero-grid { align-items:center; }
.plat-hero-cta { display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.plat-quickest { margin-top:22px; max-width:560px; }

/* ---- persona router: fit the columns to the lane count (3 lanes, not 4) ---- */
.prouter-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.prouter-grid:has(> :nth-child(4)) { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px){
  .prouter-grid, .prouter-grid:has(> :nth-child(4)) { grid-template-columns:1fr 1fr; }
}
@media (max-width:540px){
  .prouter-grid, .prouter-grid:has(> :nth-child(4)) { grid-template-columns:1fr; }
}
/* with fewer, wider cards the note no longer needs to crowd the heading row */
.router-head .rh-note { max-width:220px; text-align:right; line-height:1.4; }
@media (max-width:660px){ .router-head .rh-note { max-width:none; text-align:left; } }

/* ---- Integrum today: lead figure + rule-separated stack ---- */
.today-split { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(24px,3.4vw,56px); align-items:stretch; margin-top:clamp(26px,3vw,42px); }
@media (max-width:860px){ .today-split { grid-template-columns:1fr; gap:28px; } }
.today-hero { display:flex; flex-direction:column; justify-content:center; padding:clamp(26px,3vw,38px) clamp(24px,3vw,36px); border-radius:20px; background:linear-gradient(158deg,#01344f,#012234); color:#fff; position:relative; overflow:hidden; }
.today-hero::before { content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 92% 0%, rgba(245,184,28,.20), transparent 60%); pointer-events:none; }
.today-hero > * { position:relative; z-index:1; }
.today-hero-v { font-family:var(--font-display); font-weight:700; font-size:clamp(46px,6.4vw,86px); letter-spacing:-.045em; line-height:.94; color:#fff; }
.today-hero-k { font-size:clamp(14px,1.3vw,17px); font-weight:600; color:var(--solar); margin-top:14px; letter-spacing:.01em; }
.today-hero-n { font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:#9FC1DC; margin-top:8px; }
.today-stack { display:flex; flex-direction:column; justify-content:center; }
.today-line { display:flex; align-items:baseline; gap:clamp(14px,2vw,26px); padding:clamp(15px,1.9vw,22px) 0; border-bottom:1px solid var(--hairline); }
.today-line:first-child { border-top:1px solid var(--hairline); }
.today-line .today-v { flex:none; min-width:clamp(88px,9vw,132px); font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.2vw,40px); letter-spacing:-.032em; line-height:1; color:var(--logo-blue); }
.today-txt { display:flex; flex-direction:column; gap:5px; }
.today-line .today-k { font-size:15px; font-weight:600; color:var(--ink); line-height:1.35; }
.today-line .today-note { font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); line-height:1.4; }

/* units on the today figures — matches how .hsp-v .u and .astat handle them */
.today-hero-u { font-style:normal; font-size:.34em; font-weight:600; color:var(--solar); margin-left:.08em; letter-spacing:-.01em; }
.today-u { font-style:normal; font-size:.42em; font-weight:600; color:var(--solar-deep); margin-left:.06em; letter-spacing:-.01em; }



/* ---- strategic pillars cards ---- */
.pillar-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(28px,3.4vw,44px); }
@media (max-width:900px){ .pillar-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pillar-grid { grid-template-columns:1fr; } }
.pillar-card { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-lg); padding:26px 24px; box-shadow:var(--sh-1); border-top:3px solid var(--solar); transition:transform .2s, box-shadow .2s; }
.pillar-card:hover { transform:translateY(-4px); box-shadow:var(--sh-2); }
.pc-n { display:inline-flex; font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.06em; color:#7A5A02; background:var(--solar-soft); border:1px solid color-mix(in srgb,var(--solar) 42%,transparent); border-radius:999px; padding:5px 11px; }
.pillar-card h4 { font-size:17.5px; letter-spacing:-.018em; line-height:1.26; margin-top:16px; }
.pillar-card p { font-size:14px; color:var(--ink-2); line-height:1.6; margin-top:10px; }

/* ---- purpose / vision / mission: light section, purpose led in brand gold ---- */
.vmv-sec { background:var(--canvas); }
.vmv-lead h2 { font-size:clamp(30px,4.2vw,54px); letter-spacing:-.04em; line-height:1.04; margin-top:14px; color:var(--ink); }
.vmv-hl { color:var(--ink); }
.vmv-grid { display:grid; grid-template-columns:1.12fr 1fr 1fr; gap:18px; margin-top:clamp(26px,3.2vw,42px); }
@media (max-width:900px){ .vmv-grid { grid-template-columns:1fr; } }
.vmv-card { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-lg); padding:28px 26px; box-shadow:var(--sh-1); transition:transform .2s, box-shadow .2s, border-color .2s; }
.vmv-card:hover { transform:translateY(-4px); box-shadow:var(--sh-2); }
/* the purpose card leads in gold rather than navy, so it reads clearly against
   both the dark heading above it and the white cards beside it */
.vmv-card.is-core { background:linear-gradient(158deg, var(--solar-soft), #fff 78%); border-color:color-mix(in srgb,var(--solar) 55%,transparent); border-top:3px solid var(--solar); box-shadow:var(--sh-2); }
.vmv-ic { width:48px; height:48px; border-radius:13px; display:grid; place-items:center; color:var(--accent-deep); background:var(--amber-soft); }
.vmv-card.is-core .vmv-ic { color:#7A5A02; background:#fff; border:1px solid color-mix(in srgb,var(--solar) 45%,transparent); }
.vmv-card h3 { font-size:20px; letter-spacing:-.02em; margin-top:18px; color:var(--ink); }
.vmv-card.is-core h3 { color:var(--accent-deep); }
.vmv-card p { font-size:15px; color:var(--ink-2); line-height:1.66; margin-top:11px; }
.vmv-card.is-core p { color:var(--ink); }