/* ==========================================================
   ABOUT US PAGE — page-about.php only
   Split out of style.css so this page's styles load only where
   they're used. Loaded via Template Name: About Us.
   NOTE: .about-cta / .about-cta-content (the closing 'Conversation
   CTA' component) intentionally stays in the base style.css — it's
   reused as-is by single-service.php, so moving it here would break
   that page's CTA section.
   ========================================================== */

/* HERO */
.about-hero{
  position:relative;min-height:75vh;
  background:linear-gradient(180deg, rgba(48,48,48,.55) 0%, rgba(48,48,48,.25) 35%, rgba(48,48,48,.75) 100%),
    var(--img-about) center/cover no-repeat;
  display:flex;align-items:center;
}
.about-hero-content{padding:0 var(--gutter);max-width:620px;}
.about-hero-content h1{
  color:#fff;font-size:clamp(30px, 4.2vw, 54px);line-height:1.15;font-weight:600;
  margin-bottom:36px;letter-spacing:-.5px;font-family:'Cormorant Garamond';
  margin-bottom: 120px;
}
.about-hero-content h1 .accent{color:var(--orange);}

/* OUR STORY */
.about-story{
  padding:110px var(--gutter);background:var(--cream);
  display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:stretch;
}
.story-image img{
  width:100%;height:100%;object-fit:cover;
  display:block;
}
.story-content h2{
  font-size:clamp(24px, 2.8vw, 36px);font-weight:600;color:#262626;line-height:1.3;
  margin:14px 0 20px;font-family:'Cormorant Garamond';
}
.story-content h2 .accent{color:var(--orange);}
.story-lead{
  color:var(--orange);font-size:17px;font-weight:700;margin-bottom:16px;
  font-family:'Avenir Next Subheading';
}
.story-text{
  color:var(--muted);font-size:17px;line-height:1.35;max-width:520px;
  font-family:'Avenir Next Subheading2';
}

/* MEET OUR FOUNDER */
.founder{
  background:var(--dark);padding:110px var(--gutter);
  display:grid;grid-template-columns:0.9fr 1.3fr;gap:72px;align-items:center; 
}
.founder-image{position:relative;}
.founder-image::before{
  content:"";position:absolute;top:-22px;left:-22px;right:22px;bottom:22px;
  border:2px solid var(--orange);z-index:0;
}
.founder-image img{
  position:relative;z-index:1;width:100%;height:520px;object-fit:cover;display:block;
}
.founder .eyebrow{color:var(--text-light);}
.founder-content h2{
  font-size:clamp(28px, 3.6vw, 46px);font-weight:600;color:#fff;margin:16px 0 26px;
  font-family:'Cormorant Garamond';
}
.founder-quote{
  font-style:italic;color:var(--text-light);font-size:15px;line-height:1.75;
  margin-bottom:26px;font-family:'Avenir Next Subheading2';max-width:560px;
}
.founder-text{
  color:#CFCFCF;font-size:18px;line-height:1.25;max-width:600px;
  font-family:'Avenir Next Subheading2';
}

/* PROFESSIONAL RECOGNITION */
.recognition{background:#B8925A;padding:64px var(--gutter);}
.recognition-head{
  text-align:start;color:#fff;font-size:16px;font-weight:700;
  letter-spacing:2px;margin-bottom:44px;font-family:'Avenir Next Heading';
}
.recognition-grid{display:flex;justify-content:space-between;}
.recognition-item{flex:1;text-align:center;padding:0 16px;}
.recognition-num{
  color:rgba(255,255,255,.55);font-size:20px;font-weight:700;margin-bottom:10px;
  font-family:'Avenir Next Heading';
}
.recognition-icon{
  width:54px;height:54px;border:1.5px solid rgba(255,255,255,.5);border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
  font-size:22px;color:#fff;
}
.recognition-item h4{
  font-size:14px;font-weight:700;color:#fff;margin-bottom:4px;line-height:1.35;
  font-family:'Avenir Next Heading';
}
.recognition-item p{
  font-size:13px;color:#EFEFEF;font-family:'Avenir Next Subheading2';
}

/* WHY HOMEOWNERS TRUST HOUZEOME */
.trust{padding:110px var(--gutter) 0;background:var(--cream);}
.trust-head{
  text-align:start;color:var(--orange);font-size:24px;font-weight:700;
  letter-spacing:.3px;margin-bottom:60px;font-family:'Avenir Next Heading';
}
.trust-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-bottom:64px;}
.trust-item{padding:0 18px;border-right:1px solid #E4E4E4;text-align:left;}
.trust-item:first-child{padding-left:0;}
.trust-item:last-child{border-right:none;padding-right:0;}
.trust-icon{
  color:var(--orange);font-size:24px;margin-bottom:16px;
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
}
.trust-icon img{width:100%;height:100%;object-fit:contain;display:block;}
.trust-item h3{
  font-size:16px;font-weight:700;color:var(--dark);margin-bottom:10px;line-height:1.3;
  font-family:'Avenir Next Heading';
}
.trust-item p{
  font-size:14px;color:var(--muted);line-height:1.65;
  font-family:'Avenir Next Subheading2';
}
.about-stats{margin:0 0 100px;}
/* Cancel the homepage-only -56px overlap offset on the About page,
   covering both the case where .about-stats IS the stats bar element
   and the case where it wraps it. */
.about-stats.stats-bar,
.about-stats .stats-bar{
  margin-top:0 !important;
}

/* MEET OUR TEAM */
.team{padding:0 var(--gutter) 110px;background:var(--cream);}
.team-head{
  text-align:start;color:var(--orange);font-size:18px;font-weight:700;
  letter-spacing:2px;margin-bottom:48px;font-family:'Avenir Next Heading';
}
.team-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:32px;}
.team-member{width:calc(25% - 24px);text-align:center;}
.team-member img{
  width:100%;height:300px;object-fit:cover;border-radius:8px;
  margin-bottom:16px;display:block;
}
.team-member h4{
  font-size:16px;font-weight:700;color:var(--dark);
  font-family:'Avenir Next Subheading';
}



@media (max-width: 768px) {

  /* ── HERO ── */
  .about-hero{
    height:100svh;min-height:560px;align-items:flex-end;
  }
  .about-hero-content{padding:0 24px 48px;max-width:100%;}
  .about-hero-content h1{font-size:34px;margin-bottom:24px;}
  .about-hero-content .btn{width:100%;justify-content:center;font-size:12px;padding:15px 20px;}

  /* ── OUR STORY ── */
  .about-story{
    display:flex;flex-direction:column;padding:48px 24px;gap:28px;
  }
  .story-image img{height:240px;}
  .story-content h2{font-size:26px;}
  .story-lead{font-size:15px;}
  .story-text{font-size:14px;max-width:100%;}

  /* ── FOUNDER ── */
  .founder{
    display:flex;flex-direction:column;padding:48px 24px;gap:32px;
  }
  .founder-image::before{top:-14px;left:-14px;right:14px;bottom:14px;}
  .founder-image img{height:320px;}
  .founder-content h2{font-size:30px;}
  .founder-quote{font-size:15px;max-width:100%;}
  .founder-text{font-size:14px;max-width:100%;}

  /* ── PROFESSIONAL RECOGNITION ── */
  .recognition{padding:40px 24px;}
  .recognition-head{font-size:12px;margin-bottom:32px;}
  .recognition-grid{flex-wrap:wrap;gap:28px 12px;}
  .recognition-item{flex:1 1 40%;min-width:120px;padding:0;}
  .recognition-icon{width:46px;height:46px;font-size:18px;}
  .recognition-item h4{font-size:13px;}
  .recognition-item p{font-size:12px;}

  /* ── WHY HOMEOWNERS TRUST ── */
  .trust{padding:48px 24px 0;}
  .trust-head{font-size:18px;margin-bottom:32px;}
  .trust-grid{
    grid-template-columns:1fr 1fr;gap:24px 16px;margin-bottom:36px;
  }
  .trust-item{border-right:none;padding:0;}
  .trust-item h3{font-size:13.5px;}
  .trust-item p{font-size:12px;}
  .about-stats{margin:0 0 48px;flex-direction:row;padding:20px 20px;gap:16px;}
  .about-stats .stat{border-right:none;border-bottom:1px solid #ECECEC;padding-bottom:14px;text-align:left;}
  .about-stats .stat:last-child{border-bottom:none;padding-bottom:0;}

  /* ── MEET OUR TEAM ── */
  .team{padding:0 24px 60px;}
  .team-head{font-size:12px;margin-bottom:28px;}
  .team-grid{gap:20px;}
  .team-member{width:calc(50% - 10px);}
  .team-member img{height:160px;}
  .team-member h4{font-size:13px;}

  }