/*
    About page: "built floor by floor".
    A glass tower in a city at night. The floors stand for Pumraw's years: as you scroll, the camera climbs and the
    floors light up behind you. The top floors glow in the three discipline colours, the team stand at the lit windows,
    the city spreads out below for the clients, and on the roof the next floor draws itself in light.
    The building is no real address, so an office move changes nothing.
  */
  :root { color-scheme: dark; }
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; background: #04060c; }

  .ab {
    --ink: #f4f6f9;
    --ink-soft: rgba(222, 227, 236, 0.8);
    --ink-mute: rgba(206, 212, 222, 0.66);
    --cyan: #5fe8d6;
    --blue: #3d7bff;
    --violet: #a98bff;
    --focus: #7ef0e0;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --gutter: clamp(20px, 4.65vw, 96px);
    --gutter-r: clamp(20px, 2.95vw, 64px);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    overflow: clip;
    background: #04060c;
    color: var(--ink);
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .ab a { color: inherit; }

  /* the city stays on screen; the page scrolls over it and the camera climbs with the scroll */
  .ab__stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .ab__view { position: sticky; top: 0; height: 100vh; height: 100lvh; max-height: 100%; overflow: hidden; }
  .ab__view canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; }
  .ab.is-ready .ab__view canvas { opacity: 1; }
  .ab__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 6, 12, 0.74) 0%, rgba(4, 6, 12, 0.42) 34%, rgba(4, 6, 12, 0) 58%); }

  /* the climb gauge: years instead of floor numbers */
  .ab__gauge { position: absolute; right: var(--gutter-r); top: 50%; height: min(52vh, 440px); transform: translateY(-50%); width: 120px; opacity: 0; transition: opacity 0.5s ease; }
  .ab__gauge.is-on { opacity: 1; }
  .ab__gauge-line { position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.28)); }
  .ab__gauge-fill { position: absolute; right: 0; bottom: 0; width: 1px; height: 0; background: linear-gradient(180deg, var(--cyan), rgba(95, 232, 214, 0.2)); box-shadow: 0 0 10px rgba(95, 232, 214, 0.6); }
  .ab__gauge-tick { position: absolute; right: -3px; width: 7px; height: 1px; background: rgba(255, 255, 255, 0.35); }
  .ab__gauge-tick.is-past { background: var(--cyan); }
  .ab__gauge-label { position: absolute; right: 16px; transform: translateY(50%); text-align: right; white-space: nowrap; font: 500 10px/1.2 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); }
  .ab__gauge-label b { display: block; margin-top: 4px; font: 500 22px/1 var(--mono); letter-spacing: 0.02em; color: #ffffff; text-transform: none; }

  /* names beside the lit windows */
  .ab__pin { position: absolute; left: 0; top: 0; padding: 4px 8px; border-left: 1px solid rgba(95, 232, 214, 0.7); background: rgba(4, 8, 16, 0.62); font: 600 9px/1.2 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; color: #ffffff; opacity: 0; transition: opacity 0.35s ease, background 0.25s ease; will-change: transform; }
  .ab__pin.is-hi { background: rgba(95, 232, 214, 0.22); }

  .ab__sec { position: relative; z-index: 1; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: clamp(48px, 9vh, 96px) var(--gutter-r) clamp(48px, 9vh, 96px) var(--gutter); }
  .ab__col { width: 100%; max-width: 34rem; }
  .ab__eyebrow { margin: 0 0 clamp(16px, 3vh, 28px); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-mute); }
  .ab__h1 { margin: 0 0 clamp(18px, 3vh, 28px); font-size: clamp(2.6rem, min(5vw, 9vh), 6rem); font-weight: 500; line-height: 1; letter-spacing: -0.03em; text-shadow: 0 2px 30px rgba(4, 6, 12, 0.7); }
  .ab__h1 span { display: block; }
  .ab__h2 { margin: 0 0 18px; font-size: clamp(1.9rem, min(3.4vw, 6vh), 3.4rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; text-shadow: 0 2px 24px rgba(4, 6, 12, 0.7); }
  .ab__lede { max-width: 31em; margin: 0; font-size: clamp(0.9375rem, 0.5vw + 0.72rem, 1.125rem); line-height: 1.65; color: var(--ink-soft); }
  .ab__hint { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(26px, 5vh, 48px); font: 500 10px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); }
  .ab__hint i { display: block; width: 1px; height: 34px; background: linear-gradient(180deg, transparent, var(--cyan)); animation: ab-drip 2.2s ease-in-out infinite; }
  @keyframes ab-drip { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

  .ab__glass { padding: clamp(20px, 2.6vw, 30px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; background: linear-gradient(160deg, rgba(12, 18, 32, 0.66), rgba(5, 9, 18, 0.56)); -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15); box-shadow: 0 24px 70px -30px rgba(0, 0, 0, 0.7); }

  /* statement */
  .ab-quote { justify-content: center; text-align: center; min-height: 80vh; min-height: 80svh; }
  .ab-quote blockquote { max-width: 22ch; margin: 0 auto; font-size: clamp(2rem, min(4.6vw, 8.4vh), 5rem); font-weight: 500; line-height: 1.06; letter-spacing: -0.025em; text-shadow: 0 4px 40px rgba(4, 6, 12, 0.85); }
  .ab-quote blockquote em { font-style: normal; background: linear-gradient(90deg, var(--cyan), #9fb7ff 55%, var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }

  /* story */
  .ab-chap { min-height: 88vh; min-height: 88svh; }
  .ab-chap .ab__glass { max-width: 30rem; }
  .ab__year { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 500 11px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan); }
  .ab__year::before { content: ""; width: 22px; height: 1px; background: currentColor; }
  .ab-chap h3 { margin: 0 0 10px; font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 500; letter-spacing: -0.01em; }
  .ab-chap p { margin: 0; line-height: 1.65; color: var(--ink-soft); }
  .ab-story-head { min-height: 60vh; min-height: 60svh; }

  /* service disciplines */
  .ab__engagement { margin-top: 24px; }
  .ab-diff .ab__h2 { line-height: 1.14; font-size: clamp(1.9rem, 3vw, 2.8rem); }
  .ab__trio { display: grid; gap: 12px; margin-top: 26px; }
  .ab__disc { display: grid; grid-template-columns: 12px 1fr; gap: 0 14px; padding: 16px 18px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(6, 10, 20, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .ab__disc i { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; box-shadow: 0 0 14px currentColor; background: currentColor; }
  .ab__disc h3 { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 600; }
  .ab__disc p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); }

  /* values */
  .ab-values { justify-content: flex-start; }
  .ab__vals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 26px; max-width: 46rem; }
  .ab__val { padding: 20px 20px 22px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.14); background: linear-gradient(160deg, rgba(220, 240, 255, 0.07), rgba(6, 10, 20, 0.5)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .ab__val span { display: block; margin-bottom: 10px; font: 500 10px/1 var(--mono); letter-spacing: 0.2em; color: var(--cyan); }
  .ab__val h3 { margin: 0 0 6px; font-size: 1.125rem; font-weight: 600; }
  .ab__val p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); }

  /* Give the service closing statement breathing room before the partnership heading. */
  .ab-values { padding-top: clamp(140px, 22svh, 240px); }

  /* Hold the team panel for another viewport of scrolling, including on short screens. */
  .ab-team { display: block; padding-top: 0; padding-bottom: 0; min-height: calc(var(--team-panel-height, 100svh) + 90svh); }
  .ab-team > .ab__col { position: sticky; top: min(0px, calc(100svh - var(--team-panel-height, 100svh))); min-height: 100svh; padding-top: clamp(48px, 9vh, 96px); padding-bottom: clamp(48px, 9vh, 96px); display: flex; flex-direction: column; justify-content: center; }

  /* team */
  .ab__crew h3 { margin: 20px 0 8px; font: 500 10px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); }
  .ab__people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
  .ab__person { padding: 10px 13px 11px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(6, 10, 20, 0.58); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color 0.25s ease, background 0.25s ease; outline: none; }
  .ab__person:hover, .ab__person:focus-visible, .ab__person.is-hi { border-color: rgba(95, 232, 214, 0.6); background: rgba(10, 30, 36, 0.66); }
  .ab__person b { display: block; font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
  .ab__person small { display: block; margin-top: 3px; font-size: 0.75rem; line-height: 1.35; color: var(--ink-mute); }

  /* clients */
  .ab-clients { justify-content: center; text-align: center; min-height: 90vh; min-height: 90svh; }
  .ab-clients .ab__col { max-width: 60rem; }

  /* call to action */
  .ab-cta .ab__col { max-width: 36rem; }
  .ab__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 4vh, 36px); }
  .pumraw-glow-button {
    --button-blue: #5bbada;
    --button-cyan: #7ef0e0;
    --mx: 50%;
    --my: 50%;
    position: relative;
    isolation: isolate;
    display: inline-grid;
    place-items: center;
    min-width: 194px;
    min-height: 54px;
    padding: 0 27px;
    overflow: visible;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(244, 246, 249, 0.86);
    box-shadow: none;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.055em;
    text-decoration: none;
    text-transform: uppercase;
    transform: translateZ(0) scale(1);
    transition: color 300ms ease, transform 480ms cubic-bezier(.16, 1, .3, 1);
  }
  .pumraw-glow-button::before {
    content: "";
    position: absolute;
    z-index: -3;
    inset: -15px;
    border-radius: inherit;
    background: radial-gradient(78px 48px at var(--mx) var(--my), rgba(91, 186, 218, 0.55), rgba(91, 186, 218, 0.18) 42%, transparent 74%);
    filter: blur(15px);
    opacity: 0;
    transition: opacity 420ms ease;
    pointer-events: none;
  }
  .pumraw-glow-button__shell {
    position: absolute;
    z-index: -2;
    inset: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 44%), rgba(2, 5, 8, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 10px 28px rgba(0, 0, 0, 0.26);
  }
  .pumraw-glow-button__shell::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    background: radial-gradient(58px 38px at var(--mx) var(--my), rgba(255, 255, 255, 0.95), rgba(126, 240, 224, 0.88) 14%, rgba(91, 186, 218, 0.68) 34%, transparent 72%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
  }
  .pumraw-glow-button__energy {
    position: absolute;
    z-index: 1;
    left: var(--mx);
    top: var(--my);
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 2%, rgba(126, 240, 224, 0.92) 4%, rgba(91, 186, 218, 0.76) 15%, rgba(45, 121, 255, 0.34) 34%, transparent 68%);
    filter: blur(5px) saturate(1.18);
    opacity: 0;
    mix-blend-mode: screen;
    transform: translate(-50%, -50%) scale(0.35);
    transition: opacity 280ms ease, transform 520ms cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
  }
  .pumraw-glow-button__energy::before,
  .pumraw-glow-button__energy::after {
    content: "";
    position: absolute;
    inset: 46% -64%;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(91, 186, 218, 0.18) 18%, rgba(126, 240, 224, 0.92) 49%, rgba(255, 255, 255, 0.92) 52%, rgba(91, 186, 218, 0.22) 70%, transparent);
    filter: blur(0.5px);
    transform: rotate(-8deg) scaleX(0.45);
    transition: transform 650ms cubic-bezier(.16, 1, .3, 1);
  }
  .pumraw-glow-button__energy::after { inset: 51% -34%; height: 1px; opacity: 0.72; transform: rotate(9deg) scaleX(0.32); }
  .pumraw-glow-button__label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 16px; white-space: nowrap; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.72); }
  .pumraw-glow-button:is(:hover, :focus-visible) { color: #fff; transform: translateZ(0) scale(1.05); }
  .pumraw-glow-button:is(:hover, :focus-visible)::before { opacity: 1; }
  .pumraw-glow-button:is(:hover, :focus-visible) .pumraw-glow-button__shell::after { opacity: 1; }
  .pumraw-glow-button:is(:hover, :focus-visible) .pumraw-glow-button__energy { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .pumraw-glow-button:is(:hover, :focus-visible) .pumraw-glow-button__energy::before { transform: rotate(-8deg) scaleX(1); }
  .pumraw-glow-button:is(:hover, :focus-visible) .pumraw-glow-button__energy::after { transform: rotate(9deg) scaleX(0.78); }
  .pumraw-glow-button:focus-visible { outline: 2px solid var(--button-blue); outline-offset: 5px; }
  .pumraw-glow-button--secondary { color: rgba(244, 246, 249, 0.7); }
  .pumraw-glow-button--secondary .pumraw-glow-button__shell { background: rgba(2, 5, 8, 0.62); border-color: rgba(255, 255, 255, 0.1); }

  /* ---------- small screens ---------- */
  @media (max-width: 900px) {
    .ab__scrim { background: linear-gradient(180deg, rgba(4, 6, 12, 0.5), rgba(4, 6, 12, 0.15) 45%, rgba(4, 6, 12, 0.55)); }
    .ab__sec { align-items: flex-end; padding-right: var(--gutter); }
    .ab-hero { align-items: flex-start; }
    .ab-quote, .ab-clients { align-items: center; }
    .ab__col { max-width: none; }
    .ab__h1 { font-size: clamp(2.5rem, 11vw, 4.4rem); }
    .ab__gauge { top: 16px; right: 16px; height: 120px; transform: none; width: 90px; }
    .ab__gauge-label b { font-size: 16px; }
    .ab__vals { grid-template-columns: 1fr; }
    .ab__pin { display: none; }
    .ab-chap .ab__glass { max-width: none; }
  }
  @media (max-width: 340px) { .ab__people { grid-template-columns: 1fr; } }
  @media (prefers-reduced-motion: reduce) {
    .ab__hint i { animation: none; }
    .ab__view canvas, .ab__gauge, .ab__pin { transition: none; }
  }

  /* Final supplied copy within the established tower layout. */
  .ab-hero .ab__h1 { font-size:clamp(2rem,min(4vw,6.4vh),4rem); line-height:1.1; letter-spacing:.01em; text-wrap:balance; }
  .ab-quote { flex-direction:column; gap:28px; }
  .ab-quote blockquote { max-width:27ch; font-size:clamp(2rem,min(4vw,7vh),4rem); line-height:1.12; letter-spacing:.01em; text-wrap:balance; }
  .ab-quote>.ab__lede { max-width:64ch; }
  @media(max-width:900px) { .ab-hero .ab__h1 { font-size:clamp(2rem,7.4vw,3.6rem); max-width:23ch; } }