/* Pine Valley Accounting — bespoke landing styles (built on theme.css tokens) */

/* ---------- Header utility (phone + portal) ---------- */

/* Landing header holds brand + 7 links + phone + portal on one row,
   so it gets a wider container and tighter nav than the shared pages. */
.site-header .container {
  max-width: 1360px;
}

.site-header-inner { gap: 1rem; }

.site-nav { gap: 0.85rem; }

.site-header .nav-link { font-size: 0.78rem; letter-spacing: 0.06em; }

.header-utility {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}

.header-phone:hover { color: var(--color-brand); }

.portal-btn { white-space: nowrap; }

/* ---------- Mobile nav: hamburger + drawer (inert above the breakpoint) ---------- */

/* Both pieces are display:none until the mobile breakpoint takes over, so the
   desktop header renders exactly as it did before they existed. */
.nav-toggle { display: none; }
.nav-drawer { display: none; }

/* ---------- Text links ---------- */

.text-link {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand);
  text-decoration: none;
  border-bottom: 1.5px solid var(--color-brand);
  padding-bottom: 0.2rem;
}

.text-link:hover { color: var(--color-brand-deep); border-bottom-color: var(--color-accent); }

/* lucide arrow-right, used on buttons and text links */
.btn .icon-arrow {
  width: 1em;
  height: 1em;
  flex: none;
}

.text-link .icon-arrow {
  width: 1em;
  height: 1em;
  margin-left: 0.4em;
  vertical-align: -0.14em;
}

/* ---------- Hero: CSS-painted mountain-lake scene ---------- */

.hero {
  position: relative;
  overflow: hidden;
  /* mountain-lake photo over the painted sky/haze/lake fallback */
  background:
    url("../../assets/img/pine-valley/hero.webp") center 60% / cover no-repeat,
    linear-gradient(180deg,
      #e9edea 0%, #dfe6e2 30%, #c9d5cd 52%,
      #a9bfb2 66%, #7f9c8c 82%, #5d7c6a 100%);
}

/* Minimal legibility scrim: a short, low-opacity lift behind the headline
   column only. It fades out well before the middle of the frame so the
   photograph reads at full contrast, as in the mockup. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(94deg,
    rgba(238, 243, 239, 0.42) 0%,
    rgba(238, 243, 239, 0.26) 22%,
    rgba(238, 243, 239, 0.08) 38%,
    rgba(238, 243, 239, 0) 50%);
  pointer-events: none;
}

/* barely-there green seat at the very bottom edge so the photo meets the
   next section without a hard cut */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(30, 61, 47, 0) 78%,
    rgba(22, 41, 31, 0.10) 100%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding-block: 6.5rem 9rem;
  max-width: var(--container-max);
}

.hero-title {
  font-size: clamp(2.4rem, 5.2vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-brand);
  margin-bottom: 1.1rem;
  max-width: 15em;
  /* legibility comes from a tight halo on the type rather than a wash
     over the photograph */
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6), 0 0 22px rgba(240, 245, 240, 0.75);
}

.hero-sub {
  font-size: 1.12rem;
  color: var(--color-ink);
  max-width: 26em;
  margin-bottom: 2rem;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.65), 0 0 14px rgba(240, 245, 240, 0.8);
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-hero-outline {
  background: rgba(255, 255, 255, 0.78);
  color: var(--color-brand);
  border-color: var(--color-brand);
}

.btn-hero-outline:hover {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

/* ---------- About ---------- */

/* Dark green band: separates the about section cleanly from the light
   services section below, so the gap between them reads intentional. */
.about-section {
  background: var(--color-brand);
  color: #eef2e9;
}

/* Eyebrow sits directly on top of the photo, its cap line level with the
   title's cap line across the gutter, so both columns start together and
   carry a similar visual height. */
.about-eyebrow {
  display: block;
  color: #c9b06a;
  margin: 0.55em 0 1.1rem;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: start;
}

.about-photo {
  border-radius: var(--radius-lg);
  /* mockup crop's own proportion (371x169) */
  aspect-ratio: 371 / 169;
  box-shadow: var(--shadow-md);
  /* office photo cropped from the mockup, over a plain painted fallback */
  background:
    url("../../assets/img/pine-valley/about-office.webp"),
    linear-gradient(180deg, #dbe3dc 0%, #a8b39e 55%, #2c452f 100%);
  background-size: cover, auto;
  background-position: center;
  background-repeat: no-repeat;
}

.about-copy .section-title { color: #f4f6ef; margin-bottom: 1rem; }
.about-copy p { color: rgba(238, 242, 233, 0.82); margin-bottom: 1.5rem; }

.about-copy .text-link {
  color: #eef2e9;
  border-bottom-color: rgba(238, 242, 233, 0.6);
}

.about-copy .text-link:hover {
  color: #ffffff;
  border-bottom-color: #c9b06a;
}

/* ---------- Services ---------- */

.section-head--center {
  text-align: center;
  margin-inline: auto;
  /* titles keep to one line whenever the container allows it */
  max-width: none;
}

.section-head--center .section-sub {
  max-width: 44rem;
  margin-inline: auto;
}

/* the primary button and the services text link sit on one baseline */
.hero-actions { align-items: center; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.75rem 1rem 1.5rem;
  text-decoration: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.service-card:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.service-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  color: var(--color-brand);
  margin-bottom: 0.4rem;
}

.service-icon svg { width: 100%; height: 100%; }

/* the exploded wedge of the pie icon carries the darker of the two source
   tones; the traced asset is single-ink, the second tone is applied here */
.service-icon .pie-wedge { fill: var(--color-brand-deep); }

.service-title {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.35;
  margin: 0;
}

.service-text {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-ink-muted);
  margin: 0;
}

.services-more {
  text-align: center;
  margin-top: 2.25rem;
}

/* ---------- Team + Commitment ---------- */

/* Full-width head above; the commitment panel stretches to match the
   partner cards row exactly. */
.team-head { max-width: none; margin-bottom: 2rem; }

.team-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 3rem;
  align-items: stretch;
}

/* Cards keep their natural height; the link is pinned to the column floor so
   its baseline lines up with the bottom of the commitment panel. */
.team-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: flex-start;
}

.team-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  width: 100%;
}

.team-more { display: inline-block; }

.team-member {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding-bottom: 0.9rem;
  text-align: center;
}

.team-photo {
  margin-bottom: 0.8rem;
  border-radius: 0;
  /* headshot photo over the painted studio-portrait fallback; graded
     cool-neutral into the muted green palette (tint multiply + desaturate) */
  background:
    radial-gradient(42% 27% at 50% 30%, #cbb9a4 0%, #b7a48e 88%, rgba(183, 164, 142, 0) 100%),
    radial-gradient(80% 55% at 50% 102%, #2a3833 0%, #3c4a44 55%, rgba(60, 74, 68, 0) 100%),
    linear-gradient(180deg, #d9ddd8 0%, #c2c9c2 60%, #a8b1a9 100%);
  background-size: auto, cover, auto, auto, auto;
  background-position: center, center top, center, center, center;
  background-repeat: no-repeat;
  background-blend-mode: multiply, normal, normal, normal, normal;
  filter: saturate(0.82) contrast(1.02);
}

.team-photo--1 {
  background-image:
    linear-gradient(rgba(52, 72, 62, 0.12), rgba(52, 72, 62, 0.12)),
    url("../../assets/img/pack/headshot-1.webp"),
    radial-gradient(42% 27% at 50% 30%, #cbb9a4 0%, #b7a48e 88%, rgba(183, 164, 142, 0) 100%),
    radial-gradient(80% 55% at 50% 102%, #2a3833 0%, #3c4a44 55%, rgba(60, 74, 68, 0) 100%),
    linear-gradient(180deg, #d9ddd8 0%, #c2c9c2 60%, #a8b1a9 100%);
}

.team-photo--2 {
  background-image:
    linear-gradient(rgba(52, 72, 62, 0.12), rgba(52, 72, 62, 0.12)),
    url("../../assets/img/pack/headshot-2.webp"),
    radial-gradient(42% 27% at 50% 30%, #c8ab92 0%, #b39679 88%, rgba(179, 150, 121, 0) 100%),
    radial-gradient(80% 55% at 50% 102%, #26302c 0%, #37423d 55%, rgba(55, 66, 61, 0) 100%),
    linear-gradient(180deg, #dcdfda 0%, #c6ccc5 60%, #abb4ab 100%);
}

.team-photo--3 {
  background-image:
    linear-gradient(rgba(52, 72, 62, 0.12), rgba(52, 72, 62, 0.12)),
    url("../../assets/img/pack/headshot-3.webp"),
    radial-gradient(42% 27% at 50% 30%, #d0b8a0 0%, #bda286 88%, rgba(189, 162, 134, 0) 100%),
    radial-gradient(80% 55% at 50% 102%, #2d3a35 0%, #414e48 55%, rgba(65, 78, 72, 0) 100%),
    linear-gradient(180deg, #d6dad5 0%, #bfc6bf 60%, #a5aea6 100%);
}

.team-photo--4 {
  background-image:
    linear-gradient(rgba(52, 72, 62, 0.12), rgba(52, 72, 62, 0.12)),
    url("../../assets/img/pack/headshot-4.webp"),
    radial-gradient(42% 27% at 50% 30%, #d8c2ab 0%, #c4a98d 88%, rgba(196, 169, 141, 0) 100%),
    radial-gradient(80% 55% at 50% 102%, #29332f 0%, #3b4640 55%, rgba(59, 70, 64, 0) 100%),
    linear-gradient(180deg, #dee0db 0%, #c9cfc8 60%, #aeb7ae 100%);
}

.team-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-ink);
  padding-inline: 0.5rem;
}

.team-role {
  font-size: 0.8rem;
  color: var(--color-ink-muted);
}

.commitment-panel {
  background: var(--color-brand);
  color: var(--color-on-brand);
  border-radius: var(--radius-md);
  padding: 2.5rem 2.25rem;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.commitment-title {
  font-size: 1.55rem;
  color: var(--color-on-brand);
  margin-bottom: 1rem;
}

.commitment-text {
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.75rem;
}

.commitment-signature {
  font-family: var(--font-accent);
  /* formal script sets smaller than its em box; sized up to hold presence */
  font-size: 1.9rem;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}

/* ---------- Credential strip ---------- */

/* Compact grayscale logo lockups on one row, as in the mockup: mark on the
   left, name over a small descriptor line, short rules between items. */
.credential-strip {
  border-block: 1px solid var(--color-border);
  padding-block: 1.35rem;
  background: var(--color-bg);
}

.credential-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 1.1rem;
}

/* Item padding (not row gap) sets the spacing, so the divider on the left edge
   of each item lands exactly midway between two lockups. */
.credential {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 1.5rem;
  font-family: var(--font-body);
  color: #6c7a70;
}

.credential-lockup {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.credential-name {
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

.credential-glyph {
  width: 26px;
  height: 26px;
  flex: none;
  opacity: 0.75;
}

.credential + .credential {
  border-left: 1px solid var(--color-border);
}

.credential small {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #96a29a;
  white-space: nowrap;
}

/* ---------- Testimonials + FAQ ---------- */

.proof-section .eyebrow {
  display: block;
  text-align: center;
}

/* Three compact quotes across the full width, as in the mockup. */
.quote-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 2.25rem;
}

.quote {
  position: relative;
  margin: 0;
  padding-left: 2rem;
}

/* lucide quote glyph in the theme green, top-left of each quote */
.quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 20px;
  height: 20px;
  background: var(--color-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.quote p {
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--color-ink);
  margin-bottom: 0.75rem;
}

.quote cite {
  font-style: normal;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-ink-muted);
}

/* ---------- Shared backdrop: CTA band + footer ---------- */

/* One element owns the hero photograph for both closing sections, so the
   image is continuous and there is nothing to align at the seam. A heavy
   forest-green wash sits on top of it: dense enough that all reversed type
   stays well clear of AA, sheer enough that the bright half of the
   photograph (sky, mist, lake) ghosts through as texture. The wash deepens
   toward the bottom so the smallest, faintest type — the footer bottom bar —
   sits on the darkest part of the backdrop.

   This also replaces the CSS-painted treeline that used to sit at the foot of
   the CTA band: the real ridge now reads through the wash. */
.valley-base {
  background-color: var(--color-brand-deep);
  background-image:
    linear-gradient(180deg,
      rgba(22, 41, 31, 0.85) 0%,
      rgba(20, 38, 29, 0.90) 55%,
      rgba(16, 30, 23, 0.94) 100%),
    url("../../assets/img/pine-valley/hero.webp");
  background-size: auto, cover;
  background-position: center, center 38%;
  background-repeat: no-repeat;
}

/* ---------- Pre-footer CTA band ---------- */

.cta-band {
  position: relative;
  background: transparent;
  color: var(--color-on-brand);
  padding-block: 4rem;
}

.cta-band > .container { position: relative; z-index: 1; }

.cta-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr auto;
  gap: 3rem;
  align-items: center;
}

.cta-title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--color-on-brand);
  margin-bottom: 0.5rem;
}

.cta-sub {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.98rem;
  margin: 0;
  max-width: 24em;
}

.cta-contact {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.cta-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.94rem;
  text-decoration: none;
  line-height: 1.45;
}

.cta-contact-item svg { flex: none; margin-top: 0.15rem; }

a.cta-contact-item:hover { color: #ffffff; text-decoration: underline; }

.btn-cta-light {
  background: #ffffff;
  color: var(--color-brand);
  border-color: #ffffff;
}

.btn-cta-light:hover {
  background: transparent;
  color: #ffffff;
}

/* Landing footer sits flush against the CTA band and shares its backdrop, so
   it carries no background of its own. A hairline keeps the two regions
   legibly separate without interrupting the photograph. */
.landing-footer {
  margin-top: 0;
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* the copyright rule reads against a busier ground than flat green did */
.landing-footer .footer-bottom { border-top-color: rgba(255, 255, 255, 0.18); }

/* Three columns: contact details live in the CTA band directly above, so the
   footer doesn't repeat them. */
.landing-footer .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }

.footer-contact {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.footer-contact svg { flex: none; margin-top: 0.28rem; }

/* ---------- Responsive ---------- */

/* Tablet. One width breakpoint for every mid-size adjustment, including the
   move from inline nav links to the overlay drawer. */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid { grid-template-columns: 1fr; }
  .cta-grid { grid-template-columns: 1fr 1fr; }
  .cta-action { grid-column: 1 / -1; }
  .quote-list { gap: 2rem; }

  /* Once the team row and the panel stack, a half-width panel leaves an empty
     band beside it; the panel takes the full column instead. */
  .commitment-panel { max-width: none; }

  /* Desktop spacing pushes the five lockups past the tablet container, and a
     wrapped row would leave a divider hanging on the left of the item that
     starts the second row. Tighter item padding keeps all five on one row
     here, and the dividers come off so any narrower wrap stays clean. */
  .credential { padding-inline: 0.85rem; }
  .credential + .credential { border-left: none; }

  /* Three footer columns become two, with the intro spanning the top row so
     the link columns pair up instead of one sitting beside an empty cell. */
  .landing-footer .footer-grid { grid-template-columns: 1fr 1fr; }
  .landing-footer .footer-about { grid-column: 1 / -1; }

  /* ----- Mobile navigation ----- */

  /* One row: brand on the left, utility cluster + hamburger on the right.
     Overrides theme.css's column stack, which assumed inline links. */
  .site-header .site-header-inner {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.75rem;
  }

  .site-header .site-nav { display: none; }
  .site-header .header-phone { display: none; }

  .site-header .header-utility {
    width: auto;
    margin-left: auto;
    gap: 0.6rem;
  }

  .site-header .portal-btn { min-height: 44px; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-brand);
    cursor: pointer;
  }

  .nav-toggle-bars {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 20px;
    height: 14px;
  }

  .nav-toggle-bars span {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.22s ease, opacity 0.22s ease;
  }

  .nav-toggle.is-open .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle.is-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Absolutely positioned against .site-header (position: relative), so the
     open drawer floats over the page instead of displacing it. */
  .nav-drawer {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  }

  .nav-drawer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
  }

  .nav-drawer-inner {
    display: flex;
    flex-direction: column;
    padding-block: 0.5rem 1.25rem;
  }

  .drawer-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-border);
    border-left: 3px solid transparent;
    padding-left: 0.75rem;
  }

  .drawer-link.is-active {
    color: var(--color-brand);
    border-left-color: var(--color-brand);
  }

  .drawer-phone {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    padding-left: 0.75rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-ink);
    text-decoration: none;
  }

  /* The header keeps its own portal button while there is room for it; the
     drawer copy only appears once that button has been hidden. */
  .drawer-cta { display: none; }
}

/* ---------- Phone ---------- */

@media (max-width: 640px) {
  /* Sections that no longer earn side-by-side columns. */
  .about-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .services-grid { grid-template-columns: 1fr; }
  .team-row { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .quote-list { grid-template-columns: 1fr; gap: 2rem; }
  .cta-grid { grid-template-columns: 1fr; gap: 2rem; }

  /* No room left for the header portal button, so the drawer carries it. */
  .site-header .portal-btn { display: none; }
  .nav-drawer .drawer-cta { display: inline-flex; margin-top: 0.5rem; min-height: 48px; }

  /* Hero: centered stack, and a headline size that cannot outrun the gutter. */
  .hero-inner { padding-block: 3.5rem 5rem; text-align: center; }
  .hero-title { font-size: clamp(1.95rem, 8.4vw, 2.4rem); max-width: none; }
  .hero-sub { max-width: 34em; margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-actions .btn { width: 100%; max-width: 22rem; }

  /* Text links: the tap target grows, the underline stays where it was. */
  .text-link { padding-top: 1.15rem; }
  .services-more { margin-top: 1.25rem; }

  /* The signature is nowrap by design; at this width it has to scale to fit. */
  .commitment-panel { padding: 2rem 1.5rem; }
  .commitment-signature { font-size: clamp(1.35rem, 7vw, 1.9rem); }

  /* Credentials: an even 2-up grid instead of a ragged wrapped flex row. */
  .credential-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    gap: 1.1rem 0.5rem;
  }

  .credential { padding-inline: 0; }
  .credential:last-child { grid-column: 1 / -1; }

  /* CTA band: centered copy, contact rows, and action button. */
  .cta-band { padding-block: 3rem; }
  .cta-copy { text-align: center; }
  .cta-sub { margin-inline: auto; }
  .cta-contact { align-items: center; }

  .cta-contact-item {
    align-items: center;
    min-height: 44px;
  }

  .cta-contact-item svg { margin-top: 0; }

  .cta-action { display: flex; justify-content: center; }
  .cta-action .btn { width: 100%; max-width: 22rem; }

  /* Footer: landing.css's three-column rule outranks theme.css's stacking
     rule, so the single column has to be restated here. */
  .landing-footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding-block: 2.75rem 1.75rem;
  }

  .landing-footer .footer-col .footer-link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .landing-footer .footer-col { gap: 0; }

  .landing-footer .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
  }

  .landing-footer .footer-bottom .footer-link {
    display: inline-block;
    padding-block: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer,
  .nav-drawer.is-open,
  .nav-toggle-bars span { transition: none; }
}