/* Hero */
.hero {
  position: relative;
  padding: 0;
  min-height: 82vh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  background: #1E1A14;
}
.hero-image {
  position: absolute; inset: 0;
  background-image: url('../img/hero-study.jpg?v=20260910c');
  background-size: cover;
  background-position: center;
  filter: saturate(0.95);
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.20) 100%),
    linear-gradient(180deg, rgba(30,26,20,0.35) 0%, rgba(30,26,20,0.55) 100%);
}
.hero-inner {
  position: relative;
  padding: clamp(96px, 12vw, 160px) 24px clamp(80px, 10vw, 120px);
  max-width: 1200px;
}
.hero-eyebrow {
  color: #E8ECF6;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.28em;
}
.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--text-hero);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 var(--space-6);
  max-width: 16ch;
}
.hero-title em {
  font-style: italic;
  color: #EAE1CE;
}
.hero-lead {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  color: rgba(255,255,255,0.9);
  max-width: 58ch;
  margin: 0 0 var(--space-8);
}
.hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero-actions .btn-ghost {
  color: #fff !important;
  border-color: rgba(255,255,255,0.75);
}
.hero-actions .btn-ghost:hover {
  background: #fff; color: var(--brand) !important;
  border-color: #fff;
}

/* Intro */
.intro { padding: clamp(80px, 10vw, 140px) 0; }
.intro-title {
  font-size: var(--text-2xl);
  font-weight: 400;
  font-style: italic;
  color: var(--brand);
  margin-bottom: var(--space-6);
}

/* Services grid */
.services-head { max-width: 720px; margin-bottom: var(--space-16); }
.services-head h2 { font-size: var(--text-2xl); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-12) var(--space-16);
}
.service-card {
  padding: var(--space-8) 0;
  border-top: 1px solid var(--rule);
}
.service-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--brand);
  margin-bottom: var(--space-4);
}
.service-card h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.service-card p {
  color: var(--ink-soft);
  margin-bottom: var(--space-4);
}
.service-card a {
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid var(--brand);
}

@media (max-width: 780px) {
  .services-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* Credentials strip below services */
.credentials-strip {
  margin-top: var(--space-16);
  padding: var(--space-8) var(--space-8);
  background: var(--bg);
  border-top: 2px solid var(--brand);
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: var(--space-6);
  text-align: center;
  grid-template-columns: repeat(4, 1fr);
}
.credentials-strip > div {
  display: flex; flex-direction: column; gap: 6px;
  border-right: 1px solid var(--rule);
  padding: var(--space-2) var(--space-4);
}
.credentials-strip > div:last-child { border-right: none; }
.cred-num {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--brand);
  line-height: 1;
}
.cred-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* City stat uses a smaller size so it fits alongside the numeric stats */
.cred-cities { font-size: 20px; letter-spacing: 0.04em; }
/* Denser label for the AAA tile so its two lines fit the strip's row height */
.cred-label-tight { letter-spacing: 0.08em; line-height: 1.35; }

/* AAA credential tile: the official 2012+ logo, kept smaller than the site logo */
.cred-aaa { align-items: center; min-width: 0; justify-content: flex-start; }
.cred-aaa a { display: inline-flex; line-height: 0; height: 40px; align-items: center; justify-content: center; }
.aaa-mark {
  height: 40px !important; width: 40px !important;
  max-height: 40px; max-width: 40px;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply; /* softens the JPG white square against cream backgrounds */
}
/* Align content of every credentials-strip tile to the top so heights match visually */
.credentials-strip > div { justify-content: flex-start; }
/* Slightly larger inline placement on the About page body */
.aaa-mark-inline { height: 72px !important; width: 72px !important; max-height: 72px; max-width: 72px; margin-top: 8px; }
/* Grid: prevent any tile from expanding beyond its column */
.credentials-strip { grid-auto-rows: 1fr; }
.credentials-strip > div { min-width: 0; overflow: hidden; }

@media (max-width: 720px) {
  .credentials-strip { grid-template-columns: repeat(2, 1fr); }
  .credentials-strip > div:nth-child(2) { border-right: none; }
  .cred-num { font-size: 26px; }
  .cred-cities { font-size: 17px; }
}

/* About preview */
.about-preview { padding: clamp(80px, 10vw, 140px) 0; }
.about-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
.about-copy h2 {
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--brand);
  margin-bottom: var(--space-6);
}
.about-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  box-shadow: var(--shadow-md);
}
@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-image { order: -1; }
}

/* Process */
.process-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}
.process-list li {
  padding: var(--space-8) 0;
  border-top: 2px solid var(--brand);
}
.process-num {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--brand);
  margin-bottom: var(--space-4);
}
.process-list h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: var(--space-3);
}
.process-list p { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.6; }

@media (max-width: 900px) {
  .process-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .process-list { grid-template-columns: 1fr; }
}

/* CTA band */
.cta-band {
  background: var(--brand);
  padding: clamp(64px, 8vw, 112px) 0;
  color: #fff;
}
.cta-band h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
}