/* ==========================================================================
   FORGYEN — About Us page (/about/)
   Builds on main.css tokens. Each story section is scoped to its own block
   (.ab-hero, .ab-exp, …); new sections are added below, in page order.
   Logical properties throughout for a future RTL page.
   Structure: 1 Page · 2 Opening hero · 3 Business Context visual
              4 Our Experience (02) · 4b Why We Built FORGYEN (03)
              4c Behind the Name (04) · 4d Our Philosophy (05)
              4e From Belief to Results (06) · 4f What We're Building (07)
              5 Footer join · 6 Responsive
   ========================================================================== */

/* 1. Page ---------------------------------------------------------------- */
.ab-page { background: #FBF8F3; }
.ab { display: block; overflow-x: clip; }        /* decorative layers may extend past the edges */
@media (prefers-reduced-motion: no-preference) {
  html:has(body.ab-page) { scroll-behavior: smooth; }   /* "Discover Our Story" */
}
.ab-accent { color: #B8692E; }                 /* restrained copper on ivory (≥4.5:1 at body sizes) */

/* 2. Opening hero -------------------------------------------------------- */
.ab-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: calc(var(--fg-header-h) + clamp(32px, 3.6vw, 56px)) clamp(56px, 5.6vw, 84px);
  background:
    radial-gradient(46% 60% at 78% 40%, rgba(255, 255, 255, 0.75), transparent 72%),
    linear-gradient(180deg, #FBF8F2 0%, #FAF6F0 55%, #F6F0E8 100%);
}
.ab-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
}
.ab-hero__copy { position: relative; z-index: 1; min-width: 0; }

.ab-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(24px, 2.6vw, 36px);
  padding: 9px 20px 9px 18px;
  border: 1px solid rgba(11, 19, 32, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 24px -18px rgba(11, 19, 32, 0.35);
  color: var(--fg-navy-950);
  font-size: 0.9375rem;
  font-weight: 500;
}
.ab-eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-copper); }

.ab-hero__title {
  max-width: 9.4em;                             /* "We built the / marketing company / we wished we’d / worked with." */
  margin: 0;
  color: var(--fg-navy-950);
  font-size: clamp(2.375rem, 1rem + 3vw, 3.75rem); /* 38 → 60 */
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.ab-hero__lead {
  max-width: 31em;
  margin: clamp(22px, 2.4vw, 34px) 0 0;
  color: #4A5468;
  font-size: clamp(1.0625rem, 0.92rem + 0.42vw, 1.3125rem);   /* 17 → 21 */
  line-height: 1.55;
}

.ab-scroll {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-block-start: clamp(30px, 3.4vw, 48px);
  color: var(--fg-navy-950);
  font-size: 1.1875rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 999px;
}
.ab-scroll__ring {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1.5px solid var(--fg-copper);
  border-radius: 50%;
  color: var(--fg-copper);
  transition: background-color var(--fg-dur-micro) var(--fg-ease), color var(--fg-dur-micro) var(--fg-ease);
}
.ab-scroll__ring svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--fg-dur-micro) var(--fg-ease);
}
.ab-scroll:hover .ab-scroll__ring { background: var(--fg-copper); color: #FFFFFF; }
.ab-scroll:hover .ab-scroll__ring svg { transform: translateY(3px); }
.ab-scroll:focus-visible { outline: 2px solid var(--fg-focus); outline-offset: 6px; }

/* 3. Business Context visual -------------------------------------------- */
/* The approved artwork, isolated from the design; its edges fade into the
   hero background so no crop line shows. */
.ab-hero__visual {
  margin: 0;
  margin-inline-end: calc(-1 * clamp(0px, 3.4vw, 56px));   /* sits toward the edge, as designed */
}
.ab-hero__visual img {
  display: block;
  width: 100%;
  height: auto;
  /* feather all four edges (two gradients, intersected) */
  -webkit-mask:
    linear-gradient(90deg, transparent 0, #000 9%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(90deg, transparent 0, #000 9%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%);
  mask-composite: intersect;
}

/* 4. Our Experience (Section 02) --------------------------------------- */
.ab-exp {
  position: relative;
  isolation: isolate;
  overflow: clip;
  scroll-margin-top: var(--fg-header-h);
  padding-block: clamp(48px, 5vw, 76px) clamp(64px, 6vw, 96px);
  /* picks up the hero's lower tone and settles into a lighter ivory */
  background:
    radial-gradient(70% 55% at 80% 70%, rgba(255, 255, 255, 0.7), transparent 72%),
    linear-gradient(180deg, #F6F0E8 0%, #F9F5EF 22%, #FBF8F3 100%);
}
/* one quiet arc at the top, echoing the hero's softness (no band, no overlap) */
.ab-exp::before {
  content: "";
  position: absolute;
  inset-inline: -12%;
  top: -1px;
  height: clamp(60px, 7vw, 110px);
  z-index: -1;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  border-bottom: 1px solid rgba(184, 115, 51, 0.12);
  background: linear-gradient(180deg, rgba(246, 240, 232, 0.9), rgba(246, 240, 232, 0));
}

.ab-exp__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.ab-exp__title {
  max-width: 14.6em;
  margin: 0;
  color: var(--fg-navy-950);
  font-size: clamp(2.125rem, 0.9rem + 2.7vw, 3.375rem);   /* 34 → 54 */
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.038em;
}
.ab-exp__title .ab-accent { display: block; }   /* "to be the client." on its own line, as designed */
.ab-exp__copy { padding-block-start: clamp(4px, 4.4vw, 70px); max-width: 33em; }
.ab-exp__copy p {
  margin: 0 0 1.1em;
  color: #4A5468;
  font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.1875rem);   /* 17 → 19 */
  line-height: 1.58;
}
.ab-exp__copy p:last-child { margin-bottom: 0; }

/* the stage: three activity panels behind, the realization in front */
.ab-exp__stage {
  position: relative;
  container-type: inline-size;
  margin-block-start: clamp(28px, 3vw, 44px);
  padding-block-start: 13.4cqi;               /* the realization overlaps the panels' lower half */
}
.ab-panels {
  position: absolute;
  inset: 0 -3.5cqi auto;
  height: 22cqi;
  font-size: 1.24cqi;                         /* panel internals are sized in em */
  pointer-events: none;
}
.ab-panel {
  position: absolute;
  overflow: hidden;
  padding: 1.6em 1.8em;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 1.1em;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF9F6 100%);
  box-shadow:
    0 0 0 1px rgba(11, 19, 32, 0.04),
    0 1.4em 3em -1.6em rgba(11, 19, 32, 0.28),
    0 0.3em 0.8em -0.4em rgba(11, 19, 32, 0.08);
}
.ab-panel--campaigns  { left: 0;     top: 2.6cqi; width: 41%; height: 19cqi; rotate: -3.2deg; }
.ab-panel--platforms  { left: 43.5%; top: 0.6cqi; width: 34%; height: 18cqi; rotate: 2.4deg; }
.ab-panel--activities { left: 78.4%; top: 3cqi;   width: 21.6%; height: 17cqi; rotate: 4.2deg; }

.ab-panel__head {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin: 0 0 1.2em;
  color: var(--fg-navy-950);
  font-size: 1.32em;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.ab-panel__dot { width: 0.5em; height: 0.5em; flex: none; border-radius: 50%; background: var(--fg-copper); }
.ab-panel__more {
  margin-inline-start: auto;
  width: 1.2em;
  height: 0.25em;
  background: radial-gradient(circle, #C2C7CF 45%, transparent 50%) 0 0 / 0.4em 0.25em repeat-x;
}
.ab-panel__body { display: flex; gap: 1.4em; align-items: flex-start; }
.ab-panel__col { display: flex; flex-direction: column; gap: 0.7em; flex: 1 1 0; min-width: 0; padding-top: 0.2em; }
.ab-line { display: block; height: 0.55em; border-radius: 1em; background: #E7E9EC; }
.ab-line--w90 { width: 90%; } .ab-line--w80 { width: 80%; } .ab-line--w70 { width: 70%; }
.ab-line--w65 { width: 65%; } .ab-line--w60 { width: 60%; } .ab-line--w50 { width: 50%; }

/* Campaigns: copy lines + a small post, and a faceted copper visual */
.ab-mini {
  display: flex;
  gap: 0.9em;
  align-items: center;
  margin-top: 1.2em;
  padding: 0.9em;
  border-radius: 0.7em;
  background: #F6F3EF;
  box-shadow: inset 0 0 0 1px rgba(11, 19, 32, 0.04);
}
.ab-mini__thumb { width: 3.6em; height: 3.6em; flex: none; border-radius: 0.35em; }
.ab-mini__lines { display: flex; flex-direction: column; gap: 0.6em; flex: 1; }
.ab-copper {
  flex: 1.15 1 0;
  height: 10.4em;
  border-radius: 0.6em;
  rotate: -4deg;
  translate: 0.4em -0.8em;
  box-shadow: 0 1em 2em -1.1em rgba(126, 74, 31, 0.6);
}

/* Platforms: three abstract platform tiles */
.ab-tile {
  display: grid;
  place-items: center;
  width: 4.6em;
  height: 4.6em;
  flex: none;
  border-radius: 0.8em;
  box-shadow: 0 0.6em 1.2em -0.7em rgba(11, 19, 32, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.ab-tile svg { width: 52%; height: 52%; }
.ab-tile--navy  { background: linear-gradient(160deg, #26344B, #111B2C); }
.ab-tile--navy svg  { fill: #DADFE6; }
.ab-tile--steel { background: linear-gradient(160deg, #6F8CAD, #46617F); }
.ab-tile--steel svg { fill: #D7E1EC; }
.ab-tile--light { background: linear-gradient(160deg, #EDEEEF, #DADCDF); }
.ab-tile--light svg { fill: #1B2436; }
.ab-panel__col--side { padding-top: 1.2em; }
.ab-line--foot { width: 72%; margin-top: 1.6em; }

/* Activities: a checklist with one copper "done" item */
.ab-checks { display: flex; flex-direction: column; gap: 1.1em; margin: 0; padding: 0; list-style: none; }
.ab-checks li { display: flex; align-items: center; gap: 1em; }
.ab-check {
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  flex: none;
  border: 1.5px solid #C9CDD3;
  border-radius: 0.35em;
  background: #FFFFFF;
}
.ab-check.is-done { border-color: transparent; background: linear-gradient(160deg, #CF8A52, #A65E2B); }
.ab-check svg { width: 1.1em; height: 1.1em; fill: none; stroke: #FFFFFF; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ab-checks .ab-line { flex: 1; }

/* the realization: the section's focal point */
.ab-real {
  position: relative;
  z-index: 1;
  width: 75%;
  margin-inline: auto;
  padding: clamp(28px, 3vw, 44px) clamp(24px, 4vw, 64px) clamp(32px, 3.4vw, 50px);
  border: 1.5px solid rgba(201, 130, 69, 0.75);
  border-radius: clamp(18px, 2vw, 28px);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(40, 74, 99, 0.35), transparent 70%),
    linear-gradient(180deg, #16243A 0%, #0F1A2B 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 34px 60px -30px rgba(11, 19, 32, 0.65),
    0 12px 24px -16px rgba(11, 19, 32, 0.4);
  text-align: center;
}
.ab-real__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(10px, 1.2vw, 18px);
  color: #D9965A;
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.1875rem);
  font-weight: 600;
}
.ab-real__dot { width: 9px; height: 9px; border-radius: 50%; background: #C98245; }
.ab-real__question {
  margin: 0;
  color: #F7F4EF;
  font-size: clamp(2rem, 0.9rem + 3vw, 3.625rem);     /* 32 → 58 */
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.038em;
  text-wrap: balance;
}
.ab-real__accent { display: block; color: #CF8A50; }

.ab-exp__close {
  margin: clamp(28px, 3vw, 44px) auto 0;
  color: var(--fg-navy-950);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem);
  font-weight: 500;
  text-align: center;
  text-wrap: balance;
}

/* 4b. Why We Built FORGYEN (Section 03) --------------------------------- */
/* Deep navy, entered and left through two quiet arcs: rounding the
   section's own corners reveals the page ivory behind it, so there are no
   extra layers, masks or overlaps. */
.ab-why {
  --ab-why-arc: clamp(36px, 5vw, 76px);
  position: relative;
  isolation: isolate;
  overflow: clip;
  scroll-margin-top: var(--fg-header-h);
  padding-block: calc(var(--ab-why-arc) + clamp(28px, 3vw, 44px)) calc(var(--ab-why-arc) + clamp(36px, 4vw, 60px));
  border-radius: 50% 50% 50% 50% / var(--ab-why-arc) var(--ab-why-arc) var(--ab-why-arc) var(--ab-why-arc);
  background:
    radial-gradient(70% 34% at 50% 100%, rgba(40, 74, 99, 0.5), transparent 75%),
    radial-gradient(55% 30% at 50% 0%, rgba(40, 74, 99, 0.32), transparent 72%),
    linear-gradient(180deg, #0B1626 0%, #08121F 40%, #07101C 70%, #0A1828 100%);
  color: #F4F1EC;
}
.ab-why__head { text-align: center; }
.ab-eyebrow--dark {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
  color: #DCE1E8;
}
.ab-why__title {
  max-width: 21em;
  margin: 0 auto;
  color: #F6F3EE;
  font-size: clamp(2rem, 0.9rem + 2.7vw, 3.375rem);       /* 32 → 54 */
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.ab-why__accent { color: #D08A4F; }
.ab-why__text {
  max-width: 50em;
  margin: clamp(14px, 1.4vw, 20px) auto 0;
  color: #C4CCD7;
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.1875rem);
  line-height: 1.55;
}
.ab-why__text + .ab-why__text { margin-top: 10px; }

/* the strategic strip: the approved artwork, edges feathered into the navy */
.ab-why__strip { margin-block-start: clamp(20px, 2.4vw, 36px); }
.ab-why__strip img {
  display: block;
  width: min(100%, 1800px);
  height: auto;
  margin-inline: auto;
  -webkit-mask:
    linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect;
}

/* principles: three columns under their stages (aligned to the strip's
   proportions: the strip is the full section width) */
.ab-why__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2.2%;
  margin: 0;
  padding: 0 3.5% 0 7.4%;
  list-style: none;
}
.ab-step__art { display: none; }
.ab-step__text { position: relative; padding-block-start: clamp(64px, 5.6vw, 84px); max-width: 26em; }
/* a fine copper connector rising toward its stage */
.ab-step__text::before {
  content: "";
  position: absolute;
  top: 6px;
  inset-inline-start: 36%;
  width: 1px;
  height: clamp(40px, 3.6vw, 54px);
  background: linear-gradient(180deg, #C98245, rgba(201, 130, 69, 0.85));
}
.ab-step__text::after {
  content: "";
  position: absolute;
  top: 2px;
  inset-inline-start: calc(36% - 2.5px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C98245;
}
.ab-step__num {
  display: block;
  color: #D08A4F;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.1875rem);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ab-step__title {
  margin: 6px 0 0;
  color: #F6F3EE;
  font-size: clamp(1.375rem, 1.05rem + 0.75vw, 1.875rem);  /* 22 → 30 */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.ab-step__body {
  margin: 10px 0 0;
  color: #BAC3CF;
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.1875rem);
  line-height: 1.55;
}

/* 4c. Behind the Name (Section 04) -------------------------------------- */
.ab-name {
  position: relative;
  overflow: clip;
  scroll-margin-top: var(--fg-header-h);
  padding-block: clamp(40px, 4.6vw, 72px) clamp(64px, 6.4vw, 100px);
  /* settles on the artwork's own ivory (#F5F1EC) so the ribbon has no visible frame */
  background: linear-gradient(180deg, #FBF8F3 0%, #F6F2ED 22%, #F5F1EC 100%);
}
.ab-name__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
}
.ab-name__visual {
  position: relative;
  margin: 0;
  margin-inline-start: calc(-1 * clamp(0px, 3vw, 48px));
}
.ab-name__visual img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask:
    linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}
/* labels sit on the markers drawn in the artwork */
.ab-name__label {
  position: absolute;
  translate: -50% 0;
  padding-inline-start: 0.34em;                 /* balances the trailing letter-spacing */
  color: #1B2436;
  font-size: clamp(0.6875rem, 0.55rem + 0.3vw, 0.9375rem);
  font-weight: 600;
  letter-spacing: 0.34em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.ab-name__label--shape      { left: 11.4%; top: 38%; }
.ab-name__label--strengthen { left: 49.2%; top: 3%; }
.ab-name__label--refine     { left: 80.7%; top: 92.2%; }

.ab-name__title {
  margin: 0;
  color: var(--fg-navy-950);
  font-size: clamp(2.125rem, 0.9rem + 2.6vw, 3.5rem);      /* 34 → 56 */
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.ab-name__title .ab-accent { display: block; }
.ab-name__text {
  margin: clamp(18px, 1.8vw, 26px) 0 0;
  color: #2E3B52;
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.3125rem);
  line-height: 1.55;
}
.ab-name__text + .ab-name__text { margin-top: 14px; }
.ab-name__text strong { color: var(--fg-navy-950); font-weight: 800; }
.ab-name__text strong.ab-accent { color: #B8692E; }

/* 4d. Our Philosophy (Section 05) -------------------------------------- */
.ab-phil {
  position: relative;
  overflow: clip;
  scroll-margin-top: var(--fg-header-h);
  padding-block: clamp(8px, 1.4vw, 24px) clamp(56px, 5.6vw, 88px);   /* Section 04 already ends with room */
  /* continues Section 04's ivory; a cool floor tone sits under the machine */
  background:
    radial-gradient(62% 26% at 50% 66%, rgba(196, 203, 214, 0.42), transparent 74%),
    linear-gradient(180deg, #F5F1EC 0%, #FAF7F2 14%, #FCF9F4 60%, #FBF8F3 100%);
}
.ab-phil__head { text-align: center; }
.ab-phil__title {
  margin: 0;
  color: var(--fg-navy-950);
  font-size: clamp(2.25rem, 0.9rem + 3vw, 4rem);           /* 36 → 64 */
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.ab-phil__text {
  margin: clamp(14px, 1.4vw, 20px) auto 0;
  max-width: 48em;
  color: #1B2436;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.375rem);
  line-height: 1.45;
}
.ab-phil__highlight {
  margin: 6px 0 0;
  color: #B8692E;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* the machine and its three annotations (positions are % of the artwork) */
.ab-phil__stage {
  position: relative;
  width: min(1320px, 92vw);
  margin: clamp(20px, 2.4vw, 36px) auto 0;
}
.ab-phil__machine img { display: block; width: 100%; height: auto; }
.ab-phil__label { margin: 0; color: var(--fg-navy-950); }
.ab-phil__label--in {
  position: absolute;
  left: 0;
  top: 3%;
  z-index: 1;
  padding-inline-start: 20px;
}
.ab-phil__label--in::before,
.ab-phil__label--out::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 1px;
  bottom: 0.3em;
  background: #C98245;
}
.ab-phil__label--in::after,
.ab-phil__label--out::after {
  content: "";
  position: absolute;
  inset-inline-start: -3px;
  top: 0.4em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #C98245;
}
.ab-phil__label-title {
  margin: 0;
  font-size: clamp(1.25rem, 0.9rem + 0.9vw, 1.875rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.ab-phil__label-text {
  margin: 10px 0 0;
  color: #4A5468;
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.1875rem);
  line-height: 1.45;
}
.ab-phil__label-text span { display: block; }
.ab-phil__label--out {
  position: absolute;
  left: 78%;
  top: 37%;
  padding: 0.1em 0 2.4em 20px;
  font-size: clamp(1.125rem, 0.85rem + 0.8vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.ab-phil__label--out::before { top: 0.6em; bottom: 0; }
/* process: centred under the press, with a fine marker rising to it */
.ab-phil__label--process {
  position: relative;
  margin-top: clamp(-64px, -4.4vw, -28px);        /* the artwork's transparent floor */
  padding-top: clamp(40px, 4vw, 60px);
  color: #1B2436;
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.1875rem);
  font-weight: 500;
  text-align: center;
  word-spacing: 0.08em;
}
.ab-phil__label--process::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 1px;
  height: clamp(26px, 2.8vw, 42px);
  background: #C98245;
}
.ab-phil__label--process::after {
  content: "";
  position: absolute;
  top: 2px;
  left: calc(50% - 3px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #C98245;
}
.ab-phil__art { position: relative; }
.ab-phil__br { display: inline; }
.ab-phil__close {
  margin-block-start: clamp(28px, 3vw, 44px);
  color: #1B2436;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.375rem);
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}

/* 4e. From Belief to Results (Section 06) ------------------------------ */
/* Deep navy, entered from Section 05's ivory through the same quiet arc as
   Section 03 (rounded top corners over the page ivory). */
.ab-res {
  --ab-arc: clamp(36px, 5vw, 76px);
  position: relative;
  overflow: clip;
  scroll-margin-top: var(--fg-header-h);
  padding-block: calc(var(--ab-arc) + clamp(16px, 2vw, 32px)) clamp(48px, 5vw, 80px);
  border-radius: 50% 50% 0 0 / var(--ab-arc) var(--ab-arc) 0 0;
  background:
    radial-gradient(60% 40% at 85% 10%, rgba(40, 74, 99, 0.28), transparent 72%),
    linear-gradient(180deg, #0D1A2C 0%, #0A1322 30%, #0A1220 100%);
  color: #F4F1EC;
}
.ab-res__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(20px, 2vw, 28px);
  row-gap: clamp(28px, 3vw, 44px);
  align-items: start;
}
.ab-res__intro { padding-block-start: clamp(4px, 1vw, 16px); padding-inline-end: clamp(0px, 3vw, 48px); }
.ab-res__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(16px, 1.6vw, 24px);
  color: #DCE1E8;
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.1875rem);
  font-weight: 500;
}
.ab-res__title {
  margin: 0;
  color: #F6F3EE;
  font-size: clamp(2.125rem, 0.9rem + 2.6vw, 3.5rem);     /* 34 → 56 */
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.035em;
}
.ab-res__accent { color: #D08A4F; }
.ab-res__title .ab-res__accent { display: block; }
.ab-res__text {
  max-width: 34em;
  margin: clamp(16px, 1.6vw, 24px) 0 0;
  color: #D3D9E1;
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.3125rem);
  line-height: 1.5;
}
.ab-res__text + .ab-res__text { margin-top: 14px; }

/* the three projects: #1 shares the top row with the intro, #2 and #3 below */
.ab-res__list { display: contents; list-style: none; }
.ab-res__item { min-width: 0; }
.ab-res__item--1 { grid-column: 2; grid-row: 1; }
.ab-res__cover {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: #E9ECEF;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 60px -36px rgba(0, 0, 0, 0.8);
  transition: transform var(--fg-dur-std) var(--fg-ease), box-shadow var(--fg-dur-std) var(--fg-ease);
}
.ab-res__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-res__item:hover .ab-res__cover { box-shadow: 0 0 0 1px rgba(201, 130, 69, 0.6), 0 34px 64px -34px rgba(0, 0, 0, 0.85); }
@media (prefers-reduced-motion: no-preference) {
  .ab-res__item:hover .ab-res__cover { transform: translateY(-3px); }
}
.ab-res__name {
  margin: clamp(14px, 1.4vw, 20px) 0 0;
  color: #F6F3EE;
  font-size: clamp(1.25rem, 0.95rem + 0.75vw, 1.875rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.ab-res__link,
.ab-res__all { color: #D99A60; }
.ab-res__link .text-link__label::before,
.ab-res__all .text-link__label::before { background: rgba(217, 154, 96, 0.3); }
.ab-res__item:hover .ab-res__link .text-link__label::after { width: 100%; }
.ab-res a:focus-visible { outline: 2px solid #D9965A; outline-offset: 4px; }
.ab-res__all { grid-column: 2; justify-self: end; font-size: clamp(1rem, 0.9rem + 0.35vw, 1.3125rem); }

/* 4f. What We're Building + Discovery CTA (Section 07) ----------------- */
/* Slightly lighter navy than Section 06, separated by a fine arc, and
   settling into the footer's opening navy (#16233A) at the bottom. */
.ab-build {
  position: relative;
  isolation: isolate;
  overflow: clip;
  scroll-margin-top: var(--fg-header-h);
  padding-block: clamp(64px, 6vw, 96px) clamp(16px, 2vw, 32px);   /* the footer adds its own top room */
  background:
    radial-gradient(50% 50% at 82% 40%, rgba(201, 130, 69, 0.07), transparent 70%),
    linear-gradient(180deg, #0A1220 0%, #0C1828 18%, #0E1B2E 60%, #16233A 100%);
  color: #F4F1EC;
}
.ab-build::before {                      /* a fine steel-blue arc marks the new chapter */
  content: "";
  position: absolute;
  inset-inline: -10%;
  top: 0;
  height: clamp(40px, 4vw, 64px);
  z-index: -1;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  border-bottom: 1px solid rgba(110, 140, 175, 0.28);
}
.ab-build__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  column-gap: clamp(16px, 2vw, 32px);
  align-items: center;
}
.ab-build__eyebrow {
  width: fit-content;
  padding: 8px 18px 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}
.ab-build__title {
  margin: 0;
  color: #F6F3EE;
  font-size: clamp(2.25rem, 0.9rem + 3vw, 4rem);          /* 36 → 64 */
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.ab-build__title .ab-res__accent { display: block; }
.ab-build__text {
  max-width: 33em;
  margin: clamp(16px, 1.6vw, 22px) 0 0;
  color: #D3D9E1;
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem);
  line-height: 1.5;
}
.ab-build__text + .ab-build__text { margin-top: 12px; }
.ab-build__visual { margin: 0; margin-inline-end: calc(-1 * clamp(0px, 4vw, 64px)); }
.ab-build__visual img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask:
    linear-gradient(90deg, transparent 0, #000 12%, #000 86%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 12%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(90deg, transparent 0, #000 12%, #000 86%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 12%, #000 82%, transparent 100%);
  mask-composite: intersect;
}

/* the invitation: one quiet bordered surface, copper button */
.ab-cta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  width: min(100%, 980px);
  margin: clamp(-48px, -3vw, -12px) auto 0;
  padding: clamp(26px, 3vw, 40px) clamp(24px, 4vw, 64px);
  border: 1px solid rgba(201, 130, 69, 0.45);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(27, 36, 54, 0.82), rgba(14, 24, 40, 0.9));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px -34px rgba(0, 0, 0, 0.8);
}
.ab-cta__title {
  margin: 0;
  color: #F6F3EE;
  font-size: clamp(1.625rem, 1rem + 1.6vw, 2.625rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.ab-cta__text { margin: 10px 0 0; color: #D3D9E1; font-size: clamp(1rem, 0.92rem + 0.3vw, 1.1875rem); line-height: 1.5; }
.ab-cta__button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 60px;
  padding: 0 30px;
  border-radius: 999px;
  background: linear-gradient(180deg, #D08A4F 0%, #B0642C 60%, #9E5626 100%);
  color: #FFFFFF;
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.1875rem);
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 18px 34px -18px rgba(208, 138, 79, 0.75);
  transition: filter var(--fg-dur-micro) var(--fg-ease);
}
.ab-cta__button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--fg-dur-micro) var(--fg-ease); }
.ab-cta__button:hover { filter: brightness(1.06); }
.ab-cta__button:hover svg { transform: translateX(4px); }
.ab-cta__button:focus-visible { outline: 2px solid #F0C9A2; outline-offset: 4px; }

/* 5. Footer join: Section 07 ends on the footer's own opening navy ----- */

/* 6. Responsive ---------------------------------------------------------- */
@media (max-width: 1023px) {
  /* Section 03: three stages, artwork beside its text, joined by the copper path */
  .ab-why__strip { display: none; }
  .ab-why__steps {
    display: block;
    width: 100%;
    max-width: calc(760px + 2 * var(--fg-gutter));
    margin: clamp(32px, 4vw, 48px) auto 0;
    padding-inline: var(--fg-gutter);
  }
  .ab-step { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); column-gap: clamp(14px, 3vw, 32px); }
  .ab-step__art { display: flex; flex-direction: column; margin-inline-start: calc(-0.4 * var(--fg-gutter)); }
  /* side edges feathered; the outer ends fade, the seams stay sharp so the path is continuous */
  .ab-step__art img {
    display: block; width: 100%; height: auto;
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
  .ab-step:first-child .ab-step__art img {
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%);
    -webkit-mask-composite: source-in;
    mask: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%);
    mask-composite: intersect;
  }
  .ab-step:last-child .ab-step__art img {
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(0deg, transparent 0, #000 14%);
    -webkit-mask-composite: source-in;
    mask: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(0deg, transparent 0, #000 14%);
    mask-composite: intersect;
  }
  /* continues the path drawn in the artwork down to the next stage */
  .ab-step__path {
    flex: 1;
    width: 1.5px;
    margin-inline-start: calc(var(--x) - 0.75px);
    background: #EEC29A;
    box-shadow: 0 0 6px rgba(224, 150, 84, 0.75);
  }
  .ab-step__path--1 { --x: 37.4%; }
  .ab-step__path--2 { --x: 53.3%; }
  .ab-step__text { padding: clamp(8px, 2vw, 20px) 0 clamp(26px, 4vw, 44px); max-width: none; }
  .ab-step__text::before, .ab-step__text::after { display: none; }
  .ab-step__title { margin-top: 4px; }

  /* Section 04: copy first, then the ribbon */
  .ab-name__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 40px); }
  .ab-name__copy { order: -1; max-width: 640px; }
  .ab-name__visual { margin-inline: calc(-0.6 * var(--fg-gutter)); }
}

@media (max-width: 1099px) {
  .ab-build__inner { grid-template-columns: minmax(0, 1fr); }
  .ab-build__visual { max-width: 620px; margin: 8px auto 0; width: 100%; }
  .ab-cta { margin-top: 8px; }
  .ab-exp__intro { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ab-phil__label--out { left: auto; right: 0; }
  .ab-exp__title { font-size: clamp(2.25rem, 1rem + 3.4vw, 3.25rem); max-width: 15em; }
  .ab-exp__copy { padding-block-start: 0; max-width: 40em; }
  .ab-real { width: 86%; }
  .ab-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ab-hero__copy { max-width: 640px; }
  .ab-hero__title { font-size: clamp(2.375rem, 1.2rem + 3.6vw, 3.75rem); }
  .ab-hero__visual { max-width: 760px; margin-inline: auto; }
}

@media (max-width: 767px) {
  .ab-hero { padding-block: calc(var(--fg-header-h) + 28px) 40px; }
  .ab-eyebrow { margin-bottom: 22px; padding: 8px 18px 8px 16px; font-size: 0.875rem; }
  .ab-hero__title { font-size: min(2.5rem, 9.4vw); line-height: 1.06; letter-spacing: -0.038em; }
  .ab-hero__lead { margin-top: 20px; font-size: 1.0625rem; }
  .ab-scroll { margin-top: 26px; gap: 14px; font-size: 1.0625rem; }
  .ab-scroll__ring { width: 46px; height: 46px; }
  .ab-scroll__ring svg { width: 18px; height: 18px; }
  /* the mobile artwork bleeds to the screen edges, as designed */
  .ab-hero__visual { margin-inline: calc(-1 * var(--fg-gutter)); max-width: none; }
  .ab-hero__visual img {
    -webkit-mask: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
    mask: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
  }

  /* Section 02 on phones: compact overlapping panel group, realization in front */
  .ab-exp { padding-block: 40px 56px; }
  .ab-exp__title { font-size: min(2.375rem, 9.2vw); line-height: 1.07; }
  .ab-exp__title .ab-accent { display: inline; }
  .ab-exp__copy p { font-size: 1.0625rem; }
  .ab-exp__stage { margin-top: 30px; padding-block-start: 31cqi; }
  .ab-panels { inset: 0 -4cqi auto; height: 44cqi; font-size: 2.7cqi; }
  .ab-panel { padding: 1.4em 1.5em; border-radius: 1.3em; }
  .ab-panel--campaigns  { left: 0;   top: 4cqi; width: 38%; height: 40cqi; rotate: -5deg; }
  .ab-panel--platforms  { left: 36%; top: 0;    width: 38%; height: 38cqi; rotate: 2deg; }
  .ab-panel--activities { left: 69%; top: 4cqi; width: 33%; height: 38cqi; rotate: 6deg; }
  .ab-panel__head { font-size: 1.45em; margin-bottom: 0.9em; }
  .ab-panel__more { display: none; }
  .ab-panel--campaigns .ab-panel__body { flex-direction: column-reverse; gap: 0.9em; }
  .ab-panel--campaigns .ab-panel__col > .ab-line { display: none; }
  .ab-panel--campaigns .ab-mini { margin-top: 0; }
  .ab-copper { flex: none; width: 100%; height: 7.4em; rotate: 0deg; translate: none; }
  .ab-panel--platforms .ab-panel__body { flex-wrap: wrap; gap: 0.7em; }
  .ab-tile { width: 3.5em; height: 3.5em; border-radius: 0.7em; }
  .ab-panel__col--side { flex-basis: 100%; padding-top: 0.6em; }
  .ab-line--foot { display: none; }
  .ab-real { width: 92%; padding: 26px 22px 30px; border-radius: 20px; }
  .ab-real__question { font-size: min(2.125rem, 8.4vw); }
  .ab-exp__close { margin-top: 26px; max-width: 18em; }

  /* Section 03 / 04 on phones */
  .ab-why { --ab-why-arc: 30px; text-align: start; }
  .ab-why__head { text-align: start; }
  .ab-why__title { font-size: min(2.375rem, 9.4vw); margin: 0; }
  .ab-why__text { margin-inline: 0; font-size: 1.0625rem; }
  .ab-step__num { font-size: 1rem; }
  .ab-step__title { font-size: min(1.375rem, 5.6vw); }
  .ab-step__body { font-size: 0.9375rem; }
  .ab-name { padding-block: 36px 40px; }
  .ab-name__title { font-size: min(2.625rem, 10.6vw); }
  .ab-name__visual { margin-inline: calc(-1 * var(--fg-gutter)); }
  .ab-name__label { font-size: 0.6875rem; letter-spacing: 0.28em; }

  /* Section 05 on phones: the approved portrait machine, labels in sequence */
  .ab-phil { padding-block: 36px 52px; }
  .ab-phil__head { text-align: start; }
  .ab-phil__title { font-size: min(2.75rem, 11vw); }
  .ab-phil__title .ab-accent { display: block; }
  .ab-phil__text { margin-inline: 0; }
  .ab-phil__stage { width: auto; margin-top: 28px; }
  .ab-phil__label--in { position: relative; top: 0; margin-inline: var(--fg-gutter); }
  .ab-phil__label-text span { display: inline; }
  .ab-phil__label-text span + span::before { content: "· "; }
  .ab-phil__machine img {
    -webkit-mask:
      linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 5%, #000 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask:
      linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 5%, #000 92%, transparent 100%);
    mask-composite: intersect;
  }
  /* over the artwork, beside its baked-in marker, as designed */
  .ab-phil__label--process {
    position: absolute;
    left: 24.4%;
    top: 83.4%;
    translate: -50% 0;
    margin: 0;
    padding: 0;
    font-size: min(1.0625rem, 4.3vw);
    line-height: 1.4;
    white-space: nowrap;
  }
  .ab-phil__label--process::before, .ab-phil__label--process::after { display: none; }
  .ab-phil__br { display: block; }
  .ab-phil__sep { display: none; }
  .ab-phil__label--out {
    position: relative;
    left: auto; top: auto;
    width: fit-content;
    margin: -34px var(--fg-gutter) 0 auto;
    padding: 1.3em 0 0 22px;
    font-size: min(1.75rem, 7.2vw);
  }
  .ab-phil__label--out::before { top: 0.2em; bottom: 0.9em; }
  .ab-phil__label--out::after { top: auto; bottom: 0.75em; }
  .ab-phil__close { margin-top: 28px; text-align: start; }
}

/* Sections 06 / 07 below tablet width: one column, approved vertical order */
@media (max-width: 767px) {
  .ab-res { --ab-arc: 30px; padding-bottom: 48px; }
  .ab-res__inner { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
  .ab-res__intro { padding: 0; }
  .ab-res__item--1 { grid-column: auto; grid-row: auto; }
  .ab-res__title { font-size: min(2.375rem, 9.6vw); }
  .ab-res__text { font-size: 1.0625rem; }
  .ab-res__name { font-size: min(1.5rem, 6.2vw); margin-top: 12px; }
  .ab-res__all { grid-column: auto; justify-self: start; }
  .ab-build { padding-block: 52px 8px; }
  .ab-build__title { font-size: min(2.5rem, 10.2vw); }
  .ab-build__text { font-size: 1.0625rem; }
  .ab-build__visual { margin-inline: calc(-1 * var(--fg-gutter)); max-width: none; width: auto; }
  .ab-cta { flex-direction: column; align-items: stretch; text-align: center; gap: 22px; margin-top: 0; padding: 28px 14px 18px; border-radius: 20px; }
  .ab-cta__title .ab-res__accent { display: block; }
  .ab-cta__button { min-height: 56px; padding: 0 14px; font-size: min(1rem, 3.95vw); gap: 8px; white-space: nowrap; }
  .ab-cta__button svg { width: 18px; height: 18px; }
}