/* The Thinking Upgrade podcast page, plus its two standing pages
   (editorial-position.html, duty-of-care.html).

   Every value here is lifted from the live pages (index.html, pillar-*.html)
   so this page reads as part of the same site: same 1100px column, same
   eyebrow labels, same Freeman navy headings, same 12px white cards on
   #f2f2f2, same 6px Heritage Blue buttons, same footer. Those pages style
   inline through the dc runtime; this page is plain HTML, so the same values
   live in classes instead. */

@font-face {
  font-family: 'Freeman';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/font-06.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Freeman';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/font-02.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Roboto latin: one variable file covers every weight used here */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/font-03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #0a1236;
  color: #0a1236;
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { font-family: 'Freeman', sans-serif; font-weight: 400; margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid #00b2f0; outline-offset: 3px; }

.inner { max-width: 1100px; margin: 0 auto; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(40px, 6vw, 72px); align-items: center; }

/* bands: same colours and padding as the homepage */
.band { padding: clamp(60px, 8vw, 96px) 24px; }
.navy { background: #0a1236; color: #f2f2f2; }
.white { background: #ffffff; }
.off { background: #f2f2f2; }
.blue { background: #0070bf; color: #ffffff; }

/* eyebrow labels */
.eyebrow { font-weight: 500; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; margin: 0 0 20px; color: #0070bf; }
.navy .eyebrow { color: #00fff0; }
.blue .eyebrow { color: #ffffff; opacity: 0.85; }

/* headings */
.h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.15; color: #0a1236; margin: 0 0 18px; }
.navy .h2, .blue .h2 { color: #f2f2f2; }
.lead { font-weight: 500; font-size: 17px; line-height: 1.6; color: #0070bf; margin: 0 0 18px; }
.body { font-size: 16px; line-height: 1.7; }
.body + .body { margin-top: 16px; }

/* buttons: the homepage's */
.btns { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btns.center { justify-content: center; }
.btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 17px; line-height: 1.2; padding: 15px 34px; border-radius: 6px; cursor: pointer; }
.btn-blue { background: #0070bf; color: #ffffff; }
.btn-blue:hover { background: #00b2f0; color: #0a1236; }
.btn-ghost { border: 1px solid rgba(242,242,242,0.4); color: #f2f2f2; padding: 14px 32px; }
.btn-ghost:hover { border-color: #00fff0; color: #00fff0; }
.btn-line { border: 1px solid rgba(10,18,54,0.3); color: #0a1236; font-size: 15px; padding: 12px 26px; }
.btn-line:hover { border-color: #0070bf; color: #0070bf; }
.btn-navy { background: #0a1236; color: #ffffff; }
.btn-navy:hover { background: #00fff0; color: #0a1236; }
.btn svg { width: 13px; height: 13px; flex: none; }

/* ---------- nav + hero (index.html) ---------- */
.hero { padding: 0 24px 80px; }
.site-nav { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 0; }
.site-nav a { color: #f2f2f2; font-size: 15px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: #00fff0; }
.site-nav a.nav-cta { background: #0070bf; color: #ffffff; font-weight: 500; padding: 10px 22px; border-radius: 6px; white-space: nowrap; }
.site-nav a.nav-cta:hover { background: #00b2f0; color: #0a1236; }
.logo { display: block; height: 34px; width: 134px; background: #ffffff;
  -webkit-mask: url('assets/maximy-logo-white.svg') no-repeat left center / contain;
  mask: url('assets/maximy-logo-white.svg') no-repeat left center / contain; }

.hero-grid { max-width: 1100px; margin: 0 auto; padding-top: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero .eyebrow { margin-bottom: 28px; }
.hero h1 { font-size: clamp(38px, 5vw, 56px); line-height: 1.08; }
.hero h1 .l1 { display: block; color: #00fff0; }
.hero h1 .l2 { display: block; color: #00b2f0; }
.hero-copy { color: #f2f2f2; font-size: clamp(16px, 1.8vw, 18px); line-height: 1.65; max-width: 620px; margin: 28px 0 0; }
.hero-copy + .hero-copy { margin-top: 14px; }
.standfirst { color: #ffffff; font-size: clamp(18px, 1.9vw, 20px); line-height: 1.5; margin: 26px 0 0; }
.standfirst strong { font-weight: 700; }
.standfirst + .hero-copy { margin-top: 16px; }
.hero .btns { margin-top: 40px; }

/* the arrow mark: same construction as index.html */
.mark { position: relative; width: min(520px, 100%); aspect-ratio: 1000 / 1084; justify-self: center; }
.mark svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mark .photo { position: absolute; left: 13.2%; top: 14.11%; width: 74%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; opacity: 0; transition: opacity 1.2s ease; }
.mark .photo.on { opacity: 1; }
.mark .photo img { width: 100%; height: 100%; object-fit: cover; }

/* trailer play / pause button (hero) */
.trailer-btn .i-pause { display: none; }
.trailer-btn.is-playing .i-play { display: none; }
.trailer-btn.is-playing .i-pause { display: block; }
.trailer-btn.is-playing { border-color: #00fff0; color: #00fff0; }
.trailer-time { font-variant-numeric: tabular-nums; font-weight: 400; opacity: 0.75; min-width: 2.6em; }
.trailer-time:empty { display: none; }

/* ---------- why this exists (pillar "Why it matters") ---------- */
.why-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.question { max-width: 820px; margin: 0 auto; text-align: center; }
.question .eyebrow { margin-bottom: 18px; }
.question blockquote { margin: 0; font-family: 'Freeman', sans-serif; font-size: clamp(30px, 4.2vw, 48px); line-height: 1.18; color: #f2f2f2; text-wrap: balance; }
.question p { font-size: clamp(17px, 1.9vw, 20px); line-height: 1.65; margin: 24px auto 0; max-width: 620px; color: #f2f2f2; }
.question strong { color: #00fff0; font-weight: 500; }

/* ---------- the journey ---------- */
.journey { padding: clamp(68px, 9vw, 110px) 24px; }
.journey-split { align-items: center; }
.journey-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }
.journey-head .h2 { font-size: clamp(34px, 5vw, 56px); margin-bottom: 24px; }
.journey-head .body { color: #e3f1fb; font-size: 17px; }

.care { margin: 32px 0 0; background: rgba(10,18,54,0.28); border-radius: 12px; padding: clamp(24px, 3vw, 32px); }
.care .body { color: #f2f2f2; font-size: 17px; }
.care .steps { font-family: 'Freeman', sans-serif; font-size: clamp(20px, 2vw, 24px); line-height: 1.3; color: #ffffff; margin-top: 14px; }

.parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); column-gap: clamp(36px, 4vw, 48px); row-gap: 0; }
.part { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
.part-text { margin-bottom: 28px; }
.part .num { font-family: 'Freeman', sans-serif; font-size: clamp(64px, 7vw, 84px); line-height: 1; color: #00fff0; margin-bottom: 14px; }
.part h3 { font-size: 26px; line-height: 1.2; color: #ffffff; margin-bottom: 12px; }
.part .ask { font-weight: 700; font-size: 17px; line-height: 1.5; color: #ffffff; margin-bottom: 16px; }
.part .body { font-size: 15.5px; color: #f2f2f2; }
.part .body + .body { margin-top: 14px; }
.challenge { align-self: stretch; }
.challenge div { height: 100%; }
.challenge div { background: #0070bf; border-radius: 12px; padding: 22px 24px; }
.challenge .eyebrow { font-size: 12px; letter-spacing: 0.2em; margin: 0 0 10px; color: #00fff0; opacity: 1; }
.challenge p { font-family: 'Freeman', sans-serif; font-size: 21px; line-height: 1.3; color: #ffffff; }
.part-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 16px; }
.part-foot .btn { font-size: 15px; padding: 12px 26px; }
.btn-white { background: #ffffff; color: #0a1236; }
.btn-white:hover { background: #00fff0; color: #0a1236; }
@media (max-width: 939px) { .part-foot { margin-bottom: 48px; } .part:last-child .part-foot { margin-bottom: 0; } }
.soon { align-self: flex-start; margin: 0; font-size: 13px; color: #ffffff; border: 1px solid rgba(255,255,255,0.45); border-radius: 999px; padding: 6px 14px; }

.chain { margin-top: clamp(52px, 6vw, 72px); padding-top: clamp(40px, 5vw, 52px); border-top: 1px solid rgba(242,242,242,0.14); text-align: center; }
.chain-row { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 22px); flex-wrap: wrap; }
.chain-row span { font-family: 'Freeman', sans-serif; font-size: clamp(20px, 2.6vw, 30px); color: #ffffff; }
.chain-row span:last-child { color: #00fff0; }
.chain-row i { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid #00fff0; }
.chain p { font-size: 17px; line-height: 1.65; color: #f2f2f2; margin: 24px auto 40px; max-width: 560px; }

/* ---------- start here (pillar marketplace "Start here" card) ---------- */
.intro { font-size: 17px; line-height: 1.6; margin: 0 0 36px; }
.intro strong { font-weight: 700; }
.episode { background: #ffffff; border-radius: 12px; box-shadow: 0 1px 3px rgba(10,18,54,0.08); overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.episode-img img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.episode-body { padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 40px); display: flex; flex-direction: column; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tag { font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 9px; border-radius: 4px; background: #e3f1fb; color: #0070bf; }
.tag.gold { background: #f5c24a; color: #0a1236; }
.episode h3 { font-size: clamp(24px, 2.8vw, 30px); line-height: 1.2; color: #0a1236; }
.episode .who { font-size: 14px; color: rgba(10,18,54,0.7); margin: 8px 0 18px; }
.episode .body { font-size: 16px; }
.episode .note { font-size: 13.5px; line-height: 1.6; color: rgba(10,18,54,0.65); margin: 22px 0 22px; }
.episode .btns { margin-top: auto; padding-top: 26px; }
.episode .btn { padding: 15px 26px; }
.episode .btn-line { font-size: 17px; padding: 14px 25px; }
@media (min-width: 900px) { .episode { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.episode .transcript { margin-top: 16px; }
.text-link { font-weight: 500; font-size: 15px; color: #0070bf; }
.text-link:hover { color: #00b2f0; }

/* ---------- who this is for (pillar "How our Thinking Squad could aid you") ---------- */
.panel { background: #f2f2f2; border-radius: 12px; padding: clamp(28px, 4vw, 40px); }
.panel h3 { font-size: 22px; line-height: 1.25; color: #0a1236; margin-bottom: 14px; }
.panel .through { font-size: 15px; color: rgba(10,18,54,0.7); margin-bottom: 12px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills span { font-size: 13.5px; color: #0a1236; background: #ffffff; border: 1px solid rgba(10,18,54,0.15); border-radius: 999px; padding: 7px 13px; }
.panel p.close { font-family: 'Freeman', sans-serif; font-size: 20px; line-height: 1.3; color: #0070bf; margin-top: 24px; }

/* ---------- the invitation (index.html "Close") ---------- */
.invite { padding: clamp(68px, 9vw, 110px) 24px; }
.invite .inner { max-width: 760px; text-align: center; }
.invite .body { font-size: 17px; color: #f2f2f2; }
.invite .body.first { color: #ffffff; font-weight: 700; }
.invite h2.close-line { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; color: #00fff0; margin: 36px 0 36px; text-wrap: balance; }

/* ---------- meet the team ---------- */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 36px; }
.person { background: #ffffff; border-radius: 12px; box-shadow: 0 1px 3px rgba(10,18,54,0.08); overflow: hidden; }
.person img, .person .pending { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.person .pending { display: flex; align-items: center; justify-content: center; background: #0a1236; font-family: 'Freeman', sans-serif; font-size: 56px; color: #00b2f0; }
.person div.txt { padding: 22px 24px 26px; }
.person h3 { font-size: 22px; color: #0a1236; margin-bottom: 6px; }
.team-btns .btn { font-size: 16px; padding: 14px 28px; }
.team-btns .btn-line { padding: 13px 27px; }
.person p { font-weight: 500; font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #0070bf; }

/* ---------- footer (index.html), with a subscribe strip on top ---------- */
.foot { padding: 0 24px 56px; }
.subscribe { max-width: 760px; margin: 0 auto; padding-top: clamp(60px, 8vw, 90px); text-align: center; }
.subscribe h2 { font-size: clamp(28px, 3.6vw, 40px); color: #f2f2f2; margin-bottom: 16px; }
.subscribe p { font-size: 17px; line-height: 1.7; color: #f2f2f2; margin-bottom: 36px; }
.foot-main { max-width: 1100px; margin: clamp(56px, 8vw, 80px) auto 0; border-top: 1px solid rgba(242,242,242,0.12); padding-top: clamp(40px, 6vw, 64px); }
.foot-cols { display: flex; gap: clamp(32px, 5vw, 64px); flex-wrap: wrap; justify-content: space-between; }
.foot-links { display: flex; gap: clamp(32px, 5vw, 72px); flex-wrap: wrap; }
.foot-col { display: flex; flex-direction: column; gap: 16px; min-width: 200px; }
.foot-col .hd { font-weight: 700; font-size: 15px; margin: 0 0 4px; color: #00b2f0; }
.foot-col .hd.teal { color: #00fff0; }
.foot-col a { color: #f2f2f2; font-size: 15px; line-height: 1.4; }
.foot-col a:hover { color: #00fff0; }
.foot-base { border-top: 1px solid rgba(0,255,240,0.4); margin-top: clamp(40px, 6vw, 64px); padding-top: 24px; display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap; }
.foot-base p { font-size: 14px; color: #f2f2f2; }
.foot-base a { color: #f2f2f2; font-size: 14px; text-decoration: underline; }
.foot-base a:hover, .foot-base a[aria-current="page"] { color: #00fff0; }

/* ---------- biographies page (podcast-team.html) ---------- */
.back-top { margin: 0 0 28px; font-size: 15px; font-weight: 500; }
.back-top a { color: #f2f2f2; }
.back-top a:hover { color: #00fff0; }
.bios { display: flex; flex-direction: column; gap: 20px; }
.bio { background: #ffffff; border-radius: 12px; box-shadow: 0 1px 3px rgba(10,18,54,0.08); overflow: hidden; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.bio img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.bio-txt { padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 44px); align-self: center; }
.bio-txt .eyebrow { font-size: 12.5px; letter-spacing: 0.2em; margin-bottom: 10px; }
.bio-txt h2 { font-size: clamp(26px, 3vw, 32px); color: #0a1236; margin-bottom: 16px; }
.bio-txt .body { max-width: 640px; }
.bios + .back { margin-top: 40px; }
@media (max-width: 640px) {
  .bio { grid-template-columns: 1fr; }
  .bio img { height: auto; aspect-ratio: 1; min-height: 0; }
}

/* ---------- thinking template page (thinking-template.html) ---------- */
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; margin-top: 12px; }
.principle { background: #ffffff; border-radius: 12px; box-shadow: 0 1px 3px rgba(10,18,54,0.08); padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; }
.principle .n { font-family: 'Freeman', sans-serif; font-size: 15px; color: #00b2f0; }
.principle h3 { font-size: 22px; line-height: 1.2; color: #0a1236; }
.principle p { font-size: 15.5px; line-height: 1.6; color: rgba(10,18,54,0.75); }
.before { max-width: 720px; }
.before .text-link { text-decoration: underline; }
.before .get { margin-top: 36px; }

/* ---------- standing pages ---------- */
.page-hero { padding: 0 24px clamp(64px, 8vw, 96px); }
.page-hero .inner { padding-top: clamp(36px, 6vw, 72px); }
.page-hero h1 { font-size: clamp(38px, 5.6vw, 64px); line-height: 1.08; color: #00b2f0; }
.page-hero .hero-copy { max-width: 640px; }
.standing { max-width: 720px; }
.standing .body { font-size: 17px; }
.standing .back { margin-top: 40px; }

@media (max-width: 640px) {
  .hero { padding-bottom: 72px; }
  .btn { padding: 14px 26px; font-size: 16px; }
  .btn-ghost { padding: 13px 24px; }
}
@media (max-width: 760px) { .journey-photo img { aspect-ratio: 4 / 3; } }