/* ============================================================
   mananmehta.com v4 · Feedback 4 (16 Aug 2026)
   Opener, video hero, single-line statement, logo wall,
   five companies, press wall, story timeline, audience nav.
   No new libraries. Builds on v2.css tokens.
   ============================================================ */

/* ---------- S1 · multi-language opener ---------- */
.opener{position:fixed;inset:0;z-index:10000;background:#fff;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:transform .62s cubic-bezier(.7,0,.3,1)}
.opener.is-out{transform:translateY(-101%)}
.opener__word{font-family:var(--fh);font-weight:800;color:var(--ink);
  font-size:clamp(38px,7vw,92px);line-height:1;letter-spacing:-.02em;
  min-height:1.1em;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:0 24px}
.opener__word.sw{opacity:0;transform:translateY(10px)}
.opener__word{transition:opacity .17s ease,transform .17s ease}
.opener__bar{width:min(180px,42vw);height:2px;border-radius:2px;background:var(--hairline);overflow:hidden}
.opener__bar i{display:block;height:100%;width:0;background:var(--grad);border-radius:2px}
/* Indic fallbacks so no glyph ever renders as a box */
.opener__word[lang="hi"],.opener__word[lang="mr"]{font-family:'Noto Sans Devanagari','Kohinoir Devanagari','Devanagari Sangam MN',var(--fh),sans-serif}
.opener__word[lang="gu"]{font-family:'Noto Sans Gujarati','Gujarati Sangam MN',var(--fh),sans-serif}
body.opener-lock{overflow:hidden}
@media(prefers-reduced-motion:reduce){.opener{display:none}}

/* ---------- S2 · video hero ---------- */
.vhero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.vhero__media{position:absolute;inset:0;z-index:0}
.vhero__media video,.vhero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.vhero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.42) 26%,
    rgba(255,255,255,.06) 50%,rgba(255,255,255,.30) 78%,rgba(255,255,255,.88) 100%)}
.vhero__in{position:relative;z-index:2;width:100%;max-width:1280px;margin:0 auto;padding:0 24px 72px;
  display:grid;grid-template-columns:1fr;gap:18px}
.vhero__eyebrow{font-family:var(--fa);font-size:clamp(13px,1.4vw,17px);letter-spacing:.05em;color:var(--navy)}
.vhero__eyebrow .st{color:var(--mc-teal)}
.vhero__h1{font-family:var(--fh);font-weight:800;font-size:clamp(32px,4.1vw,56px);
  line-height:1.05;letter-spacing:-.018em;color:var(--ink);max-width:13ch;
  overflow-wrap:break-word;hyphens:none}
.vhero__h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.vhero__ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.vhero__scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;
  font-family:var(--fb);font-size:11px;letter-spacing:.14em;color:var(--gray-6);text-transform:uppercase}
/* desktop: headline sits right of Manan, over the clean wall */
@media(min-width:1000px){
  .vhero{align-items:center}
  .vhero__in{grid-template-columns:1fr 1fr;align-items:center;padding-bottom:0}
  .vhero__in>*{grid-column:2}
  .vhero__scrim{background:linear-gradient(100deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.30) 34%,
    rgba(255,255,255,.80) 52%,rgba(255,255,255,.93) 100%)}
}
/* portrait viewports crop the sides hard, so bias left to where Manan actually stands */
@media(max-width:999px){
  .vhero__media video,.vhero__media img{object-position:20% 34%}
  /* headline lands over light denim here, so the lower scrim carries more weight */
  .vhero__scrim{background:linear-gradient(180deg,rgba(255,255,255,.80) 0%,rgba(255,255,255,.20) 22%,
    rgba(255,255,255,.06) 42%,rgba(255,255,255,.62) 62%,rgba(255,255,255,.94) 82%,#fff 100%)}
}
@media(max-width:520px){.vhero__media video,.vhero__media img{object-position:16% 36%}}

/* The drawer now carries 12 links, so its content is taller than its own box and
   used to spill back into the viewport over the logo. Scroll it, and hide it
   outright when closed so nothing can paint outside the box. */
@media(max-width:900px){
  .nav__drawer{overflow-y:auto;-webkit-overflow-scrolling:touch;
    visibility:hidden;transition:transform .45s cubic-bezier(.7,0,.3,1),visibility .45s}
  .nav__drawer.open{visibility:visible}
  .nav__drawer a{display:block}
  .nav__drawer .drawer-sub{font-size:19px !important;padding:4px 0}
  .nav__drawer .drawer-group{margin:16px 0 4px}
}

/* the description that moved down out of the hero */
.hero-note{background:#fff}
.hero-note__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
.hero-note__lede{font-size:17px;color:var(--gray-7)}
.hero-note__lede b{color:var(--ink)}
.hero-note__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.hero-note__stats div b{display:block;font-family:var(--fh);font-weight:800;font-size:30px;color:var(--ink)}
.hero-note__stats div span{font-size:13px;color:var(--gray-6)}
@media(max-width:820px){.hero-note__grid{grid-template-columns:1fr;gap:26px}}

/* ---------- S3 · single-line statement ---------- */
.stmt2{text-align:center;padding:64px 0 68px}
.stmt2__line{font-family:var(--fh);font-weight:800;
  font-size:clamp(30px,6.6vw,86px);line-height:1.08;letter-spacing:-.02em;
  display:flex;align-items:baseline;justify-content:center;gap:.28em;flex-wrap:nowrap}
/* One element whose text swaps. The line reflows naturally, so the verb can never
   collide with "marketing." and there is never a hole after "I". */
.stmt2__verbs{display:inline-block}
.stmt2__verbs b{display:inline-block;font-weight:800;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  transition:opacity .3s cubic-bezier(.2,.7,.2,1),transform .3s cubic-bezier(.2,.7,.2,1)}
.stmt2__verbs b.swapping{opacity:0;transform:translateY(9px)}
.stmt2__sub{margin-top:22px;color:var(--gray-6);font-size:15px}
@media(hover:hover) and (pointer:fine){.stmt2__line{cursor:default}}

/* ---------- S4a · brand logo wall ----------
   44 marks. Flex rather than grid so the final short row CENTRES instead of
   hanging left, and so the wall can run wider than the normal .wrap.
   Every cell is a fixed row height with object-fit:contain, which is what makes
   a tall square mark and a long wordmark read at the same optical weight. */
.wrap--wall{max-width:1340px}
.logowall{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:26px;margin-top:8px}
/* basis subtracts a hair MORE than the gap total (182 -> 185, 120 -> 123 ...) so
   sub-pixel rounding can never push the last item of a full row onto the next line */
.logowall img{flex:0 0 calc((100% - 185px)/8);
  min-width:0;max-width:100%;
  height:clamp(44px,3.6vw,58px);object-fit:contain;
  filter:grayscale(1) contrast(1.35) brightness(.72);opacity:.66;
  transition:filter .24s ease,opacity .24s ease,transform .24s ease}
.logowall img:hover{filter:none;opacity:1;transform:translateY(-2px)}
@media(max-width:1180px){
  .logowall{gap:24px}
  .logowall img{flex-basis:calc((100% - 123px)/6)}
}
@media(max-width:900px){
  .logowall{gap:20px}
  .logowall img{flex-basis:calc((100% - 63px)/4)}
}
@media(max-width:560px){
  .logowall{gap:16px}
  .logowall img{flex-basis:calc((100% - 35px)/3)}
}

/* ---------- S4b · the five companies ---------- */
.five{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.five__card{display:flex;flex-direction:column;gap:12px;padding:26px 20px;text-decoration:none;
  border:1px solid var(--hairline);border-radius:var(--r-card);background:#fff;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.five__card:hover{transform:translateY(-3px);border-color:rgba(11,19,38,.2);
  box-shadow:0 10px 28px rgba(29,56,106,.08)}
.five__logo{height:52px;display:flex;align-items:center;justify-content:center}
.five__logo img{max-height:30px;max-width:132px;width:auto;object-fit:contain}
.five__card h3{font-family:var(--fh);font-weight:700;font-size:15px;letter-spacing:-.01em}
.five__card p{font-size:13px;color:var(--gray-6);line-height:1.5}
.five__go{margin-top:auto;font-size:12px;font-weight:600;color:var(--navy)}
@media(max-width:1099px){.five{grid-template-columns:repeat(2,1fr)}}
@media(max-width:519px){.five{grid-template-columns:1fr}}

/* ---------- S15 · featured in / press ---------- */
.press{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.press__card{border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;background:#fff;
  cursor:zoom-in;transition:transform .22s ease,box-shadow .22s ease}
.press__card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(29,56,106,.08)}
.press__card img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top center}
.press__meta{padding:14px 16px 18px}
.press__meta h4{font-family:var(--fh);font-weight:700;font-size:14px}
.press__meta p{font-size:12.5px;color:var(--gray-6);margin-top:4px;line-height:1.45}
@media(max-width:900px){.press{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.press{grid-template-columns:1fr}}
.lbox{position:fixed;inset:0;z-index:9000;background:rgba(11,19,38,.9);display:none;
  align-items:center;justify-content:center;padding:32px}
.lbox.open{display:flex}
.lbox img{max-width:min(1100px,94vw);max-height:90vh;width:auto;object-fit:contain;border-radius:10px}
.lbox__x{position:absolute;top:20px;right:24px;background:none;border:0;color:#fff;font-size:30px;cursor:pointer;line-height:1}

/* ---------- S9 · story timeline ---------- */
.tl{position:relative;margin-top:46px}
.tl::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--hairline)}
.tl__step{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:48px;
  align-items:center;padding:34px 0}
/* both cells must be pinned to row 1, or auto-placement drops the
   second one onto a new row and the step gains a hole */
.tl__step .tl__media{grid-column:1;grid-row:1}
.tl__step .tl__txt{grid-column:2;grid-row:1}
.tl__step:nth-child(even) .tl__media{grid-column:2;grid-row:1}
.tl__step:nth-child(even) .tl__txt{grid-column:1;grid-row:1;text-align:right}
.tl__dot{position:absolute;left:50%;top:50%;width:11px;height:11px;border-radius:50%;
  background:#fff;border:2px solid var(--mc-teal);transform:translate(-50%,-50%);z-index:2}
.tl__media img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 22%;
  border-radius:var(--r-card);border:1px solid var(--hairline)}
.tl__yr{font-family:var(--fa);font-size:13px;letter-spacing:.06em;color:var(--mc-teal)}
.tl__txt h3{font-family:var(--fh);font-weight:800;font-size:clamp(20px,2.4vw,29px);
  letter-spacing:-.015em;margin:6px 0 10px}
.tl__txt p{color:var(--gray-7);font-size:15px}
@media(max-width:860px){
  .tl::before{left:9px}
  .tl__step,.tl__step:nth-child(even){grid-template-columns:1fr;gap:16px;padding:22px 0 22px 34px}
  .tl__step .tl__media,.tl__step:nth-child(even) .tl__media{grid-column:1;grid-row:1}
  .tl__step .tl__txt,.tl__step:nth-child(even) .tl__txt{grid-column:1;grid-row:2;text-align:left}
  .tl__dot{left:9px;top:30px}
}

/* ---------- S8 · "who I work with" nav dropdown ---------- */
.nav__drop{position:relative}
.nav__drop>button{background:none;border:0;cursor:pointer;font-family:var(--fb);
  font-size:13.5px;font-weight:600;color:var(--gray-7);display:inline-flex;align-items:center;gap:5px;padding:0}
.nav__drop>button:hover{color:var(--ink)}
.nav.is-solid .nav__drop>button{color:var(--gray-7)}
.nav__drop>button svg{width:10px;height:10px;transition:transform .2s}
.nav__drop[data-open="true"]>button svg{transform:rotate(180deg)}
.nav__menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:270px;background:#fff;border:1px solid var(--hairline);border-radius:16px;
  box-shadow:0 16px 40px rgba(29,56,106,.12);padding:8px;
  opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s}
.nav__drop[data-open="true"] .nav__menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav__menu a{display:block;padding:10px 14px;border-radius:10px;font-size:13.5px;
  font-weight:600;color:var(--gray-7);text-decoration:none}
.nav__menu a:hover{background:var(--paper);color:var(--ink)}
.nav__drawer .drawer-group{margin:22px 0 6px;font-family:var(--fb);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gray-3)}
.nav__drawer .drawer-sub{font-size:20px !important;color:var(--gray-7) !important}

/* ---------- S12 · four in one row ---------- */
.grid--4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1199px){.grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:719px){.grid--4{grid-template-columns:1fr}}

/* ---------- S5 · media-led sections ---------- */
/* six industries: three across reads even, four leaves two orphans on row two */
.mled{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mled__item{border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;background:#fff}
.mled__item img{width:100%;aspect-ratio:3/2;object-fit:cover}
.mled__item div{padding:16px 18px 20px}
.mled__item h3{font-family:var(--fh);font-weight:700;font-size:15px;margin-bottom:6px}
.mled__item p{font-size:13px;color:var(--gray-6);line-height:1.5}
@media(max-width:1199px){.mled{grid-template-columns:repeat(2,1fr)}}
@media(max-width:719px){.mled{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split--flip .split__media{order:2}
.split__media img,.split__media video{width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-card);border:1px solid var(--hairline)}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:26px}.split--flip .split__media{order:0}}

/* ---------- S10 · travel ---------- */
.trav{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.trav__card{border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;background:#fff}
.trav__card img,.trav__card video{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--paper)}
.trav__body{padding:18px 20px 24px}
.trav__place{font-family:var(--fh);font-weight:800;font-size:19px;letter-spacing:-.01em}
.trav__when{font-family:var(--fa);font-size:12px;letter-spacing:.05em;color:var(--mc-teal);margin-top:4px}
.trav__body p{font-size:14px;color:var(--gray-7);margin-top:10px;line-height:1.6}
@media(max-width:900px){.trav{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.trav{grid-template-columns:1fr}}

/* ---------- S14 · podcast episodes ---------- */
.eps{border-top:1px solid var(--hairline)}
.eps__row{display:grid;grid-template-columns:56px 1fr auto;gap:20px;align-items:center;
  padding:20px 4px;border-bottom:1px solid var(--hairline);text-decoration:none;transition:background .2s}
.eps__row:hover{background:var(--paper)}
.eps__n{font-family:var(--fh);font-weight:800;font-size:15px;color:var(--gray-3)}
.eps__t{font-family:var(--fh);font-weight:700;font-size:16px;letter-spacing:-.01em}
.eps__g{font-size:13px;color:var(--gray-6);margin-top:3px}
.eps__go{font-size:12px;font-weight:600;color:var(--navy);white-space:nowrap}
@media(max-width:620px){.eps__row{grid-template-columns:38px 1fr;gap:14px}.eps__go{display:none}}

/* ---------- shared ---------- */
.sec--tight{padding:56px 0}
.imgcap{position:relative;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--hairline)}
.imgcap img{width:100%;display:block}
.imgcap figcaption{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);padding:7px 13px;border-radius:999px;font-size:12px;font-weight:600;color:var(--ink)}

/* ============================================================
   PODCAST · MK Studios / The Marketin Podcast
   Mirrors the MarketinCrew podcast page structure in this site's
   own design system. Thumbnails come straight from YouTube.
   ============================================================ */
.pod-hero{position:relative;min-height:78svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.pod-hero__bg{position:absolute;inset:0;z-index:0}
.pod-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 34%}
.pod-hero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,19,38,.62) 0%,rgba(11,19,38,.36) 40%,rgba(11,19,38,.80) 100%)}
.pod-hero__in{position:relative;z-index:2;width:100%;max-width:1140px;margin:0 auto;padding:0 24px 64px;color:#fff}
.pod-hero__eyebrow{font-family:var(--fa);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;opacity:.86;display:flex;align-items:center;gap:10px;margin-bottom:16px}
.pod-hero__eyebrow::before{content:"";width:26px;height:1px;background:var(--mc-teal)}
.pod-hero__in h1{font-family:var(--fh);font-weight:800;font-size:clamp(32px,4.6vw,62px);
  line-height:1.05;letter-spacing:-.02em;max-width:16ch;color:#fff}
.pod-hero__in h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pod-hero__lead{margin-top:16px;max-width:56ch;color:rgba(255,255,255,.86);font-size:16px}
.pod-hero__ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.pod-hero__meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:28px;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.18)}
.pod-hero__meta div b{display:block;font-family:var(--fh);font-weight:800;font-size:26px;color:#fff}
.pod-hero__meta div span{font-size:12.5px;color:rgba(255,255,255,.7)}

/* 16:9 embed */
.pod-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-big);
  overflow:hidden;border:1px solid var(--hairline);background:var(--paper)}
.pod-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pod-cap{margin-top:14px;text-align:center;font-size:14px;color:var(--gray-6)}

/* episode grid */
.ep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ep-card{display:flex;flex-direction:column;text-decoration:none;background:#fff;
  border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.ep-card:hover{transform:translateY(-3px);border-color:rgba(11,19,38,.2);
  box-shadow:0 12px 30px rgba(29,56,106,.10)}
.ep-card__thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--paper)}
.ep-card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.ep-card:hover .ep-card__thumb img{transform:scale(1.04)}
.ep-card__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ep-card__play span{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;transition:transform .22s ease}
.ep-card:hover .ep-card__play span{transform:scale(1.09)}
.ep-card__play svg{width:17px;height:17px;margin-left:3px;fill:var(--ink)}
.ep-card__n{position:absolute;top:10px;left:10px;z-index:2;background:rgba(11,19,38,.82);
  color:#fff;font-family:var(--fa);font-size:11px;letter-spacing:.06em;padding:4px 9px;border-radius:999px}
.ep-card__body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.ep-card__theme{font-family:var(--fa);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mc-teal)}
.ep-card__body h3{font-family:var(--fh);font-weight:700;font-size:15.5px;line-height:1.35;letter-spacing:-.01em}
.ep-card__guest{font-size:12.5px;color:var(--gray-6);margin-top:auto}
@media(max-width:960px){.ep-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.ep-grid{grid-template-columns:1fr}}

/* themes */
.pod-themes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pod-theme{border:1px solid var(--hairline);border-radius:var(--r-card);padding:22px 20px;background:#fff}
.pod-theme b{display:block;font-family:var(--fh);font-weight:800;font-size:30px;color:var(--ink)}
.pod-theme h4{font-family:var(--fh);font-weight:700;font-size:14.5px;margin:6px 0 6px}
.pod-theme p{font-size:13px;color:var(--gray-6);line-height:1.5}
@media(max-width:900px){.pod-themes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pod-themes{grid-template-columns:1fr}}

/* Podcast hero, split version.
   The only real photo of Manan at the mic is 900x1600 portrait. A 16:9 crop of it
   is a face-only sliver with the mic cut off, so the hero holds it at its native
   ratio beside the type rather than mangling it. */
.pod-hero--split{background:var(--ink);min-height:auto;display:block;overflow:visible}
.pod-hero--split .pod-hero__bg,.pod-hero--split .pod-hero__scrim{display:none}
.pod-hero--split .pod-hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;
  align-items:center;padding:132px 24px 72px;max-width:1180px}
.pod-hero__shot{position:relative;border-radius:var(--r-big);overflow:hidden;
  border:1px solid rgba(255,255,255,.14);max-width:400px;justify-self:end;width:100%}
.pod-hero__shot img{width:100%;aspect-ratio:9/13;object-fit:cover;object-position:center 12%;display:block}
.pod-hero__shot figcaption{position:absolute;left:14px;bottom:14px;background:rgba(11,19,38,.72);
  backdrop-filter:blur(8px);color:#fff;padding:7px 13px;border-radius:999px;font-size:12px;font-weight:600}
@media(max-width:900px){
  .pod-hero--split .pod-hero__in{grid-template-columns:1fr;gap:32px;padding:116px 24px 56px}
  .pod-hero__shot{justify-self:start;max-width:300px;order:-1}
  .pod-hero__shot img{aspect-ratio:4/3;object-position:center 10%}
}

/* Pin the hero text to column one, the photo to column two spanning all rows.
   Without this the children auto-place across both columns and the headline
   ends up sitting above the photo instead of beside it. */
.pod-hero--split .pod-hero__in > *:not(.pod-hero__shot){grid-column:1}
.pod-hero--split .pod-hero__shot{grid-column:2;grid-row:1 / -1;align-self:center}
@media(max-width:900px){
  .pod-hero--split .pod-hero__in > *,
  .pod-hero--split .pod-hero__shot{grid-column:1;grid-row:auto}
  .pod-hero__shot{order:0;max-width:100%}
  .pod-hero__shot img{aspect-ratio:16/10;object-position:center 14%}
}

/* text lives in ONE cell, so its internal spacing is its own and the rows do not
   stretch to match the photo beside it */
.pod-hero__txt{display:flex;flex-direction:column;align-items:flex-start}
.pod-hero--split .pod-hero__in{align-items:center}

/* ============================================================
   SERVICES · hub, detail pages, breadcrumb, nav dropdown
   ============================================================ */
.crumb{padding:104px 0 0;font-size:12.5px;color:var(--gray-6)}
.crumb a{text-decoration:none;color:var(--gray-6)}
.crumb a:hover{color:var(--ink)}
.crumb span{margin:0 7px;color:var(--gray-3)}
.crumb b{color:var(--ink);font-weight:600}
.svc-hero{padding-top:34px}
.svc-h1{font-family:var(--fh);font-weight:800;font-size:clamp(30px,3.9vw,50px);
  line-height:1.06;letter-spacing:-.018em;margin-bottom:16px}
.svc-h1 .sub{display:block;font-family:var(--fb);font-weight:600;
  font-size:clamp(14px,1.5vw,18px);color:var(--gray-6);margin-top:12px;letter-spacing:0;line-height:1.45}

/* hub grid */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc-card{display:flex;flex-direction:column;text-decoration:none;background:#fff;
  border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.svc-card:hover{transform:translateY(-3px);border-color:rgba(11,19,38,.2);
  box-shadow:0 12px 30px rgba(29,56,106,.10)}
.svc-card__img{aspect-ratio:16/10;overflow:hidden;background:var(--paper)}
.svc-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.svc-card:hover .svc-card__img img{transform:scale(1.04)}
.svc-card__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.svc-card__body h3{font-family:var(--fh);font-weight:700;font-size:17px;letter-spacing:-.01em}
.svc-card__body p{font-size:13.5px;color:var(--gray-6);line-height:1.55}
.svc-card__go{margin-top:auto;font-size:12.5px;font-weight:600;color:var(--navy)}
@media(max-width:980px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.svc-grid{grid-template-columns:1fr}}

/* tick list */
.ticks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.ticks li{position:relative;padding-left:30px;font-size:15px;color:var(--gray-7);line-height:1.55}
.ticks li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;
  background:var(--mc-teal);opacity:.16}
.ticks li::after{content:"";position:absolute;left:5px;top:11px;width:5px;height:8px;
  border-right:2px solid var(--mc-teal);border-bottom:2px solid var(--mc-teal);transform:rotate(42deg)}

/* deliverables read as text cards, no image slot */
.mled__item--txt div{padding:22px 22px 24px}
.mled__item--txt h3{font-family:var(--fh);font-weight:700;font-size:15px;margin-bottom:7px}
.mled__item--txt p{font-size:13.5px;color:var(--gray-6);line-height:1.55}
/* ============================================================
   FEEDBACK 5 (24 Aug 2026) · industries strip, teaching block,
   press link card, slim section rhythm.
   ============================================================ */

/* ---------- shorter vertical rhythm, page was running long ---------- */
.sec--slim{padding:58px 0}

/* ---------- industries · ONE horizontal strip, six across ----------
   Square tiles so a tall studio portrait and a wide product shot both crop
   cleanly and read at the same weight. Label sits under the tile. */
.indstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:30px}
.indstrip__item{min-width:0}
.indstrip__shot{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--paper);
  border:1px solid var(--hairline);border-radius:12px}
.indstrip__shot img{width:100%;height:100%;object-fit:cover;object-position:center 28%;
  transition:transform .4s ease}
.indstrip__item:hover .indstrip__shot img{transform:scale(1.05)}
.indstrip__item h3{font-family:var(--fh);font-weight:700;font-size:14px;letter-spacing:-.01em;
  margin:12px 0 4px;line-height:1.25}
.indstrip__who{font-size:11.5px;color:var(--gray-6);line-height:1.45}
@media(max-width:1099px){.indstrip{grid-template-columns:repeat(3,1fr);gap:18px}}
@media(max-width:560px){
  .indstrip{grid-template-columns:repeat(2,1fr);gap:14px}
  .indstrip__item h3{font-size:13.5px}
}

/* ---------- teaching · video on top, four stills directly under ---------- */
.teachblock{display:flex;flex-direction:column;gap:10px;min-width:0}
.teachblock__strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.teachblock__strip img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 30%;
  border-radius:10px;border:1px solid var(--hairline);background:var(--paper);display:block}
@media(max-width:560px){.teachblock__strip{gap:8px}.teachblock__strip img{border-radius:10px}}

/* ---------- press · Radio Espace reads as a fifth card, and links out ---------- */
.press--five{grid-template-columns:repeat(5,1fr)}
.press__card--link{display:block;text-decoration:none;color:inherit;cursor:pointer}
.press__card--link:hover{border-color:rgba(11,19,38,.2)}
.press__logo{display:block;height:26px;margin-bottom:9px}
.press__logo img{height:100%;width:auto;object-fit:contain;
  border-radius:5px;opacity:.92}
.press__card--link:hover .press__logo img{filter:none;opacity:1}
@media(max-width:1099px){.press--five{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.press--five{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.press--five{grid-template-columns:1fr}}

/* the "what this is not" list uses a cross rather than a tick */
.ticks--x li::before{background:#d8556a;opacity:.14}
.ticks--x li::after{content:"";left:6px;top:11px;width:8px;height:8px;border:0;transform:none;
  background:
    linear-gradient(45deg,transparent 44%,#d8556a 44%,#d8556a 56%,transparent 56%),
    linear-gradient(-45deg,transparent 44%,#d8556a 44%,#d8556a 56%,transparent 56%)}

/* ---------- R6 · service page section variety ---------- */
/* Manan, 24 Aug 2026: after the hero, service pages must stop being a chain of
   image-left / image-right slabs. These are the alternative section shapes.
   Rules baked in: rounded corners only, no CSS gradient ever sits over a photo,
   captions ride on a flat solid panel beside or under the image. */

.wrap--narrow{max-width:880px;margin:0 auto;padding:0 24px}

/* editorial · text only, generous margins */
.edit{max-width:860px;margin:0 auto}
.edit__rule{height:3px;width:64px;border-radius:999px;background:var(--grad);margin-bottom:24px}
.edit__lead{font-family:var(--fh);font-weight:700;font-size:clamp(19px,2.3vw,29px);
  line-height:1.3;letter-spacing:-.015em;margin:0 0 24px}
.edit p{font-size:16px;color:var(--gray-7);line-height:1.78;margin-bottom:18px}
.edit p:last-child{margin-bottom:0}

/* flat panel · holds a tick list or a short argument without an image */
.panel{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-big);
  padding:clamp(28px,4.4vw,56px);max-width:920px;margin:0 auto}
.sec--paper .panel{background:#fff}

/* wide image band · caption sits on a solid bar, never a gradient over the photo */
.band{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--hairline);background:var(--paper)}
.band__img{width:100%;height:clamp(220px,34vw,420px);object-fit:cover;object-position:center;display:block}
.band--pano .band__img{height:auto}
.band--upper .band__img{object-position:center 34%}
.band__cap{background:var(--ink);color:#fff;padding:18px 24px 20px;
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline}
.band__cap b{font-family:var(--fh);font-weight:700;font-size:13.5px;white-space:nowrap;letter-spacing:.01em}
.band__cap span{color:#b9c3da;font-size:14px;line-height:1.55}
.band--light .band__cap{background:#fff;color:var(--ink);border-top:1px solid var(--hairline)}
.band--light .band__cap span{color:var(--gray-6)}
@media(max-width:620px){.band__cap{grid-template-columns:1fr;gap:6px}}

/* photo pair · two images, no text column wedged between them */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.duo figure{margin:0;border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;background:var(--paper)}
.duo img{width:100%;height:clamp(260px,32vw,420px);object-fit:cover;display:block}
.duo--fit img{object-fit:contain;background:var(--paper)}
.duo figcaption{padding:13px 18px 15px;font-size:13px;color:var(--gray-6);line-height:1.5;
  background:#fff;border-top:1px solid var(--hairline)}
@media(max-width:760px){.duo{grid-template-columns:1fr}}

/* pull quote on flat colour */
.pullq{background:var(--ink);color:#fff;border-radius:var(--r-big);
  padding:clamp(36px,5.5vw,72px);position:relative;overflow:hidden}
.pullq::before{content:"";position:absolute;left:8%;right:8%;top:0;height:3px;border-radius:999px;background:var(--grad)}
.pullq p{font-family:var(--fq);font-size:clamp(21px,3vw,35px);line-height:1.36;max-width:900px;margin:0 auto;text-align:center}
.pullq cite{display:block;margin-top:22px;text-align:center;font-style:normal;font-family:var(--fa);
  font-weight:400;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-3)}

/* numbered card grid */
.numgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.numgrid--3{grid-template-columns:repeat(3,1fr)}
.numgrid__item{border:1px solid var(--hairline);border-radius:var(--r-card);background:#fff;padding:26px 26px 28px}
.sec--paper .numgrid__item{background:#fff}
.numgrid__n{font-family:var(--fh);font-weight:800;font-size:12.5px;color:var(--navy);
  display:block;margin-bottom:12px;letter-spacing:.08em}
.numgrid__item h3{font-family:var(--fh);font-weight:700;font-size:16px;margin-bottom:8px;letter-spacing:-.01em}
.numgrid__item p{font-size:14px;color:var(--gray-6);line-height:1.6}
@media(max-width:900px){.numgrid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.numgrid,.numgrid--3{grid-template-columns:1fr}}

/* comparison · what you have now vs what you get */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.vs__col{border:1px solid var(--hairline);border-radius:var(--r-card);padding:28px 28px 30px;background:#fff}
.vs__col--now{background:var(--paper)}
.sec--paper .vs__col--now{background:#fbfbfa}
.vs__tag{display:block;font-family:var(--fa);font-weight:400;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray-3);margin-bottom:10px}
.vs__col h3{font-family:var(--fh);font-weight:700;font-size:clamp(17px,1.9vw,21px);
  margin-bottom:16px;letter-spacing:-.012em}
.vs__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.vs__list li{position:relative;padding-left:24px;font-size:14.5px;color:var(--gray-7);line-height:1.55}
.vs__list li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:2px;border-radius:2px;background:#d8556a}
.vs__col--next .vs__list li::before{width:10px;height:10px;border-radius:50%;top:6px;background:var(--mc-teal)}
@media(max-width:760px){.vs{grid-template-columns:1fr}}

/* proof row */
.proof{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--hairline);
  border-radius:var(--r-card);overflow:hidden;background:#fff}
.proof__item{padding:28px 24px;border-right:1px solid var(--hairline)}
.proof__item:last-child{border-right:0}
.proof__n{display:block;font-family:var(--fh);font-weight:800;font-size:clamp(21px,2.7vw,33px);
  letter-spacing:-.02em;line-height:1.12;margin-bottom:9px}
.proof__l{font-size:13px;color:var(--gray-6);line-height:1.55}
@media(max-width:860px){
  .proof{grid-template-columns:repeat(2,1fr)}
  .proof__item{border-bottom:1px solid var(--hairline)}
  .proof__item:nth-child(2n){border-right:0}
  .proof__item:nth-last-child(-n+2){border-bottom:0}}
@media(max-width:480px){
  .proof{grid-template-columns:1fr}
  .proof__item{border-right:0;border-bottom:1px solid var(--hairline)}
  .proof__item:last-child{border-bottom:0}}

/* diagram A · vertical spine pipeline */
.pipe{position:relative;padding-left:38px;max-width:880px;margin:0 auto}
.pipe::before{content:"";position:absolute;left:13px;top:20px;bottom:20px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--peri),var(--mc-teal),var(--mc-yellow))}
.pipe__node{position:relative;border:1px solid var(--hairline);border-radius:14px;background:#fff;
  padding:18px 22px 20px;margin-bottom:14px}
.pipe__node:last-child{margin-bottom:0}
.pipe__node::before{content:"";position:absolute;left:-31px;top:24px;width:12px;height:12px;
  border-radius:50%;background:var(--ink);outline:4px solid #fff}
.sec--paper .pipe__node::before{outline-color:var(--paper)}
.pipe__n{display:block;font-family:var(--fa);font-weight:400;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray-3);margin-bottom:6px}
.pipe__node h4{font-family:var(--fh);font-weight:700;font-size:16px;margin-bottom:6px;letter-spacing:-.01em}
.pipe__node p{font-size:14px;color:var(--gray-6);line-height:1.6}

/* diagram B · cycle, five stages then back to the start */
.loop{display:grid;grid-template-columns:repeat(5,1fr);gap:26px}
.loop__node{position:relative;border:1px solid var(--hairline);border-radius:14px;background:#fff;padding:20px 18px 22px}
.loop__node::after{content:"";position:absolute;right:-20px;top:50%;transform:translateY(-50%);
  width:14px;height:2px;border-radius:2px;background:var(--mc-teal)}
.loop__node:last-child::after{display:none}
.loop__n{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;display:flex;
  align-items:center;justify-content:center;font-family:var(--fh);font-weight:800;font-size:12px;margin-bottom:12px}
.loop__node h4{font-family:var(--fh);font-weight:700;font-size:14.5px;margin-bottom:6px;letter-spacing:-.01em}
.loop__node p{font-size:12.5px;color:var(--gray-6);line-height:1.55}
.loop__back{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;
  font-family:var(--fa);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-6)}
.loop__back svg{width:150px;height:18px;color:var(--mc-teal);flex:none}
@media(max-width:980px){
  .loop{grid-template-columns:repeat(2,1fr);gap:16px}
  .loop__node::after{display:none}}
@media(max-width:560px){.loop{grid-template-columns:1fr}}

/* diagram C · horizontal rail with numbered stops */
.rail{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;padding-top:60px}
.rail::before{content:"";position:absolute;left:10%;right:10%;top:22px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--peri),var(--mc-teal),var(--mc-yellow))}
.rail__stop{position:relative;text-align:center}
.rail__n{position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:44px;height:44px;
  border-radius:50%;background:#fff;border:2px solid var(--ink);color:var(--ink);display:flex;
  align-items:center;justify-content:center;font-family:var(--fh);font-weight:800;font-size:15px}
.rail__stop h4{font-family:var(--fh);font-weight:700;font-size:15px;margin-bottom:7px;letter-spacing:-.01em}
.rail__stop p{font-size:13px;color:var(--gray-6);line-height:1.55}
@media(max-width:900px){
  .rail{grid-template-columns:1fr;gap:30px;padding-top:0;padding-left:62px}
  .rail::before{left:21px;right:auto;top:10px;bottom:10px;width:2px;height:auto;
    background:linear-gradient(180deg,var(--peri),var(--mc-teal),var(--mc-yellow))}
  .rail__stop{text-align:left}
  .rail__n{top:0;left:-62px;transform:none;width:42px;height:42px}}

/* diagram D · narrowing funnel */
.funnel{display:flex;flex-direction:column;align-items:center;max-width:920px;margin:0 auto}
.funnel__stage{position:relative;margin-bottom:28px;border:1px solid var(--hairline);border-radius:14px;
  background:#fff;padding:18px 24px 20px;display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:start}
.funnel__stage:last-child{margin-bottom:0}
.funnel__stage::after{content:"";position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);
  width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:12px solid var(--mc-teal)}
.funnel__stage:last-child::after{display:none}
.funnel__n{font-family:var(--fh);font-weight:800;font-size:13px;color:#fff;background:var(--ink);
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.funnel__stage h4{font-family:var(--fh);font-weight:700;font-size:15.5px;margin-bottom:6px;letter-spacing:-.01em}
.funnel__stage p{font-size:14px;color:var(--gray-6);line-height:1.6}
.funnel__stage--w1{width:100%}
.funnel__stage--w2{width:93%}
.funnel__stage--w3{width:86%}
.funnel__stage--w4{width:79%}
.funnel__stage--w5{width:72%}
@media(max-width:760px){
  .funnel__stage--w2,.funnel__stage--w3,.funnel__stage--w4,.funnel__stage--w5{width:100%}}

/* diagram E · layered stack, each layer sits on the one below */
.stack{display:flex;flex-direction:column;max-width:920px;margin:0 auto}
.stack__layer{position:relative;margin-bottom:26px;border:1px solid var(--hairline);border-radius:14px;
  background:#fff;padding:18px 24px 20px;display:grid;grid-template-columns:132px 1fr;gap:20px;align-items:start}
.stack__layer:last-child{margin-bottom:0}
.stack__layer::after{content:"";position:absolute;left:50%;bottom:-19px;transform:translateX(-50%);
  width:2px;height:12px;border-radius:2px;background:var(--mc-teal)}
.stack__layer:last-child::after{display:none}
.stack__lbl{font-family:var(--fh);font-weight:700;font-size:13.5px;color:var(--navy);letter-spacing:.01em}
.stack__layer h4{font-family:var(--fh);font-weight:700;font-size:15.5px;margin-bottom:6px;letter-spacing:-.01em}
.stack__layer p{font-size:14px;color:var(--gray-6);line-height:1.6}
@media(max-width:700px){.stack__layer{grid-template-columns:1fr;gap:8px}}
.proof__l{display:block}

/* ---------- R6 · about + teaching ---------- */
/* Manan, 24 Aug 2026, feedback transcript [01:12] to [01:48]: on the teaching page he
   wants "the video and then you can have small images below it", and the India stage
   footage must never be presented as the YNOV Lyon classroom. So every still in the
   strip carries its own caption on a FLAT solid bar. No gradient ever sits over a photo
   (rule 78), corners stay soft. */

/* the strip runs full width under the video when the block owns a whole section */
.teachblock--wide{gap:14px}
.teachblock--wide .teachblock__strip{gap:14px}

/* three stills instead of four, so no near-duplicate photo has to pad the row out */
.teachblock__strip--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:720px){.teachblock__strip--3{grid-template-columns:1fr}}

/* each still is its own figure: picture on top, caption on a flat panel under it */
.teachblock__fig{margin:0;min-width:0;display:flex;flex-direction:column;
  border:1px solid var(--hairline);border-radius:12px;overflow:hidden;background:#fff}
.sec--paper .teachblock__fig{background:#fff}
/* the figure already carries the border and the radius, so the image inside must not
   draw a second, offset one on top of it */
.teachblock__fig img{border:0;border-radius:0;aspect-ratio:4/3;object-position:center 32%}
.teachblock__cap{padding:11px 14px 13px;font-size:12.5px;line-height:1.45;
  color:var(--gray-6);background:#fff;border-top:1px solid var(--hairline)}

/* teach-students.jpg is a square selfie with Manan low-left: a 4:3 crop at the default
   32% cuts his chin off, so this one tile holds a lower crop line */
.teachblock__fig img[src$="teach-students.jpg"]{object-position:center 46%}

/* .ai-hero__txt was markup with no rule anywhere (rule 92). It is a grid child, so the
   parent already positions it, but a grid child defaults to min-width:auto and a long
   unbroken word can push the column past the track. Pin it. */
.ai-hero__txt{min-width:0}

/* ---------- R6 · audience pages ---------- */
/* hero: solid tinted panel on the left, untouched photo on the right.
   deliberately NO gradient over the photograph (Apple renderers flatten it). */
.aud-hero{display:grid;grid-template-columns:1.04fr 1fr;border:1px solid var(--hairline);
  border-radius:var(--r-big);overflow:hidden;background:#fff}
.aud-hero__panel{background:var(--paper);padding:clamp(30px,3.6vw,54px);display:flex;
  flex-direction:column;justify-content:center}
.aud-hero__panel .sec__lede{margin-bottom:0}
.aud-hero__media{position:relative;background:var(--paper);min-height:400px}
.aud-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 30%;display:block}
.aud-hero__tag{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.94);
  border:1px solid var(--hairline);border-radius:10px;padding:7px 12px;font-size:12px;
  color:var(--gray-7);line-height:1.4;max-width:78%}
.aud-hero--flip .aud-hero__media{order:-1}
@media(max-width:900px){
  .aud-hero{grid-template-columns:1fr}
  .aud-hero--flip .aud-hero__media{order:0}
  .aud-hero__media{min-height:0}
  .aud-hero__media img{position:static;height:auto;aspect-ratio:4/3}}

/* link inside an existing duo caption */
.duo figcaption a{color:var(--navy);font-weight:600}

/* clickable variant of the existing media card */
.mled__item--link{display:block;text-decoration:none;color:inherit;
  transition:transform .25s ease,border-color .25s ease}
.mled__item--link:hover{transform:translateY(-3px);border-color:rgba(11,19,38,.2)}
.mled__go{display:block;margin-top:10px;font-size:12px;font-weight:600;color:var(--navy)}

/* working-day overlap diagram (no photography, flat colour only) */
.tzday{border:1px solid var(--hairline);border-radius:14px;background:#fff;padding:24px 26px 22px;
  max-width:920px;margin:0 auto}
.tzday__row{display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:center;margin-bottom:12px}
.tzday__city{font-family:var(--fh);font-weight:700;font-size:13.5px;letter-spacing:-.01em}
.tzday__city span{display:block;font-family:var(--fb);font-weight:400;font-size:11.5px;color:var(--gray-6);margin-top:2px}
.tzday__bar{position:relative;height:28px;border-radius:9px;background:var(--paper);
  border:1px solid var(--hairline);overflow:hidden}
.tzday__on{position:absolute;top:0;bottom:0;border-radius:8px;background:var(--peri)}
.tzday__on--teal{background:var(--mc-teal)}
.tzday__on--yellow{background:var(--mc-yellow)}
.tzday__over{position:absolute;top:0;bottom:0;border-left:2px dashed rgba(11,19,38,.35);
  border-right:2px dashed rgba(11,19,38,.35);background:rgba(11,19,38,.05)}
.tzday__scale{display:grid;grid-template-columns:132px 1fr;gap:16px;margin-top:14px}
.tzday__ticks{display:flex;justify-content:space-between;font-family:var(--fa);font-weight:400;
  font-size:10.5px;letter-spacing:.1em;color:var(--gray-3)}
.tzday__note{margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline);
  font-size:13.5px;color:var(--gray-6);line-height:1.6}
@media(max-width:640px){
  .tzday__row,.tzday__scale{grid-template-columns:1fr;gap:6px}
  .tzday__ticks{font-size:9.5px}}

/* ---------- R6 · nav services dropdown modifier (rule 92: no orphan classes) ---------- */
.nav__drop--svc .nav__menu{min-width:250px}

/* === FB5 G rows 8, 14, 19 === Group dropdown in the shared nav */
.nav__drop--grp .nav__menu{min-width:220px}
@media(min-width:901px) and (max-width:1120px){.nav__links{gap:18px}}

/* === FB5 E rows 34, 10, 11, 35, 16, 18 === teaching strip, podcast facade, travel reels */
/* teaching: two stills side by side (Manan with students), one column on phones */
.teachblock__strip--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:720px){.teachblock__strip--2{grid-template-columns:1fr}}
.teachblock__strip--2 .teachblock__fig img{aspect-ratio:3/2}
/* the students frame is a wide 1218x672: 3/2 keeps all five students in shot instead of cropping the end one */

/* podcast: click-to-load YouTube facade (.ytf). Poster + play button; the iframe is injected on click */
.ytf{position:relative;cursor:pointer}
.ytf__poster{display:block;width:100%;height:100%;object-fit:cover}
.ytf__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;cursor:pointer}
.ytf__play span{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(11,19,38,.28);transition:transform .25s ease}
.ytf:hover .ytf__play span{transform:scale(1.08)}
.ytf__play svg{width:22px;height:22px;margin-left:3px;fill:var(--ink)}
.ytf iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ytf__cap{position:absolute;left:14px;bottom:14px;z-index:2;font-family:var(--fa);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:rgba(11,19,38,.72);padding:6px 10px;border-radius:999px;pointer-events:none}
.ytf.is-on .ytf__poster,.ytf.is-on .ytf__play,.ytf.is-on .ytf__cap,.ytf.is-on .ep-card__n{display:none}
/* the hero shot holds the intro film at 16:9 instead of the old 9:13 portrait */
.pod-hero__shot--video{aspect-ratio:16/9;background:#000;border:1px solid rgba(255,255,255,.14)}
.pod-hero__shot--video .ytf{position:absolute;inset:0}
.pod-hero__shot--video .ytf__poster{aspect-ratio:auto;object-position:center}
.pod-hero--split .pod-hero__shot--video{max-width:none;width:100%}
@media(max-width:900px){.pod-hero__shot--video{aspect-ratio:16/9}.pod-hero__shot--video .ytf__poster{aspect-ratio:auto}}
/* episode cards play in place: the small play button sits over the thumb and the card is not a link any more */
.ep-card.ytf{cursor:pointer}
.ep-card.ytf .ep-card__thumb{position:relative}
.ep-card.ytf .ep-card__play{background:transparent;border:0;padding:0;cursor:pointer;width:100%}
.ep-card.ytf .ep-card__play span{width:52px;height:52px}
.ep-card.ytf .ep-card__play svg{width:17px;height:17px}
.ep-card.ytf.is-on .ep-card__thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* travel: horizontal reel strip, 9:16 tiles, snap scrolling, hairline scrollbar hidden */
.reels{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding:36px 4px 28px;margin:0 -4px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.reels::-webkit-scrollbar{display:none}
.reel{position:relative;flex:0 0 240px;width:240px;aspect-ratio:9/16;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--hairline);background:var(--ink);scroll-snap-align:start;text-decoration:none;color:#fff;display:block;
  transition:transform .3s ease,box-shadow .3s ease}
.reel:hover,.reel:focus-visible{transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,19,38,.16);outline:none}
.reel:focus-visible{box-shadow:0 0 0 3px var(--peri)}
.reel__poster,.reel__loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.reel__loop{opacity:0;transition:opacity .35s ease;pointer-events:none}
.reel.is-live .reel__loop{opacity:1}
.reel__chip{position:absolute;left:12px;bottom:12px;z-index:2;font-family:var(--fa);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:rgba(11,19,38,.72);padding:6px 10px;border-radius:999px}
.reel__play{position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(11,19,38,.22)}
.reel__play svg{width:14px;height:14px;margin-left:2px;fill:var(--ink)}
@media(max-width:820px){.reel{flex-basis:200px;width:200px}.reels{gap:12px;padding-top:28px}}
@media(prefers-reduced-motion:reduce){.reel,.reel__loop{transition:none}.reel:hover{transform:none}}
/* the modal player: a native <dialog>, phone-shaped video, native controls */
.reelm{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:auto}
.reelm::backdrop{background:rgba(11,19,38,.82);backdrop-filter:blur(6px)}
.reelm[open]{display:flex;flex-direction:column;align-items:center;gap:12px}
.reelm__video{display:block;height:min(82vh,860px);max-width:min(92vw,484px);aspect-ratio:9/16;background:#000;
  border-radius:var(--r-card);object-fit:contain}
.reelm__cap{margin:0;font-family:var(--fa);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.reelm__close{position:fixed;top:18px;right:18px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(11,19,38,.6);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.reelm__close svg{width:20px;height:20px}
.reelm__close:hover{background:rgba(255,255,255,.16)}

/* === FB5 D rows 26, 27, 30, 31, 32, 33 === for/* : two-tile media row, Mumbai film card, French intro phone card, France client cards, communities strip */
/* row 26: two-tile media row on /for/nri-entrepreneurs */
.dgrid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.dgrid2 .mcard{aspect-ratio:4/5;margin:0}
@media(max-width:720px){.dgrid2{grid-template-columns:1fr}.dgrid2 .mcard{aspect-ratio:4/3}}

/* row 27: the Mumbai film reuses the shared .ytf facade (appended by E) inside a 16:9 media card */
.ytf--wide{aspect-ratio:16/9;background:var(--ink)}
.ytf--wide .ytf__poster{object-position:center}
.ytf--wide:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

/* row 30: the French intro film is vertical, so it sits in a phone-shaped card */
.vphone{aspect-ratio:9/16;max-width:360px;margin:0 auto;background:var(--ink)}
.vphone .vphone__v{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border:0;border-radius:0}
.vphone__play{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;padding:0;cursor:pointer}
.vphone__play span{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(11,19,38,.28);transition:transform .25s ease}
.vphone__play:hover span{transform:scale(1.05)}
.vphone__play svg{width:22px;height:22px;margin-left:3px;fill:var(--ink)}
.vphone.is-playing .vphone__play,.vphone.is-playing .mcard__label{display:none}
@media(max-width:860px){.vphone{max-width:320px}}

/* row 31: the four France hospitality cards. Still by default, the clip fades in on hover */
.fcards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1000px){.fcards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fcards{grid-template-columns:1fr}}
.fcard{margin:0}
.fcard__m{position:relative;aspect-ratio:4/5;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--hairline);background:var(--paper)}
.fcard__m img,.fcard__m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fcard__m video{opacity:0;transition:opacity .35s ease}
.fcard:hover .fcard__m video,.fcard:focus-within .fcard__m video{opacity:1}
.fcard__cap{margin-top:11px;font-size:13.5px;line-height:1.55;color:var(--gray-6)}

/* row 33: communities strip, one logo chip beside the JITO JEAP title card */
.comm-h{font-family:var(--fh);font-weight:700;font-size:clamp(17px,1.9vw,21px);letter-spacing:-.008em;margin-bottom:0}
.commrow{display:grid;grid-template-columns:210px 1fr;gap:20px;align-items:center}
@media(max-width:720px){.commrow{grid-template-columns:1fr}}
.logochip{display:flex;align-items:center;justify-content:center;background:#fff;
  border:1px solid var(--hairline);border-radius:var(--r-card);padding:22px;aspect-ratio:16/10;min-height:0}
.logochip img{max-width:140px;width:100%;height:auto;display:block}
.commrow .mcard{aspect-ratio:12/5;margin:0}
.commrow .mcard img{object-position:center}
@media(max-width:720px){.commrow .mcard{aspect-ratio:12/5}.logochip{aspect-ratio:16/6;max-width:260px}}

/* === FB5 C rows 15, 20, 21, 22, 23, 24 === services pages: founder array, 16:9 YouTube facade band */
/* row 21: the Mumbai office film sits in the team band as a 16:9 click-to-load facade (.ytf, shared with podcast) */
.band--film{max-width:920px;margin-left:auto;margin-right:auto}
.ytf--16x9{display:block;aspect-ratio:16/9;background:var(--ink)}
.ytf--16x9 .ytf__poster{width:100%;height:100%;object-fit:cover;object-position:center}
.ytf--16x9:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
/* row 24: array of people Manan works with, 4:5 tiles, faces kept at the top of the crop */
.farr{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.farr__tile{margin:0;aspect-ratio:4/5;border-radius:var(--r-card)}
.farr__tile img{width:100%;height:100%;object-fit:cover;object-position:center top}
@media(max-width:1000px){.farr{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.farr{grid-template-columns:repeat(2,1fr);gap:10px}}

/* === FB5 A rows 2, 3, 4, 5, 6, 12, 13 === index.html only */

/* rows 2, 3 · statement hover float. The float box is 170x212 (4:5) and every
   new source is cropped to 4:5, so nothing is cut. object-position is a guard. */
.stmt__float{object-position:center 40%}

/* row 4 · every logo in the wall is now a link to its MarketinCrew work page.
   The <a> takes over the flex sizing the <img> used to carry.
   Full colour, per AGENTS.md section 3 (no grayscale, no colour-on-hover reveal). */
.logowall__link{flex:0 0 calc((100% - 185px)/8);min-width:0;max-width:100%;
  display:flex;align-items:center;justify-content:center;border-radius:10px;
  transition:transform .24s ease,box-shadow .24s ease}
.logowall__link:hover,.logowall__link:focus-visible{transform:translateY(-2px);
  box-shadow:0 8px 22px -12px rgba(29,56,106,.45)}
.logowall__link:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.logowall img,.logowall__link img{flex:none;width:100%;height:clamp(44px,3.6vw,58px);
  object-fit:contain;filter:none;opacity:1;transform:none}
.logowall__link:hover img{filter:none;opacity:1;transform:none}
@media(max-width:1180px){.logowall__link{flex-basis:calc((100% - 123px)/6)}}
@media(max-width:900px){.logowall__link{flex-basis:calc((100% - 63px)/4)}}
@media(max-width:560px){.logowall__link{flex-basis:calc((100% - 35px)/3)}}

/* row 6 · Fashion and Lifestyle is a full-length portrait in a 1/1 box.
   center 28% cut the top of the model's head, so this tile crops from the top. */
.indstrip__item--top .indstrip__shot img{object-position:center top}

/* rows 10, 11 · teaching teaser now leads with a clip that has Manan in frame */
.mcard--teach video{object-position:center 30%}

/* row 12 · year strip, single row, dots on a hairline */
.tline{margin-top:52px}
.tline__scroll{position:relative}
.tline__row{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr))}
.tline__i{position:relative;min-width:0}
.tline__i::before{content:"";position:absolute;top:19px;left:0;right:0;height:1px;
  background:var(--hairline)}
.tline__i:first-child::before{left:50%}
.tline__i:last-child::before{right:50%}
.tline__btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;
  width:100%;padding:14px 8px 0;border:0;background:none;cursor:pointer;
  font-family:var(--fb);color:inherit;text-align:center}
.tline__dot{width:11px;height:11px;border-radius:50%;background:#fff;
  border:2px solid var(--navy);position:relative;z-index:1;
  transition:transform .2s ease,background-color .2s ease}
.tline__btn:hover .tline__dot,.tline__btn.is-on .tline__dot{transform:scale(1.35);
  background:var(--mc-yellow)}
.tline__yr{font-family:var(--fa);font-size:12.5px;letter-spacing:.06em;color:var(--ink);
  margin-top:3px;white-space:nowrap}
.tline__lbl{font-size:11.5px;line-height:1.35;color:var(--gray-6)}
.tline__pop{position:absolute;bottom:calc(100% + 12px);left:50%;margin-left:-108px;width:216px;
  padding:10px;background:#fff;border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:0 18px 40px -22px rgba(29,56,106,.5);
  opacity:0;transform:translateY(6px);pointer-events:none;z-index:4;
  transition:opacity .2s ease,transform .2s ease}
.tline__btn:hover .tline__pop,.tline__btn:focus-visible .tline__pop,
.tline__btn.is-on .tline__pop{opacity:1;transform:translateY(0)}
.tline__btn:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:12px}
.tline__i:first-child .tline__pop{left:0;margin-left:0}
.tline__i:last-child .tline__pop{left:auto;right:0;margin-left:0}
.tline__card{display:flex;align-items:center;justify-content:center;overflow:hidden;
  aspect-ratio:4/3;border-radius:16px;background:var(--paper);border:1px solid var(--hairline)}
.tline__card img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.tline__card--mark{padding:20px}
.tline__card--mark img{width:100%;height:auto;max-height:100%;object-fit:contain}
.tline__card--note{flex-direction:column;gap:4px}
.tline__card--note b{font-family:var(--fh);font-weight:800;font-size:30px;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tline__card--note span{font-family:var(--fa);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gray-6)}
.tline__cap{display:block;margin-top:9px;font-size:11.5px;line-height:1.45;color:var(--gray-7)}
@media(max-width:820px){
  .tline{margin-top:40px}
  .tline__scroll{margin:0 -24px;padding:196px 24px 0;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tline__scroll::-webkit-scrollbar{display:none}
  .tline__row{display:flex;min-width:max-content}
  .tline__i{flex:0 0 40vw;scroll-snap-align:center}
  .tline__i::before{top:19px}
  .tline__pop{width:min(216px,68vw);margin-left:calc(min(216px,68vw)/-2)}
  /* one card is always on, so the reserved space is never empty */
  .tline__i:first-child .tline__pop{opacity:1;transform:translateY(0)}
  .tline.has-active .tline__i:first-child .tline__pop{opacity:0;transform:translateY(6px)}
  .tline.has-active .tline__btn.is-on .tline__pop{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .tline__pop,.tline__dot{transition:none}
}

/* row 13 · the MarketinCrew wordmark was reading smaller than the other four marks */
.five__card--mc .five__logo img{max-height:40px;max-width:172px}
/* travel food grid: six tiles in clean rows. .grid--3 is auto-fit minmax(260px) which
   yields four tracks at 1232px and leaves a ragged last row, so pin it by breakpoint. */
.grid--food{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid--food{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid--food{grid-template-columns:1fr}}
/* FB5 D row 30 follow-up: the native control bar sits along the bottom of the phone card, so the chip moves above it */
.vphone .mcard__label{bottom:56px}
@media(max-width:860px){.vphone .mcard__label{bottom:50px}}

/* === FB6 · video gradient banner ==========================================
   Method: the footage decides the design. analyse_clip.py measured IMG_5685
   as subject centre/bottom, dead space top (row busyness top .238 vs bottom
   .483), so the wash comes DOWN from the top and the copy sits in it. Same
   conclusion Manan reached by eye on the AI Crew band. Change the clip and you
   re-run the analysis, you do not reuse these numbers.
   -------------------------------------------------------------------------- */
.vban{
  position:relative; isolation:isolate; overflow:hidden;
  width:100vw; margin-inline:calc(50% - 50vw);
  height:clamp(320px,36vw,520px);
  background:#fff;
}
.vban__media{position:absolute; inset:0; z-index:0}
.vban__media video,.vban__media img{
  width:100%; height:100%; object-fit:cover;
  object-position:50% 70%;           /* subject sits low in frame, so bias down */
  display:block;
}
/* the wash. Starts at the page colour so there is no seam with the section
   above, and is fully clear before it reaches the subject. */
.vban__wash{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    #fff 0%,
    rgba(255,255,255,.94) 14%,
    rgba(255,255,255,.60) 32%,
    rgba(255,255,255,.18) 54%,
    rgba(255,255,255,0) 74%);
}
/* copy lives in the washed zone, in ink, so it reads as page not as caption */
.vban__in{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:flex-start;
  max-width:1140px; margin-inline:auto; padding:clamp(26px,3.4vw,46px) 24px 0;
}
.vban__eyebrow{
  font-family:var(--fh); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gray-6); margin:0 0 10px;
}
.vban__h{
  font-family:var(--fh); font-weight:700; color:var(--ink);
  font-size:clamp(22px,3.1vw,40px); line-height:1.08; letter-spacing:-.01em;
  margin:0; max-width:20ch;
}
.vban__sub{
  margin:12px 0 0; max-width:46ch; color:var(--gray-7);
  font-size:clamp(14px,1.15vw,17px); line-height:1.55;
}
.vban__chip{
  position:absolute; z-index:2; left:clamp(16px,2.2vw,28px); bottom:clamp(14px,1.8vw,22px);
  background:rgba(11,19,38,.72); color:#fff; border-radius:999px;
  padding:7px 14px; font-family:var(--fh); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase;
}
@media(max-width:820px){
  .vban{height:auto; min-height:0}
  /* on a phone the strip is short, so the wash would eat the whole picture.
     Copy moves out from over the film and sits under it on the page. */
  .vban__media{position:relative; height:250px}
  .vban__wash{
    inset:0 0 auto 0; height:250px;
    background:linear-gradient(180deg,
      rgba(255,255,255,.55) 0%, rgba(255,255,255,.10) 38%, rgba(255,255,255,0) 62%);
  }
  .vban__in{padding:22px 22px 4px; height:auto}
  .vban__h{max-width:100%}
  .vban__chip{bottom:auto; top:250px; transform:translateY(-34px)}
}
@media(prefers-reduced-motion:reduce){ .vban__media video{display:none} }

/* ==========================================================================
   FB7 · vban, second pass.
   Manan, Live Sessions "Screen Recording 2026-09-08 at 10.34.24.mov":
     "it has to span left end to end"
     "it has to be cut ... there is no people here, so this is the more
      important part"
     "I don't know why the text is here below"
     "the text is on the left, the gradient has come on the left, and yet
      neither me nor the people are getting written over"
   So: full bleed, frame cropped before it is designed on, copy inside the
   film, and the wash bounded by faces.

   The gradient stops below are lifted verbatim from the AI Crew band he named
   as the reference (withaicrew.com, .video-teach-section), mirrored for the
   flip variant. Do not retune them by eye.

   Which side the wash comes from is measured, not chosen. On this clip
   (IMG_5685, cropped 34% off the top) safezone.py puts the face cluster at
   x .218 to .692, so there is 0.308 of clear frame on the RIGHT and only
   0.218 on the left. Right wash, copy right. Change the clip, re-measure.
   ========================================================================== */
.vban--h{
  position:relative; isolation:isolate; overflow:hidden;
  /* band aspect is set to sit close to the clip aspect so `cover` throws away
     as little of the frame as possible. 47vw against a 16:9 clip crops about
     8% off each side, which keeps the face cluster where safezone measured it. */
  height:clamp(520px,47vw,720px); background:#fff;
  margin:clamp(30px,3.4vw,48px) 0;
}
.vban--h .vban__media{position:absolute; inset:0; z-index:0}
.vban--h .vban__media video,.vban--h .vban__media img{
  width:100%; height:100%; object-fit:cover;
  object-position:50% 50%;
  display:block;
}
.vban--h.is-flip .vban__media video,.vban--h.is-flip .vban__media img{object-position:30% 50%}
.vban--h .vban__wash{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.96) 18%,
    rgba(255,255,255,.88) 28%,
    rgba(255,255,255,.55) 38%,
    rgba(255,255,255,.18) 48%,
    rgba(255,255,255,0)   58%);
}
.vban--h.is-flip .vban__wash{
  background:linear-gradient(270deg,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.96) 18%,
    rgba(255,255,255,.88) 28%,
    rgba(255,255,255,.55) 38%,
    rgba(255,255,255,.18) 48%,
    rgba(255,255,255,0)   58%);
}
/* the warmth behind the copy, same idea as the AI Crew band */
.vban--h .vban__glow{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 22% 50%,
    rgba(106,217,195,.16) 0%, rgba(174,198,255,.09) 30%, transparent 55%);
}
.vban--h.is-flip .vban__glow{
  background:radial-gradient(ellipse at 78% 50%,
    rgba(106,217,195,.16) 0%, rgba(174,198,255,.09) 30%, transparent 55%);
}
.vban--h .vban__in{
  position:relative; z-index:2; height:100%;
  max-width:1140px; margin-inline:auto; padding:0 24px;
  /* flex-direction is stated because the FB6 .vban__in above sets column, and
     without it the copy centres itself over the people. */
  display:flex; flex-direction:row; align-items:center; justify-content:flex-start;
}
.vban--h.is-flip .vban__in{justify-content:flex-end}
.vban--h .vban__col{max-width:38%}
.vban--h .vban__eyebrow{
  font-family:var(--fh); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gray-6); margin:0 0 12px;
}
.vban--h .vban__h{
  font-family:var(--fh); font-weight:700; color:var(--ink);
  font-size:clamp(28px,3.4vw,44px); line-height:1.06; letter-spacing:-.015em;
  margin:0;
}
.vban--h .vban__sub{
  margin:16px 0 0; color:var(--gray-7);
  font-size:clamp(15px,1.2vw,17px); line-height:1.6;
}
.vban--h .vban__cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:22px;
  background:var(--ink); color:#fff; border-radius:999px;
  padding:13px 22px; font-family:var(--fh); font-size:14px; font-weight:600;
  text-decoration:none; transition:transform .18s ease, opacity .18s ease;
}
.vban--h .vban__cta:hover{transform:translateY(-1px); opacity:.92}
/* the chip sits on the picture side, never on the copy side */
.vban--h .vban__chip{
  position:absolute; z-index:2; bottom:clamp(14px,1.8vw,22px);
  background:rgba(11,19,38,.72); color:#fff; border-radius:999px;
  padding:7px 14px; font-family:var(--fh); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase;
  left:auto; right:clamp(16px,2.2vw,28px);
}
.vban--h.is-flip .vban__chip{right:auto; left:clamp(16px,2.2vw,28px)}

/* Phone. A wash deep enough to carry a paragraph on a 390px screen eats the
   whole picture, so the copy leaves the film and sits under it. */
@media(max-width:860px){
  .vban--h{height:auto}
  .vban--h .vban__media{position:relative; height:230px}
  .vban--h .vban__wash,.vban--h.is-flip .vban__wash{
    inset:0 0 auto 0; height:230px;
    background:linear-gradient(180deg,
      rgba(255,255,255,.42) 0%, rgba(255,255,255,.08) 40%, rgba(255,255,255,0) 64%);
  }
  .vban--h .vban__glow{display:none}
  .vban--h .vban__in{height:auto; display:block; padding:22px 22px 26px}
  .vban--h.is-flip .vban__in{justify-content:flex-start}
  .vban--h .vban__col{max-width:100%}
  .vban--h .vban__chip,.vban--h.is-flip .vban__chip{
    left:16px; right:auto; top:230px; bottom:auto; transform:translateY(-34px)
  }
}
@media(prefers-reduced-motion:reduce){ .vban--h .vban__media video{display:none} }

/* ==========================================================================
   FB8 · Travel Diaries globe.
   Manan, 2026-09-08: text on top, the globe right below it, always turning,
   a pin per place with that place's reel behind it, hover to preview, click
   to watch, and it stops when you touch it.
   The globe itself is a WebGL canvas from cobe, bundled in /assets/js.
   ========================================================================== */
.gsec{position:relative; overflow:hidden; background:#fff}
.gsec::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 8%,
    rgba(106,217,195,.16) 0%, rgba(174,198,255,.10) 34%, transparent 62%);
}
.globe{position:relative; z-index:1}
.globe__grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,3.4vw,52px); align-items:center; margin-top:clamp(18px,2.4vw,32px);
}
.globe__stage{position:relative; width:100%; max-width:560px; margin-inline:auto; aspect-ratio:1/1}
.globe__canvas{
  width:100%; height:100%; display:block; cursor:grab;
  opacity:0; transition:opacity .6s ease;
  contain:layout paint size;
}
/* the ring that marks where the globe has turned to */
.globe__focus{
  position:absolute; left:50%; top:50%; width:54px; height:54px; margin:-27px 0 0 -27px;
  border-radius:50%; pointer-events:none;
  border:1.5px solid rgba(16,158,140,.55);
  box-shadow:0 0 0 5px rgba(16,158,140,.10);
  animation:gpulse 2.4s ease-out infinite;
}
@keyframes gpulse{
  0%{transform:scale(.72); opacity:.95}
  70%{transform:scale(1.25); opacity:0}
  100%{transform:scale(1.25); opacity:0}
}
@media(prefers-reduced-motion:reduce){ .globe__focus{animation:none; opacity:.6} }

/* the card that shows the reel for the selected place */
.globe__card{
  position:relative; border-radius:18px; overflow:hidden; background:#0B1326;
  /* an explicit width, because margin-inline:auto on a stretched flex item
     collapses a box whose only children are absolutely positioned */
  width:min(248px,100%); aspect-ratio:9/16; align-self:flex-start;
  box-shadow:0 20px 50px rgba(11,19,38,.16);
}
.globe__cardimg,.globe__cardvid{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.globe__cardvid{opacity:0; transition:opacity .35s ease}
.globe__card.is-live .globe__cardvid{opacity:1}
.globe__cardtext{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px 18px 16px;
  background:linear-gradient(180deg, rgba(11,19,38,0) 0%, rgba(11,19,38,.78) 58%, rgba(11,19,38,.92) 100%);
  color:#fff;
}
.globe__cardtitle{font-family:var(--fh); font-size:19px; font-weight:700; margin:0; line-height:1.2}
.globe__cardmeta{margin:4px 0 0; font-size:12.5px; opacity:.78; letter-spacing:.02em}
.globe__watch{
  display:inline-flex; align-items:center; gap:7px; margin-top:12px;
  background:#fff; color:var(--ink); border:0; border-radius:999px; cursor:pointer;
  padding:10px 16px; font-family:var(--fh); font-size:13px; font-weight:600;
}
.globe__watch:hover{opacity:.9}

.globe__aside{display:flex; flex-direction:column; gap:16px; min-width:0}
.globe__chips{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.globe__chip{
  appearance:none; border:1px solid var(--hairline); background:#fff; cursor:pointer;
  border-radius:999px; padding:8px 14px; font-family:var(--fh); font-size:13px;
  color:var(--gray-7); transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.globe__chip:hover{border-color:rgba(16,158,140,.5); color:var(--ink)}
.globe__chip.is-on{background:var(--ink); border-color:var(--ink); color:#fff}
.globe__bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.globe__sound{
  appearance:none; border:1px solid var(--hairline); background:#fff; cursor:pointer;
  border-radius:999px; padding:8px 14px; font-family:var(--fh); font-size:12.5px;
  color:var(--gray-7); display:inline-flex; align-items:center; gap:7px;
}
.globe__sound.is-on{border-color:var(--ink); color:var(--ink)}
.globe__hint{margin:0; font-size:12.5px; color:var(--gray-6)}

@media(max-width:900px){
  .globe__grid{grid-template-columns:1fr; gap:22px}
  .globe__stage{max-width:420px}
  .globe__card{width:min(220px,100%); margin-inline:auto; align-self:center}
  .globe__aside{order:2}
}

/* --- FB8b · the reel thumbnails that ride on the globe -------------------- */
.globe__pins{position:absolute; inset:0; pointer-events:none}
.globe__pin{
  position:absolute; left:0; top:0; appearance:none; cursor:pointer;
  width:40px; height:54px; overflow:visible;
  /* a small polaroid, which is the look Manan sketched with the pinned map */
  background:#fff; border:0; padding:3px 3px 7px; border-radius:3px;
  box-shadow:0 5px 14px rgba(11,19,38,.24);
  will-change:transform, opacity; transition:opacity .18s linear;
}
.globe__pin img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:1px;
  background:#e9ecef;
}
.globe__pin::after{                      /* the stalk down to the surface */
  content:""; position:absolute; left:50%; bottom:-7px; width:1.5px; height:7px;
  background:rgba(16,158,140,.75); transform:translateX(-50%);
}
.globe__pinname{
  position:absolute; left:50%; top:calc(100% + 9px); transform:translateX(-50%);
  font-family:var(--fh); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gray-7); white-space:nowrap; opacity:0; transition:opacity .18s ease;
  pointer-events:none;
}
.globe__pin:hover,.globe__pin.is-on{
  box-shadow:0 0 0 2px #109E8C, 0 10px 22px rgba(11,19,38,.30);
}
.globe__pin:hover .globe__pinname,.globe__pin.is-on .globe__pinname{opacity:1}
.globe__pin:focus-visible{outline:2px solid #109E8C; outline-offset:2px}
@media(max-width:900px){
  .globe__pin{width:31px; height:42px; padding:2px 2px 5px}
  .globe__pinname{display:none}
}

/* ==========================================================================
   FB9 · vban portrait variant.
   67 of the 70 clips in MMM Stock 2026 are portrait phone video, so the
   horizontal band above cannot use them. Do not stretch a portrait clip and
   do not blur-fill behind it. Give it a panel on one side of the band, let
   the wash dissolve its inner edge into the page instead of drawing a border,
   and put the copy in the other half. Same four rules: full bleed band,
   cropped clip, copy in the composition, no face under a tint.
   ========================================================================== */
.vban--p{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(430px,42vw,600px); background:#fff;
  margin:clamp(30px,3.4vw,48px) 0;
  display:grid; grid-template-columns:44fr 56fr; align-items:stretch;
}
.vban--p.is-flip{grid-template-columns:56fr 44fr}
/* grid-row is stated because .vban__in claims row 1 across both columns, and
   without it the panel auto-places into a second row and collapses. */
.vban--p .vban__panel{position:relative; overflow:hidden; grid-row:1; grid-column:2; background:#0B1326}
.vban--p.is-flip .vban__panel{grid-column:1}
.vban--p .vban__panel video,.vban--p .vban__panel img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 40%; display:block;
}
/* the join. The wash runs from the copy side into the film so there is no
   edge, which is what makes it read as one band and not a picture next to
   some words. */
/* The wash has to be still working WELL PAST the panel edge at 50%, otherwise
   the join reads as a hard vertical cut, which is the one thing this variant
   exists to avoid. It is fully clear only at 72%. */
.vban--p .vban__seam{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,1)   0%,
    rgba(255,255,255,1)   38%,
    rgba(255,255,255,.94) 48%,
    rgba(255,255,255,.66) 56%,
    rgba(255,255,255,.30) 64%,
    rgba(255,255,255,0)   74%);
}
.vban--p.is-flip .vban__seam{
  background:linear-gradient(270deg,
    rgba(255,255,255,1)   0%,
    rgba(255,255,255,1)   38%,
    rgba(255,255,255,.94) 48%,
    rgba(255,255,255,.66) 56%,
    rgba(255,255,255,.30) 64%,
    rgba(255,255,255,0)   74%);
}
.vban--p .vban__glow{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 24% 50%,
    rgba(106,217,195,.15) 0%, rgba(174,198,255,.09) 32%, transparent 58%);
}
.vban--p.is-flip .vban__glow{background:radial-gradient(ellipse at 76% 50%,
    rgba(106,217,195,.15) 0%, rgba(174,198,255,.09) 32%, transparent 58%)}
.vban--p .vban__in{
  position:relative; z-index:3; grid-row:1; grid-column:1/-1;
  max-width:1140px; margin-inline:auto; width:100%; padding:clamp(40px,4.6vw,68px) 24px;
  display:flex; flex-direction:row; align-items:center; justify-content:flex-start;
}
.vban--p.is-flip .vban__in{justify-content:flex-end}
.vban--p .vban__col{max-width:41%}
.vban--p .vban__eyebrow{
  font-family:var(--fh); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gray-6); margin:0 0 12px;
}
.vban--p .vban__h{
  font-family:var(--fh); font-weight:700; color:var(--ink);
  font-size:clamp(26px,3.1vw,40px); line-height:1.07; letter-spacing:-.015em; margin:0;
}
.vban--p .vban__sub{
  margin:15px 0 0; color:var(--gray-7);
  font-size:clamp(15px,1.15vw,17px); line-height:1.6;
}
.vban--p .vban__cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px;
  background:var(--ink); color:#fff; border-radius:999px;
  padding:13px 22px; font-family:var(--fh); font-size:14px; font-weight:600;
  text-decoration:none; transition:transform .18s ease, opacity .18s ease;
}
.vban--p .vban__cta:hover{transform:translateY(-1px); opacity:.92}
/* left:auto matters: the base .vban__chip sets left, and a box with both left
   and right set stretches the full width instead of hugging its text. */
.vban--p .vban__chip{
  position:absolute; z-index:4; bottom:clamp(14px,1.8vw,22px);
  left:auto; right:clamp(16px,2.2vw,28px);
  background:rgba(11,19,38,.72); color:#fff; border-radius:999px;
  padding:7px 14px; font-family:var(--fh); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase;
}
.vban--p.is-flip .vban__chip{right:auto; left:clamp(16px,2.2vw,28px)}

@media(max-width:860px){
  .vban--p{display:block; min-height:0}
  .vban--p .vban__panel,.vban--p.is-flip .vban__panel{position:relative; height:300px; grid-row:auto; grid-column:auto}
  .vban--p .vban__seam,.vban--p.is-flip .vban__seam{
    inset:0 0 auto 0; height:300px;
    background:linear-gradient(180deg,
      rgba(255,255,255,.36) 0%, rgba(255,255,255,.06) 42%, rgba(255,255,255,0) 66%);
  }
  .vban--p .vban__glow{display:none}
  .vban--p .vban__in,.vban--p.is-flip .vban__in{display:block; padding:24px 22px 28px}
  .vban--p .vban__col{max-width:100%}
  .vban--p .vban__chip,.vban--p.is-flip .vban__chip{
    left:16px; right:auto; top:300px; bottom:auto; transform:translateY(-34px)
  }
}
@media(prefers-reduced-motion:reduce){ .vban--p .vban__panel video{display:none} }

/* --- FB9b · two corrections to the FB6 vertical band ---------------------
   1. It no longer needs the 100vw trick: every band now sits between sections
      rather than inside .wrap, and 100vw includes the scrollbar, which pushed
      the page 7px wider than the viewport on desktop.
   2. A shallow wash, for a clip whose measured clear depth is small. The crew
      shot has faces from y .41 down, so a wash running to 74% sits on the back
      row. This one is fully clear by 40%. ---------------------------------- */
.vban{width:auto; margin-inline:0}
.vban.is-shallow .vban__wash{
  background:linear-gradient(180deg,
    #fff 0%,
    rgba(255,255,255,.96) 9%,
    rgba(255,255,255,.72) 19%,
    rgba(255,255,255,.30) 30%,
    rgba(255,255,255,0)   40%);
}
.vban.is-shallow .vban__in{padding-top:clamp(18px,2vw,30px)}
.vban.is-shallow .vban__sub{max-width:52ch; font-size:clamp(13.5px,1.05vw,15.5px)}
@media(max-width:820px){
  .vban.is-shallow .vban__wash{
    inset:0 0 auto 0; height:250px;
    background:linear-gradient(180deg,
      rgba(255,255,255,.55) 0%, rgba(255,255,255,.10) 38%, rgba(255,255,255,0) 62%);
  }
}

/* --- FB9c · the bare band -------------------------------------------------
   For a frame with no clear edge anywhere: no wash, no overlaid copy, just the
   picture full bleed with its location chip. The words go on the page above it.
   This is the honest answer when the footage will not take a text column, and
   it is better than a heavier gradient, which only greys the picture out. --- */
.vban--bare{height:clamp(300px,32vw,460px); margin:0 0 clamp(30px,3.4vw,48px)}
.vban--bare .vban__wash{display:none}
@media(max-width:820px){
  .vban--bare{height:280px}
  .vban--bare .vban__media{position:absolute; height:100%}
  .vban--bare .vban__chip{top:auto; bottom:14px; transform:none}
}

/* --- FB8c · the globe card plays the reel in place --------------------------
   Manan, 2026-09-08: selecting a place should play it on the right hand side,
   with sound, and that is the end of it. No dialog. So the card gets a play
   state, and the poster steps back while the reel runs. -------------------- */
.globe__card.is-playing .globe__cardimg{opacity:0}
.globe__cardimg{transition:opacity .3s ease}
.globe__card.is-playing .globe__cardtext{
  background:linear-gradient(180deg, rgba(11,19,38,0) 0%, rgba(11,19,38,.55) 62%, rgba(11,19,38,.85) 100%);
}
.globe__watch{min-width:132px; justify-content:center}
.globe__card.is-playing .globe__watch{background:rgba(255,255,255,.86)}

/* --- FB10 · small tidy-ups from Manan's 2026-09-08 review ------------------ */
/* A logo standing in for a photo: contain it, do not crop it, and give it a
   quiet ground so it reads as a deliberate mark rather than a broken image. */
.mcard--mark{background:var(--paper); display:grid; place-items:center}
.mcard--mark img{
  width:auto !important; height:auto !important;
  max-width:56%; max-height:52%; object-fit:contain !important;
}
/* JITO: a line of credit beside the mark, instead of the event film */
.commrow--marks{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.commrow--marks .commrow__note{
  margin:0; max-width:52ch; color:var(--gray-7); font-size:15px; line-height:1.6;
}