/* ============================================================
   ABOUT PAGE — Invesp brand system (navy / violet / green).
   Namespaced ab-*. Tabs: About Us / Our story / Our team /
   Our clients. Hero supports two directions toggled by a body
   class (ab-hero--a immersive dark, ab-hero--b editorial light)
   driven from the Tweaks panel.
   ============================================================ */
:root{
  --ab-navy: 231 52% 25%;
  --ab-navy-edge: 233 56% 15%;
  --ab-violet: 263 75% 58%;
  --ab-green: 152 52% 40%;
  --ab-ink: 222 47% 12%;
  --ab-muted: 220 9% 42%;
  --ab-line: 220 16% 90%;
  --ab-tint: 220 24% 97%;
  --ab-display: 'Space Grotesk', 'Outfit', sans-serif;
}

/* ---------------- HERO (shared) ---------------- */
.ab-hero{ position:relative; overflow:hidden; }
.ab-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.ab-eyebrow .dot{ width:7px; height:7px; border-radius:999px; background:hsl(152 60% 55%); }
.ab-h1{ font-family:var(--ab-display); font-weight:700; letter-spacing:-.025em; margin:0; }
.ab-hero-intro p{ margin:0 0 18px; }
.ab-hero-intro p:last-child{ margin-bottom:0; }
.ab-hero-cta{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  background:hsl(263 70% 60%); color:#fff; font-weight:700; font-size:16px;
  padding:15px 30px; border-radius:999px; margin-top:6px;
}
.ab-hero-cta:hover{ background:hsl(263 70% 54%); }

/* ---- Direction A: immersive dark, centered ---- */
.ab-hero--a .ab-hero{
  padding:152px 0 88px; color:#fff; text-align:center;
  background:
    radial-gradient(120% 130% at 84% -20%, hsl(219 92% 58% / .28) 0%, transparent 50%),
    linear-gradient(165deg, hsl(var(--ab-navy)) 0%, hsl(var(--ab-navy-edge)) 100%);
}
.ab-hero--a .ab-hero-inner{ max-width:920px; margin:0 auto; }
.ab-hero--a .ab-eyebrow{ color:hsl(263 82% 86%); background:hsl(263 75% 62% / .18);
  padding:8px 16px; border-radius:999px; margin-bottom:26px; }
.ab-hero--a .ab-h1{ font-size:clamp(34px,4.6vw,58px); line-height:1.04; margin-bottom:30px; }
.ab-hero--a .ab-hero-intro{ max-width:74ch; margin:0 auto; font-size:18px; line-height:1.7; color:hsl(220 30% 84%); }
.ab-hero--a .ab-hero-cta{ margin-top:34px; }

/* ---- Direction B: editorial light, two-column ---- */
.ab-hero--b .ab-hero{
  padding:140px 0 84px; color:hsl(var(--ab-ink));
  background:linear-gradient(180deg, hsl(var(--ab-tint)) 0%, #fff 100%);
  border-bottom:1px solid hsl(var(--ab-line));
}
.ab-hero--b .ab-hero-inner{ display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:start; }
.ab-hero--b .ab-eyebrow{ color:hsl(263 60% 52%); margin-bottom:22px; }
.ab-hero--b .ab-h1{ font-size:clamp(32px,3.8vw,50px); line-height:1.06; color:hsl(var(--ab-ink));
  padding-bottom:24px; border-bottom:3px solid hsl(var(--ab-violet)); display:inline-block; }
.ab-hero--b .ab-hero-intro{ font-size:17px; line-height:1.7; color:hsl(222 22% 32%); }
.ab-hero--b .ab-hero-cta{ background:hsl(var(--ab-navy)); }
.ab-hero--b .ab-hero-cta:hover{ background:hsl(var(--ab-navy-edge)); }
@media (max-width:860px){ .ab-hero--b .ab-hero-inner{ grid-template-columns:1fr; gap:32px; } }

/* ---------------- TAB PILLS ---------------- */
.ab-pills-wrap{ position:sticky; top:64px; z-index:20; background:#fff;
  border-bottom:1px solid hsl(var(--ab-line)); }
.ab-pills{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding:16px 0; }
.ab-pill{
  font:inherit; font-size:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; padding:11px 22px; border-radius:999px; line-height:1;
  border:1px solid hsl(var(--ab-line)); background:#fff; color:hsl(222 30% 32%);
  transition:background .15s, color .15s, border-color .15s;
}
.ab-pill:hover{ border-color:hsl(var(--ab-navy) / .4); }
.ab-pill.is-active{ background:hsl(var(--ab-navy)); border-color:hsl(var(--ab-navy)); color:#fff; }
@media (max-width:600px){ .ab-pills-wrap{ position:static; } .ab-pill{ padding:10px 16px; font-size:13px; } }

/* ---------------- SECTIONS ---------------- */
.ab-tabpane{ display:none; }
.ab-tabpane.is-active{ display:block; }
.ab-sec{ padding:84px 0; }
.ab-sec.tint{ background:hsl(var(--ab-tint)); }
.ab-sec.dark{ color:#fff;
  background:
    radial-gradient(120% 140% at 82% -25%, hsl(219 92% 58% / .24) 0%, transparent 52%),
    linear-gradient(165deg, hsl(var(--ab-navy)) 0%, hsl(var(--ab-navy-edge)) 100%); }
.ab-kicker{ font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:hsl(263 60% 52%); margin:0 0 16px; }
.ab-sec.dark .ab-kicker{ color:hsl(263 82% 84%); }
.ab-h2{ font-family:var(--ab-display); font-size:clamp(26px,3vw,38px); font-weight:700;
  letter-spacing:-.02em; line-height:1.12; color:hsl(var(--ab-ink)); margin:0 0 24px; }
.ab-sec.dark .ab-h2{ color:#fff; }
.ab-prose{ font-size:18px; line-height:1.75; color:hsl(222 22% 30%); max-width:68ch; }
.ab-sec.dark .ab-prose{ color:hsl(220 28% 86%); }
.ab-prose p{ margin:0 0 20px; }
.ab-prose p:last-child{ margin-bottom:0; }
.ab-prose strong{ color:inherit; font-weight:700; }
.ab-center{ text-align:center; }
.ab-center .ab-prose{ margin-left:auto; margin-right:auto; }
.ab-divider{ height:1px; background:hsl(var(--ab-line)); margin:64px 0; border:0; }
.ab-sec.dark .ab-divider{ background:hsl(230 40% 55% / .3); }

/* split: story + icon */
.ab-split{ display:grid; grid-template-columns:1fr 280px; gap:56px; align-items:center; }
@media (max-width:820px){ .ab-split{ grid-template-columns:1fr; gap:32px; } }
.ab-trend{ display:flex; align-items:center; justify-content:center;
  background:hsl(var(--ab-navy) / .06); border-radius:20px; aspect-ratio:1; }
.ab-trend svg{ width:54%; height:54%; color:hsl(var(--ab-violet)); }

/* ---------------- CEO MESSAGE ---------------- */
.ab-ceo{ display:grid; grid-template-columns:300px 1fr; gap:64px; align-items:start; }
@media (max-width:860px){ .ab-ceo{ grid-template-columns:1fr; gap:36px; } }
.ab-ceo-portrait{ position:sticky; top:96px; }
.ab-ceo-portrait img{ object-fit:cover; width:100%; height:380px; display:block; border-radius:20px;
  box-shadow:0 30px 60px -38px hsl(231 60% 8% / .6); }
.ab-ceo-cap{ margin-top:18px; font-size:14px; color:hsl(var(--ab-muted)); text-align:center; }
.ab-ceo-body .ab-prose{ font-style:italic; color:hsl(222 26% 26%); }
.ab-ceo-body .ab-prose .ab-q{ font-style:normal; font-weight:700; }
.ab-sign{ margin-top:32px; }
.ab-sign img{ object-fit:contain; object-position:0% 50%; width:240px; height:56px; display:block; }
.ab-sign .role{ margin-top:10px; font-size:17px; font-weight:600; color:hsl(var(--ab-ink)); }

/* ---------------- VALUES ---------------- */
.ab-values{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:8px; }
@media (max-width:820px){ .ab-values{ grid-template-columns:1fr; gap:22px; } }
.ab-value{ text-align:center; padding:8px; }
.ab-value-ic{ width:72px; height:72px; margin:0 auto 22px; border-radius:18px; display:grid; place-items:center;
  background:hsl(var(--ab-violet) / .1); color:hsl(var(--ab-violet)); }
.ab-value-ic svg{ width:34px; height:34px; }
.ab-value h3{ font-family:var(--ab-display); font-size:17px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:hsl(var(--ab-ink)); margin:0 0 12px; }
.ab-value p{ font-size:16px; line-height:1.6; color:hsl(222 18% 38%); margin:0; }

/* ---------------- BOOK ---------------- */
.ab-book{ display:grid; grid-template-columns:1fr 220px; gap:56px; align-items:center; max-width:840px; margin:0 auto; }
@media (max-width:720px){ .ab-book{ grid-template-columns:1fr; gap:28px; text-align:center; justify-items:center; } }
.ab-book-title{ font-family:var(--ab-display); font-size:24px; font-weight:600; line-height:1.2;
  text-transform:uppercase; letter-spacing:.02em; color:#fff; margin:0 0 22px; }
.ab-book-by{ font-size:16px; color:hsl(220 28% 84%); margin:0 0 28px; }
.ab-book-by em{ color:#fff; font-style:italic; font-weight:600; }
.ab-book-btn{ display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:#fff; color:hsl(var(--ab-navy)); font-weight:700; font-size:15px;
  padding:13px 28px; border-radius:999px; }
.ab-book-cover img{ object-fit:contain; width:200px; height:290px; display:block; border-radius:6px;
  box-shadow:0 26px 50px -28px rgba(0,0,0,.7); }

/* ---------------- TIMELINE (Our story) ---------------- */
.ab-timeline-intro{ text-align:center; max-width:74ch; margin:0 auto 64px; font-size:18px;
  line-height:1.7; color:hsl(222 22% 32%); }
.ab-timeline{ position:relative; max-width:920px; margin:0 auto; }
.ab-timeline::before{ content:''; position:absolute; left:50%; top:0; bottom:0; width:2px;
  background:hsl(var(--ab-line)); transform:translateX(-50%); }
.ab-tl-item{ position:relative; width:50%; padding:0 48px 44px; box-sizing:border-box; }
.ab-tl-item:nth-child(odd){ left:0; text-align:right; }
.ab-tl-item:nth-child(even){ left:50%; text-align:left; }
.ab-tl-item::before{ content:''; position:absolute; top:6px; width:15px; height:15px; border-radius:999px;
  background:hsl(var(--ab-violet)); border:3px solid #fff; box-shadow:0 0 0 1px hsl(var(--ab-line)); }
.ab-tl-item:nth-child(odd)::before{ right:-7.5px; }
.ab-tl-item:nth-child(even)::before{ left:-7.5px; }
.ab-tl-date{ font-family:var(--ab-display); font-size:20px; font-weight:700; color:hsl(var(--ab-navy));
  letter-spacing:-.01em; margin-bottom:6px; }
.ab-tl-text{ font-size:16px; line-height:1.55; color:hsl(222 20% 34%); margin:0; }
.ab-tl-text strong{ color:hsl(var(--ab-ink)); font-weight:700; }
@media (max-width:700px){
  .ab-timeline::before{ left:7px; }
  .ab-tl-item, .ab-tl-item:nth-child(odd), .ab-tl-item:nth-child(even){ width:100%; left:0; text-align:left; padding:0 0 36px 36px; }
  .ab-tl-item:nth-child(odd)::before, .ab-tl-item:nth-child(even)::before{ left:0; right:auto; }
}

/* ---------------- TEAM ---------------- */
.ab-team-head{ text-align:center; margin-bottom:56px; }
.ab-team-head .sub{ font-family:var(--ab-display); font-size:clamp(22px,2.6vw,30px); font-weight:600;
  text-transform:uppercase; letter-spacing:.02em; color:hsl(var(--ab-ink)); margin:10px 0 0; }
.ab-team{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
@media (max-width:820px){ .ab-team{ grid-template-columns:1fr; gap:40px; } }
.ab-member-top{ display:flex; align-items:center; gap:22px; margin-bottom:22px; }
.ab-ring{ flex:0 0 auto; width:132px; height:132px; border-radius:999px; padding:4px;
  background:linear-gradient(135deg, hsl(var(--ab-violet)), hsl(219 90% 58%)); }
.ab-ring img{ object-fit:cover; width:124px; height:124px; display:block; border-radius:999px; background:#fff; }
.ab-member-name h3{ font-family:var(--ab-display); font-size:24px; font-weight:700; letter-spacing:-.01em;
  color:hsl(var(--ab-ink)); margin:0 0 4px; }
.ab-member-name .role{ font-size:16px; font-weight:600; color:hsl(var(--ab-violet)); }
.ab-member p{ font-size:16px; line-height:1.7; color:hsl(222 20% 34%); margin:0; }
.ab-team-joint{ max-width:78ch; margin:56px auto 0; text-align:center; }

/* ---------------- CLIENTS ---------------- */
.ab-clients-head{ text-align:center; margin-bottom:48px; }
.ab-clients-head .sub{ font-size:18px; font-weight:500; color:hsl(var(--ab-muted)); margin:10px 0 0; }
.ab-logo-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  background:hsl(var(--ab-line)); border:1px solid hsl(var(--ab-line)); border-radius:16px; overflow:hidden; }
@media (max-width:900px){ .ab-logo-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:560px){ .ab-logo-grid{ grid-template-columns:repeat(3,1fr); } }
.ab-logo-cell{ background:#fff; aspect-ratio:3/2; display:flex; align-items:center; justify-content:center; padding:22px; }
.ab-logo-cell img{ max-width:100%; max-height:52px; width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.62; transition:filter .2s, opacity .2s; }
.ab-logo-cell:hover img{ filter:grayscale(0); opacity:1; }
.ab-clients-foot{ max-width:72ch; margin:48px auto 0; text-align:center; }

/* ---------------- WHO NOT ---------------- */
.ab-not{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:48px; }
@media (max-width:860px){ .ab-not{ grid-template-columns:1fr 1fr; gap:24px; } }
@media (max-width:520px){ .ab-not{ grid-template-columns:1fr; } }
.ab-not-item{ text-align:center; }
.ab-not-ic{ width:64px; height:64px; margin:0 auto 20px; border-radius:16px; display:grid; place-items:center;
  background:hsl(263 70% 62% / .14); color:hsl(263 82% 80%); }
.ab-not-ic svg{ width:30px; height:30px; }
.ab-not-item p{ font-size:16px; line-height:1.55; color:hsl(220 28% 86%); margin:0; }
.ab-not-cta{ text-align:center; margin-top:52px; }
.ab-not-cta a{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; background:#fff;
  color:hsl(var(--ab-navy)); font-weight:700; font-size:15px; padding:14px 30px; border-radius:999px; }

/* ---------------- TWEAKS PANEL ---------------- */
.ab-tweaks{ position:fixed; right:20px; bottom:20px; z-index:60; width:268px;
  background:#fff; border:1px solid hsl(var(--ab-line)); border-radius:16px;
  box-shadow:0 24px 60px -24px hsl(231 50% 12% / .5); padding:18px; display:none;
  font-family:'Roboto', system-ui, sans-serif; }
.ab-tweaks.is-open{ display:block; }
.ab-tweaks-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.ab-tweaks-title{ font-family:var(--ab-display); font-size:16px; font-weight:700; color:hsl(var(--ab-ink)); }
.ab-tweaks-close{ border:none; background:none; cursor:pointer; color:hsl(var(--ab-muted)); font-size:20px; line-height:1; padding:2px 6px; }
.ab-tweak-label{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:hsl(var(--ab-muted)); margin:0 0 10px; }
.ab-seg{ display:flex; gap:6px; background:hsl(var(--ab-tint)); border:1px solid hsl(var(--ab-line));
  border-radius:10px; padding:4px; }
.ab-seg button{ flex:1; font:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:9px 8px;
  border:none; border-radius:7px; background:transparent; color:hsl(222 28% 36%); }
.ab-seg button.is-active{ background:hsl(var(--ab-navy)); color:#fff; }
.ab-tweak-note{ font-size:12px; color:hsl(var(--ab-muted)); margin:12px 0 0; line-height:1.5; }