/* =====================================================================
   HOLIGINE · About page
   Editorial, story-led structure (not the product layouts of the
   Solutions / Platform pages). Same tokens, type and colors.
   ===================================================================== */
.ab-accent { color: var(--c-purple); }

/* ---------- hero: big headline + photo collage ---------- */
.ab-hero { position: relative; padding-top: calc(var(--header-h) + clamp(48px, 6vw, 96px)); overflow-x: clip; }
.ab-hero__eyebrow { margin-bottom: 22px; }
.ab-hero__title { max-width: 14ch; margin-bottom: 28px; font-size: clamp(2.75rem, 1.2rem + 5.4vw, 6.25rem); }
.ab-hero__lead { max-width: 44ch; margin-left: auto; }
.ab-collage { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: clamp(40px, 5vw, 72px); }
.ab-collage figure { margin: 0; overflow: hidden; border-radius: var(--r-xl); background: #E5DDD3; }
.ab-collage img { width: 100%; height: 100%; object-fit: cover; }
.ab-collage__a { grid-column: 1 / span 7; aspect-ratio: 4 / 3; }
.ab-collage__b { grid-column: 8 / span 2; aspect-ratio: 3 / 5; margin-top: 72px !important; }
.ab-collage__c { grid-column: 10 / span 3; aspect-ratio: 4 / 5; margin-top: 24px !important; }
.ab-collage__tag { position: absolute; left: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: var(--c-white); box-shadow: var(--shadow-lg); font-weight: 600; font-size: 0.9375rem; }
.ab-collage__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-mint); box-shadow: 0 0 0 4px rgba(92,212,177,.25); }

/* ---------- from DNA Travel to Holigine ---------- */
.ab-rename { padding-block: clamp(96px, 11vw, 168px); }
.ab-rename__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 112px); align-items: center; }
.ab-rename__copy .eyebrow { margin-bottom: 18px; }
.ab-rename__copy .h2 { margin-bottom: 24px; }
.ab-rename__copy .body { font-size: 1.125rem; }
.ab-namecard { display: grid; justify-items: center; gap: 18px; padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 56px); border-radius: var(--r-xl); background: var(--c-deep); text-align: center; }
.ab-namecard__old { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); color: rgba(252,248,244,.42); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(92,212,177,.7); }
.ab-namecard__arrow { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(252,248,244,.08); color: var(--c-mint); }
.ab-namecard__arrow .icon { width: 20px; height: 20px; transform: rotate(90deg); }
.ab-namecard__new { width: min(320px, 80%); height: auto; }
.ab-namecard__keep { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.ab-namecard__keep li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(252,248,244,.08); color: var(--c-cream); font-size: 0.8125rem; font-weight: 600; }
.ab-namecard__keep .icon { width: 14px; height: 14px; color: var(--c-mint); stroke-width: 2.4; }

/* ---------- our journey: sticky heading + story ---------- */
.ab-journey { padding-block: 0 clamp(96px, 11vw, 168px); }
.ab-journey__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 112px); align-items: start; padding-top: clamp(64px, 7vw, 104px); border-top: 1px solid var(--line); }
.ab-journey__head { position: sticky; top: calc(var(--header-h) + 32px); }
.ab-journey__head .eyebrow { margin-bottom: 18px; }
.ab-journey__story { display: grid; gap: clamp(32px, 4vw, 48px); }
.ab-journey__text { font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.6; color: var(--ink-2); }
.ab-quote { margin: 0; padding-left: clamp(20px, 2.4vw, 32px); border-left: 3px solid var(--c-purple); }
.ab-quote p { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); line-height: 1.15; color: var(--c-purple); }

/* ---------- what we built ---------- */
.ab-built { padding-bottom: clamp(96px, 11vw, 168px); }
.ab-built__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 112px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.ab-built__head .body { font-size: 1.125rem; max-width: 52ch; }
.ab-built__focus { margin-bottom: 16px; font-size: 0.8125rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ab-built__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ab-tile { display: grid; align-content: end; gap: 8px; min-height: clamp(200px, 20vw, 280px); padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-xl); }
.ab-tile--mint { background: var(--aud-agents-soft); }
.ab-tile--lavender { background: var(--aud-companies-soft); }
.ab-tile--pink { background: var(--aud-brands-soft); }
.ab-tile__big { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.05; letter-spacing: -0.01em; }
.ab-tile__small { color: var(--ink-2); font-size: 1rem; }
.ab-built__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 28px; }
.ab-built__links > span { color: var(--ink-3); font-weight: 600; margin-right: 4px; }
.ab-built__links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); font-weight: 600; transition: background-color 180ms ease, border-color 180ms ease; }
.ab-built__links .icon { width: 15px; height: 15px; color: var(--c-purple); }
@media (hover: hover) and (pointer: fine) { .ab-built__links a:hover { background: var(--c-white); border-color: var(--c-purple); } }

/* ---------- what we believe: full photo ---------- */
.ab-believe { padding-inline: clamp(8px, 1.4vw, 20px); }
.ab-believe__panel { position: relative; overflow: hidden; display: grid; align-items: center; min-height: clamp(520px, 52vw, 720px); border-radius: var(--r-xl); background: var(--c-deep); }
.ab-believe__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; transform: scaleX(-1); }
.ab-believe__panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(36,14,71,.92) 0%, rgba(36,14,71,.72) 38%, rgba(36,14,71,.05) 72%); }
.ab-believe__copy { position: relative; z-index: 1; padding-block: clamp(64px, 7vw, 104px); }
.ab-believe__copy .eyebrow { margin-bottom: 18px; }
.ab-believe__copy .h2 { color: var(--c-cream); margin-bottom: 24px; max-width: 16ch; }
.ab-believe__accent { color: var(--c-mint); }
.ab-believe__text { max-width: 42ch; font-size: 1.125rem; line-height: 1.6; color: var(--on-dark-2); }

/* ---------- what guides us: numbered rows ---------- */
.ab-values { padding-block: clamp(96px, 11vw, 168px); }
.ab-values__head { margin-bottom: clamp(32px, 4vw, 56px); }
.ab-values__head .eyebrow { margin-bottom: 18px; }
.ab-value { display: grid; grid-template-columns: minmax(80px, 1.2fr) minmax(0, 5fr) minmax(0, 4fr); gap: clamp(20px, 3vw, 56px); align-items: start; padding-block: clamp(28px, 3vw, 44px); border-top: 1px solid var(--line); }
.ab-value:last-child { border-bottom: 1px solid var(--line); }
.ab-value__num { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4rem); line-height: 1; color: var(--c-purple); opacity: .9; }
.ab-value__title { display: grid; gap: 10px; }
.ab-value__label { font-size: 0.75rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ab-value h3 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.375rem, 1.1rem + 0.9vw, 2rem); line-height: 1.15; }
.ab-value p { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.6; padding-top: 26px; }

/* ---------- CTA: light panel with brand arcs ---------- */
.ab-cta { padding-bottom: clamp(48px, 6vw, 96px); }
.ab-cta__panel { position: relative; overflow: hidden; display: grid; justify-items: start; padding: clamp(64px, 8vw, 128px) clamp(24px, 6vw, 96px); border-radius: var(--r-xl); background: var(--c-white); border: 1px solid var(--line); }
.ab-cta__arcs { position: absolute; right: clamp(-200px, -10vw, -60px); top: -20%; height: 140%; width: auto; max-width: none; opacity: .9; pointer-events: none; }
.ab-cta__panel > :not(.ab-cta__arcs) { position: relative; }
.ab-cta__panel .eyebrow { margin-bottom: 20px; }
.ab-cta__title { margin-bottom: 36px; font-size: clamp(2.5rem, 1.3rem + 4vw, 5rem); line-height: 1.02; max-width: 14ch; }

/* ---------- responsive ---------- */
@media (max-width: 899px) {
  .ab-rename__grid, .ab-journey__grid, .ab-built__head { grid-template-columns: 1fr; }
  .ab-journey__head { position: static; }
  .ab-built__tiles { grid-template-columns: 1fr; }
  .ab-tile { min-height: 150px; }
  .ab-value { grid-template-columns: auto 1fr; }
  .ab-value p { grid-column: 2; padding-top: 0; }
  .ab-cta__arcs { height: 70%; top: auto; bottom: -18%; right: -30%; opacity: .5; }
}
@media (max-width: 699px) {
  .ab-hero__lead { margin-left: 0; }
  .ab-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ab-collage__a { grid-column: 1 / -1; }
  .ab-collage__b { grid-column: 1; margin-top: 0 !important; aspect-ratio: 3 / 4; }
  .ab-collage__c { grid-column: 2; margin-top: 28px !important; aspect-ratio: 3 / 4; }
  .ab-collage__tag { position: relative; left: auto; bottom: auto; grid-column: 1 / -1; justify-self: start; margin-top: 4px; font-size: 0.875rem; }
  .ab-believe__panel { align-items: end; min-height: 620px; }
  .ab-believe__panel::after { background: linear-gradient(180deg, rgba(36,14,71,.1) 0%, rgba(36,14,71,.75) 45%, rgba(36,14,71,.95) 100%); }
  .ab-believe__img { object-position: 30% 30%; }
  .ab-value { gap: 14px 18px; }
  .ab-value__num { font-size: 2rem; }
  .ab-cta__panel { padding-bottom: 140px; }
}
.ab-hero__title { max-width: none; font-size: clamp(2.6rem, 0.9rem + 4.6vw, 5.5rem); }
.ab-believe__img { transform: none; object-position: 60% 50%; }
.ab-believe__panel::after { background: linear-gradient(90deg, rgba(36,14,71,.9) 0%, rgba(36,14,71,.7) 34%, rgba(36,14,71,0) 62%); }
@media (max-width: 699px) { .ab-believe__img { object-position: 80% 30%; } .ab-believe__panel::after { background: linear-gradient(180deg, rgba(36,14,71,0) 0%, rgba(36,14,71,.75) 42%, rgba(36,14,71,.95) 100%); } }
.ab-collage__a img { object-position: 40% 50%; } .ab-collage__b img { object-position: 52% 50%; } .ab-collage__c img { object-position: 22% 50%; }

/* rename section: the same system, new name */
.ab-system { position: relative; padding: clamp(28px, 3.4vw, 48px) clamp(16px, 2.6vw, 36px) clamp(48px, 5vw, 64px); border-radius: var(--r-xl); background: var(--aud-companies-soft); }
.ab-system .eng { border-radius: var(--r-md); }
.ab-system .eng__search { grid-template-columns: 1.3fr 1fr auto; }
.ab-system .eng__row { grid-template-columns: 96px 1fr auto; }
.ab-system .eng__row img { width: 96px; height: 72px; }
.ab-system__tag { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: var(--c-white); box-shadow: var(--shadow-lg); font-weight: 600; white-space: nowrap; }
.ab-system__old { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(119,57,253,.5); }
.ab-system__tag .icon { width: 15px; height: 15px; color: var(--c-purple); }
.ab-system__tag b { font-family: var(--f-display); font-weight: 700; color: var(--c-purple); }
@media (max-width: 699px) {
  .ab-system { padding: 16px 12px 56px; }
  .ab-system .eng__search { grid-template-columns: 1fr auto; }
  .ab-system .eng__row { grid-template-columns: 72px 1fr; }
  .ab-system .eng__row img { width: 72px; height: 60px; }
}

/* ---------- our journey: an itinerary route ---------- */
.ab-route { padding-block: 0 clamp(96px, 11vw, 168px); }
.ab-route__head { display: grid; justify-items: center; text-align: center; margin-bottom: clamp(48px, 6vw, 80px); }
.ab-route__head .eyebrow { margin-bottom: 18px; }
.ab-route__stops { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* the route: dashed line through the dots, with a plane on it */
.ab-route__stops::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 58px; border-top: 2px dashed rgba(119,57,253,.4); }
.ab-route__stops::after { content: ""; position: absolute; left: 50%; top: 46px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: var(--c-cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237739FD' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 13.5 4 11l1.5-1.5 7 1L16.8 6a2 2 0 0 1 2.9 2.8l-4.6 4.5 1 7L14.6 22l-2.4-6.6-3.4 3.3.2 2.3-1.3 1.3-1.4-3.5-3.5-1.4L4.1 16l2.3.2z'/%3E%3C/svg%3E") center / 18px no-repeat; transform: rotate(45deg); display: none; }
.ab-stop { position: relative; display: grid; justify-items: center; align-content: start; gap: 14px; text-align: center; }
.ab-stop__kind { font-size: 0.75rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.ab-stop__dot { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--c-white); color: var(--c-purple); box-shadow: 0 0 0 8px var(--c-cream), var(--shadow-md); }
.ab-stop__dot .icon { width: 22px; height: 22px; }
.ab-stop__dot--logo { background: none; box-shadow: 0 0 0 8px var(--c-cream); }
.ab-stop__dot--logo img { width: 52px; height: 52px; border-radius: 14px; }
.ab-stop__card { display: grid; gap: 8px; width: 100%; padding: 22px 20px; border-radius: var(--r-lg); background: var(--c-white); border: 1px solid var(--line); text-align: left; }
.ab-stop__card b { font-family: var(--f-display); font-size: 1.25rem; font-weight: 700; }
.ab-stop__card p { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; }
.ab-stop--key .ab-stop__dot { background: var(--c-purple); color: var(--c-white); }
.ab-stop--key .ab-stop__card { background: var(--c-purple); border-color: transparent; align-content: center; min-height: 100%; }
.ab-stop__quote { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(1.375rem, 1.05rem + 0.9vw, 1.75rem) !important; line-height: 1.2 !important; color: var(--c-white) !important; }
.ab-stop--arrive .ab-stop__card { background: var(--aud-companies-soft); border-color: transparent; }
.ab-route__stops { align-items: stretch; }
.ab-stop { grid-template-rows: auto auto 1fr; }
@media (max-width: 1023px) {
  .ab-route__stops { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .ab-route__stops::before { display: none; }
}
@media (max-width: 699px) {
  .ab-route__head { justify-items: start; text-align: left; }
  .ab-route__stops { grid-template-columns: 1fr; row-gap: 22px; padding-left: 0; }
  .ab-route__stops::before { display: block; left: 25px; right: auto; top: 30px; bottom: 30px; border-top: 0; border-left: 2px dashed rgba(119,57,253,.4); }
  .ab-stop { grid-template-columns: 52px 1fr; grid-template-rows: auto auto; justify-items: start; column-gap: 16px; row-gap: 8px; text-align: left; }
  .ab-stop__dot { grid-row: 1 / span 2; grid-column: 1; align-self: start; }
  .ab-stop__kind { grid-column: 2; }
  .ab-stop__card { grid-column: 2; }
}
@media (min-width: 1024px) { .ab-route__stops::after { display: block; top: 43px; } }
.ab-stop__card { align-content: start; } .ab-stop--key .ab-stop__card { align-content: center; }

/* ---------- our journey: chapter cards that stack as you scroll ---------- */
.ab-chapters { padding-block: 0 clamp(96px, 11vw, 168px); }
.ab-chapters__head { margin-bottom: clamp(40px, 5vw, 64px); }
.ab-chapters__head .eyebrow { margin-bottom: 18px; }
.ab-chapters__stack { display: grid; gap: clamp(48px, 6vw, 96px); padding-bottom: 24px; }
.ab-chapter { position: sticky; top: calc(var(--header-h) + 24px + var(--i) * 22px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; min-height: min(70vh, 560px); padding: clamp(32px, 4vw, 64px); border-radius: var(--r-xl); background: var(--c-white); border: 1px solid var(--line); box-shadow: 0 -12px 40px rgba(36,14,71,.08); }
.ab-chapter__num { display: inline-block; margin-bottom: 18px; padding: 6px 12px; border-radius: 999px; background: var(--tint-purple); color: var(--c-purple); font-size: 0.75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ab-chapter h3 { font-family: var(--f-display); font-size: clamp(2rem, 1.3rem + 2vw, 3.25rem); font-weight: 700; line-height: 1.05; margin-bottom: 20px; }
.ab-chapter__copy p { color: var(--ink-2); font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.6; max-width: 46ch; }
.ab-chapter__photo { margin: 0; height: 100%; min-height: 320px; border-radius: var(--r-lg); overflow: hidden; }
.ab-chapter__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 20% 50%; }
.ab-chapter--two { grid-template-columns: 1fr; justify-items: center; align-content: center; text-align: center; background: var(--c-purple); border-color: transparent; }
.ab-chapter--two .ab-chapter__num { background: rgba(255,255,255,.16); color: #fff; }
.ab-chapter__quote { max-width: 18ch; font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem); line-height: 1.08; color: #fff; }
.ab-chapter__quote span { color: var(--c-mint); }
.ab-chapter--three { background: var(--aud-companies-soft); border-color: transparent; }
.ab-chapter--three .ab-chapter__num { background: var(--c-white); }
.ab-chapter__ui { display: grid; place-items: center; }
.ab-chapter__ui .pcard { width: min(100%, 440px); }
.ab-chapter__ui .pcard__head img { border-radius: 10px; }
@media (max-width: 899px) {
  .ab-chapter { position: relative; top: auto; grid-template-columns: 1fr; min-height: 0; }
  .ab-chapter__photo { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
  .ab-chapters__stack { gap: 16px; }
}
@media (max-width: 699px) { .ab-chapter { padding: 26px 18px; gap: 24px; } .ab-chapter__ui .rows .pill { display: none; } .ab-chapter__ui .rows li { grid-template-columns: auto 1fr; } }

/* ---------- our journey: then → now, the quote bridges the two ---------- */
.ab-tn { padding-block: 0 clamp(96px, 11vw, 168px); }
.ab-tn__head { display: grid; justify-items: center; text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.ab-tn__head .eyebrow { margin-bottom: 18px; }
.ab-tn__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ab-tn__side { display: grid; grid-template-rows: auto auto 1fr auto; gap: 18px; padding: clamp(28px, 3.4vw, 52px); border-radius: var(--r-xl); }
.ab-tn__side--then { background: var(--c-white); border: 1px solid var(--line); }
.ab-tn__side--now { background: var(--c-deep); color: var(--on-dark); }
.ab-tn__label { justify-self: start; padding: 6px 14px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ab-tn__side--then .ab-tn__label { background: rgba(36,14,71,.06); color: var(--ink-2); }
.ab-tn__side--now .ab-tn__label { background: rgba(92,212,177,.16); color: var(--c-mint); }
.ab-tn__side h3 { font-family: var(--f-display); font-size: clamp(2rem, 1.3rem + 2vw, 3.25rem); font-weight: 700; line-height: 1.05; }
.ab-tn__side--now h3 { color: var(--c-cream); }
.ab-tn__side p { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); max-width: 48ch; }
.ab-tn__side--now p { color: var(--on-dark-2); }
.ab-tn__photo { margin: 0; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; filter: saturate(.85); }
.ab-tn__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 20% 50%; }
.ab-tn__ui { display: grid; place-items: center; align-content: center; padding: clamp(16px, 2vw, 28px); border-radius: var(--r-lg); background: rgba(252,248,244,.06); }
.ab-tn__ui .pcard { width: min(100%, 400px); box-shadow: none; }
.ab-tn__ui .pcard__head img { border-radius: 10px; }
/* the bridge: the quote sits on the seam between then and now */
.ab-tn__bridge { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(300px, 26%); margin: 0; padding: 24px 24px 26px; border-radius: 24px; background: var(--c-purple); color: #fff; box-shadow: 0 24px 60px rgba(119,57,253,.35); text-align: center; }
.ab-tn__bridge p { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(1.25rem, 0.95rem + 0.8vw, 1.625rem); line-height: 1.2; }
.ab-tn__bridge p span { display: block; margin-top: 6px; color: var(--c-mint); }
.ab-tn__arrow { width: 40px; height: 40px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); }
.ab-tn__arrow .icon { width: 18px; height: 18px; }
@media (max-width: 899px) {
  .ab-tn__grid { grid-template-columns: 1fr; }
  .ab-tn__bridge { position: relative; left: auto; top: auto; transform: none; width: auto; margin: -36px 16px; }
  .ab-tn__arrow .icon { transform: rotate(90deg); }
  .ab-tn__side--now { padding-top: 64px; }
  .ab-tn__side--then { padding-bottom: 64px; }
}
@media (max-width: 699px) {
  .ab-tn__head { justify-items: start; text-align: left; }
  .ab-tn__side { padding: 24px 18px; }
  .ab-tn__side--now { padding-top: 60px; }
  .ab-tn__side--then { padding-bottom: 60px; }
  .ab-tn__ui .rows .pill { display: none; }
  .ab-tn__ui .rows li { grid-template-columns: auto 1fr; }
}
.ab-tn__ui .pcard { color: var(--ink); }
@media (min-width: 900px) {
  .ab-tn__bridge { width: 230px; padding: 20px 18px 22px; }
  .ab-tn__side--then { padding-right: 140px; }
  .ab-tn__side--now { padding-left: 140px; }
}

/* ---------- our journey v4: text left, people photo + "old way" card ---------- */
.ab-story { padding-block: clamp(96px, 11vw, 168px); }
.ab-story__row { display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 6.4fr); gap: clamp(40px, 6vw, 112px); align-items: center; }
.ab-story__copy .eyebrow { margin-bottom: 18px; }
.ab-story__copy .h2 { margin-bottom: 24px; }
.ab-story__copy .body { font-size: 1.125rem; }
.ab-story__visual { position: relative; padding: 0 0 56px 56px; }
.ab-story__photo { margin: 0; aspect-ratio: 3 / 2; border-radius: var(--r-xl); overflow: hidden; background: #E5DDD3; }
.ab-story__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 40%; }
.ab-oldway { position: absolute; left: 0; bottom: 0; width: min(300px, 52%); padding: 16px; display: grid; gap: 10px; background: var(--c-white); border-radius: 18px; box-shadow: var(--shadow-lg); font-size: 0.875rem; line-height: 1.35; }
.ab-oldway__head { display: grid; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ab-oldway__head b { font-family: var(--f-display); font-size: 1rem; font-weight: 600; }
.ab-oldway__head small { color: var(--ink-2); font-size: 0.75rem; }
.ab-oldway ul { display: grid; gap: 6px; }
.ab-oldway li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; color: var(--ink-2); font-weight: 560; }
.ab-oldway li .ico { width: 30px; height: 30px; background: var(--c-cream); color: var(--ink-3); }
.ab-oldway li .ico .icon { width: 15px; height: 15px; }
.ab-oldway li b { font-family: var(--f-display); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ab-story__chip { position: absolute; right: clamp(12px, 2vw, 24px); top: clamp(12px, 2vw, 24px); display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--c-white); box-shadow: var(--shadow-lg); font-size: 0.875rem; font-weight: 600; }
.ab-story__chip .icon { width: 16px; height: 16px; color: #C2410C; }
/* the turn: mint quote, centered, no background */
.ab-story__turn { display: grid; justify-items: center; text-align: center; margin-top: clamp(96px, 11vw, 160px); }
.ab-story__quote { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(2.25rem, 1.1rem + 3.8vw, 4.5rem); line-height: 1.08; color: #5CD4B1; }
.ab-story__after { max-width: 56ch; margin-top: clamp(28px, 3vw, 40px); font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.6; color: var(--ink-2); }

/* ---------- what we built v2: tilted platform + tags, text right ---------- */
.ab-built2 { padding-bottom: clamp(48px, 6vw, 80px); }
.ab-built2__row { display: grid; grid-template-columns: minmax(0, 6.4fr) minmax(0, 4.6fr); gap: clamp(40px, 6vw, 112px); align-items: center; }
.ab-built2__copy { text-align: right; justify-items: end; display: grid; }
.ab-built2__copy .h2 { margin-bottom: 24px; }
.ab-built2__copy .body { font-size: 1.125rem; margin-left: auto; }
.ab-built2__copy .body + .body { margin-top: 16px; }
.ab-built2__visual { position: relative; padding: clamp(48px, 5vw, 72px) clamp(28px, 4vw, 56px); border-radius: var(--r-xl); background: radial-gradient(120% 120% at 0% 100%, var(--aud-companies-soft) 0%, #F7F2FF 60%, var(--c-cream) 100%); }
.ab-built2__tilt { transform: perspective(1600px) rotateY(10deg) rotateX(4deg) rotate(-1.5deg); transform-origin: 60% 50%; }
.ab-built2__tilt .eng { border-radius: var(--r-md); box-shadow: 0 30px 70px rgba(36,14,71,.18); }
.ab-built2__tilt .eng__search { grid-template-columns: 1fr 1fr auto; }
.ab-built2__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 16px 18px; }
.ab-built2__grid .rw-card img { aspect-ratio: 4 / 3; }
.ab-built2__grid .rw-card > div { padding: 10px 12px 12px; }
.ab-tag { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-weight: 650; font-size: 0.9375rem; color: var(--c-deep); box-shadow: var(--shadow-lg); white-space: nowrap; }
.ab-tag .icon { width: 16px; height: 16px; }
.ab-tag--mint { left: -14px; top: 22px; background: #5CD4B1; transform: rotate(-4deg); }
.ab-tag--lavender { right: -10px; top: 42%; background: #C9B3FF; transform: rotate(3deg); }
.ab-tag--pink { left: 22%; bottom: -18px; background: #FAA6FF; transform: rotate(-2deg); }
.ab-page .audience { padding-top: clamp(48px, 6vw, 80px); }

@media (max-width: 899px) {
  .ab-story__row, .ab-built2__row { grid-template-columns: 1fr; }
  .ab-built2__copy { order: -1; text-align: left; justify-items: start; }
  .ab-built2__copy .body { margin-left: 0; }
  .ab-built2__tilt { transform: none; }
}
@media (max-width: 699px) {
  .ab-story__visual { padding: 0; display: grid; }
  .ab-oldway { position: relative; width: auto; margin: -40px 12px 0; }
  .ab-story__chip { font-size: 0.8125rem; }
  .ab-built2__visual { padding: 44px 12px 40px; }
  .ab-built2__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-built2__grid .rw-card:nth-child(3) { display: none; }
  .ab-built2__grid .rw-card { grid-template-columns: 1fr; }
  .ab-built2__grid .rw-card img { aspect-ratio: 4 / 3; height: auto; }
  .ab-built2__tilt .eng__search { grid-template-columns: 1fr auto; }
  .ab-tag { font-size: 0.8125rem; padding: 8px 12px; }
  .ab-tag--mint { left: 8px; top: 10px; }
  .ab-tag--lavender { right: 8px; top: auto; bottom: 46%; }
  .ab-tag--pink { left: 12px; bottom: 10px; }
}
.ab-story__quote { color: var(--c-purple); }

/* ---------- swap sides: journey (visual left, text right), built (text left, visual right) ---------- */
@media (min-width: 900px) {
  .ab-story__row { grid-template-columns: minmax(0, 6.4fr) minmax(0, 4.6fr); }
  .ab-story__visual { order: -1; padding: 0 56px 56px 0; }
  .ab-oldway { left: auto; right: 0; }
  .ab-story__chip { right: auto; left: clamp(12px, 2vw, 24px); }
  .ab-built2__row { grid-template-columns: minmax(0, 4.6fr) minmax(0, 6.4fr); }
  .ab-built2__copy { order: -1; text-align: left; justify-items: start; }
  .ab-built2__copy .body { margin-left: 0; }
  .ab-built2__tilt { transform: perspective(1600px) rotateY(-10deg) rotateX(4deg) rotate(1.5deg); transform-origin: 40% 50%; }
}

/* ---------- what we believe v2: deep purple, centered, three phones ---------- */
.ab-believe2 { padding-inline: clamp(8px, 1.4vw, 20px); }
.ab-believe2__panel { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--c-deep); padding-top: clamp(80px, 9vw, 136px); }
.ab-believe2__head { display: grid; justify-items: center; text-align: center; }
.ab-believe2__head .eyebrow { margin-bottom: 18px; }
.ab-believe2__head .h2 { color: var(--c-cream); max-width: 20ch; margin-bottom: 22px; }
.ab-believe2__text { max-width: 52ch; font-size: 1.125rem; line-height: 1.6; color: var(--on-dark-2); }
.ab-believe2__phones { display: flex; justify-content: center; align-items: flex-start; margin-top: clamp(48px, 6vw, 80px); margin-bottom: -120px; }
.ab-ph { box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.ab-ph:not(.wlp--main) { margin-top: 60px; }
.ab-ph .wlp__brand { background: var(--tint-purple); }
.ab-ph__mark { width: 26px; height: 26px; border-radius: 8px; }
.ab-ph__online { width: 9px; height: 9px; margin-left: auto; border-radius: 50%; background: var(--c-mint); box-shadow: 0 0 0 3px rgba(92,212,177,.25); }
.ab-ph__date { margin-left: auto; color: var(--ink-2); font-size: 0.75rem; }
.ab-chat { display: grid; gap: 8px; padding: 14px 4px 150px; }
.ab-chat p { max-width: 86%; padding: 10px 12px; border-radius: 14px; font-size: 0.8125rem; line-height: 1.35; }
.ab-chat__in { justify-self: start; background: var(--c-cream); border-bottom-left-radius: 4px; }
.ab-chat__out { justify-self: end; background: var(--c-purple); color: #fff; border-bottom-right-radius: 4px; }
.ab-today { display: grid; gap: 12px; padding: 14px 4px 140px; }
.ab-today__hi { display: grid; }
.ab-today__hi small { color: var(--ink-2); font-size: 0.75rem; }
.ab-today__hi b { font-family: var(--f-display); font-size: 1.25rem; font-weight: 700; }
.ab-today__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ab-today__kpis span { display: grid; padding: 10px 12px; border-radius: 12px; background: var(--c-cream); }
.ab-today__kpis b { font-family: var(--f-display); font-size: 1.375rem; font-weight: 700; }
.ab-today__kpis small { color: var(--ink-2); font-size: 0.75rem; }
.ab-today__list { display: grid; gap: 6px; }
.ab-today__list li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; border: 1px solid var(--line); font-weight: 600; font-size: 0.8125rem; }
.ab-today__list li > span:last-child { display: grid; }
.ab-today__list small { color: var(--ink-2); font-weight: 400; font-size: 0.75rem; }
.ab-today__ok { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--c-mint); color: var(--c-deep); }
.ab-today__ok .icon { width: 14px; height: 14px; stroke-width: 2.6; }
.ab-expert { display: grid; justify-items: center; gap: 4px; padding: 24px 8px 160px; text-align: center; }
.ab-expert__avatar { width: 64px; height: 64px; margin-bottom: 8px; border-radius: 50%; display: grid; place-items: center; background: var(--aud-agents-soft); color: #0B6B4F; font-weight: 700; font-size: 1.125rem; box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(92,212,177,.5); }
.ab-expert b { font-family: var(--f-display); font-size: 1.0625rem; font-weight: 700; }
.ab-expert small { color: var(--ink-2); font-size: 0.75rem; }
.ab-expert__btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 9px 16px; border-radius: 10px; background: var(--c-purple); color: #fff; font-weight: 650; font-size: 0.8125rem; }
.ab-expert__btn .icon { width: 15px; height: 15px; }
@media (max-width: 699px) {
  .ab-believe2__head { justify-items: start; text-align: left; }
  .ab-believe2__phones { margin-bottom: -100px; }
}
/* CTA: no panel, only the lower brand arc, faded like the homepage hero */
.ab-cta__panel { background: none; border: 0; overflow: visible; padding-inline: 0; }
.ab-cta { overflow-x: clip; }
.ab-cta__arcs { top: auto; bottom: -10%; right: -8%; height: auto; width: min(980px, 85%); opacity: .14; }
@media (max-width: 899px) { .ab-cta__arcs { width: 140%; right: -60%; bottom: -6%; opacity: .14; } }
.ab-built2__eyebrow { margin-bottom: 18px; }
.ab-built2__visual { background: var(--aud-companies-soft); }
.ab-nowrap { white-space: nowrap; }
@media (min-width: 900px) { .ab-built2__row { grid-template-columns: minmax(0, 5.2fr) minmax(0, 5.8fr); } .ab-built2__copy .h2 { font-size: clamp(2.25rem, 1.4rem + 2vw, 3.25rem); } }

/* ---------- what we believe v3: shorter, people photos with a small UI chip ---------- */
.ab-believe2__panel { padding: clamp(56px, 6vw, 88px) 0 clamp(48px, 5vw, 72px); }
.ab-believe2__head .h2 { font-size: clamp(2rem, 1.3rem + 2vw, 3.25rem); margin-bottom: 18px; }
.ab-believe2__text { font-size: 1.0625rem; }
.ab-people { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 16px; align-items: center; margin-top: clamp(36px, 4vw, 56px); }
.ab-person { position: relative; margin: 0; aspect-ratio: 4 / 3.4; border-radius: var(--r-lg); overflow: hidden; background: #3a2a5a; }
.ab-person--main { aspect-ratio: 4 / 3.9; }
.ab-person img { width: 100%; height: 100%; object-fit: cover; }
.ab-person:nth-child(1) img { object-position: 55% 40%; }
.ab-person:nth-child(2) img { object-position: 40% 30%; }
.ab-person:nth-child(3) img { object-position: 35% 40%; }
.ab-person__chip { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px; background: var(--c-white); color: var(--ink); box-shadow: var(--shadow-lg); font-size: 0.8125rem; line-height: 1.3; }
.ab-person__chip > span:last-child { display: grid; }
.ab-person__chip b { font-weight: 650; }
.ab-person__chip small { color: var(--ink-2); font-size: 0.75rem; }
.ab-person__dot { width: 30px; height: 30px; border-radius: 9px; background: var(--tint-purple) url("/assets/brand/logomark-tile-purple.svg?v=2") center / 100% no-repeat; position: relative; }
.ab-person__dot::after { content: ""; position: absolute; right: -3px; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-mint); box-shadow: 0 0 0 2px #fff; }
.ab-person__ok { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--c-mint); color: var(--c-deep); }
.ab-person__ok .icon { width: 16px; height: 16px; stroke-width: 2.6; }
.ab-person__avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--aud-agents-soft); color: #0B6B4F; font-weight: 700; font-size: 0.6875rem; }
@media (max-width: 899px) {
  .ab-people { grid-template-columns: 1fr 1fr; }
  .ab-person--main { grid-column: 1 / -1; order: -1; aspect-ratio: 16 / 10; }
  .ab-person { aspect-ratio: 1; }
}
@media (max-width: 699px) {
  .ab-people { grid-template-columns: 1fr; }
  .ab-person:not(.ab-person--main) { display: none; }
  .ab-person--main { aspect-ratio: 4 / 3.4; }
}
@media (min-width: 900px) { .ab-person { aspect-ratio: 16 / 11; } .ab-person--main { aspect-ratio: 16 / 12.5; } .ab-people { margin-top: 36px; } .ab-believe2__panel { padding-top: 64px; padding-bottom: 48px; } }
/* tighter gap between "What guides us" and the CTA */
.ab-values { padding-bottom: clamp(40px, 4vw, 64px); }
.ab-cta__panel { padding-top: clamp(32px, 4vw, 56px); }