/* ============================================================
   POLLARD ADVISORY, styles.css
   Plain CSS, no build step. Edit color tokens below to retheme.
   ============================================================ */

:root {
  /* Brand palette (matches the print collateral) */
  --navy:        #1F2421;   /* ink, headings / rules (brand: Ink) */
  --navy-soft:   #366049;   /* moss hover state */
  --gold:        #3D6B4F;   /* moss, THE accent, sparing */
  --ink:         #1F2421;   /* body text (brand: Ink) */
  --muted:       #6B6F6C;   /* secondary text (brand: Muted) */
  --bg:          #FBFAF7;   /* Paper */
  --bg-alt:      #F4F2EC;   /* Surface */
  --hairline:    #E4E2DB;   /* Line, hairline rules */
  --white:       #FFFFFF;

  /* Type: Outfit is used throughout, per the Pollard Advisory brand guide
     (400 body, 500 headings/emphasis, 500 is the maximum weight). */
  --serif: "Outfit", "Segoe UI", system-ui, sans-serif;            /* structure: headings, stats */
  --reading: "Source Serif 4", Georgia, "Times New Roman", serif;  /* running text */
  --data: "Source Sans 3", "Segoe UI", system-ui, sans-serif;      /* UI, labels, forms, captions */
  --ui:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --maxw:        1040px;
  --maxw-narrow: 760px;
  --pad:         clamp(1.25rem, 5vw, 2.5rem);
  --header-h:    64px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px); /* anchors clear the sticky nav */
}

body {
  margin: 0;
  font-family: var(--reading);
  font-size: 1.0625rem;            /* ~17px */
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--gold);
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}
a:hover { color: var(--navy-soft); }

h1, h2, h3 { font-family: var(--serif); color: var(--navy); font-weight: 500; line-height: 1.25; }
b, strong { font-weight: 600; }

/* ---------- Accessibility helpers ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--navy);
  color: var(--white);
  padding: 0.6rem 1rem;
  z-index: 1000;
  border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- Containers ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.container--narrow { max-width: var(--maxw-narrow); }
.container--hero   { max-width: var(--maxw-narrow); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  padding: 0.85rem 1.5rem;
  background: var(--gold);
  color: var(--white);
  border: 1px solid var(--gold);
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--navy-soft); border-color: var(--navy-soft); color: var(--white); }

.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--hairline);
}
.btn--ghost:hover { background: transparent; color: var(--navy); border-color: var(--gold); }

.btn--small { padding: 0.5rem 1rem; font-size: 0.95rem; }

/* ============================================================
   STICKY NAV
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 250, 248, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--hairline);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.nav__brand img { height: 36px; display: block; }
.nav__brand {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
}

.nav__menu {
  font-family: var(--data);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
}
.nav__menu a {
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.nav__menu a:hover { color: var(--navy); }
.nav__menu a.btn { color: var(--white); }

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--navy);
  transition: transform .2s ease, opacity .2s 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); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  text-align: center;
  padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(2.5rem, 7vw, 4.5rem);
}

.hero__logo {
  width: clamp(240px, 34vw, 340px);
  margin: 0 auto 1.5rem;
}

.wordmark {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: clamp(1.75rem, 5.5vw, 3rem);
  margin: 0 0 0.6rem;
  /* offset so the wide letter-spacing stays optically centered */
  text-indent: 0.28em;
}

.hero__sub {
  font-family: var(--serif);
  color: var(--muted);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  margin: 0 0 0.35rem;
}
.hero__tagline {
  font-family: var(--data);
  font-style: normal;
  color: var(--muted);
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  margin: 0;
}

/* Thin double rule under the masthead (mirrors the PDFs) */
.rule-double {
  max-width: 540px;
  margin: 1.75rem auto;
  border-top: 3px solid var(--navy);
  border-bottom: 1px solid var(--navy);
  height: 5px;
}

.hero__headline {
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  max-width: 18ch;
  margin: 0.5rem auto 1.25rem;
}

.hero__lead {
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  color: var(--muted);
  max-width: 56ch;
  margin: 0 auto 2rem;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
}

/* Credibility line under the hero lead */
.hero__cred {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  max-width: 64ch;
  margin: 0 auto 1.9rem;
  line-height: 1.7;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding-block: clamp(3rem, 7vw, 5rem); }
.section--alt { background: var(--bg-alt); }

/* Section label: uppercase, letter-spaced, navy, thin underline */
.section-label {
  font-family: var(--data);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--hairline);
}

.lead {
  font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink);
  margin-top: 0;
}

/* Consistent editorial column: prose shares one left edge AND one right edge.
   Capped in px, not ch. ch scales with each paragraph's own font size, which
   made smaller paragraphs wrap visibly narrower than the lead above them. */
.section .lead,
.section .container > p:not(.section-label),
.checklist { max-width: 620px; }
.feature__statement { max-width: 46ch; }
.form { max-width: 640px; }
.contact__scheduler { max-width: 640px; }
p { color: var(--muted); }
.lead { color: var(--ink); }

/* ---------- Grid of "what the review covers" ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--2 > .card:nth-child(odd):last-child { grid-column: 1 / -1; }

.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--gold);
  border-radius: 2px;
  padding: 1.6rem 1.6rem 1.4rem;
}
.card__title { font-size: 1.15rem; margin: 0 0 0.5rem; }
.card p { margin: 0; }

/* ---------- Services list ---------- */
.services { list-style: none; margin: 0; padding: 0; }
.services li {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) 2fr;
  gap: 0.4rem 2rem;
  align-items: baseline;
}
.services li:last-child { border-bottom: 0; }
.services__name {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  font-size: 1.15rem;
}
.services__desc { color: var(--muted); margin: 0; }

/* Secondary "also available" line beneath the core services */
.services__also {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
  margin: 1.6rem 0 0;
  max-width: 72ch;
}

/* ---------- Checklist (who it's for) ---------- */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.75rem;
  border-bottom: 1px solid var(--hairline);
  color: var(--muted);
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.5rem;
  width: 8px;
  height: 8px;
  background: var(--gold);
  border-radius: 50%;
}

/* ---------- Why-independent feature band ---------- */
.section--feature { background: var(--navy); color: #FBFAF7; }
.section-label--on-dark { color: #4C8763; border-bottom-color: rgba(76,135,99,0.5); }
.feature__statement {
  font-family: var(--reading);
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  line-height: 1.5;
  color: #FBFAF7;
  margin: 0;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.about__photo img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--hairline);
}
.about__name { font-size: 1.4rem; margin: 0 0 0.2rem; }
.about__role {
  font-family: var(--data);
  font-style: normal;
  color: var(--muted);
  margin: 0 0 1.1rem;
}
.about__body p:last-child { margin-bottom: 0; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact__scheduler { margin: 0 0 2.5rem; }

.form { font-family: var(--data); margin: 0 0 2.25rem; }
.form__row { margin-bottom: 1.1rem; }
.form__row label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 0.35rem;
  letter-spacing: 0.01em;
}
.form input,
.form textarea {
  width: 100%;
  font-family: var(--data);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 0.7rem 0.85rem;
}
.form input:focus,
.form textarea:focus { border-color: var(--navy); outline: 2px solid var(--gold); outline-offset: 1px; }
.form textarea { resize: vertical; }

/* Honeypot: visually hidden but present for bots */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status { margin: 0.75rem 0 0; font-size: 0.95rem; }
.form__status.is-error   { color: #A14D3A; }
.form__status.is-success { color: #3D6B4F; }

/* Only flag a field after the user has actually interacted with it */
.form input:user-invalid,
.form textarea:user-invalid { border-color: #A14D3A; }

.contact__direct {
  list-style: none;
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.contact__direct a { font-size: 1rem; text-decoration: none; }
.contact__direct a:hover { text-decoration: underline; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  font-family: var(--data);
  background: var(--navy);
  color: #D8E1DB;
  padding-block: 2.5rem;
}
.site-footer a { color: #FBFAF7; text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer__line { margin: 0 0 0.6rem; color: #E4E2DB; font-size: 0.95rem; }
.footer__line strong { color: var(--white); }
.footer__fine { margin: 0; font-size: 0.85rem; color: #9AA09B; }

/* ============================================================
   SCROLL REVEAL (progressive enhancement)
   Elements are visible by default; JS adds .reveal--ready to
   enable the transition, so no-JS users see everything.
   ============================================================ */
.reveal--ready { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal--ready.is-visible { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  .grid--2 { grid-template-columns: 1fr; }

  .services li { grid-template-columns: 1fr; gap: 0.25rem; }

  .about { grid-template-columns: 1fr; justify-items: center; text-align: left; }
  .about__photo { justify-self: center; }
  .about__body { width: 100%; }

  /* Mobile nav */
  .nav__toggle { display: flex; }
  .nav__menu {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
    padding: 0.5rem var(--pad) 1.25rem;
    box-shadow: 0 12px 24px rgba(16,36,63,0.08);
    display: none;
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu li { width: 100%; }
  .nav__menu a {
    display: block;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--hairline);
  }
  .nav__menu li:last-child a { border-bottom: 0; }
  .nav__menu a.btn { text-align: center; margin-top: 0.75rem; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal--ready { opacity: 1 !important; transform: none !important; transition: none; }
  * { transition: none !important; }
}