/* Shared corporate styling for the served pages. Colors, type and components
   follow staceyagnew.com. Rubik is self-hosted (SIL Open Font License, see
   OFL-Rubik.txt); one variable-weight latin file covers 300-900. */

@font-face{
  font-family:"Rubik";
  src:url("/static/brand/rubik-latin.woff2") format("woff2");
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --sa-green:#007A60;
  --sa-green-dark:#00604B;
  --sa-navy:#06163A;
  --sa-navy-deep:#020D26;
  --sa-body:#3F485D;
  --sa-line:#DFE4EF;
  --sa-band:#F2F2F2;
  --sa-font:"Rubik",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  /* Height the sticky site header covers; pages pin their own sticky
     elements below it. 0 whenever .sa-header is static. */
  --sa-header-offset:82px;
}

/* Header bar: white, sticky, logo left, actions right. Sized after the live
   site: 81px tall, 240px logo, 18px nav links, full-height green button. */
.sa-header{position:sticky;top:0;z-index:50;background:#fff;
  border-bottom:1px solid #e6e6e6;box-shadow:0 1px 4px rgba(2,13,38,.06)}
.sa-header-in{max-width:1260px;margin:0 auto;padding:0;
  min-height:81px;display:flex;align-items:center;gap:1.4rem;
  font-family:var(--sa-font)}
/* Below the frame width the logo needs breathing room from the screen edge;
   the green block stays flush right on purpose. */
@media (max-width:1299px){.sa-header-in{padding-left:1.25rem}}
.sa-spacer{flex:1}

/* The wordmark, served from the original artwork at half size (retina-crisp). */
.sa-logo{display:inline-flex;align-items:center}
.sa-logo img{width:240px;height:auto;display:block}

.sa-nav{display:flex;align-items:center;align-self:stretch;gap:1.6rem;
  flex-wrap:wrap}
.sa-nav a{color:var(--sa-navy-deep);text-decoration:none;font-size:1.125rem;
  white-space:nowrap}
.sa-nav a:hover{color:var(--sa-green)}

.sa-btn{display:inline-block;background:var(--sa-green);color:#fff;
  text-decoration:none;text-align:center;font-family:var(--sa-font);
  font-size:1rem;font-weight:400;padding:.8rem 1.5rem;border:0;
  border-radius:0;cursor:pointer}
.sa-btn:hover{background:var(--sa-green-dark);color:#fff}
/* In the header the button is a full-height block, as on the live site. */
.sa-nav .sa-btn{align-self:stretch;display:inline-flex;align-items:center;
  padding:0 30px}

/* Page-title band under the header. */
.sa-band{background:var(--sa-band)}
.sa-band-in{max-width:1300px;margin:0 auto;padding:2.1rem 1.25rem 2.2rem;
  font-family:var(--sa-font)}
.sa-band h1{margin:0;color:var(--sa-navy);font-size:clamp(1.5rem,3.4vw,2.5rem);
  font-weight:500;line-height:1.2}
.sa-band p{margin:.55rem 0 0;color:var(--sa-body);font-size:1rem;max-width:70ch}

@media (max-width:640px){
  /* Two rows tall here, so let it scroll away instead of pinning. */
  :root{--sa-header-offset:0px}
  .sa-header{position:static}
  .sa-header-in{flex-wrap:wrap;gap:.6rem 1rem;padding:.6rem 1rem;min-height:0}
  .sa-nav{gap:.9rem;align-self:auto}
  .sa-btn{padding:.55rem 1rem;font-size:.9rem}
  .sa-nav .sa-btn{align-self:auto;padding:.55rem 1rem}
  .sa-logo img{width:180px}
}