/* TAKUVEN consulting site v2 — additions on top of the shared brand tokens (style.css).
   Width system, one type scale, dropdown nav, WhatsApp float. No new brand colors. */

/* ===== Width system: readable on laptops AND large screens ===== */
:root { --max-w: 1240px; --prose-w: 76ch; --sec-pad: 88px; }
/* Grid width stays constant; page zoom handles large screens */
@media (max-width: 700px) { :root { --sec-pad: 54px; } }
/* Neutralize the inherited very-wide stretch from style.css on huge screens */
@media (min-width: 1500px) {
  :root { --max-w: 1240px; }
  .header-inner { height: 76px; }
  .page-hero h1 { max-width: var(--max-w); }
  .page-hero p { max-width: 900px; }
}
section { padding: var(--sec-pad) 0; }
.prose { max-width: var(--prose-w); }
.center { text-align: center; }

/* ===== Type scale (one scale, all pages) ===== */
.hero-h1-consulting { font-size: 44px; line-height: 1.16; max-width: 920px; letter-spacing: -0.01em; }
@media (max-width: 700px) { .hero-h1-consulting { font-size: 30px; } }
.page-hero h1 { line-height: 1.2; }
.section-title { line-height: 1.25; }
.section-sub { line-height: 1.6; }
.section-head { max-width: 820px; margin: 0 auto 8px; text-align: center; }
.section-head.left { margin: 0 0 8px; text-align: left; }

/* ===== Dropdown navigation ===== */
.nav .dd { position: relative; }
.nav .dd > a { cursor: pointer; }
.nav .dd > a .car { font-size: 10px; margin-left: 5px; opacity: .7; }
.nav .dd-menu { position: absolute; top: calc(100% + 10px); left: -14px; min-width: 250px;
  background: var(--navy-800); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 8px; display: none; z-index: 60; }
.nav .dd:hover .dd-menu, .nav .dd:focus-within .dd-menu, .nav .dd.open .dd-menu { display: block; }
.nav .dd-menu a { display: block; padding: 10px 14px; border-radius: 8px; font-size: 14.5px;
  color: var(--slate-300); white-space: nowrap; }
.nav .dd-menu a:hover { background: rgba(0,194,199,0.10); color: var(--teal-400); }
@media (max-width: 1080px) {
  .nav .dd-menu { position: static; display: none; background: transparent; border: none;
    box-shadow: none; padding: 0 0 0 16px; }
  .nav .dd.open .dd-menu { display: block; }
}
.nav-toggle { color: var(--white); font-size: 24px; line-height: 1; }

/* ===== Hero stats ===== */
.hero .stats { display: flex; gap: clamp(18px, 4vw, 54px); flex-wrap: wrap; margin-top: 34px; }
.hero .stat .value { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--teal-400); }
.hero .stat .label { font-size: 13.5px; color: var(--slate-300); margin-top: 2px; max-width: 190px; }

/* ===== Card grids (one gap, one padding, equal heights) ===== */
.door-grid, .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 34px; align-items: stretch; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 34px; align-items: stretch; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 34px; align-items: stretch; }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .door-grid, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.door-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--mist-200);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease; }
.door-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.door-card h3 { color: var(--navy-700); font-size: 20px; margin-bottom: 10px; }
.door-card p { color: var(--slate-600); font-size: 15px; flex: 1; }
.door-cta { display: inline-block; margin-top: 14px; color: var(--teal-600); font-weight: 600; font-size: 14.5px; }

/* ===== Money chips ===== */
.money-chips { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.mchip { background: var(--navy-700); color: var(--white); border-radius: 999px; padding: 12px 22px;
  font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.mchip:first-child { background: var(--teal-600); }
.fineprint { color: var(--slate-400); font-size: 13px; margin-top: 16px; }

/* ===== Numbered step cards ===== */
.step-card { position: relative; padding-top: 36px; }
.step-tag { position: absolute; top: -16px; left: 26px; background: var(--teal-500); color: var(--navy-800);
  font-family: var(--font-display); font-weight: 700; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 16px; }
.step-meta { color: var(--teal-600); font-weight: 600; font-size: 13.5px; margin: 4px 0 10px; }

/* ===== Level chips + model strip ===== */
.lvl-chips { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.lchip { background: var(--white); border: 1px solid var(--mist-200); color: var(--navy-700);
  font-family: var(--font-display); font-weight: 600; font-size: 15px; border-radius: 999px; padding: 9px 18px; box-shadow: var(--shadow); }
.lchip.l5 { background: var(--navy-700); color: var(--teal-400); border-color: var(--navy-700); }
.lsep { color: var(--slate-400); font-weight: 600; }
.model-strip .ls-card { min-height: 210px; }
.ls-desc { font-size: 13px; color: var(--slate-600); margin-top: 8px; line-height: 1.45; }
.lvl-strip .ls-card.l5 .ls-desc { color: var(--mist-200); }
.mlvl-block { display: grid; grid-template-columns: 260px 1fr; gap: 28px; padding: 26px 0; border-bottom: 1px solid var(--mist-200); align-items: start; }
.mlvl-block:last-child { border-bottom: none; }
@media (max-width: 800px) { .mlvl-block { grid-template-columns: 1fr; gap: 10px; } }
.mlvl-name { font-family: var(--font-display); font-weight: 700; color: var(--navy-700); font-size: 20px; }
.mlvl-lvl { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-600); font-weight: 700; }
.mlvl-up { color: var(--purple-600); font-weight: 600; font-size: 14px; margin-top: 6px; }
.mlvl-block p { color: var(--slate-600); font-size: 15.5px; }

/* ===== Fact cards / proof ===== */
.fact-card { background: var(--white); border-left: 4px solid var(--teal-500); border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow); padding: 22px 24px; color: var(--navy-700); font-family: var(--font-display);
  font-weight: 600; font-size: 16px; }

/* ===== Experience wall (styled text, no logo images) ===== */
.wall { display: flex; gap: clamp(20px, 4vw, 56px); flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 26px; }
.wall span { color: var(--slate-400); opacity: .95; white-space: nowrap; transition: color .15s; }
.wall span:hover { color: var(--navy-700); }
.wall .w-ge { font-family: Georgia, serif; font-weight: 700; font-size: 30px; letter-spacing: .02em; }
.wall .w-dupont { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 24px; letter-spacing: .02em; font-style: italic; }
.wall .w-syngenta { font-family: var(--font-body); font-weight: 700; font-size: 23px; letter-spacing: .01em; }
.wall .w-medtronic { font-family: var(--font-body); font-weight: 600; font-size: 23px; letter-spacing: .04em; }
.wall .w-bcg { font-family: Georgia, serif; font-weight: 700; font-size: 26px; letter-spacing: .12em; }
.wall .w-givaudan { font-family: Georgia, serif; font-weight: 500; font-size: 24px; letter-spacing: .2em; text-transform: uppercase; }
.wall-label { text-align: center; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-400); font-weight: 600; }

/* ===== Rates ===== */
.rate-table { width: 100%; border-collapse: collapse; margin-top: 26px; background: var(--white);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.rate-table th { background: var(--navy-700); color: var(--white); text-align: left; padding: 13px 20px;
  font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.rate-table th:last-child, .rate-table td:last-child { text-align: right; }
.rate-table td { padding: 15px 20px; border-bottom: 1px solid var(--mist-200); color: var(--slate-600); font-size: 15.5px; }
.rate-table tr:last-child td { border-bottom: none; }
.rate-table td.fee { color: var(--navy-700); font-family: var(--font-display); font-weight: 700; }
.sa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
@media (max-width: 680px) { .sa-grid { grid-template-columns: 1fr; } }
.sa-card { border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.sa-card .sa-tag { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.sa-card .sa-v { font-family: var(--font-display); font-weight: 700; font-size: 34px; margin: 8px 0 2px; }
.sa-card.m { background: var(--white); border: 1px solid var(--mist-200); }
.sa-card.m .sa-tag { color: var(--slate-400); } .sa-card.m .sa-v { color: var(--navy-700); }
.sa-card.y { background: var(--navy-700); }
.sa-card.y .sa-tag { color: var(--teal-400); } .sa-card.y .sa-v { color: var(--white); }
.sa-card.y .sa-l { color: var(--slate-300); }
.sa-card .sa-l { font-size: 14px; color: var(--slate-600); }

/* ===== CTA band ===== */
.cta-band { background: var(--navy-700); padding: 74px 0; }
.cta-band h2 { color: var(--white); font-family: var(--font-display); font-size: 30px; }
.cta-band .cta-body { color: var(--slate-300); font-size: 17px; max-width: 780px; margin: 14px auto 0; }
.cta-band .cta-qual { color: var(--mist-200); font-size: 14px; max-width: 700px; margin: 16px auto 0; }
.cta-band .btn-row { justify-content: center; margin-top: 26px; }

/* ===== Callouts, offer list, misc ===== */
.callout-box { background: var(--white); border-left: 4px solid var(--purple-500); border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow); padding: 20px 24px; color: var(--navy-700); font-size: 15.5px; margin-top: 22px; }
.key-line { background: var(--mist-100); border-left: 4px solid var(--teal-500); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 24px; color: var(--navy-700); font-weight: 600; font-size: 16px; margin-top: 26px; }
.offer-list { margin: 12px 0 0 0; padding-left: 20px; }
.offer-list li { margin-bottom: 10px; color: var(--slate-600); font-size: 15.5px; }
.qual-list { margin: 14px 0 0 0; padding-left: 22px; }
.qual-list li { color: var(--slate-600); font-size: 16px; margin-bottom: 10px; }
.btn-ghost-dark { border: 1.5px solid var(--navy-700); color: var(--navy-700); border-radius: 10px; padding: 12px 22px;
  font-weight: 600; text-decoration: none; display: inline-block; }
.btn-ghost-dark:hover { background: var(--navy-700); color: var(--white); }

/* ===== Iceberg (interim brand visual; swaps for Frederic's exact image) ===== */
.ice-grid { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 26px; margin-top: 34px; align-items: stretch; }
@media (max-width: 1000px) { .ice-grid { grid-template-columns: 1fr; } }
.ice-col h3 { font-size: 19px; margin-bottom: 2px; }
.ice-col.vis h3 { color: var(--navy-700); }
.ice-col.hid h3 { color: var(--purple-600); }
.ice-col .ice-sub { font-style: italic; color: var(--slate-400); font-size: 14px; margin-bottom: 14px; }
.ice-item { margin-bottom: 14px; }
.ice-item b { display: block; color: var(--navy-700); font-size: 15px; }
.ice-item span { color: var(--slate-600); font-size: 13.5px; }
.ice-item.v b::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--teal-500); margin-right: 8px; }
.ice-item.h b::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--purple-500); margin-right: 8px; }
.ice-visual { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; min-height: 380px;
  background: linear-gradient(180deg, #BFE7F5 0%, #8FD1EC 28%, #1A6E96 34%, #0F4A70 60%, #0B2F4E 100%); }
.ice-visual .berg { position: absolute; left: 50%; transform: translateX(-50%); }
.ice-visual .pct { position: absolute; background: rgba(9,26,43,0.55); color: #fff; font-family: var(--font-display);
  font-weight: 700; font-size: 24px; padding: 8px 16px; border-radius: 10px; }
.ice-visual .pct.top { top: 14px; left: 16px; transform: none; }
.ice-visual .pct.bot { bottom: 16px; right: 16px; left: auto; transform: none; }
.ice-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== Roadblocks ===== */
.rb-card { background: var(--mist-100); border-radius: var(--radius); padding: 26px 28px; margin-top: 22px;
  display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: start; }
@media (max-width: 680px) { .rb-card { grid-template-columns: 1fr; } }
.rb-num { width: 56px; height: 56px; border-radius: 50%; background: var(--navy-800); color: var(--teal-400);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.rb-card h3 { color: var(--navy-700); font-size: 17.5px; margin-bottom: 6px; }
.rb-q { font-style: italic; color: var(--slate-600); font-size: 16px; margin-bottom: 8px; }
.rb-a { color: var(--slate-600); font-size: 15px; }
.rb-a b { color: var(--purple-600); }

/* ===== Charts (illustrative SVG figures) ===== */
.fig { background: var(--white); border: 1px solid var(--mist-200); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 26px 26px 14px; margin-top: 30px; }
.fig svg { width: 100%; height: auto; display: block; }
.fig-cap { font-size: 13px; color: var(--slate-400); margin: 10px 4px 6px; }

/* ===== Journey image ===== */
.journey-img { border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; margin-top: 30px; background: var(--white); }
.journey-img img { width: 100%; display: block; }

/* ===== AI platform teaser ===== */
.tease-hero { background: radial-gradient(1100px 500px at 70% -10%, rgba(123,97,255,0.25), transparent 60%),
  radial-gradient(900px 500px at 10% 110%, rgba(0,194,199,0.18), transparent 60%), var(--navy-800); }
.tease-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
.code-panel, .pilot-panel { display: none; margin-top: 26px; }
.code-panel.open, .pilot-panel.open { display: block; }
.code-box { display: flex; gap: 10px; max-width: 420px; }
.code-box input { flex: 1; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--mist-200); font-size: 15px; letter-spacing: .2em; }
.code-msg { display: none; margin-top: 12px; color: var(--coral-500); font-weight: 600; font-size: 14.5px; }
.code-msg.show { display: block; }
.pilot-panel .calc-card { max-width: 560px; }

/* ===== About photo ===== */
.about-grid { display: grid; grid-template-columns: 340px 1fr; gap: 44px; align-items: start; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
.about-photo img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-lg); display: block; }
.about-text p { color: var(--slate-600); font-size: 16px; margin-bottom: 16px; max-width: var(--prose-w); }
.marks-line { margin-top: 22px; color: var(--teal-600); font-family: var(--font-display); font-weight: 600; font-size: 15px; }

/* ===== WhatsApp float (same as platform site) ===== */
.wa-btn { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25); transition: transform .15s; }
.wa-btn:hover { transform: scale(1.08); }
.wa-btn svg { width: 30px; height: 30px; fill: #fff; }
@media print { .wa-btn { display: none; } }

/* ===== Privacy ===== */
.privacy-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 8px; }

/* ===== Round 3: impact band (money section, elevated) ===== */
.impact-band { background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-700) 55%, #16406B 100%); position: relative; overflow: hidden; }
.impact-band::after { content: ""; position: absolute; right: -140px; top: -140px; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,194,199,0.16), transparent 65%); }
.impact-band .eyebrow { color: var(--teal-400); }
.impact-band h2 { color: var(--white); }
.impact-band .section-sub { color: var(--slate-300); }
.ib-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
@media (max-width: 800px) { .ib-stats { grid-template-columns: 1fr; } }
.ib-stat { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09); border-radius: var(--radius);
  padding: 30px 26px; text-align: center; position: relative; z-index: 1; }
.ib-stat .num { font-family: var(--font-display); font-weight: 700; font-size: 54px; color: var(--teal-400); line-height: 1; }
.ib-stat.alt .num { color: var(--white); }
.ib-stat .lbl { color: var(--slate-300); font-size: 15px; margin-top: 10px; }
.impact-band .fineprint { color: var(--slate-400); position: relative; z-index: 1; }

/* ===== Track record: lead impact banner ===== */
.impact-lead { background: var(--navy-700); border-radius: var(--radius); padding: 40px 44px; text-align: center;
  box-shadow: var(--shadow-lg); margin-top: 34px; }
.impact-lead .pre { color: var(--teal-400); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.impact-lead .big { font-family: var(--font-display); font-weight: 700; font-size: 62px; color: var(--white); line-height: 1.05; margin: 10px 0 6px; }
.impact-lead .sub { color: var(--slate-300); font-size: 16px; }
@media (max-width: 700px) { .impact-lead .big { font-size: 42px; } }
.awards-line { text-align: center; color: var(--navy-700); font-family: var(--font-display); font-weight: 600; font-size: 15.5px; margin-top: 26px; }

/* ===== Endorsement quote cards ===== */
.quote-card { background: var(--white); border: 1px solid var(--mist-200); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 30px 32px; margin-top: 26px; position: relative; }
.quote-card::before { content: "\201C"; position: absolute; top: 6px; left: 20px; font-family: Georgia, serif; font-size: 64px;
  color: var(--teal-500); opacity: .35; line-height: 1; }
.quote-card blockquote { margin: 0; color: var(--slate-600); font-size: 15.5px; line-height: 1.65; font-style: italic; }
.quote-attr { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.quote-attr img.avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow); }
.quote-attr .who b { display: block; color: var(--navy-700); font-size: 15px; font-family: var(--font-display); }
.quote-attr .who span { color: var(--slate-400); font-size: 13px; }
.li-badge { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--slate-400); font-size: 12px; }
.li-badge svg { width: 18px; height: 18px; fill: #0A66C2; }
.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .quote-grid { grid-template-columns: 1fr; } }
.quote-grid .quote-card { margin-top: 0; }

/* ===== CPP block ===== */
.cpp-card { background: var(--mist-100); border-left: 4px solid var(--purple-500); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 26px; margin-top: 22px; }
.cpp-card h3 { color: var(--navy-700); font-size: 17px; }
.cpp-card p { color: var(--slate-600); font-size: 14.5px; margin-top: 6px; }

/* ===== Narrow content blocks: centered heads, aligned columns ===== */
.narrow-block { max-width: 880px; margin: 0 auto; }
.narrow-block > .section-title { text-align: center; }
.narrow-block > .section-sub { text-align: center; }
.narrow-block .qual-list { max-width: 720px; margin-left: auto; margin-right: auto; }
.narrow-block .btn-row { justify-content: center; }

/* ===== Model tables ===== */
.model-table { width: 100%; border-collapse: collapse; margin-top: 24px; background: var(--white); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); font-size: 14.5px; }
.model-table th { background: var(--navy-700); color: var(--white); text-align: left; padding: 12px 16px; font-size: 12.5px;
  letter-spacing: .05em; text-transform: uppercase; }
.model-table td { padding: 13px 16px; border-bottom: 1px solid var(--mist-200); color: var(--slate-600); }
.model-table tr:last-child td { border-bottom: none; }
.model-table td:first-child { color: var(--navy-700); font-weight: 600; }
.model-table td.w { color: var(--purple-600); font-weight: 700; }

/* ===== Iceberg photo overlay ===== */
.ice-visual { min-height: 420px; }
.ice-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ===== Leakage: dashboard composite ===== */
.fig.dark { background: var(--navy-800); border-color: var(--navy-700); }
.fig.dark .fig-cap { color: var(--slate-400); }
.wall .w-monsanto { font-family: var(--font-body); font-weight: 700; font-size: 23px; letter-spacing: .03em; }

/* ===== Round 4: one alignment axis, auto-scaling, upgraded components ===== */
/* Auto-scaling: the whole layout grows with the screen */
@media (min-width: 1680px) { body { zoom: 1.12; } }
@media (min-width: 2000px) { body { zoom: 1.25; } }
@media (min-width: 2400px) { body { zoom: 1.4; } }

/* One axis: heroes centered, section titles centered, body text justified with centered last line */
.page-hero .container { text-align: center; }
.page-hero h1 { margin-left: auto; margin-right: auto; }
.page-hero p { margin-left: auto; margin-right: auto; text-align: justify; text-align-last: center; }
.hero .hero-content { margin-left: auto; margin-right: auto; text-align: center; }
.hero-h1-consulting { margin-left: auto; margin-right: auto; }
.hero p.lead { margin-left: auto; margin-right: auto; text-align: justify; text-align-last: center; }
.hero .btn-row, .hero .stats { justify-content: center; }
.section-title { text-align: center; }
.section-sub { margin-left: auto; margin-right: auto; }
.section-head .section-sub, .narrow-block .section-sub, .narrow-block p.section-sub { text-align: justify; text-align-last: center; }
.about-text .section-title { text-align: left; }
.about-text p { text-align: justify; text-align-last: left; }
.narrow-block .btn-row { justify-content: center; }
.narrow-block .eyebrow { text-align: center; }
.cta-band .cta-body { text-align: justify; text-align-last: center; }

/* Key line: bigger, grid-wide, consistent */
.key-line { font-size: 19px; line-height: 1.55; padding: 26px 36px; text-align: center; border-radius: var(--radius); border-left: 5px solid var(--teal-500); box-shadow: var(--shadow); background: var(--white); }
.bg-mist .key-line { background: var(--white); }
section:not(.bg-mist) .key-line { background: var(--mist-100); }

/* Native four-stage journey */
.journey { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 40px; }
@media (max-width: 1000px) { .journey { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .journey { grid-template-columns: 1fr; } }
.j-stage { background: var(--white); border: 1px solid var(--mist-200); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 26px; text-align: center; position: relative; }
.j-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--navy-700); color: var(--teal-400); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.j-circle { width: 96px; height: 96px; border-radius: 50%; margin: 6px auto 16px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 34px; }
.j1 .j-circle { background: #CFF6F7; color: var(--navy-700); }
.j2 .j-circle { background: #7FD8DA; color: var(--navy-700); }
.j3 .j-circle { background: #00C2C7; color: var(--white); }
.j4 .j-circle { background: #00A8AD; color: var(--white); }
.j-stage h3 { color: var(--navy-700); font-size: 18px; line-height: 1.3; }
.j-tag { color: var(--teal-600); font-style: italic; font-weight: 600; font-size: 14.5px; margin: 4px 0 12px; }
.j-stage p { color: var(--slate-600); font-size: 14.5px; text-align: justify; text-align-last: center; }
.j-arrow { position: absolute; right: -22px; top: 72px; color: var(--slate-400); font-size: 22px; font-weight: 700; z-index: 2; }
@media (max-width: 1000px) { .j-arrow { display: none; } }