/* =====================================================
   About page (v2) — loads after style.css
   ===================================================== */
:root { --accent: #e4572e; --peach: #fdeee8; }
.page-inner .site-header { position: sticky; background: #fff; border-bottom: 1px solid var(--line); }
.page-inner .main-nav a.active { border-color: var(--accent); }
.eyebrow-line { display: flex; align-items: center; gap: 14px; }
.eyebrow-line::after { content: ""; width: 30px; height: 1.5px; background: var(--accent); }
.ab-eyebrow { color: var(--ink-soft); font-size: 10.5px; margin-bottom: 14px; }
.ab-h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -0.015em; margin-bottom: 16px; }
.ab-copy { font-size: 14px; line-height: 1.65; color: var(--ink-soft); max-width: 480px; }

/* ---------- hero: text left, artwork bleeding off the right edge ---------- */
.ab-hero {
  position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(340px, 31vw, 470px);
  background: #fff url("../assets/img/about4-hero.jpg") right center / cover no-repeat;
}
.ab-hero-inner { position: relative; z-index: 1; width: 100%; }
.ab-hero-text { max-width: 410px; padding-block: 44px; }
.ab-hero h1 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -0.02em; margin-bottom: 18px; }
.ab-hero-text > p:not(.eyebrow) { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 22px; }


/* ---------- strip ---------- */
.ab-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ab-strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ab-strip-item { display: flex; align-items: center; gap: 16px; padding: 22px 20px; }
.ab-strip-item:first-child { padding-left: 0; }
.ab-strip-item + .ab-strip-item { border-left: 1px solid var(--line); }
.ab-icon { flex: none; width: 50px; height: 50px; border-radius: 50%; background: var(--peach); display: inline-flex; align-items: center; justify-content: center; }
.ab-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ab-strip-item strong { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.ab-strip-item span { font-size: 12px; color: var(--muted); }

/* ---------- approach ---------- */
.ab-approach { padding: 44px 0 40px; }
.ab-approach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
/* Pull the image out of the centred column so it starts at the window's left edge. */
.ab-approach-img { aspect-ratio: 3 / 2; max-height: 440px; width: 100%; border-radius: 6px; overflow: hidden; background: #f3f3f1; }
.ab-approach-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.ab-timeline { list-style: none; margin: 22px 0 0; padding: 0; position: relative; }
.ab-timeline::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background: #f2c4b5; }
.ab-timeline li { position: relative; padding: 6px 0 6px 28px; font-size: 13.5px; color: var(--ink-soft); }
.ab-timeline li::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--accent); }

/* ---------- why choose us ---------- */
.ab-why { padding: 20px 0 48px; }
.ab-why .ab-h2 { margin-bottom: 22px; }
.ab-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ab-card { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 24px 20px 26px; text-align: center; }
.ab-card .ab-icon { width: 62px; height: 62px; margin-bottom: 14px; }
.ab-card .ab-icon svg { width: 28px; height: 28px; }
.ab-card h3 { font-size: 14.5px; font-weight: 600; margin-bottom: 6px; }
.ab-card p { font-size: 13px; line-height: 1.55; color: var(--ink-soft); }

/* ---------- commitment ---------- */
.ab-commit {
  position: relative; color: #fff;
  background: #2a2d12 url("../assets/img/about6-commit.jpg") right center / cover no-repeat;
}
.ab-commit-inner { position: relative; padding-block: 44px 50px; min-height: clamp(300px, 30vw, 420px); display: flex; flex-direction: column; justify-content: center; }
.ab-commit .ab-eyebrow { color: rgba(255,255,255,.85); }
.ab-commit .eyebrow-line::after { background: var(--accent); }
.ab-commit h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.12; margin-bottom: 14px; }
.ab-commit-inner > p:not(.eyebrow) { font-size: 14px; line-height: 1.6; max-width: 360px; opacity: .92; margin-bottom: 22px; }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: #f4f1ee; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .ab-why-grid { grid-template-columns: repeat(2, 1fr); }
  .ab-strip-item span { font-size: 11.5px; }
}
@media (max-width: 900px) {
  .ab-hero { flex-direction: column; align-items: stretch; min-height: 0; background: #fff; }
  .ab-hero::after { content: ""; display: block; height: 240px; background: url("../assets/img/about4-hero.jpg") 85% center / cover no-repeat; }
  .ab-hero-text { max-width: none; padding-block: 36px 24px; }
  .ab-strip-grid { grid-template-columns: 1fr; }
  .ab-strip-item, .ab-strip-item:first-child { padding: 16px 0; }
  .ab-strip-item + .ab-strip-item { border-left: 0; border-top: 1px solid var(--line); }
  .ab-approach-grid { grid-template-columns: 1fr; gap: 24px; }
  .ab-commit { background-position: 70% center; }
  .ab-commit::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,34,14,.9) 0%, rgba(28,34,14,.65) 100%); }
}
@media (max-width: 560px) {
  .ab-why-grid { grid-template-columns: 1fr; }
}

.ab-commit-inner .btn { align-self: flex-start; }

/* Medium screens: push the spice artwork right so it clears the hero text. */
@media (max-width: 1400px) and (min-width: 901px) {
  .ab-hero { background-size: auto 100%; background-position: right -170px center; }
  .ab-hero-text { max-width: 340px; }
  .ab-hero h1 { font-size: clamp(30px, 3vw, 40px); white-space: nowrap; }
}