/* ───────────────────────────────────────────────────────────────
   Smart Analytica redesign — Interior page patterns
   Ports the original site's rich sub-page patterns (page-hero,
   breadcrumb, manifest, cap-tile, cert-grid, outcomes, bento, flow,
   stacks, split, code-block, mini-stats) to the light design system.
   Loads after redesign.css (tokens) + nav-hero.css.
─────────────────────────────────────────────────────────────────*/

/* ── Display heading ─────────────────────────────────────── */
.display-sm { font-size: clamp(34px, 4.2vw + 0.5rem, 58px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; color: var(--sa-navy); }
.display-sm .line { display: block; }
.display-sm .em-orange { display: block; color: var(--sa-blue); }

/* ── Page hero (interior) ────────────────────────────────── */
.page-hero { position: relative; overflow: hidden; isolation: isolate; background: #FCFCFD; padding: 56px 0 64px; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(820px 560px at 88% -16%, rgba(13,104,231,0.14), transparent 60%),
    radial-gradient(720px 540px at 12% 120%, rgba(253,92,1,0.11), transparent 58%); }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(3,43,80,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(3,43,80,0.04) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(ellipse at 50% 18%, #000 28%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 18%, #000 28%, transparent 72%); }
.page-hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
@media (max-width: 980px) { .page-hero-inner { grid-template-columns: 1fr; gap: 40px; } }
.page-hero h1 { margin-bottom: 22px; color: var(--sa-navy); }
.page-hero h1 .line { display: block; }
.page-hero h1 .em-orange { display: block; color: var(--sa-blue); }
.page-hero-lead { font-size: clamp(16.5px, 0.5vw + 1rem, 19px); line-height: 1.55; color: var(--sa-fg-2); max-width: 56ch; margin-bottom: 28px; }
.page-hero-lead strong { color: var(--sa-fg-1); font-weight: 600; }
.page-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb { margin-bottom: 28px; font-size: 13px; color: var(--sa-fg-3); letter-spacing: 0.02em; }
.breadcrumb a { color: var(--sa-fg-2); transition: color var(--sa-dur-fast); }
.breadcrumb a:hover { color: var(--sa-blue); }
.breadcrumb .sep { margin: 0 8px; opacity: 0.6; }
.breadcrumb .bc-current { color: var(--sa-orange); font-weight: 700; }

/* ── Section-head center modifier ────────────────────────── */
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }

/* ── Image placeholder ───────────────────────────────────── */
.image-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; background: var(--sa-bg-2); border: 2px dashed rgba(253,92,1,0.4); border-radius: var(--sa-radius-lg); padding: 40px 32px; min-height: 300px; aspect-ratio: 4/3; }
.image-placeholder .ph-label { font-family: var(--sa-font-mono); font-size: 11px; color: var(--sa-orange); letter-spacing: 0.2em; }
.image-placeholder .ph-desc { font-weight: 700; font-size: 17px; color: var(--sa-navy); max-width: 32ch; line-height: 1.4; letter-spacing: -0.01em; }
.image-placeholder .ph-note { font-size: 13px; color: var(--sa-fg-2); font-style: italic; max-width: 38ch; line-height: 1.5; }
.image-placeholder .ph-meta { font-family: var(--sa-font-mono); font-size: 10.5px; color: var(--sa-fg-3); letter-spacing: 0.1em; margin-top: 4px; }

/* ── Manifest (numbered commitments) ─────────────────────── */
.manifest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 820px) { .manifest { grid-template-columns: 1fr 1fr; gap: 12px; } }
@media (max-width: 460px) { .manifest { grid-template-columns: 1fr; } }
.manifest-item { background: #fff; border: 1px solid var(--sa-border); border-radius: var(--sa-radius-md); padding: 30px 26px; box-shadow: var(--sa-shadow-100); }
.manifest-item .mnum { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; color: var(--sa-orange); line-height: 1; margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.manifest-item h3 { font-size: clamp(18px, 4vw, 20px); font-weight: 700; letter-spacing: -0.02em; color: var(--sa-navy); margin: 0 0 12px; }
.manifest-item h3 em { color: var(--sa-blue); font-style: italic; }
.manifest-item p { font-size: 14.5px; line-height: 1.6; color: var(--sa-fg-2); margin: 0; }

/* ── Capability tile ─────────────────────────────────────── */
.cap-tile { background: #fff; border: 1px solid var(--sa-border); border-radius: var(--sa-radius-md); padding: 28px 24px; box-shadow: var(--sa-shadow-100); transition: transform var(--sa-dur-base) var(--sa-ease-out), box-shadow var(--sa-dur-base) var(--sa-ease-out), border-color var(--sa-dur-base) var(--sa-ease-out); }
.cap-tile:hover { }
.cap-tile .ic { width: 44px; height: 44px; border-radius: var(--sa-radius-sm); background: var(--sa-grad-spark); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 16px; letter-spacing: -0.03em; margin-bottom: 18px; }
.cap-tile .ic.alt { background: linear-gradient(135deg, var(--sa-navy), #1E3A5F); }
.cap-tile .ic svg { width: 23px; height: 23px; }
.cap-tile h3 { font-size: clamp(18px, 4vw, 20px); font-weight: 700; letter-spacing: -0.02em; color: var(--sa-navy); margin: 0 0 8px; line-height: 1.2; }
.cap-tile .tagline { color: var(--sa-blue); font-style: italic; font-size: 14px; margin-bottom: 14px; }
.cap-tile ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.cap-tile li { font-size: 13.5px; color: var(--sa-fg-2); line-height: 1.45; padding-left: 16px; position: relative; }
.cap-tile li::before { content: "›"; position: absolute; left: 0; color: var(--sa-orange); font-weight: 700; }
.cap-tile p { font-size: 14px; color: var(--sa-fg-2); line-height: 1.5; }

/* ── Certifications grid ─────────────────────────────────── */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; max-width: 1200px; margin: 0 auto; }
.cert-badge { display: flex; align-items: center; gap: 20px; background: #fff; border: 1px solid var(--sa-border); border-radius: var(--sa-radius-md); padding: 22px 24px; box-shadow: var(--sa-shadow-100); transition: transform var(--sa-dur-base) var(--sa-ease-out), box-shadow var(--sa-dur-base) var(--sa-ease-out); }
.cert-badge:hover { }
.cert-badge img { width: 76px; height: auto; flex-shrink: 0; border-radius: var(--sa-radius-xs); }
.cert-meta { flex: 1; min-width: 0; }
.cert-name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--sa-navy); margin-bottom: 6px; }
.cert-note { font-size: 13px; color: var(--sa-fg-2); line-height: 1.5; }
.cert-placeholder { display: flex; align-items: center; justify-content: center; text-align: center; background: var(--sa-bg-2); border: 1px dashed var(--sa-border); border-radius: var(--sa-radius-md); padding: 28px; font-family: var(--sa-font-mono); font-size: 11.5px; color: var(--sa-fg-3); letter-spacing: 0.12em; text-transform: uppercase; min-height: 110px; }

/* ── Outcomes / stat band (navy, reversed contrast) ──────── */
.outcomes { background: var(--sa-navy); border-top: 1px solid var(--sa-border); border-bottom: 1px solid var(--sa-border); position: relative; overflow: hidden; isolation: isolate; }
.outcomes::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(640px 380px at 6% -20%, rgba(13,104,231,0.22), transparent 60%),
    radial-gradient(600px 380px at 98% 120%, rgba(253,92,1,0.14), transparent 58%); }
.outcomes .eyebrow { color: var(--sa-orange); }
.outcomes .h2 { color: #fff; }
.outcomes .h2 .em-orange { color: var(--sa-orange); }
.outcomes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
@media (max-width: 920px) { .outcomes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .outcomes-grid { grid-template-columns: 1fr 1fr; } }
.outcome { padding: 20px 24px; border-left: 1px solid rgba(255,255,255,0.12); }
.outcome:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 920px) { .outcome:nth-child(odd) { border-left: 0; padding-left: 0; } .outcome { padding: 18px 20px; } }
.outcome .o-num { font-size: clamp(34px, 2.6vw + 1rem, 48px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; color: #fff; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.outcome .o-num em { color: var(--sa-orange); font-style: normal; }
.outcome .o-label { font-size: 13.5px; color: rgba(255,255,255,0.7); }

/* ── Tertiary text-arrow link ────────────────────────────── */
.tertiary-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--sa-blue); font-size: 14px; font-weight: 600; letter-spacing: -0.005em; transition: gap var(--sa-dur-base) var(--sa-ease-out); }
.tertiary-cta:hover { gap: 10px; }
.tertiary-cta .arrow { transition: transform var(--sa-dur-base) var(--sa-ease-out); }
.tertiary-cta:hover .arrow { transform: translateX(3px); }
.band-explore-link { margin-top: 24px; text-align: right; }
@media (max-width: 720px) { .band-explore-link { text-align: left; margin-top: 20px; } }

/* ── Bento grid ──────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(180px, auto); gap: 18px; }
.bento > * { background: #fff; border: 1px solid var(--sa-border); border-radius: var(--sa-radius-md); padding: 26px; position: relative; overflow: hidden; box-shadow: var(--sa-shadow-100); transition: transform var(--sa-dur-base) var(--sa-ease-out), box-shadow var(--sa-dur-base) var(--sa-ease-out), border-color var(--sa-dur-base) var(--sa-ease-out); }
.bento > *:hover { transform: translateY(-3px); box-shadow: var(--sa-shadow-500); border-color: rgba(13,104,231,0.45); }
.bento .b-wide { grid-column: span 4; }
.bento .b-half { grid-column: span 3; }
.bento .b-third { grid-column: span 2; }
.bento .b-tall { grid-row: span 2; }
.bento .b-feature { background: linear-gradient(155deg, #fff, rgba(253,92,1,0.05)); border-color: rgba(253,92,1,0.22); }
.bento .b-dark { background: linear-gradient(150deg, #06386A, var(--sa-navy)); border-color: transparent; color: #fff; }
.bento .b-dark h3, .bento .b-dark h4 { color: #fff; }
.bento .b-dark p { color: rgba(255,255,255,0.78); }
.bento h3 { font-size: clamp(18px, 4vw, 20px); line-height: 1.2; color: var(--sa-navy); margin: 0 0 10px; letter-spacing: -0.02em; }
.bento h4 { font-size: 16.5px; line-height: 1.25; color: var(--sa-navy); margin: 0 0 8px; }
.bento p { font-size: 14px; color: var(--sa-fg-2); line-height: 1.5; margin: 0; }
.bento .b-num { font-weight: 800; font-size: clamp(40px, 3vw + 1rem, 60px); color: var(--sa-orange); letter-spacing: -0.04em; line-height: 1; }
.bento .b-num-label { font-size: 12.5px; color: var(--sa-fg-2); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 6px; }
.bento .b-kicker { font-family: var(--sa-font-mono); font-size: 11px; color: var(--sa-orange); letter-spacing: 0.1em; margin-bottom: 12px; }
.bento .b-tag { position: absolute; top: 16px; right: 16px; font-family: var(--sa-font-mono); font-size: 10.5px; color: var(--sa-fg-2); letter-spacing: 0.1em; padding: 4px 9px; background: var(--sa-bg-2); border: 1px solid var(--sa-border); border-radius: var(--sa-radius-pill); }
@media (max-width: 920px) { .bento { grid-template-columns: 1fr 1fr; } .bento .b-wide, .bento .b-half, .bento .b-third, .bento .b-tall { grid-column: span 1; grid-row: span 1; } .bento .b-feature, .bento .b-dark { grid-column: 1 / -1; } }
@media (max-width: 460px) { .bento { grid-template-columns: 1fr; } }

/* ── Flow diagram ────────────────────────────────────────── */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; background: #fff; border: 1px solid var(--sa-border); border-radius: var(--sa-radius-md); overflow: hidden; }
@media (max-width: 920px) { .flow { grid-template-columns: 1fr; } }
.flow-step { padding: 26px 22px; border-right: 1px solid var(--sa-border); position: relative; }
.flow-step:last-child { border-right: 0; }
@media (max-width: 920px) { .flow-step { border-right: 0; border-bottom: 1px solid var(--sa-border); } .flow-step:last-child { border-bottom: 0; } }
.flow-step::after { content: "→"; position: absolute; top: 50%; right: -11px; z-index: 2; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--sa-orange); font-size: 14px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--sa-border); }
.flow-step:last-child::after { display: none; }
@media (max-width: 920px) { .flow-step::after { display: none; } }
.flow-step .fstep-num { font-family: var(--sa-font-mono); font-size: 11px; color: var(--sa-orange); letter-spacing: 0.1em; margin-bottom: 10px; }
.flow-step h4 { font-size: 16px; margin: 0 0 8px; line-height: 1.2; color: var(--sa-navy); }
.flow-step p { font-size: 13px; line-height: 1.5; color: var(--sa-fg-2); margin: 0; }

/* ── Capability 6-grid ───────────────────────────────────── */
.cap-grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 920px) { .cap-grid-6 { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* ── Tech stack columns ──────────────────────────────────── */
.stack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 920px) { .stack-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }
@media (max-width: 460px) { .stack-grid { grid-template-columns: 1fr; } }
.stack-col { background: #fff; border: 1px solid var(--sa-border); border-radius: var(--sa-radius-md); padding: 24px; box-shadow: var(--sa-shadow-100); }
.stack-col h4 { font-size: 16px; margin: 0 0 16px; color: var(--sa-navy); }
.stack-col h4 .tag { margin-left: 8px; font-family: var(--sa-font-mono); font-size: 10.5px; color: var(--sa-orange); letter-spacing: 0.08em; padding: 3px 8px; background: rgba(253,92,1,0.08); border: 1px solid rgba(253,92,1,0.25); border-radius: var(--sa-radius-pill); vertical-align: middle; font-weight: 500; }
.stack-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.stack-pill { padding: 5px 11px; background: var(--sa-bg-2); border: 1px solid var(--sa-border); border-radius: var(--sa-radius-pill); font-family: var(--sa-font-mono); font-size: 12px; color: var(--sa-fg-2); }
.stack-pill.hl { background: rgba(253,92,1,0.08); border-color: rgba(253,92,1,0.25); color: #B4430A; }

/* ── Layered architecture stack (dark inset) ─────────────── */
.stack-viz { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: linear-gradient(150deg, #06386A 0%, var(--sa-navy) 100%); border-radius: var(--sa-radius-md); position: relative; overflow: hidden; }
.stack-viz::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, rgba(253,92,1,0.2), transparent 50%); pointer-events: none; }
.stack-viz > * { position: relative; z-index: 1; }
.stack-viz .layer { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--sa-radius-sm); padding: 14px 16px; display: grid; grid-template-columns: 0.3fr 1fr 1fr; align-items: center; gap: 12px; transition: background var(--sa-dur-base) var(--sa-ease-out), border-color var(--sa-dur-base) var(--sa-ease-out); }
.stack-viz .layer:hover { transform: translateY(-3px); box-shadow: var(--sa-shadow-300); background: rgba(13,104,231,0.07); border-color: rgba(13,104,231,0.35); }
.stack-viz .layer.hl { background: rgba(253,92,1,0.12); border-color: rgba(253,92,1,0.35); }
.stack-viz .layer .lid { font-family: var(--sa-font-mono); font-size: 11px; color: var(--sa-orange); letter-spacing: 0.06em; }
.stack-viz .layer .lname { font-weight: 600; font-size: 15px; color: #fff; }
.stack-viz .layer .ldesc { font-size: 12.5px; color: rgba(255,255,255,0.72); line-height: 1.35; }

/* ── Split (problem / solution) ──────────────────────────── */
.split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 880px) { .split-row { grid-template-columns: 1fr; } }
.split-card { background: #fff; border: 1px solid var(--sa-border); border-radius: var(--sa-radius-md); padding: 30px; box-shadow: var(--sa-shadow-100); }
.split-card.left { }
.split-card.right { }
.split-card .kicker-row { margin-bottom: 18px; }
.split-card ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: split; }
.split-card ol li { counter-increment: split; padding-left: 30px; position: relative; font-size: 14.5px; line-height: 1.5; color: var(--sa-fg-2); }
.split-card ol li::before { content: counter(split) "."; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--sa-orange); font-size: 14.5px; }

/* ── Code block (inline visual) ──────────────────────────── */
.code-block { background: var(--sa-navy); border: 1px solid var(--sa-border); border-radius: var(--sa-radius-md); overflow: hidden; }
.code-block .cb-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.08); }
.code-block .cb-dots { display: flex; gap: 5px; }
.code-block .cb-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.2); }
.code-block .cb-title { font-family: var(--sa-font-mono); font-size: 11.5px; color: rgba(255,255,255,0.55); margin-left: 8px; }
.code-block .cb-body { padding: 18px; font-family: var(--sa-font-mono); font-size: 13px; color: rgba(255,255,255,0.78); line-height: 1.6; }
.code-block .cb-body .k { color: #FFC9A6; }
.code-block .cb-body .v { color: #fff; }
.code-block .cb-body .c { color: rgba(255,255,255,0.45); }
.code-block .cb-body .a { color: #6EE7B7; }

/* ── Mini-stats (sub-page hero) ──────────────────────────── */
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--sa-border); }
.mini-stat .v { font-size: 24px; font-weight: 800; letter-spacing: -0.025em; color: var(--sa-navy); line-height: 1; }
.mini-stat .v em { color: var(--sa-orange); font-style: normal; }
.mini-stat .l { font-size: 12.5px; color: var(--sa-fg-2); margin-top: 6px; }
@media (max-width: 560px) { .mini-stats { grid-template-columns: 1fr 1fr; } }

/* ── Generic card + section helpers ──────────────────────── */
.card { background: #fff; border: 1px solid var(--sa-border); border-radius: var(--sa-radius-md); padding: 28px; box-shadow: var(--sa-shadow-100); transition: transform var(--sa-dur-base) var(--sa-ease-out), box-shadow var(--sa-dur-base) var(--sa-ease-out), border-color var(--sa-dur-base) var(--sa-ease-out); }
.card.link:hover { transform: translateY(-3px); box-shadow: var(--sa-shadow-500); border-color: rgba(13,104,231,0.45); background: linear-gradient(160deg, #fff, rgba(13,104,231,0.06)); }
.card h3, .card h4 { color: var(--sa-navy); }
.card p { color: var(--sa-fg-2); font-size: 14.5px; line-height: 1.55; }
.kicker-row { display: inline-flex; align-items: center; gap: 10px; }

/* ── Hero data-viz panels: LIGHT theme. Legacy text/line/canvas tokens are
   re-scoped to light values so token-based inner elements (labels, borders,
   inner cards) render dark-on-light to match the homepage hero card. Each
   page also sets its panel background to a light surface in its inline CSS. */
.svc-hero-viz, .cl-hero-viz, .mdp-hero-viz, .pe-highway, .suite-vis,
.proof-visual, .sc-hero-viz, .cms-hero-viz, .fam-hero-viz, .cloud-hero-viz,
.arch-deep, .journey, .ai-hero-viz, .prod-win, .sa-dark-viz {
  --text: #032B50;
  --text-soft: #6D717F;
  --text-mute: #6B7280;
  --text-faint: #9EA2AE;
  --line: #E5E7EA;
  --line-strong: #E5E7EA;
  --canvas-3: #F9FAFB;
  --canvas-2: #F4F7FB;
  --accent-hot: #FD5C01;
  color: var(--sa-navy);
}

/* ── About-specific helpers ──────────────────────────────── */
.about-prose { color: var(--sa-fg-2); font-size: 17px; line-height: 1.7; }
.about-prose p { margin: 0 0 20px; }
.about-prose p:last-child { margin-bottom: 0; }
.about-prose a { color: var(--sa-orange); font-weight: 500; }
.about-prose a:hover { text-decoration: underline; }
.geo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
@media (max-width: 920px) { .geo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .geo-grid { grid-template-columns: 1fr 1fr; } }
.geo { font-weight: 800; font-size: 36px; color: var(--sa-orange); margin-bottom: 10px; letter-spacing: -0.03em; line-height: 1; }

/* ── Contact form ────────────────────────────────────────── */
.contact-form { background: #fff; border: 1px solid var(--sa-border); border-radius: var(--sa-radius-lg); padding: 36px; box-shadow: var(--sa-shadow-300); }
.contact-form h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--sa-navy); margin: 0 0 8px; }
.contact-form > .intent-pane > p, .contact-form p { color: var(--sa-fg-2); font-size: 14.5px; line-height: 1.55; margin: 0 0 24px; }
.contact-form p a { color: var(--sa-orange); font-weight: 500; }
.intent-toggle { display: inline-flex; gap: 4px; background: var(--sa-bg-2); border: 1px solid var(--sa-border); border-radius: var(--sa-radius-pill); padding: 4px; margin-bottom: 24px; }
.intent-toggle button { border: 0; background: transparent; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--sa-fg-2); padding: 8px 18px; border-radius: var(--sa-radius-pill); cursor: pointer; transition: background var(--sa-dur-base) var(--sa-ease-out), color var(--sa-dur-base) var(--sa-ease-out); }
.intent-toggle button.active { background: var(--sa-navy); color: #fff; }
.intent-pane { display: none; }
.intent-pane.active { display: block; }
.form-row { margin-bottom: 16px; }
.form-row.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form-row.two-col { grid-template-columns: 1fr; } }
.form-row label { display: block; font-size: 12.5px; font-weight: 600; color: var(--sa-fg-2); margin-bottom: 6px; }
.form-row input, .form-row select, .form-row textarea { width: 100%; font-family: inherit; font-size: 14px; color: var(--sa-fg-1); background: var(--sa-bg-2); border: 1.5px solid var(--sa-border); border-radius: var(--sa-radius-sm); padding: 11px 13px; transition: border-color var(--sa-dur-base) var(--sa-ease-out), box-shadow var(--sa-dur-base) var(--sa-ease-out), background var(--sa-dur-base) var(--sa-ease-out); }
.form-row input::placeholder, .form-row textarea::placeholder { color: var(--sa-fg-3); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--sa-blue); background: #fff; box-shadow: var(--sa-shadow-focus); }
.form-row textarea { min-height: 100px; resize: vertical; }
.form-row input[type=file] { padding: 9px 13px; background: var(--sa-bg-2); }
.form-row input[type=file]::file-selector-button { font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--sa-navy); background: #fff; border: 1px solid var(--sa-border); border-radius: var(--sa-radius-sm); padding: 6px 12px; margin-right: 12px; cursor: pointer; transition: border-color var(--sa-dur-base); }
.form-row input[type=file]::file-selector-button:hover { border-color: var(--sa-navy); }
.contact-form .btn { width: 100%; justify-content: center; margin-top: 6px; }
.contact-info { background: #fff; border: 1px solid var(--sa-border); border-radius: var(--sa-radius-md); padding: 22px; box-shadow: var(--sa-shadow-100); }
.contact-info-row { display: flex; gap: 14px; margin-bottom: 16px; }
.contact-info-row:last-child { margin-bottom: 0; }
.contact-info-row .ico { width: 32px; height: 32px; flex-shrink: 0; background: rgba(253,92,1,0.10); border: 1px solid rgba(253,92,1,0.22); border-radius: var(--sa-radius-sm); display: flex; align-items: center; justify-content: center; color: var(--sa-orange); font-weight: 700; }
.contact-info-row .ic-text .ic-l { font-size: 11px; color: var(--sa-fg-3); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 3px; }
.contact-info-row .ic-text .ic-v { color: var(--sa-fg-1); font-size: 14.5px; font-weight: 500; }
.contact-info-row .ic-text .ic-v a { color: var(--sa-orange); }
.contact-info-row .ic-text .ic-v a:hover { text-decoration: underline; }

/* ── CTA pairs stay on ONE row on mobile (interior page heroes) ── */
@media (max-width: 640px) {
  .page-hero-actions { flex-direction: row; flex-wrap: nowrap; gap: 8px; align-items: stretch; }
  .page-hero-actions > .btn {
    flex: 1 1 0; min-width: 0; white-space: normal; height: auto; min-height: 46px;
    padding: 9px 10px; font-size: 12.5px; line-height: 1.2; text-align: center;
  }
}