@font-face {
  font-family: "Mona Sans";
  src: url("../fonts/mona-sans-latin-var.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Mona Sans Fallback";
  src: local("Segoe UI"), local("SegoeUI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 104%;
  ascent-override: 104.8%;
  descent-override: 30.8%;
  line-gap-override: 0%;
}


:root {

  
  --font-family: "Mona Sans", "Mona Sans Fallback", "Segoe UI", "Helvetica Neue", Arial, sans-serif;


  
  --navy:        #02265E;   
  --night:       #04193F;   
  --portal-appbar: var(--night);   
  --azure:       #0079D3;   
  --azure-text:  #006DBF;   
  --azure-deep:  #0063AE;   
  --azure-light: #8CC8F7;   
  --ink:         #1B2435;   
  --grey:        #586377;   
  --paper:       #F3F5F8;   
  --frame:       #E6ECF4;   
  --screen-bg:   #EEF1F6;   
  --white:       #FFFFFF;

  --rule:        rgba(2, 38, 94, .16);    
  --rule-light:  rgba(255, 255, 255, .2); 
  --on-dark:     #FFFFFF;                 
  --on-dark-2:   rgba(255, 255, 255, .86);
  --on-dark-3:   rgba(255, 255, 255, .78);


  
  --plate-rgb:      4, 25, 63;            
  --plate-fill:     linear-gradient(90deg,
                      rgba(var(--plate-rgb), .68) 0,
                      rgba(var(--plate-rgb), .60) calc(100% - 140px),
                      rgba(var(--plate-rgb), .42) calc(100% - 100px),
                      rgba(var(--plate-rgb), .25) calc(100% - 68px),
                      rgba(var(--plate-rgb), 0) 100%);
  --plate-width:    calc(max(var(--gutter), (100% - var(--wrap)) / 2) + var(--hero-col) + 140px);
  --plate-pad-end:  0px;                  
  --plate-edge:     none;                 


  

  
  --fs-display:   clamp(2.5rem, 1.3857rem + 4.5714vw, 5.5rem);    
  --fs-h1:        clamp(2.25rem, 1.7857rem + 1.9048vw, 3.5rem);   
  --fs-h1-doc:    clamp(2rem, 1.5357rem + 1.9048vw, 3.25rem);     
  --fs-h2:        clamp(1.875rem, 1.55rem + 1.3333vw, 2.75rem);   
  --fs-h3:        clamp(1.25rem, 1.1571rem + .381vw, 1.5rem);     
  --fs-figure:    clamp(2rem, 1.6286rem + 1.5238vw, 3rem);        
  --fs-lede:      clamp(1.0625rem, .9696rem + .381vw, 1.3125rem); 
  --fs-intro:     clamp(1.125rem, 1.0786rem + .1905vw, 1.25rem);  
  --fs-body:      clamp(1.0625rem, 1.0393rem + .0952vw, 1.125rem);
  --fs-small:     clamp(.875rem, .8518rem + .0952vw, .9375rem);   
  --fs-ui:        1rem;                                           
  --fs-micro:     .84375rem;                                      

  
  --w-text:     400;
  --w-strong:   600;   
  --w-nav:      520;
  --w-ui:       640;   
  --w-heading:  640;   
  --w-display:  660;   
  --w-figure:   560;   

  
  --wd-display: 104%;
  --wd-heading: 102%;
  --wd-text:    100%;

  
  --tr-display: -.03em;
  --tr-h1:      -.028em;
  --tr-h2:      -.022em;
  --tr-h3:      -.008em;
  --tr-text:    0;
  --tr-figure:  0;        

  
  --lh-display: .97;
  --lh-h1:      1;
  --lh-h1-doc:  1.04;
  --lh-h2:      1.08;
  --lh-h3:      1.25;
  --lh-lede:    1.5;
  --lh-text:    1.6;
  --lh-tight:   1.42;     

  
  --num:        lining-nums proportional-nums;

  
  --measure:       36em;   
  --measure-lede:  26em;   
  --measure-wide:  42em;   
  --measure-h2:    18em;   


  
  --space-1:  .25rem;   
  --space-2:  .5rem;    
  --space-3:  .75rem;   
  --space-4:  1rem;     
  --space-5:  1.5rem;   
  --space-6:  2rem;     
  --space-7:  2.5rem;   
  --space-8:  3rem;     
  --space-9:  4rem;     
  --space-10: 5rem;     

  --section-y:    clamp(3rem, 2.4429rem + 2.2857vw, 4.5rem);  
  --section-y-lg: clamp(3.5rem, 2.5714rem + 3.8095vw, 6rem);  
  --space-head:   clamp(1.25rem, 1.0179rem + .9524vw, 2rem);  
  --space-stack:  clamp(.875rem, .8286rem + .1905vw, 1rem);   

  --wrap:      1280px;                                     
  --gutter:    clamp(1rem, 6.0952vw - .4857rem, 5rem);     
  --col-gap:   clamp(1rem, .6286rem + 1.5238vw, 2rem);     
  --split-gap: clamp(2rem, 1.0714rem + 3.8095vw, 4.5rem);  
  --hero-col:  540px;                                      
  --hero-title: calc(var(--hero-col) + 120px);             
  --edge:      max(var(--gutter), (100% - var(--wrap)) / 2); 

  --util-h:    36px;     
  --bar-h:     80px;     
  --header-h:  calc(var(--util-h) + var(--bar-h));


  
  --hero-home-h:  clamp(600px, calc(100svh - var(--header-h)), 900px);  
  --hero-inner-h: clamp(540px, calc(80svh - var(--header-h)), 700px);   
  --hero-phone-media-a: 720 / 624;   
  --hero-phone-media-inner: 16 / 10;


  
  --radius:       2px;   
  --radius-media: 4px;   
  --rule-hair:    1px solid var(--rule);
  --rule-strong:  2px solid var(--navy);   
  --rule-on-dark: 1px solid var(--rule-light);
  --focus-ring:   3px solid var(--azure);
  --focus-ring-on-dark: 3px solid var(--white);
  --focus-offset: 3px;
  --shadow-menu:  0 12px 32px rgba(2, 38, 94, .16);  


  
  --dur-fast:   150ms;   
  --dur-base:   200ms;   
  --dur-media:  400ms;   
  --ease:       cubic-bezier(.2, .7, .2, 1);
  --hover-zoom: 1.03;
  --nudge:      4px;


  
  --ratio-wide:  16 / 9;
  --ratio-photo: 3 / 2;
  --ratio-tall:  4 / 5;
  --media-pos:   50% 50%;   


  
  --z-hero-ui: 2;    
  --z-header:  50;   
  --z-menu:    60;
  --z-skip:    70;
}





@media (min-width: 901px) and (max-height: 820px) {
  :root {
    --fs-display:   clamp(3.25rem, 4.7vw, 4rem);   
    --fs-h1:        clamp(2.75rem, 4vw, 3.5rem);   
  }
}


@media (max-width: 1100px) {
  :root { --hero-col: 500px; }
}


@media (max-width: 760px) {
  :root {
    --util-h: 34px;
    --bar-h:  64px;
    --lh-display: 1.02;
    --lh-h1:      1.04;
  }
}


@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0ms;
    --dur-base:   0ms;
    --dur-media:  0ms;
    --hover-zoom: 1;
    --nudge:      0px;
  }
}