/* About Teaser V3 — approved refinements; preserves the V2 portrait and visual system. */
#about.about-teaser-v1{padding:76px 0}
#about.about-teaser-v1 .about-grid{gap:clamp(36px,5vw,68px)}
#about.about-teaser-v1 h2{max-width:580px;margin-bottom:24px}
#about.about-teaser-v1 .about-teaser-intro{margin-bottom:30px}
#about.about-teaser-v1 .about-teaser-intro .about-teaser-lead{margin-bottom:0}
#about.about-teaser-v1 .about-teaser-intro .about-note{margin-top:22px}
#about.about-teaser-v1 .about-teaser-intro .about-brand-statement{
  display:block;
  margin:22px 0 0;
  color:var(--ink);
  font-size:1rem;
  line-height:1.55;
  font-weight:600;
  font-style:italic;
}
@media(max-width:1100px){#about.about-teaser-v1{padding:72px 0}}
@media(max-width:640px){
  #about.about-teaser-v1{padding:60px 0 68px}
  #about.about-teaser-v1 h2{margin-bottom:22px}
  #about.about-teaser-v1 .about-teaser-intro{margin-bottom:28px}
}

/* Homepage portrait captions — subtle frosted glass. Preserve existing layout and text colors. */
.hero .portrait-note,
#about.about-teaser-v1 .about-caption{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

/* Homepage Hero — remove redundant secondary notes beneath the primary CTAs. */
.hero .hero-notes{
  display:none;
}

/* Homepage Hero — professional memberships. */
.hero-memberships{
  display:block;
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.hero-memberships-label{
  margin:0 0 14px;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero-memberships-list{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.hero-memberships img{
  display:block;
  width:auto;
  height:34px;
  max-width:46%;
  object-fit:contain;
  object-position:left center;
  flex:0 1 auto;
}
.hero-memberships-list img:nth-child(3){
  height:43px;
  max-width:58%;
}

/* Tablet + mobile: visually place memberships after the portrait. */
@media(max-width:1100px){
  .hero-grid{
    padding-bottom:116px;
  }
  .hero-memberships{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    margin-top:0;
    padding-top:20px;
  }
  .hero-memberships-list{
    gap:20px;
  }
  .hero-memberships img{
    height:36px;
    max-width:220px;
  }
  .hero-memberships-list img:nth-child(3){
    height:48px;
    max-width:270px;
  }
}

/* iPad: name first, portrait second, then focus/CTAs, then memberships. */
@media(min-width:641px) and (max-width:1100px){
  .hero-grid{
    padding-bottom:0;
    gap:0;
  }
  .hero-copy{
    display:contents;
  }
  .hero-identity{
    order:1;
  }
  .portrait-wrap{
    order:2;
    margin-top:30px;
  }
  .hero-introduction{
    order:3;
    margin-top:30px;
  }
  .hero-actions{
    order:4;
  }
  .hero-memberships{
    order:5;
    position:static;
    margin-top:30px;
    padding-top:20px;
  }
}

/* Desktop: keep memberships beneath the CTA area on the left. */
@media(min-width:1101px){
  .hero-memberships{
    margin-top:30px;
    padding-top:20px;
  }
  .hero-memberships-list{
    gap:22px;
    flex-wrap:nowrap;
  }
  .hero-memberships img{
    height:40px;
    max-width:220px;
  }
  .hero-memberships-list img:nth-child(3){
    height:55px;
    max-width:300px;
  }
}

/* iPhone: keep the same visual hierarchy as iPad, with more compact logos. */
@media(max-width:640px){
  .hero-grid{
    padding-bottom:0;
    gap:0;
  }
  .hero-copy{
    display:contents;
  }
  .hero-identity{
    order:1;
  }
  .portrait-wrap{
    order:2;
    margin-top:26px;
  }
  .hero-introduction{
    order:3;
    margin-top:28px;
  }
  .hero-actions{
    order:4;
  }
  .hero-memberships{
    order:5;
    position:static;
    margin-top:30px;
    padding-top:20px;
  }
  .hero-memberships-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px 16px;
    align-items:center;
  }
  .hero-memberships img{
    height:auto;
    width:100%;
    max-width:100%;
  }
  .hero-memberships-list img:nth-child(3){
    grid-column:1 / -1;
    width:58%;
    max-width:220px;
    height:auto;
  }
}

/* Homepage desktop trust strip — keep all headings aligned from the same top edge. */
@media(min-width:1101px){
  .trust-item{
    justify-content:flex-start;
  }
}

/* Homepage mobile flow — approved after preview testing. */
@media(max-width:640px){
  /* Keep the desktop trust strip, but remove it from the compact mobile flow. */
  main#top > .trust-strip{
    display:none;
  }

  /* Seamless Hero → Procedures transition. */
  main#top > .hero{
    padding-bottom:0;
    margin-bottom:0;
  }

  main#top > #procedures{
    margin-top:0;
    border-top:0;
    padding-top:50px;
    background:var(--blue-faint);
  }
}