/* Archivo (headings) and Inter (text), hosted with the site: the same files on every page, no call to Google. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 900;font-display:swap;src:url(/assets/fonts/archivo-latin.woff2) format('woff2');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:'Archivo';font-style:normal;font-weight:500 900;font-display:swap;src:url(/assets/fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/inter-greek.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/inter-greek-ext.woff2) format('woff2');unicode-range:U+1F00-1FFF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format('woff2');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:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* ===== One set of fonts everywhere ======================================================
   Archivo for headings, Inter for everything else, including controls: buttons, the menu
   button and form fields used to fall back to the device's default font (Arial). */
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
button,input,select,textarea,.burger{font-family:inherit}
h1,h2,h3,h4{font-family:Archivo,Inter,system-ui,sans-serif}

/* ===== Page titles: the same size, weight and spacing on every page ===================== */
.phero h1,.esf-hero h1,.pr-hero h1,.pr-h1{
  font-family:Archivo,Inter,system-ui,sans-serif;font-weight:900;letter-spacing:-.025em;line-height:1.05;
  font-size:clamp(2.1rem,4.6vw,3.7rem)}
.phero-compact h1{font-size:clamp(2.1rem,4.6vw,3.7rem)}
/* news articles: the title shares the row with the photo, so one step smaller; the header lines up
   with the logo and the article text instead of running wider than the rest of the page */
.art-hero h1{font-family:Archivo,Inter,system-ui,sans-serif;font-weight:900;letter-spacing:-.025em;line-height:1.08;
  font-size:clamp(2.1rem,3.4vw,3rem)}
.art-hero .art-hero-grid{max-width:var(--maxw);padding-left:24px;padding-right:24px}

/* ===== Phones ======================================================================== */
@media (max-width:700px){
  /* page headers: no tall empty band above the title */
  /* the section and its inner wrapper both added space; keep just the wrapper's */
  .phero,.art-hero{padding-top:0;padding-bottom:0}
  .phero .wrap{padding:30px 20px 30px}
  .phero-compact .wrap{padding:28px 20px 26px}
  .phero h1{margin-top:10px}
  .phero p{margin-top:12px}

  /* news article headers: keep the page margin (the text ran to the screen edge) */
  .art-hero .art-hero-grid{max-width:none;padding:28px 20px 30px;gap:22px}

  /* AnnStuMax: the title and intro before the film */
  .asm-hero .asm-hero-copy{order:-1}

  /* product pages: a smaller picture, less empty space around it */
  .prod-hero .crumbs{margin-bottom:14px}
  .prod-hero-grid{gap:16px}
  .prod-hero-media{max-width:420px;width:100%;justify-self:center}
  .prod-hero-media img{aspect-ratio:2/1;object-fit:cover}

  /* fewer tall empty bands between sections */
  section{padding-top:52px;padding-bottom:52px}
  .partners-band{padding-top:56px;padding-bottom:56px}

  /* home: the five savings two to a row (the first across both) instead of five tall boxes */
  .meters{grid-template-columns:1fr 1fr}
  .meters .meter:first-child{grid-column:span 2}
  .meter{padding:18px 16px}
  .meter .mic{height:34px;margin-bottom:10px}
  .meter .mic svg{width:34px;height:34px}
  .meter .val{margin-top:8px}

  /* home: the "less of everything" cards a little tighter */
  .imp-grid{gap:10px}
  .imp{padding:16px 18px 15px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline}
  .imp .imp-n{grid-row:1}
  .imp h3{margin:0}
  .imp p{grid-column:1 / -1}
}

/* ===== Headings inside sections: one size for each role ================================ */
/* a block's own heading (next to a picture or film) */
.asm-copy h2,.cm-copy h2,.eq-copy h2,.use-copy h2,.svc-copy h2,.cons-copy h2,.cons-ai-copy h2,.ls-body h2{
  font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.15;letter-spacing:-.02em}
/* headings within running text: articles, policies, community story */
.art-sec h2,.prose h2,.policy h2,.goals-head h2{
  font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.2;letter-spacing:-.015em}