/* ====================================================================
   About Mark — page-only styles.

   Loaded AFTER new-landing.css and scoped entirely under .page-about, so
   the shared header, footer and reveal primitives come from the design
   system and nothing here can reach the homepage or the media page.

   House rules for this page: no radius, no gradients, no shadows, no blue
   headings, no cards. Structure is carried by hairlines and space.
   ==================================================================== */
.page-about {
  --edge: rgba(17, 17, 17, .11);
  --edge-soft: rgba(17, 17, 17, .07);
  --charcoal: #2b2b2b;
  --body: #43474c;

  /* one vertical rhythm unit for the whole page, so every section band
     lines up without per-section numbers */
  --sec: clamp(54px, 7.4vw, 128px);

  background: var(--cream);
  color: var(--ink);
}

.page-about .nav a[aria-current="page"] {
  color: var(--orange);
}

/* --- shared section furniture --------------------------------------- */
.ab-section {
  position: relative;
  padding: var(--sec) var(--gut);
  container-type: inline-size;
}

/* hairline between bands rather than a change of background: the page is
   one continuous sheet of off-white */
.ab-section + .ab-section {
  border-top: 1px solid var(--edge-soft);
}

/* eyebrow: a short orange rule, then the label. The rule is what makes it
   read as architectural rather than as a coloured caption. */
.ab-label {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.1cqw, 20px);
  margin: 0 0 clamp(16px, 1.9cqw, 36px);
  font-size: clamp(10px, .92cqw, 18px);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--charcoal);
}

.ab-label::before {
  content: "";
  flex: none;
  width: clamp(26px, 2.6cqw, 52px);
  height: 2px;
  background: var(--orange);
}

.ab-h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.9cqw, 82px);
  line-height: 1.06;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}

.ab-h span {
  display: block;
}

.ab-p {
  margin: 0 0 clamp(14px, 1.3cqw, 26px);
  font-size: clamp(13px, 1.06cqw, 21px);
  line-height: 1.78;
  color: var(--body);
}

.ab-p:last-child {
  margin-bottom: 0;
}

/* --- buttons --------------------------------------------------------
   Square, not pill: the pill in the shared nav belongs to the marketing
   pages. Here the CTA matches the page's right-angle geometry. */
.ab-btn {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1cqw, 18px);
  padding: clamp(13px, 1.2cqw, 24px) clamp(22px, 2.1cqw, 42px);
  border: 0;
  background: var(--orange);
  color: #fff;
  font-size: clamp(11px, .96cqw, 19px);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .2s ease;
}

.ab-btn:hover {
  background: #d95c1c;
}

.ab-btn svg {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate .25s ease;
}

.ab-btn:hover svg {
  translate: 4px 0;
}

/* underline drawn as a border so it sits at a fixed distance from the
   baseline rather than wherever text-decoration lands */
.ab-link {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, .8cqw, 15px);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--edge);
  font-size: clamp(11px, .96cqw, 19px);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--charcoal);
  transition: color .2s ease, border-color .2s ease;
}

.ab-link:hover {
  color: var(--orange);
  border-color: var(--orange);
}

.ab-link svg {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate .25s ease;
}

.ab-link:hover svg {
  translate: 4px 0;
}

/* ====================================================================
   Hero — copy left, portrait right
   ==================================================================== */
.ab-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 4.6vw, 86px) var(--gut) clamp(44px, 5.4vw, 100px);
  container-type: inline-size;
}

/* the page's architectural grid: five hairlines splitting the hero into
   six columns, same construction the homepage hero uses */
.ab-hero__rules {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ab-hero__rules span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}

.ab-hero__rules span:nth-child(1) { left: 16.6667%; }
.ab-hero__rules span:nth-child(2) { left: 33.3333%; }
.ab-hero__rules span:nth-child(3) { left: 50%; }
.ab-hero__rules span:nth-child(4) { left: 66.6667%; }
.ab-hero__rules span:nth-child(5) { left: 83.3333%; }

.ab-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 27cqw, 400px);
  align-items: center;
  gap: clamp(30px, 5cqw, 96px);
}

.ab-hero__title {
  font-size: clamp(34px, 5.1cqw, 108px);
  line-height: .98;
  margin-bottom: clamp(16px, 1.7cqw, 34px);
}

/* the standfirst sits between the display face and the body copy, so it
   takes the body font at display weight rather than either extreme */
.ab-hero__lede {
  margin: 0 0 clamp(20px, 2.1cqw, 42px);
  padding-bottom: clamp(20px, 2.1cqw, 42px);
  border-bottom: 1px solid var(--edge);
  font-size: clamp(13px, 1.16cqw, 23px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--charcoal);
}

.ab-hero__copy {
  max-width: 58ch;
}

.ab-hero__cta {
  margin-top: clamp(24px, 2.4cqw, 48px);
}

/* --- portrait -------------------------------------------------------
   The source file is 200x240, so the column is capped near that width and
   the frame does the visual work instead of a scaled-up image. Replace
   new-landing-assets/mark-zides-about-hero.png with a larger crop at the
   same 5:6 ratio and this block needs no changes. */
/* Pulled in off the right gutter so the portrait sits inside the page's
   column grid rather than against its edge. */
.ab-hero__figure {
  position: relative;
  margin: 0 clamp(0px, 5cqw, 90px) 0 0;
  justify-self: end;
  width: 100%;
  max-width: 400px;
}

/* offset orange rule + hairline behind the photo: a drawn frame, not a
   container, so the portrait keeps its own edges */
.ab-hero__figure::before {
  content: "";
  position: absolute;
  left: clamp(-26px, -2.4cqw, -12px);
  top: clamp(-26px, -2.4cqw, -12px);
  width: 62%;
  height: 62%;
  border-top: 2px solid var(--orange);
  border-left: 2px solid var(--orange);
  pointer-events: none;
}

.ab-hero__figure::after {
  content: "";
  position: absolute;
  right: clamp(-26px, -2.4cqw, -12px);
  bottom: clamp(-26px, -2.4cqw, -12px);
  width: 62%;
  height: 62%;
  border-bottom: 1px solid var(--edge);
  border-right: 1px solid var(--edge);
  pointer-events: none;
}

.ab-hero__figure img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: 50% 22%;
  /* parallax target — nudged by the page script, capped at a few pixels */
  translate: 0 var(--par, 0px);
  will-change: translate;
}

@media (max-width: 900px) {
  .ab-hero__grid {
    grid-template-columns: 1fr;
    gap: clamp(34px, 8vw, 60px);
  }

  /* copy first, portrait under it */
  .ab-hero__figure {
    justify-self: start;
    order: 2;
    margin-right: 0;
    max-width: 340px;
  }
}

/* ====================================================================
   Proof row — compact, no counters
   ==================================================================== */
.ab-proof {
  padding: 0 var(--gut);
  container-type: inline-size;
}

.ab-proof__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}

.ab-proof__item {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, .8cqw, 15px);
  padding: clamp(20px, 2.2cqw, 44px) clamp(14px, 1.6cqw, 32px);
  border-left: 1px solid var(--edge-soft);
}

.ab-proof__item:first-child {
  border-left: 0;
  padding-left: 0;
}

.ab-proof__icon {
  width: clamp(20px, 1.8cqw, 34px);
  height: clamp(20px, 1.8cqw, 34px);
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ab-proof__figure {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(19px, 1.95cqw, 40px);
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}

.ab-proof__text {
  margin: 0;
  font-size: clamp(11px, .95cqw, 19px);
  line-height: 1.5;
  color: var(--body);
}

@media (max-width: 760px) {
  .ab-proof__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ab-proof__item:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }

  .ab-proof__item:nth-child(n + 3) {
    border-top: 1px solid var(--edge-soft);
  }
}

/* ====================================================================
   Section 2 — the experience behind the advice
   ==================================================================== */
.ab-split {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(26px, 4cqw, 90px);
  align-items: start;
}

.ab-split__copy {
  max-width: 62ch;
}

@media (max-width: 900px) {
  .ab-split {
    grid-template-columns: 1fr;
    gap: clamp(22px, 5vw, 40px);
  }
}

/* ====================================================================
   Section 3 — the journey
   ==================================================================== */
.ab-time {
  margin-top: clamp(30px, 3.6cqw, 78px);
}

/* the rail is a pseudo-element on the list, scaled from the top as the
   section arrives; each row hangs its marker off it */
.ab-time__list {
  position: relative;
  margin: 0;
  padding: 0 0 0 clamp(0px, 0cqw, 0px);
  list-style: none;
}

.ab-time__list::before {
  content: "";
  position: absolute;
  left: clamp(6px, .62cqw, 13px);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--edge);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.4s cubic-bezier(.22, .75, .2, 1);
}

.ab-time__list.is-in::before {
  transform: scaleY(1);
}

.ab-chapter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  gap: clamp(18px, 3cqw, 68px);
  padding: clamp(26px, 3.2cqw, 68px) 0 clamp(26px, 3.2cqw, 68px)
           clamp(26px, 3cqw, 62px);
  border-top: 1px solid var(--edge-soft);
}

.ab-chapter:first-child {
  border-top: 0;
  padding-top: 0;
}

/* marker sits on the rail */
.ab-chapter::before {
  content: "";
  position: absolute;
  left: clamp(2px, .28cqw, 8px);
  top: clamp(30px, 3.4cqw, 72px);
  width: clamp(9px, .78cqw, 15px);
  height: clamp(9px, .78cqw, 15px);
  background: var(--orange);
}

.ab-chapter:first-child::before {
  top: clamp(4px, .5cqw, 10px);
}

.ab-chapter__num {
  display: block;
  margin: 0 0 clamp(10px, 1cqw, 20px);
  font-size: clamp(11px, .95cqw, 19px);
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--orange);
}

.ab-chapter__title {
  margin: 0 0 clamp(6px, .7cqw, 14px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(19px, 2.1cqw, 44px);
  line-height: 1.12;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}

.ab-chapter__org {
  margin: 0 0 clamp(14px, 1.4cqw, 28px);
  font-size: clamp(12px, 1cqw, 20px);
  font-weight: 500;
  color: var(--body);
}

.ab-chapter__icon {
  width: clamp(40px, 3.6cqw, 76px);
  height: clamp(40px, 3.6cqw, 76px);
  margin-bottom: clamp(16px, 1.6cqw, 32px);
  fill: none;
  stroke: var(--orange);
  /* thinned as the drawing grows, so the line weight stays constant */
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ab-chapter__tags {
  margin: clamp(16px, 1.7cqw, 34px) 0 0;
  padding-top: clamp(12px, 1.2cqw, 24px);
  border-top: 1px solid var(--edge-soft);
  font-size: clamp(9px, .84cqw, 17px);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--charcoal);
}

@media (max-width: 900px) {
  .ab-chapter {
    grid-template-columns: 1fr;
    gap: clamp(14px, 3vw, 24px);
  }
}

/* ====================================================================
   Section 4 — a different kind of advisor
   ==================================================================== */
.ab-lens {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4cqw, 52px);
  margin-top: clamp(28px, 3.4cqw, 74px);
}

.ab-lens__item {
  padding-top: clamp(18px, 1.8cqw, 36px);
  border-top: 2px solid var(--ink);
  transition: border-color .25s ease;
}

.ab-lens__item:hover {
  border-color: var(--orange);
}

.ab-lens__icon {
  width: clamp(24px, 2cqw, 40px);
  height: clamp(24px, 2cqw, 40px);
  margin-bottom: clamp(14px, 1.5cqw, 30px);
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .25s ease;
}

.ab-lens__item:hover .ab-lens__icon {
  stroke: var(--orange);
}

.ab-lens__title {
  margin: 0 0 clamp(8px, .9cqw, 18px);
  font-size: clamp(13px, 1.14cqw, 23px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.ab-lens__text {
  margin: 0;
  font-size: clamp(11px, .98cqw, 20px);
  line-height: 1.65;
  color: var(--body);
}

@media (max-width: 1000px) {
  .ab-lens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .ab-lens {
    grid-template-columns: 1fr;
  }
}

/* ====================================================================
   Section 5 — domain experience
   ==================================================================== */
.ab-domains {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(20px, 3cqw, 70px);
  margin: clamp(26px, 3.2cqw, 68px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--edge);
}

.ab-domains li {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.1cqw, 22px);
  padding: clamp(14px, 1.5cqw, 30px) 0;
  border-bottom: 1px solid var(--edge-soft);
  font-size: clamp(13px, 1.16cqw, 24px);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--charcoal);
  transition: color .2s ease, padding-left .25s ease;
}

.ab-domains li:hover {
  color: var(--orange);
  padding-left: clamp(6px, .7cqw, 14px);
}

.ab-domain__icon {
  flex: none;
  width: clamp(24px, 2.1cqw, 42px);
  height: clamp(24px, 2.1cqw, 42px);
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s ease;
}

.ab-domains li:hover .ab-domain__icon {
  stroke: var(--orange);
}

@media (max-width: 860px) {
  .ab-domains {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .ab-domains {
    grid-template-columns: 1fr;
  }
}

/* ====================================================================
   Section 6 — beyond the boardroom
   ==================================================================== */
.ab-voice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4cqw, 88px);
  align-items: start;
}

/* --- TEDx player: poster until asked, same swap the media page uses --- */
.ab-player {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}

.ab-player__poster {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.ab-player__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .3s ease;
}

.ab-player__poster:hover img {
  opacity: .82;
}

.ab-player__play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: clamp(48px, 4.4cqw, 90px);
  height: clamp(48px, 4.4cqw, 90px);
  background: var(--orange);
  transition: background .2s ease;
}

.ab-player__poster:hover .ab-player__play {
  background: #d95c1c;
}

.ab-player__play svg {
  width: 42%;
  height: 42%;
  fill: #fff;
}

.ab-player__frame {
  width: 100%;
  height: 100%;
  border: 0;
}

.ab-player__cap {
  margin: clamp(10px, 1cqw, 20px) 0 0;
  font-size: clamp(10px, .9cqw, 18px);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--charcoal);
}

/* --- book references: secondary to the bio, so text-led with a small
       cover rather than a covers-first sales block ---------------------- */
.ab-books {
  margin: clamp(24px, 2.6cqw, 56px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--edge);
}

.ab-book {
  display: grid;
  grid-template-columns: clamp(50px, 5cqw, 96px) minmax(0, 1fr);
  gap: clamp(14px, 1.6cqw, 32px);
  align-items: start;
  padding: clamp(16px, 1.8cqw, 36px) 0;
  border-bottom: 1px solid var(--edge-soft);
}

.ab-book img {
  width: 100%;
  height: auto;
  border: 1px solid var(--edge-soft);
}

.ab-book__title {
  margin: 0 0 clamp(5px, .55cqw, 11px);
  font-size: clamp(11px, .98cqw, 20px);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
}

.ab-book__text {
  margin: 0;
  font-size: clamp(11px, .98cqw, 20px);
  line-height: 1.6;
  color: var(--body);
}

@media (max-width: 900px) {
  .ab-voice {
    grid-template-columns: 1fr;
  }
}

/* ====================================================================
   Closing
   ==================================================================== */
.ab-close {
  border-top: 2px solid var(--ink);
}

.ab-close__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  gap: clamp(26px, 4cqw, 90px);
  align-items: start;
}

.ab-close__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 2.2cqw, 44px);
  margin-top: clamp(26px, 2.8cqw, 58px);
}

@media (max-width: 900px) {
  .ab-close__grid {
    grid-template-columns: 1fr;
    gap: clamp(22px, 5vw, 40px);
  }
}

/* ====================================================================
   Motion — restrained; the reveal primitives come from new-landing.css
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  .page-about .ab-time__list::before {
    transform: scaleY(1);
    transition: none;
  }

  .page-about .ab-hero__figure img {
    translate: none;
  }
}