:root{
    --bg:#F5F6F9;--surface:#fff;--ink:#1B2740;--muted:#5B6880;
    --line:#E6EAF1;--accent:#2E5E97;--navy:#253450;
    --font:'Gotham','Montserrat',Arial,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.6}
  a{color:inherit}
  .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,44px)}
  .cwrap{max-width:986px;margin:0 auto;padding:0 28px} /* ~930 content column */

  /* nav */

  /* header: navy title block */
  .phead-hero{background:linear-gradient(180deg,#253450 0%,#223047 100%);color:#fff;position:relative;overflow:hidden}
  .phead-hero::after{content:"";position:absolute;right:-6%;top:-40%;width:50%;height:190%;background:radial-gradient(closest-side,rgba(143,185,232,.16),transparent 70%);pointer-events:none}
  .phead-hero .cwrap{position:relative;z-index:2;padding-top:clamp(40px,6vw,66px);padding-bottom:clamp(38px,5vw,58px)}
  .crumb{font-size:.82rem;letter-spacing:.02em;margin:0 0 20px;opacity:.9}
  .crumb a{text-decoration:none;color:#cdd8ec}
  .crumb a:hover{color:#fff}
  .phead-hero h1{font-size:clamp(2.1rem,4.6vw,3.3rem);font-weight:700;letter-spacing:-.025em;line-height:1.04;margin:0;max-width:22ch;text-wrap:balance;color:#fff}
  .phead-hero .sub{font-size:clamp(1.02rem,1.6vw,1.2rem);color:#C3CFE4;margin:16px 0 20px;max-width:60ch;font-weight:400}
  .ptags{display:flex;gap:10px;flex-wrap:wrap}
  .ptags span{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:#13203A;background:#8FB9E8;padding:6px 12px;border-radius:999px}

  /* meta (Role / Design) section */
  .meta{background:var(--surface);border-bottom:1px solid var(--line)}
  .meta .cwrap{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 44px;padding-top:28px;padding-bottom:28px}
  .meta .m{min-width:0}
  .meta .m .k{font-size:.68rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);font-weight:700;margin:0 0 4px}
  .meta .m .v{font-size:.94rem;font-weight:600;margin:0;color:var(--ink);line-height:1.4}
  .meta .visit{grid-column:1 / -1;justify-self:end;font-size:.88rem;font-weight:700;color:var(--accent);text-decoration:none;white-space:nowrap;margin-top:2px}

  /* article (centered 930 column, text left-aligned) */
  .article{padding:clamp(40px,5vw,60px) 0 clamp(50px,7vw,88px)}
  figure{margin:0}
  figure img,figure video{width:100%;display:block;border-radius:14px;box-shadow:0 20px 44px rgba(20,30,60,.16)}
  figcaption{font-size:.84rem;color:var(--muted);margin-top:12px;text-align:center}
  .hero-figure img,.hero-figure video{aspect-ratio:16/9;object-fit:cover;object-position:center}
  .sol-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);align-items:start;margin-top:1.4rem}
  .sol-grid .steps{margin-top:0}
  .sol-grid figure.side{margin:0}
  .sol-grid figure.side figcaption{text-align:left}
  .vspace{height:clamp(44px,6vw,66px)}
  .vspace.sm{height:clamp(32px,4vw,44px)}

  .lede{font-size:clamp(1.3rem,2.1vw,1.6rem);font-weight:500;line-height:1.45;letter-spacing:-.01em;color:var(--ink);margin:0}
  .eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:.76rem;color:var(--accent);font-weight:700;margin:0 0 .7rem}
  .article h2{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0 0 1rem}
  .article p{font-size:1.06rem;color:#38445c;margin:0 0 1.1rem}
  .block > :last-child{margin-bottom:0}

  .insight{background:var(--navy);color:#fff;border-radius:18px;padding:clamp(30px,4vw,46px)}
  .insight .eyebrow{color:#8FB9E8}
  .insight p{font-size:clamp(1.25rem,2vw,1.55rem);font-weight:600;line-height:1.4;letter-spacing:-.01em;color:#fff;margin:0}

  .steps{list-style:none;margin:1.4rem 0 0;padding:0}
  .steps li{padding:22px 0;border-top:1px solid var(--line)}
  .steps li:last-child{border-bottom:1px solid var(--line)}
  .steps h3{margin:0 0 6px;font-size:1.12rem;font-weight:700;letter-spacing:-.01em}
  .steps p{margin:0;font-size:1rem;color:#48546c}

  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:1.6rem 0 2rem}
  .stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 20px}
  .stat b{display:block;font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;letter-spacing:-.02em;color:var(--navy);line-height:1}
  .stat span{display:block;font-size:.84rem;color:var(--muted);margin-top:8px;line-height:1.35}
  .rlist{margin:0;padding-left:1.1rem}
  .rlist li{font-size:1.04rem;color:#38445c;margin:0 0 .6rem}

  /* shared CTA band */
  .cta{background:linear-gradient(180deg,#253450 0%,#1F2D45 100%);color:#fff;position:relative;overflow:hidden}
  .cta::after{content:"";position:absolute;right:-4%;top:-60%;width:46%;height:220%;background:radial-gradient(closest-side,rgba(143,185,232,.18),transparent 70%);pointer-events:none}
  .cta .wrap{position:relative;z-index:2;text-align:center;padding:clamp(54px,8vw,92px) 28px}
  .cta .eyebrow{color:#8FB9E8}
  .cta h2{font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:700;letter-spacing:-.025em;margin:0 0 10px;color:#fff;line-height:1.05}
  .cta p{color:#C3CFE4;font-size:1.05rem;margin:0 auto 26px;max-width:46ch}
  .cbtn{display:inline-block;background:#8FB9E8;color:#13203A;font-weight:700;font-size:.95rem;padding:15px 30px;border-radius:999px;text-decoration:none;transition:.2s}
  .cbtn:hover{filter:brightness(1.06);transform:translateY(-1px)}

  footer{background:var(--surface);border-top:1px solid var(--line)}
  footer .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;padding:30px 28px;color:var(--muted);font-size:.9rem}
  footer a{color:var(--muted);text-decoration:none;margin-left:20px}
  footer a:hover{color:var(--ink)}

  @media(max-width:860px){
    .stats{grid-template-columns:repeat(2,1fr)}
    .meta .cwrap{grid-template-columns:repeat(2,1fr)}
    .sol-grid{grid-template-columns:1fr}
  }
  @media(max-width:520px){ .stats{grid-template-columns:1fr 1fr} }
  /* responsive Vimeo/YouTube hero embed */
  .embed-wrap{position:relative;width:100%;padding-top:56.25%;border-radius:14px;overflow:hidden;background:#0c1322;box-shadow:0 20px 44px rgba(20,30,60,.16)}
  .embed-wrap iframe,.embed-wrap video,.embed-wrap object,.embed-wrap embed{position:absolute;inset:0;width:100%;height:100%;border:0}
  .hero-figure.embed{box-shadow:none}