/* The Professor Inc. Media — additions on top of site.css (site.css stays identical to theprofessorinc.ca) */

/* Header: 6 links + button need a little less room */
.nav-links{gap:1.5rem}
.nav-links a{font-size:.98rem}
@media (max-width:1240px) and (min-width:901px){
 .nav-links{gap:1.1rem}
 .nav-links a{font-size:.92rem}
 .nav-links .btn{padding:.6rem 1rem;font-size:.9rem}
 .brand img{height:96px}
}

/* Hero: crossfading stills with a caption */
.hero-fade{position:relative;aspect-ratio:3/2}
.hero-fade img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease}
.hero-fade img.on{opacity:1}
.hero-media figcaption{margin-top:.9rem;text-align:center;font-size:.9rem;color:var(--ink-2);min-height:1.5em}
.hero-paths{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.6rem;margin-top:1.2rem}

/* Recent work: logo strip that scrolls slowly */
.logo-strip{background:var(--green);color:var(--sand);padding:1.5rem 0 1.6rem;overflow:hidden}
.logo-strip .strip-label{text-align:center;font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light);margin:0 0 1.1rem}
.logo-window{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-track{display:flex;align-items:center;gap:clamp(3rem,6vw,5.5rem);width:max-content;list-style:none;margin:0;padding:0;animation:logos 38s linear infinite}
.logo-strip:hover .logo-track{animation-play-state:paused}
.logo-track li{flex:none;display:flex;align-items:center}
.logo-track img{height:44px;width:auto;opacity:.92}
.logo-track img.tall{height:62px}
.logo-track img.wide{height:30px}
@keyframes logos{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
 .logo-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;row-gap:1.5rem}
 .logo-track li[aria-hidden="true"]{display:none}
}

/* The challenge: two audience cards */
.paths .path p.challenge-h{font-size:clamp(1.5rem,2.4vw,1.95rem)}
.path .checks{border-top:0;padding-top:0;margin-bottom:1.6rem}
.path-org{background:var(--plum);color:var(--sand)}
.path-org h3{color:#fff}
.path-org .label{color:var(--gold-light)}
.path-org .checks li{color:rgba(232,223,211,.92)}
.path-org .link-arrow{color:#fff}

/* Two levels of support */
.levels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem)}
.level{border-top:2px solid var(--gold);padding-top:1.6rem;text-align:center;display:flex;flex-direction:column;align-items:center}
.level .kicker{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light);margin:0 0 .4rem}
.level h3{font-size:clamp(1.4rem,2.2vw,1.75rem);margin-bottom:.9rem}
.level p{color:rgba(232,223,211,.9);text-align:left;max-width:30em}
.flow{list-style:none;margin:.2rem 0 1.1rem;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem .7rem}
.flow li{border:1px solid rgba(201,163,90,.55);border-radius:999px;padding:.45rem 1rem;color:#fff;font-size:1rem}
.flow li.arr{border:0;padding:0;color:var(--gold-light)}
.dark .chips li{background:rgba(255,255,255,.06);border-color:rgba(232,223,211,.25);color:var(--sand)}
.level .chips{margin-bottom:1.4rem}
.level .link-arrow{color:#fff;margin-top:auto}

/* Selected work carousel (films and graphic novel) */
.works{margin-top:0;padding-top:0;border-top:0}
.works .car-track{grid-auto-columns:calc((100% - 2.5rem)/3)}
.works .slide{background:var(--paper)!important;color:var(--ink);border:1px solid var(--line);padding:0;min-height:0;overflow:hidden;align-items:stretch;text-align:center}
.media-btn{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;margin:0;background:var(--green) center/cover no-repeat;cursor:pointer;overflow:hidden}
.media-btn img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.media-btn:hover img{transform:scale(1.03)}
.media-btn .play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:rgba(24,24,24,.62);display:grid;place-items:center;color:#fff;box-shadow:0 0 0 2px rgba(201,163,90,.9)}
.media-btn .ph{position:absolute;inset:0;display:grid;place-items:end center;padding-bottom:.8rem;color:rgba(232,223,211,.7);font-size:.85rem}
.media-btn iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.work-body{padding:1.2rem 1.3rem 1.4rem}
.work-kind{display:block;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--terra);margin-bottom:.3rem}
.works .slide h4{color:var(--green);font-size:1.18rem;margin:0 0 .4rem}
.work-body p{font-size:.98rem;color:var(--ink-2);margin:0;text-align:left}

/* Leadership */
.lead-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.lead-grid .portrait figcaption{color:var(--ink-2)}
.lead-grid .portrait figcaption strong{color:var(--green)}
.lead-grid .portrait .creds{color:var(--terra)}
.lead-bio p{color:var(--ink-2)}

/* Book section without portrait */
.consult-simple{text-align:center}
.consult-simple .lead{margin:0 auto 1.8rem;color:rgba(232,223,211,.92)}

@media (max-width:900px){
 .levels,.lead-grid{grid-template-columns:1fr}
 .works .car-track{grid-auto-columns:86%}
 .logo-track img{height:36px}
 .logo-track img.tall{height:52px}
 .logo-track img.wide{height:24px}
 .lead-grid .portrait{max-width:340px;margin-inline:auto}
}

/* Gold outline sits behind the image only, not the caption */
.hero-media::before{display:none}
.hero-fade::before{content:"";position:absolute;inset:auto -18px -18px auto;width:62%;height:62%;border:2px solid var(--gold);border-radius:28px 28px 120px 28px;z-index:-1}
.hero-fade{z-index:0}
.hero-fade img{z-index:1}
.hero-fade img{border-radius:220px 28px 28px 28px}
@media (max-width:900px){
 .hero-fade::before{inset:auto -10px -10px auto}
 .hero-fade img{border-radius:120px 20px 20px 20px}
}
/* Phone: production steps stacked with downward arrows */
@media (max-width:560px){
 .flow{flex-direction:column;gap:.35rem}
 .flow li.arr{transform:rotate(90deg);line-height:1}
}

/* Logos are shown unaltered. Bishop's purple logo sits on a light tile so it can be read on green. */
.logo-track li.tile{background:var(--cream);border-radius:12px;padding:.55rem .9rem}
.logo-track img.emblem{height:84px}
@media (max-width:900px){.logo-track img.emblem{height:66px}}

/* Challenge bullets: dot sits inline with the centred text, so no gap when a line wraps */
.path .checks li{display:block;text-align:center}
.path .checks li::before{display:inline-block;vertical-align:middle;margin:0 .6rem .2rem 0}

/* ===== Inner pages: Researchers and Organizations ===== */
.page-hero{position:relative;overflow:hidden}
.page-hero .wrap{position:relative;z-index:1}
.grant-line{text-align:center;font-weight:600;color:var(--green);margin:1rem auto 0;max-width:36em}
.media-logo{background:var(--cream)!important;display:grid;place-items:center;cursor:default}
.media-logo img{width:auto!important;height:auto!important;max-width:72%;max-height:58%;object-fit:contain}
.media-btn:hover .media-logo img,.media-logo:hover img{transform:none}
.film-points{list-style:none;margin:0 auto 2.2rem;padding:0;max-width:40rem;display:grid;gap:.7rem}
.film-points li{display:block;text-align:center;color:rgba(232,223,211,.92)}
.film-points li::before{content:"";display:inline-block;vertical-align:middle;width:8px;height:8px;border-radius:50%;background:var(--gold);margin:0 .6rem .2rem 0}
.film-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.film-card{background:var(--paper);border-radius:var(--r);overflow:hidden;color:var(--ink);text-align:center}
.film-card h4{color:var(--green);font-size:1.18rem;margin:0 0 .4rem}
.dark .flow{margin-top:.4rem}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.pillar h3{margin:.2rem 0 1rem}
.pillar .checks{border-top:1px solid var(--line);padding-top:1.1rem;margin:0}
.pillar .checks li{display:block;text-align:center}
.pillar .checks li::before{display:inline-block;vertical-align:middle;margin:0 .6rem .2rem 0}
.features{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.feature{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:clamp(1.6rem,3vw,2.4rem)}
.feature h3{text-align:center;font-size:clamp(1.3rem,2vw,1.6rem)}
.feature p{color:var(--ink-2);margin:0}
.feature-logo{height:96px;display:grid;place-items:center;margin-bottom:1.1rem}
.feature-logo img{max-height:90px;max-width:75%;width:auto}
.starts{margin:0 auto}
@media (max-width:900px){
 .film-pair,.pillars,.features{grid-template-columns:1fr}
}

/* Funders strip (names as text, Researchers page) */
.funders .logo-track{animation-duration:30s;gap:clamp(3.5rem,8vw,7rem)}
.funder{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:600;letter-spacing:.2em;color:var(--gold-light)}



/* Inner pages, v2: denser layout like theprofessorinc.ca */
.paths .path{justify-content:center}
.films-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem;align-items:stretch}
.films-text{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border:1px solid rgba(232,223,211,.2);border-radius:var(--r);padding:1.6rem 1.3rem}
.films-text .flow{margin-bottom:.6rem}
.films-text .minutes{font-size:.85rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light);margin:0 0 1.3rem}
.films-text .film-points{margin:0;max-width:none}
.film-card{display:flex;flex-direction:column}
@media (max-width:900px){.films-grid{grid-template-columns:1fr}}
.hero.inner h1{font-size:clamp(2.1rem,3.3vw,3.05rem);line-height:1.1}
.films-text .flow{flex-direction:column;gap:.35rem}
.films-text .flow li.arr{transform:rotate(90deg);line-height:1}

/* Spacing only: less empty space on inner pages (layout unchanged) */
.page-hero{padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(1.75rem,3vw,2.5rem)}
.page-hero h1{margin-bottom:.35em}
.minutes{font-size:.85rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light);margin:.6rem 0 0}
.funders .strip-label{font-size:1rem;letter-spacing:.08em;text-transform:none;color:var(--sand);font-weight:500}
@media (min-width:1200px){
 .narrow{max-width:1100px}
 .starts{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
 .film-points{max-width:none;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:2rem}
 .film-points li{border:1px solid rgba(232,223,211,.2);border-radius:14px;padding:1rem 1.2rem}
 .film-points li::before{display:none}
}

/* Phone: hide the "Why it matters" label above the challenge cards */
@media (max-width:900px){.why-head{display:none}}

/* Production steps: equal-size gold boxes that stand out on green */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:.6rem;max-width:720px;margin-inline:auto}
.flow li{display:flex;align-items:center;justify-content:center;text-align:center;background:var(--gold);border:0;color:var(--ink);font-weight:600;border-radius:12px;padding:.8rem 1rem;font-size:1rem;line-height:1.25}
.flow li.arr{background:none;color:var(--gold-light);padding:0;font-size:1.3rem}
.films-text .flow,.flow{flex-direction:initial}
@media (max-width:560px){
 .flow{grid-template-columns:1fr;max-width:300px;gap:.4rem}
 .flow li.arr{transform:rotate(90deg)}
}
/* Menu text same size as theprofessorinc.ca */
.nav-links a{font-size:1rem}
.nav-links{gap:1.45rem}

/* ===== Contrast: no box sits on a background of the same colour ===== */
.section.challenge{background:var(--sand)}
.dark .chips li{background:var(--sand);color:var(--green);border:0;font-weight:500}
.pillar{background:var(--sand);border-color:transparent}
.pillar .checks{border-top-color:rgba(24,56,48,.18)}
.media-logo{background:var(--sand)!important}
.works .slide{box-shadow:0 1px 2px rgba(24,24,24,.05),0 10px 26px -14px rgba(24,56,48,.35)}
.step:nth-child(4) .step-circle{background:var(--plum);color:#fff}
@media (min-width:1200px){
 .film-points li{background:var(--sand);color:var(--ink);border:0}
}

/* Home "Two levels of support": each level in its own box (desktop and phone) */
.levels{gap:1.5rem}
.level{border-top:0;border-radius:24px;padding:clamp(1.8rem,3vw,2.6rem) clamp(1.4rem,3vw,2.4rem)}
.level:nth-child(1){background:var(--paper)}
.level:nth-child(1) .kicker{color:var(--terra)}
.level:nth-child(1) h3{color:var(--green)}
.dark .level:nth-child(1) .chips li{background:var(--green);color:#fff}
.level:nth-child(1) .link-arrow{color:var(--green)}
.level:nth-child(2){background:var(--plum)}
.level:nth-child(2) .kicker{color:var(--gold-light)}

/* Researchers film points: sand boxes on phone too */
.film-points li{background:var(--sand);color:var(--ink);border-radius:14px;padding:.9rem 1.1rem}
.film-points li::before{display:none}

/* "The big picture" pills: same size as each other (shape and layout unchanged) */
.level .chips{display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;gap:.6rem}
.level .chips li{min-width:15.5rem;text-align:center;white-space:nowrap;font-size:.92rem}
@media (max-width:560px){.level .chips{grid-template-columns:max-content}}

/* Green sections stay open, like theprofessorinc.ca: gold line above each column, no boxes */
.level{background:none!important;border-radius:0;padding:1.6rem 0 0;border-top:2px solid var(--gold)}
.level h3{color:#fff!important}
.level .kicker{color:var(--gold-light)!important}
.level .link-arrow{color:#fff!important}
.dark .level .chips li{background:var(--sand)!important;color:var(--green)!important}
.film-points li{background:none!important;color:rgba(232,223,211,.92)!important;border:0!important;border-top:2px solid var(--gold)!important;border-radius:0!important;padding:1rem .4rem 0!important}

/* Equal sizes for what already exists */
.hero-paths .link-arrow{width:11.5rem;justify-content:center}
@media (max-width:560px){main .btn-gold{width:100%}}
/* Home "How we help": Strategy points gold, matching the film step boxes */
.dark .level .chips li{background:var(--gold)!important;color:var(--ink)!important;border-radius:12px;font-weight:600}
/* Strategy page */
.deliver{margin-bottom:0}
.feature-wide{grid-column:1/-1;max-width:760px;justify-self:center;width:100%}
.feature-wide h3{margin-top:0}
.feature-wide{max-width:none}
.feature-wide .feature-logo{margin-bottom:.6rem}
/* Logo areas white so logos supplied on white backgrounds sit cleanly; thin line separates them from the text */
.media-logo{background:#fff!important;border-bottom:1px solid var(--line)}
.media-logo img{max-width:62%;max-height:45%}

/* Portfolio */
.film-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.film-grid .film-card{background:var(--paper);border:1px solid var(--line);box-shadow:0 1px 2px rgba(24,24,24,.05),0 10px 26px -14px rgba(24,56,48,.35)}
.novel{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;margin-bottom:1.5rem}
.novel-cover{width:100%;border-radius:var(--r);box-shadow:var(--shadow)}
.novel-text h3{font-size:clamp(1.5rem,2.4vw,2rem);margin:.2rem 0 .8rem}
.novel-text p{color:var(--ink-2);margin:0}
.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.panel{display:block;border-radius:14px;overflow:hidden;box-shadow:0 8px 20px -12px rgba(24,56,48,.4)}
.panel img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .4s ease}
.panel:hover img{transform:scale(1.03)}
@media (max-width:900px){.film-grid,.novel{grid-template-columns:1fr}.panels{grid-template-columns:1fr 1fr}}
.panel img{aspect-ratio:16/9}
.film-grid{display:flex;flex-wrap:wrap;justify-content:center}
.film-grid .film-card{flex:0 0 calc((100% - 3rem)/3)}
@media (max-width:900px){.film-grid .film-card{flex-basis:100%}}

/* Booking appears once: phone uses only the fixed bar at the bottom of the screen */
@media (max-width:900px){
 #consultation,.foot-book{display:none!important}
}
.hero-paths{margin-top:1.6rem}

/* About */
.about-top .lead-bio .label{text-align:left;justify-content:flex-start}
.about-top h1{font-size:clamp(2.2rem,4vw,3.2rem);margin:.2rem 0 .6rem}
.about-top .lead{margin:0 0 1.4rem;max-width:none}
.bio-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.bio-block{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:clamp(1.5rem,3vw,2.2rem)}
.bio-block h2{font-size:clamp(1.3rem,2vw,1.6rem);margin:0 0 .7rem;text-align:center}
.bio-block p{color:var(--ink-2);margin:0}
@media (max-width:900px){.bio-grid{grid-template-columns:1fr}.about-top .lead-bio{text-align:center}.about-top .lead-bio .label{justify-content:center}}
/* About: no empty gaps */
.about-top .lead-grid{align-items:center}
.bio-grid{display:block;columns:2;column-gap:1.5rem}
.bio-block{break-inside:avoid;margin-bottom:1.5rem}
@media (max-width:900px){.bio-grid{columns:1}}
/* About: middle section plum, no boxes (gold line above each block, like the green sections) */
.bio-plum{background:var(--plum);color:var(--sand)}
.bio-plum .bio-block{background:none;border:0;border-top:2px solid var(--gold);border-radius:0;padding:1.4rem 0 0;margin-bottom:2.2rem}
.bio-plum .bio-block h2{color:#fff}
.bio-plum .bio-block p{color:rgba(232,223,211,.92)}
.bio-plum .bio-grid{column-gap:3rem}
/* About: label and name centred over the opening text */
.about-top .lead-bio .label{justify-content:center!important;text-align:center}
.about-top h1{text-align:center}

/* Contact and Book */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.contact-form{background:var(--paper);border-radius:24px;padding:clamp(1.5rem,3vw,2.4rem);box-shadow:0 10px 26px -14px rgba(24,56,48,.35)}
.page-hero .lead a{color:var(--green);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
@media (max-width:900px){.field-row{grid-template-columns:1fr}}
/* Contact and Book: middle section plum */
.plum-band{background:var(--plum);color:var(--sand)}
.plum-band .portrait figcaption{color:rgba(232,223,211,.85)}
.plum-band .portrait figcaption strong{color:#fff}
.plum-band .portrait .creds{color:var(--gold-light)}
.plum-band .what-happens h3{color:#fff}
.plum-band .cal-fallback{color:rgba(232,223,211,.85)}
.plum-band .cal-fallback a{color:#fff}

/* Large video player over the page */
.video-modal{position:fixed;inset:0;z-index:1000;background:rgba(12,20,18,.88);display:grid;place-items:center;padding:clamp(.75rem,3vw,2.5rem)}
.video-box{position:relative;width:min(1200px,100%)}
.video-frame{position:relative;aspect-ratio:16/9;width:100%;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-close{position:absolute;top:-3.1rem;right:0;width:44px;height:44px;border-radius:50%;border:0;background:var(--gold);color:var(--ink);font-size:1.2rem;font-weight:700;cursor:pointer}
@media (max-width:560px){.video-close{top:-3.3rem}}

/* Researchers: grant-recipients strip stays still; its lead-in matches the other section titles */
.funders .logo-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;row-gap:.8rem}
.funders .logo-track li[aria-hidden="true"]{display:none}
.funders .strip-label{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light)}
.funders .logo-window{-webkit-mask-image:none;mask-image:none}
/* Grant strip title: same style and size as the other section titles */
.funders .section-head{margin:0 auto 1.1rem}
.funders .section-head .label{color:var(--gold-light)}
.funders .section-head .label::before,.funders .section-head .label::after{background:var(--gold-light)}
.funders .section-head{max-width:none}
@media (max-width:900px){.funders .section-head .label::before,.funders .section-head .label::after{display:none}}

/* Page titles at the top (Researchers, Organizations, Strategy, Portfolio, About, Contact, Book, Home) match the section titles */
.hero .label,.page-hero .label,.about-top .lead-bio .label{font-size:1.6rem;letter-spacing:.14em;gap:1rem}
.hero .label::before,.hero .label::after,.page-hero .label::before,.page-hero .label::after,.about-top .lead-bio .label::before,.about-top .lead-bio .label::after{width:44px}
@media (max-width:900px){
 .hero .label,.page-hero .label,.about-top .lead-bio .label{font-size:1rem;gap:.7rem}
}
/* Graphic novel panels: one per row on phone */
@media (max-width:900px){.panels{grid-template-columns:1fr}}
@media (min-width:901px){.hero .hero-copy .label{white-space:nowrap;gap:.8rem}.hero .hero-copy .label::before,.hero .hero-copy .label::after{width:32px}}
/* Graphic novel panel shown large */
.image-modal .video-box img{display:block;width:100%;max-height:82vh;object-fit:contain;border-radius:14px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
/* Phone booking bar: button only */
.mobile-cta .btn{flex:1}
/* Footer: LinkedIn and Google Scholar icons under the email */
.site-footer .social{display:flex;gap:.9rem;justify-content:center;margin-top:.4rem}
.site-footer .social a{display:inline-block;line-height:0;opacity:.9;transition:opacity .2s}
.site-footer .social a:hover{opacity:1}
.site-footer .social img{width:30px;height:30px}