/* ============ ABOUT — page-specific compositions ============ */

/* ---------- HERO (full-width editorial) ---------- */
.a-hero { position: relative; overflow: hidden; text-align: center;
  padding-top: clamp(32px,4.5vw,68px); padding-bottom: clamp(44px,6vw,88px); }
.a-hero .hero-bg { position:absolute; inset:0; z-index:-1;
  background: radial-gradient(62% 48% at 50% -10%, var(--brand-50), transparent 70%); }
.a-hero-head { max-width: 1000px; margin-inline: auto; }
.a-hero-title { font-family: var(--font-display); font-weight: 800;
  font-size: clamp(46px, 7.6vw, 94px); line-height: 1.12; letter-spacing: -.035em; color: var(--ink); }
.a-hero-title .accent { display: block; color: var(--brand); }
.a-hero-sub { margin: clamp(20px,2.4vw,30px) auto 0; max-width: 660px;
  font-size: clamp(17px,1.35vw,20px); line-height: 1.55; color: var(--ink-2); }
.a-hero-media { margin: clamp(34px,4.2vw,56px) 0 0; border-radius: var(--r-xl);
  overflow: hidden; box-shadow: var(--sh-lg), inset 0 0 0 1px var(--line); aspect-ratio: 16 / 7.2; }
.a-hero-media image-slot { display: block; width: 100%; height: 100%; }
@media (max-width: 760px){ .a-hero-media { aspect-ratio: 4 / 3.2; } }
@media (max-width: 480px){ .a-hero-media { aspect-ratio: 1 / 1.04; } }

/* ---------- STATS BAND ---------- */
.a-stats { display: grid; grid-template-columns: repeat(4,1fr); }
.a-stats .stat { padding: 8px 28px; border-left: 1px solid var(--line); }
.a-stats .stat:first-child { border-left: 0; padding-left: 0; }
.a-stats .n { font-family: var(--font-display); font-size: clamp(32px,3.6vw,46px); font-weight: 700; color: var(--ink); letter-spacing: -.03em; line-height: 1; }
.a-stats .n span { color: var(--brand); }
.a-stats .l { margin-top: 10px; color: var(--body); font-size: 14.5px; font-weight: 500; }
@media (max-width: 760px){ .a-stats { grid-template-columns: 1fr 1fr; gap: 32px 0; } .a-stats .stat { padding: 0 22px; } .a-stats .stat:nth-child(odd){ border-left:0; padding-left:0; } }

/* ---------- STORY (centered single-column editorial) ---------- */
.story-single { max-width: 720px; margin-inline: auto; text-align: center; }
.story-single .eyebrow { justify-content: center; }
.story-body { margin-top: clamp(28px,3.5vw,44px); }
.story-body > p { max-width: 620px; margin-inline: auto; font-size: 18px; line-height: 1.7; color: var(--body); text-wrap: pretty; }
.story-body > p + p { margin-top: 22px; }
.story-body strong { color: var(--ink-2); font-weight: 600; }
.story-quote {
  margin: clamp(36px,4.5vw,56px) auto 0; max-width: 660px; padding: clamp(28px,3vw,38px) clamp(28px,3.5vw,44px);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--brand-50), var(--surface) 90%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab,var(--brand) 14%, transparent);
}
.story-quote p { font-family: var(--font-display); font-size: clamp(20px,2vw,26px); line-height: 1.32; color: var(--ink); font-weight: 600; letter-spacing: -.018em; text-wrap: balance; }

/* ---------- MISSION / VISION ---------- */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.mv-card { padding: clamp(28px,3vw,40px); display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; }
.mv-card .mv-ic { width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; flex: none; }
.mv-card .mv-ic [data-lucide] { width: 26px; height: 26px; }
.mv-card .lbl { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mv-card h3 { font-size: clamp(20px,1.9vw,24px); line-height: 1.32; }
.mv-mission { background: linear-gradient(160deg, var(--brand-700), var(--brand)); color: #fff; }
.mv-mission .mv-ic { background: rgba(255,255,255,.16); color: #fff; }
.mv-mission .lbl { color: rgba(255,255,255,.78); }
.mv-mission h3 { color: #fff; }
.mv-vision { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--sh-sm); }
.mv-vision .mv-ic { background: var(--brand-50); color: var(--brand); box-shadow: inset 0 0 0 1px color-mix(in oklab,var(--brand) 16%, transparent); }
.mv-vision .lbl { color: var(--brand); }
.mv-vision h3 { color: var(--ink); }
@media (max-width: 760px){ .mv-grid { grid-template-columns: 1fr; } }

/* ---------- VALUES ---------- */
.val-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 20px; margin-top: 52px; align-items: stretch; }
.val-card { grid-column: span 2; padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; height: 100%;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease); }
/* second row (cards 4 & 5) centered beneath the first row of three */
.val-card:nth-child(4) { grid-column: 2 / span 2; }
.val-card:nth-child(5) { grid-column: 4 / span 2; }
.val-card .v-top { display: flex; align-items: center; gap: 14px; }
.val-card .chip { width: 58px; height: 58px; transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); }
.val-card .chip [data-lucide] { width: 27px; height: 27px; }
.val-card:hover { transform: translateY(-4px);
  box-shadow: var(--sh-md), 0 18px 40px -20px color-mix(in oklab, var(--brand) 60%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--brand) 26%, transparent); }
.val-card:hover .chip { transform: scale(1.06) rotate(-3deg); background: color-mix(in oklab, var(--brand) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 38%, transparent); }
.val-card h4 { color: var(--ink); font-size: 19px; }
.val-card p { color: var(--body); font-size: 15px; line-height: 1.5; }
@media (max-width: 920px){
  .val-grid { grid-template-columns: 1fr 1fr; }
  .val-card, .val-card:nth-child(4), .val-card:nth-child(5) { grid-column: auto; }
}
@media (max-width: 560px){ .val-grid { grid-template-columns: 1fr; } }

/* ---------- TEAM (Doola-style: blue photo zone + white content panel) ---------- */
#team .section-head { max-width: 760px; margin-inline: auto; text-align: center; }
.team-grid2 {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; margin: 48px auto 0; max-width: 1160px;
}
.tm-card {
  --tm-blue: #D6E3F9;              /* Doola photo-zone blue */
  display: flex; flex-direction: column; text-align: left;
  background: #fff;
  border: 0; border-radius: 24px; padding: 0; overflow: hidden;
  box-shadow: 0 1px 2px rgba(10,16,32,.06), 0 10px 30px -22px rgba(10,16,32,.25);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 46px -22px color-mix(in oklab, var(--brand) 34%, transparent);
}
.tm-photo {                          /* blue photo zone ≈ 58% */
  position: relative; height: 232px; overflow: hidden;
  background: var(--tm-blue);
}
.tm-photo img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 0%;      /* head→chest, grounded at seam */
  transition: transform .55s var(--ease); will-change: transform;
}
.tm-card:hover .tm-photo img { transform: scale(1.035); }
.tm-body {                           /* white content panel ≈ 42% */
  flex: 1; min-height: 132px; background: #fff;
  display: flex; flex-direction: column; justify-content: center;
  gap: 7px; padding: 20px 24px 24px;
}
.tm-body b {
  display: block; color: var(--ink); font-family: var(--font-display);
  font-size: 18.5px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2;
}
.tm-role {
  display: block; color: #6B7280; font-size: 14.5px; font-weight: 500;
  line-height: 1.4;
}
@media (max-width: 920px){
  .team-grid2 { grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 640px; margin-top: 40px; }
}
@media (max-width: 560px){
  .team-grid2 { grid-template-columns: 1fr; gap: 20px; max-width: 360px; }
  .tm-photo { height: 256px; }
}

/* ---------- TESTIMONIALS (compact, 4 x 2) ---------- */
.tst-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 44px; }
.tst-card { display: flex; flex-direction: column; gap: 13px; height: 100%; padding: 22px; }
.tst-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tst-card .tstars { color: var(--amber); }
.tst-card .tstars [data-lucide] { width: 14px; height: 14px; }
.tst-label { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-700); }
.tst-card .quote { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; font-weight: 500; }
.tst-card .who { display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 2px; }
.tst-card .av { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.tst-card .who b { display: block; color: var(--ink); font-size: 13.5px; }
.tst-card .who small { color: var(--muted); font-size: 12px; }
@media (max-width: 1040px){ .tst-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .tst-grid { grid-template-columns: 1fr; } }

/* ---------- OFFICE / MAP ---------- */
.office-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px,5vw,64px); align-items: center; }
.office-img { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-md), inset 0 0 0 1px var(--line); aspect-ratio: 5 / 4; }
.office-img .ph { width:100%; height:100%; border-radius: 0; }
.off-methods { margin-top: 26px; display: grid; gap: 6px; }
.off-method { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: var(--r-md); transition: background .16s var(--ease); }
.off-method:hover { background: var(--soft); }
.off-method .cm-ic { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); box-shadow: inset 0 0 0 1px color-mix(in oklab,var(--brand) 16%, transparent); }
.off-method .cm-ic [data-lucide] { width: 20px; height: 20px; }
.off-method .lbl { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.off-method .val { display: block; color: var(--ink); font-size: 15.5px; font-weight: 600; margin-top: 1px; transition: color .15s; }
.off-method:hover .val { color: var(--brand); }
.off-hours { margin-top: 18px; display: inline-flex; align-items: center; gap: 13px; padding: 13px 18px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--sh-xs); }
.off-hours .status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in oklab,var(--green) 22%, transparent); flex: none; }
.off-hours b { color: var(--ink); font-size: 14.5px; display: block; }
.off-hours span { color: var(--muted); font-size: 13.5px; }
.office-map { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-md), inset 0 0 0 1px var(--line); aspect-ratio: 1 / 0.86; background: var(--soft); }
.office-map svg { width: 100%; height: 100%; display: block; }
/* Visit-us office meta (matches the Contact page version) */
.office-meta { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.office-meta b { color: var(--ink); font-size: 13.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.office-meta p { color: var(--body); font-size: 15px; margin-top: 9px; line-height: 1.55; }
@media (max-width: 880px){ .office-grid { grid-template-columns: 1fr; gap: 36px; } .office-map { order: -1; } }
@media (max-width: 420px){ .office-meta { grid-template-columns: 1fr; } }