@import url("https://fonts.googleapis.com/css2?family=Carlito:ital,wght@0,400;0,700;1,400;1,700&family=Caladea:ital,wght@0,400;0,700;1,400;1,700&display=swap");
/* Carlito is metric-compatible with Calibri; Caladea with Cambria.
   The source deck specifies Calibri + Cambria (Microsoft system fonts, not
   redistributable). These Google Fonts are exact metric substitutes. */

:root{--font-sans:"Carlito",Calibri,"Segoe UI",system-ui,sans-serif;--font-serif:"Caladea",Cambria,Georgia,serif;--font-mono:ui-monospace,Consolas,"Courier New",monospace}
:root{
/* base palette — Teal + Slate + Copper. Slate-teal surfaces carry the structure, copper is the single warm accent, pale aqua carries secondary text on dark. Structural roles unchanged from the source deck; only hues move between colorways. */
--brand-900:#10262C;--brand-700:#14515C;--brand-500:#2C6F7A;--accent-500:#C2763F;--accent-700:#8F4F2A;--accent-200:#A9D3DA;--accent-100:#EFE7DF;
--ink-900:#1C2A2D;--ink-600:#566267;--ink-400:#8B979A;
--paper-100:#ECEAE5;--paper-050:#F6F4F0;--white:#FFFFFF;
--success-600:#2F6F52;--warning-600:#8A6215;--danger-600:#96322A;
--success-050:#E8F0EB;--warning-050:#F5EFE3;--danger-050:#F5E9E6;
/* semantic aliases */
--surface-page:var(--paper-100);--surface-card:var(--white);--surface-panel:var(--brand-700);--surface-panel-deep:var(--brand-900);--surface-muted:var(--paper-050);
--text-body:var(--ink-900);--text-muted:var(--ink-600);--text-heading:var(--brand-700);--text-on-dark:var(--white);--text-on-dark-muted:var(--accent-200);--text-eyebrow:var(--accent-700);
--accent:var(--accent-500);--accent-strong:var(--brand-700);
--border-hairline:var(--accent-200);--border-strong:var(--brand-700);--border-on-dark:rgba(255,255,255,.18);
--focus-ring:var(--accent-500);
--link:var(--brand-700);--link-hover:var(--accent-700)}
:root{
/* UI scale (web / app surfaces) */
--fs-eyebrow:12px;--fs-caption:13px;--fs-small:14px;--fs-body:16px;--fs-body-lg:18px;--fs-h4:20px;--fs-h3:24px;--fs-h2:32px;--fs-h1:42px;--fs-display:56px;
--lh-tight:1.15;/* @kind other */--lh-snug:1.3;/* @kind other */--lh-body:1.55;/* @kind other */--lh-loose:1.7;/* @kind other */
--fw-regular:400;/* @kind other */--fw-bold:700;/* @kind other */
--ls-eyebrow:.16em;/* @kind other */--ls-caps:.06em;/* @kind other */--ls-normal:0;/* @kind other */
/* deck scale — 1280x720 canvas, values are the deck's pt sizes x1.333 */
--slide-title:43px;--slide-eyebrow:16px;--slide-subhead:17px;--slide-body:19px;--slide-body-sm:17px;--slide-stat:53px;--slide-stat-sm:24px;--slide-quote:21px;--slide-pagenum:13px;
/* roles */
--type-display:var(--fw-bold) var(--fs-display)/var(--lh-tight) var(--font-sans);
--type-heading:var(--fw-bold) var(--fs-h2)/var(--lh-tight) var(--font-sans);
--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
--type-statement:italic var(--fw-regular) var(--fs-body-lg)/var(--lh-snug) var(--font-serif)}
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;
/* deck geometry, measured from the source deck at 1280x720 */
--slide-margin:58px;--slide-title-top:53px;--slide-body-top:163px;--slide-row-gap:88px;
--radius-none:0;--radius-sm:2px;--radius-pill:999px;--radius-circle:50%;
--control-h-sm:32px;--control-h:40px;--control-h-lg:48px;
--container-max:1200px;--measure:68ch;/* @kind other */}
:root{
--shadow-none:none;
--shadow-card:0 1px 2px rgba(16,38,44,.06),0 6px 18px rgba(16,38,44,.08);
--shadow-raised:0 2px 4px rgba(16,38,44,.08),0 12px 32px rgba(16,38,44,.12);
--shadow-overlay:0 24px 64px rgba(16,38,44,.24);
--border-1:1px solid var(--border-hairline);
--rule-accent:1px solid var(--accent);
--scrim-brand:linear-gradient(180deg,rgba(16,38,44,0) 0%,rgba(16,38,44,.78) 100%);/* @kind other */}
:root{
--ease-standard:cubic-bezier(.2,0,.2,1);/* @kind other */
--dur-fast:120ms;/* @kind other */--dur-base:180ms;/* @kind other */--dur-slow:280ms;/* @kind other */
--transition-control:background-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard);/* @kind other */}


html,body{margin:0}
body{font-family:var(--font-sans);color:var(--text-body);background:var(--white);-webkit-font-smoothing:antialiased}
img{display:block}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover)}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.hdr{background:var(--brand-700);position:sticky;top:0;z-index:30}
.hdr .wrap{height:84px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.hdr img{height:42px}
.nav{display:flex;align-items:center;gap:36px}
.nav a{font:700 13px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-200);padding:6px 0}
.nav a:hover{color:#fff}
.nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -3px 0 var(--accent-500)}
.nav a.btn-accent,.nav a.btn-accent:hover{color:#fff}
.nav a.btn-accent:hover{background:var(--brand-900)}
.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 32px;border:1px solid transparent;font:700 16px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:var(--transition-control)}
.btn-primary{background:var(--brand-700);color:#fff}
.btn-primary:hover{background:var(--brand-900);color:#fff}
.btn-accent{background:var(--accent-700);color:#fff}
.btn-accent:hover{background:var(--brand-900);color:#fff}
.btn-onDark{background:#fff;color:var(--brand-700)}
.btn-onDark:hover{background:var(--accent-200);color:var(--brand-900)}
.btn-outline{border-color:var(--brand-700);color:var(--brand-700);background:transparent}
.btn-outline:hover{background:var(--brand-700);color:#fff}
.btn-sm{height:40px;padding:0 22px;font-size:13px}
.eyebrow{font:700 12px/1.2 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-700)}
.eyebrow-onDark{color:var(--accent-200)}
h1,h2,h3{margin:0;color:var(--brand-700);text-transform:uppercase}
h1{font:700 56px/1.05 var(--font-sans)}
h2{font:700 32px/1.15 var(--font-sans)}
h3{font:700 20px/1.3 var(--font-sans);text-transform:none}
p{margin:0}
.lede{font:400 18px/1.55 var(--font-sans);color:var(--ink-600);max-width:62ch}
.body{font:400 16px/1.55 var(--font-sans);color:var(--ink-900)}
.small{font:400 14px/1.5 var(--font-sans);color:var(--ink-600)}
.src{font:italic 400 14px/1.45 var(--font-serif);color:var(--ink-600)}
.quote{font:italic 400 21px/1.4 var(--font-serif)}
.sec{padding:96px 0}
.sec-paper{background:var(--paper-100)}
.sec-muted{background:var(--paper-050)}
.stack-6{display:flex;flex-direction:column;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{background:var(--brand-700);color:#fff}
.panel-deep{background:var(--brand-900);color:#fff}
.card{background:#fff;border:1px solid var(--border-hairline);padding:32px}
.card-accent{border:0;border-top:4px solid var(--accent-500);background:#fff;padding:32px}
.rule{height:1px;background:var(--accent-500)}
.stat{font:700 42px/1 var(--font-sans);color:var(--accent-700)}
.stat-onDark{color:#fff}
.stat-label{font:400 15px/1.4 var(--font-sans);color:var(--ink-600);margin-top:10px}
.stat-label-onDark{color:var(--accent-200)}
.num{width:44px;height:44px;border-radius:50%;background:var(--accent-700);color:#fff;display:flex;align-items:center;justify-content:center;font:700 18px/1 var(--font-sans);flex:0 0 auto}
.num-accent{background:var(--brand-700);color:#fff}
.dot{width:11px;height:11px;border-radius:50%;background:var(--accent-500);flex:0 0 auto;margin-top:7px}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.list li{display:flex;gap:16px;font:400 16px/1.5 var(--font-sans);color:var(--ink-900)}
.cta{background:var(--accent-700);position:relative;overflow:hidden}
.cta .tri{background:var(--brand-700)}
.cta .eyebrow{color:var(--accent-100)}
.cta .wrap{padding:72px 40px;position:relative;display:flex;align-items:center;justify-content:space-between;gap:48px}
.tri{position:absolute;background:var(--accent-500);clip-path:polygon(50% 0,100% 100%,0 100%);transform:rotate(12deg)}
.ftr{background:var(--brand-900);color:var(--accent-200);padding:64px 0 40px}
.ftr img{height:38px}
.ftr .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px}
.ftr ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:12px;font:400 14px/1.4 var(--font-sans)}
.ftr a{color:var(--accent-200)}
.ftr a:hover{color:#fff}
.ftr .fine{font:400 13px/1 var(--font-sans);color:var(--ink-400)}
/* ---- responsive ---- */
@media (max-width:1240px){
  .wrap{padding:0 32px}
}
/* layout stacking: asymmetric two-column grids get cramped well before phone width */
@media (max-width:1024px){
  *{box-sizing:border-box}
  img{max-width:100%;height:auto}
  .wrap[style*="grid-template-columns"],.wrap [style*="grid-template-columns"],.grid-2,.grid-3{grid-template-columns:1fr !important;gap:32px !important}
  .wrap [style*="padding-top:170px"]{padding-top:0 !important;padding-bottom:8px}
  .wrap [style*="align-items:stretch"]{flex-direction:column !important}
  .wrap [style*="align-items:stretch"] > div{width:100% !important}
  .wrap [style*="align-items:stretch"] > div[style*="width:56px"]{height:40px;transform:rotate(90deg)}
  .wrap [style*="aspect-ratio:1/1"]{width:180px;max-width:100%;justify-self:start}
  .cta .wrap{flex-direction:column;align-items:flex-start;gap:28px}
  /* decoration is a right-hand bleed; once the hero is single-column it cuts across the copy */
  .tri{display:none}
  section > div[style*="position:absolute"]{display:none}
  .sec{padding:72px 0}
  h1{font-size:44px}
}
/* header stacks once the nav can no longer sit beside the logo */
@media (max-width:880px){
  .hdr .wrap{height:auto !important;flex-direction:column;align-items:flex-start;gap:14px;padding-top:16px;padding-bottom:16px}
  .hdr img{height:36px}
  .nav{flex-wrap:wrap;gap:18px;width:100%}
  .nav a.btn{margin-left:auto;width:auto}
}
@media (max-width:760px){
  .wrap{padding:0 20px}
  h1{font-size:32px}
  h2{font-size:24px}
  h3{font-size:18px}
  .lede{font-size:16px}
  .stat{font-size:34px}
  .sec{padding:56px 0}
  section > .wrap{padding-top:56px !important;padding-bottom:56px !important}
  .hdr .wrap{padding-top:16px !important;padding-bottom:16px !important}
  .ftr .cols{grid-template-columns:1fr !important;gap:32px !important}
  .ftr{padding:48px 0 32px}
  .btn{width:100%;padding:0 18px}
  .nav a.btn{width:auto}
}
@media (max-width:520px){
  h1{font-size:27px}
  .nav{gap:14px}
  .nav a{font-size:12px}
}