/* ================================================
   Servolution Health Services — site stylesheet
   ================================================ */

:root {
  --ink: #221D18;
  --ink-soft: #4A4239;
  --red: #C22B2E;
  --red-deep: #8A1E20;
  --gold: #A9802F;
  --gold-light: #D9B267;
  --paper: #FFFFFF;
  --paper-dim: #F4F4F1;
  --line: rgba(34, 29, 24, 0.12);
  --brand-brown: #471402;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Public Sans', sans-serif;
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: 'Fraunces', serif;
  margin: 0;
  color: var(--ink);
  line-height: 1.1;
}

a {
  color: inherit;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---- Top bar ---- */
.topbar {
  background: var(--paper-dim);
  color: var(--ink-soft);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.topbar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---- Header ---- */
header.main {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  gap: 24px;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}
.brand-mark {
  height: 64px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-name {
  font-family: 'Yellowtail', cursive;
  font-size: 2.5rem;
  color: var(--brand-brown);
  line-height: 0.85;
}
.brand-sub {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  font-size: 1.05rem;
  color: var(--brand-brown);
  margin-top: 6px;
}
nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 0.95rem;
}
nav a {
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
}
nav a:hover {
  border-bottom-color: var(--red);
}
nav a.active {
  border-bottom-color: var(--gold);
}

/* ---- Hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}
.hero .wrap {
  position: relative;
  z-index: 2;
  padding-top: 36px;
  padding-bottom: 46px;
}
.hero-content {
  max-width: 860px;
}
.hero-kicker {
  font-family: 'Public Sans', sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--gold);
  margin-bottom: 12px;
}
.hero h1 {
  color: var(--ink);
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  font-weight: 600;
}
.hero p.tagline {
  margin-top: 10px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--red-deep);
  max-width: 62ch;
}
.hero p.lede {
  margin-top: 14px;
  font-size: 1.08rem;
  max-width: 72ch;
  color: var(--ink-soft);
}
.hero-ctas {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 3px;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.98rem;
  border: none;
}
.btn-link {
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
  font-size: 0.95rem;
}
.btn-link:hover {
  color: var(--ink);
}
.btn-gold {
  background: var(--gold-light);
  color: var(--ink);
}
.btn-gold:hover {
  background: #e8c481;
}

.crumb {
  display: inline-block;
  font-family: 'Public Sans', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  margin-bottom: 18px;
}
.crumb:hover {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

.page-hero .wrap {
  padding-top: 40px;
  padding-bottom: 36px;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 40px;
  align-items: center;
}
.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--line);
}
@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-photo {
    max-width: 340px;
  }
}

/* ---- Detail / subpage content ---- */
.detail {
  padding: 8px 0 72px;
}
.detail-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: start;
}
.detail-body p {
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.detail-body p:first-child {
  margin-top: 0;
}
.detail-body h2 {
  font-size: 1.3rem;
  margin-bottom: 14px;
}
.detail-body ul {
  margin: 0 0 18px;
  padding-left: 20px;
  color: var(--ink-soft);
}
.detail-body li {
  margin-bottom: 8px;
}
.detail-info {
  background: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px;
}
.detail-info h3 {
  font-size: 1.05rem;
  margin-bottom: 14px;
}
.detail-info .info-list li {
  font-size: 0.92rem;
  padding: 14px 0;
}
.detail-info .btn-gold {
  margin-top: 18px;
  width: 100%;
  text-align: center;
}

@media (max-width: 860px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
}

.ridge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  width: 100%;
  height: 56px;
  line-height: 0;
  z-index: 1;
}

/* ---- Verse strip ---- */
.verse {
  background: var(--paper-dim);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  padding: 22px 0;
}
.verse blockquote {
  margin: 0 auto;
  max-width: 52ch;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink);
}
.verse cite {
  display: block;
  margin-top: 14px;
  font-family: 'Public Sans', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--red-deep);
}

/* ---- Services ---- */
.services {
  padding: 28px 0 36px;
}
.section-head {
  margin-bottom: 22px;
}
.section-head .kicker {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--red-deep);
  font-size: 1.05rem;
}
.section-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin-top: 8px;
  white-space: nowrap;
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.pillar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.pillar-mark {
  width: 52px;
  height: 52px;
}
.pillar h3 {
  font-size: 1.25rem;
}
.pillar p {
  color: var(--ink-soft);
  margin: 0;
}

/* ---- Give band ---- */
.band {
  background: var(--paper-dim);
  color: var(--ink);
  padding: 34px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band-solo {
  max-width: 860px;
}
.band h2 {
  color: var(--ink);
  font-size: 1.9rem;
  max-width: 26ch;
}
.band p {
  color: var(--ink-soft);
  max-width: 68ch;
  margin-top: 10px;
}
.band .btn-gold {
  margin-top: 18px;
}

.info-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.info-list li {
  padding: 18px 0;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 0.98rem;
}
.info-list li:last-child {
  border-bottom: 1px solid var(--line);
}
.info-list .label {
  color: var(--red-deep);
  font-weight: 600;
}

/* ---- Footer ---- */
footer {
  background: var(--paper);
  padding: 24px 0 18px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-brand img {
  height: 34px;
  width: auto;
}
.footer-brand-text {
  font-size: 1rem;
  line-height: 1.5;
}
.footer-brand-text strong {
  color: var(--ink);
}
.emergency-note {
  font-size: 1rem;
  font-weight: 600;
  color: var(--red-deep);
}
.footer-bottom {
  padding-top: 14px;
  line-height: 1.6;
}
.footer-bottom a {
  color: var(--red-deep);
}

@media (max-width: 860px) {
  .hero .wrap {
    padding-top: 32px;
    padding-bottom: 44px;
  }
  .section-head h2 {
    white-space: normal;
  }
  .pillar-grid {
    grid-template-columns: 1fr;
  }
  nav ul {
    gap: 18px;
    font-size: 0.88rem;
    flex-wrap: wrap;
  }
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .brand-mark {
    height: 48px;
  }
  .brand-name {
    font-size: 1.9rem;
  }
}

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

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ================================================
   New homepage (v2) additions
   ================================================ */

/* ---- Home hero: combined logo + statement visual ---- */
.home-hero-visual .wrap {
  text-align: center;
  padding-top: 36px;
  padding-bottom: 8px;
}
.hero-visual {
  margin-top: 0;
}
.hero-visual img {
  width: 100%;
  max-width: 250px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.hero-visual .lockup-caption {
  margin-top: 2px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: var(--brand-brown);
}

/* ---- Centered section heading (no kicker) ---- */
.section-head.centered {
  text-align: center;
  margin-bottom: 30px;
}

/* ---- Insurance / access banner ---- */
.access-banner {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--paper-dim);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 4px;
  max-width: 68ch;
}
.access-banner p {
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
  font-weight: 600;
}
.access-section .wrap {
  padding-top: 0;
  padding-bottom: 24px;
  max-width: 780px;
  text-align: center;
}
.access-section .access-banner {
  margin: 0 auto;
  text-align: left;
}

/* ---- 5-up services grid ---- */
.pillar-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
@media (max-width: 1000px) {
  .pillar-grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .pillar-grid-5 {
    grid-template-columns: 1fr;
  }
}
.pillar-grid-5 .pillar {
  height: 100%;
}
.pillar-grid-5 .pillar h3 {
  font-size: 1.1rem;
}
.pillar-grid-5 .pillar p {
  font-size: 0.92rem;
}
.pillar-grid-5 .pillar .btn-link {
  margin-top: auto;
}

/* ---- Testimonials ---- */
.testimonials {
  background: var(--paper-dim);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
}
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.testimonial {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 26px;
}
.testimonial blockquote {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink);
}
.testimonial cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--red-deep);
}
.testimonial.placeholder blockquote {
  color: var(--ink-soft);
}
@media (max-width: 860px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Two-up CTA band (Give / Volunteer) ---- */
.band-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.band-duo > div {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.band-duo h2 {
  font-size: 1.6rem;
  max-width: 22ch;
}
.band-duo p {
  flex-grow: 1;
}
.band-duo .btn-gold {
  margin-top: 18px;
  align-self: flex-start;
}
@media (max-width: 860px) {
  .band-duo {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ---- About / Who We Are section ---- */
.about-section {
  padding: 4px 0 44px;
}
.about-section h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.about-body p {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.about-body p:first-of-type {
  margin-top: 16px;
}
.about-highlights {
  background: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 26px 28px;
  margin-top: 68px;
}
.about-highlights h3 {
  font-size: 1.05rem;
  margin-bottom: 14px;
}
.about-highlights ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-soft);
}
.about-highlights li {
  margin-bottom: 12px;
  font-size: 0.95rem;
}
.about-highlights li:last-child {
  margin-bottom: 0;
}
@media (max-width: 860px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Notice to Patients (homepage) ---- */
.notice-section .wrap {
  max-width: 780px;
  padding-top: 8px;
  padding-bottom: 32px;
}
.notice-box {
  background: var(--paper);
  border: 2px solid var(--red);
  border-radius: 6px;
  padding: 22px 26px;
  text-align: center;
}
.notice-box h2 {
  margin: 0 0 12px;
  color: var(--red);
  font-family: 'Public Sans', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.notice-box p {
  margin: 0 0 10px;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink);
}
.notice-box p:last-child { margin-bottom: 0; }
.notice-box a {
  color: var(--red-deep);
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .notice-box { padding: 18px 16px; }
  .notice-box h2 { font-size: 1.25rem; }
  .notice-box p { font-size: 1rem; }
}

/* ---- Service photo placeholders (swap for real photos later) ---- */
.pillar-grid-5 .pillar { padding: 0 0 20px; overflow: hidden; }
.pillar-grid-5 .pillar > :not(.photo-placeholder):not(.pillar-photo) { margin-left: 18px; margin-right: 18px; }
.photo-placeholder, .pillar-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 6px;
}
.photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-dim);
  border-bottom: 1px dashed rgba(34, 29, 24, 0.3);
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-style: italic;
}
.pillar-photo { display: block; object-fit: cover; }
.services { padding-top: 40px; }

/* ---- Homepage intro row: notice (left) + logo & tag (right) ---- */
.intro-row-section .wrap { padding-top: 32px; padding-bottom: 0; }
.intro-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
.intro-row .notice-box { text-align: left; }
.intro-logo { text-align: right; }
.intro-logo img {
  width: 100%;
  max-width: 230px;
  height: auto;
  display: inline-block;
}
.intro-tag {
  margin: 4px 0 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--brand-brown);
}
@media (max-width: 760px) {
  .intro-row { grid-template-columns: 1fr; gap: 20px; }
  .intro-logo { text-align: center; order: -1; }
  .intro-logo img { max-width: 180px; }
}
.about-page { padding-bottom: 56px; }

/* ---- Header name on one line ---- */
.brand-oneline {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--brand-brown);
  white-space: nowrap;
  line-height: 1.1;
}
@media (max-width: 860px) {
  .brand-oneline { font-size: 1.25rem; }
}
@media (max-width: 420px) {
  .brand { gap: 10px; }
  .brand-oneline { font-size: 1.02rem; }
}