/* ================================================================
   modelling-solutions.jsx — Modelling (Solutions), Journey C.
   High-intent regulatory buyer (IFRS 9 / CECL) routed to sales.
   Single action: qualified enquiry to the modelling team.
   Secondary: methodology brochure download.
   Dense, technical register. British English. No dashes in copy.
   Everything visual is CE house style (purple, type scale, grid).
================================================================ */
const { MAX, NS, SERIF, SiteHeader, SiteFooter, Icon } = window;
const { Button } = window.CapitalEconomicsDesignSystem_f2a5b2;

/* ---------- icons (Lucide 24x24 / 2px) ---------- */
const MI = {
  "arrow-right": <><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></>,
  "arrow-down": <><path d="M12 5v14" /><path d="m19 12-7 7-7-7" /></>,
  download: <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><path d="M7 10l5 5 5-5" /><path d="M12 15V3" /></>,
  check: <path d="M20 6 9 17l-5-5" />,
  shield: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></>,
  scale: <><path d="M12 3v18" /><path d="M5 7h14" /><path d="m5 7-3 6h6z" /><path d="m19 7-3 6h6z" /><path d="M7 21h10" /></>,
  layers: <><path d="m12 2 9 5-9 5-9-5 9-5z" /><path d="m3 12 9 5 9-5" /><path d="m3 17 9 5 9-5" /></>,
  sliders: <><path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6" /></>,
  grid: <><rect width="7" height="7" x="3" y="3" rx="1" /><rect width="7" height="7" x="14" y="3" rx="1" /><rect width="7" height="7" x="14" y="14" rx="1" /><rect width="7" height="7" x="3" y="14" rx="1" /></>,
  quote: <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" fill="currentColor" stroke="none" />,
};
function MIcon({ name, size = 20, stroke = 2, style }) {
  return <svg style={style} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{MI[name]}</svg>;
}

/* ---------- editorial "to confirm" marker (neutral, not brand) ---------- */
function ToConfirm({ children, note }) {
  return (
    <span className="md-tc" title={note}>
      <span className="md-tc-tag">To confirm</span>
      <span className="md-tc-body">{children}</span>
    </span>
  );
}

/* ================================================================
   DATA
================================================================ */
const CRED = [
  "25+ years of forecasting",
  "Accuracy awards from LSEG, Consensus Economics and FocusEconomics",
  "UK, international and all 50 US states",
  "Quarterly updates plus real time during volatility",
];

const COMPARE = [
  { k: "Geographic coverage", ifrs: "UK and international", cecl: "US national and all 50 states plus DC" },
  { k: "Update frequency", ifrs: "Quarterly plus real time", cecl: "Quarterly plus real time" },
  { k: "Packages", ifrs: "Off-the-shelf (UK only) or bespoke", cecl: "Bespoke" },
  { k: "Delivery format", ifrs: null, cecl: null, gap: true },
];

const SCENARIOS = [
  { code: "U2", name: "Strong Upside", pct: 92, tone: "up" },
  { code: "U1", name: "Mild Upside", pct: 75, tone: "up" },
  { code: "BL", name: "Baseline", pct: 50, tone: "base" },
  { code: "D1", name: "Moderate Downside", pct: 25, tone: "down" },
  { code: "D2", name: "Severe Downside", pct: 10, tone: "down" },
  { code: "D3", name: "Extreme Downside", pct: 4, tone: "down" },
];

const CLIENT_SET = [
  { name: "Stronger Near-Term Rebound", w: "90%" },
  { name: "Baseline Forecast", w: "50%" },
  { name: "Moderate Downturn", w: "25%" },
  { name: "More Severe Recession", w: "10%" },
];

const METHOD = [
  { icon: "layers", h: "A baseline that isn't a black box", b: "The baseline is our published modal forecast, the single most likely path for each economy. It is the same forecast our subscribers read and interrogate every day, produced by named economists who will explain their assumptions. Nothing in the scenario set originates from a process you cannot see." },
  { icon: "sliders", h: "A proprietary stress-testing model", b: "Alternative scenarios are generated by a structural macroeconometric model that propagates a shock consistently across output, prices, labour and financial variables. Relationships are estimated, documented and stable across reporting dates, so a downside in one variable carries through to the rest in a defensible way." },
  { icon: "scale", h: "Probabilities anchored to a track record", b: "Percentile positions are fixed across reporting dates. The probability weight attached to each scenario moves with our Economic Risk Index, a quantified read of where risks sit relative to the baseline, rather than a subjective judgement made afresh each quarter." },
  { icon: "grid", h: "Comprehensive variable coverage", b: null, isVars: true },
];

const VARIABLES = [
  "Real GDP", "Unemployment rate", "CPI inflation", "Policy interest rate",
  "House prices", "Government bond yields", "Corporate credit spreads", "Equity prices",
  "Exchange rates", "Household disposable income", "Business investment", "Commercial real estate prices",
  "Wage growth", "Oil prices", "Consumer spending",
];

const WHY = [
  { icon: "shield", h: "Regulatory confidence", b: "Scenarios are built to withstand the scrutiny of your auditor and your regulator. Methodology, assumptions and percentile positions are documented and repeatable, so the numbers in your ECL model can be traced back to a stated basis." },
  { icon: "scale", h: "Probabilities you can defend", b: "Weights are not chosen to produce a convenient answer. They are tied to our Economic Risk Index and move with measured conditions, giving you a probability basis you can put in front of a review committee." },
  { icon: "layers", h: "Stress testing compatibility", b: "The scenario structure maps onto the frameworks used in regulatory stress testing, so the same set can support both IFRS 9 or CECL provisioning and your wider stress testing programme without a second methodology." },
  { icon: "sliders", h: "Bespoke flexibility", b: "The number of scenarios, their names, the percentile anchors and the variable list can all be set to your internal conventions, while the underlying model and probability method stay constant." },
];

const TEAM = [
  { name: "Paul Ashworth", role: "Chief Data and Modelling Economist", img: "assets/people/Paul-Ashworth.png" },
  { name: "Alexandra Dreisin", role: "Head of Modelling", img: "assets/people/Alexandra-Dreisin.jpg", objPos: "center 30%" },
  { name: "Ruben Abargues", role: "Economist", img: "assets/people/Ruben-Abargues.jpg" },
  { name: "Alex Kerr", role: "Economist", img: "assets/people/Alex-Kerr.jpg" },
];

const STEPS = [
  { n: "01", h: "Scope the requirement", b: "We agree coverage, the accounting standard, the number of scenarios and the variables you need, with the modelling team and your risk function in the room." },
  { n: "02", h: "Calibrate to your book", b: "Percentile anchors, probability thresholds and naming are set to your internal conventions and mapped to your ECL model inputs." },
  { n: "03", h: "Deliver", b: "The first scenario set is delivered in the agreed format, with the supporting methodology documentation your auditor will expect." },
  { n: "04", h: "Update", b: "Scenarios refresh on the agreed cycle, quarterly as standard, with real time revisions when conditions move materially." },
];

/* ================================================================
   Distribution curve — the page's one strong visual.
   Bell curve across the plausible-outcomes distribution with the
   six scenarios marked at their fixed percentile positions.
================================================================ */
function DistributionCurve() {
  const W = 560, H = 300, padX = 24, padTop = 24, baseY = 250;
  const x = (pct) => padX + (pct / 100) * (W - padX * 2);
  // gaussian height, mean 50, sd ~19, scaled
  const peak = 190;
  const g = (pct) => {
    const z = (pct - 50) / 19;
    return peak * Math.exp(-0.5 * z * z);
  };
  const y = (pct) => baseY - g(pct);
  const pts = [];
  for (let p = 0; p <= 100; p += 1) pts.push([x(p), y(p)]);
  const line = pts.map((p, i) => (i ? "L" : "M") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" ");
  const area = line + ` L ${x(100).toFixed(1)} ${baseY} L ${x(0).toFixed(1)} ${baseY} Z`;
  const toneColour = (t) => t === "base" ? "#164194" : t === "up" ? "#3c8f5a" : "#e74f4e";
  return (
    <svg className="md-curve" viewBox={`0 0 ${W} ${H}`} width="100%" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Distribution of plausible outcomes with six scenarios marked at fixed percentile positions">
      <defs>
        <linearGradient id="mdCurveFill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#164194" stopOpacity="0.14" />
          <stop offset="100%" stopColor="#164194" stopOpacity="0" />
        </linearGradient>
      </defs>
      {/* baseline axis */}
      <line x1={padX} y1={baseY} x2={W - padX} y2={baseY} stroke="var(--border-default)" strokeWidth="1" />
      <path d={area} fill="url(#mdCurveFill)" />
      <path d={line} fill="none" stroke="#164194" strokeWidth="2.4" strokeLinecap="round" />
      {SCENARIOS.map((s) => {
        const px = x(s.pct), py = y(s.pct), c = toneColour(s.tone);
        return (
          <g key={s.code}>
            <line x1={px} y1={py} x2={px} y2={baseY} stroke={c} strokeWidth="1.4" strokeDasharray="3 3" strokeOpacity="0.55" />
            <circle cx={px} cy={py} r="5" fill="#fff" stroke={c} strokeWidth="2.4" />
            <text x={px} y={py - 12} textAnchor="middle" className="md-curve-code" fill={c}>{s.code}</text>
            <text x={px} y={baseY + 18} textAnchor="middle" className="md-curve-pct">{s.pct}th</text>
          </g>
        );
      })}
    </svg>
  );
}

/* ================================================================
   Building blocks
================================================================ */
function Eyebrow({ children, on }) {
  return <div className={"md-eyebrow" + (on === "dark" ? " on-dark" : "")}>{children}</div>;
}

function ImgOrSlot({ person }) {
  if (person.img) {
    return <img className="md-team-photo" src={person.img} alt={person.name} loading="lazy" style={person.objPos ? { objectPosition: person.objPos } : undefined} />;
  }
  return (
    <image-slot class="md-team-photo" id={person.slot} shape="rect" placeholder={"Photograph: " + person.name}></image-slot>
  );
}

/* ================================================================
   PAGE
================================================================ */
function ModellingPage() {
  return (
    <div className="md-wrap">
      <SiteHeader />

      {/* 1 — HERO (compressed navy band, consistent with the marketing site) */}
      <section className="md-hero">
        <div className="md-hero-in">
          <Eyebrow on="dark">Modelling</Eyebrow>
          <h1 className="md-h1" style={{ maxWidth: 620 }}>Regulatory stress testing for IFRS 9 and CECL</h1>
          <p className="md-hero-sub">Independently produced macroeconomic scenarios, built on more than 25 years of award-winning forecasting, to help lenders meet regulatory requirements with confidence.</p>
          <div className="md-hero-cta">
            <Button variant="inverse" size="lg" iconEnd={<MIcon name="arrow-right" size={18} />}>Talk to our modelling team</Button>
            <Button variant="ghost" size="lg" className="btn-on-blue" iconStart={<MIcon name="download" size={17} />}>Download the methodology brochure</Button>
          </div>
          <ul className="md-cred">
            {CRED.map((c, i) => <li key={i} className="md-cred-item">{c}</li>)}
          </ul>
        </div>
      </section>

      <main>
        {/* 2 — WHAT YOU GET */}
        <section className="md-sec">
          <div className="md-sec-in">
            <div className="md-sec-head">
              <Eyebrow>What you get</Eyebrow>
              <h2 className="md-h2" style={{ maxWidth: "none" }}>Two scenario products, one methodology</h2>
              <p className="md-lead" style={{ maxWidth: "none" }}>Both are produced from the same underlying model and probability framework. Choose by the accounting standard you report against.</p>
            </div>

            <div className="md-services">
              {[
                { std: "IFRS 9", line: "Probability-weighted lifetime forecast scenarios for IFRS 9 compliance." },
                { std: "CECL", line: "Reasonable and supportable forecast scenarios for Current Expected Credit Loss compliance." },
              ].map((s) => (
                <a key={s.std} className="md-service" href="#framework">
                  <div className="md-service-top">
                    <span className="md-service-kicker">Economic scenarios for</span>
                    <h3 className="md-service-h">{s.std}</h3>
                  </div>
                  <p className="md-service-line">{s.line}</p>
                  <div className="md-service-foot">
                    <span className="md-service-more">See the scenario framework<MIcon name="arrow-down" size={15} /></span>
                    <span className="md-dl">Download the {s.std} brochure<MIcon name="download" size={14} /></span>
                  </div>
                </a>
              ))}
            </div>

            {/* comparison table */}
            <div className="md-table" role="table" aria-label="IFRS 9 and CECL compared">
              <div className="md-tr md-tr-head" role="row">
                <span className="md-th md-th-k" role="columnheader">Compare</span>
                <span className="md-th md-th-prod" role="columnheader">IFRS 9</span>
                <span className="md-th md-th-prod" role="columnheader">CECL</span>
              </div>
              {COMPARE.map((r) => (
                <div key={r.k} className="md-tr" role="row">
                  <span className="md-td md-td-k" role="rowheader">{r.k}</span>
                  {r.gap ? (
                    <>
                      <span className="md-td" role="cell" data-col="IFRS 9"><ToConfirm note="Delivery format not yet specified">What the client receives: Excel, CSV, API, written narrative</ToConfirm></span>
                      <span className="md-td" role="cell" data-col="CECL"><ToConfirm note="Delivery format not yet specified">What the client receives: Excel, CSV, API, written narrative</ToConfirm></span>
                    </>
                  ) : (
                    <>
                      <span className="md-td" role="cell" data-col="IFRS 9">{r.ifrs}</span>
                      <span className="md-td" role="cell" data-col="CECL">{r.cecl}</span>
                    </>
                  )}
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* 3 — SCENARIO FRAMEWORK (weighted band) */}
        <section className="md-band" id="framework">
          <div className="md-sec-in">
            <div className="md-sec-head">
              <Eyebrow>The scenario framework</Eyebrow>
              <h2 className="md-h2" style={{ maxWidth: 640 }}>Up to six scenarios, calibrated to your book</h2>
              <p className="md-lead" style={{ maxWidth: 640 }}>The default framework spans up to six scenarios across the distribution of plausible outcomes, each anchored to a specific percentile. The baseline is the modal forecast, the single most likely path, close to the 50th percentile under neutral conditions.</p>
            </div>

            <div className="md-framework">
              <div className="md-curve-wrap">
                <div className="md-curve-card">
                  <div className="md-curve-title">Distribution of plausible outcomes</div>
                  <DistributionCurve />
                  <div className="md-curve-axis">More severe outcome <span>More favourable outcome</span></div>
                </div>
              </div>

              <div className="md-scentable">
                {SCENARIOS.map((s) => (
                  <div key={s.code} className={"md-scen md-scen-" + s.tone}>
                    <span className="md-scen-code">{s.code}</span>
                    <span className="md-scen-name">{s.name}</span>
                    <span className="md-scen-pct"><span className="md-scen-val">~{s.pct}th</span><span className="md-scen-pctlab">percentile</span></span>
                  </div>
                ))}
                <p className="md-source">Source: Capital Economics. Percentile positions are fixed across reporting dates; probability weights move with our Economic Risk Index.</p>
              </div>
            </div>

            {/* Built to flex */}
            <div className="md-flex">
              <div className="md-flex-head">
                <div className="md-flex-eyebrow">Bespoke configuration</div>
                <h3 className="md-flex-h">Built to flex</h3>
                <p className="md-flex-b">Clients can specify the number of scenarios, name them to internal conventions, and set the percentile or cumulative probability threshold. The example alongside shows a four-scenario client set.</p>
              </div>
              <div className="md-flex-panel">
                <div className="md-flex-panel-head">
                  <span className="md-flex-panel-title">Four-scenario client set</span>
                  <span className="md-flex-tag">Illustrative</span>
                </div>
                <div className="md-flex-set">
                  {CLIENT_SET.map((c) => (
                    <div key={c.name} className="md-flex-item">
                      <span className="md-flex-w">{c.w}</span>
                      <span className="md-flex-name">{c.name}</span>
                    </div>
                  ))}
                </div>
                <p className="md-flex-eg">An example configuration, not a second product.</p>
              </div>
            </div>

            <p className="md-closing">Whatever the configuration, every scenario is built on the same underlying model and probability methodology, with narratives that adapt to the nature of the risk, typically demand-led but stagflationary when supply-side or price pressures dominate.</p>
          </div>
        </section>

        {/* 4 — METHODOLOGY */}
        <section className="md-sec">
          <div className="md-sec-in">
            <div className="md-sec-head">
              <Eyebrow>Methodology</Eyebrow>
              <h2 className="md-h2" style={{ maxWidth: "none" }}>How the scenarios are produced</h2>
            </div>
            <div className="md-method">
              {METHOD.map((m) => (
                <div key={m.h} className={"md-mcard" + (m.isVars ? " is-vars" : "")}>
                  <span className="md-micon"><MIcon name={m.icon} size={20} /></span>
                  <h3 className="md-mcard-h">{m.h}</h3>
                  {m.isVars ? (
                    <div className="md-vars">
                      <p className="md-vars-note"><span className="md-tc-tag">To confirm</span> Final indicator list pending sign-off from the modelling team.</p>
                      <div className="md-chips">
                        {VARIABLES.map((v) => <span key={v} className="md-chip">{v}</span>)}
                        <span className="md-chip md-chip-more">and others by request</span>
                      </div>
                    </div>
                  ) : (
                    <p className="md-mcard-b">{m.b}</p>
                  )}
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* 5 — WHY CAPITAL ECONOMICS (navy emphasis band) */}
        <section className="md-whyband">
          <div className="md-sec-in">
            <div className="md-sec-head">
              <Eyebrow on="dark">Why Capital Economics</Eyebrow>
              <h2 className="md-h2 md-h2-inv" style={{ maxWidth: "none" }}>What a regulatory buyer is actually buying</h2>
            </div>
            <div className="md-why">
              {WHY.map((w, i) => (
                <div key={w.h} className="md-wcard">
                  <h3 className="md-wcard-h">{w.h}</h3>
                  <p className="md-wcard-b">{w.b}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* 6 — PROOF */}
        <section className="md-sec">
          <div className="md-sec-in">
            <div className="md-sec-head">
              <Eyebrow>Proof</Eyebrow>
              <h2 className="md-h2" style={{ maxWidth: "none" }}>Trusted where the numbers are scrutinised</h2>
            </div>

            <figure className="md-testimonial">
              <span className="md-quote-mark" aria-hidden="true">“</span>
              <blockquote className="md-quote">Capital Economics gives us an independent, well documented set of macroeconomic scenarios that our modelling and audit teams can stand behind. The methodology is transparent and the coverage is exactly what our provisioning process requires.</blockquote>
              <figcaption className="md-cite"><span className="md-cite-org">Meta Platforms</span><span className="md-cite-role"><ToConfirm note="Attribution detail pending client approval">Named contact and title</ToConfirm></span></figcaption>
            </figure>

            <div className="md-team-head">The modelling team</div>
            <div className="md-team">
              {TEAM.map((p) => (
                <div key={p.name} className="md-team-card">
                  <div className="md-team-frame"><ImgOrSlot person={p} /></div>
                  <div className="md-team-name">{p.name}</div>
                  <div className="md-team-role">{p.role}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* 7 — HOW TO START */}
        <section className="md-sec md-sec-sunken">
          <div className="md-sec-in">
            <div className="md-sec-head">
              <Eyebrow>How to start</Eyebrow>
              <h2 className="md-h2">From enquiry to first delivered scenario set</h2>
              <p className="md-lead"><span className="md-tc-tag">To confirm</span> Step detail and the implementation timeline are placeholder pending sign-off. Typical time from enquiry to first delivery is not yet stated.</p>
            </div>
            <div className="md-steps">
              {STEPS.map((s, i) => (
                <div key={s.n} className="md-step">
                  <div className="md-step-node">
                    <span className="md-step-dot">{i + 1}</span>
                    {i < STEPS.length - 1 && <span className="md-step-line" />}
                  </div>
                  <div className="md-step-card">
                    <span className="md-step-kicker">{i === STEPS.length - 1 ? "Ongoing" : "Step " + s.n}</span>
                    <h3 className="md-step-h">{s.h}</h3>
                    <p className="md-step-b">{s.b}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* quiet cross-audience line + platform relationship gap */}
        <section className="md-quiet-wrap">
          <div className="md-sec-in">
            <p className="md-quiet">Beyond regulatory compliance, the same scenarios support corporates, asset managers and pension funds in planning and risk work.</p>
            <p className="md-quiet md-quiet-gap"><span className="md-tc-tag">To confirm</span> Relationship to the platform subscription. Whether a modelling client receives platform access, and whether a platform subscriber sees modelling, is not yet defined. No cross-sell path exists in either direction at present.</p>
          </div>
        </section>

        {/* 8 — CLOSING CTA (purple, full width) */}
        <section className="md-closingcta">
          <div className="md-closingcta-in">
            <h2 className="md-cc-h">Talk to our modelling team</h2>
            <p className="md-cc-sub">Tell us your accounting standard, coverage and reporting cycle. We will scope a scenario set your auditor and regulator can stand behind, and give you a clear view of cost and timeline.</p>
            <div className="md-cc-cta">
              <Button variant="inverse" size="lg" iconEnd={<MIcon name="arrow-right" size={18} />}>Talk to our modelling team</Button>
              <Button variant="ghost" size="lg" className="btn-on-blue" iconStart={<MIcon name="download" size={17} />}>Download the methodology brochure</Button>
            </div>
          </div>
        </section>
      </main>

      <SiteFooter />
    </div>
  );
}

/* ================================================================ CSS */
(function injectMDCSS() {
  if (typeof document === "undefined" || document.getElementById("mds-css")) return;
  const css = `
  .md-wrap { background: var(--surface-page); }
  .md-sec-in { max-width: ${MAX}px; margin: 0 auto; padding: 0 32px; }
  .md-eyebrow { font-family: ${NS}; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
  .md-eyebrow.on-dark { color: var(--ce-blue-light); }
  .md-h1 { font-family: ${SERIF}; font-weight: 600; font-size: 46px; line-height: 1.06; letter-spacing: -0.022em; color: var(--text-primary); margin: 0; max-width: 15ch; }
  .md-h2 { font-family: ${SERIF}; font-weight: 600; font-size: 33px; line-height: 1.12; letter-spacing: -0.018em; color: var(--text-primary); margin: 0; max-width: 20ch; }
  .md-lead { font-family: ${NS}; font-size: 17px; line-height: 1.55; color: var(--text-secondary); margin: 14px 0 0; max-width: 68ch; }

  /* section rhythm */
  .md-sec { padding: 72px 0; border-bottom: 1px solid var(--border-subtle); }
  .md-sec-sunken { background: var(--surface-sunken); }
  .md-sec-head { margin-bottom: 40px; }

  /* 1 — hero (navy band, matches Consultancy / Homepage) */
  .md-hero { position: relative; background: linear-gradient(180deg, rgba(20,26,46,0.86) 0%, rgba(20,26,46,0.94) 100%), url('assets/start-now-bg.jpg') center/cover no-repeat; border-bottom: 1px solid rgba(255,255,255,0.10); }
  .md-hero-in { max-width: ${MAX}px; margin: 0 auto; padding: 72px 32px 44px; position: relative; z-index: 1; }
  .md-hero .md-h1 { color: #fff; }
  .md-hero-sub { font-family: ${NS}; font-size: 19px; line-height: 1.5; color: var(--text-on-navy); margin: 20px 0 0; max-width: 70ch; }
  .md-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 0; }
  .md-cred { list-style: none; margin: 40px 0 0; padding: 24px 0 0; border-top: 1px solid rgba(255,255,255,0.16); display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .md-cred-item { font-family: ${NS}; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: rgba(255,255,255,0.9); position: relative; padding-left: 16px; }
  .md-cred-item::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--ce-blue-light); }

  /* 2 — services (two selectable option panels) */
  .md-services { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  .md-service { position: relative; display: flex; flex-direction: column; text-decoration: none; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 18px rgba(20,26,46,0.06); transition: border-color 160ms cubic-bezier(0.2,0,0,1), box-shadow 160ms cubic-bezier(0.2,0,0,1), transform 160ms cubic-bezier(0.2,0,0,1); }
  .md-service:hover { border-color: var(--brand); box-shadow: 0 14px 34px rgba(22,65,148,0.16); transform: translateY(-3px); }
  .md-service-top { background: var(--brand-subtle); padding: 24px 26px 20px; border-bottom: 1px solid var(--blue-100); }
  .md-service-kicker { font-family: ${NS}; font-weight: 700; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); opacity: 0.75; }
  .md-service-h { font-family: ${SERIF}; font-weight: 600; font-size: 32px; letter-spacing: -0.01em; color: var(--brand); margin: 6px 0 0; }
  .md-service-line { font-family: ${NS}; font-size: 16px; line-height: 1.55; color: var(--text-secondary); margin: 0; padding: 22px 26px 0; flex: 1; }
  .md-service-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 20px 26px 22px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
  .md-service-more { display: inline-flex; align-items: center; gap: 6px; font-family: ${NS}; font-weight: 700; font-size: 14px; color: var(--brand); }
  .md-dl { display: inline-flex; align-items: center; gap: 6px; font-family: ${NS}; font-weight: 600; font-size: 13.5px; color: var(--text-secondary); }
  .md-service:hover .md-dl { color: var(--brand); }

  /* comparison table */
  .md-table { margin-top: 26px; border: 1px solid var(--border-default); border-radius: var(--radius-lg, 10px); overflow: hidden; background: var(--surface-card); box-shadow: 0 2px 10px rgba(20,26,46,0.04); }
  .md-tr { display: grid; grid-template-columns: 1.15fr 1fr 1fr; }
  .md-tr:not(.md-tr-head) .md-td { border-top: 1px solid var(--border-subtle); }
  /* zebra on the data columns; label column stays a constant tint */
  .md-tr:not(.md-tr-head):nth-child(even) .md-td:not(.md-td-k) { background: var(--surface-subtle); }
  .md-th { font-family: ${NS}; font-weight: 700; font-size: 15px; color: var(--text-primary); padding: 15px 22px; border-left: 1px solid rgba(255,255,255,0.22); }
  /* branded product column headers */
  .md-th-prod { background: var(--brand); color: #fff; letter-spacing: 0.01em; }
  .md-th-k { background: var(--surface-sunken); color: var(--text-muted); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; border-left: 0; }
  .md-td { font-family: ${NS}; font-size: 15px; line-height: 1.45; color: var(--text-secondary); padding: 16px 22px; border-left: 1px solid var(--border-subtle); }
  .md-td-k { font-weight: 700; color: var(--text-primary); font-size: 14.5px; background: var(--surface-sunken); border-left: 0; }

  /* to-confirm marker */
  .md-tc { display: inline-flex; flex-direction: column; gap: 5px; }
  .md-tc-tag { display: inline-flex; align-self: flex-start; font-family: ${NS}; font-weight: 800; font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase; color: #8a5a00; background: #fbf1dc; border: 1px dashed #e0bf7e; border-radius: 4px; padding: 2px 7px; }
  .md-tc-body { color: var(--text-muted); font-style: italic; }
  .md-vars-note .md-tc-tag, .md-lead .md-tc-tag, .md-quiet-gap .md-tc-tag, .md-cite-role .md-tc-tag { margin-right: 8px; }

  /* 3 — framework band */
  .md-band { padding: 76px 0; background: var(--surface-subtle); border-bottom: 1px solid var(--border-subtle); }
  .md-framework { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 34px; align-items: start; }
  .md-curve-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg, 10px); padding: 22px 24px 18px; }
  .md-curve-title { font-family: ${NS}; font-weight: 700; font-size: 13px; letter-spacing: 0.03em; color: var(--text-primary); margin-bottom: 10px; }
  .md-curve { display: block; }
  .md-curve-code { font-family: ${NS}; font-weight: 800; font-size: 13px; }
  .md-curve-pct { font-family: ${NS}; font-weight: 600; font-size: 11px; fill: var(--text-muted); }
  .md-curve-axis { display: flex; justify-content: space-between; font-family: ${NS}; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-top: 6px; padding: 0 4px; }

  .md-scentable { display: flex; flex-direction: column; }
  .md-scen { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 16px; padding: 13px 4px; border-bottom: 1px solid var(--border-default); }
  .md-scen:first-child { border-top: 2px solid var(--text-primary); }
  .md-scen-code { font-family: ${NS}; font-weight: 800; font-size: 13px; color: #fff; background: var(--grey-500); border-radius: 5px; padding: 5px 0; text-align: center; }
  .md-scen-up .md-scen-code { background: var(--positive-600); }
  .md-scen-down .md-scen-code { background: var(--negative-600); }
  .md-scen-base .md-scen-code { background: var(--brand); }
  .md-scen-name { font-family: ${NS}; font-weight: 600; font-size: 16px; color: var(--text-primary); }
  .md-scen-pct { font-family: ${NS}; text-align: right; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; flex: 0 0 auto; }
  .md-scen-val { font-weight: 700; font-size: 16px; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .md-scen-pctlab { font-weight: 600; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
  .md-source { font-family: ${NS}; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin: 16px 0 0; }

  /* built to flex */
  .md-flex { margin-top: 40px; display: grid; grid-template-columns: 0.95fr 1.15fr; gap: 40px; align-items: center; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 12px; padding: 34px 36px; box-shadow: 0 8px 28px rgba(20,26,46,0.07); }
  .md-flex-eyebrow { font-family: ${NS}; font-weight: 700; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
  .md-flex-h { font-family: ${SERIF}; font-weight: 600; font-size: 25px; letter-spacing: -0.012em; color: var(--text-primary); margin: 0 0 12px; }
  .md-flex-b { font-family: ${NS}; font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: 0; }
  .md-flex-panel { background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 18px 20px 16px; }
  .md-flex-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .md-flex-panel-title { font-family: ${NS}; font-weight: 700; font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); }
  .md-flex-tag { font-family: ${NS}; font-weight: 700; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); background: var(--brand-subtle); border-radius: 999px; padding: 4px 10px; }
  .md-flex-set { display: flex; flex-direction: column; gap: 8px; }
  .md-flex-item { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 16px; padding: 11px 14px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 8px; }
  .md-flex-w { font-family: ${NS}; font-weight: 800; font-size: 14.5px; color: #fff; background: var(--brand); border-radius: 6px; padding: 5px 0; text-align: center; font-variant-numeric: tabular-nums; }
  .md-flex-name { font-family: ${NS}; font-size: 15px; font-weight: 600; color: var(--text-primary); }
  .md-flex-eg { font-family: ${NS}; font-size: 12px; color: var(--text-muted); margin: 14px 0 0; }

  .md-closing { font-family: ${SERIF}; font-size: 20px; line-height: 1.5; color: var(--text-primary); margin: 40px 0 0; max-width: 78ch; }

  /* 4 — methodology */
  .md-method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
  .md-mcard { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg, 10px); padding: 26px; }
  .md-mcard.is-vars { grid-column: 1 / -1; }
  .md-micon, .md-micon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9px; background: var(--brand-subtle); color: var(--brand); margin-bottom: 16px; }
  .md-mcard-h { font-family: ${SERIF}; font-weight: 600; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 10px; }
  .md-mcard-b { font-family: ${NS}; font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: 0; }
  .md-vars-note { font-family: ${NS}; font-size: 13.5px; color: var(--text-secondary); margin: 0 0 16px; }
  .md-chips { display: flex; flex-wrap: wrap; gap: 9px; }
  .md-chip { font-family: ${NS}; font-weight: 600; font-size: 13.5px; color: var(--text-primary); background: var(--surface-sunken); border: 1px solid var(--border-default); border-radius: 999px; padding: 7px 14px; }
  .md-chip-more { color: var(--text-muted); font-style: italic; background: transparent; border-style: dashed; }

  /* 5 — why (navy emphasis band) */
  .md-whyband { background: #1d233f; padding: 76px 0; border-bottom: 1px solid rgba(255,255,255,0.10); }
  .md-h2-inv { color: #fff; }
  .md-why { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 56px; }
  .md-wcard { padding-top: 20px; border-top: 2px solid var(--ce-blue-light); }
  .md-wcard-h { font-family: ${NS}; font-weight: 700; font-size: 20px; letter-spacing: -0.005em; color: #fff; margin: 0 0 10px; }
  .md-wcard-b { font-family: ${NS}; font-size: 15px; line-height: 1.62; color: rgba(255,255,255,0.74); margin: 0; }

  /* 6 — proof */
  .md-testimonial { max-width: none; margin: 4px 0 56px; padding-left: 30px; border-left: 3px solid var(--brand); }
  .md-quote-mark { font-family: ${SERIF}; font-weight: 700; font-size: 60px; line-height: 0.72; color: var(--ce-blue-light); display: block; margin-bottom: 6px; }
  .md-quote { font-family: ${SERIF}; font-weight: 500; font-size: 29px; line-height: 1.36; letter-spacing: -0.014em; color: var(--text-primary); margin: 0; }
  .md-cite { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; }
  .md-cite-org { font-family: ${NS}; font-weight: 700; font-size: 16px; color: var(--text-primary); }
  .md-cite-role { font-family: ${NS}; font-size: 14px; color: var(--text-secondary); }
  .md-team-head { font-family: ${NS}; font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 22px; }
  .md-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .md-team-frame { aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--surface-sunken); border: 1px solid var(--border-default); margin-bottom: 14px; }
  .md-team-photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
  .md-team-name { font-family: ${NS}; font-weight: 700; font-size: 16px; color: var(--text-primary); }
  .md-team-role { font-family: ${NS}; font-size: 14px; color: var(--text-secondary); margin-top: 2px; }

  /* 7 — steps (connected process) */
  .md-steps { display: flex; align-items: stretch; gap: 0; margin-top: 8px; }
  .md-step { flex: 1 1 0; min-width: 0; padding-right: 26px; }
  .md-step-node { display: flex; align-items: center; gap: 4px; height: 46px; margin-bottom: 22px; }
  .md-step-dot { width: 46px; height: 46px; border-radius: 50%; background: var(--brand); color: #fff; font-family: ${SERIF}; font-weight: 600; font-size: 19px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: 0 6px 16px rgba(22,65,148,0.25); }
  .md-step-line { position: relative; flex: 1 1 auto; height: 2px; background: var(--border-strong); margin: 0 8px 0 6px; }
  .md-step-line::after { content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); border-left: 7px solid var(--border-strong); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
  .md-step-kicker { font-family: ${NS}; font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); }
  .md-step-h { font-family: ${NS}; font-weight: 700; font-size: 18px; color: var(--text-primary); margin: 8px 0 8px; }
  .md-step-b { font-family: ${NS}; font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin: 0; }

  /* quiet cross-audience */
  .md-quiet-wrap { padding: 40px 0; border-bottom: 1px solid var(--border-subtle); }
  .md-quiet { font-family: ${NS}; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); margin: 0; max-width: 82ch; }
  .md-quiet-gap { margin-top: 16px; }

  /* 8 — closing cta */
  .md-closingcta { background: var(--brand); }
  .md-closingcta-in { max-width: 820px; margin: 0 auto; padding: 76px 32px; text-align: center; }
  .md-cc-h { font-family: ${SERIF}; font-weight: 600; font-size: 40px; line-height: 1.1; letter-spacing: -0.018em; color: #fff; margin: 0; }
  .md-cc-sub { font-family: ${NS}; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.85); margin: 18px auto 32px; max-width: 62ch; }
  .md-cc-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
  .btn-on-blue { color: #fff !important; border-color: rgba(255,255,255,0.5) !important; }
  .btn-on-blue:hover { background: rgba(255,255,255,0.12) !important; color: #fff !important; }

  /* responsive */
  @media (max-width: 940px) {
    .md-h1 { font-size: 36px; }
    .md-h2 { font-size: 27px; }
    .md-cred { grid-template-columns: 1fr 1fr; gap: 18px 28px; }
    .md-services, .md-method, .md-why, .md-framework, .md-flex { grid-template-columns: 1fr; }
    .md-team, .md-steps { grid-template-columns: 1fr 1fr; }
    .md-steps { display: flex; flex-direction: column; gap: 0; }
    .md-step { padding-right: 0; padding-left: 20px; padding-bottom: 30px; border-left: 2px solid var(--border-strong); }
    .md-step:last-child { border-left-color: transparent; padding-bottom: 0; }
    .md-step-node { height: auto; margin-bottom: 10px; margin-left: -39px; }
    .md-step-dot { width: 40px; height: 40px; font-size: 17px; }
    .md-step-line { display: none; }
    .md-testimonial { padding-left: 20px; }
    .md-quote { font-size: 23px; }
  }
  @media (max-width: 560px) {
    .md-sec { padding: 52px 0; }
    .md-sec-in, .md-hero-in { padding-left: 20px; padding-right: 20px; }
    .md-cred { grid-template-columns: 1fr; }
    .md-team { grid-template-columns: 1fr 1fr; }
    .md-steps { grid-template-columns: 1fr; }
    /* stacked comparison table */
    .md-table { border: 0; background: transparent; }
    .md-tr-head { display: none; }
    .md-tr { grid-template-columns: 1fr; border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-card); margin-bottom: 14px; }
    .md-td, .md-td-k { border-left: 0; border-bottom: 1px solid var(--border-subtle); }
    .md-tr .md-td:last-child { border-bottom: 0; }
    .md-td::before { content: attr(data-col); display: block; font-weight: 700; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
  }
  `;
  const el = document.createElement("style"); el.id = "mds-css"; el.textContent = css;
  document.head.appendChild(el);
})();

ReactDOM.createRoot(document.getElementById("root")).render(<ModellingPage />);