/* ===========================================================================
   AUTHOR PAGE — NISHANT BIJANI · exact 1440 build, v3
   Sections stack in normal flow; each keeps pixel-exact internals at 1440.
   Sources: Figma CSS dump, the 1440 x 6617 PDF export, and the section
   screenshots of 18 Sep 2026 — measured programmatically and fitted against
   the real Satoshi / Bebas Neue metrics, not by eye.
   Below 1440 the page scales proportionally (viewing aid only).
   =========================================================================== */

@font-face{font-family:"Satoshi";src:url("fonts/Satoshi-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("fonts/Satoshi-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("fonts/Satoshi-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ease-brand:cubic-bezier(0.22,1,0.36,1);
  --dur-fast:233ms; --dur-base:377ms; --dur-slow:610ms;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#F2EFEC;font-family:"Satoshi",sans-serif;-webkit-font-smoothing:antialiased}
img,svg,video{display:block}
/* Images here are sized and offset explicitly, often wider than their frame
   (avatar 151px in a 105px circle, blog art 600px in 389px). A host reset of
   img{max-width:100%} squeezes them and leaves an empty strip, so undo it. */
img{max-width:none}
p,h1,h2,h3,blockquote,figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid #010101;outline-offset:3px}

#stage{width:100%;overflow:hidden}
.page{position:relative;width:1440px;margin:0 auto;background:#F2EFEC;transform-origin:top left}
.sec{position:relative;width:1440px}

/* =================================================================== NAV == */
.nav{position:absolute;left:64px;top:0;width:1352px;height:66px;z-index:20;
  background:linear-gradient(180deg,rgba(250,250,250,.2) 0%,rgba(250,250,250,0) 100%)}
.nav__inner{position:absolute;left:0;top:24px;width:1312px;height:42px}
.nav__logo{position:absolute;left:-0.6px;top:0;width:42.68px;height:42.04px;color:#010101}
.nav__logo svg{width:100%;height:100%}
.nav__right{position:absolute;right:0;top:0;display:flex;align-items:center;gap:8px;width:635px;height:42px}
.nav__pill{display:flex;align-items:center;padding:0 24px;gap:8px;width:476px;height:42px;background:#010101;border-radius:24px}
.nav__item{display:flex;justify-content:center;align-items:center;padding:10px;gap:10px;height:42px}
.nav__item--services{width:117px}.nav__item--industries{width:108px}
.nav__item--portfolio{width:82px}.nav__item--resources{width:112px}
.nav__dot{width:8px;height:8px;background:#FEFEFE;border-radius:50%}
.nav__label{font-weight:500;font-size:16px;line-height:22px;color:#868686;
  transition:color var(--dur-fast) var(--ease-brand)}
.nav__item:hover .nav__label{color:#FAFAFA}
.nav__label--active{color:#FAFAFA}
.nav__chev{width:8px;height:4px}
.nav__contact{display:flex;align-items:center;padding:0 6px;gap:8px;width:151px;height:42px;background:#010101;border-radius:24px}
.nav__contact-label{display:flex;justify-content:center;align-items:center;padding:10px;width:101px;height:42px;
  font-weight:500;font-size:16px;line-height:22px;color:#868686}
.nav__contact-circle{display:flex;align-items:center;justify-content:center;width:30px;height:30px;background:#FAFAFA;border-radius:30px;
  transition:transform var(--dur-base) var(--ease-brand)}
.nav__contact:hover .nav__contact-circle{transform:rotate(45deg)}
.nav__burger,.nav__menu{display:none}

/* ======================================================= S1 HERO (819) == */
.s-hero{height:819px}
.hero__panel{position:absolute;left:719px;top:109px;width:657px;height:705px;
  background:rgba(0,0,0,.21);border-radius:5px;overflow:hidden}
.hero__panel img{position:absolute;left:-17px;top:-75.8px;width:663px;height:841.5px}
.hero__title{position:absolute;left:53px;top:160px;width:854px;height:140px;z-index:1;
  font-weight:700;font-size:140px;line-height:140px;letter-spacing:-0.06em;color:#1B1917}
.hero__role{position:absolute;left:64px;top:320px;width:335px;height:62px;
  font-weight:700;font-size:23px;line-height:31px;letter-spacing:-0.02em;color:#1B1917}
.hero__stray{position:absolute;left:64px;top:525px;width:24px;height:24px;background:#F6F2EB;border-radius:50%}
.hero__socials{position:absolute;left:63px;top:686px;display:flex;align-items:center;gap:16px;width:144px;height:64px}
.hero__social{display:flex;align-items:center;justify-content:center;width:64px;height:64px;background:#868686;border-radius:8px;
  transition:background var(--dur-fast) var(--ease-brand)}
.hero__social:hover{background:#010101}
.rule{position:absolute;height:0;border-top:1px solid #CECBC9} /* lightened from #868686 on request — brand n-300 */
.rule--1{left:64px;top:814px;width:1312px}

/* ============================================= S2 BIO + STATS (813) ===== */
.s-bio{height:813px}
.bio{position:absolute;left:64px;top:59px;width:1311.66px;height:304px;
  display:flex;justify-content:space-between;align-items:center;gap:314px}
.bio__col{display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:902px;height:304px}
.bio__lead{width:902px;height:126px;font-weight:700;font-size:36px;line-height:42px;letter-spacing:-0.02em;color:#010101;display:flex;align-items:center}
.bio__body{width:902px;height:162px;font-weight:500;font-size:20px;line-height:27px;color:#44423F}
.laurels{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:39.09px;width:95.66px;height:304px}
.laurel{position:relative;width:95.66px;height:72px;color:#868686}
.laurel svg{width:95.66px;height:72px}
.laurel__text{position:absolute;left:20.57px;top:3.09px;width:54.51px;height:43.05px;
  display:flex;flex-direction:column;justify-content:center;align-items:center}
.laurel__sm{align-self:stretch;font-weight:500;font-size:10.2856px;line-height:14px;text-align:center;color:#010101;margin:-2.05712px 0}
.laurel__lg{font-weight:700;font-size:14.3998px;line-height:19px;text-align:center;color:#010101;margin:-2.05712px 0;white-space:nowrap}
.laurel__sm--last{margin:0}
.rule--2{left:64px;top:427px;width:1311px}

/* Stats: fitted to the screenshot — numbers 70px Bold / no tracking (ink
   157 x 53, matched to 0.1px); labels 24px Regular in #777472.           */
.stat__num{position:absolute;white-space:nowrap;font-weight:700;font-size:70px;line-height:80px;color:#010101}
/* Odometer: each digit is a strip of 0-9 that rolls to its value. Columns are
   sized to the final digit's advance width, so the settled state is identical
   to plain text (and JS swaps plain text back in once it lands).           */
.odo{display:inline-block;vertical-align:top;height:var(--lh,80px);position:relative;clip-path:inset(0 -60% 0 -60%)}
.odo__strip{display:block;text-align:center;will-change:transform}
.odo__strip span{display:block;height:var(--lh,80px);line-height:var(--lh,80px)}
.odo-plus{display:inline-block;vertical-align:top;transition:opacity 420ms var(--ease-brand),transform 520ms var(--ease-brand)}
.odo-plus.is-pending{opacity:0;transform:translateY(14px) scale(.6)}
.stat__label{transition:opacity 600ms var(--ease-brand),transform 600ms var(--ease-brand)}
.stat__label{position:absolute;white-space:nowrap;font-weight:400;font-size:24px;line-height:32px;color:#777472}

/* ================================================== S3 PODCAST (1016) == */
.s-pod{height:1016px}
.pod__band{position:absolute;left:0;top:0;width:1440px;height:605px;background:#010101}
.pod__title{position:absolute;left:0;width:1440px;text-align:center;
  font-weight:700;font-size:72px;line-height:80px;color:#F9F6F3}
.pod__intro{position:absolute;left:89px;width:1262px;text-align:center;
  font-weight:500;font-size:24px;line-height:32px;color:#CECBC9}

/* Video card — sits at x 229, i.e. centred on x=744 (24px right of page
   centre), exactly as drawn.                                              */
.cto{position:absolute;left:229px;top:382px;width:1031px;height:426px;border-radius:16px;overflow:hidden;
  display:block;background:#1B1917;isolation:isolate}
.cto__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cto::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.67);z-index:1}
.cto__title{position:absolute;left:0;width:100%;z-index:2;text-align:center;
  font-family:"Bebas Neue","Satoshi",sans-serif;font-weight:400;font-size:100px;line-height:100px;color:#F6F2EB;
  transition:opacity var(--dur-base) var(--ease-brand),transform var(--dur-base) var(--ease-brand)}
.cto:hover .cto__title,.cto:focus-visible .cto__title{opacity:0;transform:translateY(-8px)}
.cto__cta{position:absolute;left:0;width:100%;z-index:2;display:flex;justify-content:center;align-items:center;gap:16px}
.cto__cta-label{font-weight:500;font-size:22px;line-height:30px;color:#F6F2EB}
.cto__cta-circle{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#F6F2EB;
  transition:transform var(--dur-base) var(--ease-brand)}
.cto:hover .cto__cta-circle{transform:rotate(45deg)}
.cto:focus-visible{outline:2px solid #F6F2EB;outline-offset:4px}

/* Episode tabs. On hover/focus the tab itself grows into a full card —
   320 x 180 YouTube thumbnail, episode meta and title — centred on the tab
   (96px up and 96px down, 340 x 272). Only inset/radius animate, per the
   motion contract. Its bottom stays 50px clear of the quote text.          */
.ep{position:absolute;top:862px;width:340px;height:80px;z-index:1}
.ep:hover,.ep:focus-within{z-index:6}
.ep--1{left:89px}.ep--2{left:549px}.ep--3{left:1009px}
.ep__pill{position:absolute;inset:0;display:block;border-radius:40px;background:#F9F6F3;overflow:hidden;
  box-shadow:0 0 16px rgba(0,0,0,.12);
  transition:inset var(--dur-slow) var(--ease-brand),border-radius var(--dur-slow) var(--ease-brand),
             box-shadow var(--dur-base) var(--ease-brand)}
.ep__pill:hover,.ep__pill:focus-visible{inset:-96px 0;border-radius:20px;box-shadow:0 18px 44px rgba(0,0,0,.24)}
.ep__pill:focus-visible{outline:2px solid #010101;outline-offset:4px}
/* default face stays centred while the card grows around it */
.ep__face{position:absolute;left:0;right:0;top:50%;height:80px;margin-top:-40px;
  transition:opacity var(--dur-fast) var(--ease-brand)}
.ep__pill:hover .ep__face,.ep__pill:focus-visible .ep__face{opacity:0}
/* CTO disc is a PNG (3x), so the tab never waits on a webfont */
.ep__disc{position:absolute;left:15px;top:15px;width:50px;height:50px}
.ep__num{position:absolute;left:76px;white-space:nowrap;font-weight:500;font-size:16px;line-height:22px;color:#010101}
.ep__spk{position:absolute;left:76px;white-space:nowrap;font-weight:500;font-size:12px;line-height:16px;color:#010101}
.ep__play{position:absolute;right:20px;top:24px;width:27px;height:32px}
/* the card face */
.ep__alt{position:absolute;inset:0;opacity:0;transition:opacity var(--dur-fast) var(--ease-brand)}
.ep__pill:hover .ep__alt,.ep__pill:focus-visible .ep__alt{opacity:1;transition:opacity var(--dur-base) var(--ease-brand) 120ms}
.ep__thumbwrap{position:absolute;left:10px;top:10px;width:calc(100% - 20px);aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#1B1917}
.ep__thumb{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform var(--dur-slow) var(--ease-brand)}
.ep__pill:hover .ep__thumb,.ep__pill:focus-visible .ep__thumb{transform:none}
.ep__thumbplay{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
  background:rgba(250,250,250,.94);display:flex;align-items:center;justify-content:center;padding-left:3px;
  box-shadow:0 4px 14px rgba(0,0,0,.25)}
.ep__meta{position:absolute;left:14px;right:14px;bottom:54px;font-weight:500;font-size:12px;line-height:16px;
  letter-spacing:.04em;text-transform:uppercase;color:#868686}
.ep__title{position:absolute;left:14px;right:14px;bottom:12px;font-weight:700;font-size:15px;line-height:20px;color:#17110E;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ==================================================== S4 QUOTE (645) ==== */
.s-quote{height:645px}
.quote__text{position:absolute;left:376px;width:747px;text-align:center;
  font-weight:500;font-size:32px;line-height:43px;color:#000}
.quote__sign{position:absolute;left:647px;top:331px;width:197px;
  display:flex;flex-direction:column;align-items:center;gap:26px}
.quote__avatar{position:relative;width:105px;height:105px;border-radius:66px;overflow:hidden;flex:none}
.quote__avatar img{position:absolute;left:-25.9px;top:-1.8px;width:151.3px;height:112.1px}
.quote__names{display:flex;flex-direction:column;align-items:center;width:197px}
/* Signature is a PNG (3x) cropped to the ink; the 43px line box is kept
   by the margins so the block below does not shift. */
.quote__script{display:block;width:110.7px;height:37.3px;margin:3px auto 2.7px}
.quote__name{align-self:stretch;height:43px;font-weight:500;font-size:32px;line-height:43px;text-align:center;color:#000}

/* Quote mark: the original vector, at its spec position (326, 2429 on the
   6617 frame -> 76px into this section, 4px below the quote's top).       */
.quote__mark{position:absolute;left:325.9px;top:76px;width:40.16px;height:31.87px;color:#010101;
  transition:opacity 500ms var(--ease-brand),transform 600ms var(--ease-brand)}
.quote__mark.is-pending{opacity:0;transform:scale(.6) translateY(6px)}

/* Typing. Every character is laid out from the start and only its visibility
   changes, so line breaks never move while it types.                      */
.typing .ch{visibility:hidden}
.typing .ch.on{visibility:visible}
.caret{position:absolute;left:0;top:0;width:2px;height:1.06em;background:#010101;pointer-events:none;opacity:0}
.typing .caret{opacity:1}
.caret.is-blinking{animation:caretBlink 1s steps(1) infinite}
.caret.is-gone{opacity:0!important;transition:opacity 300ms}
@keyframes caretBlink{50%{opacity:0}}
.sign-wait .quote__avatar,.sign-wait .quote__script,.sign-wait .quote__name{opacity:0;transform:translateY(10px)}
.quote__avatar,.quote__script,.quote__name{transition:opacity 600ms var(--ease-brand),transform 600ms var(--ease-brand)}
.quote__script{transition-delay:140ms}.quote__name{transition-delay:260ms}

/* ========================================= S5 BLOGS (825 collapsed) ===== */
.s-blogs{padding:57px 0 103px}
.blogs__count{margin-left:60px;height:32px;font-weight:400;font-size:24px;line-height:32px;color:#777472}
.blogs{margin:36px 0 0 60px;width:1313px;display:flex;flex-direction:column;gap:24px}
.blogs__row{display:flex;gap:25px;width:1313px;height:524px}
.blogs__row[hidden]{display:none!important}
.blogs__row.is-new .card{animation:cardIn 610ms var(--ease-brand) both}
.blogs__row.is-new .card:nth-child(2){animation-delay:70ms}
.blogs__row.is-new .card:nth-child(3){animation-delay:140ms}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.card{position:relative;width:421px;height:524px;flex:none;background:#FAFAFA;border:1px solid #E4E4E4;border-radius:16px;
  transition:transform var(--dur-base) var(--ease-brand),box-shadow var(--dur-base) var(--ease-brand)}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.08)}
.card__img{position:absolute;left:15px;top:15px;width:389px;height:264px;border-radius:8px;overflow:hidden}
.card__img img{position:absolute;left:-105.4px;top:0;width:599.7px;height:264px}
.card__chip{position:absolute;left:15px;top:295px;height:38px;display:flex;align-items:center;padding:8px 16px;
  background:#FAFAFA;box-shadow:inset -1px -1px 4px rgba(0,0,0,.1),inset 1px 1px 4px rgba(0,0,0,.1);border-radius:8px;
  font-weight:400;font-size:16px;line-height:22px;color:#010101;white-space:nowrap}
.card__date{position:absolute;right:15px;top:303px;font-weight:400;font-size:16px;line-height:22px;color:#010101;white-space:nowrap}
.card__title{position:absolute;left:15px;top:349px;width:389px;font-weight:700;font-size:24px;line-height:32px;color:#010101}
.card__cta{position:absolute;left:15px;top:469px;height:30px;display:flex;align-items:center;gap:6px}
.card__cta-circle{display:flex;justify-content:center;align-items:center;width:30px;height:30px;background:#010101;border-radius:90px;flex:none;
  transition:transform var(--dur-base) var(--ease-brand)}
.card:hover .card__cta-circle{transform:translateX(3px)}
.card__cta-label{font-weight:500;font-size:12px;line-height:16px;text-transform:uppercase;color:#010101}

.blogs__more{display:flex;justify-content:center;margin-top:43px;height:30px;padding-right:8px} /* centred on x 716, as drawn */
.more{display:flex;align-items:center;gap:10px;height:30px;
  font-weight:500;font-size:12px;line-height:16px;text-transform:uppercase;color:#010101}
.more__circle{display:flex;justify-content:center;align-items:center;width:30px;height:30px;border-radius:50%;background:#010101;
  transition:transform var(--dur-base) var(--ease-brand)}
.more:hover .more__circle{transform:translateY(3px)}
.more__circle svg{transition:transform var(--dur-base) var(--ease-brand)}
.more[aria-expanded="true"] .more__circle svg{transform:rotate(180deg)}
.more[aria-expanded="true"]:hover .more__circle{transform:translateY(-3px)}

/* ================================================== S6 CONTACT (825) ==== */
.s-contact{height:825px}
.contact{position:absolute;left:72px;top:142px;width:1312px;height:554px;
  display:flex;justify-content:space-between;align-items:center;gap:23px}
.contact__col{display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:756px;height:272px}
.contact__title{width:756px;height:160px;font-weight:700;font-size:70px;line-height:80px;color:#010101}
.contact__body{width:756px;height:96px;font-weight:400;font-size:24px;line-height:32px;color:#545454}
.contact__card{position:relative;width:533px;height:554px;background:#010101;border-radius:16px}
.contact__heading{position:absolute;left:0;width:100%;top:24px;text-align:center;font-weight:700;font-size:24px;line-height:32px;color:#FAFAFA}
.contact__fields{position:absolute;left:24px;top:80px;width:485px;display:flex;flex-direction:column;gap:24px}
.field{display:block;padding:10px 12px;width:485px;height:50px;border:1px solid rgba(250,250,250,.5);border-radius:8px;
  background:transparent;font-family:inherit;font-weight:400;font-size:16px;line-height:22px;color:#FAFAFA;
  transition:border-color var(--dur-fast) var(--ease-brand)}
.field::placeholder{color:#868686}
.field:hover,.field:focus{border-color:rgba(250,250,250,.85);outline:none}
.field--select{appearance:none;color:#868686;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M.5.5l5.5 5.5L11.5.5' fill='none' stroke='%23FAFAFA'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.field--message{height:100px;resize:none}
.contact__cta{position:absolute;left:0;width:100%;top:500px;display:flex;justify-content:center;align-items:center;gap:6px}
.contact__cta-circle{display:flex;justify-content:center;align-items:center;width:30px;height:30px;background:#FAFAFA;border-radius:90px;flex:none;
  transition:transform var(--dur-base) var(--ease-brand)}
.contact__cta:hover .contact__cta-circle{transform:translateX(3px)}
.contact__cta-label{font-weight:500;font-size:12px;line-height:15px;text-transform:uppercase;color:#FAFAFA}

/* =================================================== S7 FOOTER (825) ==== */
.s-footer{height:825px}
.footer{position:absolute;left:32px;top:84px;width:1392px;height:578px;background:#010101;border-radius:24px}
.footer__inner{position:absolute;left:40px;top:40px;width:1312px;height:498px;display:flex;flex-direction:column;align-items:center;gap:80px}
.awards{display:flex;align-items:center;gap:48px;width:1296px;height:64px}
.award{width:64px;height:64px;flex:none}
.footer__group{position:relative;width:1312px;height:354px}
.footer__logo{position:absolute;left:0;top:0;width:180px;height:40px;color:#FAFAFA}
.footer__logo svg{position:absolute;left:-0.5px;top:1.4px;width:172.15px;height:38.22px}
.footer__blurb{position:absolute;left:0;top:56px;width:421px;font-weight:400;font-size:16px;line-height:22px;color:#868686}
.footer__col{position:absolute;top:0;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.footer__col--services{left:668px}.footer__col--quick{left:891px}.footer__col--touch{left:1113px}
.footer__h{font-weight:700;font-size:24px;line-height:32px;color:#FAFAFA}
.footer__links{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.footer__links--touch{gap:12px}
.footer__link{font-weight:400;font-size:16px;line-height:22px;color:#868686;transition:color var(--dur-fast) var(--ease-brand)}
.footer__link:hover{color:#FAFAFA}
.footer__legal{position:absolute;left:0;top:300px;width:1312px;display:flex;flex-direction:column;gap:16px}
.footer__hr{width:1312px;height:0;border-top:1px solid rgba(250,250,250,.5)}
.footer__legal-row{display:flex;justify-content:space-between;align-items:center;width:1312px;height:38px}
.footer__copy{display:flex;align-items:center;gap:8px;font-weight:400;font-size:16px;line-height:22px;color:#868686}
.footer__copy a{text-decoration:underline;text-underline-offset:3px}
.footer__copy a:hover{color:#FAFAFA}
.footer__right{display:flex;align-items:center;gap:143px}
.footer__locales{display:flex;align-items:center;gap:12px}
.locale{display:flex;align-items:center;padding:8px;gap:8px;height:38px}
.locale__flag{height:16px;width:auto;border-radius:24px}
.locale span{font-weight:400;font-size:16px;line-height:22px;color:#868686;white-space:nowrap}
.footer__socials{display:flex;align-items:center;gap:16px}
.footer__socials a{width:24px;height:24px;color:#868686;transition:color var(--dur-fast) var(--ease-brand)}
.footer__socials a:hover{color:#FAFAFA}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ===================================================================
   CALIBRATED POSITIONS — box tops/lefts solved from each element's target
   ink position in the screenshots, using the live font metrics.
   (Check: the quote solved to top 72, the same value the original Figma
   spec gives independently.)
   =================================================================== */
#n1,#n2,#n3{top:507.5px}
#l1,#l2,#l3{top:603.5px}
#n1,#l1{left:67px}
#n2,#l2{left:565px}
#n3,#l3{left:1063px}
.pod__title{top:76.5px}
.pod__intro{top:201.5px}
.cto__title{top:168px}
.cto__cta{top:278px;height:34px}
.ep__num{left:75px;top:20px}
.ep__spk{left:75px;top:42px}
.quote__text{top:72px}
.s-blogs{padding-top:57.5px}
.blogs__count{margin-left:61px}
.blogs{margin-top:35.5px}


/* ===========================================================================
   WIDE SCREENS (>1440): the design stays 1440 wide and centred; the podcast
   band runs edge to edge so it doesn't read as a floating block.
   =========================================================================== */
@media (min-width:1441px){
  .pod__band{left:calc(720px - 50vw);width:100vw}
}

/* ===========================================================================
   FLUID LAYOUT (<1280). Every section drops its fixed 1440 coordinates and
   flows. Type steps down with the viewport; nothing below keeps a px width.
   Tablet 768–1279 · phone <768 · small phone <600
   =========================================================================== */
@media (max-width:1279.98px){
  /* Brand gutters: 24 tablet, 16 phone. Vertical rhythm on the Fibonacci
     ladder (8·13·21·34·55·89·144). Type uses ONLY the two φ ladders, fixed
     per breakpoint, with tracking looked up by rendered size.            */
  :root{--g:24px}
  #stage{height:auto!important}
  .page{width:100%;transform:none!important}
  .sec{width:100%;height:auto!important}

  /* ---- nav ---- */
  .nav{position:relative;left:auto;top:auto;width:100%;height:auto;padding:20px var(--g) 0;background:none;z-index:40}
  .nav__inner{position:relative;top:auto;width:100%;height:42px}
  .nav__logo{left:0}
  .nav__right{width:auto}

  /* ---- hero: text left, portrait right; the name still runs over the photo ---- */
  .s-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);grid-template-rows:auto auto 1fr auto auto;
    padding:40px var(--g) 0}
  .hero__panel,.hero__title,.hero__role,.hero__socials,.rule--1{position:relative;left:auto;top:auto}
  /* Hero name is a display size, deliberately off the type ladder (the ladder
     tops out at 72 and the design uses 140). It is sized so the name overlaps
     the portrait by the same 15.8% of the panel as the 1440 design, at every
     width, and never exceeds the design's 140px.                          */
  .hero__title{grid-column:1 / -1;grid-row:1;width:auto;height:auto;margin-top:34px;
    font-size:min(140px, calc(11.174vw - 7.12px));line-height:1.05;letter-spacing:-0.05em;
    white-space:nowrap;z-index:2;pointer-events:none}
  .hero__role{grid-column:1;grid-row:2;width:auto;height:auto;margin-top:21px;
    font-size:22px;line-height:27px;letter-spacing:-0.01em}
  .hero__stray{display:none}
  .hero__socials{grid-column:1;grid-row:4;width:auto;height:auto;align-self:end;margin-top:32px}
  .hero__panel{grid-column:2;grid-row:1 / 5;width:100%;height:auto;aspect-ratio:657/705}
  .hero__panel img{left:-2.59%;top:-10.75%;width:100.91%;height:119.36%}
  .rule--1{grid-column:1 / -1;grid-row:5;width:auto;margin-top:55px}

  /* ---- bio + laurels + stats ---- */
  .s-bio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;
    grid-template-areas:"bio bio bio" "rule rule rule" "n1 n2 n3" "l1 l2 l3";padding:55px var(--g) 89px}
  .bio{position:static;grid-area:bio;width:auto;height:auto;gap:48px;align-items:flex-start}
  .bio__col,.bio__lead,.bio__body{width:auto;height:auto}
  .bio__lead{font-size:28px;line-height:34px;letter-spacing:-0.02em}
  .bio__body{font-size:19px;line-height:31px;letter-spacing:0}
  .laurels{width:auto;height:auto;flex:none;gap:28px}
  .rule--2{position:static;grid-area:rule;width:auto;margin:55px 0}
  #n1,#n2,#n3,#l1,#l2,#l3{position:static}
  #n1{grid-area:n1}#n2{grid-area:n2}#n3{grid-area:n3}#l1{grid-area:l1}#l2{grid-area:l2}#l3{grid-area:l3}
  .stat__num{font-size:57px;line-height:60px;letter-spacing:-0.04em}
  .stat__label{white-space:normal;margin-top:8px;font-size:19px;line-height:31px;letter-spacing:0}

  /* ---- podcast: the dark band now wraps the heading and runs to the card's middle ---- */
  .s-pod{--ov:calc((100vw - 2 * var(--g)) * 426 / 1031 / 2);padding-bottom:72px}
  .pod__band{display:none}
  .pod__head{background:#010101;padding:89px var(--g) calc(var(--ov) + 55px)}
  .pod__title,.pod__intro{position:static;left:auto;width:auto}
  .pod__title{font-size:57px;line-height:60px;letter-spacing:-0.04em}
  .pod__intro{max-width:920px;margin:21px auto 0;font-size:21px;line-height:34px;letter-spacing:-0.01em}
  .cto{position:relative;left:auto;top:auto;width:auto;height:auto;margin:calc(-1 * var(--ov)) var(--g) 0;
    aspect-ratio:1031/426;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:21px}
  .cto__title,.cto__cta{position:relative;top:auto;left:auto;width:auto}
  .cto__title{font-size:72px;line-height:76px}
  .cto__cta-label{font-size:19px;line-height:31px}
  .cto__cta{height:auto}
  .pod__eps{display:grid;grid-template-columns:repeat(3,minmax(0,340px));justify-content:center;gap:24px;padding:40px var(--g) 0}
  .ep{position:relative;left:auto;top:auto;width:auto;height:80px}

  /* ---- quote ---- */
  .s-quote{padding:89px var(--g)}
  .quote{position:relative;max-width:620px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
  .quote__mark{position:absolute;left:-50px;top:4px;width:40.16px;height:31.87px;margin:0}
  .quote__text{position:relative;left:auto;top:auto;width:auto;font-size:28px;line-height:34px;letter-spacing:-0.02em}
  .quote__sign{position:static;width:auto;margin-top:34px}
  .quote__names{width:auto}
  .quote__script{width:auto;height:29px;margin:2px auto 3px}
  .quote__name{font-size:28px;line-height:34px;height:auto;letter-spacing:-0.02em}

  /* ---- blogs: one flowing grid; rows only group cards for Explore more ---- */
  .s-blogs{padding:55px 0 89px}
  .blogs__count{margin-left:var(--g);font-size:19px;line-height:31px}
  .blogs{margin:28px var(--g) 0;width:auto;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:24px}
  .blogs__row{display:contents}
  .card{flex:0 0 calc((100% - 48px) / 3);width:auto;height:auto;display:flex;flex-direction:column;gap:14px;padding:15px}
  .card__img,.card__chip,.card__date,.card__title,.card__cta{position:relative;left:auto;top:auto;right:auto}
  .card__img{width:100%;height:auto;aspect-ratio:389/264}
  .card__img img{left:-27.1%;width:154.16%;height:100%}
  .card__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
  .card__title{width:auto;font-size:22px;line-height:27px;letter-spacing:-0.01em}
  .card__cta{margin-top:auto;padding-top:6px}
  .blogs__more{padding-right:0;margin-top:40px}

  /* ---- contact ---- */
  .s-contact{padding:89px var(--g)}
  .contact{position:static;width:auto;height:auto;gap:48px}
  .contact__col{width:auto;height:auto;flex:1 1 0;min-width:0}
  .contact__title{width:auto;height:auto;font-size:57px;line-height:60px;letter-spacing:-0.04em}
  .contact__body{width:auto;height:auto;font-size:21px;line-height:34px;letter-spacing:-0.01em}
  .contact__card{flex:0 0 min(533px,46%);height:auto;padding:24px 24px 28px;display:flex;flex-direction:column}
  .contact__heading,.contact__fields,.contact__cta{position:static;left:auto;top:auto;width:auto}
  .contact__fields{margin-top:24px}
  .field{width:100%}
  .contact__cta{margin-top:26px}

  /* ---- footer ---- */
  .s-footer{padding:0 var(--g) 40px}
  .footer{position:static;width:auto;height:auto;padding:40px 36px}
  .footer__inner{position:static;width:auto;height:auto;gap:48px}
  .awards{width:100%;height:auto;flex-wrap:wrap;justify-content:center;gap:24px 36px}
  .footer__group{position:static;width:100%;height:auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px 32px}
  .footer__logo,.footer__blurb,.footer__col,.footer__legal{position:relative;left:auto;top:auto}
  .footer__logo{display:block}
  .footer__blurb{margin-top:16px;width:auto;max-width:421px}
  .footer__legal{grid-column:1 / -1;width:auto}
  .footer__hr,.footer__legal-row{width:100%}
  .footer__legal-row{height:auto;flex-wrap:wrap;gap:16px 24px}
  .footer__right{flex-wrap:wrap;gap:16px 32px}
}

/* ---- tablet portrait and small laptops ---- */
@media (max-width:1023.98px){
  :root{--g:24px}
  .pod__eps{grid-template-columns:minmax(0,340px);gap:16px}
  .card{flex-basis:calc((100% - 24px) / 2)}
  .contact{flex-direction:column;align-items:stretch}
  .contact__col{flex:none}
  .contact__card{flex:none;width:100%;max-width:560px;align-self:center}
  .footer__group{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer__brand{grid-column:1 / -1}
}

/* ---- phones ---- */
@media (max-width:767.98px){
  :root{--g:16px}
  /* phone rungs: H1 45/48 (35/40 under 400), H3 22/27, Body 17/28, Body S 15/24 */
  /* menu button replaces the pill; Contact Us stays */
  .nav__pill{display:none}
  .nav__burger{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#010101;flex:none}
  .nav__menu:not([hidden]){display:flex;flex-direction:column;position:absolute;left:var(--g);right:var(--g);top:calc(100% + 8px);
    padding:8px;background:#010101;border-radius:20px;box-shadow:0 16px 40px rgba(0,0,0,.25)}
  .nav__menu a{padding:13px 16px;border-radius:12px;font-weight:500;font-size:17px;line-height:28px;color:#FAFAFA}
  .nav__menu a:hover,.nav__menu a:focus-visible{background:#2E2C2A}
  .nav__right{gap:8px}

  /* hero stacks: name, role, socials, then the portrait */
  .s-hero{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;padding-top:28px}
  .hero__title{font-size:clamp(40px, calc(16.3vw - 6.5px), 79px);line-height:1.05;
    letter-spacing:-0.04em;grid-column:1;margin-top:0}
  .hero__role{font-size:22px;line-height:27px;margin-top:21px}
  .bio__lead{font-size:22px;line-height:27px;letter-spacing:-0.01em}
  .bio__body{font-size:17px;line-height:28px}
  .stat__num{font-size:35px;line-height:40px;letter-spacing:-0.02em}
  .stat__label{font-size:15px;line-height:24px;letter-spacing:0.01em}
  .pod__title{font-size:35px;line-height:40px;letter-spacing:-0.02em}
  .pod__intro{font-size:19px;line-height:31px;letter-spacing:0}
  .cto__title{font-size:45px;line-height:48px}
  .quote{max-width:none}
  .quote__mark{position:static;width:34px;height:27px;margin:0 0 21px}
  .quote__text{font-size:22px;line-height:27px;letter-spacing:-0.01em}
  .quote__script{width:auto;height:23px;margin:2px auto}
  .quote__name{font-size:22px;line-height:27px;letter-spacing:-0.01em}
  .blogs__count{font-size:17px;line-height:28px}
  .card__title{font-size:22px;line-height:27px}
  .contact__title{font-size:35px;line-height:40px;letter-spacing:-0.02em}
  .contact__body{font-size:19px;line-height:31px;letter-spacing:0}
  .hero__role{grid-row:2}
  .hero__socials{grid-row:3;margin-top:24px}
  .hero__social{width:52px;height:52px}
  .hero__social svg{transform:scale(.82)}
  .hero__panel{grid-column:1;grid-row:4;margin-top:28px}
  .rule--1{grid-row:5}

  .bio{flex-direction:column;gap:28px}
  .laurels{flex-direction:row;flex-wrap:wrap;gap:12px 20px}
  .s-bio{column-gap:12px}

  .s-pod{--ov:calc((100vw - 2 * var(--g)) * 10 / 16 / 2)}
  .cto{aspect-ratio:16/10}
  .cto__cta-label{font-size:17px;line-height:28px}
  .cto__cta-circle{width:30px;height:30px}

  .card{flex-basis:100%;max-width:520px}
  .footer{padding:32px 20px}
  .awards{gap:16px 20px}
  .award{width:52px;height:52px}
  .footer__group{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  .footer__col--touch{grid-column:1 / -1}
  .footer__right{flex-direction:column;align-items:flex-start;gap:16px}
}