/* The header and footer every page shares. One file, so the pages cannot
   drift apart — they already had: the home footer said "Privacy" and "Terms"
   while the legal pages said "Privacy Policy" and "Terms of Use".

   index.html links this and keeps its own page styles inline; the legal pages
   link this and legal.css. Colours and measurements are the mock's. */

.accent-rule{height:4px;background:#A6C962}

/* Keyboard focus: one ring, the dark brand green, only when focus came from
   the keyboard (:focus-visible), so a mouse click never shows it. */
a:focus-visible,button:focus-visible{outline:3px solid #183B20;outline-offset:3px;border-radius:999px}

/* "Skip to content": invisible until it is focused, then the first thing a
   keyboard or screen-reader user meets, so they can jump the header. */
.skip-link{position:absolute;left:16px;top:-100px;z-index:100;padding:12px 18px;border-radius:999px;background:#2C6438;color:#FBFCF6;font-family:'Baloo 2',cursive;font-weight:700;font-size:16px;box-shadow:0 2px 0 #183B20}
.skip-link:focus{top:12px;color:#FBFCF6}

/* Header: wordmark left; nav and, on the home page, the "Say hello" pill
   together on the right. The mock gave the nav and the pill a margin-left:auto
   each, which split the slack and left the nav floating mid-page. */
.site-header-sticky{position:sticky;top:0;z-index:40}
.site-header{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:rgba(251,249,240,0.88);border-bottom:1px solid #EBE7D8}
.site-header-inner{max-width:1220px;margin:0 auto;padding:12px clamp(16px,3vw,40px);display:flex;align-items:center;gap:10px 22px}
.wordmark-link{display:block;flex:0 1 auto;min-width:0;color:inherit;padding:2px 0}
.wordmark-link img{width:216px;height:auto}
.site-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
/* 18px line + 13px above and below = a 44px target, the size of a fingertip. */
.nav-link{font-size:15px;line-height:18px;font-weight:600;color:#23241B;padding:13px 14px;border-radius:999px;white-space:nowrap;transition:background 140ms ease,color 140ms ease}
.nav-link:hover{background:#EDEFE0;color:#15160F}
.site-header .button-hello{flex:none;margin-left:6px}
/* Below 720px: smaller wordmark, nav on the right, no pill (Contact is the
   same mailto). One row down to 360px. */
@media (max-width: 719px){
  .site-header-inner{justify-content:space-between;gap:6px 8px;padding:10px 14px}
  .wordmark-link img{width:128px}
  .site-nav{flex:1 0 auto;justify-content:flex-end}
  .nav-link{font-size:14px;padding:13px 8px}
  .site-header .button-hello{display:none}
}

/* Footer: wordmark, links as 44px-tall pills (a finger-sized target), the
   email on the right, and the green rule as the very last thing on the page —
   the mock left 40px of footer below it. The row gets real room above and
   below it (56px / 52px): with less, the footer reads as a strip squeezed
   against the bottom of the window. On phones everything stacks and the
   email gets its own row instead of breaking the link row in two. */
.site-footer{background:#FEFEFA;border-top:1px solid #EFEDE1;padding:56px 0 0}
@media (max-width: 719px){ .site-footer{padding-top:40px} }
.footer-inner{max-width:1220px;margin:0 auto;padding:0 clamp(20px,3vw,40px) 52px;display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.footer-inner img{width:180px;height:auto}
.footer-nav{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;margin:0 -12px}
.footer-link{font-size:15px;font-weight:600;color:#3B3D33;padding:12px;border-radius:999px;white-space:nowrap;transition:background 140ms ease,color 140ms ease}
.footer-link:hover{background:#EDEFE0;color:#15160F}
.footer-email{margin-left:6px}
@media (max-width: 719px){
  .footer-inner{flex-direction:column;align-items:flex-start;gap:10px;padding-bottom:36px}
  /* Two tidy columns instead of a wrapped row that strands "Terms of Use". */
  .footer-nav{display:grid;grid-template-columns:auto auto;justify-content:start;column-gap:8px;row-gap:0}
  .footer-email{grid-column:1 / -1;margin-left:0}
}