/* =====================================================================
   TERRALUME SURFACES — About page styles (page-scoped)
   Loaded AFTER style.css. Reuses the shared design tokens
   (--charcoal, --accent, --muted, --sage, --stone-200, --s-*, --r-*,
   --sh-*, --font-display) — adds only About-specific structures.
   Orange stays the rare spark (<~10% area); charcoal/stone carry the page.
   ===================================================================== */

/* ---------- Positioning lead-in under the hero ---------- */
.about-pos{max-width:760px;}
.about-pos .lead{margin-bottom:var(--s-4);}
.about-pos .pos-tag{
  display:inline-flex; align-items:center; gap:.55em;
  margin-bottom:var(--s-5);
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.3rem,1.1rem+.8vw,1.7rem);
  letter-spacing:-.01em; color:var(--charcoal);
}
.about-pos .pos-tag .spark{color:var(--accent-600);}

/* ---------- "What we are / are not" honesty pair ---------- */
.posgrid{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5);
  margin-top:var(--s-7);
}
.poscard{
  background:var(--white); border:1px solid var(--stone-200);
  border-radius:var(--r-lg); padding:var(--s-6);
  box-shadow:var(--sh-1);
}
.poscard h3{
  display:flex; align-items:center; gap:10px;
  font-size:var(--fs-h4); font-weight:700; margin-bottom:var(--s-4);
}
.poscard h3 .badge{
  flex:0 0 30px; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
}
.poscard--do h3 .badge{background:rgba(255,106,0,.12); color:var(--accent-600);}
.poscard--dont h3 .badge{background:rgba(var(--charcoal-rgb),.08); color:var(--sage);}
.poscard h3 .badge svg{width:16px; height:16px;}
.poslist li{
  position:relative; padding-left:22px; line-height:1.5;
  color:var(--muted); font-size:var(--fs-body-s);
}
.poslist li + li{margin-top:12px;}
.poslist li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:8px; height:8px; border-radius:50%;
}
.poscard--do .poslist li::before{background:var(--accent);}
.poscard--dont .poslist li::before{background:var(--stone-300);}

/* ---------- "How we work" — process timeline embed ---------- */
.process-embed{
  margin-top:var(--s-7);
  background:var(--white); border:1px solid var(--stone-200);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
  padding:clamp(20px,3.5vw,40px);
}
.process-embed__img{
  display:block; width:100%; height:auto; margin-inline:auto;
  border-radius:var(--r-md);
}
.process-embed__cap{
  margin-top:var(--s-5); text-align:center;
  font-size:var(--fs-caption); color:var(--sage); line-height:1.6;
  max-width:70ch; margin-inline:auto;
}
.process-embed__cap strong{color:var(--muted); font-weight:600;}

/* ---------- "Why resin-bound" + "trained crews" detail rows ---------- */
.detail-rows{display:grid; gap:var(--s-5); margin-top:var(--s-7);}
.detail-row{
  display:grid; grid-template-columns:54px 1fr; gap:var(--s-5);
  align-items:start;
  background:var(--white); border:1px solid var(--stone-200);
  border-radius:var(--r-lg); padding:var(--s-6);
  box-shadow:var(--sh-1);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.detail-row:hover{transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--stone-300);}
.detail-row__icon{
  width:54px; height:54px; border-radius:var(--r-md);
  display:grid; place-items:center;
  background:rgba(var(--charcoal-rgb),.08); color:var(--charcoal);
}
.detail-row__icon svg{width:26px; height:26px;}
.detail-row h3{font-size:var(--fs-h4); font-weight:700; margin-bottom:8px;}
.detail-row p{color:var(--muted); font-size:var(--fs-body-s);}
.detail-row p + p{margin-top:10px;}

/* ---------- Trust section: "safe choice" cards ---------- */
.trust-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-5);
  margin-top:var(--s-7);
}
.trust-card{
  position:relative;
  background:var(--white); border:1px solid var(--stone-200);
  border-radius:var(--r-lg); padding:var(--s-7) var(--s-6);
  box-shadow:var(--sh-1);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.trust-card:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--stone-300);}
.trust-card__top{display:flex; align-items:center; gap:14px; margin-bottom:var(--s-4);}
.trust-card__icon{
  flex:0 0 48px; width:48px; height:48px; border-radius:var(--r-md);
  display:grid; place-items:center;
  background:rgba(var(--charcoal-rgb),.08); color:var(--charcoal);
}
.trust-card__icon svg{width:24px; height:24px;}
.trust-card h3{font-size:var(--fs-h4); font-weight:700;}
.trust-card p{color:var(--muted); font-size:var(--fs-body-s); line-height:1.6;}
.trust-card p + p{margin-top:10px;}
.trust-card .legal-ref{
  display:inline-block; margin-top:14px;
  font-size:var(--fs-caption); color:var(--sage); font-style:italic;
}

/* consumer-protection disclaimer note on a light section */
.note-light{
  display:flex; align-items:flex-start; gap:11px;
  margin-top:var(--s-7); max-width:74ch;
  padding:14px 18px; border-radius:var(--r-md);
  background:var(--white); border:1px solid var(--stone-200);
  color:var(--muted); font-size:var(--fs-body-s); line-height:1.6;
}
.note-light::before{
  content:"i"; flex:0 0 20px; width:20px; height:20px; margin-top:1px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--charcoal); color:#fff;
  font-family:var(--font-display); font-weight:900; font-size:.74rem; font-style:normal;
}

/* ---------- Service-area band (dark) ---------- */
.area-band{
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(32px,5vw,72px);
  align-items:center;
}
.area-band__body .checklist{margin-top:var(--s-5);}
.area-list{
  display:grid; grid-template-columns:1fr 1fr; gap:14px var(--s-6);
  margin-top:var(--s-6);
}
.area-list__group h4{
  font-size:var(--fs-body-s); color:#fff; font-weight:700;
  margin-bottom:10px; display:flex; align-items:center; gap:9px;
}
.area-list__group h4 .pin{
  flex:0 0 18px; width:18px; height:18px; color:var(--accent);
}
.area-list__group h4 .pin svg{width:100%; height:100%; display:block;}
.area-list__group ul{
  font-size:var(--fs-body-s); color:var(--muted-on-dark); line-height:1.85;
}
.area-list__note{
  margin-top:var(--s-6); font-size:var(--fs-caption);
  color:var(--sage-soft); max-width:50ch; line-height:1.6;
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .posgrid{grid-template-columns:1fr;}
  .trust-grid{grid-template-columns:1fr;}
  .area-band{grid-template-columns:1fr; gap:var(--s-7);}
  .detail-row{grid-template-columns:48px 1fr; gap:var(--s-4);}
  .detail-row__icon{width:48px; height:48px;}
}
@media (max-width:560px){
  .area-list{grid-template-columns:1fr;}
}