/* ============================================================
   Sanctuary Insurance, About page scoped layer
   Inherits all tokens, shell + section patterns from styles.css.
   Only page-specific composition lives here, scoped under .page-about.
   Hero is a VARIANT (framed split band, not the home full-bleed
   parallax scene). No em/en dashes. Mobile-first (375 base).
   ============================================================ */

/* ---------- About hero VARIANT: split copy + framed team media ---------- */
.page-about .about-hero {
  position: relative;
  background:
    radial-gradient(120% 80% at 88% 0%, rgba(237,206,104,.20) 0%, rgba(237,206,104,0) 46%),
    radial-gradient(120% 90% at 6% 4%, rgba(244,169,192,.16) 0%, rgba(244,169,192,0) 44%),
    var(--canvas);
  color: var(--ink-inverse);
  overflow: clip;
  padding-block: clamp(2.4rem, 1.6rem + 4vw, 4.4rem);
}
.page-about .about-hero .ah-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 1rem + 3vw, 3rem);
  align-items: center;
}
.page-about .about-hero .ah-copy .breadcrumb {
  display: flex; align-items: center; gap: .4rem;
  font-size: var(--fs-small); color: var(--ink-inverse-soft); margin-bottom: 1rem;
}
.page-about .about-hero .ah-copy .breadcrumb a { color: var(--ink-inverse-soft); }
.page-about .about-hero .ah-copy .breadcrumb a:hover { color: var(--ink-inverse); }
.page-about .about-hero .ah-copy .breadcrumb .sep { opacity: .5; }
.page-about .about-hero .ah-copy .breadcrumb .here { color: var(--warm); }
.page-about .about-hero .eyebrow { color: var(--warm); font-weight: 600; font-size: var(--fs-small); margin-bottom: .6rem; }
.page-about .about-hero h1 { color: var(--ink-inverse); max-width: 17ch; }
.page-about .about-hero .lede { color: var(--ink-inverse-soft); font-size: clamp(1rem,.95rem + .3vw,1.15rem); max-width: 46ch; margin-top: 1rem; }
.page-about .about-hero .ah-stats {
  display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem;
}
.page-about .about-hero .ah-stat {
  background: rgba(255,255,255,.07); border-radius: var(--radius);
  padding: .8rem 1rem; min-width: 0;
}
.page-about .about-hero .ah-stat .big { display: block; font-size: 1.5rem; font-weight: 700; color: var(--warm); line-height: 1.1; }
.page-about .about-hero .ah-stat .lbl { font-size: var(--fs-xs); color: var(--ink-inverse-soft); }

/* framed media (the variant signature: a single framed photo with a soft
   warm halo + floating trust glyphs, not a layered parallax scene) */
.page-about .about-hero .ah-media { position: relative; }
.page-about .about-hero .ah-frame {
  position: relative; border-radius: var(--radius-lg); overflow: clip;
  box-shadow: var(--shadow-float);
  aspect-ratio: 3/2;
}
.page-about .about-hero .ah-frame img { width: 100%; height: 100%; object-fit: cover; }
.page-about .about-hero .ah-halo {
  position: absolute; inset: -10% -8% auto auto; width: 56%; aspect-ratio: 1; z-index: -1;
  background: radial-gradient(circle, rgba(237,206,104,.45) 0%, rgba(237,206,104,0) 70%);
  pointer-events: none;
}
.page-about .about-hero .ah-badge {
  position: absolute; left: -.6rem; bottom: -.6rem;
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius); padding: .7rem .9rem;
  box-shadow: var(--shadow-card);
  display: flex; align-items: center; gap: .6rem; max-width: 80%;
}
.page-about .about-hero .ah-badge .ico {
  width: 34px; height: 34px; flex: 0 0 auto; color: var(--accent);
  background: #FDECEC; border-radius: 9px; display: grid; place-items: center;
}
.page-about .about-hero .ah-badge .ico svg { width: 20px; height: 20px; }
.page-about .about-hero .ah-badge b { display: block; font-size: var(--fs-small); }
.page-about .about-hero .ah-badge span { font-size: var(--fs-xs); color: var(--ink-soft); }

/* ---------- Story / about-company strip (light) ---------- */
.page-about .about-story .as-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 1rem + 3vw, 3rem); align-items: center; }
.page-about .about-story .as-copy .eyebrow { font-size: var(--fs-small); font-weight: 600; color: var(--accent); margin-bottom: .5rem; }
.page-about .about-story .as-copy h2 { max-width: 20ch; }
.page-about .about-story .as-copy p { margin-top: .9rem; color: var(--ink-soft); max-width: 56ch; }
.page-about .about-story .as-copy p + p { margin-top: .8rem; }
.page-about .about-story .as-points { margin-top: 1.4rem; display: grid; gap: .6rem; }
.page-about .about-story .as-points li { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--fs-small); }
.page-about .about-story .as-points .tick { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
.page-about .about-story .as-media { position: relative; border-radius: var(--radius-lg); overflow: clip; box-shadow: var(--shadow-card); }
.page-about .about-story .as-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/2; }

/* ---------- Vision / Mission / Values (reuses bento grammar) ---------- */
.page-about .vmv-grid { display: grid; grid-template-columns: 1fr; gap: .9rem; }
.page-about .vmv-card {
  border-radius: var(--radius); padding: 1.3rem; color: var(--ink);
  display: flex; flex-direction: column; gap: .5rem;
}
.page-about .vmv-card .vmv-tag { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; text-transform: none; opacity: .85; }
.page-about .vmv-card h3 { font-size: var(--fs-h3); }
.page-about .vmv-card p { font-size: var(--fs-small); color: rgba(35,31,32,.75); }
.page-about .vmv-card.is-vision { background: var(--surface); outline: 2px solid var(--accent); outline-offset: -2px; }
.page-about .vmv-card.is-mission { background: var(--bento-2); }
.page-about .vmv-card .vmv-ico { width: 30px; height: 30px; color: var(--accent); }
.page-about .vmv-card.is-mission .vmv-ico { color: var(--ink); }

/* values sub-grid (the six values) */
.page-about .values-head { margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); }
.page-about .values-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; margin-top: 1.3rem; }
.page-about .value-tile {
  background: var(--canvas-2); border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}
.page-about .value-tile .vt-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; }
.page-about .value-tile .vt-ico { width: 30px; height: 30px; flex: 0 0 auto; color: var(--warm); background: rgba(237,206,104,.12); border-radius: 8px; display: grid; place-items: center; }
.page-about .value-tile .vt-ico svg { width: 18px; height: 18px; }
.page-about .value-tile h3 { font-size: 1.02rem; line-height: 1.25; font-weight: 700; color: var(--ink-inverse); }
.page-about .value-tile p { font-size: var(--fs-small); color: var(--ink-inverse-soft); }

/* ---------- Management team ---------- */
.page-about .team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.page-about .team-card {
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius); padding: 1.2rem 1.1rem;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.page-about .team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
.page-about .team-card .tc-avatar {
  width: 52px; height: 52px; border-radius: 50%; margin-bottom: .7rem;
  display: grid; place-items: center;
  font-size: 1.1rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  letter-spacing: .02em;
}
.page-about .team-card.alt .tc-avatar { background: linear-gradient(135deg, #3a434b 0%, var(--canvas) 100%); color: var(--warm); }
.page-about .team-card .tc-name { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.page-about .team-card .tc-role { font-size: var(--fs-small); color: var(--ink-soft); }
.page-about .team-note {
  margin-top: 1.4rem; background: var(--surface-2); border-radius: var(--radius);
  padding: 1rem 1.2rem; font-size: var(--fs-small); color: var(--ink-soft);
  display: flex; gap: .6rem; align-items: flex-start;
}
.page-about .team-note .tick { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }

/* ---------- Responsive ---------- */
@media (min-width: 720px) {
  .page-about .about-hero .ah-grid { grid-template-columns: 1.05fr .95fr; }
  .page-about .about-story .as-grid { grid-template-columns: 1.1fr .9fr; }
  .page-about .vmv-grid { grid-template-columns: 1fr 1fr; }
  .page-about .values-grid { grid-template-columns: 1fr 1fr; }
  .page-about .team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 980px) {
  .page-about .vmv-grid { grid-template-columns: 1fr 1fr; }
  .page-about .values-grid { grid-template-columns: repeat(3, 1fr); }
  .page-about .about-hero .ah-stat { min-width: 9.5rem; }
}