:root {
  --bg: #f5f6f1;
  --surface: #edf1ec;
  --surface-strong: #ffffff;
  --ink: #15221e;
  --muted: #536059;
  --petrol: #176b5b;
  --blue: #2d62d4;
  --gold: #e9a23b;
  --coral: #d95d4f;
  --line: rgba(21, 34, 30, 0.14);
  --line-strong: rgba(21, 34, 30, 0.24);
  --shadow: 0 20px 50px rgba(21, 34, 30, 0.12);
  --radius: 8px;
  --shell: min(1180px, calc(100vw - 40px));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(90deg, rgba(21, 34, 30, 0.045) 1px, transparent 1px) 0 0 / 84px 84px,
    linear-gradient(180deg, var(--bg), #eef2eb 58%, var(--bg));
  color: var(--ink);
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
code { font-size: 0.95em; }
.shell { width: var(--shell); margin-inline: auto; }

@media (min-width: 1280px) {
  :root { --shell: min(1120px, calc(100vw - 260px)); }
}

.page-line-nav {
  position: fixed;
  top: 118px;
  left: 18px;
  z-index: 18;
  display: none;
  width: 136px;
  color: var(--muted);
  pointer-events: none;
}
.page-line-nav__kicker,
.page-line-nav__subheading {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
}
.page-line-nav__sub {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.page-line-nav .line-sidebar {
  pointer-events: auto;
}
.page-line-sidebar {
  --marker-length: 24px;
  --marker-gap: 8px;
  --tick-scale: 0.45;
  --max-shift: 7px;
  --item-gap: 12px;
  --font-size: 0.78rem;
  min-height: auto;
}
.page-line-sidebar .line-sidebar__list {
  justify-content: flex-start;
  padding: 2px 0;
}
.page-line-sidebar .line-sidebar__label {
  max-width: 98px;
  font-weight: 850;
}
.page-line-sidebar .line-sidebar__text {
  overflow-wrap: anywhere;
}
.page-line-sidebar--sub {
  --accent-color: var(--blue);
  --marker-color: rgba(45, 98, 212, 0.26);
  --item-gap: 10px;
  --font-size: 0.74rem;
}
.page-line-sidebar--sub .line-sidebar__index { display: none; }
@media (min-width: 1280px) {
  .page-line-nav { display: block; }
}

.topbar {
  position: sticky;
  top: 14px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1240px, calc(100vw - 32px));
  min-height: 68px;
  margin: 14px auto 0;
  padding: 10px 12px 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius);
  background: rgba(245, 246, 241, 0.78);
  box-shadow: 0 14px 34px rgba(21, 34, 30, 0.1);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; font-weight: 800; white-space: nowrap; }
.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: var(--radius);
  color: #fff;
  background: var(--petrol);
  font-size: 0.82rem;
  font-weight: 900;
}
.brand-text { overflow: hidden; text-overflow: ellipsis; }
.nav-links { display: flex; gap: 26px; color: var(--muted); font-size: 0.9rem; font-weight: 720; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--petrol); }
.nav-action, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
}
.nav-action { min-width: 112px; color: #fff; background: var(--petrol); }
.button { min-width: 160px; padding: 0 20px; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease; }
.button:hover { transform: translateY(-2px); }
.button.primary { color: #fff; background: var(--petrol); }
.button.secondary { color: var(--ink); border-color: var(--line-strong); background: rgba(255, 255, 255, 0.52); }
.button:focus-visible, .nav-action:focus-visible, .case-toggle:focus-visible, .text-link:focus-visible { outline: 3px solid rgba(45, 98, 212, 0.34); outline-offset: 3px; }


.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(520px, 0.95fr);
  gap: 54px;
  align-items: center;
  min-height: min(760px, calc(100vh - 88px));
  padding: 42px 0 38px;
}
.signature { margin: 0 0 16px; color: var(--petrol); font-size: 0.98rem; font-weight: 850; line-height: 1.45; }
.hero h1, .section-heading h2, .about-copy h2, .contact h2 { margin: 0; letter-spacing: 0; font-weight: 880; }
.hero h1 { max-width: 760px; font-size: clamp(2.5rem, 3.5vw, 3.6rem); line-height: 1.02; }
.hero-copy > p:not(.signature) { max-width: 610px; margin: 24px 0 0; color: var(--muted); font-size: clamp(1.04rem, 1.25vw, 1.18rem); line-height: 1.58; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.analytics-scene {
  position: relative;
  min-height: clamp(500px, 34vw, 570px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(237, 241, 236, 0.88), rgba(255, 255, 255, 0.72)),
    var(--surface);
  box-shadow: var(--shadow);
  isolation: isolate;
}
.scene-layer { position: absolute; inset: 0; will-change: transform; }
.layer-back {
  background:
    linear-gradient(90deg, rgba(23, 107, 91, 0.08) 1px, transparent 1px) 0 0 / 54px 54px,
    linear-gradient(rgba(23, 107, 91, 0.06) 1px, transparent 1px) 0 0 / 54px 54px;
  transform: perspective(700px) rotateX(58deg) rotateZ(-8deg) scale(1.2) translateY(58px);
  opacity: 0.52;
}
.layer-mid::before, .layer-mid::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(45, 98, 212, 0.18);
  border-radius: 999px;
}
.layer-mid::before { width: 320px; height: 116px; right: 30px; top: 82px; transform: rotate(-14deg); }
.layer-mid::after { width: 240px; height: 84px; left: 54px; bottom: 70px; border-color: rgba(233, 162, 59, 0.22); transform: rotate(18deg); }
.hero-panel, .metric-chip {
  position: absolute;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 44px rgba(21, 34, 30, 0.13);
  backdrop-filter: blur(12px);
  will-change: transform;
}
.panel-main { left: 5%; right: 5%; top: 4%; padding: 18px; }
.panel-topline, .panel-summary { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.panel-topline strong { font-size: 1rem; }
.panel-topline span, .panel-summary span, .dashboard-kpis span, .dashboard-chart-card > span, .queue-title, .dashboard-table span, .proof-card span { color: var(--muted); font-size: 0.76rem; font-weight: 820; }
.dashboard-preview { display: grid; gap: 10px; margin: 14px 0 12px; }
.dashboard-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dashboard-kpis div, .dashboard-chart-card, .dashboard-queue, .dashboard-table div {
  border: 1px solid rgba(21, 34, 30, 0.08);
  border-radius: calc(var(--radius) - 2px);
  background: rgba(255, 255, 255, 0.62);
}
.dashboard-kpis div { min-width: 0; padding: 11px; }
.dashboard-kpis strong { display: block; margin-top: 7px; color: var(--ink); font-size: clamp(1.05rem, 2.1vw, 1.45rem); line-height: 1; }
.dashboard-kpis small { display: block; margin-top: 5px; color: var(--petrol); font-size: 0.72rem; font-weight: 850; }
.dashboard-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(158px, 0.34fr); gap: 10px; align-items: stretch; }
.dashboard-chart-card { min-width: 0; padding: 12px 12px 6px; }
.hero-chart { display: block; width: 100%; max-height: 172px; margin: 8px 0 0; }
.grid-lines path { fill: none; stroke: rgba(21, 34, 30, 0.1); stroke-width: 1; }
.area-fill { fill: rgba(23, 107, 91, 0.13); }
.chart-line { fill: none; stroke: var(--petrol); stroke-width: 6; stroke-linecap: round; }
.bars rect { fill: var(--blue); opacity: 0.78; rx: 5; }
.dashboard-queue { display: grid; gap: 8px; align-content: start; padding: 12px; }
.queue-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid rgba(21, 34, 30, 0.08); font-size: 0.82rem; }
.queue-row span { color: var(--ink); font-weight: 760; }
.queue-row strong { color: var(--petrol); font-size: 0.76rem; white-space: nowrap; }
.dashboard-table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dashboard-table div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; }
.dashboard-table strong { color: var(--ink); font-size: 0.82rem; text-align: right; }
.panel-summary strong { color: var(--petrol); font-size: 0.98rem; text-align: right; }
.metric-chip { display: none; }

.audiences, .proof, .cases, .solutions, .process, .about, .contact { padding: 76px 0; }
.section-heading { max-width: 770px; margin-bottom: 32px; }
.section-heading.compact { max-width: 680px; }
.section-heading.split { display: flex; align-items: end; justify-content: space-between; gap: 28px; max-width: none; }
.section-heading h2, .about-copy h2, .contact h2 { font-size: clamp(2rem, 3.5vw, 3.55rem); line-height: 1.04; }
.section-heading p, .about-copy p, .contact p { margin: 16px 0 0; color: var(--muted); font-size: 1.03rem; line-height: 1.58; }
.audience-grid, .proof-grid, .solution-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.audience-card, .proof-card, .solution-grid article, .case-panel, .process-list li, .portrait-slot, .contact {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.58);
}
.audience-card { min-height: 238px; padding: 24px; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
.audience-card:hover, .audience-card.is-selected { border-color: rgba(23, 107, 91, 0.48); background: rgba(237, 241, 236, 0.92); transform: translateY(-2px); }
h3 { margin: 0; font-size: 1.32rem; line-height: 1.2; }
.audience-card p, .solution-grid p, .process-list p, .case-body p { color: var(--muted); line-height: 1.54; }
.text-link { display: inline-flex; margin-top: 12px; color: var(--blue); font-weight: 850; }
.proof-card { padding: 24px; background: var(--surface); }
.proof-card strong { display: block; margin-top: 14px; color: var(--petrol); font-size: clamp(2.25rem, 4vw, 4.2rem); line-height: 0.95; }
.proof-card p { margin: 16px 0 0; color: var(--muted); line-height: 1.48; }
.case-stack { display: grid; gap: 14px; }
.case-panel { overflow: hidden; background: var(--surface-strong); }
.case-panel:nth-child(2) { border-color: rgba(45, 98, 212, 0.2); }
.case-panel:nth-child(3) { border-color: rgba(217, 93, 79, 0.2); }
.case-toggle {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: 24px;
  width: 100%;
  padding: 24px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.case-toggle span { color: var(--muted); font-size: 0.86rem; font-weight: 820; }
.case-toggle strong { font-size: clamp(1.45rem, 2.8vw, 2.85rem); line-height: 1.06; }
.case-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 0.48fr);
  gap: 24px;
  max-height: 0;
  overflow: hidden;
  padding: 0 24px;
  transition: max-height 260ms ease, padding-bottom 260ms ease;
}
.case-panel.is-open .case-body { max-height: 760px; padding-bottom: 24px; }
.case-body dl { display: grid; gap: 12px; margin: 0; }
.case-body dl div { padding: 16px; border-radius: var(--radius); background: var(--surface); }
.case-body dt { color: var(--muted); font-size: 0.78rem; font-weight: 850; }
.case-body dd { margin: 8px 0 0; font-weight: 800; line-height: 1.35; }
.case-body--line-sidebar {
  grid-template-columns: minmax(230px, 0.34fr) minmax(0, 0.66fr);
  align-items: stretch;
}
.line-sidebar {
  --accent-color: var(--petrol);
  --text-color: var(--muted);
  --marker-color: rgba(83, 96, 89, 0.38);
  --marker-length: 52px;
  --marker-gap: 10px;
  --tick-scale: 0.45;
  --max-shift: 16px;
  --item-gap: 22px;
  --font-size: 1rem;
  position: relative;
  display: flex;
  justify-content: flex-start;
  min-height: 100%;
}
.line-sidebar--markers { padding-left: calc(var(--marker-length) + var(--marker-gap)); }
.line-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: var(--item-gap);
  justify-content: center;
  margin: 0;
  padding: 12px 0;
  list-style: none;
}
.line-sidebar__item {
  position: relative;
  cursor: pointer;
  --effect: 0;
}
.line-sidebar__item::before {
  position: absolute;
  inset: -6px -32px;
  content: "";
}
.line-sidebar__label {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  padding: 0;
  border: 0;
  color: color-mix(in srgb, var(--accent-color) calc(var(--effect, 0) * 100%), var(--text-color));
  background: transparent;
  font-size: var(--font-size);
  font-weight: 850;
  line-height: 1.2;
  text-align: left;
  transform: translateX(calc(var(--effect, 0) * var(--max-shift)));
  cursor: pointer;
}
.line-sidebar__index {
  margin-right: 0.62rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82em;
  opacity: calc(0.56 + var(--effect, 0) * 0.44);
}
.line-sidebar__marker {
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--marker-length) - var(--marker-gap));
  width: var(--marker-length);
  height: 1px;
  background-color: color-mix(in srgb, var(--accent-color) calc(var(--effect, 0) * 100%), var(--marker-color));
  transform: translateY(-50%) scaleX(calc(0.7 + var(--effect, 0) * 0.5));
  transform-origin: left center;
}
.line-sidebar--markers .line-sidebar__item:not(:last-child)::after {
  position: absolute;
  top: calc(100% + var(--item-gap) / 2);
  left: calc(-1 * var(--marker-length) - var(--marker-gap));
  width: calc(var(--marker-length) * var(--tick-scale));
  height: 1px;
  background-color: var(--marker-color);
  content: "";
  opacity: 0.58;
  transform: translateY(-50%);
}
.line-sidebar--scale-tick .line-sidebar__item:not(:last-child)::after {
  transform: translateY(-50%) scaleX(calc(0.7 + var(--effect, 0) * 0.6));
  transform-origin: left center;
}
.line-sidebar__item[aria-current="true"] .line-sidebar__label { color: var(--petrol); }
.line-sidebar__label:focus-visible {
  outline: 3px solid rgba(45, 98, 212, 0.28);
  outline-offset: 5px;
}
.case-body--insight-only {
  grid-template-columns: 1fr;
}
.case-body--insight-only .case-insight-panes {
  min-height: 260px;
}
.case-insight-panes {
  display: grid;
  align-content: stretch;
  min-height: 300px;
}
.case-insight {
  display: grid;
  align-content: center;
  min-height: 300px;
  padding: 28px;
  border: 1px solid rgba(23, 107, 91, 0.18);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(237, 241, 236, 0.92), rgba(255, 255, 255, 0.68)),
    var(--surface);
}
.case-insight span {
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 900;
}
.case-insight h4 {
  max-width: 620px;
  margin: 14px 0 0;
  font-size: clamp(1.55rem, 2.7vw, 2.75rem);
  line-height: 1.06;
}
.case-insight p {
  max-width: 620px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
}
.solution-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.solution-grid article { min-height: 220px; padding: 22px; background: rgba(237, 241, 236, 0.7); }
.process-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 0; list-style: none; }
.process-list li { min-height: 250px; padding: 22px; }
.process-list span { display: inline-flex; margin-bottom: 26px; color: var(--coral); font-weight: 900; }
.about { display: grid; grid-template-columns: minmax(280px, 0.38fr) minmax(0, 0.62fr); gap: 42px; align-items: stretch; }
.portrait-slot { position: relative; display: block; min-height: 440px; margin: 0; overflow: hidden; background: linear-gradient(135deg, var(--surface), rgba(255, 255, 255, 0.62)); isolation: isolate; }
.portrait-image { display: block; width: 100%; height: 100%; min-height: inherit; object-fit: cover; object-position: center top; }
.portrait-slot.border-glow-card > .portrait-image { position: absolute; inset: 0; z-index: 0; }
.portrait-slot.border-glow-card > .edge-light { z-index: 3; }
.about-copy { align-self: center; }
.skill-groups { display: grid; gap: 12px; margin-top: 28px; }
.skill-groups div { display: flex; gap: 18px; justify-content: space-between; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, 0.56); }
.skill-groups span { color: var(--muted); text-align: right; }
.contact { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-bottom: 58px; padding: 34px; background: var(--petrol); color: #fff; }
.contact p { color: rgba(255, 255, 255, 0.8); }
.contact .button.primary { color: var(--petrol); background: #fff; }
.contact .button.secondary { color: #fff; border-color: rgba(255, 255, 255, 0.42); background: rgba(255, 255, 255, 0.08); }
.contact > div:first-child { max-width: 720px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.scroll-reveal { opacity: 0; transform: translateY(18px); transition: opacity 520ms ease, transform 520ms ease; }
.scroll-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; scroll-behavior: auto !important; transition-duration: 0.001ms !important; }
  .scroll-reveal { opacity: 1; transform: none; }
}

@media (max-width: 980px) {
  .topbar { position: static; }
  .nav-links { display: none; }
  .hero, .about { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-top: 42px; padding-bottom: 34px; }
  .analytics-scene { min-height: 390px; }
  .audience-grid, .proof-grid, .solution-grid, .process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-heading.split { display: block; }
  .section-heading.split .button { margin-top: 20px; }
}

@media (max-width: 640px) {
  :root { --shell: min(100vw - 28px, 430px); }
  .topbar { width: calc(100vw - 24px); min-height: 62px; margin-top: 12px; }
  .brand-text { display: none; }
  .nav-action { min-width: 96px; }
  .hero { padding: 30px 0 26px; }
  .hero h1 { font-size: clamp(2.35rem, 11vw, 3.15rem); }
  .hero-actions, .contact, .contact-actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .analytics-scene { min-height: 280px; }
  .panel-main { left: 14px; right: 14px; top: 66px; padding: 12px; }
  .panel-topline, .panel-summary, .skill-groups div { display: block; }
  .panel-summary strong, .skill-groups span { display: block; margin-top: 6px; text-align: left; }
  .metric-chip { min-width: 150px; padding: 12px; }
  .chip-a { left: 14px; top: 14px; }
  .chip-b { right: 14px; bottom: 14px; }
  .audiences, .proof, .cases, .solutions, .process, .about, .contact { padding: 46px 0; }
  .audience-grid, .proof-grid, .solution-grid, .process-list, .case-toggle, .case-body { grid-template-columns: 1fr; }
  .case-toggle { gap: 10px; padding: 20px; }
  .case-body { padding-inline: 20px; }
  .case-panel.is-open .case-body { max-height: 820px; padding-bottom: 20px; }
  .portrait-slot { min-height: 280px; }
  .line-sidebar {
    --marker-length: 32px;
    --marker-gap: 8px;
    --max-shift: 8px;
    --item-gap: 14px;
    --font-size: 0.94rem;
  }
  .line-sidebar__list { justify-content: flex-start; }
  .case-insight-panes,
  .case-insight { min-height: auto; }
  .case-insight { padding: 20px; }
  .contact { margin-bottom: 30px; padding: 24px; }
}


@media (max-width: 980px) {
  .hero { min-height: auto; padding-top: 34px; padding-bottom: 28px; }
  .analytics-scene { min-height: 400px; }
  .panel-main { top: 22px; }
}

@media (max-width: 640px) {
  .hero { padding: 24px 0 18px; gap: 24px; }
  .signature { margin-bottom: 12px; font-size: 0.9rem; }
  .hero h1 { font-size: clamp(2.12rem, 10vw, 2.78rem); line-height: 1.03; }
  .hero-copy > p:not(.signature) { margin-top: 18px; font-size: 1rem; line-height: 1.52; }
  .hero-actions { margin-top: 24px; }
  .analytics-scene { min-height: 318px; }
  .panel-main { left: 12px; right: 12px; top: 12px; padding: 12px; }
  .panel-topline, .panel-summary { display: flex; gap: 12px; }
  .panel-topline span, .panel-summary span, .dashboard-kpis span, .dashboard-chart-card > span, .queue-title, .dashboard-table span { font-size: 0.68rem; }
  .dashboard-preview { gap: 8px; margin: 10px 0; }
  .dashboard-kpis { gap: 7px; }
  .dashboard-kpis div { padding: 8px; }
  .dashboard-kpis strong { font-size: 0.98rem; }
  .dashboard-kpis small { font-size: 0.62rem; }
  .dashboard-body { grid-template-columns: 1fr; gap: 8px; }
  .dashboard-table { display: none; }
  .dashboard-chart-card { padding: 9px 9px 4px; }
  .hero-chart { max-height: 82px; }
  .dashboard-queue { display: none; }
  .dashboard-table { grid-template-columns: 1fr; gap: 6px; }
  .dashboard-table div { padding: 7px 8px; }
  .dashboard-table strong { font-size: 0.72rem; }
  .panel-summary strong { margin-top: 0; font-size: 0.72rem; text-align: right; }
}


/* Concept continuation: clean product-led hero */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --ink: #072b2e;
  --muted: #3f4a5d;
  --petrol: #004b46;
  --blue: #0958ee;
  --line: rgba(7, 43, 46, 0.13);
  --line-strong: rgba(9, 88, 238, 0.7);
  --shadow: 0 28px 70px rgba(7, 43, 46, 0.14);
  --radius: 8px;
  --shell: min(1800px, calc(100vw - 104px));
}

body {
  background: #ffffff;
  color: var(--ink);
}

@media (min-width: 1280px) {
  :root { --shell: min(1800px, calc(100vw - 104px)); }
  .page-line-nav { display: none; }
}

.topbar {
  position: relative;
  top: auto;
  width: min(1800px, calc(100vw - 104px));
  min-height: 72px;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.brand-mark {
  width: auto;
  height: auto;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  font-size: clamp(2rem, 2.5vw, 2.7rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.brand-text { display: none; }
.nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  gap: clamp(36px, 4vw, 64px);
  color: #151a2d;
  font-size: 1rem;
  font-weight: 500;
}
.nav-links a:hover,
.nav-links a:focus-visible { color: var(--blue); }
.nav-action {
  min-width: 172px;
  min-height: 46px;
  gap: 10px;
  border: 1px solid var(--petrol);
  border-radius: 6px;
  color: var(--petrol);
  background: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
  font-weight: 600;
}
.nav-whatsapp-icon,
.button-arrow {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.nav-whatsapp-icon path,
.button-arrow path,
.dashboard-toolbar svg path,
.dashboard-nav svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero {
  grid-template-columns: minmax(520px, 0.42fr) minmax(850px, 0.58fr);
  gap: clamp(58px, 4vw, 80px);
  align-items: center;
  min-height: calc(100vh - 90px);
  padding: 16px 0 0;
}
.signature { display: none; }
.hero h1 {
  display: grid;
  gap: 0.02em;
  max-width: 650px;
  font-size: clamp(3.7rem, 4.65vw, 5.35rem);
  line-height: 1.08;
  letter-spacing: 0;
  font-weight: 850;
}
.hero h1 span { display: block; }
.hero-title-accent { color: var(--blue); }
.hero-copy > p:not(.signature) {
  max-width: 570px;
  margin-top: 32px;
  color: #2f3a4f;
  font-size: clamp(1.12rem, 1.42vw, 1.42rem);
  line-height: 1.55;
}
.hero-actions {
  gap: 22px;
  margin-top: 38px;
}
.button {
  min-width: 172px;
  min-height: 56px;
  gap: 12px;
  padding: 0 26px;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 650;
}
.button.primary {
  border-color: var(--petrol);
  background: linear-gradient(135deg, #004d46, #016457);
  box-shadow: 0 16px 34px rgba(0, 77, 70, 0.22);
}
.button.secondary {
  min-width: 284px;
  color: var(--blue);
  border-color: var(--blue);
  background: #ffffff;
}

.product-dashboard.analytics-scene {
  min-height: clamp(640px, 45vw, 720px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.product-dashboard .scene-layer { display: none; }
.dashboard-shell {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  width: min(100%, 910px);
  min-height: 650px;
  margin-left: auto;
  border: 1px solid rgba(7, 43, 46, 0.13);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 30px 80px rgba(7, 43, 46, 0.16);
  backdrop-filter: blur(20px);
  overflow: hidden;
  will-change: transform;
}
.dashboard-nav {
  border-right: 1px solid rgba(7, 43, 46, 0.1);
  background: linear-gradient(180deg, rgba(250, 252, 252, 0.98), rgba(245, 249, 248, 0.95));
}
.dashboard-logo {
  display: grid;
  height: 74px;
  place-items: center;
  color: var(--ink);
  font-size: 1.85rem;
  line-height: 1;
}
.dashboard-nav nav {
  display: grid;
  gap: 8px;
  padding: 0 10px;
}
.dashboard-nav span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 7px;
  color: #30384a;
  font-size: 0.74rem;
  font-weight: 520;
  white-space: nowrap;
}
.dashboard-nav span.is-active {
  color: var(--petrol);
  background: rgba(0, 77, 70, 0.11);
}
.dashboard-nav svg { width: 16px; height: 16px; }
.dashboard-workspace {
  min-width: 0;
  padding: 20px 24px 22px;
}
.dashboard-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-bottom: 16px;
}
.dashboard-toolbar > strong {
  color: #0b1020;
  font-size: 1.08rem;
  font-weight: 760;
}
.toolbar-caret { color: #0b1020; font-size: 1.1rem; }
.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.toolbar-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(7, 43, 46, 0.12);
  border-radius: 5px;
  color: #11182a;
  background: #ffffff;
  font-size: 0.78rem;
  font-weight: 540;
}
.toolbar-actions svg { width: 16px; height: 16px; }
.toolbar-icon { width: 38px; padding: 0 !important; }
.dashboard-card {
  border: 1px solid rgba(7, 43, 46, 0.1);
  border-radius: 8px;
  background: #ffffff;
}
.dashboard-card h2 {
  margin: 0;
  color: #0d1323;
  font-size: 0.9rem;
  font-weight: 720;
}
.dashboard-summary {
  padding: 18px 22px;
}
.summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
}
.summary-strip div {
  min-width: 0;
  padding: 0 20px;
  border-left: 1px solid rgba(7, 43, 46, 0.1);
}
.summary-strip div:first-child { padding-left: 0; border-left: 0; }
.summary-strip span,
.card-heading span,
.process-queue a,
.dashboard-data-table th {
  color: #2b3244;
  font-size: 0.74rem;
  font-weight: 520;
}
.summary-strip strong {
  display: block;
  margin-top: 10px;
  color: #070c18;
  font-size: 1.42rem;
  line-height: 1;
  font-weight: 620;
}
.summary-strip small {
  display: block;
  margin-top: 10px;
  color: var(--petrol);
  font-size: 0.78rem;
  font-weight: 560;
}
.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.38fr);
  gap: 12px;
  margin-top: 14px;
}
.dashboard-performance { padding: 16px 18px 10px; }
.card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.card-heading span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.card-heading b,
.card-heading i {
  display: inline-block;
  width: 10px;
  height: 3px;
  border-radius: 999px;
  background: var(--petrol);
}
.card-heading i { background: var(--blue); }
.executive-chart {
  display: block;
  width: 100%;
  margin-top: 12px;
}
.chart-grid path {
  fill: none;
  stroke: rgba(7, 43, 46, 0.09);
  stroke-width: 1;
}
.executive-line {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.executive-line.revenue { stroke: var(--petrol); }
.executive-line.orders { stroke: var(--blue); }
.axis-labels text {
  fill: #5f6676;
  font-size: 12px;
}
.process-queue { padding: 16px 14px 12px; }
.process-queue div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  border-bottom: 1px solid rgba(7, 43, 46, 0.08);
  color: #182033;
  font-size: 0.76rem;
}
.process-queue strong {
  position: relative;
  color: #e49a29;
  font-size: 0.7rem;
  font-weight: 560;
  white-space: nowrap;
}
.process-queue strong::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  vertical-align: 1px;
}
.process-queue .done { color: #53a36f; }
.process-queue .late { color: #ef3b3b; }
.process-queue a {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  color: #536173;
}
.dashboard-data-table {
  margin-top: 14px;
  padding: 14px 14px 10px;
}
.dashboard-data-table table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  table-layout: fixed;
}
.dashboard-data-table th,
.dashboard-data-table td {
  padding: 9px 8px;
  border-top: 1px solid rgba(7, 43, 46, 0.08);
  color: #182033;
  font-size: 0.75rem;
  text-align: left;
  white-space: nowrap;
}
.dashboard-data-table th { color: #545b6b; font-weight: 560; }
.dashboard-data-table td:not(:first-child),
.dashboard-data-table th:not(:first-child) { text-align: right; }
.dashboard-data-table .positive { color: var(--petrol); }

@media (max-width: 1180px) {
  :root { --shell: min(100vw - 40px, 1040px); }
  .hero { grid-template-columns: 1fr; padding-top: 28px; }
  .hero h1 { max-width: 820px; }
  .product-dashboard.analytics-scene { min-height: 560px; }
  .dashboard-shell { width: 100%; min-height: 540px; }
}

@media (max-width: 760px) {
  :root { --shell: min(100vw - 28px, 430px); }
  .topbar { width: calc(100vw - 28px); min-height: 62px; margin-top: 10px; }
  .nav-links { display: none; }
  .nav-action { min-width: 132px; min-height: 42px; font-size: 0.9rem; }
  .hero { gap: 28px; min-height: auto; padding: 24px 0 36px; }
  .hero h1 { font-size: clamp(2.75rem, 13vw, 4.1rem); line-height: 1.05; }
  .hero-copy > p:not(.signature) { margin-top: 24px; font-size: 1.08rem; }
  .hero-actions { display: grid; gap: 12px; margin-top: 28px; }
  .button, .button.secondary { width: 100%; min-width: 0; }
  .product-dashboard.analytics-scene { min-height: 430px; overflow: hidden; }
  .dashboard-shell { grid-template-columns: 68px minmax(0, 1fr); min-height: 420px; border-radius: 12px; }
  .dashboard-logo { height: 58px; font-size: 1.35rem; }
  .dashboard-nav nav { padding: 0 6px; }
  .dashboard-nav span { justify-content: center; min-height: 38px; padding: 0; font-size: 0; }
  .dashboard-nav svg { width: 17px; height: 17px; }
  .dashboard-workspace { padding: 12px; }
  .dashboard-toolbar { min-height: 34px; margin-bottom: 10px; }
  .dashboard-toolbar > strong { font-size: 0.92rem; }
  .toolbar-actions button:not(.toolbar-icon) { display: none; }
  .dashboard-summary { padding: 12px; }
  .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .summary-strip div { padding: 0; border-left: 0; }
  .summary-strip strong { font-size: 1rem; }
  .summary-strip small { font-size: 0.66rem; }
  .dashboard-main-grid { grid-template-columns: 1fr; }
  .process-queue, .dashboard-data-table { display: none; }
  .dashboard-performance { padding: 12px; }
  .card-heading { display: block; }
  .card-heading span { margin-top: 8px; }
  .executive-chart { min-width: 360px; transform: translateX(-18px); }
}


@media (min-width: 761px) {
  .hero h1 {
    max-width: 760px;
    font-size: clamp(3.35rem, 4.05vw, 4.7rem);
    line-height: 1.08;
  }
  .hero h1 span { white-space: nowrap; }
  .product-dashboard.analytics-scene { min-height: clamp(650px, 43vw, 720px); }
  .dashboard-shell {
    height: clamp(650px, 43vw, 720px);
    min-height: 0;
  }
  .dashboard-workspace { padding: 16px 22px 18px; }
  .dashboard-toolbar { margin-bottom: 12px; }
  .dashboard-summary { padding: 14px 20px; }
  .summary-strip { margin-top: 12px; }
  .summary-strip strong { margin-top: 8px; font-size: 1.32rem; }
  .summary-strip small { margin-top: 8px; }
  .dashboard-main-grid { margin-top: 12px; }
  .dashboard-performance { padding: 14px 16px 8px; }
  .executive-chart { margin-top: 8px; max-height: 250px; }
  .process-queue { padding: 14px 12px 10px; }
  .process-queue div { min-height: 38px; }
  .dashboard-data-table { margin-top: 12px; padding: 12px 12px 8px; }
  .dashboard-data-table th,
  .dashboard-data-table td { padding: 7px 8px; }
}


/* Audience and proof upgrade */
.audiences,
.proof {
  padding: clamp(92px, 9vw, 140px) 0;
}
.section-heading--editorial,
.section-heading--proof {
  display: grid;
  grid-template-columns: minmax(0, 0.52fr) minmax(360px, 0.48fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: end;
  max-width: none;
  margin-bottom: 34px;
}
.section-heading--editorial h2,
.section-heading--proof h2 {
  max-width: 720px;
  color: var(--ink);
  font-size: clamp(2.7rem, 4.3vw, 5.1rem);
  line-height: 1.03;
  font-weight: 830;
}
.section-heading--editorial p,
.section-heading--proof p {
  max-width: 560px;
  margin: 0;
  color: #334052;
  font-size: clamp(1.05rem, 1.25vw, 1.22rem);
  line-height: 1.62;
}
.audience-context-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.audience-context-grid .audience-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 22px;
  min-height: 520px;
  padding: 26px;
  border-color: rgba(7, 43, 46, 0.12);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: none;
}
.audience-context-grid .audience-card:hover,
.audience-context-grid .audience-card.is-selected {
  border-color: rgba(0, 75, 70, 0.42);
  background: linear-gradient(180deg, rgba(0, 75, 70, 0.045), #ffffff 40%);
  transform: translateY(-3px);
}
.audience-index {
  display: inline-flex;
  width: fit-content;
  color: var(--blue);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  font-weight: 760;
}
.audience-context-grid h3 {
  max-width: 320px;
  color: #091f22;
  font-size: clamp(1.75rem, 2.2vw, 2.45rem);
  line-height: 1.05;
}
.audience-context-grid .audience-card > div > p {
  max-width: 340px;
  margin: 16px 0 0;
  color: #354153;
  font-size: 1rem;
  line-height: 1.56;
}
.audience-context-grid dl,
.proof-card dl {
  display: grid;
  gap: 0;
  margin: 0;
}
.audience-context-grid dl div,
.proof-card dl div {
  padding: 15px 0;
  border-top: 1px solid rgba(7, 43, 46, 0.1);
}
.audience-context-grid dt,
.proof-card dt {
  color: #697080;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
}
.audience-context-grid dd,
.proof-card dd {
  margin: 7px 0 0;
  color: #151c2d;
  font-size: 0.95rem;
  line-height: 1.45;
}
.audience-context-grid .text-link {
  margin-top: auto;
  color: var(--blue);
}
.proof-evidence-panel {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.88fr) minmax(0, 0.88fr) minmax(300px, 0.86fr);
  gap: 14px;
  align-items: stretch;
}
.proof-evidence-panel .proof-card,
.proof-context-board {
  min-height: 440px;
  border: 1px solid rgba(7, 43, 46, 0.12);
  border-radius: 10px;
  background: #ffffff;
}
.proof-evidence-panel .proof-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  padding: 26px;
}
.proof-evidence-panel .proof-card--primary {
  color: #ffffff;
  border-color: var(--petrol);
  background: linear-gradient(155deg, #003f3b 0%, #005f55 55%, #083b48 100%);
  box-shadow: 0 26px 70px rgba(0, 75, 70, 0.24);
}
.proof-evidence-panel .proof-card > span {
  color: #596475;
  font-size: 0.82rem;
  font-weight: 720;
}
.proof-evidence-panel .proof-card--primary > span,
.proof-evidence-panel .proof-card--primary p,
.proof-evidence-panel .proof-card--primary dt,
.proof-evidence-panel .proof-card--primary dd {
  color: rgba(255, 255, 255, 0.78);
}
.proof-evidence-panel .proof-card strong {
  margin-top: 26px;
  color: var(--ink);
  font-size: clamp(3.4rem, 5vw, 5.8rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
}
.proof-evidence-panel .proof-card--primary strong {
  color: #ffffff;
}
.proof-evidence-panel .proof-card p {
  max-width: 330px;
  margin: 22px 0 24px;
  color: #334052;
  font-size: 1rem;
  line-height: 1.56;
}
.proof-evidence-panel .proof-card--primary dl div,
.proof-evidence-panel .proof-card--primary dl div:first-child {
  border-color: rgba(255, 255, 255, 0.18);
}
.proof-context-board {
  padding: 26px;
  background: linear-gradient(180deg, #ffffff, rgba(9, 88, 238, 0.035));
}
.proof-context-board h3 {
  color: #091f22;
  font-size: 1.55rem;
}
.proof-context-board ol {
  display: grid;
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.proof-context-board li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(7, 43, 46, 0.1);
}
.proof-context-board li > span {
  grid-row: span 2;
  color: var(--blue);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 780;
}
.proof-context-board strong {
  color: #11182a;
  font-size: 1rem;
}
.proof-context-board p {
  margin: 6px 0 0;
  color: #465164;
  font-size: 0.95rem;
  line-height: 1.48;
}

@media (max-width: 1180px) {
  .section-heading--editorial,
  .section-heading--proof {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .audience-context-grid,
  .proof-evidence-panel {
    grid-template-columns: 1fr;
  }
  .audience-context-grid .audience-card,
  .proof-evidence-panel .proof-card,
  .proof-context-board {
    min-height: auto;
  }
}

@media (max-width: 760px) {
  .audiences,
  .proof { padding: 68px 0; }
  .section-heading--editorial h2,
  .section-heading--proof h2 {
    font-size: clamp(2.2rem, 11vw, 3.4rem);
  }
  .section-heading--editorial p,
  .section-heading--proof p {
    font-size: 1rem;
  }
  .audience-context-grid .audience-card,
  .proof-evidence-panel .proof-card,
  .proof-context-board {
    padding: 20px;
  }
  .audience-context-grid h3 { font-size: 1.65rem; }
  .proof-evidence-panel .proof-card strong { font-size: clamp(3rem, 18vw, 4.6rem); }
  .proof-context-board li { grid-template-columns: 38px minmax(0, 1fr); }
}


/* Projects and solutions upgrade */
.cases,
.solutions {
  padding: clamp(92px, 9vw, 140px) 0;
}
.section-heading--projects,
.section-heading--solutions {
  display: grid;
  grid-template-columns: minmax(0, 0.58fr) auto;
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
  max-width: none;
  margin-bottom: 34px;
}
.section-heading--solutions {
  grid-template-columns: minmax(0, 0.52fr) minmax(360px, 0.48fr);
}
.section-heading--projects h2,
.section-heading--solutions h2 {
  max-width: 760px;
  color: var(--ink);
  font-size: clamp(2.7rem, 4.3vw, 5.1rem);
  line-height: 1.03;
  font-weight: 830;
}
.section-heading--projects p,
.section-heading--solutions p {
  max-width: 620px;
  margin: 18px 0 0;
  color: #334052;
  font-size: clamp(1.05rem, 1.25vw, 1.22rem);
  line-height: 1.62;
}
.section-heading--solutions p { margin: 0; }
.case-room {
  gap: 12px;
}
.case-room .case-panel {
  border: 1px solid rgba(7, 43, 46, 0.12);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
}
.case-room .case-panel.is-open {
  border-color: rgba(0, 75, 70, 0.34);
  box-shadow: 0 24px 70px rgba(7, 43, 46, 0.08);
}
.case-room .case-toggle {
  grid-template-columns: minmax(180px, 0.28fr) minmax(0, 0.72fr);
  align-items: center;
  min-height: 112px;
  padding: 28px 32px;
}
.case-room .case-toggle span {
  color: var(--blue);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 760;
}
.case-room .case-toggle strong {
  max-width: 960px;
  color: #091f22;
  font-size: clamp(1.8rem, 3.1vw, 3.5rem);
  line-height: 1.02;
  font-weight: 800;
}
.case-room .case-body {
  grid-template-columns: 1fr;
  padding: 0 32px;
}
.case-room .case-panel.is-open .case-body {
  max-height: 980px;
  padding-bottom: 32px;
}
.case-product-view {
  min-height: 430px;
}
.case-product-view .case-insight {
  align-content: start;
  min-height: 430px;
  padding: 32px;
  border-color: rgba(7, 43, 46, 0.11);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, rgba(9, 88, 238, 0.035));
}
.case-product-view .case-insight span {
  color: var(--blue);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  font-weight: 760;
}
.case-product-view .case-insight h4 {
  max-width: 840px;
  margin-top: 18px;
  color: #091f22;
  font-size: clamp(2rem, 3.2vw, 4rem);
  line-height: 1.02;
  font-weight: 800;
}
.case-product-view .case-insight p {
  max-width: 760px;
  margin-top: 22px;
  color: #334052;
  font-size: 1.08rem;
  line-height: 1.58;
}
.case-evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
}
.case-evidence-grid div,
.case-readout div {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(7, 43, 46, 0.1);
  border-radius: 8px;
  background: #ffffff;
}
.case-evidence-grid small,
.case-readout dt {
  display: block;
  color: #697080;
  font-size: 0.72rem;
  font-weight: 730;
  text-transform: uppercase;
}
.case-evidence-grid strong,
.case-readout dd {
  display: block;
  margin: 8px 0 0;
  color: #11182a;
  font-size: 0.98rem;
  line-height: 1.42;
  font-weight: 680;
}
.case-body--project-summary {
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.72fr) !important;
  gap: 20px;
}
.case-summary-copy {
  display: grid;
  align-content: center;
  min-height: 260px;
  padding: 26px;
  border: 1px solid rgba(7, 43, 46, 0.1);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, rgba(0, 75, 70, 0.035));
}
.case-summary-copy p {
  max-width: 760px;
  margin: 0;
  color: #334052;
  font-size: 1.08rem;
  line-height: 1.62;
}
.case-summary-copy p + p { margin-top: 18px; }
.case-readout {
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
}
.solution-outcome-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.solution-outcome-grid article {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 20px;
  min-height: 500px;
  padding: 26px;
  border: 1px solid rgba(7, 43, 46, 0.12);
  border-radius: 10px;
  background: #ffffff;
}
.solution-outcome-grid article:nth-child(1) {
  border-color: rgba(9, 88, 238, 0.36);
  background: linear-gradient(180deg, rgba(9, 88, 238, 0.055), #ffffff 38%);
}
.solution-index {
  color: var(--blue);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  font-weight: 760;
}
.solution-outcome-grid h3 {
  color: #091f22;
  font-size: clamp(1.65rem, 2vw, 2.35rem);
  line-height: 1.06;
}
.solution-outcome-grid p {
  margin: 0;
  color: #334052;
  font-size: 1rem;
  line-height: 1.56;
}
.solution-outcome-grid ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.solution-outcome-grid li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  color: #172034;
  font-size: 0.95rem;
  line-height: 1.38;
}
.solution-outcome-grid li::before {
  width: 7px;
  height: 7px;
  margin-top: 0.45em;
  border-radius: 50%;
  background: var(--petrol);
  content: "";
}
.solution-outcome-grid article > strong {
  align-self: end;
  padding-top: 18px;
  border-top: 1px solid rgba(7, 43, 46, 0.1);
  color: var(--blue);
  font-size: 0.98rem;
  line-height: 1.35;
}

@media (max-width: 1180px) {
  .section-heading--projects,
  .section-heading--solutions {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .section-heading--projects .button { width: fit-content; }
  .case-room .case-toggle { grid-template-columns: 1fr; gap: 14px; }
  .case-evidence-grid,
  .case-body--project-summary,
  .solution-outcome-grid {
    grid-template-columns: 1fr !important;
  }
  .solution-outcome-grid article { min-height: auto; }
}

@media (max-width: 760px) {
  .cases,
  .solutions { padding: 68px 0; }
  .section-heading--projects h2,
  .section-heading--solutions h2 {
    font-size: clamp(2.2rem, 11vw, 3.4rem);
  }
  .section-heading--projects p,
  .section-heading--solutions p {
    font-size: 1rem;
  }
  .section-heading--projects .button { width: 100%; }
  .case-room .case-toggle { min-height: auto; padding: 20px; }
  .case-room .case-toggle strong { font-size: 1.6rem; }
  .case-room .case-body { padding: 0 20px; }
  .case-room .case-panel.is-open .case-body { max-height: 1500px; padding-bottom: 20px; }
  .case-product-view,
  .case-product-view .case-insight { min-height: auto; }
  .case-product-view .case-insight,
  .case-summary-copy,
  .solution-outcome-grid article { padding: 20px; }
  .case-product-view .case-insight h4 { font-size: clamp(1.8rem, 9vw, 2.6rem); }
  .case-product-view .case-insight p,
  .case-summary-copy p { font-size: 1rem; }
}

.case-insight[hidden] { display: none !important; }


/* Research-informed post-hero centering/readability pass */
main > section.shell:not(.hero) {
  width: min(1280px, calc(100vw - 64px));
}
main > section.shell:not(.hero) .section-heading,
main > section.shell:not(.hero) .section-heading.split,
main > section.shell:not(.hero) .section-heading--editorial,
main > section.shell:not(.hero) .section-heading--proof,
main > section.shell:not(.hero) .section-heading--projects,
main > section.shell:not(.hero) .section-heading--solutions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 940px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: clamp(34px, 5vw, 58px);
  text-align: center;
}
main > section.shell:not(.hero) .section-heading h2,
main > section.shell:not(.hero) .section-heading--editorial h2,
main > section.shell:not(.hero) .section-heading--proof h2,
main > section.shell:not(.hero) .section-heading--projects h2,
main > section.shell:not(.hero) .section-heading--solutions h2,
main > section.shell:not(.hero) .about-copy h2,
main > section.shell:not(.hero).contact h2 {
  max-width: 860px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
main > section.shell:not(.hero) .section-heading p,
main > section.shell:not(.hero) .section-heading--editorial p,
main > section.shell:not(.hero) .section-heading--proof p,
main > section.shell:not(.hero) .section-heading--projects p,
main > section.shell:not(.hero) .section-heading--solutions p,
main > section.shell:not(.hero) .about-copy p,
main > section.shell:not(.hero).contact p {
  max-width: 68ch;
  margin: 18px auto 0;
  text-align: center;
}
main > section.shell:not(.hero) .section-heading .button,
main > section.shell:not(.hero) .section-heading--projects .button {
  margin-top: 28px;
}
.audience-context-grid,
.proof-evidence-panel,
.case-room,
.solution-outcome-grid,
.process-list,
.skill-groups {
  margin-right: auto;
  margin-left: auto;
}
.audience-context-grid,
.case-room,
.solution-outcome-grid,
.process-list {
  max-width: 1180px;
}
.proof-evidence-panel {
  max-width: 1240px;
}
.case-room .case-toggle {
  text-align: center;
}
.case-room .case-toggle span,
.case-room .case-toggle strong {
  margin-right: auto;
  margin-left: auto;
}
.case-product-view .case-insight h4,
.case-product-view .case-insight p {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
.case-evidence-grid,
.case-body--project-summary,
.solution-outcome-grid,
.audience-context-grid,
.proof-evidence-panel {
  text-align: left;
}
.about {
  max-width: 1180px;
  margin-right: auto;
  margin-left: auto;
}
.about-copy {
  text-align: center;
}
.skill-groups {
  max-width: 760px;
}
.contact.shell {
  width: min(1180px, calc(100vw - 64px));
  text-align: center;
}
.contact > div:first-child {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}
.contact-actions {
  justify-content: center;
}

@media (max-width: 760px) {
  main > section.shell:not(.hero),
  .contact.shell {
    width: min(100vw - 28px, 430px);
  }
  main > section.shell:not(.hero) .section-heading,
  main > section.shell:not(.hero) .section-heading.split,
  main > section.shell:not(.hero) .section-heading--editorial,
  main > section.shell:not(.hero) .section-heading--proof,
  main > section.shell:not(.hero) .section-heading--projects,
  main > section.shell:not(.hero) .section-heading--solutions {
    margin-bottom: 30px;
  }
  main > section.shell:not(.hero) .section-heading p,
  main > section.shell:not(.hero) .section-heading--editorial p,
  main > section.shell:not(.hero) .section-heading--proof p,
  main > section.shell:not(.hero) .section-heading--projects p,
  main > section.shell:not(.hero) .section-heading--solutions p,
  main > section.shell:not(.hero) .about-copy p,
  main > section.shell:not(.hero).contact p {
    max-width: 34ch;
  }
  .case-room .case-toggle {
    text-align: left;
  }
  .case-room .case-toggle span,
  .case-room .case-toggle strong,
  .case-product-view .case-insight h4,
  .case-product-view .case-insight p {
    margin-left: 0;
    text-align: left;
  }
}

.about.shell {
  display: grid;
  grid-template-columns: minmax(280px, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: center;
  justify-items: stretch;
  max-width: min(1040px, calc(100vw - 40px));
  text-align: left;
}
.about.shell .portrait-slot {
  width: 100%;
  min-height: clamp(420px, 44vw, 560px);
  aspect-ratio: 4 / 5;
}
.about.shell .about-copy {
  max-width: none;
  text-align: left;
}
.about.shell .about-copy h2,
.about.shell .about-copy p {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
.about.shell .skill-groups div {
  text-align: left;
}
@media (max-width: 760px) {
  .about.shell {
    grid-template-columns: 1fr;
    justify-items: center;
    max-width: min(100vw - 28px, 430px);
    text-align: center;
  }
  .about.shell .portrait-slot {
    width: min(100%, 360px);
    min-height: 320px;
  }
  .about.shell .about-copy {
    max-width: 100%;
    text-align: center;
  }
  .about.shell .about-copy h2,
  .about.shell .about-copy p {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}
.contact.shell {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
}
.contact.shell .contact-actions {
  justify-content: center;
}


/* Fine tune proof cards: contrast and metric sizing */
.proof-evidence-panel .proof-card strong span {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit;
}
.proof-evidence-panel .proof-card--primary > span {
  color: rgba(255, 255, 255, 0.96);
}
.proof-evidence-panel .proof-card--primary p,
.proof-evidence-panel .proof-card--primary dt,
.proof-evidence-panel .proof-card--primary dd {
  color: rgba(255, 255, 255, 0.9);
}
.proof-evidence-panel .proof-card--primary p {
  max-width: 34ch;
}
.proof-evidence-panel #prova-automacao strong,
.proof-evidence-panel #prova-integracao strong {
  font-size: clamp(3.1rem, 4.15vw, 4.65rem);
}
.proof-evidence-panel #prova-integracao strong {
  white-space: nowrap;
  letter-spacing: -0.035em;
}
.proof-evidence-panel #prova-integracao p {
  max-width: 31ch;
}
@media (max-width: 760px) {
  .proof-evidence-panel #prova-automacao strong,
  .proof-evidence-panel #prova-integracao strong {
    font-size: clamp(2.85rem, 15vw, 4rem);
  }
  .proof-evidence-panel #prova-integracao strong {
    white-space: normal;
  }
}

.proof-evidence-panel #prova-integracao strong {
  font-size: clamp(2.75rem, 3.35vw, 3.25rem);
}

@media (max-width: 1400px) and (min-width: 761px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 42px;
    min-height: auto;
    padding-top: 34px;
    padding-bottom: 56px;
  }
  .hero h1 {
    max-width: 820px;
  }
  .product-dashboard.analytics-scene {
    min-height: 620px;
  }
  .dashboard-shell {
    width: 100%;
    height: 620px;
    min-height: 0;
  }
}


/* Final typography scale pass */
:root {
  --type-section-title: clamp(2.45rem, 4vw, 4.55rem);
  --type-panel-title: clamp(1.65rem, 2.65vw, 3.05rem);
  --type-card-title: clamp(1.35rem, 1.75vw, 1.9rem);
  --type-body: 1rem;
  --type-body-large: clamp(1.05rem, 1.18vw, 1.16rem);
  --type-label: 0.78rem;
  --type-ui: 0.82rem;
  --type-proof-metric: clamp(2.75rem, 3.35vw, 3.25rem);
}

main > section.shell:not(.hero) .section-heading h2,
main > section.shell:not(.hero) .section-heading--editorial h2,
main > section.shell:not(.hero) .section-heading--proof h2,
main > section.shell:not(.hero) .section-heading--projects h2,
main > section.shell:not(.hero) .section-heading--solutions h2,
main > section.shell:not(.hero) .about-copy h2,
main > section.shell:not(.hero).contact h2 {
  font-size: var(--type-section-title);
  line-height: 1.04;
  font-weight: 830;
}

main > section.shell:not(.hero) .section-heading p,
main > section.shell:not(.hero) .section-heading--editorial p,
main > section.shell:not(.hero) .section-heading--proof p,
main > section.shell:not(.hero) .section-heading--projects p,
main > section.shell:not(.hero) .section-heading--solutions p,
main > section.shell:not(.hero) .about-copy p,
main > section.shell:not(.hero).contact p {
  font-size: var(--type-body-large);
  line-height: 1.62;
}

.audience-context-grid h3,
.solution-outcome-grid h3,
.proof-context-board h3,
.process-list h3,
.skill-groups strong {
  font-size: var(--type-card-title);
  line-height: 1.12;
}

.case-room .case-toggle strong,
.case-product-view .case-insight h4 {
  font-size: var(--type-panel-title);
  line-height: 1.04;
}

.audience-context-grid .audience-card > div > p,
.audience-context-grid dd,
.proof-evidence-panel .proof-card p,
.proof-card dd,
.proof-context-board p,
.case-product-view .case-insight p,
.case-summary-copy p,
.solution-outcome-grid p,
.solution-outcome-grid li,
.process-list p,
.skill-groups span,
.contact p {
  font-size: var(--type-body);
  line-height: 1.55;
}

.audience-index,
.solution-index,
.case-room .case-toggle span,
.case-product-view .case-insight span,
.audience-context-grid dt,
.proof-card dt,
.proof-evidence-panel .proof-card > span,
.proof-context-board li > span,
.case-evidence-grid small,
.case-readout dt,
.dashboard-card h2,
.summary-strip span,
.card-heading span,
.dashboard-data-table th,
.dashboard-data-table td,
.process-queue div,
.process-queue strong {
  font-size: var(--type-label);
}

.nav-links,
.nav-action,
.button,
.toolbar-actions button,
.dashboard-nav span {
  font-size: var(--type-ui);
}

.proof-evidence-panel .proof-card strong,
.proof-evidence-panel #prova-analise strong,
.proof-evidence-panel #prova-automacao strong,
.proof-evidence-panel #prova-integracao strong {
  width: 100%;
  margin-top: 28px;
  color: var(--ink);
  font-size: var(--type-proof-metric) !important;
  line-height: 0.98;
  letter-spacing: -0.025em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.proof-evidence-panel .proof-card--primary strong {
  color: #ffffff;
}

.proof-evidence-panel .proof-card strong span {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit;
}

.proof-evidence-panel .proof-card--primary > span {
  color: rgba(255, 255, 255, 0.96);
}

.proof-evidence-panel .proof-card--primary p,
.proof-evidence-panel .proof-card--primary dt,
.proof-evidence-panel .proof-card--primary dd {
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 760px) {
  :root {
    --type-section-title: clamp(2.2rem, 10.5vw, 3.2rem);
    --type-panel-title: clamp(1.6rem, 8vw, 2.35rem);
    --type-card-title: 1.45rem;
    --type-body-large: 1rem;
    --type-proof-metric: clamp(2.75rem, 11.3vw, 3.25rem);
  }
}


/* Final fine tune: proof contrast and project typography */
.proof-evidence-panel .proof-card.proof-card--primary,
.proof-evidence-panel .proof-card.proof-card--primary * {
  color: rgba(255, 255, 255, 0.92) !important;
}

.proof-evidence-panel .proof-card.proof-card--primary > span,
.proof-evidence-panel .proof-card.proof-card--primary dt {
  color: rgba(255, 255, 255, 0.96) !important;
}

.proof-evidence-panel .proof-card.proof-card--primary strong,
.proof-evidence-panel .proof-card.proof-card--primary strong span {
  color: #ffffff !important;
}

.proof-evidence-panel .proof-card.proof-card--primary p,
.proof-evidence-panel .proof-card.proof-card--primary dd {
  color: rgba(255, 255, 255, 0.92) !important;
}

.proof-evidence-panel .proof-card.proof-card--primary dl div,
.proof-evidence-panel .proof-card.proof-card--primary dl div:first-child {
  border-color: rgba(255, 255, 255, 0.22) !important;
}

.case-room .case-toggle {
  grid-template-columns: minmax(220px, 0.3fr) minmax(0, 0.7fr);
  min-height: 104px;
  padding: 26px 32px;
}

.case-room .case-toggle span {
  color: var(--blue);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(0.86rem, 0.9vw, 0.98rem) !important;
  line-height: 1.35;
  font-weight: 720;
  letter-spacing: 0;
}

.case-room .case-toggle strong {
  max-width: 760px;
  font-size: clamp(2rem, 2.65vw, 2.75rem) !important;
  line-height: 1.08;
  font-weight: 820;
}

@media (max-width: 760px) {
  .case-room .case-toggle {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: auto;
    padding: 20px;
    text-align: left;
  }

  .case-room .case-toggle span {
    font-size: 0.82rem !important;
  }

  .case-room .case-toggle strong {
    font-size: clamp(1.45rem, 7vw, 2.1rem) !important;
    line-height: 1.1;
  }
}


/* Final fine tune: hero dashboard sidebar containment */
.dashboard-shell {
  grid-template-columns: clamp(124px, 12vw, 132px) minmax(0, 1fr);
}

.dashboard-nav {
  min-width: 0;
}

.dashboard-nav nav {
  min-width: 0;
  padding-inline: 8px;
}

.dashboard-nav span {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  gap: 8px;
  padding-inline: 8px;
  overflow: hidden;
  color: #30384a;
  font-size: clamp(0.66rem, 0.68vw, 0.72rem) !important;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-nav svg {
  flex: 0 0 16px;
}

@media (max-width: 760px) {
  .dashboard-shell {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .dashboard-nav nav {
    padding-inline: 6px;
  }

  .dashboard-nav span {
    justify-content: center;
    gap: 0;
    padding-inline: 0;
    font-size: 0 !important;
    text-overflow: clip;
  }
}


/* Final fine tune: keep dashboard menu labels fully contained */
.dashboard-nav span {
  gap: 7px;
}


/* Final fine tune: sidebar width preserves full labels at compact desktop */
.dashboard-shell {
  grid-template-columns: clamp(128px, 12vw, 136px) minmax(0, 1fr);
}

@media (max-width: 760px) {
  .dashboard-shell {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .dashboard-nav span {
    gap: 0;
    font-size: 0 !important;
  }
}


/* About two-column alignment override */
main > section.about.shell:not(.hero) .about-copy h2,
main > section.about.shell:not(.hero) .about-copy p {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
@media (max-width: 760px) {
  main > section.about.shell:not(.hero) .about-copy h2,
  main > section.about.shell:not(.hero) .about-copy p {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}