/* /css/about.css (v3) — self-contained, no airtech.css required */

/* ---- Page section rhythm (keeps “What we stand for” spacing) ---- */
.section{ padding-block: var(--section-py, 80px); }
.section-head{ text-align:center; margin-bottom: 18px; }
.section-head h2{ margin:0 0 .4rem; }
.section-head p{ margin:0; color: var(--muted, #6b7785); }

/* =================== ABOUT HERO =================== */
.about-hero{
  position: relative;
  color:#fff;
  background: var(--navy);
  padding-block: clamp(48px, 12vw, 96px);
}
.about-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image: var(--hero-image, none);
  background-size: cover; background-position: center;
}
.about-hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-color: rgba(15,40,90, var(--overlay-alpha, .7));
}
.about-hero > .container{ position:relative; z-index:1; }

.about-hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: center;
}
.about-hero__copy .eyebrow{
  color:#9ac5ff; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin:0 0 .35rem;
}
.about-hero__copy h1{ margin:.1rem 0 .5rem; color:#fff; }
.about-hero__copy .lede{ color:#dfe8ff; margin:0 0 .8rem; max-width: 52ch; }

.about-hero__badges{ display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 4px; }
.about-hero__badges span{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  color:#fff; font-weight:700; border-radius:999px; padding:.45rem .7rem;
}

.about-hero__media{
  border-radius:14px; overflow:hidden;
  box-shadow: 0 20px 36px rgba(0,0,0,.28);
}
.about-hero__media img{ width:100%; height:100%; object-fit:cover; }

/* =================== STORY =================== */
.story-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 36px;
  align-items: start;
}
.story-copy p{ color: var(--muted, #6b7785); }

.about-points{
  list-style:none; padding:0; margin:18px 0 0;
  display:grid; grid-template-columns: 1fr 1fr; gap:10px;
}
.about-points li{ display:flex; align-items:center; gap:10px; font-weight:600; }
.about-points i{ color: var(--blue); }

.story-card{
  background:#fff; border:1px solid #e6eef7; border-radius:14px;
  box-shadow: 0 16px 28px rgba(15,34,57,.06);
  padding:18px; display:grid; gap:12px; align-content:start;
}
.story-card .stat{
  background:linear-gradient(180deg,#f7fbff,#ffffff);
  border:1px solid #e6eef7; border-radius:12px; padding:14px;
  display:grid; gap:4px; text-align:left;
}
.story-card .stat strong{ font-size:1.4rem; color: var(--navy); }
.story-card .stat span{ color:#6b7785; font-weight:600; }

/* =================== VALUES =================== */
.values{ background: var(--bg, #f7f9fc); }
.values-grid{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
}
.value-card{
  background:#fff; border:1px solid #e6eef7; border-radius:14px;
  padding:18px; box-shadow:0 14px 28px rgba(15,34,57,.08);
  display:grid; gap:8px; align-content:start; text-align:left;
  transition: transform .18s ease, box-shadow .18s ease;
}
.value-card:hover{ transform: translateY(-3px); box-shadow:0 18px 34px rgba(15,34,57,.12); }
/* Values icon — flex center so FA ::before shows reliably (v6) */
.value-card i{
  width:42px; height:42px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1;   /* ensures the glyph is visible */
  color:#fff;
  background:linear-gradient(135deg, var(--blue), var(--blue-dark));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 8px 18px rgba(15,34,57,.12);
}

.value-card h3{ margin:.1rem 0 .2rem; color: var(--navy); }
.value-card p{ margin:0; color:#5d6a7b; }



/* =================== RESPONSIVE =================== */
@media (max-width: 992px){
  .about-hero__grid{ grid-template-columns: 1fr; }
  .about-hero__media{ order: -1; }
  .story-grid{ grid-template-columns: 1fr; }
  .about-points{ grid-template-columns: 1fr; }
  .values-grid{ grid-template-columns: repeat(2,1fr); }
  .cta-grid{ grid-template-columns: 1fr; }
  .cta-card{ justify-self: stretch; }
  .section-head{ text-align:left; }
}

@media (max-width: 560px){
  .values-grid{ grid-template-columns: 1fr; }
}
/* === CTA card mobile containment (fix) === */
.cta-card{
  box-sizing: border-box;    /* include padding/border in width calc */
  max-width: 100%;           /* never exceed container on any device */
}

/* Stack & stretch on tablets/phones */
@media (max-width: 992px){
  .cta-grid{ grid-template-columns: 1fr; }
  .cta-card{
    width: 100% !important;   /* force full width in the single-column layout */
    max-width: 100% !important;
    justify-self: stretch;     /* undo desktop right alignment */
    margin: 0;                 /* no stray margins on small screens */
  }
}

/* Tighten padding/icons and keep buttons inside on narrow phones */
@media (max-width: 560px){
  .cta-banner .container{ padding-inline: 16px; }  /* small safe gutter */
  .cta-card{ padding: 14px; border-radius: 12px; }
  .cta-row i{ width: 36px; height: 36px; }
  .cta-actions{ flex-direction: column; }
  .cta-actions .btn{ width: 100%; }                /* keep “Request Service” inside */
}
/* CTA card mobile containment */
.cta-card{ box-sizing:border-box; max-width:100%; }
@media (max-width: 992px){
  .cta-grid{ grid-template-columns:1fr; }
  .cta-card{ width:100%; max-width:100%; justify-self:stretch; margin:0; }
}
@media (max-width: 560px){
  .cta-banner .container{ padding-inline:16px; }
  .cta-card{ padding:14px; border-radius:12px; }
  .cta-actions{ flex-direction:column; }
  .cta-actions .btn{ width:100%; }
}
/* Hide the CTA side card on phones only */
@media (max-width: 560px){
  .cta-card{ display:none !important; }
}
/* Mobile-only: hide the side CTA card */
@media (max-width: 768px){
  .cta-grid .cta-card{ display:none !important; }
}
/* === ABOUT CTA BANNER — hardening (v3.1) === */
/* Keep the bg image + dark overlay behind content, always */
.cta-banner{
  position: relative;
  isolation: isolate;                 /* creates a new stacking context */
  color: #fff;
  padding-block: clamp(36px, 8vw, 72px);
}
.cta-banner > .container{
  position: relative;
  z-index: 1;                         /* ensure text is above overlays */
}
.cta-banner::before{
  content:"";
  position:absolute; inset:0;
  z-index: 0;
  background-image: var(--cta-bg-image, none);
  background-size: cover;
  background-position: center;
}
.cta-banner::after{
  content:"";
  position:absolute; inset:0;
  z-index: 0;                         /* sits above ::before by source order */
  background: rgba(0,0,0, var(--overlay-alpha, .72));
}

/* Grid is resilient to overflow */
.cta-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 24px;
  align-items: start;
}

/* Side card stays inside the container on desktop */
.cta-card{
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  justify-self: end;
  background: #fff; color:#111;
  border:1px solid #e6eef7; border-radius:14px;
  padding:18px; display:grid; gap:12px; align-content:start;
  box-shadow: 0 16px 28px rgba(15,34,57,.12);
}

/* Buttons never overflow */
.btn-block{ width:100%; box-sizing:border-box; }

/* Tablet/phone: stack, stretch; phone: hide card entirely */
@media (max-width: 992px){
  .cta-grid{ grid-template-columns: 1fr; }
  .cta-card{ justify-self: stretch; max-width: 100%; margin:0; }
}
@media (max-width: 560px){
  .cta-grid .cta-card{ display:none !important; }
  .cta-actions{ flex-direction: column; }
  .cta-actions .btn{ width:100%; }
  .cta-banner .container{ padding-inline:16px; }
}

/* =================== CTA BANNER (v5) =================== */
.cta-banner{
  position:relative; color:#fff; background: var(--navy);
  padding-block: clamp(36px, 8vw, 72px);
}
.cta-banner::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image: var(--cta-bg-image, none);
  background-size: cover; background-position: center;
}
.cta-banner::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: rgba(0,0,0, var(--overlay-alpha, .72));
}
.cta-banner > .container{ position:relative; z-index:1; }

.cta-grid{
  display:grid; grid-template-columns: 1.2fr .8fr;
  gap:24px; align-items:start;
}

/* copy */
.cta-copy .eyebrow{ color:#9ac5ff; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin:0 0 .25rem; }
.cta-copy h2{ margin:.1rem 0 .5rem; color:#fff; }
.cta-copy .lede{ color:#dfe8ff; margin:0 0 .8rem; }
.cta-badges{ list-style:none; padding:0; margin:0 0 .8rem; display:flex; flex-wrap:wrap; gap:10px; }
.cta-badges li{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  color:#fff; font-weight:700; border-radius:999px; padding:.45rem .7rem;
}

/* buttons – prevent overflow, allow wrapping */
.cta-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.cta-actions .btn{
  flex: 0 1 auto;           /* don’t force stretching */
  min-width: 0;             /* allow to shrink inside container */
  max-width: 100%;
  white-space: normal;      /* allow text wrap on small screens */
  text-align: center;
}

/* side card */
.cta-card{
  background:#fff; color:#111; border:1px solid #e6eef7; border-radius:14px;
  box-shadow: 0 16px 28px rgba(15,34,57,.12);
  padding:18px; display:grid; gap:12px; align-content:start;
  width: min(420px, 100%); box-sizing: border-box; justify-self:end;
}
.cta-row{ display:flex; align-items:center; gap:12px; }
.cta-row i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; color:#fff;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
}
.btn-block{ width:100%; box-sizing:border-box; }

/* responsive */
@media (max-width: 992px){
  .cta-grid{ grid-template-columns:1fr; }
  .cta-card{ justify-self:stretch; }
}
@media (max-width: 768px){
  /* hide the right-hand service card on phones */
  .cta-grid .cta-card{ display:none !important; }
}
@media (max-width: 560px){
  .cta-banner .container{ padding-inline:16px; }
  .cta-actions{ flex-direction:column; }
  .cta-actions .btn{ width:100%; }
}