/* chrome.css — header/footer ONLY, extracted from styles.css. Loaded on theme-rendered pages
   (blog etc.) so the new nav/footer show WITHOUT the design's global rules repainting the content. */

@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/PlusJakartaSans-Light.ttf') format('truetype');}
@font-face{font-family:'Plus Jakarta Sans';font-style:italic;font-weight:300;font-display:swap;src:url('fonts/PlusJakartaSans-LightItalic.ttf') format('truetype');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/PlusJakartaSans-Regular.ttf') format('truetype');}
@font-face{font-family:'Plus Jakarta Sans';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/PlusJakartaSans-Italic.ttf') format('truetype');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/PlusJakartaSans-Medium.ttf') format('truetype');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/PlusJakartaSans-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/PlusJakartaSans-Bold.ttf') format('truetype');}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Urbanist-Medium.woff2') format('woff2');}
:root{
  /* Colors — 9 total (5 brand + 2 surfaces + 2 text) */
  --c-blue:        #408CF5;   /* primary / accent / links / italic emphasis */
  --c-carbon:      #003B5A;   /* deep section background */
  --c-eclipse:     #011221;   /* near-black base bg + dark text on pale bands */
  --c-white:       #FFFFFF;
  --c-pale:        #BEE3FA;   /* tints, CTA band, hero accent */
  --c-eclipse-2:   #061A2C;   /* slightly lifted eclipse (cards on eclipse) */
  --c-line:        #1C3346;   /* hairline borders on dark */
  --t-on-dark:        #E8F1FB;  /* primary body text on dark */
  --t-on-dark-muted:  #9FB4C7;  /* muted body text on dark */

  /* Typography scale (fluid) */
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-accent: 'Urbanist', var(--font-body);   /* P/P/P labels only; headings currently use --font-body too */
  --fs-hero:   clamp(3.25rem, 8vw, 6rem);     /* H1 hero */
  --fs-h1:     clamp(2.5rem, 5.5vw, 4rem);
  --fs-h2:     clamp(2rem, 4vw, 2.75rem);
  --fs-h3:     clamp(1.5rem, 2.6vw, 2.25rem);
  --fs-h4:     clamp(1.35rem, 0.9rem + 1.4vw, 1.8rem);   /* small heading + prominent subhead (~29px); absorbed old --fs-lead-lg */
  --fs-body:   clamp(1.15rem, 1.6vw, 1.45rem);           /* THE body text (~23px, most-used); was --fs-lead */
  --fs-sm:     clamp(1rem, 1.2vw, 1.15rem);              /* small text (~17px); was --fs-body */
  --fs-xs:     0.95rem;                                   /* fine print (~15px); was --fs-sm */

  /* Weights */
  --w-light:   300;
  --w-reg:     400;
  --w-med:     500;
  --w-semi:    600;
  --w-bold:    700;

  /* Spacing — lean 7-step t-shirt scale (trimmed from --space-xs..10; 4px folded to 8,
     96px folded to 64, 128px dropped — all were ≤1 use; section rhythm = --sec-y). */
  --space-xs:  0.5rem;   /*  8px */
  --space-sm:  0.75rem;  /* 12px */
  --space-md:  1rem;     /* 16px */
  --space-lg:  1.5rem;   /* 24px */
  --space-xl:  2rem;     /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */

  /* Section vertical rhythm. --sec-y is THE standard for non-hero sections (default
     .section). --sec-y-lg is the roomier exception, applied via .section--lg. */
  --sec-y:     clamp(3rem, 6vw, 5rem);   /* standard, 48→80px */
  --sec-y-lg:  clamp(4rem, 9vw, 8rem);   /* roomier exception, 64→128px */
  --hero-y:    clamp(3rem, 7vw, 6rem);   /* CLI-specific: home hero top/bottom margin = its height. Change here to retune. */

  /* Radii */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl: 48px;     /* large rounded section corners */
  --r-pill: 999px;

  /* Layout */
  --container: 1040px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Effects */
  --shadow-card: 0 18px 50px rgba(0,0,0,.35);
  --ease: cubic-bezier(.4,0,.2,1);
}
.site-header,.site-header *,.site-header *::before,.site-header *::after,.site-footer,.site-footer *{ box-sizing:border-box; }
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{ max-width:880px; }
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--c-eclipse);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{ border-bottom-color:var(--c-line); }
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-lg);
  min-height:84px;
}
.nav__logo{ display:inline-flex; align-items:center; flex:0 0 auto; }
.nav__logo img{ height:42px; width:auto; }
.nav__links{
  display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.25rem);
}
.nav__links a{
  font-size:var(--fs-sm);
  font-weight:var(--w-reg);
  color:var(--t-on-dark);
  padding-block:var(--space-xs);
  transition:color .18s var(--ease);
}
.nav__links a:hover{ color:var(--c-blue); }
.nav__links a.is-active{ color:var(--c-blue); }
.nav__toggle{
  display:none;
  width:46px; height:46px;
  border:1px solid var(--c-line); border-radius:var(--r-sm);
  background:transparent;
  flex-direction:column; gap:5px; align-items:center; justify-content:center;
}
.nav__toggle span{ width:22px; height:2px; background:var(--c-white); border-radius:2px; transition:.2s var(--ease); }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--fs-sm); font-weight:var(--w-semi);
  padding:var(--space-sm) var(--space-xl);
  border-radius:var(--r-pill);
  border:1px solid transparent;
  transition:transform .15s var(--ease), background .18s var(--ease), color .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn--primary{ background:var(--c-blue); color:var(--c-white); position:relative; overflow:hidden; isolation:isolate; }
.btn--pale{ background:var(--c-pale); color:var(--c-eclipse); }
.btn--pale:hover{ background:#a9d6f3; }
.btn--ghost{ background:transparent; color:var(--c-white); border-color:var(--c-line); }
.btn--ghost:hover{ border-color:var(--c-blue); color:var(--c-blue); }
.btn .arrow{ transition:transform .15s var(--ease); }
.btn:hover .arrow{ transform:translateX(3px); }
.btn--primary::before{
  content:""; position:absolute; top:0; bottom:0; left:0; right:-22px; z-index:-1; background:#1e5fe0;
  transform:translateX(-102%);
  -webkit-clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  transition:transform .42s var(--ease);
}
.btn--primary .arrow{ transition:transform .38s var(--ease), opacity .28s var(--ease); }
.btn--primary:hover::before{ transform:translateX(0); }
.btn--primary:hover .arrow{ transform:translateX(2.4rem); opacity:0; }
.btn--primary .btn__label{ transition:transform .38s var(--ease); }
.btn--primary:hover .btn__label{ transform:translateX(0.8rem); }
.cta-band .btn{ margin-top:var(--space-xl); }
.site-footer{ background:var(--c-eclipse); padding-block:var(--sec-y); }
.site-footer address{ font-style:normal; }
.footer__grid{
  display:grid;
  /* Figma: logo · address · links kept CLOSE together (auto), copyright pushed to the
     far right (the 1fr soaks up the space). D + L share this 3-col-plus-copyright row. */
  grid-template-columns:auto auto auto 1fr;
  gap:clamp(1.25rem,3vw,2.25rem);
  align-items:center;
}
.footer__logo img{ height:60px; width:auto; }
.footer__col h4{ font-size:var(--fs-sm); font-weight:var(--w-bold); color:var(--c-white); margin-bottom:var(--space-sm); }
.footer__col a,.footer__col p{ color:var(--t-on-dark); font-size:var(--fs-xs); line-height:1.7; }
.footer__col a:hover{ color:var(--c-blue); }
.footer__nap p{ margin:0; }
.footer__copy{ text-align:right; color:var(--t-on-dark); font-size:var(--fs-xs); line-height:1.6; }
.footer__copy a{ color:rgba(64,140,245,.3); text-decoration:none; transition:color .2s var(--ease); }
.footer__copy a:hover{ color:var(--c-blue); }
@media (max-width:767.98px){
  .nav__toggle{ display:flex; }
  .nav__links{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--c-eclipse);
    border-top:1px solid var(--c-line);
    border-bottom:1px solid var(--c-line);
    padding:var(--space-sm) var(--gutter);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .2s var(--ease), transform .2s var(--ease);
  }
  .nav__links.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .nav__links a{ width:100%; padding:var(--space-sm) 0; border-bottom:1px solid var(--c-line); font-size:var(--fs-sm); }
  .nav__links a:last-child{ border-bottom:none; }
  .footer__grid{ grid-template-columns:auto auto 1fr; justify-items:start; text-align:left; column-gap:var(--space-xl); row-gap:var(--space-lg); align-items:center; }
  .footer__logo{ grid-column:1; }
  .footer__nap{ grid-column:2; }
  .footer__grid > .footer__col:not(.footer__nap){ grid-column:3; justify-self:end; text-align:right; }
  .footer__copy{ grid-column:1 / -1; justify-self:stretch; text-align:center; }
}
@media (max-width:479.98px){
  .footer__grid{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .footer__logo,.footer__nap,.footer__grid > .footer__col:not(.footer__nap),.footer__copy{ grid-column:1; justify-self:center; text-align:center; }
}

/* body font is the theme's on these pages (we don't touch body); pin the brand font on the chrome */
.site-header,.site-footer{ font-family:var(--font-body); }

/* The design zeroes these globally (list bullets, element margins, link underlines, img display); we
   excluded those global rules to protect the article body, so re-apply them SCOPED to the chrome only. */
.site-header ul,.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-header p,.site-header h1,.site-header h2,.site-header h3,.site-header h4,
.site-footer p,.site-footer h1,.site-footer h2,.site-footer h3,.site-footer h4{ margin:0; }
.site-header a,.site-footer a{ text-decoration:none; }
.site-header img,.site-footer img{ display:block; max-width:100%; }
.site-footer address{ margin:0; }  /* theme puts an 18px bottom margin on <address>; kills the vertical misalignment */