/* ==========================================================================
   SAN Media Solution — Section 2 · The Founder
   Built to `section 2 refrence about.PNG`. `--v` is one pixel of that 1672px
   artboard, so every measurement below is read straight off the reference.
   The founder photograph and the four logos are the delivered files, framed
   and never altered; the scripts are lifted from the artwork on alpha.
   ========================================================================== */

@font-face {
  font-family: "PlayfairVar";
  src: url("../fonts/playfair-var.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InstrumentSerif";
  src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

.about {
  --v: calc(100vw / 1672);
  --serif: "PlayfairVar", "Playfair Display", Georgia, "Times New Roman", serif;
  --serif-2: "InstrumentSerif", "Instrument Serif", "PlayfairVar", Georgia, serif;
  --paper-2: #faf9f6;
  --night: #0b0c0e;
  --moss: #0d140f;
  --lime-2: #65cf1d;      /* the name */
  --lime-3: #86e04a;      /* rules, the play ring */
  --lime-4: #8ee15c;      /* the quote mark, the script */
  --lime-5: #8ccf5e;      /* "multiple industries" */
  position: relative;
  container-type: inline-size;
  overflow-x: clip;
  background: var(--night);
  color: #f2f2f2;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
@supports (width: 1cqw) {
  .about { --v: calc(1cqw / 16.72); }
}

/* ── the founder ──────────────────────────────────────────────────────── */
.founder {
  position: relative;
  height: calc(585 * var(--v));
  background:
    linear-gradient(to right,
      var(--paper-2) 0, var(--paper-2) calc(640 * var(--v)),
      #1a1714 calc(900 * var(--v)), #0e0f11 calc(1240 * var(--v)), #08090b 100%);
  perspective: calc(1300 * var(--v));
  perspective-origin: 56% 60%;
}

/* the photograph: the file, framed by its own soft edges */
.founder__photo {
  position: absolute;
  left: calc(580 * var(--v));
  top: 0;
  width: calc(682 * var(--v));
  height: calc(650 * var(--v));
  margin: 0;
  z-index: 1;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 calc(70 * var(--v)), #000 calc(600 * var(--v)), transparent 100%),
    linear-gradient(to bottom, #000 calc(560 * var(--v)), transparent calc(650 * var(--v)));
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 calc(70 * var(--v)), #000 calc(600 * var(--v)), transparent 100%),
    linear-gradient(to bottom, #000 calc(560 * var(--v)), transparent calc(650 * var(--v)));
  mask-composite: intersect;
}
.founder__photo > img:first-child {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* "Ideas Create Impact", written on the wall beside him */
.founder__ink {
  position: absolute;
  left: calc(460 * var(--v));
  top: calc(100 * var(--v));
  width: calc(180 * var(--v));
  height: auto;
}

/* left column */
.founder__copy {
  position: absolute;
  left: calc(60 * var(--v));
  top: calc(134 * var(--v));
  width: calc(540 * var(--v));
  z-index: 2;
  color: #0c0c0c;
}
.kicker {
  display: flex;
  align-items: center;
  gap: calc(15 * var(--v));
  margin: 0;
  font-size: max(calc(10.6 * var(--v)), 9px);
  font-weight: 500;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: #4a4a4b;
  line-height: 1;
}
.kicker i { display: block; width: calc(40 * var(--v)); height: calc(2 * var(--v)); background: var(--lime-3); }
.name {
  margin: calc(14 * var(--v)) 0 0;
  font-family: var(--serif);
  font-weight: 800;
  line-height: 1;
  color: #0c0c0c;
}
.name span { display: block; }
.name__first { font-size: calc(78 * var(--v)); letter-spacing: -.02em; }
.name__last  { font-size: calc(70 * var(--v)); letter-spacing: -.02em; margin-top: calc(-6 * var(--v)); color: var(--lime-2); }
.role {
  margin: calc(6 * var(--v)) 0 0;
  font-size: calc(23 * var(--v));
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: #2e2e2e;
}
.bio {
  margin: calc(24 * var(--v)) 0 0;
  font-size: calc(17.6 * var(--v));
  font-weight: 400;
  line-height: calc(24.3 * var(--v));
  letter-spacing: -.012em;
  color: #5a5a5a;
}
.watch {
  display: inline-flex;
  align-items: center;
  gap: calc(16 * var(--v));
  margin-top: calc(28 * var(--v));
  color: #0c0c0c;
  text-decoration: none;
}
.watch__ring {
  display: grid;
  place-items: center;
  width: calc(64 * var(--v));
  height: calc(64 * var(--v));
  border-radius: 50%;
  border: calc(2 * var(--v)) solid var(--lime-3);
  box-shadow: 0 0 calc(14 * var(--v)) rgba(134, 224, 74, .55), inset 0 0 calc(10 * var(--v)) rgba(134, 224, 74, .18);
  transition: transform .5s var(--e-out), box-shadow .5s var(--e-out);
}
.watch__ring svg { width: calc(20 * var(--v)); height: auto; fill: #0c0c0c; margin-left: calc(3 * var(--v)); }
.watch__label { font-size: calc(17 * var(--v)); font-weight: 700; line-height: calc(20 * var(--v)); letter-spacing: -.01em; }
.watch:hover .watch__ring, .watch:focus-visible .watch__ring {
  transform: scale(1.06);
  box-shadow: 0 0 calc(24 * var(--v)) rgba(134, 224, 74, .8), inset 0 0 calc(12 * var(--v)) rgba(134, 224, 74, .3);
}

/* the quote, beside him */
.founder__quote {
  position: absolute;
  left: calc(1235 * var(--v));
  top: calc(206 * var(--v));
  width: calc(280 * var(--v));
  z-index: 2;
}
.quote__mark { display: block; width: calc(34 * var(--v)); height: auto; }
.quote__mark svg { display: block; width: 100%; height: auto; fill: var(--lime-4); }
.quote__text {
  margin: calc(10 * var(--v)) 0 0 calc(15 * var(--v));
  font-family: var(--serif-2);
  font-style: italic;
  font-weight: 400;
  font-size: calc(23.6 * var(--v));
  line-height: calc(29.2 * var(--v));
  letter-spacing: 0;
  color: #ececec;
  white-space: nowrap;
}
.quote__rule { display: block; width: calc(40 * var(--v)); height: calc(1.5 * var(--v)); margin: calc(24 * var(--v)) 0 0 calc(15 * var(--v)); background: var(--lime-3); }
.quote__sign { display: block; width: calc(234 * var(--v)); height: auto; margin: calc(3 * var(--v)) 0 0 calc(1 * var(--v)); }
.quote__who {
  display: block;
  margin: calc(7 * var(--v)) 0 0 calc(65 * var(--v));
  font-size: max(calc(11.5 * var(--v)), 9px);
  font-weight: 500;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: #e6e6e6;
}

/* the rail on the far right */
.founder__rail {
  position: absolute;
  left: calc(1533 * var(--v));
  top: calc(159 * var(--v));
  width: calc(130 * var(--v));
  z-index: 2;
}
.rail__rule { display: block; width: calc(40 * var(--v)); height: calc(2 * var(--v)); background: var(--lime-3); }
.rail__values {
  list-style: none;
  margin: calc(16 * var(--v)) 0 0;
  padding: 0;
  font-size: max(calc(11.5 * var(--v)), 9px);
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  line-height: calc(20.2 * var(--v));
  color: #d8d8d8;
}
.rail__tick { display: block; width: calc(1.5 * var(--v)); height: calc(37 * var(--v)); margin: calc(26 * var(--v)) 0 0 calc(7 * var(--v)); background: var(--lime-3); }
.rail__stats { margin: calc(21 * var(--v)) 0 0; }
.rail__stats div + div { margin-top: calc(17 * var(--v)); }
.rail__stats dt {
  font-size: calc(25 * var(--v));
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: calc(24 * var(--v));
  color: #f0f0f0;
}
.rail__stats dt span { font-size: calc(30 * var(--v)); line-height: calc(24 * var(--v)); }
.rail__stats dd {
  margin: calc(8 * var(--v)) 0 0;
  font-size: max(calc(9 * var(--v)), 9px);
  font-weight: 500;
  line-height: calc(11 * var(--v));
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #b8b8b8;
}

/* ── the group ────────────────────────────────────────────────────────── */
.group {
  position: relative;
  height: calc(260 * var(--v));
  background: var(--moss) url("../img/group-band.jpg") center / cover no-repeat;
  perspective: calc(1400 * var(--v));
  perspective-origin: 66% 0%;
}
.group__copy {
  position: absolute;
  left: calc(60 * var(--v));
  top: calc(41 * var(--v));
  width: calc(520 * var(--v));
  z-index: 2;
}
.kicker--dark { color: #dcdcdc; }
.kicker--dark i { width: calc(50 * var(--v)); }
.group__title {
  margin: calc(20 * var(--v)) 0 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: calc(44 * var(--v));
  line-height: calc(45 * var(--v));
  letter-spacing: .005em;
  text-transform: uppercase;
  color: #f4f4f4;
}
.group__title span, .group__title em { display: block; font-style: normal; }
.group__title em { color: var(--lime-5); }
.group__sub {
  margin: calc(14 * var(--v)) 0 0;
  font-size: calc(21 * var(--v));
  font-weight: 400;
  line-height: calc(26 * var(--v));
  letter-spacing: -.012em;
  color: #dedede;
}

/* the four ventures */
.cards {
  position: absolute;
  left: calc(577 * var(--v));
  top: calc(28 * var(--v));
  display: flex;
  gap: calc(11 * var(--v));
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 3;
  transform-style: preserve-3d;
}
.card {
  width: calc(255 * var(--v));
  height: calc(209 * var(--v));
  border-radius: calc(9 * var(--v));
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
.card__link {
  position: relative;
  display: block;
  height: 100%;
  border-radius: inherit;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .55s var(--e-out), box-shadow .55s var(--e-out);
}
.card--light .card__link { background: #efeeea; color: #3a3a3a; box-shadow: 0 calc(16 * var(--v)) calc(36 * var(--v)) rgba(0, 0, 0, .35); }
.card--dark  .card__link { background: #010101; color: #dcdcdc; box-shadow: 0 0 0 1px rgba(255, 255, 255, .13), 0 calc(16 * var(--v)) calc(36 * var(--v)) rgba(0, 0, 0, .45); }
.card__link:hover, .card__link:focus-visible { transform: translateY(calc(-4 * var(--v))); }

/* The logo is the delivered file; only its own clear margins are framed out,
   via the artwork box (--x --y --bw --bh) inside the file (--w --h). */
.card__logo {
  position: absolute;
  left: 50%;
  top: calc(64 * var(--v));            /* centred in the 104px logo zone */
  width: min(calc(var(--lw, 196) * var(--v)), calc(104 * var(--v) * var(--bw) / var(--bh)));
  aspect-ratio: var(--bw) / var(--bh);
  translate: -50% -50%;
  overflow: hidden;
}
.card__logo img {
  position: absolute;
  left: calc(-100% * var(--x) / var(--bw));
  top: calc(-100% * var(--y) / var(--bh));
  width: calc(100% * var(--w) / var(--bw));
  height: auto;
  max-width: none;
}
/* the file's own white ground melts into the card instead of sitting on it */
.card--light .card__logo img { mix-blend-mode: multiply; }
.card__text {
  position: absolute;
  left: calc(31 * var(--v));
  right: calc(12 * var(--v));
  top: calc(127 * var(--v));
  font-size: max(calc(13.7 * var(--v)), 10px);
  line-height: calc(18.6 * var(--v));
  letter-spacing: -.028em;
  white-space: nowrap;
}
.card:nth-child(2) .card__text { left: calc(14 * var(--v)); font-size: max(calc(13.3 * var(--v)), 10px); }
.card:nth-child(3) .card__text { left: calc(34 * var(--v)); }
.card:nth-child(4) .card__text { left: calc(42 * var(--v)); }
.card__go {
  position: absolute;
  right: calc(20 * var(--v));
  bottom: calc(12 * var(--v));
  width: calc(27 * var(--v));
  height: calc(27 * var(--v));
  border-radius: 50%;
  border: calc(1.2 * var(--v)) solid currentColor;
  display: grid;
  place-items: center;
  opacity: .85;
  transition: transform .5s var(--e-out), opacity .5s;
}
.card__go svg { width: calc(12 * var(--v)); height: auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.card__link:hover .card__go { transform: translateX(calc(3 * var(--v))); opacity: 1; }

/* ── scroll-driven entrance: resting state is the reference; about.js writes
      transforms while the section is coming in, then hands back to CSS ── */
.about.is-live [data-in],
.about.is-live [data-quote],
.about.is-live [data-rail] { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .about [data-photo], .about [data-in], .about [data-quote], .about [data-rail], .about [data-card] {
    transform: none !important; opacity: 1 !important; filter: none !important;
  }
}

/* ══ narrow screens: re-laid, not shrunk ═══════════════════════════════ */
@media (max-width: 1080px) {
  .about { --pad: clamp(20px, 4vw, 48px); }
  .founder {
    height: auto;
    display: flex;
    flex-direction: column;
    background: var(--night);
    perspective: 1200px;
    perspective-origin: 50% 40%;
  }
  /* the copy keeps the paper; the photograph, quote and rail share the dark ground */
  .founder__copy {
    position: static;
    width: auto;
    order: 1;
    padding: clamp(28px, 6vh, 60px) var(--pad) clamp(24px, 4vh, 40px);
    background: var(--paper-2);
  }
  .kicker { font-size: clamp(10px, 1.3vw, 12px); }
  .name { margin-top: clamp(12px, 2vh, 20px); }
  .name__first { font-size: clamp(46px, 9.4vw, 96px); }
  .name__last  { font-size: clamp(38px, 7.8vw, 80px); }
  .role { font-size: clamp(17px, 2.6vw, 26px); }
  .bio { margin-top: clamp(14px, 2.5vh, 26px); font-size: clamp(14.5px, 2vw, 19px); line-height: 1.32; }
  .bio br { display: none; }
  .watch { margin-top: clamp(18px, 3vh, 30px); }
  .watch__ring { width: clamp(48px, 7vw, 64px); height: clamp(48px, 7vw, 64px); border-width: 2px; }
  .watch__ring svg { width: clamp(15px, 2.2vw, 20px); }
  .watch__label { font-size: clamp(14px, 1.9vw, 17px); line-height: 1.2; }

  .founder__photo {
    position: relative;
    order: 2;
    left: auto; top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 682 / 560;
    background: var(--night);
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    mask-composite: add;
    transform-origin: 50% 100%;
  }
  .founder__photo > img:first-child { object-position: 50% 18%; }
  .founder__ink { left: auto; right: 5%; top: 8%; width: clamp(110px, 22vw, 200px); }

  /* the quote and the rail share the dark ground under the photograph */
  .founder__quote, .founder__rail { position: static; width: auto; }
  .founder__quote { order: 3; padding: 0 var(--pad); margin-top: clamp(-40px, -6vw, -20px); }
  .quote__mark { width: clamp(24px, 3.4vw, 34px); }
  .quote__text { font-size: clamp(19px, 3vw, 28px); line-height: 1.12; white-space: normal; margin-left: 0; max-width: 24ch; }
  .quote__text br { display: none; }
  .quote__rule { margin-left: 0; }
  .quote__sign { width: clamp(170px, 26vw, 234px); }
  .quote__who { margin-left: clamp(40px, 7vw, 65px); font-size: clamp(10px, 1.3vw, 11.5px); }
  .founder__rail {
    order: 4;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: start;
    gap: 0 24px;
    padding: clamp(26px, 5vh, 44px) var(--pad) clamp(30px, 6vh, 56px);
  }
  .rail__rule { grid-column: 1; width: 40px; height: 2px; }
  .rail__values { grid-column: 1; margin-top: 12px; font-size: clamp(10px, 1.3vw, 11.5px); line-height: 1.9; }
  .rail__tick { display: none; }
  .rail__stats { grid-column: 2; grid-row: 1 / span 2; margin: 0; display: grid; gap: 14px; }
  .rail__stats div + div { margin: 0; }
  .rail__stats dt { font-size: clamp(22px, 3.2vw, 28px); line-height: 1; }
  .rail__stats dt span { font-size: clamp(26px, 3.6vw, 32px); line-height: 1; }
  .rail__stats dd { margin-top: 7px; font-size: clamp(8.5px, 1.2vw, 10px); line-height: 1.2; }

  .group { height: auto; padding: clamp(28px, 5vh, 56px) var(--pad) clamp(34px, 6vh, 64px); }
  .group__copy { position: static; width: auto; max-width: 640px; }
  .kicker--dark i { width: 50px; }
  .group__title { margin-top: 16px; font-size: clamp(26px, 4.6vw, 46px); line-height: 1.05; }
  .group__sub { margin-top: 14px; font-size: clamp(15px, 2.2vw, 21px); line-height: 1.3; }
  .group__sub br { display: none; }
  .cards {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 1.6vw, 16px);
    margin-top: clamp(24px, 4vh, 40px);
    max-width: 760px;
  }
  .card { width: auto; height: auto; aspect-ratio: 255 / 209; border-radius: 10px; }
  .card__logo { top: 30%; width: min(76%, calc(38% * var(--bw) / var(--bh))); }   /* centred in the top half */
  .card__text { left: 8%; right: 7%; top: 61%; font-size: clamp(12px, 1.9vw, 15px); line-height: 1.28; white-space: normal; }
  .card:nth-child(n) .card__text { left: 8%; font-size: clamp(12px, 1.9vw, 15px); }
  .card__go { right: 7%; bottom: 6%; width: 26px; height: 26px; border-width: 1px; }
  .card__go svg { width: 12px; }
}

@media (max-width: 720px) {
  .founder__photo { aspect-ratio: 682 / 600; }
  .founder__rail { grid-template-columns: 1fr; }
  .rail__stats { grid-column: 1; grid-row: auto; margin-top: 22px; grid-template-columns: repeat(3, auto); justify-content: space-between; }
}
@media (max-width: 440px) {
  .cards { grid-template-columns: 1fr; max-width: 360px; }
  .card { aspect-ratio: 255 / 190; }
  .card__text { font-size: 13px; }
  .rail__stats { grid-template-columns: 1fr 1fr; }
}