/* ============================================================
   ABOUT PAGE — about.css
   ============================================================ */

body.no-loader {
  background: var(--black);
}

body.no-loader .header {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

body.no-loader #main-content {
  opacity: 1;
  visibility: visible;
}


/* ── Hero ── */
.ab-hero {
  display: grid;
  grid-template-columns: 27fr 46fr 27fr;
  min-height: 100vh;
}

/* Side photo columns */
.ab-hero-photo {
  background: rgba(238, 219, 193, 0.04);
  border-right: 1px solid rgba(238, 219, 193, 0.07);
  position: relative;
  overflow: hidden;
}

.ab-hero-photo--right {
  border-right: none;
  border-left: 1px solid rgba(238, 219, 193, 0.07);
}

.ab-hero-photo img,
.ab-hero-photo iframe,
.ab-hero-photo video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
  pointer-events: none;
}

/* Center text column */
.ab-hero-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(100px, 12vw, 160px) clamp(28px, 4vw, 56px) clamp(48px, 6vw, 80px);
}

.ab-headline {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 7.5vw, 8rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--bone);
  margin: 0 0 clamp(24px, 3vw, 40px);
}

.ab-sub {
  font-family: 'DenimINK SemiBold', sans-serif;
  font-size: clamp(0.55rem, 0.72vw, 0.74rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(238, 219, 193, 0.35);
  line-height: 2;
  margin: 0;
}

/* ── About copy ── */
.ab-about {
  padding: clamp(60px, 8vw, 120px) clamp(24px, 5vw, 80px);
  border-top: 1px solid rgba(238, 219, 193, 0.08);
}

.ab-about-top {
  max-width: 820px;
  margin: 0 auto clamp(48px, 6vw, 90px);
  text-align: center;
}

.ab-about-headline {
  font-family: 'DenimINK Heavy', sans-serif;
  font-size: clamp(1.1rem, 2.2vw, 2.6rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bone);
  margin: 0;
}

.ab-about-body {
  margin-bottom: clamp(60px, 8vw, 110px);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 36px);
  text-align: center;
}

/* 0.62, not the 0.45 this used to be. At 0.45 the copy measured 3.62:1 against
   the page, under the 4.5:1 normal-size text needs. 0.52 would scrape a pass;
   0.62 clears it at 5.98:1, and the margin is worth having because this is
   12.6px, uppercase and widely letter-spaced — the hardest combination to read
   on a dark ground. */
.ab-about-para {
  font-family: 'DenimINK SemiBold', sans-serif;
  font-size: clamp(0.6rem, 0.68vw, 0.74rem);
  line-height: 2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(238, 219, 193, 0.62);
  margin: 0;
}

.ab-about-closer {
  border-top: 1px solid rgba(238, 219, 193, 0.08);
  padding-top: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.ab-about-closer-globe {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.ab-about-closer-globe video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ab-about-closer-line {
  font-family: 'DenimINK SemiBold', sans-serif;
  font-size: clamp(0.6rem, 0.7vw, 0.78rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(238, 219, 193, 0.32);
  margin: 0 0 clamp(16px, 2vw, 28px);
  text-align: left;
}

.ab-about-closer-statement {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 9vw, 11rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--bone);
  margin: 0;
}

/* ── Team ── */
.ab-team {
  padding-top: clamp(60px, 8vw, 110px);
}

.ab-team-card {
  display: grid;
  grid-template-columns: 3fr 2fr;
  min-height: 65vh;
  border-top: 1px solid rgba(238, 219, 193, 0.07);
}

.ab-team-card--flip {
  grid-template-columns: 2fr 3fr;
}

.ab-team-card--flip .ab-team-photo { order: 2; }
.ab-team-card--flip .ab-team-info  { order: 1; }

.ab-team-photo {
  position: relative;
  overflow: hidden;
  background: rgba(238, 219, 193, 0.04);
}

.ab-team-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ab-team-name-overlay {
  position: absolute;
  bottom: clamp(20px, 3vw, 44px);
  left: clamp(20px, 3vw, 44px);
  z-index: 1;
}

.ab-team-name {
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 6.5vw, 9rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--bone);
  margin: 0;
}

.ab-team-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 5vw, 72px);
  border-left: 1px solid rgba(238, 219, 193, 0.07);
}

.ab-team-card--flip .ab-team-info {
  border-left: none;
  border-right: 1px solid rgba(238, 219, 193, 0.07);
}

.ab-team-role {
  font-family: 'DenimINK SemiBold', sans-serif;
  font-size: clamp(7px, 0.52vw, 9px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(238, 219, 193, 0.32);
  margin: 0 0 clamp(12px, 1.4vw, 20px);
}

.ab-team-bio {
  font-family: 'DenimINK SemiBold', sans-serif;
  font-size: clamp(0.6rem, 0.68vw, 0.74rem);
  line-height: 1.9;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(238, 219, 193, 0.4);
  margin: 0;
}

/* ── CTA ── */
.ab-cta {
  padding: clamp(60px, 9vw, 130px) clamp(24px, 5vw, 80px) clamp(80px, 12vw, 160px);
  border-top: 1px solid rgba(238, 219, 193, 0.08);
}

.ab-cta-headline {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 12vw, 15rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--bone);
  margin: 0;
}

.ab-cta-headline-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.3s ease;
}

.ab-cta-headline-link:hover { opacity: 0.4; }

/* sized against the headline's em, and lifted toward cap height so it reads as
   a mark beside the type rather than a third line of it */
.ab-cta-arrow {
  /* 0.46 rather than 0.35: the arrow is what marks the headline as a link, so
     it is not purely decorative and has to reach 3:1. It renders around 41px,
     which counts as large text, so 0.46 is enough at 3.73:1 and keeps it
     quieter than the headline beside it. */
  color: rgba(238, 219, 193, 0.46);
  font-size: 0.22em;
  /* 2.4em lands the arrow at the cap height of the headline. Going higher makes
     it overflow and stretch the line box, which shifts the whole block down. */
  vertical-align: 2.4em;
  margin-left: 0.15em;
}

/* ── Responsive ── */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  /* Phones keep the desktop composition: two photo columns with the headline
     held between them. This used to collapse to one cropped photo band above
     a plain black block, which threw away the right-hand column and the whole
     idea of the layout.

     It fits because the type is narrower than it looks — the longest line,
     ATMOSPHERE., is only 214px at 52px. The columns run 21/58/21 rather than
     the desktop 27/46/27, which is as far as the sides can open before the
     centre stops holding that line. */
  .ab-hero {
    grid-template-columns: 21fr 58fr 21fr;
    min-height: 100svh;
  }

  .ab-hero-center {
    padding: clamp(90px, 22vw, 130px) clamp(10px, 3.5vw, 18px) clamp(32px, 8vw, 56px);
  }

  /* Sized so ATMOSPHERE. stays on one line inside the narrowed centre column.
     The floor is 1.8rem, not 2rem: at 2rem a 320px phone needed exactly the
     width it had, with nothing spare, and would have wrapped on any rounding. */
  .ab-headline { font-size: clamp(1.8rem, 11.8vw, 2.9rem); }
  .ab-cta-headline { font-size: clamp(3.2rem, 16vw, 5rem); }

  .ab-about-body { max-width: 100%; }
  .ab-about-closer { grid-template-columns: 1fr; }
  .ab-about-closer-globe { aspect-ratio: 16 / 9; }
  .ab-about-closer-statement { font-size: clamp(2.6rem, 13vw, 5rem); }
}

/* ── Founders ──
   Creative brutalist: two deliberately misaligned columns split by a hard
   1px rule. The vertical offset is the design — do not align them. */
.ab-founders {
  /* single source for the translucent bone hairlines used below */
  --ab-rule: rgba(238, 219, 193, 0.14);

  padding: clamp(60px, 8vw, 120px) clamp(24px, 5vw, 80px) clamp(70px, 9vw, 130px);
  border-top: 1px solid rgba(238, 219, 193, 0.08);
}

.ab-founders-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1400px;
  margin: 0 auto;
}

/* Dividing grid line — spans the full section height, so the column
   offset can't leave it hanging short. */
.ab-founders-grid::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--ab-rule);
}

.ab-founder {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ab-founder--a { padding-right: clamp(24px, 4vw, 72px); }
.ab-founder--b { padding-left:  clamp(24px, 4vw, 72px); }

/* The stagger. Right column drops noticeably lower than the left. */
.ab-founder--b { margin-top: clamp(90px, 13vw, 210px); }

.ab-founder-photo {
  position: relative;
  width: 100%;
  /* capped so the photo, name and copy read as one composed block
     rather than a column-wide slab */
  max-width: clamp(200px, 27vw, 390px);
  aspect-ratio: 4 / 5;
  /* Frame colour is set per founder below. The background has to match the
     border because a cover crop rarely lands on an exact pixel boundary, so
     the background is what shows as the hairline around the photo. */
  background: var(--burgundy);
  border: 1px solid var(--burgundy);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

img.ab-founder-photo {
  object-fit: cover;
  display: block;
}

/* One founder framed in electric, the other in burgundy */
.ab-founder--a .ab-founder-photo {
  background: var(--electric);
  border-color: var(--electric);
}

.ab-founder-photo-tag {
  font-family: var(--font-mono);
  font-size: clamp(7px, 0.52vw, 9px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(238, 219, 193, 0.55);
}

.ab-founder-label {
  width: 100%;
  margin-top: clamp(20px, 2.6vw, 36px);
  padding-top: clamp(12px, 1.4vw, 18px);
  border-top: 1px solid var(--ab-rule);
  font-family: 'DenimINK Heavy', sans-serif;
  font-size: clamp(8px, 0.58vw, 10px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(238, 219, 193, 0.62); /* was 0.5, which measured 4.22:1 */
}

/* right column leads with its label, so it needs no rule pushing it down */
.ab-founder--b .ab-founder-label { margin-top: 0; }
.ab-founder--b .ab-founder-photo { margin-top: clamp(20px, 2.6vw, 36px); }

.ab-founder-name {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 5.2vw, 5.5rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--bone);
  margin: clamp(14px, 1.8vw, 24px) 0 clamp(16px, 2vw, 28px);
}

.ab-founder-desc {
  font-family: 'DenimINK SemiBold', sans-serif;
  font-size: clamp(0.6rem, 0.68vw, 0.74rem);
  line-height: 2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(238, 219, 193, 0.62); /* was 0.45 — see .ab-about-para */
  max-width: 42ch;
  margin: 0;
}

/* Carries the same type as .ab-founder-label so the personal links read as
   part of the card's own system rather than as something bolted beneath it. */
.ab-founder-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 2.4vw, 38px);
  list-style: none;
  margin: clamp(18px, 2vw, 28px) 0 0;
  padding: 0;
}

.ab-founder-link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  font-family: 'DenimINK Heavy', sans-serif;
  font-size: clamp(8px, 0.58vw, 10px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(238, 219, 193, 0.62);
  text-decoration: none;
  padding-bottom: 0.7em;
  transition: color 0.3s ease;
}

/* Drawn as a pseudo-element rather than an underline because text-decoration
   cannot be animated directionally. Mustard is the accent this page already
   carries in the nav, so the hover states agree across the page. */
.ab-founder-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--mustard);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out-expo);
}

.ab-founder-link-arrow {
  margin-left: 0.5em;
  transition: transform 0.3s var(--ease-out-expo);
}

.ab-founder-link:hover,
.ab-founder-link:focus-visible {
  color: var(--bone);
}

.ab-founder-link:hover::after,
.ab-founder-link:focus-visible::after {
  transform: scaleX(1);
}

/* The arrow travels its own diagonal, so the glyph and the motion agree. */
.ab-founder-link:hover .ab-founder-link-arrow,
.ab-founder-link:focus-visible .ab-founder-link-arrow {
  transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  .ab-founder-link::after,
  .ab-founder-link-arrow { transition: none; }
}

@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .ab-founders-grid {
    grid-template-columns: 1fr;
  }

  /* vertical split becomes a horizontal rule between the two */
  .ab-founders-grid::before { display: none; }

  .ab-founder--a,
  .ab-founder--b {
    padding-left: 0;
    padding-right: 0;
  }

  /* offset removed on mobile */
  .ab-founder--b {
    margin-top: clamp(40px, 9vw, 64px);
    padding-top: clamp(40px, 9vw, 64px);
    border-top: 1px solid var(--ab-rule);
  }

  /* the stack separator above already supplies the rule — keep the
     label from drawing a second one right under it */
  .ab-founder--b .ab-founder-label {
    border-top: none;
    padding-top: 0;
  }

  .ab-founder-photo { max-width: 460px; }
  .ab-founder-name  { font-size: clamp(2.4rem, 11vw, 4rem); }
  .ab-founder-desc  { max-width: 100%; }
}

@media (max-width: 640px) {
  .ab-team-card,
  .ab-team-card--flip { grid-template-columns: 1fr; min-height: unset; }
  .ab-team-photo { min-height: 70vw; }
  .ab-team-card--flip .ab-team-photo { order: unset; }
  .ab-team-card--flip .ab-team-info  { order: unset; border-right: none; border-top: 1px solid rgba(238,219,193,0.07); }
  .ab-team-info { border-left: none; border-top: 1px solid rgba(238,219,193,0.07); }
}