/* NorthX v56 — canonical responsive layout engine.
   Compact-screen geometry is content-first: cards size from intrinsic content,
   pinned stages own a stable viewport, and cumulative stories move their content
   rather than shrinking it to fit. Desktop remains entirely owned by styles.css. */

@media (max-width: 900px) {
  :root {
    --nx-vh: var(--pin-vh, 100svh);
    --nx-nav: var(--m-nav-h, 76px);
    --nx-x: clamp(22px, 7vw, 38px);
    --nx-top: calc(var(--nx-nav) + clamp(16px, 2.4svh, 24px));
    --nx-bottom: clamp(18px, 2.4svh, 26px);
    --nx-section-gap: clamp(22px, 3svh, 32px);
    --nx-row-gap: clamp(12px, 1.7svh, 18px);
    --nx-index-w: clamp(34px, 8vw, 44px);

    /* Width owns readability; height only limits the upper bound on short screens. */
    --nx-display: clamp(42px, min(12.6vw, 6.2svh), 60px);
    --nx-card-title: clamp(28px, min(8.2vw, 4.3svh), 39px);
    --nx-body: clamp(16px, min(4.45vw, 2.12svh), 19px);
    --nx-body-lh: 1.48;
    --nx-detail: clamp(13px, min(3.65vw, 1.82svh), 15.5px);
  }

  /* A story always owns one stable viewport. The surrounding track supplies travel. */
  .story-track > .story-stage,
  .hero-pin-stage {
    box-sizing: border-box !important;
    height: var(--nx-vh) !important;
    min-height: var(--nx-vh) !important;
    max-height: var(--nx-vh) !important;
    padding: var(--nx-top) var(--nx-x) var(--nx-bottom) !important;
    overflow: clip !important;
    overscroll-behavior: none !important;
  }

  .story-track .cap,
  .story-track .cap.active,
  .story-track .step,
  .story-track .step.current {
    transform: none !important;
    max-height: none !important;
  }

  /* ---------------- Shared editorial story contract ---------------- */
  .story-about > .story-stage,
  .service-challenges > .story-stage,
  .connect-story > .story-stage {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  .story-about .split,
  .service-challenges .split,
  .connect-story .connect-grid {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    gap: var(--nx-section-gap) !important;
    overflow: visible !important;
  }

  .story-about .section-title,
  .service-challenges .section-title,
  .connect-story .connect-grid > div:first-child {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .story-about .section-title h2,
  .service-challenges .section-title h2,
  .connect-story h2 {
    margin: 0 !important;
    max-width: 100% !important;
    font-size: var(--nx-display) !important;
    line-height: .94 !important;
    letter-spacing: -.047em !important;
    text-wrap: balance;
  }

  .story-about .section-title p,
  .service-challenges .section-title p,
  .connect-story .stage-text {
    margin: clamp(14px, 1.8svh, 19px) 0 0 !important;
    max-width: 35em !important;
    font-size: var(--nx-body) !important;
    line-height: var(--nx-body-lh) !important;
    text-wrap: pretty;
  }

  /* The stack is intrinsic-height. Active cards hug their copy; inactive cards hug
     their title. No card receives leftover viewport height, so wrapped headings cannot
     be cropped and short copy never sits in an oversized empty panel. */
  .story-about .about-caps,
  .service-challenges .challenge-list,
  .connect-story .partnership-list {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    border-top: 1px solid var(--line) !important;
  }

  .story-about .about-caps .cap,
  .service-challenges .challenge-list .cap,
  .connect-story .partnership-list .cap,
  .story-about .about-caps .cap.active,
  .service-challenges .challenge-list .cap.active,
  .connect-story .partnership-list .cap.active {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: var(--nx-index-w) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: clamp(12px, 3.5vw, 18px) !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: clamp(13px, 1.7svh, 18px) 0 !important;
    overflow: visible !important;
    align-content: start !important;
    opacity: .56;
    transition: opacity .22s ease, background .22s ease, border-color .22s ease !important;
  }

  .story-about .about-caps .cap.active,
  .service-challenges .challenge-list .cap.active,
  .connect-story .partnership-list .cap.active {
    opacity: 1 !important;
    padding-top: clamp(16px, 2svh, 22px) !important;
    padding-bottom: clamp(18px, 2.3svh, 26px) !important;
  }

  .story-about .about-caps .cap > span,
  .service-challenges .challenge-list .cap > span,
  .connect-story .partnership-list .cap > span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding-top: .28em !important;
    font-size: clamp(11px, 3vw, 13px) !important;
  }

  .story-about .about-caps .cap h3,
  .service-challenges .challenge-list .cap h3,
  .connect-story .partnership-list .cap h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    margin: 0 !important;
    max-width: 100% !important;
    font-size: var(--nx-card-title) !important;
    line-height: 1.03 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-wrap: balance;
  }

  .story-about .about-caps .cap p,
  .service-challenges .challenge-list .cap p,
  .connect-story .partnership-list .cap p {
    display: none !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: clamp(13px, 1.7svh, 18px) 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 36em !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    font-size: var(--nx-body) !important;
    line-height: var(--nx-body-lh) !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-wrap: pretty;
  }

  .story-about .about-caps .cap.active p,
  .service-challenges .challenge-list .cap.active p,
  .connect-story .partnership-list .cap.active p {
    display: block !important;
  }

  /* ---------------- Process ---------------- */
  .process-v14.story-track > .story-stage {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: stretch !important;
    gap: clamp(18px, 2.5svh, 28px) !important;
  }

  .process-v14.story-track .stage-copy {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
  }

  .process-v14.story-track .stage-copy h2 {
    font-size: clamp(38px, min(10.8vw, 5.5svh), 54px) !important;
    line-height: .91 !important;
    letter-spacing: -.045em !important;
  }

  .process-v14.story-track .stage-text {
    margin-top: clamp(10px, 1.5svh, 16px) !important;
    max-width: 38em !important;
    font-size: clamp(14px, min(3.8vw, 1.85svh), 16px) !important;
    line-height: 1.42 !important;
  }

  .process-v14.story-track .sequence {
    display: grid !important;
    grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
    gap: clamp(5px, .75svh, 8px) !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .process-v14.story-track .step,
  .process-v14.story-track .step.current {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: var(--nx-index-w) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: clamp(9px, 2.5vw, 14px) !important;
    align-content: center !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    padding: clamp(8px, 1.05svh, 12px) clamp(12px, 3.2vw, 18px) !important;
  }

  .process-v14.story-track .step span {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: start !important;
    padding-top: 2px !important;
  }

  .process-v14.story-track .step b {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    font-size: clamp(19px, min(5.6vw, 2.9svh), 27px) !important;
    line-height: 1.02 !important;
  }

  .process-v14.story-track .step p {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 3px 0 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    font-size: clamp(11px, min(3vw, 1.55svh), 13px) !important;
    line-height: 1.28 !important;
    opacity: 0 !important;
  }

  .process-v14.story-track .step.current p {
    max-height: 2.8em !important;
    opacity: 1 !important;
  }

  /* ---------------- Disciplines ----------------
     Cumulative-open semantics stay intact. Content keeps readable typography and its
     natural height. The stack is shifted from measured geometry by script.js so the
     current discipline is composed inside the viewport instead of all rows being squeezed. */
  .story-disciplines > .story-stage {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: clamp(16px, 2.2svh, 24px) !important;
  }

  .story-disciplines .discipline-stack {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
    transform: translate3d(0, var(--discipline-shift, 0px), 0) !important;
    transition: transform .34s cubic-bezier(.22,.61,.36,1) !important;
    will-change: transform;
  }

  .story-disciplines .discipline-row {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .story-disciplines .discipline-head {
    display: grid !important;
    grid-template-columns: var(--nx-index-w) minmax(0, 1fr) 18px !important;
    gap: clamp(12px, 3vw, 18px) !important;
    min-height: 0 !important;
    padding: clamp(14px, 1.8svh, 19px) 0 !important;
    align-items: start !important;
  }

  .story-disciplines .discipline-head em { display: none !important; }

  .story-disciplines .discipline-head b {
    font-size: clamp(27px, min(7.6vw, 4svh), 36px) !important;
    line-height: 1.02 !important;
    text-wrap: balance;
  }

  .story-disciplines .discipline-body-v14,
  .story-disciplines .discipline-row.open .discipline-body-v14 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 clamp(16px, 4vw, 24px) !important;
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 0 clamp(16px, 2svh, 22px) calc(var(--nx-index-w) + clamp(12px, 3vw, 18px)) !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .story-disciplines .discipline-row:not(.open) .discipline-body-v14 {
    display: none !important;
  }

  .story-disciplines .discipline-body-v14 span {
    min-width: 0 !important;
    padding: clamp(7px, .9svh, 10px) 0 !important;
    border-bottom: 1px solid var(--line) !important;
    font-size: clamp(14px, min(3.9vw, 1.95svh), 16.5px) !important;
    line-height: 1.32 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* ---------------- Founder ----------------
     Mobile founder composition uses a strict content budget: identity + statement at the top,
     biography in the middle, proof metrics reserved at the bottom. Typography scales from both
     width and viewport height so prose can never collide with the proof grid. */
  .founder-story > .founder-stage {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    align-content: stretch !important;
    gap: clamp(10px, 1.35svh, 15px) !important;
  }

  .founder-story .founder-grid-v14 {
    display: grid !important;
    grid-template-columns: clamp(82px, 24vw, 108px) minmax(0, 1fr) !important;
    grid-template-areas:
      "portrait statement"
      "identity statement"
      "bio bio"
      "muted muted" !important;
    column-gap: clamp(13px, 3.8vw, 20px) !important;
    row-gap: clamp(5px, .72svh, 8px) !important;
    align-content: start !important;
    align-items: start !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .founder-story .founder-portrait {
    grid-area: portrait !important;
    width: 100% !important;
    max-width: none !important;
    align-self: start !important;
    padding: 6px !important;
  }

  .founder-story .founder-copy-v14 { display: contents !important; }

  .founder-story .founder-copy-v14 .pre {
    grid-area: identity !important;
    align-self: start !important;
    margin: 0 !important;
    max-width: 100% !important;
    font-size: clamp(9px, min(2.55vw, 1.35svh), 10.5px) !important;
    line-height: 1.32 !important;
    letter-spacing: .14em !important;
    text-wrap: balance;
  }

  .founder-story .founder-copy-v14 h2 {
    grid-area: statement !important;
    align-self: center !important;
    margin: 0 !important;
    max-width: none !important;
    font-size: clamp(34px, min(9.4vw, 4.8svh), 44px) !important;
    line-height: .91 !important;
    letter-spacing: -.05em !important;
    text-wrap: balance;
  }

  .founder-story .founder-copy-v14 > p:not(.pre):not(.muted-copy) {
    grid-area: bio !important;
    margin: clamp(2px, .28svh, 4px) 0 0 !important;
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(13.5px, min(3.8vw, 1.72svh), 15.5px) !important;
    line-height: 1.38 !important;
    text-wrap: pretty;
  }

  .founder-story .founder-copy-v14 .muted-copy {
    grid-area: muted !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(12.75px, min(3.55vw, 1.62svh), 14.5px) !important;
    line-height: 1.34 !important;
    opacity: .82 !important;
    text-wrap: pretty;
  }

  .founder-story .about-metrics {
    align-self: end !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px !important;
    margin-top: 0 !important;
    min-height: 0 !important;
  }

  .founder-story .metric {
    min-height: 0 !important;
    height: clamp(74px, 10.5svh, 94px) !important;
    padding: clamp(9px, 1.35svh, 13px) !important;
  }

  .founder-story .metric strong {
    font-size: clamp(30px, min(8.4vw, 4.8svh), 40px) !important;
  }

  .founder-story .metric span {
    font-size: clamp(9.25px, min(2.65vw, 1.35svh), 11px) !important;
    line-height: 1.22 !important;
  }

  /* Stable sticky painting on Safari; no descendant becomes a scroll container. */
  .story-track,
  .story-stage,
  .story-track .cap,
  .story-track .step,
  .story-track .discipline-row {
    overflow-anchor: none !important;
  }

  .story-track > .story-stage {
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
  }
}

/* Height-constrained compact screens use the same architecture. Only typography/gaps
   contract continuously; card sizing remains intrinsic and content-first. */
@media (max-width: 900px) and (max-height: 720px) {
  :root {
    --nx-top: calc(var(--nx-nav) + 10px);
    --nx-bottom: 12px;
    --nx-section-gap: 15px;
    --nx-display: clamp(36px, min(10.3vw, 5.2svh), 46px);
    --nx-card-title: clamp(25px, min(7.2vw, 3.7svh), 32px);
    --nx-body: clamp(14.5px, min(4vw, 1.85svh), 16px);
    --nx-detail: clamp(12px, min(3.3vw, 1.6svh), 14px);
  }

  .story-about .about-caps .cap,
  .service-challenges .challenge-list .cap,
  .connect-story .partnership-list .cap,
  .story-about .about-caps .cap.active,
  .service-challenges .challenge-list .cap.active,
  .connect-story .partnership-list .cap.active {
    padding-top: 10px !important;
    padding-bottom: 11px !important;
  }

  .story-disciplines .discipline-head { padding: 10px 0 !important; }
  .story-disciplines .discipline-body-v14 span { padding: 5px 0 !important; }
}

/* NorthX v59 — Founder mobile editorial flow.
   Canonical mobile founder order:
   portrait -> identity -> full-width statement -> full-width biography -> proof grid.
   This changes composition only; the pinned stage keeps the same viewport budget. */
@media (max-width: 900px) {
  .founder-story .founder-grid-v14 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "portrait"
      "identity"
      "statement"
      "bio"
      "muted" !important;
    width: 100% !important;
    min-width: 0 !important;
    row-gap: clamp(5px, .72svh, 8px) !important;
    align-content: start !important;
  }

  .founder-story .founder-portrait {
    grid-area: portrait !important;
    justify-self: start !important;
    width: clamp(88px, 24vw, 108px) !important;
    max-width: clamp(88px, 24vw, 108px) !important;
  }

  .founder-story .founder-copy-v14 .pre {
    grid-area: identity !important;
    width: min(100%, 280px) !important;
    max-width: none !important;
    margin-top: 0 !important;
  }

  .founder-story .founder-copy-v14 h2 {
    grid-area: statement !important;
    width: 100% !important;
    max-width: none !important;
    margin: clamp(7px, 1svh, 10px) 0 clamp(4px, .55svh, 7px) !important;
    align-self: start !important;
    font-size: clamp(35px, min(10.2vw, 4.7svh), 46px) !important;
    line-height: .94 !important;
    text-wrap: balance !important;
  }

  .founder-story .founder-copy-v14 > p:not(.pre):not(.muted-copy),
  .founder-story .founder-copy-v14 .muted-copy {
    width: 100% !important;
    max-width: none !important;
    padding-right: 0 !important;
    text-wrap: pretty !important;
  }

  .founder-story .founder-copy-v14 > p:not(.pre):not(.muted-copy) {
    grid-area: bio !important;
    margin: 0 !important;
  }

  .founder-story .founder-copy-v14 .muted-copy {
    grid-area: muted !important;
    margin: 0 !important;
  }
}

/* Same layout contract on short phones; only scale/gaps contract continuously. */
@media (max-width: 900px) and (max-height: 720px) {
  .founder-story .founder-grid-v14 {
    row-gap: 4px !important;
  }

  .founder-story .founder-portrait {
    width: clamp(74px, 20vw, 88px) !important;
    max-width: clamp(74px, 20vw, 88px) !important;
    padding: 4px !important;
  }

  .founder-story .founder-copy-v14 .pre {
    font-size: clamp(8.5px, 2.35vw, 9.5px) !important;
    line-height: 1.22 !important;
  }

  .founder-story .founder-copy-v14 h2 {
    font-size: clamp(30px, min(8.7vw, 4.25svh), 38px) !important;
    margin: 4px 0 2px !important;
  }

  .founder-story .founder-copy-v14 > p:not(.pre):not(.muted-copy) {
    font-size: clamp(11.5px, min(3.25vw, 1.62svh), 13.5px) !important;
    line-height: 1.34 !important;
  }

  .founder-story .founder-copy-v14 .muted-copy {
    font-size: clamp(10.75px, min(3vw, 1.52svh), 12.75px) !important;
    line-height: 1.3 !important;
  }
}

/* NorthX v60 — Founder mobile typography refinement.
   Same v59 composition and section height. The biography now uses the available
   full-width measure with a more confident editorial scale and rhythm, while
   remaining height-aware so it cannot collide with the reserved proof grid. */
@media (max-width: 900px) {
  .founder-story .founder-copy-v14 > p:not(.pre):not(.muted-copy) {
    font-size: clamp(16px, min(4.55vw, 2.08svh), 18.5px) !important;
    line-height: 1.52 !important;
    letter-spacing: -0.012em !important;
    margin-top: clamp(3px, .45svh, 6px) !important;
  }

  .founder-story .founder-copy-v14 .muted-copy {
    font-size: clamp(15.5px, min(4.3vw, 1.95svh), 17.5px) !important;
    line-height: 1.5 !important;
    letter-spacing: -0.01em !important;
    margin-top: clamp(10px, 1.35svh, 16px) !important;
    opacity: .84 !important;
  }
}

@media (max-width: 900px) and (max-height: 720px) {
  .founder-story .founder-copy-v14 > p:not(.pre):not(.muted-copy) {
    font-size: clamp(14.5px, min(4.05vw, 1.95svh), 16.5px) !important;
    line-height: 1.44 !important;
  }

  .founder-story .founder-copy-v14 .muted-copy {
    font-size: clamp(14px, min(3.85vw, 1.82svh), 15.75px) !important;
    line-height: 1.42 !important;
    margin-top: clamp(7px, 1svh, 11px) !important;
  }
}

/* NorthX v63 — client feedback polish.
   Founder portrait is treated as editorial imagery rather than a framed CV headshot.
   Contact close is intentionally reduced to one clear email CTA. */
.founder-portrait {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  padding: 0 !important;
  background: radial-gradient(circle at 52% 34%, rgba(201,168,90,.10), rgba(7,27,48,.78) 46%, rgba(3,20,38,1) 82%) !important;
  box-shadow: none !important;
  isolation: isolate;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
}

.founder-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(3,20,38,.02) 46%, rgba(3,20,38,.34) 100%),
    linear-gradient(135deg, rgba(201,168,90,.055), transparent 44%);
}

.founder-portrait img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: 50% 22% !important;
  filter: grayscale(.24) saturate(.64) contrast(1.08) brightness(.92) !important;
  mix-blend-mode: luminosity;
  opacity: .96;
  transform: scale(1.035);
}

@media (min-width: 901px) {
  .founder-portrait {
    aspect-ratio: 4 / 5;
  }
}

@media (max-width: 900px) {
  .founder-story .founder-portrait {
    aspect-ratio: 4 / 5 !important;
  }
}

.contact-line {
  padding-bottom: clamp(54px, 8vh, 96px);
}

.contact-line .email {
  display: inline-block;
  margin-top: clamp(22px, 3vh, 34px);
}

/* NorthX v64 — founder portrait integration.
   Reverts the portrait treatment from an over-styled card to a clean editorial image.
   The cutout image sits naturally in the section, with one source-of-truth layout:
   desktop = portrait column + copy column; mobile = portrait, identity, then full-width copy. */

.founder-story .founder-grid-v14 {
  margin: 0 !important;
}

.founder-story .founder-copy-v14 { display: contents !important; }

.founder-story .founder-portrait {
  position: relative;
  grid-area: portrait !important;
  overflow: visible !important;
  border: 0 !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  isolation: isolate;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.founder-story .founder-portrait::before {
  content: "";
  position: absolute;
  inset: 10% 8% 6%;
  z-index: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 28%, rgba(201,168,90,.16), rgba(201,168,90,.06) 28%, rgba(3,20,38,0) 68%),
    radial-gradient(circle at 50% 65%, rgba(10,33,57,.78), rgba(3,20,38,0) 72%);
  filter: blur(10px);
  opacity: .9;
}

.founder-story .founder-portrait::after {
  display: none !important;
}

.founder-story .founder-portrait img {
  display: block;
  position: relative;
  z-index: 2;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  background: transparent !important;
  filter: saturate(.94) contrast(1.02) brightness(.98) !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  transform: none !important;
}

.founder-story .founder-copy-v14 .pre {
  grid-area: identity !important;
  margin: 0 !important;
  max-width: none !important;
}

.founder-story .founder-copy-v14 h2 {
  grid-area: statement !important;
}

.founder-story .founder-copy-v14 > p:not(.pre):not(.muted-copy) {
  grid-area: bio !important;
}

.founder-story .founder-copy-v14 .muted-copy {
  grid-area: muted !important;
}

@media (min-width: 901px) {
  .founder-story > .founder-stage {
    gap: clamp(24px, 4svh, 42px) !important;
  }

  .founder-story .founder-grid-v14 {
    display: grid !important;
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) !important;
    grid-template-areas:
      "portrait statement"
      "identity statement"
      ". bio"
      ". muted" !important;
    column-gap: clamp(28px, 4vw, 46px) !important;
    row-gap: clamp(8px, 1.2svh, 12px) !important;
    align-items: start !important;
  }

  .founder-story .founder-portrait {
    width: min(220px, 100%) !important;
    max-width: 220px !important;
    align-self: start !important;
    justify-self: start !important;
  }

  .founder-story .founder-copy-v14 .pre {
    align-self: start !important;
    width: 100% !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    letter-spacing: .18em !important;
  }

  .founder-story .founder-copy-v14 h2 {
    margin: 0 !important;
    max-width: 10ch !important;
    font-size: clamp(52px, 5.7vw, 82px) !important;
    line-height: .94 !important;
    letter-spacing: -.055em !important;
  }

  .founder-story .founder-copy-v14 > p:not(.pre):not(.muted-copy),
  .founder-story .founder-copy-v14 .muted-copy {
    width: min(100%, 760px) !important;
    max-width: none !important;
    padding-right: 0 !important;
    text-wrap: pretty !important;
  }

  .founder-story .founder-copy-v14 > p:not(.pre):not(.muted-copy) {
    margin: clamp(6px, .9svh, 10px) 0 0 !important;
    font-size: clamp(19px, 1.65vw, 23px) !important;
    line-height: 1.5 !important;
    letter-spacing: -.012em !important;
  }

  .founder-story .founder-copy-v14 .muted-copy {
    margin: clamp(8px, 1.2svh, 14px) 0 0 !important;
    font-size: clamp(18px, 1.5vw, 21px) !important;
    line-height: 1.48 !important;
    letter-spacing: -.01em !important;
    opacity: .84 !important;
  }
}

@media (max-width: 900px) {
  .founder-story > .founder-stage {
    gap: clamp(16px, 2.2svh, 24px) !important;
  }

  .founder-story .founder-grid-v14 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "portrait"
      "identity"
      "statement"
      "bio"
      "muted" !important;
    row-gap: clamp(6px, .85svh, 10px) !important;
    align-content: start !important;
    align-items: start !important;
    width: 100% !important;
  }

  .founder-story .founder-portrait {
    justify-self: start !important;
    align-self: start !important;
    width: clamp(108px, 31vw, 148px) !important;
    max-width: clamp(108px, 31vw, 148px) !important;
  }

  .founder-story .founder-copy-v14 .pre {
    width: min(100%, 320px) !important;
    font-size: clamp(10.25px, 2.75vw, 11.75px) !important;
    line-height: 1.34 !important;
    letter-spacing: .16em !important;
  }

  .founder-story .founder-copy-v14 h2 {
    width: 100% !important;
    max-width: none !important;
    margin: clamp(4px, .6svh, 8px) 0 0 !important;
    font-size: clamp(40px, 10.8vw, 58px) !important;
    line-height: .94 !important;
    letter-spacing: -.055em !important;
    text-wrap: balance !important;
  }

  .founder-story .founder-copy-v14 > p:not(.pre):not(.muted-copy),
  .founder-story .founder-copy-v14 .muted-copy {
    width: 100% !important;
    max-width: none !important;
    padding-right: 0 !important;
    text-wrap: pretty !important;
  }

  .founder-story .founder-copy-v14 > p:not(.pre):not(.muted-copy) {
    margin: clamp(6px, .9svh, 10px) 0 0 !important;
    font-size: clamp(17px, 4.55vw, 19px) !important;
    line-height: 1.52 !important;
    letter-spacing: -.012em !important;
  }

  .founder-story .founder-copy-v14 .muted-copy {
    margin: clamp(10px, 1.45svh, 16px) 0 0 !important;
    font-size: clamp(16px, 4.2vw, 18px) !important;
    line-height: 1.48 !important;
    letter-spacing: -.01em !important;
    opacity: .84 !important;
  }

  .founder-story .about-metrics {
    margin-top: clamp(12px, 1.8svh, 20px) !important;
  }
}

@media (max-width: 900px) and (max-height: 720px) {
  .founder-story .founder-portrait {
    width: clamp(92px, 25vw, 118px) !important;
    max-width: clamp(92px, 25vw, 118px) !important;
  }

  .founder-story .founder-copy-v14 .pre {
    font-size: clamp(9px, 2.35vw, 10px) !important;
  }

  .founder-story .founder-copy-v14 h2 {
    font-size: clamp(34px, min(9.2vw, 4.35svh), 44px) !important;
  }

  .founder-story .founder-copy-v14 > p:not(.pre):not(.muted-copy) {
    font-size: clamp(14.5px, min(3.9vw, 1.86svh), 16.5px) !important;
    line-height: 1.44 !important;
  }

  .founder-story .founder-copy-v14 .muted-copy {
    font-size: clamp(13.75px, min(3.7vw, 1.76svh), 15.5px) !important;
    line-height: 1.42 !important;
  }
}

/* NorthX v67 — founder portrait scale only.
   Preserve the exact v66 layout footprint. Enlarge only the transparent cutout
   inside its existing portrait slot so no text, metrics, stage height or grid
   geometry moves. */
@media (min-width: 901px) {
  .founder-story .founder-portrait img {
    transform: scale(1.18) !important;
    transform-origin: 50% 100% !important;
  }
}

@media (max-width: 900px) {
  .founder-story .founder-portrait img {
    transform: scale(1.22) !important;
    transform-origin: 0% 100% !important;
  }
}

/* NorthX v68 — canonical founder portrait centering.
   Keep the exact v67 portrait slot and scale. The enlarged cutout is centered
   geometrically inside that existing slot instead of being bottom-anchored,
   so the visual weight sits naturally between the section label and identity
   on every viewport without device-specific offsets. */
.founder-story .founder-portrait {
  display: grid !important;
  place-items: center start !important;
}

@media (min-width: 901px) {
  .founder-story .founder-portrait img {
    transform: scale(1.18) !important;
    transform-origin: 50% 50% !important;
  }
}

@media (max-width: 900px) {
  .founder-story .founder-portrait img {
    transform: scale(1.22) !important;
    transform-origin: 50% 50% !important;
  }
}

/* NorthX v69 — canonical founder fit + experience proof.
   The founder stage is content-first: rows are intrinsic, never compressed into each
   other. A small JS fit pass only scales the existing typography/gaps when the real
   rendered content exceeds the available pinned viewport; it is viewport-driven, not
   device-driven. This keeps the same composition across phones without overlap. */

.experience-proof {
  position: relative;
  width: min(100%, 1480px);
  margin: 0 auto;
  padding: clamp(54px, 7vw, 96px) clamp(28px, 6vw, 96px) clamp(66px, 8vw, 112px);
}

.experience-proof-title {
  margin: 0 0 clamp(20px, 2.6vw, 34px);
  color: var(--gold);
}

.experience-brand-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.experience-brand {
  min-height: clamp(78px, 8.5vw, 116px);
  display: grid;
  place-items: center;
  padding: clamp(18px, 2.4vw, 28px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: rgba(239, 239, 230, .84);
  font-size: clamp(14px, 1.22vw, 18px);
  font-weight: 600;
  letter-spacing: -.015em;
  text-align: center;
  text-wrap: balance;
  background: linear-gradient(135deg, rgba(255,255,255,.018), rgba(255,255,255,0));
}

@media (max-width: 900px) {
  .founder-story > .founder-stage {
    grid-template-rows: auto auto auto !important;
    align-content: start !important;
    gap: var(--founder-stage-gap, clamp(12px, 1.55svh, 18px)) !important;
    overflow: visible !important;
  }

  .founder-story .founder-grid-v14 {
    row-gap: var(--founder-row-gap, clamp(5px, .72svh, 9px)) !important;
  }

  .founder-story .founder-portrait {
    width: var(--founder-portrait-size, clamp(102px, 29vw, 142px)) !important;
    max-width: var(--founder-portrait-size, clamp(102px, 29vw, 142px)) !important;
  }

  .founder-story .founder-copy-v14 .pre {
    font-size: var(--founder-identity-size, clamp(9.5px, 2.55vw, 11.25px)) !important;
  }

  .founder-story .founder-copy-v14 h2 {
    font-size: var(--founder-title-size, clamp(37px, 10.2vw, 52px)) !important;
    line-height: .94 !important;
  }

  .founder-story .founder-copy-v14 > p:not(.pre):not(.muted-copy) {
    font-size: var(--founder-body-size, clamp(15.5px, 4.2vw, 18px)) !important;
    line-height: 1.46 !important;
    margin-top: var(--founder-body-gap, clamp(4px, .6svh, 8px)) !important;
  }

  .founder-story .founder-copy-v14 .muted-copy {
    font-size: var(--founder-muted-size, clamp(14.75px, 4vw, 17px)) !important;
    line-height: 1.44 !important;
    margin-top: var(--founder-muted-gap, clamp(8px, 1.05svh, 13px)) !important;
  }

  .founder-story .about-metrics {
    margin-top: var(--founder-metrics-gap, clamp(10px, 1.3svh, 16px)) !important;
  }

  .founder-story .metric {
    height: var(--founder-metric-height, clamp(70px, 9.7svh, 90px)) !important;
    min-height: 0 !important;
    padding: var(--founder-metric-padding, clamp(8px, 1.15svh, 12px)) !important;
  }

  .founder-story .metric strong {
    font-size: var(--founder-metric-value-size, clamp(28px, 7.7vw, 38px)) !important;
  }

  .founder-story .metric span {
    font-size: var(--founder-metric-label-size, clamp(8.75px, 2.35vw, 10.75px)) !important;
  }

  .experience-proof {
    width: 100%;
    padding: clamp(42px, 6svh, 66px) clamp(24px, 7vw, 38px) clamp(56px, 8svh, 82px);
  }

  .experience-brand-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .experience-brand {
    min-height: clamp(72px, 10svh, 92px);
    padding: clamp(14px, 4vw, 20px);
    font-size: clamp(13px, 3.7vw, 16px);
  }
}

@media (min-width: 901px) {
  .experience-brand-wall {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* NorthX v70 — canonical desktop founder viewport fit + logo proof wall.
   The founder stage no longer vertically centers content that may exceed the usable
   viewport. It composes from the fixed navigation downward, and every founder dimension
   scales from BOTH viewport width and height. This keeps the entire pinned composition
   visible on short and tall laptops without per-device rules. */
@media (min-width: 901px) {
  .founder-story > .founder-stage {
    justify-content: flex-start !important;
    padding-top: clamp(108px, 12svh, 132px) !important;
    padding-bottom: clamp(30px, 4svh, 56px) !important;
    gap: clamp(18px, 2.6svh, 30px) !important;
    overflow: visible !important;
  }

  .founder-story .founder-grid-v14 {
    grid-template-columns: clamp(170px, min(13vw, 23svh), 220px) minmax(0, 1fr) !important;
    column-gap: clamp(28px, min(4vw, 5svh), 46px) !important;
    row-gap: clamp(6px, 1svh, 11px) !important;
    align-content: start !important;
  }

  .founder-story .founder-portrait {
    width: clamp(170px, min(13vw, 23svh), 220px) !important;
    max-width: none !important;
  }

  .founder-story .founder-copy-v14 .pre {
    font-size: clamp(10px, min(.9vw, 1.5svh), 12px) !important;
  }

  .founder-story .founder-copy-v14 h2 {
    font-size: clamp(50px, min(5.7vw, 8.6svh), 82px) !important;
    line-height: .94 !important;
  }

  .founder-story .founder-copy-v14 > p:not(.pre):not(.muted-copy) {
    font-size: clamp(17px, min(1.55vw, 2.45svh), 22px) !important;
    line-height: 1.46 !important;
    margin-top: clamp(4px, .7svh, 9px) !important;
  }

  .founder-story .founder-copy-v14 .muted-copy {
    font-size: clamp(16px, min(1.42vw, 2.2svh), 20px) !important;
    line-height: 1.44 !important;
    margin-top: clamp(6px, .9svh, 12px) !important;
  }

  .founder-story .about-metrics {
    margin-top: 0 !important;
    min-height: 0 !important;
  }

  .founder-story .metric {
    min-height: 0 !important;
    height: clamp(126px, 16svh, 180px) !important;
    padding: clamp(16px, min(1.9vw, 2.6svh), 26px) !important;
  }

  .founder-story .metric strong {
    font-size: clamp(46px, min(5vw, 8svh), 76px) !important;
  }

  .founder-story .metric span {
    font-size: clamp(11px, min(.95vw, 1.8svh), 14px) !important;
    line-height: 1.35 !important;
  }
}

/* The client supplied brand marks become the proof itself; no text substitutes. */
.experience-brand-wall {
  gap: clamp(10px, 1.35vw, 18px) !important;
  border: 0 !important;
  background: transparent !important;
}

.experience-brand {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: hidden;
  border-radius: 16px;
  transition: transform .28s ease, opacity .28s ease;
}

.experience-brand img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: inherit;
  opacity: .88;
  filter: saturate(.9) contrast(.98);
}

@media (hover:hover) and (pointer:fine) {
  .experience-brand:hover {
    transform: translateY(-2px);
  }
  .experience-brand:hover img {
    opacity: 1;
  }
}

@media (max-width: 900px) {
  .experience-brand-wall {
    gap: clamp(9px, 2.6vw, 14px) !important;
  }
  .experience-brand {
    border-radius: 12px;
  }
}

/* NorthX v71 — canonical proof-card sizing + high-resolution brand wall.
   KPI cards size typography from the card/viewport budget so labels never touch or
   cross the border. Brand tiles hold the mark, not a screenshot crop. */

@media (min-width: 901px) {
  .founder-story .about-metrics {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  .founder-story .metric {
    height: auto !important;
    min-height: clamp(132px, 16.5svh, 174px) !important;
    padding: clamp(14px, min(1.6vw, 2.2svh), 22px) !important;
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
    align-content: stretch !important;
    justify-content: stretch !important;
    container-type: size;
  }

  .founder-story .metric strong {
    align-self: start !important;
    line-height: .9 !important;
    font-size: clamp(44px, min(4.6vw, 6.8svh), 72px) !important;
    margin: 0 !important;
  }

  .founder-story .metric span {
    align-self: end !important;
    display: block !important;
    margin-top: clamp(10px, 1.6svh, 16px) !important;
    padding-bottom: 2px !important;
    font-size: clamp(11px, min(.92vw, 1.65svh), 14px) !important;
    line-height: 1.3 !important;
    max-width: 19ch !important;
  }
}

.experience-brand-wall {
  gap: clamp(12px, 1.4vw, 20px) !important;
}

.experience-brand {
  min-height: clamp(104px, 9vw, 140px) !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(18px, 2vw, 28px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(201,168,90,.18) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.965) !important;
}

.experience-brand img {
  display: block !important;
  width: min(76%, 250px) !important;
  height: min(72px, 62%) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* Icon-led marks need less horizontal width; wordmarks get more. */
.experience-brand.brand-mcdonalds img,
.experience-brand.brand-starbucks img {
  width: auto !important;
  height: min(78px, 68%) !important;
}

.experience-brand.brand-hk img,
.experience-brand.brand-raytheon img,
.experience-brand.brand-emaar img,
.experience-brand.brand-gm img {
  width: min(82%, 290px) !important;
  height: auto !important;
  max-height: 62px !important;
}

.experience-brand.brand-ogilvy img {
  width: auto !important;
  height: min(74px, 64%) !important;
}

.experience-brand.brand-ministry img {
  width: min(78%, 260px) !important;
  height: auto !important;
  max-height: 72px !important;
}

@media (hover:hover) and (pointer:fine) {
  .experience-brand:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(201,168,90,.38) !important;
    background: #fff !important;
  }
}

@media (max-width: 900px) {
  .experience-brand-wall {
    gap: clamp(10px, 2.8vw, 14px) !important;
  }

  .experience-brand {
    min-height: clamp(92px, 13svh, 116px) !important;
    padding: clamp(14px, 4vw, 20px) !important;
    border-radius: 12px !important;
  }

  .experience-brand img {
    width: min(78%, 220px) !important;
    height: auto !important;
    max-height: 62px !important;
  }

  .experience-brand.brand-mcdonalds img,
  .experience-brand.brand-starbucks img,
  .experience-brand.brand-ogilvy img {
    width: auto !important;
    height: min(60px, 60%) !important;
  }
}

/* NorthX v74 — stable Founder composition.
   Built directly from v71. Desktop uses a three-row stage:
   section label / balanced profile+narrative / KPI proof row.
   The profile and narrative are intrinsic-height and never flex-collapse, so the KPI
   grid can never stretch over or paint through the Founder content. */
@media (min-width: 901px) {
  .founder-story > .founder-stage {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    justify-content: stretch !important;
    align-content: stretch !important;
    padding-top: clamp(96px, 11svh, 116px) !important;
    padding-bottom: clamp(22px, 3svh, 34px) !important;
    gap: clamp(12px, 1.8svh, 18px) !important;
    overflow: hidden !important;
  }

  .founder-story > .founder-stage > .section-mark {
    margin: 0 !important;
    align-self: start !important;
  }

  .founder-story .founder-grid-v14 {
    display: grid !important;
    grid-template-columns: clamp(220px, min(16vw, 30svh), 278px) minmax(0, 1fr) !important;
    column-gap: clamp(44px, 4.5vw, 72px) !important;
    align-items: center !important;
    align-self: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    flex: none !important;
  }

  .founder-story .founder-profile {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: clamp(10px, 1.3svh, 14px) !important;
    min-width: 0 !important;
  }

  .founder-story .founder-portrait {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .founder-story .founder-identity {
    margin: 0 !important;
    width: 100% !important;
    max-width: 260px !important;
    font-size: clamp(10px, min(.85vw, 1.35svh), 12px) !important;
    line-height: 1.42 !important;
    letter-spacing: .19em !important;
    text-wrap: balance !important;
  }

  .founder-story .founder-copy-v14 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: min(100%, 900px) !important;
    max-width: 900px !important;
    min-width: 0 !important;
  }

  .founder-story .founder-copy-v14 h2 {
    margin: 0 0 clamp(16px, 2svh, 22px) !important;
    max-width: 12ch !important;
    font-size: clamp(54px, min(5.2vw, 7.4svh), 76px) !important;
    line-height: .94 !important;
    letter-spacing: -.055em !important;
    text-wrap: balance !important;
  }

  .founder-story .founder-copy-v14 > p:not(.muted-copy) {
    margin: 0 !important;
    width: min(100%, 820px) !important;
    max-width: none !important;
    padding: 0 !important;
    font-size: clamp(17px, min(1.35vw, 2.05svh), 20.5px) !important;
    line-height: 1.5 !important;
    letter-spacing: -.012em !important;
    text-wrap: pretty !important;
  }

  .founder-story .founder-copy-v14 .muted-copy {
    margin: clamp(12px, 1.6svh, 18px) 0 0 !important;
    width: min(100%, 820px) !important;
    max-width: none !important;
    padding: 0 !important;
    font-size: clamp(16px, min(1.2vw, 1.85svh), 18.5px) !important;
    line-height: 1.48 !important;
    letter-spacing: -.01em !important;
    opacity: .84 !important;
    text-wrap: pretty !important;
  }

  .founder-story .about-metrics {
    margin: 0 !important;
    align-self: end !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    min-height: 0 !important;
    height: auto !important;
    flex: none !important;
  }

  .founder-story .metric {
    height: clamp(138px, 16.5svh, 164px) !important;
    min-height: 0 !important;
    padding: clamp(16px, min(1.55vw, 2.1svh), 22px) !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
  }

  .founder-story .metric strong {
    font-size: clamp(46px, min(4.6vw, 6.8svh), 70px) !important;
    line-height: .9 !important;
  }

  .founder-story .metric span {
    align-self: end !important;
    margin: 0 !important;
    padding-bottom: 2px !important;
    font-size: clamp(11px, min(.9vw, 1.55svh), 13px) !important;
    line-height: 1.3 !important;
  }
}

/* Keep v71's approved mobile composition exactly, while the semantic profile wrapper
   disappears from layout so the original portrait -> identity -> statement -> bio flow remains. */
@media (max-width: 900px) {
  .founder-story .founder-profile,
  .founder-story .founder-copy-v14 {
    display: contents !important;
  }

  .founder-story .founder-portrait { grid-area: portrait !important; }
  .founder-story .founder-identity { grid-area: identity !important; }
  .founder-story .founder-copy-v14 h2 { grid-area: statement !important; }
  .founder-story .founder-copy-v14 > p:not(.muted-copy) { grid-area: bio !important; }
  .founder-story .founder-copy-v14 .muted-copy { grid-area: muted !important; }

  .founder-story .founder-identity {
    margin: 0 !important;
    width: min(100%, 320px) !important;
    font-size: clamp(9.5px, 2.55vw, 11.25px) !important;
    line-height: 1.34 !important;
    letter-spacing: .16em !important;
  }
}

/* NorthX v75 — transparent brand wall on site background.
   Remove white cards, keep the logos floating on the website background,
   and tighten the first mark so the top-left logo reads cleaner. */
.experience-brand-wall {
  gap: clamp(16px, 1.8vw, 26px) !important;
}

.experience-brand {
  min-height: clamp(86px, 8.2vw, 116px) !important;
  padding: clamp(8px, 1vw, 12px) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.experience-brand img {
  display: block !important;
  background: transparent !important;
  width: auto !important;
  max-width: min(82%, 260px) !important;
  height: auto !important;
  max-height: clamp(46px, 4.6vw, 72px) !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Wordmarks that were too dark on the navy background get lifted to a warm light tint. */
.experience-brand.brand-hk img,
.experience-brand.brand-raytheon img,
.experience-brand.brand-emaar img {
  filter: brightness(0) saturate(0) invert(92%) sepia(9%) saturate(217%) hue-rotate(356deg) brightness(101%) contrast(92%) !important;
}

.experience-brand.brand-gm img {
  filter: brightness(1.08) contrast(1.02) !important;
}

/* Icon marks can sit a touch larger; the ministry emblem stays modest to hide source softness. */
.experience-brand.brand-mcdonalds img,
.experience-brand.brand-starbucks img,
.experience-brand.brand-ogilvy img {
  max-height: clamp(52px, 5vw, 78px) !important;
}

.experience-brand.brand-ministry img {
  max-height: clamp(50px, 4.3vw, 64px) !important;
}

@media (hover:hover) and (pointer:fine) {
  .experience-brand:hover {
    transform: translateY(-1px) !important;
    background: transparent !important;
    border: none !important;
  }
}

@media (max-width: 900px) {
  .experience-brand-wall {
    gap: clamp(12px, 3vw, 18px) !important;
  }

  .experience-brand {
    min-height: clamp(76px, 10svh, 100px) !important;
    padding: 6px !important;
  }

  .experience-brand img {
    max-width: 86% !important;
    max-height: clamp(38px, 6.2vw, 56px) !important;
  }

  .experience-brand.brand-mcdonalds img,
  .experience-brand.brand-starbucks img,
  .experience-brand.brand-ogilvy img {
    max-height: clamp(42px, 7vw, 60px) !important;
  }

  .experience-brand.brand-ministry img {
    max-height: clamp(36px, 6vw, 48px) !important;
  }
}

/* NorthX v77 — client revision + canonical single-stage Founder.
   This final layer intentionally supersedes v76's mobile Founder chapter rules.
   The Founder is always one composition; compact screens are fitted from actual
   rendered geometry by script.js, never by model-specific breakpoints. */

/* Five-value client copy remains readable inside the existing About story card,
   while inheriting the exact same typeface and scale as the other About rows. */
.values-copy {
  display: block;
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.values-copy span {
  display: block;
  margin: 0;
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.values-copy span + span {
  margin-top: .24em;
}
.values-copy .values-label {
  display: inline;
  font: inherit;
  font-weight: 600;
  letter-spacing: inherit;
  color: inherit;
}

/* Hero proof now owns five equal pillars. Sales is the far-right pillar on desktop. */
.hero-pin-stage .executive-proof {
  gap: clamp(18px, 2.35vw, 38px) !important;
}
.hero-pin-stage .executive-proof > div {
  min-width: clamp(96px, 8.3vw, 132px) !important;
}

/* Contact CTA + social channels. */
.contact-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(8px, 1.2vw, 16px);
  margin-top: clamp(20px, 3vh, 34px);
}
.contact-cta > span {
  color: rgba(242,240,232,.62);
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.4;
}
.contact-cta .email {
  display: inline-block !important;
  margin: 0 !important;
}
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(24px, 3.4vh, 38px);
}
.social-links a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 190px;
  padding: 13px 0;
  border-top: 1px solid rgba(201,168,90,.24);
  color: rgba(242,240,232,.78);
  transition: color .2s ease, border-color .2s ease;
}
.social-links a:hover {
  color: var(--gold);
  border-color: rgba(201,168,90,.62);
}
.social-links a .social-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--gold);
  opacity: .96;
}
.social-links a b {
  font-size: 14px;
  font-weight: 520;
  letter-spacing: -.01em;
}

@media (min-width: 901px) {
  /* Founder no longer reserves a third KPI row. */
  .founder-story > .founder-stage {
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: clamp(14px, 2svh, 22px) !important;
    overflow: hidden !important;
  }

  .founder-story .founder-grid-v14 {
    align-self: center !important;
  }

  .founder-story .founder-copy-v14 > p {
    width: min(100%, 900px) !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(15.5px, min(1.18vw, 1.9svh), 19px) !important;
    line-height: 1.53 !important;
  }
}

@media (max-width: 900px) {
  /* Hero: five columns on roomy mobile/tablet widths. */
  .hero-pin-stage .executive-proof {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: clamp(8px, 2.4vw, 14px) !important;
  }
  .hero-pin-stage .executive-proof > div {
    min-width: 0 !important;
  }

  /* One Founder stage, one Founder grid, all content visible at once. */
  .founder-story > .founder-stage {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: stretch !important;
    justify-content: stretch !important;
    gap: var(--founder-stage-gap, clamp(12px, 1.6svh, 18px)) !important;
    overflow: hidden !important;
  }

  .founder-story .founder-grid-v14 {
    display: grid !important;
    grid-template-columns: var(--founder-portrait-size, clamp(88px, 24vw, 118px)) minmax(0, 1fr) !important;
    grid-template-areas:
      "portrait statement"
      "identity statement"
      "bio bio" !important;
    grid-template-rows: auto auto auto !important;
    column-gap: var(--founder-column-gap, clamp(16px, 4.4vw, 24px)) !important;
    row-gap: var(--founder-row-gap, clamp(8px, 1.15svh, 12px)) !important;
    align-content: center !important;
    align-items: start !important;
    align-self: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .founder-story .founder-profile,
  .founder-story .founder-copy-v14 {
    display: contents !important;
  }

  .founder-story .founder-portrait {
    grid-area: portrait !important;
    width: var(--founder-portrait-size, clamp(88px, 24vw, 118px)) !important;
    max-width: var(--founder-portrait-size, clamp(88px, 24vw, 118px)) !important;
    margin: 0 !important;
  }

  .founder-story .founder-identity {
    grid-area: identity !important;
    width: 100% !important;
    max-width: var(--founder-portrait-size, clamp(88px, 24vw, 118px)) !important;
    margin: 0 !important;
    font-size: var(--founder-identity-size, clamp(8.6px, min(2.35vw, 1.45svh), 10.5px)) !important;
    line-height: 1.32 !important;
    letter-spacing: .14em !important;
    text-wrap: balance !important;
  }

  .founder-story .founder-copy-v14 h2 {
    grid-area: statement !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 9.5ch !important;
    margin: 0 !important;
    font-size: var(--founder-title-size, clamp(32px, min(9.4vw, 5.5svh), 46px)) !important;
    line-height: .94 !important;
    letter-spacing: -.052em !important;
    text-wrap: balance !important;
  }

  .founder-story .founder-copy-v14 > p {
    grid-area: bio !important;
    width: 100% !important;
    max-width: none !important;
    margin: var(--founder-body-gap, clamp(5px, .75svh, 8px)) 0 0 !important;
    padding: 0 !important;
    font-size: var(--founder-body-size, clamp(13px, min(3.55vw, 1.92svh), 16px)) !important;
    line-height: 1.44 !important;
    letter-spacing: -.008em !important;
    text-wrap: pretty !important;
  }

  /* The removed Founder KPI block must never leave inherited grid space. */
  .founder-story .about-metrics { display: none !important; }

  .contact-cta {
    gap: 7px 10px;
  }
  .contact-cta > span {
    width: 100%;
    font-size: 14px;
  }
  .contact-cta .email {
    font-size: clamp(28px, 8.5vw, 40px) !important;
  }
  .social-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .social-links a {
    min-width: 0;
  }
}

@media (max-width: 620px) {
  /* Five KPI pillars wrap canonically rather than being squeezed into unreadable columns. */
  .hero-pin-stage .executive-proof {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    row-gap: clamp(12px, 1.8svh, 18px) !important;
  }
  .hero-pin-stage .executive-proof strong {
    font-size: clamp(18px, min(5.5vw, 3svh), 23px) !important;
  }
  .hero-pin-stage .executive-proof span {
    font-size: clamp(8px, min(2.45vw, 1.35svh), 10px) !important;
  }

  .executive-copy h1 {
    max-width: 12ch !important;
    font-size: clamp(39px, min(11.8vw, 7.1svh), 56px) !important;
  }
}

@media (max-width: 390px) {
  .founder-story .founder-grid-v14 {
    grid-template-columns: var(--founder-portrait-size, clamp(80px, 23vw, 96px)) minmax(0, 1fr) !important;
    column-gap: var(--founder-column-gap, clamp(12px, 3.7vw, 18px)) !important;
    row-gap: var(--founder-row-gap, clamp(6px, .95svh, 9px)) !important;
  }
  .founder-story .founder-portrait {
    width: var(--founder-portrait-size, clamp(80px, 23vw, 96px)) !important;
    max-width: var(--founder-portrait-size, clamp(80px, 23vw, 96px)) !important;
  }
  .founder-story .founder-identity {
    max-width: var(--founder-portrait-size, clamp(80px, 23vw, 96px)) !important;
  }
  .founder-story .founder-copy-v14 h2 {
    font-size: var(--founder-title-size, clamp(29px, min(8.6vw, 5.1svh), 38px)) !important;
  }
  .founder-story .founder-copy-v14 > p {
    font-size: var(--founder-body-size, clamp(12.2px, min(3.35vw, 1.82svh), 14.5px)) !important;
    line-height: 1.4 !important;
  }

  .social-links {
    grid-template-columns: 1fr;
  }
}


/* NorthX v79 — current-section nav state + official Ministry of Tourism mark. */
.nav nav a.is-active,
.nav nav a[aria-current="page"] {
  color: var(--gold) !important;
}
.nav nav a.is-active::after,
.nav nav a[aria-current="page"]::after {
  right: 0 !important;
}

.experience-brand.brand-ministry img {
  width: auto !important;
  max-width: min(88%, 220px) !important;
  max-height: clamp(62px, 5.4vw, 86px) !important;
  filter: none !important;
}

@media (max-width: 900px) {
  .experience-brand.brand-ministry img {
    max-width: 88% !important;
    max-height: clamp(48px, 9vw, 66px) !important;
  }
}


/* NorthX v80 — touch nav state.
   Touch browsers can keep :hover latched after a tap. On coarse/no-hover pointers the
   scroll-owned .is-active / aria-current state is the ONLY visual nav highlight. */
@media (hover: none), (pointer: coarse) {
  .nav nav a:hover {
    color: inherit !important;
  }
  .nav nav a:hover::after {
    right: 100% !important;
  }
  .nav nav a.is-active,
  .nav nav a[aria-current="page"],
  .nav nav a.is-active:hover,
  .nav nav a[aria-current="page"]:hover {
    color: var(--gold) !important;
  }
  .nav nav a.is-active::after,
  .nav nav a[aria-current="page"]::after,
  .nav nav a.is-active:hover::after,
  .nav nav a[aria-current="page"]:hover::after {
    right: 0 !important;
  }
}