/* ==========================================================================
   V.BuildCC — About Us (about-us.php). Loaded after home.css and portfolio.css
   (project cards). Tokens follow the About brief.
   ========================================================================== */

:root {
  --header-h: 76px;
  --container-max: 1280px;
  --vb-text: #172033;
  --vb-text-muted: #526071;
  --vb-bg-alt: #F6F7F3;
  --vb-border: #E5E9ED;
  --ab-space: clamp(2.5rem, 7vw, 6rem);      /* 40px mobile → 96px desktop */
  --ab-radius: 16px;
  --ab-btn-radius: 12px;
  --ab-accent: #5F9B24;                       /* brand green dark enough for large text on white */
}
:root[data-theme="dark"] { --ab-accent: #A6D96B; }

.ab-accent { color: var(--ab-accent); display: block; }

/* ---------- type ---------- */
.ab-h1 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--vb-text);
  margin-bottom: 1.1rem;
}
.ab-h2 {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--vb-text);
  margin-bottom: 0.9rem;
  text-wrap: balance;
}
.ab-h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--vb-text);
  margin-bottom: 0.45rem;
}
html.lang-km :is(.ab-h1, .ab-h2, .ab-h3) { line-height: 1.5; letter-spacing: normal; }
.ab-lead { font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.7; color: var(--vb-text-muted); max-width: 58ch; }
.ab-body { font-size: clamp(1rem, 1.1vw, 1.0625rem); line-height: 1.75; color: var(--vb-text-muted); max-width: 68ch; }
.ab-body + .ab-body { margin-top: 1rem; }
.ab-body--sm { font-size: 0.975rem; }
html.lang-km :is(.ab-lead, .ab-body) { line-height: 1.85; }
.ab-note { font-size: 0.875rem; line-height: 1.65; color: var(--vb-text-muted); margin-top: 1rem; max-width: 60ch; }

/* ---------- buttons (About: 12px radius, ≥ 48px tall) ---------- */
.ab-btn { border-radius: var(--ab-btn-radius); min-height: 48px; }
.ab-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* ---------- sections ---------- */
.ab-section { padding-block: var(--ab-space); }
.ab-section--tint { background: var(--vb-bg-alt); }
.ab-section--last { padding-top: 0; }
.ab-section--csr { padding-block: 0 var(--ab-space); }
.ab-head { max-width: 760px; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.ab-head--row {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.ab-head--row .ab-h2 { margin-bottom: 0; }

/* ==========================================================================
   Hero
   ========================================================================== */
.ab-hero { padding-block: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); }
.ab-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.ab-hero__media {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--vb-bg-alt);
  box-shadow: var(--vb-shadow-md);
  aspect-ratio: 4 / 3;
}
.ab-hero__media img, .ab-split__media img, .ab-why__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ==========================================================================
   Facts strip
   ========================================================================== */
.ab-facts {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border: 1px solid var(--vb-border);
  border-radius: var(--ab-radius);
  background: var(--vb-card);
  overflow: hidden;
}
.ab-fact {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.15rem;
  padding: 1rem 1.4rem;
}
.ab-fact + .ab-fact { border-left: 1px solid var(--vb-border); }
.ab-fact dd {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--vb-text);
}
.ab-fact dt {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vb-text-muted);
}
html.lang-km .ab-fact dt { font-size: 0.875rem; text-transform: none; letter-spacing: normal; }

/* ==========================================================================
   Split (image + text)
   ========================================================================== */
.ab-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}
.ab-split__media, .ab-why__media {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--vb-bg-alt);
}
.ab-checks { list-style: none; display: grid; gap: 0.65rem; margin-top: 1.25rem; }
.ab-checks li { display: flex; align-items: flex-start; gap: 0.65rem; font-weight: 500; color: var(--vb-text); }
.ab-checks__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--vb-green-tint);
  color: var(--vb-green-ink);
}
.ab-checks__icon svg { width: 15px; height: 15px; stroke-width: 2.4; }

/* ==========================================================================
   Story
   ========================================================================== */
.ab-story {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: start;
}
.ab-story__head { position: sticky; top: calc(var(--header-h) + 1.5rem); }

/* ==========================================================================
   Approach cards
   ========================================================================== */
.ab-approach {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.ab-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--vb-card);
  border: 1px solid var(--vb-border);
  border-radius: var(--ab-radius);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.ab-card:hover { border-color: var(--vb-green-line); box-shadow: var(--vb-shadow-md); transform: translateY(-3px); }
.ab-card__num {
  position: absolute;
  top: 1.25rem;
  right: 1.4rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--vb-text-subtle);
}
.ab-card__icon, .ab-panel__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--vb-green-line);
  background: var(--vb-green-tint);
  color: var(--vb-green-ink);
  margin-bottom: 1.1rem;
  flex-shrink: 0;
}
.ab-card .ab-body { margin-bottom: 1.1rem; flex: 1; }
.ab-statement {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: 1.1rem 1.4rem;
  border-left: 3px solid var(--vb-green);
  background: var(--vb-bg-alt);
  border-radius: 0 12px 12px 0;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 600;
  line-height: 1.55;
  color: var(--vb-text);
  max-width: 820px;
}

/* ==========================================================================
   Mission / vision / values
   ========================================================================== */
.ab-mv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.ab-panel {
  padding: 1.75rem 1.6rem;
  background: var(--vb-card);
  border: 1px solid var(--vb-border);
  border-radius: var(--ab-radius);
}
.ab-values__title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--vb-text);
  margin: clamp(2rem, 4vw, 2.75rem) 0 1rem;
}
.ab-values {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}
.ab-values li {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.15rem 1.1rem;
  background: var(--vb-card);
  border: 1px solid var(--vb-border);
  border-radius: 14px;
}
.ab-values strong { font-family: var(--font-heading); font-size: 1rem; color: var(--vb-text); }
.ab-values__icon { color: var(--vb-green-ink); margin-bottom: 0.25rem; }
.ab-values__d { font-size: 0.9rem; line-height: 1.55; color: var(--vb-text-muted); }

/* ==========================================================================
   Why choose us
   ========================================================================== */
.ab-why {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.ab-why__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; margin-top: 1.5rem; }
.ab-why__list li { display: flex; gap: 0.7rem; align-items: flex-start; }
.ab-why__list strong { display: block; font-family: var(--font-heading); font-size: 0.98rem; color: var(--vb-text); line-height: 1.4; margin-bottom: 0.2rem; }
.ab-why__d { display: block; font-size: 0.9rem; line-height: 1.6; color: var(--vb-text-muted); }

/* ==========================================================================
   Team
   ========================================================================== */
.ab-team {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
.ab-team--1 { grid-template-columns: minmax(0, 300px); }
.ab-team--2 { grid-template-columns: repeat(2, minmax(0, 300px)); }
.ab-team--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-person {
  background: var(--vb-card);
  border: 1px solid var(--vb-border);
  border-radius: var(--ab-radius);
  overflow: hidden;
  padding-bottom: 1.1rem;
}
.ab-person__photo {
  display: block;
  aspect-ratio: 4 / 5;
  background: #EEF1EC;
  overflow: hidden;
  margin-bottom: 1rem;
}
.ab-person__photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; }
.ab-person__initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--vb-green-ink);
}
.ab-person__name, .ab-person__role, .ab-person__bio { padding-inline: 1.15rem; }
.ab-person__name { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--vb-text); line-height: 1.35; }
.ab-person__role { font-size: 0.9rem; color: var(--vb-green-ink); font-weight: 600; margin-top: 0.15rem; }
.ab-person__bio { font-size: 0.9rem; line-height: 1.6; color: var(--vb-text-muted); margin-top: 0.5rem; }

/* ==========================================================================
   Testimonial, clients, CSR
   ========================================================================== */
/* ---------- client feedback: static grid of review cards ---------- */
.ab-reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;               /* equal heights per row; each card grows with its text */
  list-style: none;
  margin: 0;
  padding: 0;
}
/* one or two reviews: keep readable card widths instead of stretching or repeating them */
.ab-reviews--1 { grid-template-columns: minmax(0, 640px); }
.ab-reviews--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; }

.ab-review { display: flex; min-width: 0; }
.ab-review figure {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: clamp(1.5rem, 2.2vw, 2rem);          /* 24–32px */
  background: var(--vb-card);
  border: 1px solid var(--vb-border);            /* #E5E9ED on this page */
  border-radius: var(--ab-radius);               /* 16px */
  box-shadow: 0 1px 2px rgba(23, 32, 51, 0.04);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ab-review figure:hover { border-color: var(--vb-border-strong); box-shadow: var(--vb-shadow-sm); }   /* no movement */
.ab-review__mark { color: var(--ab-accent); flex-shrink: 0; margin-bottom: 1rem; }
.ab-review__tag {
  align-self: flex-start;
  margin: 0 0 0.85rem;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-full);
  background: var(--vb-green-tint);
  color: var(--vb-green-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.6;
}
.ab-review__stars { margin: 0 0 0.75rem; font-size: 1rem; line-height: 1; letter-spacing: 0.12em; color: #B7791F; }
.ab-review__stars-off { color: var(--vb-border-strong); }

.ab-review__quote { margin: 0; }
.ab-review__quote p {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.05vw, 1.0625rem);     /* 16–17px */
  font-weight: 400;
  font-style: normal;
  line-height: 1.65;
  color: var(--vb-text);
  overflow-wrap: anywhere;
}
/* Khmer text — the page in Khmer, or a review written in Khmer on the English page */
html.lang-km .ab-review__quote p:not([lang="en"]),
.ab-review__quote p[lang="km"] { font-family: var(--font-body-km); line-height: 1.8; }
.ab-review__quote p[lang="en"] { font-family: var(--font-body); line-height: 1.65; }

/* long reviews: whole lines are hidden (never part of a word or a Khmer cluster) until "Read Full Review".
   Only with JavaScript — without it the full review is simply shown. */
html.js .ab-review__quote.is-clamped p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden; }
.ab-review__toggle {
  align-self: flex-start;
  margin-top: 0.75rem;
  padding: 0.35rem 0;
  min-height: 44px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--vb-green-ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.ab-review__toggle:hover { color: var(--vb-text); }
.ab-review__toggle:focus-visible, .ab-review__link:focus-visible { outline: 3px solid var(--vb-green-ink); outline-offset: 3px; border-radius: 6px; }

.ab-review__by {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: auto;                               /* attribution sits at the bottom of the card */
  padding-top: 1.5rem;
}
.ab-review__avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.ab-review__avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vb-green-tint);
  color: var(--vb-green-ink);
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ab-review__who { display: flex; flex-direction: column; min-width: 0; }
.ab-review__name { font-style: normal; font-weight: 600; color: var(--vb-text); line-height: 1.4; overflow-wrap: anywhere; }
.ab-review__meta { font-size: 0.875rem; line-height: 1.5; color: var(--vb-text-muted); overflow-wrap: anywhere; }
html.lang-km .ab-review__meta { line-height: 1.7; }
.ab-review__link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 0.875rem; font-weight: 600; color: var(--vb-green-ink); text-decoration: underline; text-underline-offset: 3px; }

/* more than three reviews: the rest waits behind "View More" (only when JavaScript runs) */
html.js .ab-review[data-ab-extra]:not(.is-shown) { display: none; }
html:not(.js) .ab-reviews__more { display: none; }
.ab-reviews__more { margin: clamp(1.25rem, 2.5vw, 2rem) 0 0; }

.ab-reviews__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  padding: clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.25rem, 2.6vw, 2rem);
  background: var(--vb-card);
  border: 1px solid var(--vb-border);
  border-radius: var(--ab-radius);
}
.ab-reviews__cta-text { margin: 0; font-family: var(--font-heading); font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 700; line-height: 1.3; color: var(--vb-text); }
html.lang-km .ab-reviews__cta-text { font-family: var(--font-heading-km); line-height: 1.6; }
.ab-clients { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.ab-clients--only { margin-top: 0; }
.ab-clients__title {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--vb-text-subtle);
  margin-bottom: 1rem;
}
html.lang-km .ab-clients__title { font-size: 0.9375rem; text-transform: none; letter-spacing: normal; }
.ab-clients img { width: 100%; max-width: 980px; height: auto; display: block; border-radius: 12px; }
.ab-csr {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--vb-border);
  border-radius: var(--ab-radius);
  background: var(--vb-card);
}
.ab-csr .ab-body { margin-bottom: 0.75rem; }

/* ==========================================================================
   Company profile
   ========================================================================== */
.ab-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--vb-bg-alt);
  border: 1px solid var(--vb-border);
  border-radius: 18px;
}
.ab-form { margin-top: 0; background: var(--vb-card); padding: 1.5rem; border-radius: 14px; border: 1px solid var(--vb-border); }
.ab-form .ab-btn { width: 100%; margin-top: 0.5rem; }
.ab-form input:focus-visible { outline: none; }
.ab-form__error { color: #B42318; font-size: 0.9rem; }
.ab-form__error[hidden] { display: none; }
.ab-form input[aria-invalid="true"] { border-color: #B42318; }
.ab-alert {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.15rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  line-height: 1.6;
}
.ab-alert--ok { background: var(--vb-green-tint); border: 1px solid var(--vb-green-line); color: var(--vb-text); }
.ab-alert--err { background: #FEF3F2; border: 1px solid #FECDCA; color: #912018; }
:root[data-theme="dark"] .ab-alert--err { background: rgba(240, 68, 56, 0.12); border-color: rgba(240, 68, 56, 0.4); color: #FDA29B; }
:root[data-theme="dark"] .ab-form__error { color: #FDA29B; }

/* ==========================================================================
   Final CTA
   ========================================================================== */
.ab-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border-radius: 18px;
  background: var(--vb-bg-alt);
  border: 1px solid var(--vb-border);
  overflow: hidden;
}
.ab-cta::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--vb-green); }
.ab-contact { list-style: none; display: grid; gap: 1rem; }
.ab-contact li { display: flex; flex-direction: column; gap: 0.1rem; }
.ab-contact__label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vb-green-ink);
}
html.lang-km .ab-contact__label { font-size: 0.875rem; text-transform: none; letter-spacing: normal; }
.ab-contact a { color: var(--vb-text); font-weight: 600; text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; }
.ab-contact a:hover { color: var(--vb-green-ink); text-decoration: underline; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .ab-reviews, .ab-reviews--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-team, .ab-team--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ab-hero__grid, .ab-split, .ab-story, .ab-why, .ab-profile, .ab-cta { grid-template-columns: 1fr; }
  .ab-hero__media { aspect-ratio: 16 / 9; }
  .ab-story__head { position: static; }
  .ab-approach { grid-template-columns: 1fr; }
  .ab-mv { grid-template-columns: 1fr; }
  .ab-facts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; }
  .ab-fact + .ab-fact { border-left: 0; }
  .ab-fact:nth-child(even) { border-left: 1px solid var(--vb-border); }
  .ab-fact:nth-child(n + 3) { border-top: 1px solid var(--vb-border); }
  .ab-head--row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .ab-reviews, .ab-reviews--1, .ab-reviews--2, .ab-reviews--3 { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .ab-reviews__cta .ab-btn { flex: 1 1 100%; }
  .ab-values { grid-template-columns: 1fr; }
  .ab-why__list { grid-template-columns: 1fr; }
  .ab-team, .ab-team--2, .ab-team--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
  .ab-team--1 { grid-template-columns: minmax(0, 260px); }
  .ab-actions .ab-btn { flex: 1 1 100%; }
  .ab-csr { flex-direction: column; }
  .ab-form { padding: 1.15rem; }
}
@media (max-width: 400px) {
  .ab-team, .ab-team--2, .ab-team--3 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-review figure { transition: none; }
  .ab-card, .ab-card:hover { transition: none; transform: none; }
}