/* ───────── Elmwood ───────── */
/* Elmwood Family Law home (prefix el-). Built only from Covra DNA tokens. */

/* Hero (hero-c adapted for a home page): the dark card carries the H1, one line and the button */
.el-hero .ab-cards { grid-template-columns: 340fr 580fr 340fr; height: 580px; } /* photos wide enough to lead the hero */
.el-hero .ab-title { align-items: flex-start; text-align: left; padding: 40px; }
.el-hero .ab-title__top { align-items: flex-start; }
.el-hero .ab-title h1 { max-width: 560px; }
.el-hero__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.el-hero__line { color: var(--on-dark-2); max-width: 30em; }
.el-hero .ab-intro { padding-left: 314px; }
.el-hero__proof { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1.5; letter-spacing: -.25px; color: var(--text-2); }

/* Worries: paper card + white inset panel (cards inside cards) */
.el-worries { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.el-worry { background: var(--paper); border-radius: var(--r); padding: 8px; display: flex; flex-direction: column; justify-content: space-between; gap: 56px; min-height: 400px; }
.el-worry__q { padding: 24px 24px 0; font-family: var(--font-display); font-weight: var(--w-light); font-size: 32px; line-height: 1.3; letter-spacing: -1px; color: var(--text); }
.el-worry__fix { background: var(--surface); border-radius: var(--r-sm); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.el-worry__label { font-family: var(--font-label); font-weight: 500; font-size: 14px; line-height: 1.7; letter-spacing: .6px; text-transform: uppercase; color: var(--accent-ink); }
.el-worry__fix p:last-child { color: var(--muted); }

/* Services rows: timeframe instead of price */


/* Promise: olive band, statement left, glass pledge rows right */
.el-promise { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.el-promise__copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.el-promise__copy > p { color: var(--on-dark-2); max-width: 30em; }
.el-pledges { display: flex; flex-direction: column; gap: 16px; }
.el-pledge { display: grid; grid-template-columns: 60px 128px 1fr; align-items: center; gap: 24px; padding: 24px; border-radius: var(--r-lg); background: var(--dark-card); border: 1px solid var(--dark-line); transition: background-color var(--dur) var(--ease); }
.el-pledge:hover { background: rgba(255, 255, 255, .12); }
.el-pledge__icon { width: 60px; height: 60px; border-radius: var(--r-sm); background: var(--dark-card); display: grid; place-items: center; color: var(--lime); }
.el-pledge__icon .ic { width: 32px; height: 32px; }
.el-pledge__num { font-family: var(--font-display); font-weight: var(--w-light); font-size: 64px; line-height: 1.14; letter-spacing: -2.4px; color: var(--on-dark); }
.el-pledge__label { color: var(--on-dark-2); }

/* Fees note */
.el-fees .v-plan__price small { display: block; margin-top: 10px; }
.el-fees__note { margin: 32px auto 0; max-width: 40em; text-align: center; font-size: 16px; line-height: 1.5; letter-spacing: -.25px; color: var(--muted); }

/* Your solicitor: copy left, tall portrait right with a name tag */
.el-person { display: grid; grid-template-columns: 591fr 593fr; gap: 80px; }
.el-person__copy { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.el-person__copy .head h2 { max-width: none; }
.el-person__copy .head p { color: var(--muted); max-width: 30em; }
.el-person__card { background: var(--surface); border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 32px; }
.el-person__quote { font-family: var(--font-display); font-weight: var(--w-light); font-size: 24px; line-height: 1.33; letter-spacing: -.4px; color: var(--text); }
.el-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 24px; border-top: 1px solid var(--rule); }
.el-fact__num { display: block; font-family: var(--font-display); font-weight: var(--w-light); font-size: 40px; line-height: 1.2; letter-spacing: -1.2px; color: var(--text); }
.el-fact__label { display: block; margin-top: 4px; font-size: 16px; line-height: 1.5; letter-spacing: -.25px; color: var(--muted); }
.el-person__photo { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 680px; }
.el-person__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.el-tag { position: absolute; left: 0; bottom: 20px; background: var(--surface); border-radius: 0 var(--r-lg) var(--r-lg) 0; padding: 18px 24px; display: flex; flex-direction: column; }
.el-tag__name { font-size: 20px; line-height: 1.6; letter-spacing: -.2px; color: var(--text); }
.el-tag__role { font-size: 16px; line-height: 1.5; letter-spacing: -.25px; color: var(--muted); }

/* Reviews: initials instead of stock avatars */
.el-initial { width: 44px; height: 44px; flex: none; border-radius: var(--r-round); background: var(--surface-2); display: grid; place-items: center; font-weight: var(--w-bold); font-size: 16px; color: var(--text); }

/* Close: paper card holding an inset family photo and the closing copy */
.el-close__card { background: var(--paper); border-radius: var(--r-lg); padding: 8px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; }
.el-close__photo { position: relative; border-radius: var(--r-sm); overflow: hidden; min-height: 600px; }
.el-close__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.el-close__panel { padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 40px; }
.el-close__panel .head h2 { max-width: 480px; }
.el-ticks { display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 16px; line-height: 1.5; letter-spacing: -.25px; color: var(--text-2); }
.el-ticks li { display: flex; align-items: center; gap: 6px; }
.el-ticks .ic { width: 16px; height: 16px; color: var(--accent); }
.el-svc .v-svc-c__media { aspect-ratio: 1 / 1; }

@media (max-width: 1100px) {
  .el-hero .ab-cards { grid-template-columns: 1fr 1.9fr 1fr; height: 540px; }
  .el-hero .ab-intro { padding-left: 0; }
  .el-worries { grid-template-columns: 1fr; }
  .el-worry { min-height: 0; gap: 32px; }
  .el-promise, .el-person { gap: 48px; }
  .el-promise { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .el-hero .ab-cards { grid-template-columns: 1fr 1fr; height: auto; }
  .el-hero .ab-title { min-height: 0; }
  .el-person { grid-template-columns: 1fr; }
  .el-person__photo { min-height: 0; aspect-ratio: 4 / 5; order: -1; }
  .el-close__card { grid-template-columns: 1fr; }
  .el-close__photo { min-height: 0; aspect-ratio: 6 / 5; }
  .el-close__panel { padding: 32px 24px 40px; }
}
@media (max-width: 640px) {
  .el-hero .ab-title { padding: 32px 20px; align-items: flex-start; }
  .el-worry__q { font-size: 26px; padding: 16px 16px 0; }
  .el-worry__fix { padding: 20px; }
  .el-pledge { grid-template-columns: 48px 1fr; gap: 12px 16px; padding: 18px; border-radius: var(--r); }
  .el-pledge__icon { width: 48px; height: 48px; }
  .el-pledge__icon .ic { width: 26px; height: 26px; }
  .el-pledge__num { font-size: 40px; }
  .el-pledge__label { grid-column: 1 / -1; font-size: 16px; }
  .el-person__card { padding: 24px; }
  .el-person__quote { font-size: 21px; }
  .el-fact__num { font-size: 32px; }
  .el-close__panel { padding: 24px 16px 32px; gap: 28px; }
}
.el-fees .v-plan:not(.v-plan--pick) { background: var(--paper); }
#contact.band-white { padding-top: 0; }
@media (min-width: 1101px) { .el-worry { min-height: 340px; } }
.v-plan__badge { white-space: nowrap; }