/* CG156 MetaLab review: additions only. Published CSS files stay as they are. */

/* Founder: the speaking wall. A full-width stage shot, and Hill Day closes on a complete row. */
.tg-wall .tg-shot.w3{grid-column:1/-1}
.tg-wall .tg-shot.w3 img{aspect-ratio:21/9}
.tg-shot:focus-within{outline:2px solid var(--px-blue);outline-offset:3px}

/* Founder: Off the stage, a portrait gallery. */
.tg-moments{background:var(--px-paper2)}
.tg-mo-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:end;margin:0 0 clamp(32px,4vw,48px)}
.tg-mo-head h2{font:400 clamp(40px,4.6vw,64px)/1.02 var(--px-serif);letter-spacing:-.025em;color:var(--px-ink);margin:0}
.tg-mo-head .px-sub{margin:0;max-width:34ch}
.tg-mo-note{display:grid;gap:6px;padding:18px 20px;border-radius:16px;background:var(--px-card);box-shadow:var(--sh-hi),var(--sh-2);text-decoration:none;color:var(--px-ink);transition:transform .35s var(--ease-out),box-shadow .35s}
.tg-mo-nk{font:500 11px/1.2 var(--px-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--px-blue)}
.tg-mo-nt{font:450 19px/1.3 var(--px-serif);letter-spacing:-.01em}
.tg-mo-ng{font:500 13.5px/1.2 var(--px-sans);color:var(--px-blue)}
.tg-mo-note:hover{transform:translateY(-2px);box-shadow:var(--sh-hi),var(--sh-3)}
.tg-mo-note:focus-visible{outline:2px solid var(--px-blue);outline-offset:3px}

.tg-mo-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.tg-mo{margin:0;position:relative;border-radius:16px;overflow:hidden;background:var(--px-card);box-shadow:var(--sh-hi),var(--sh-1)}
.tg-mo img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.tg-mo-big{grid-row:span 2}
.tg-mo-pair{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;gap:16px;background:none;box-shadow:none;border-radius:0;overflow:visible}
.tg-mo-pair img{border-radius:16px;box-shadow:var(--sh-hi),var(--sh-1);background:var(--px-card)}
.tg-mo figcaption{position:absolute;left:14px;bottom:12px;max-width:calc(100% - 28px);font:500 11px/1.25 var(--px-mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#00000073;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px 11px;border-radius:999px;box-sizing:border-box}

@media (max-width:980px){
  .tg-mo-head{grid-template-columns:1fr 1fr;align-items:start}
  .tg-mo-head h2{grid-column:1/-1}
}
@media (max-width:700px){
  .tg-mo-head{grid-template-columns:1fr;gap:16px}
  .tg-mo-grid{grid-template-columns:1fr 1fr;gap:10px}
  .tg-mo-big{grid-column:1/-1;grid-row:auto}
  .tg-mo-big img{aspect-ratio:4/5}
  .tg-mo-pair{grid-column:1/-1;gap:10px}
  .tg-mo figcaption{left:10px;bottom:10px;max-width:calc(100% - 20px);font-size:10px;padding:6px 9px}
  /* the wall's small tiles: the caption sits under the photo, not over it */
  .tg-wall .tg-shot:not(.w2):not(.w3):not(.hero):not(.tg-hdlast){display:flex;flex-direction:column;background:none;box-shadow:none;overflow:visible;border-radius:0}
  .tg-wall .tg-shot:not(.w2):not(.w3):not(.hero):not(.tg-hdlast) img{border-radius:12px;height:auto;box-shadow:var(--sh-hi),var(--sh-1);background:var(--px-card)}
  .tg-wall .tg-shot:not(.w2):not(.w3):not(.hero):not(.tg-hdlast) figcaption{position:static;max-width:none;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--px-mute);padding:8px 2px 4px;border-radius:0;font-size:10px!important;line-height:1.35}
  .tg-wall .tg-shot.tg-hdlast{grid-column:1/-1}
  .tg-wall .tg-shot.w3 img{aspect-ratio:3/2}
}
@media (prefers-reduced-motion:reduce){.tg-mo-note{transition:none}.tg-mo-note:hover{transform:none}}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tg-moments{background:var(--px-paper2)}
  :root:not([data-theme="light"]) .tg-wall .tg-shot:not(.w2):not(.w3):not(.hero):not(.tg-hdlast) figcaption{color:var(--px-mute)}
}

/* Letter: one bar at a time. The nav steps out while the reading bar is on. */
.px-head{transition:opacity .25s var(--ease-out),visibility 0s linear 0s}
body:has(.px-rbar.on) .px-head{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ease-out),visibility 0s linear .2s}

/* Do we fit: the score board stays in view beside the questions. */
@media (min-width:981px){
  .tg-sky-home .tg-fit,.tg-fit-card,.tg-sky-home .tg-fit-card{overflow:clip}
  .tg-fit-cin{position:sticky;top:104px}
}

/* How we invest: the fifth layer closes the panel as a full row. */
@media (min-width:901px){
  .tg-lyrs>li:last-child:nth-child(odd){grid-column:1/-1;border-top:1px solid #ffffff33}
  .tg-lyrs>li:last-child:nth-child(odd) p{max-width:72ch}
}

/* 404: the heading sits on the same centre line as the number. */
.px-mini h1{margin-left:auto;margin-right:auto}

/* Footer on phones: two columns, not one long list. */
@media (max-width:480px){
  .tg-ft-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
}