/* ============================================================
   GSA CONSULTING — SHARED STYLESHEET
   Linked by all 4 pages. Edit colors in ONE place below.
   ------------------------------------------------------------
   THEME COLORS — to re-theme the whole site, change these 5.
   Nothing else references a raw color value.
   ============================================================ */
:root {
  /* THEME COLORS — pulled from the GSA logo (navy + teal). */
  --forest: #20346F;   /* NAVY — hero, header brand, footer, primary headings */
  --sage:   #1A2B5C;   /* deep navy — secondary dark surfaces (value strip), hovers */
  --brass:  #53A396;   /* TEAL — brand accent: CTAs, links, eyebrows, numbers */
  --sand:   #EDEBE4;   /* quiet section backgrounds */
  --white:  #FFFFFF;   /* page + card surfaces */

  /* UNEXPECTED HIGHLIGHT — amber, used only 1–2 times per page. */
  --amber:  #FFB020;

  /* derived neutrals (not part of the swappable brand set) */
  --ink:      #1C2622;  /* body text */
  --ink-soft: #55605B;  /* secondary text */
  --hairline: #D8DBE4;  /* borders, dividers (navy-tuned) */
  --forest-mute: #AEB7CE; /* muted text on dark navy bg */

  --maxw: 1100px;
  --pad:  28px;
}

/* ---------- reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--sage); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* display serif for headings */
h1, h2, h3, .display {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal;
  color: var(--forest);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* ---------- header / nav ---------- */
.site-header {
  border-bottom: 1px solid var(--hairline);
  background: var(--white);
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
}
/* Reserve a CONSTANT amount of space for the fixed header, equal to its TALL height,
   set once and never changed. The header shrinks visually on top of the content
   (logo scales via transform, which doesn't affect layout), so the page never moves
   and there is zero reflow when scrolling — the smooth, standard approach. */
body { padding-top: 157px; } /* desktop tall header: 140px logo + 16px nav pad + 1px border */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 8px 0;
  transition: padding .25s ease;
}
/* subtle shrink once the user scrolls */
.site-header.scrolled .nav { padding: 7px 0; }
.site-header.scrolled .brand-logo img { height: 92px; }
.brand {
  font-family: Georgia, serif; font-size: 22px; color: var(--forest);
  text-decoration: none; letter-spacing: .01em; font-weight: normal;
}
.brand b { color: var(--brass); font-weight: normal; }
/* header logo image (replaces the text wordmark in the top nav) */
.brand-logo { display: inline-flex; align-items: center; }
.brand-logo img { height: 140px; width: auto; display: block; transition: height .25s ease; }
.nav-links { display: flex; gap: 28px; list-style: none; flex-wrap: wrap; }
.nav-links a {
  color: var(--ink); text-decoration: none; font-size: 15px;
  padding: 4px 0; border-bottom: 2px solid transparent; transition: border-color .18s, color .18s;
}
.nav-links a:hover, .nav-links a:focus, .nav-links a.active {
  border-bottom-color: var(--brass); color: var(--forest);
}
.nav-toggle { display: none; background: none; border: 0; font-size: 26px; color: var(--forest); cursor: pointer; line-height: 1; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font-size: 15px; font-weight: 600;
  letter-spacing: .02em; text-decoration: none;
  padding: 14px 30px; border: 2px solid transparent; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.btn-primary { background: var(--brass); color: var(--white); }
.btn-primary:hover, .btn-primary:focus { background: #3F8375; }
.btn-ghost { border-color: var(--forest-mute); color: var(--white); }
.btn-ghost:hover, .btn-ghost:focus { border-color: var(--brass); color: var(--brass); }
.btn-outline { border-color: var(--forest); color: var(--forest); }
.btn-outline:hover, .btn-outline:focus { background: var(--forest); color: var(--white); }

/* ---------- eyebrow / section headings ---------- */
.eyebrow {
  font-family: -apple-system, sans-serif;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass); font-weight: 600; margin-bottom: 16px;
}
.section { padding: 84px 0; }
.section.sand { background: var(--sand); }

/* ---------- amber highlight helpers (the unexpected pop, used sparingly) ---------- */
/* rounded amber underline that sits UNDER the words */
.hl-underline { position: relative; display: inline-block; padding-bottom: 10px; }
.hl-underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 6px; background: var(--amber); border-radius: 6px;
  transform: rotate(-1.5deg); transform-origin: left center;
}
/* single word rendered in amber (text color, no block) */
.hl-word { color: var(--amber); }
/* amber word, italicised */
.hl-word-i { color: var(--amber); font-style: italic; }
/* amber period, slightly enlarged for emphasis */
.hl-period { color: var(--amber); font-size: 1.25em; line-height: 0; }
/* a panel filled amber to make one item stand out */
.panel.hl-panel { background: var(--amber); border-left-color: var(--forest); }
.panel.hl-panel h3 { color: #3D2C00; }
.panel.hl-panel p  { color: #5A4200; }
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head h2 { font-size: 34px; margin-bottom: 14px; }
.section-head p { color: var(--ink-soft); font-size: 17px; }

/* ---------- hero ---------- */
.hero {
  background: var(--forest); color: var(--white);
  padding: 160px 0 104px; /* top clears the ~157px fixed header so hero content stays visible under it */
  background-size: cover; background-position: center;
}
/* per-page hero photos: navy overlay (72%) keeps white text readable */
.hero.hero-home    { background-image: linear-gradient(rgba(26,37,74,.72), rgba(26,37,74,.72)), url('hero-home.jpg'); }
.hero.hero-about   { background-image: linear-gradient(rgba(26,37,74,.72), rgba(26,37,74,.72)), url('hero-about.jpg'); }
.hero.hero-offer   { background-image: linear-gradient(rgba(26,37,74,.72), rgba(26,37,74,.72)), url('hero-offer.jpg'); }
.hero.hero-contact { background-image: linear-gradient(rgba(26,37,74,.72), rgba(26,37,74,.72)), url('hero-contact.jpg'); }
/* community photo — Little League section on About, same navy-overlay treatment as the page heroes */
.community-photo {
  background-image: linear-gradient(rgba(26,37,74,.72), rgba(26,37,74,.72)), url('community-little-league.jpg');
  background-size: cover; background-position: center;
  padding: 90px 0;
}
.community-photo .eyebrow { color: var(--brass); }
.community-photo .prose h2 { color: var(--white); }
.community-photo .prose p { color: #DDE5E1; }
.hero .eyebrow { color: var(--brass); }
.hero h1 { color: var(--white); font-size: clamp(36px, 5.5vw, 60px); max-width: 16ch; margin-bottom: 20px; }
.hero .sub { color: var(--forest-mute); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 26px; }
.hero p.lede { color: #DDE5E1; font-size: 19px; max-width: 52ch; margin-bottom: 36px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- feature grid ---------- */
.grid { display: grid; gap: 26px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.card {
  background: var(--white); border: 1px solid var(--hairline);
  border-top: 3px solid var(--brass); padding: 30px 28px;
}
.card h3 { font-size: 21px; margin-bottom: 10px; }
.card p { color: var(--ink-soft); font-size: 15.5px; }
.card .num {
  font-family: Georgia, serif; font-size: 14px; color: var(--brass);
  display: block; margin-bottom: 14px; letter-spacing: .1em;
}

/* value strip — client quote */
.strip { background: var(--sage); color: var(--white); }
.strip .wrap { padding-top: 90px; padding-bottom: 90px; text-align: center; }
.strip-quote {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 38px;
  line-height: 1.45;
  color: var(--white);
  max-width: 900px;
  margin: 0 auto;
}
.strip-quote .quote-mark {
  font-style: normal;
  font-weight: 700;
  font-size: 1.5em;
  color: #808080;
  line-height: 0;
  vertical-align: -0.08em;
}
.flag { /* placeholder marker styling, subtle */ }

/* ---------- prose blocks ---------- */
.prose { max-width: 680px; }
.prose p { margin-bottom: 18px; color: var(--ink); font-size: 17px; }
.prose h2 { font-size: 30px; margin: 40px 0 16px; }
.lead { font-size: 20px; color: var(--ink); }

/* split about layout */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.panel { background: var(--sand); padding: 36px 32px; border-left: 3px solid var(--brass); display: flex; flex-direction: column; justify-content: center; }
.panel h3 { font-size: 20px; margin-bottom: 12px; }
.panel p { color: var(--ink-soft); font-size: 15.5px; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--forest); color: var(--white); text-align: center; }
.cta-band .wrap { padding: 76px var(--pad); }
.cta-band h2 { color: var(--white); font-size: 34px; margin-bottom: 16px; }
.cta-band p { color: var(--forest-mute); font-size: 18px; max-width: 46ch; margin: 0 auto 32px; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: start; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--forest); margin-bottom: 7px; }
.field .req { color: var(--brass); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--hairline); background: var(--white); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(46,93,78,.12);
}
.field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.contact-side { background: var(--sand); padding: 32px 30px; border-top: 3px solid var(--brass); }
.contact-side h3 { font-size: 20px; margin-bottom: 18px; }
.contact-line { display: flex; gap: 12px; margin-bottom: 16px; font-size: 15.5px; color: var(--ink); align-items: flex-start; }
.contact-line .k { color: var(--brass); font-weight: 600; min-width: 84px; }
.contact-side a { color: var(--sage); }
.form-status { padding: 14px 16px; font-size: 15px; margin-bottom: 20px; display: none; }
.form-status.ok { display: block; background: #E1F0E9; border: 1px solid #A8CDBC; color: #1A5039; }
.form-status.err { display: block; background: #FBEAEA; border: 1px solid #E0A9A9; color: #8A2B2B; }

/* ---------- footer ---------- */
.site-footer { background: var(--forest); color: var(--forest-mute); padding: 56px 0 40px; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.site-footer .brand { color: var(--white); display: inline-block; margin-bottom: 14px; }
.footer-legal { font-size: 14px; color: var(--forest-mute); max-width: 34ch; }
.footer-assoc { font-size: 13px; color: var(--brass); margin: 4px 0 10px; letter-spacing: .01em; }
.footer-social { display: flex; gap: 14px; margin-top: 16px; }
.footer-social a { color: var(--forest-mute); display: inline-flex; transition: color .2s ease; }
.footer-social a:hover { color: var(--brass); }

/* ---------- contact: executive cards ---------- */
.exec-grid { margin-bottom: 40px; }
.card.exec { text-align: left; }
.card.exec h3 { margin-bottom: 2px; }
.exec-role { color: var(--brass); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; margin-bottom: 14px; }
.exec-line { font-size: 15px; margin-bottom: 6px; }
.exec-line a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.exec-line a:hover { color: var(--brass); border-color: var(--brass); }
.contact-links { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.btn-ghost-dark { background: transparent; color: var(--forest); border: 2px solid var(--forest); }
.btn-ghost-dark:hover { background: var(--forest); color: var(--white); }
.contact-loc { color: var(--ink-soft); font-size: 14px; }
.site-footer h4 { color: var(--white); font-family: -apple-system, sans-serif; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; font-weight: 600; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: var(--forest-mute); text-decoration: none; font-size: 15px; }
.site-footer a:hover { color: var(--brass); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); padding-top: 24px; font-size: 13px; color: var(--forest-mute); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  body { padding-top: 146px; } /* mobile tall header: 129px logo + 16px nav pad + 1px border */
  .brand-logo img { height: 129px; }
  .site-header.scrolled .brand-logo img { height: 84px; }
  /* mobile exec card order: Robert, Shalom, Elizabeth */
  .exec-robert { order: 1; }
  .exec-shalom { order: 2; }
  .exec-liz    { order: 3; }
  .exec-grid   { display: flex; flex-direction: column; }
  /* hamburger: fixed horizontal spot (not screen edge), vertically centered so it tracks the shrinking logo */
  .nav { position: relative; }
  .nav-toggle { position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%); margin: 0; }
  .site-header .nav { padding-left: var(--pad); padding-right: var(--pad); }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--white);
    border-bottom: 1px solid var(--hairline); padding: 8px 0;
  }
  .nav-links.open { display: flex; }
  .nav-links li { padding: 0 var(--pad); }
  .nav-links a { display: block; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
  .nav-toggle { display: block; }
  .split, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }

  /* value strip quote: tighten size a bit on small screens */
  .strip-quote { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto; } }