/* Bolutife Awakan — portfolio. Framer design tokens; Instrument Serif (titles) + General Sans (body). */

:root {
  --text: #171717;
  --bg: #f4f3ee;
  --muted: #747474;
  --line: #d1d1d1;
  --surface: #ebeae5;
  --btn: #333;
  --strong: #000;

  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "General Sans", "Helvetica Neue", Arial, sans-serif;

  --m: 24px;               /* page margin */
  --gap: 24px;             /* column gap */
  --title: 180px;          /* section titles */
  --section: 200px;        /* space above each section */
  --nav: 76px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --text: #f4f2ef;
  --bg: #12100e;
  --muted: #a8a6a3;
  --line: #2a2724;
  --surface: #222;
  --btn: #f9f7f4;
  --strong: #fff;
  color-scheme: dark;
}

@media (max-width: 1199px) { :root { --title: clamp(60px, 12.5vw, 150px); --section: 160px; } }
@media (max-width: 809px)  { :root { --m: 16px; --gap: 16px; --title: 60px; --section: 120px; --nav: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .3s ease, color .3s ease;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul { margin: 0; padding: 0; }
ul { list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--m); top: -60px; z-index: 100; background: var(--text); color: var(--bg); padding: 8px 14px; }
.skip:focus { top: 12px; }

.muted { color: var(--muted); }
.h6 { font-size: 18px; line-height: 1.6; letter-spacing: 0.02em; font-weight: 400; }
.h5 { font-size: 32px; line-height: 1.4; font-weight: 400; }
@media (max-width: 809px) { .h6 { font-size: 20px; } }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 40;
  height: var(--nav);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--m);
  background: var(--bg);
  transition: background-color .3s ease;
}
.nav__brand { font-family: var(--serif); font-size: 24px; line-height: 1.11; justify-self: start; white-space: nowrap; }
.nav__reg { display: none; }
.nav__links { display: flex; gap: 0; }
.nav__links a, .nav__contact { font-size: 16px; letter-spacing: 0.2px; padding: 0 26px; position: relative; }
.nav__links a::after, .nav__contact::after { content: ""; position: absolute; left: 26px; right: 26px; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.nav__contact::after { right: 0; }
.nav__links a:hover::after, .nav__links a[aria-current]::after, .nav__contact:hover::after, .nav__contact[aria-current]::after { transform: scaleX(1); }
.nav__right { justify-self: end; display: flex; align-items: center; gap: 0; }
.nav__contact { padding-right: 0; }
.theme { background: none; border: 0; padding: 4px; width: 26px; height: 26px; cursor: pointer; color: var(--text); display: grid; place-items: center; }
.theme svg { width: 18px; height: 18px; }
.icon-moon { display: none; }
:root[data-theme="dark"] .icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: block; }
.nav__menu { display: none; background: none; border: 0; font-size: 20px; cursor: pointer; padding: 0 0 0 20px; }

/* mobile menu: the header drops down into a dark panel, revealing the links as it grows (like the Framer original) */
.menu { display: none; }
@media (max-width: 809px) {
  .menu {
    display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 39;
    height: var(--nav); max-height: 100dvh; overflow: hidden;
    background: #171717; opacity: 0; visibility: hidden; pointer-events: none;
    transition: height .6s cubic-bezier(.3, .7, .2, 1), opacity .6s cubic-bezier(.3, .7, .2, 1), visibility 0s linear .6s;
  }
  .menu.is-open { height: 812px; opacity: 1; visibility: visible; pointer-events: auto; transition: height .6s cubic-bezier(.3, .7, .2, 1), opacity .6s cubic-bezier(.3, .7, .2, 1), visibility 0s; }
  .menu nav { display: grid; justify-items: center; row-gap: 12.5px; padding-top: 154px; }
  .menu a { font-family: var(--serif); font-size: 60px; line-height: 78px; color: #ebeae5; }
  .menu__legal { display: grid; justify-items: center; margin-top: 41px; font-size: 16px; line-height: 30px; color: #747474; }
  .menu nav, .menu__legal { transition: opacity .1s linear; }
  .menu:not(.is-open) nav, .menu:not(.is-open) .menu__legal { opacity: 0; }
  .nav { transition: background-color .3s ease, color .3s ease; }
  .menu-open .nav { background: transparent; color: #ebeae5; }
  .menu-open .nav .theme { color: #ebeae5; }
}

@media (max-width: 809px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__brand { font-size: 20px; }
  .nav__reg { display: inline; font-size: .85em; }
  .nav__links, .nav__contact { display: none; }
  .nav__menu { display: block; }
}
@media (min-width: 810px) and (max-width: 1199px) { .nav__links a { padding: 0 16px; } .nav__links a::after { left: 16px; right: 16px; } .nav__contact { padding-left: 16px; } .nav__contact::after { left: 16px; } }

/* ---------- titles ---------- */

.title { font-family: var(--serif); font-weight: 400; font-size: var(--title); line-height: 1.11; letter-spacing: 0; }
.title__mask { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.title__inner { display: inline-block; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.js .title:not(.in) .title__inner { transform: translateY(105%); }

.reveal { transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.js .reveal:not(.in) { opacity: 0; transform: translateY(24px); }

@media (prefers-reduced-motion: reduce) {
  .title__inner, .reveal { transition: none; }
  .js .title:not(.in) .title__inner, .js .reveal:not(.in) { transform: none; opacity: 1; }
}

/* ---------- page structure ---------- */

main { padding: 0 var(--m); }
.section { padding-top: var(--section); }
.section--page { padding-top: 140px; }
.section--bleed { margin: 0 calc(var(--m) * -1); padding-left: var(--m); padding-right: var(--m); }
@media (max-width: 809px) { .section--page { padding-top: 60px; } }

.headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.headrow__right { padding-bottom: 0; }
.headrow__right p { font-size: 16px; }

.subrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 24px; }
.subrow p { max-width: 564px; }

.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
.span2 { grid-column: span 2; }
@media (max-width: 809px) { .cols { grid-template-columns: 1fr; row-gap: 24px; } .span2 { grid-column: auto; } }

.rows > * { border-top: 1px solid var(--line); }

/* boxed button with text roll on hover */
.boxbtn { display: inline-block; border: 1px solid var(--line); padding: 9px 12px; font-size: 16px; line-height: 24px; white-space: nowrap; }
.boxbtn__in { display: grid; overflow: hidden; height: 24px; }
.boxbtn__in span { transition: transform .35s ease; }
.boxbtn:hover .boxbtn__in span { transform: translateY(-100%); }

.alink { display: inline-flex; align-items: center; gap: 16px; font-size: 16px; }
.alink .arrow { width: 16px; height: 16px; transition: transform .25s ease; }
.alink:hover .arrow { transform: translate(2px, -2px); }
.alink span { position: relative; }
.alink span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.alink:hover span::after { transform: scaleX(1); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tags li { background: var(--surface); color: var(--muted); font-size: 14px; line-height: 1.4; padding: 4px 8px; }

/* ---------- hero ---------- */

.hero { padding-top: 100px; text-align: center; display: grid; justify-items: center; }
.hero__name { font-family: var(--serif); font-weight: 400; font-size: var(--title); line-height: 1.11; }
.js .hero__name:not(.in) .title__inner { transform: translateY(105%); }
.hero__photo { width: 213px; margin-top: 80px; }
.hero__photo img { width: 213px; height: 282px; object-fit: cover; }
.hero__role { margin-top: 24px; }
.hero__intro { max-width: 572px; margin-top: 10px; line-height: 1.4; }
.js .hero__photo { animation: heroIn 1.1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes heroIn { from { opacity: 0; transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) { .js .hero__photo { animation: none; } }
@media (max-width: 809px) {
  .hero { padding-top: 160px; }
  .hero__photo { margin-top: 24px; width: 206px; }
  .hero__photo img { width: 206px; height: 273px; }
  .hero__intro { margin-top: 24px; font-size: 16px; }
}

/* ---------- work rows ---------- */

.section > .rows, .section > .headrow + .rows { margin-top: 48px; }
.wrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); padding: 24px 0 47px; }
.wrow__text { max-width: 448px; }
.wrow__text .muted { margin-top: 24px; }
.wrow__text .alink { margin-top: 48px; }
.wrow__img { display: block; overflow: hidden; }
.wrow__img img, .wrow__img video { width: 100%; height: auto; aspect-ratio: 684 / 457; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.wrow:hover .wrow__img img, .wrow:hover .wrow__img video { transform: scale(1.03); }
@media (max-width: 809px) {
  .wrow { grid-template-columns: 1fr; padding: 24px 0 32px; }
  .wrow__text .muted { margin-top: 16px; }
  .wrow__text .alink { margin-top: 16px; }
  .wrow__img { margin-top: 24px; }
}

/* ---------- clients ---------- */

.clients { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--gap); align-items: center; border-top: 1px solid var(--line); padding: 24px 0; }
@media (max-width: 809px) { .clients { grid-template-columns: 1fr; row-gap: 24px; } }

/* ---------- marquees ---------- */

.marquee { overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee--slow .marquee__track { animation-duration: 60s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-33.333%); } }
.marquee--logos { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee--logos .marquee__track { animation-duration: 30s; }
.marquee--logos.is-quarter .marquee__track { animation-name: marquee4; }
@keyframes marquee4 { to { transform: translateX(-25%); } }
.marquee--logos img { height: 24px; width: auto; margin-right: 64px; opacity: .9; }
:root[data-theme="dark"] .marquee--logos img { filter: invert(1); }
.marquee--photos { margin: 48px calc(var(--m) * -1) 0; }
.marquee--photos figure { margin-right: var(--gap); flex: none; }
.marquee--photos img { height: 456px; width: auto; max-width: none; object-fit: cover; }
@media (max-width: 809px) { .marquee--photos img { height: 250px; } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- services ---------- */

.srow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); padding: 24px 0 48px; }
.srow__body { grid-column: span 2; }
.srow__body .muted { margin-top: 24px; max-width: 701px; }
@media (max-width: 809px) { .srow { grid-template-columns: 1fr; row-gap: 8px; } .srow__body { grid-column: auto; } }

/* ---------- tables (awards, career, academic, experience) ---------- */

.table .trow { display: grid; column-gap: 0; padding: 24px 0 23px; }
.table--awards .trow { grid-template-columns: 300px minmax(0, 1fr) 300px; }
.table--career .trow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.table--career .trow p:last-child { grid-column: span 2; }
.table--edu .trow { grid-template-columns: 224px minmax(0, 1fr) 300px; }
.table--exp .trow { grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1fr); }
.table--career .trow { column-gap: var(--gap); }
.h5 { margin-top: 160px; margin-bottom: 48px; }
@media (max-width: 1199px) { .table--awards .trow, .table--edu .trow, .table--exp .trow { grid-template-columns: 150px minmax(0, 1fr) minmax(0, .8fr); column-gap: 16px; } }
@media (max-width: 809px) {
  .table .trow, .table--awards .trow, .table--edu .trow, .table--exp .trow, .table--career .trow { grid-template-columns: 1fr; row-gap: 4px; }
  .table--career .trow p:last-child { grid-column: auto; }
  .h5 { margin-top: 96px; margin-bottom: 24px; }
}

/* ---------- speaking topics ---------- */

.topics { margin-top: 80px; align-items: start; }
.topics ul { border-bottom: 1px solid var(--line); }
.topics li { padding: 24px 0 23px; }
.section > .cols.reveal ul.rows.span2 { border-bottom: 1px solid var(--line); }
.section > .cols.reveal ul.rows.span2 li { padding: 24px 0 23px; }
@media (max-width: 809px) { .topics ul + ul { border-top: 0; } .topics ul:first-of-type { border-bottom: 0; } }

/* ---------- testimonials ---------- */

.section > .cols { margin-top: 48px; }
.quote { padding: 36px 0; }
.quotes__label { padding-top: 24px; }
.quote blockquote { font-size: 16px; line-height: 1.6; }
.quote figcaption { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.quote figcaption > span { display: grid; gap: 4px; }
.avatar { width: 56px; height: 56px; border-radius: 100px; object-fit: cover; }

/* ---------- notes ---------- */

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 48px; margin-top: 24px; }
.card { border-top: 1px solid var(--line); padding-top: 24px; }
.card__img { display: block; overflow: hidden; }
.card__img img { width: 100%; aspect-ratio: 448 / 236; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.card:hover .card__img img { transform: scale(1.03); }
.card .h6 { margin-top: 24px; }
.card__go { display: inline-block; margin-top: 16px; }
.card__go .arrow { width: 16px; height: 16px; display: block; transition: transform .25s ease; }
.card:hover .card__go .arrow { transform: translate(2px, -2px); }
@media (max-width: 809px) { .cards { grid-template-columns: 1fr; } }

/* ---------- forms ---------- */

.sub__blurb { max-width: 522px; margin-top: 24px; }
.form { display: grid; }
.sub { width: calc((100% - var(--gap)) * 2 / 3 + var(--gap) / 3); margin-top: 24px; border-top: 1px solid var(--line); }
.form input, .form textarea {
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 24px 12px; font-size: 18px; line-height: 1.33; outline: none; resize: vertical;
}
.form input::placeholder, .form textarea::placeholder { color: var(--text); opacity: 1; }
.contact__form input::placeholder, .contact__form textarea::placeholder { color: var(--muted); }
.form input:focus, .form textarea:focus { border-bottom-color: var(--text); }
.submit { margin-top: 24px; height: 44px; border: 0; background: var(--btn); color: var(--bg); font-family: var(--sans); font-weight: 600; font-size: 14px; cursor: pointer; transition: opacity .2s; }
.submit:hover { opacity: .85; }
@media (max-width: 809px) { .sub { width: 100%; } }

/* ---------- footer ---------- */

.footer { padding: var(--section) var(--m) 0; text-align: center; }
.footer__line { color: var(--muted); font-size: 18px; letter-spacing: .02em; }
.footer__hello { display: inline-block; font-family: var(--serif); font-size: var(--title); line-height: 1.11; margin-top: 24px; }
.footer__links { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-top: 40px; }
.footer__bar { display: flex; justify-content: space-between; gap: 16px; margin-top: 135px; padding: 24px 0 24px; border-top: 1px solid var(--line); }
@media (max-width: 809px) { .footer__links { gap: 24px; } .footer__bar { flex-direction: column; text-align: left; } }

/* ---------- case study ---------- */

.cs__head { padding-top: 140px; }
.cs__meta { display: grid; grid-template-columns: 376px minmax(0, 1fr) auto; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.cs__meta > div { display: grid; gap: 0; }
.cs__year { text-align: right; }
.cs__intro { margin: 72px 0 0 376px; }
.cs__intro .tags { margin-top: 48px; }
.cs__cover { margin-top: 80px; }
.cs__cover img, .cs__cover video { width: 100%; height: auto; }
.cs-sec { padding-top: 80px; }
.cs-sec__text { display: grid; grid-template-columns: 376px minmax(0, 1fr); margin-bottom: 80px; }
.cs-sec__text h2 { font-size: 16px; font-weight: 400; padding-left: 47px; }
.cs-sec__text > div { max-width: 967px; }
.cs-sec__text p + p { margin-top: 1.6em; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.g--full { grid-column: 1 / -1; }
.g img, .g video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1199px) { .cs__meta { grid-template-columns: 1fr 1fr auto; } .cs__intro { margin-left: 0; } .cs-sec__text { grid-template-columns: 240px minmax(0, 1fr); } .cs-sec__text h2 { padding-left: 0; } }
@media (max-width: 809px) {
  .cs__head { padding-top: 60px; }
  .cs__meta { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .cs__year { text-align: left; }
  .cs__intro { margin-top: 32px; }
  .cs-sec { padding-top: 56px; }
  .cs-sec__text { grid-template-columns: 1fr; row-gap: 12px; margin-bottom: 32px; }
  .gallery { grid-template-columns: 1fr; gap: 16px; }
  .g--half { grid-column: auto; }
}

/* ---------- about ---------- */

.about__tags { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.about__tags p:last-child { text-align: right; }
.about__photo { margin-top: 72px; width: 213px; }
.about__photo img { width: 213px; height: 282px; object-fit: cover; }
.about__text { margin-top: 48px; display: grid; gap: 30px; }
.music {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 16px;
  margin-top: 48px; padding: 0 19px; height: 90px; border-radius: 20px;
  background: linear-gradient(90deg, #121212 0%, #191514 70%, #2a2420 100%); color: #fff;
}
.music__art { width: 40px; height: 40px; border-radius: 20px; object-fit: cover; outline: 1px solid rgba(255,255,255,.25); outline-offset: 3px; }
.music__meta { display: grid; line-height: 1.6; margin-left: 4px; }
.music__song { font-size: 16px; }
.music__sub { font-size: 16px; color: #7e7a77; display: flex; gap: 12px; }
.music__wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 24px; }
.music__wave i { width: 2px; height: var(--h); background: #3fbf6e; border-radius: 2px; animation: wave 1.2s ease-in-out var(--d) infinite alternate; }
@keyframes wave { to { transform: scaleY(.35); } }
@media (prefers-reduced-motion: reduce) { .music__wave i { animation: none; } }
.music__play { width: 22px; height: 22px; border: 1.5px solid #fff; border-radius: 50%; display: grid; place-items: center; }
.music__play svg { width: 16px; height: 16px; }
.offduty { max-width: 564px; }
.appear { max-width: 590px; margin: 120px auto 0; color: var(--muted); }
@media (max-width: 809px) {
  .about__tags p:last-child { text-align: left; }
  .about__photo { margin-top: 24px; }
  .music { grid-template-columns: auto 1fr auto; }
  .music__wave { display: none; }
  .appear { margin-top: 64px; }
}

/* ---------- speaking ---------- */

.sp__image { margin-top: 80px; }
.sp__image img { width: 100%; height: auto; }
.section--page > .cols + .sp__image + .cols { margin-top: 80px; }
.sp__links { display: flex; justify-content: center; gap: 80px; margin-top: 64px; flex-wrap: wrap; }

/* ---------- contact ---------- */

.contact { display: grid; grid-template-columns: minmax(0, 1fr) 768px; column-gap: var(--gap); margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.contact__info { display: grid; gap: 32px; align-content: start; }
.contact__info .alink { display: flex; margin-top: 4px; }
.contact__form input, .contact__form textarea { padding: 24px 12px 23px; font-size: 20px; line-height: 24px; }
.contact__form textarea { height: 200px; }
.contact__form .submit { margin-top: 40px; }
@media (max-width: 1199px) { .contact { grid-template-columns: 1fr 1.6fr; } }
@media (max-width: 809px) { .contact { grid-template-columns: 1fr; row-gap: 48px; } }

/* ---------- work rows: fixed image width like the original ---------- */
@media (min-width: 1200px) { .wrow { grid-template-columns: minmax(0, 1fr) 684px; } }

/* ---------- awards hover card ---------- */
.table--awards .trow[data-hover] { cursor: default; }
.acursor { position: fixed; left: 0; top: 0; z-index: 900; width: 266px; height: 188px; background: #fff; pointer-events: none; opacity: 0; transform: translate3d(-9999px, -9999px, 0); transition: opacity .2s ease; will-change: transform; }
.acursor.on { opacity: 1; }
.acursor img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none), (pointer: coarse) { .acursor { display: none; } }

/* ---------- loader (home page, first visit) ---------- */
.loader { display: none; }
html.is-loading { overflow: hidden; }
.is-loading .loader { display: block; position: fixed; inset: 0; z-index: 1000; overflow: hidden; background-color: var(--bg); transition: background-color .8s linear; }
.loader__bg { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: #09090b; transition: height .8s linear; }
.loader__name { position: absolute; z-index: 3; width: 148px; height: 130px; margin: 0; transition: opacity .8s linear; }
.loader__name span, .loader__name em { position: absolute; left: 0; white-space: pre; letter-spacing: -0.05em; line-height: 1.2; }
.loader__name span { font-family: "Barlow Condensed", var(--sans); font-weight: 500; font-size: 49px; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.loader__name span:nth-child(1) { top: 0; }
.loader__name span:nth-child(2) { top: 39px; }
.loader__name em { top: 71px; font-family: var(--serif); font-style: italic; font-size: 46px; color: #fff; }
.loader__name--center { left: calc(50% - 74px); top: calc(50% - 65px); }
.loader__name--corner { left: 87px; bottom: 98px; opacity: 0; }
.loader__frame { visibility: hidden; position: absolute; z-index: 3; left: 50%; width: 218px; margin-left: -109px; bottom: calc(50% - 141px); height: 1px; overflow: hidden; opacity: 0; transition: height .8s linear, opacity .8s linear; }
.loader__back { position: absolute; max-width: none; left: 27px; top: -60px; width: 241px; height: 312px; object-fit: cover; transition: left .8s linear, top .8s linear, width .8s linear, height .8s linear; }
.loader__pwrap { position: absolute; inset: 0; }
.loader__face { position: absolute; max-width: none; left: 50%; top: 0; width: 360px; height: 350px; margin-left: -180px; object-fit: contain; opacity: 0; transform: translateY(300px); }
/* step 2: name moves to the corner, the frame gets ready */
.loader.s2 .loader__name { transition-timing-function: cubic-bezier(.12, .23, .5, 1); }
.loader.s2 .loader__name--center { opacity: 0; }
.loader.s2 .loader__name--corner { opacity: 1; }
.loader.s2 .loader__back { left: 68px; top: -550px; width: 380px; height: 492px; transition-timing-function: cubic-bezier(.12, .23, .5, 1); }
/* step 3: the frame opens upwards, the first image slides in */
.loader.s3 .loader__name { transition-timing-function: linear; }
.loader.s3 .loader__frame { visibility: visible; height: 282px; opacity: 1; }
.loader.s3 .loader__back { left: -11.5px; top: -15px; width: 241px; height: 312px; transition-timing-function: linear; }
/* step 4: the portrait pops up over it */
.loader.s4 .loader__frame { bottom: auto; top: calc(50% - 141px); }
.loader.s4 .loader__face { opacity: 1; transform: none; transition: transform .45s cubic-bezier(.3, 1.35, .6, 1); }
/* step 5: the frame closes to a line */
.loader.s5 .loader__frame { height: 4px; }
.loader.s5 .loader__back { display: none; }
.loader.s5 .loader__face { opacity: 0; transition: opacity .8s linear; }
/* step 6: the curtain lifts */
.loader.s6 { background-color: transparent; }
.loader.s6 .loader__bg { height: 0; }
.loader.s6 .loader__name--corner { opacity: 0; }
.loader.s6 .loader__frame { display: none; }
@media (max-width: 809px) { .loader__name--corner { left: calc(50% - 74px); } }
@media (min-width: 810px) and (max-width: 1199px) {
  .wrow { grid-template-columns: minmax(0, 1fr) 385px; align-items: center; padding: 24px 0 40px; }
  .wrow__text { max-width: 316px; }
}

/* ---------- spacing matched to the Framer site, measured at 1440px ---------- */
.page-contact .footer { padding-top: 0; }
.page-contact .footer__main { display: none; }
.g, .cs__cover { overflow: hidden; }
.g img, .g video, .cs__cover img, .cs__cover video { transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.js .g.reveal:not(.in), .js .cs__cover.reveal:not(.in) { transform: none; }
.js .g:not(.in) img, .js .g:not(.in) video, .js .cs__cover:not(.in) img, .js .cs__cover:not(.in) video { transform: scale(1.15); }
.g--full video { aspect-ratio: 1392 / 900; height: auto; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .js .g:not(.in) img, .js .g:not(.in) video, .js .cs__cover:not(.in) img, .js .cs__cover:not(.in) video { transform: none; } }
@media (min-width: 1200px) {
  /* home */
  .page-home section[aria-labelledby="work-h"] { padding-top: 191px; }
  .page-home section[aria-labelledby="svc-h"] { padding-top: 251px; }
  .page-home section[aria-labelledby="aw-h"] { padding-top: 223px; }
  .page-home section[aria-labelledby="sp-h"] { padding-top: 272px; }
  .page-home .topics { margin-top: 136px; }
  .page-home section[aria-labelledby="t-h"] { padding-top: 272px; }
  .page-home .quotes { margin-left: -7px; }
  .page-home section[aria-labelledby="n-h"] { padding-top: 245px; }
  .page-home section[aria-labelledby="n-h"] .subrow { margin-top: -15px; }
  .page-home section[aria-labelledby="n-h"] .cards { margin-top: 48px; }
  .page-home section[aria-labelledby="sub-h"] { padding-top: 311px; }
  .page-home .sub__blurb { margin-top: 11px; }
  .page-home .sub { margin-top: 74px; }
  /* about */
  .about__photo { margin-top: 24px; }
  .about__text { gap: 40px; }
  .page-about section[aria-labelledby="c-h"] { padding-top: 272px; }
  .page-about section[aria-labelledby="e-h"] { padding-top: 273px; }
  .page-about .h5 { margin-top: 273px; }
  .table--exp .trow { grid-template-columns: 276px minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  .page-about section[aria-label="Off the clock"] { padding-top: 249px; }
  .appear { margin-top: 139px; }
  /* speaking */
  .section > .cols.sp__intro { margin-top: 53px; }
  .sp__intro p { max-width: 889px; }
  .sp__image { margin-top: 174px; }
  .section--page > .cols + .sp__image + .cols { margin-top: 48px; }
  .page-speaking section[aria-label="Past events"] { padding-top: 110px; }
  /* space before the footer, per page */
  .page-home main { padding-bottom: 59px; }
  .page-about main { padding-bottom: 93px; }
  .page-speaking main { padding-bottom: 72px; }
  .page-work main { padding-bottom: 45px; }
  .page-case main { padding-bottom: 48px; }
}

/* ---------- playground ---------- */
.section > .cols.pg__intro { margin-top: 53px; }
.pg__empty { margin-top: 120px; text-align: center; }
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--gap); align-items: start; margin-top: 120px; }
.js .shots.is-masonry { grid-auto-rows: 4px; row-gap: 0; }
.js .shots.is-masonry .shot { padding-bottom: var(--gap); }
.shot--wide { grid-column: span 2; }
.shot__open { display: block; width: 100%; padding: 0; border: 0; background: var(--surface); cursor: zoom-in; overflow: hidden; }
.shot__open img, .shot__open video { width: 100%; height: auto; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.shot__open:hover img, .shot__open:hover video { transform: scale(1.03); }
.shot__open:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.shot__cap { margin-top: 16px; display: grid; gap: 4px; }
.shot__cap .tags { margin-top: 8px; }
@media (max-width: 1199px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 80px; } }
@media (max-width: 809px) { .shots { grid-template-columns: 1fr; margin-top: 48px; } .shot--wide { grid-column: auto; } .section > .cols.pg__intro { margin-top: 32px; } }

.lightbox { position: fixed; inset: 0; z-index: 950; background: #12100e; color: #f4f2ef; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 16px var(--m) 24px; }
.lightbox[hidden] { display: none; }
.lightbox button { background: none; border: 0; color: inherit; font: inherit; font-size: 16px; cursor: pointer; padding: 8px 0; }
.lightbox button:hover { opacity: .7; }
.lightbox__close { justify-self: end; }
.lightbox__stage { display: grid; place-items: center; min-height: 0; }
.lightbox__stage img, .lightbox__stage video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-top: 16px; }
.lightbox__text { display: grid; gap: 2px; max-width: 700px; }
.lightbox__text .muted { color: #a8a6a3; }
.lightbox__text a { text-decoration: underline; text-underline-offset: 3px; }
.lightbox__nav { display: flex; gap: 24px; }
html.lb-open { overflow: hidden; }
.pg__filters { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 120px; padding-top: 24px; border-top: 1px solid var(--line); }
.pg__filter { position: relative; font-size: 18px; letter-spacing: .02em; color: var(--muted); transition: color .2s; }
.pg__filter sup { font-size: 11px; margin-left: 3px; vertical-align: super; }
.pg__filter::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.pg__filter:hover, .pg__filter[aria-current] { color: var(--text); }
.pg__filter[aria-current]::after { transform: scaleX(1); }
.pg__filters + .shots { margin-top: 48px; }
.shot[hidden] { display: none; }
@media (max-width: 809px) { .pg__filters { margin-top: 48px; gap: 8px 24px; } .pg__filters + .shots { margin-top: 32px; } }

/* ---------- notes: typographic card + article page (matched to the Framer note pages) ---------- */
.card__type { display: grid; place-items: center; aspect-ratio: 448 / 236; background: var(--surface); padding: 24px; text-align: center; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.card__type span { font-family: var(--serif); font-size: 34px; line-height: 1.05; max-width: 14ch; }
.card:hover .card__type { transform: scale(1.03); }
.note__head { padding-top: 182px; }
.note__title { font-size: 32px; line-height: 1.4; font-weight: 400; }
.note__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.note__meta .tags { margin-top: 0; }
.note__meta .tags li { font-size: 16px; line-height: 1.4; padding: 2px 8px; }
.note__meta > span { font-size: 16px; }
.note__cover { margin-top: 75px; overflow: hidden; }
.note__cover img { width: 100%; height: auto; aspect-ratio: 1392 / 567; object-fit: cover; }
.note__quote { margin-top: 99px; padding: 0 24px; font-size: 28px; line-height: 1.4; }
.note__head + .note__quote { margin-top: 72px; }
.note__body { margin-top: 100px; }
.note-sec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
.note-sec + .note-sec, .note__pull + .note-sec, .note__img + .note-sec { margin-top: 80px; }
.note-sec h2 { font-size: 16px; line-height: 1.6; font-weight: 400; padding: 0 24px; }
.note-sec > div { grid-column: span 2; max-width: 920px; }
.note-sec p { font-size: 18px; line-height: 1.6; letter-spacing: .01em; }
.note-sec p + p { margin-top: 40px; }
.note__pull { margin: 104px 0 24px; max-width: 1292px; font-size: 38px; line-height: 1.2; }
.note__img { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); margin: 88px 0 0; }
.note__img img { grid-column: 2 / span 2; width: 100%; max-width: 920px; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.note__pull + .note__img { margin-top: 64px; }
.note__pager { display: flex; justify-content: space-between; align-items: end; margin-top: 306px; }
.note__pg { font-family: var(--serif); font-size: var(--title); line-height: 1.11; transition: opacity .2s; }
.note__pg:hover { opacity: .6; }
.page-note .footer { padding-top: 100px; }
@media (max-width: 1199px) {
  .note__head { padding-top: 120px; }
  .note-sec { grid-template-columns: 220px minmax(0, 1fr); }
  .note-sec h2 { padding: 0 24px 0 0; }
  .note-sec > div { grid-column: auto; }
  .note__img { grid-template-columns: 220px minmax(0, 1fr); }
  .note__img img { grid-column: 2; }
  .note__pull { font-size: 32px; }
  .note__pager { margin-top: 200px; }
}
@media (max-width: 809px) {
  .note__head { padding-top: 48px; }
  .note__title { font-size: 28px; }
  .note__cover { margin-top: 32px; }
  .note__quote { margin-top: 48px; padding: 0; font-size: 22px; }
  .note__body { margin-top: 48px; }
  .note-sec { grid-template-columns: 1fr; row-gap: 12px; }
  .note-sec h2 { padding: 0; color: var(--muted); }
  .note-sec h2:empty { display: none; }
  .note-sec p { font-size: 17px; }
  .note-sec p + p { margin-top: 24px; }
  .note-sec + .note-sec, .note__pull + .note-sec, .note__img + .note-sec { margin-top: 48px; }
  .note__pull { margin: 56px 0 8px; font-size: 26px; }
  .note__img, .note__pull + .note__img { display: block; margin-top: 40px; }
  .note__img img { aspect-ratio: 4 / 3; }
  .note__pager { margin-top: 120px; }
  .card__type span { font-size: 28px; }
}