/* ==========================================================================
   Assistancy site styles
   Shared by index.html and partners/index.html.
   The color palette lives in the :root block directly below; change a value
   there and it updates everywhere on both pages.
   ========================================================================== */

:root {
  --bg: #FAF8F4;
  --bg-alt: #F1EDE5;
  --bg-deep: #24443F;
  --ink: #262523;
  --ink-soft: #56534D;
  --brand: #2C5751;
  --brand-bright: #38716A;
  --accent: #B5622F;
  --line: #DFD8CB;
  --radius: 10px;
  --measure: 34rem;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--sans);
  line-height: 1.2;
  margin: 0 0 0.5em;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.1rem, 5.5vw, 3.3rem); }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.3rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1.1em; }
a { color: var(--brand); }

.wrap {
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.band { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.band--alt { background: var(--bg-alt); }
.band--deep { background: var(--bg-deep); color: #F3EFE7; }
.band--deep h2 { color: #FFFFFF; }
.band--deep a { color: #EBC9A8; }

/* ---------- Header ---------- */

.masthead {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  /* Centred rather than baseline-aligned, because the brand now carries a
     mark whose optical centre, not its text baseline, should line up with
     the nav. */
  align-items: center;
  justify-content: space-between;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand);
  text-decoration: none;
}
/* The mark takes its colour from .brand, so it follows the link colour and
   works unchanged in both themes. */
.brand__mark {
  width: 2rem;
  height: 2rem;
  flex: none;
}
.brand__name { line-height: 1.15; }
.brand__sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Mobile menu ---------- */

.nav-toggle {
  display: none;          /* desktop: the nav shows in full */
  align-items: center;
  justify-content: center;
  /* 2.75rem is 44px, the minimum comfortable tap target, and this audience
     is the last one to shortchange on that. */
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.5rem -0.5rem -0.5rem 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius);
  color: var(--brand);
  cursor: pointer;
}
.nav-toggle:hover { background: rgba(44, 87, 81, 0.08); }
.nav-toggle svg { width: 1.6rem; height: 1.6rem; display: block; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.35rem;
  font-size: 0.98rem;
}
.nav a {
  font-family: var(--sans);
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a:focus { color: var(--brand); border-bottom-color: var(--brand); }

@media (max-width: 48rem) {
  .nav-toggle { display: inline-flex; }

  /* Hidden by default and revealed by the button's own state, so the button
     attribute is the only thing the script has to change. */
  .nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    max-height: 70vh;
    overflow-y: auto;
  }
  .nav-toggle[aria-expanded="true"] ~ .nav { display: flex; }

  .nav a {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line);
    border-top: none;
  }
  .nav a:last-child { border-bottom: none; }
  .nav a:hover, .nav a:focus { border-bottom-color: var(--line); }
}

/* ---------- Hero ---------- */

.hero { padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem); }
.hero h1 { max-width: 20ch; }
.hero p.lede {
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  color: var(--ink-soft);
  max-width: var(--measure);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
}
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  text-decoration: none;
  border: 2px solid var(--brand);
}
.btn--solid { background: var(--brand); color: #FFFFFF; }
.btn--solid:hover, .btn--solid:focus { background: var(--brand-bright); border-color: var(--brand-bright); }
.btn--ghost { color: var(--brand); background: transparent; }
.btn--ghost:hover, .btn--ghost:focus { background: rgba(44, 87, 81, 0.08); }

/* ---------- Content blocks ---------- */

.measure { max-width: var(--measure); }

.grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: 2.5rem;
}

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.band--alt .card { background: #FFFFFF; }
.card h3 { color: var(--brand); margin-bottom: 0.35rem; }
.card p { margin-bottom: 0; font-size: 1.02rem; color: var(--ink-soft); }

/* ---------- Two-column scope comparison ---------- */

.split {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: 2.5rem;
}
.scope {
  border-radius: var(--radius);
  padding: 1.75rem;
  border: 1px solid var(--line);
  background: #FFFFFF;
}
.scope--no { background: transparent; }
.scope h3 { margin-bottom: 0.9rem; }
.scope--yes h3 { color: var(--brand); }
.scope--no h3 { color: var(--ink-soft); }
.scope ul { margin: 0; padding-left: 1.15rem; }
.scope li { margin-bottom: 0.6rem; font-size: 1.02rem; }
.scope li:last-child { margin-bottom: 0; }

/* ---------- Referral trigger list ---------- */

.triggers {
  list-style: none;
  padding: 0;
  margin: 2.25rem 0 0;
  display: grid;
  gap: 1.1rem;
}
.triggers li {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.15rem 1.4rem;
  font-size: 1.05rem;
}

/* ---------- Numbered steps ---------- */

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.9rem;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.05rem;
}
.steps h3 { margin-bottom: 0.3rem; }
.steps p { font-size: 1.02rem; color: var(--ink-soft); margin-bottom: 0; }

/* ---------- Contact ---------- */

.contact-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.contact-list dt, .contact-label {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #A9C4BE;
  margin-bottom: 0.3rem;
}
.contact-list dd { margin: 0; }
.contact-value { font-size: 1.2rem; }

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.footer p { margin-bottom: 0.4rem; }

/* ==========================================================================
   Page variant: homeowners
   Applied with <body class="page-homeowners"> on homeowners/index.html.
   Its readers are typically older, so this variant raises the base type size,
   darkens the muted text for stronger contrast, and enlarges tap targets.
   Change these values rather than the shared defaults above, so the other
   pages are unaffected.
   ========================================================================== */

.page-homeowners {
  font-size: 1.25rem;
  line-height: 1.7;
  /* Darker muted text: raises contrast against the page background. */
  --ink-soft: #43403B;
}
.page-homeowners .card p,
.page-homeowners .steps p,
.page-homeowners .scope li { font-size: 1.12rem; }
.page-homeowners .btn { font-size: 1.1rem; padding: 1rem 1.85rem; }
.page-homeowners .nav { font-size: 1.05rem; }
.page-homeowners .nav a { padding-bottom: 4px; }
.page-homeowners h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); }
.page-homeowners .hero p.lede { font-size: clamp(1.3rem, 2.5vw, 1.55rem); }
.page-homeowners .contact-label { color: #BFD6D1; font-size: 0.9rem; }

/* The phone number is the primary contact route for this audience, so it is
   set larger than the other contact details and given its own line. */
.phone-primary {
  display: block;
  font-family: var(--sans);
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #FFFFFF;
  text-decoration: none;
  margin: 0.4rem 0 0.25rem;
}
.phone-primary:hover, .phone-primary:focus { color: #EBC9A8; }

/* ---------- Utility ---------- */

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: #FFFFFF;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border: 2px solid var(--brand);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}