/* About, Services and Blog pages (app/(site)). Loaded after /home/styles.css, which supplies the brand tokens, root rem
   scaling, header, menu, cursor and text effects (.rise .tilt .tr .spell .roll). The homepage locks scrolling for
   its section controller; these pages scroll normally and components/site/init-motion.js drives the effects from the scroll position. */

html, body { height: auto; overflow: visible; overscroll-behavior: auto; }
.site { --pad: 3.125rem; overflow-x: clip; }
main { display: block; }
img { max-width: 100%; }
.site em { font-style: normal; color: var(--brand); }
.kicker { display: inline-flex; align-items: center; gap: .625rem; margin-bottom: 1.5rem; color: var(--grey-300); font-size: .9375rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.kicker::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand); }
.kicker.tilt, .kicker.rise { display: flex; width: fit-content; }

/* ---------- Header on a scrolling page: solid once scrolled, hides going down ---------- */
.site .header { transition: color .3s, transform .5s cubic-bezier(.16, 1, .3, 1), background-color .3s, padding .3s; }
.site .header.is-scrolled { padding-top: 1.25rem; padding-bottom: 1.25rem; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(24, 24, 27, .06); }
.site .header.is-scrolled.is-light { background: rgba(30, 27, 75, .88); box-shadow: none; }
.site .header.is-scrolled .nav { top: 50%; transform: translate(-50%, -50%); }
.site .header.is-hidden { transform: translateY(-100%); }
.site .header.is-hidden .nav__panel { opacity: 0; visibility: hidden; } /* don't leave the Services dropdown hanging */
.site .header.menu-open { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav a[aria-current], .menu__folder a[aria-current] { color: var(--brand); }
.header.is-light:not(.menu-open) :is(.nav > a, .nav__drop > a)[aria-current] { color: var(--brand-300); }
.custom-cursor__point.-hover-read { width: 6.25rem; height: 6.25rem; }

/* ---------- Page titles: same size and weight as the homepage hero (.main__title in /home/styles.css) ---------- */
.intro__title, .blog-hero__title, .post-hero__title { font-size: 3.4375rem; font-weight: 400; line-height: 4.125rem; letter-spacing: normal; }
@media (max-width: 1440px) { .intro__title, .blog-hero__title, .post-hero__title { font-size: 2.8125rem; line-height: 1.2; } }

/* ---------- Page hero (About, services): title near the top like the homepage hero; content follows ---------- */
.intro { padding: 15.0625rem var(--pad) 6rem; } /* top = homepage hero's --pad-y */
.intro__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.intro__title .rise { display: block; }
.intro__row { display: flex; align-items: center; gap: 1.5rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--grey-100); }
.intro__sub { flex: 1; max-width: 30rem; color: var(--grey-300); font-size: 1.25rem; line-height: 1.5; }
.intro__row .chip { margin-left: auto; padding: .75rem 1.375rem; }

/* numbers panel: grows from inset to full width as it scrolls up (--p 0→1) */
.panel { padding-bottom: 8rem; }
.panel__inner { position: relative; width: calc(100% - 2 * var(--pad) * (1 - var(--p, 0))); height: 85vh; min-height: 34rem; margin: 0 auto; overflow: hidden; border-radius: calc(2.5rem * (1 - var(--p, 0))); color: #fff; }
.panel__title { position: absolute; left: var(--pad); top: 4rem; z-index: 1; font-size: 6rem; font-weight: 500; line-height: 1.02; letter-spacing: -.04em; }
.stats { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); align-content: end; gap: 2.5rem; height: 100%; margin: 0; padding: 0 var(--pad) 4rem; }
.stat { padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .35); }
.stat dt { font-family: var(--alt); font-size: 6rem; font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.stat dt small { font-size: 1.5rem; letter-spacing: 0; }
.stat dd { max-width: 15rem; margin: .875rem 0 0; color: rgba(255, 255, 255, .78); font-size: 1.125rem; line-height: 1.4; }

/* story: words light up with scroll */
.story { padding: 8rem var(--pad) 12rem; }
.story__quote { max-width: 84rem; color: var(--brand-200); font-size: 4.25rem; font-weight: 500; line-height: 1.15; letter-spacing: -.025em; }
.story__quote .w { transition: color .35s; }
.story__quote .w.lit { color: var(--ink); }
.story__answer { display: flex; justify-content: flex-end; margin-top: 6rem; }
.story__answer p { max-width: 36rem; color: var(--grey-300); font-size: 1.5rem; line-height: 1.5; }
.story__answer strong { color: var(--ink); font-weight: 600; }

/* mission cards: the homepage's horizontal cards, scrolled sideways while the stage is pinned */
.edge { position: relative; }
.edge__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }

/* section heading (components/site/blocks.jsx › SectionHead) */
.section-head { max-width: 62rem; margin-bottom: 6rem; }
.section-title, .faq__title, .related__title { font-size: 5.125rem; font-weight: 500; line-height: 1.05; letter-spacing: -.03em; }
.section-lede { max-width: 42rem; margin-top: 2rem; color: var(--grey-300); font-size: 1.25rem; line-height: 1.55; }

/* founders */
.founders { padding: 10rem var(--pad) 6rem; }
.founder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 6rem; padding: 5rem 0; border-top: 1px solid var(--grey-100); }
.founder:nth-of-type(even) .founder__photo { order: 2; }
.founder__photo { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 2.5rem; background: var(--brand-100); }
.founder__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12) translateY(calc((.5 - var(--p, .5)) * 8%)); }
.founder__role { width: fit-content; margin-bottom: 1.25rem; padding: .5rem 1rem; border-radius: 3rem; background: var(--brand-50); color: var(--brand-700); font-size: .9375rem; font-weight: 600; }
.founder__name { display: block; font-size: 4rem; font-weight: 500; line-height: 1.08; letter-spacing: -.03em; --spell-tr: 3rem; --spell-step: .015s; --spell-delay: .15s; }
.founder__bio { margin-top: 1.75rem; color: var(--grey-300); font-size: 1.1875rem; line-height: 1.6; }
.founder__skills { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.founder__skills li { display: flex; gap: .75rem; padding: 1rem 0; border-top: 1px solid var(--grey-100); font-size: 1rem; line-height: 1.4; }
.founder__skills li::before { content: ''; flex: none; width: .5rem; height: .5rem; margin-top: .45rem; border-radius: 50%; background: var(--brand); }

/* values (dark) */
.values { padding: 9rem var(--pad) 8rem; background: var(--dark); color: #fff; }
.values .section-head { margin-bottom: 4rem; }
.values .kicker, .cta .kicker { color: var(--brand-300); }
.values em { color: var(--brand-300); }
.values .section-lede { color: rgba(255, 255, 255, .62); }
.values__list { margin: 0; padding: 0; list-style: none; }
.value { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 26rem; align-items: center; gap: 2rem; padding: 2.75rem 0; border-top: 1px solid rgba(255, 255, 255, .15); }
.value:last-child { border-bottom: 1px solid rgba(255, 255, 255, .15); }
.value__num { font-family: var(--wide); font-size: 1.125rem; color: var(--brand-300); }
.value__name { font-size: 3.75rem; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.value__name.tilt { transition: transform .7s ease calc(.4s + var(--d, 0) * .1s), opacity .7s calc(.4s + var(--d, 0) * .1s), color .3s; }
.value:hover .value__name { color: var(--brand-300); }
.value__text { color: rgba(255, 255, 255, .62); font-size: 1.1875rem; line-height: 1.5; }
.value--line { grid-template-columns: 8rem minmax(0, 1fr); padding: 2.25rem 0; } /* single-line items */
.value--line .value__name { font-size: 2.75rem; }

/* goal statement (homepage statement style) */
.goal { padding: 11rem var(--pad); background: var(--brand-100); text-align: center; }
.goal__text { font-size: 5rem; font-weight: 700; line-height: 1.15; letter-spacing: -.035em; text-transform: uppercase; }
.goal__pill { display: inline-flex; align-items: center; margin: 0 1.25rem; padding: .3125rem; vertical-align: middle; border-radius: 3.7rem; background: #fff; }
.goal__pill img, .goal__pill b { width: 4.375rem; height: 4.375rem; margin-right: -.5rem; border: 2px solid #fff; border-radius: 50%; object-fit: cover; }
.goal__pill b { display: grid; place-items: center; margin-right: 0; background: #fff; }
.goal__pill b img { width: 62%; height: auto; margin: 0; border: 0; border-radius: 0; object-fit: contain; }
.goal__note { max-width: 36rem; margin: 3rem auto 0; color: var(--grey-300); font-size: 1.25rem; line-height: 1.5; }
.audience { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 3rem 0 0; padding: 0; list-style: none; }
.audience.tilt { display: flex; }
.audience li { padding: .875rem 1.5rem; border-radius: 3rem; background: #fff; font-size: 1rem; font-weight: 500; }

/* ---------- Services ---------- */
.offer, .sites, .pricing, .services { padding: 9rem var(--pad); }
/* what we offer: numbered grid */
.offer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 3rem; margin: 0; padding: 0; list-style: none; }
.offer__item { padding: 2.5rem 0 3.5rem; border-top: 1px solid var(--grey-100); }
.offer__num { display: block; margin-bottom: 2rem; color: var(--brand); font-family: var(--wide); font-size: 1rem; }
.offer__item h3 { font-size: 2.125rem; font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
.offer__item p { margin-top: 1rem; color: var(--grey-300); font-size: 1.125rem; line-height: 1.55; }

/* industry demos, inside the pinned horizontal track (.edge) */
.demos { display: flex; gap: 1.5rem; margin-right: 3.75rem; }
.demo { display: flex; flex: none; flex-direction: column; width: 34rem; }
.demo__img { position: relative; aspect-ratio: 770 / 578; overflow: hidden; border-radius: 2rem; background: var(--brand-50); }
.demo__img img { object-fit: cover; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.demo:hover .demo__img img { transform: scale(1.05); }
.demo h3 { margin-top: 1.75rem; font-size: 2.25rem; font-weight: 500; letter-spacing: -.02em; transition: color .3s; }
.demo:hover h3 { color: var(--brand); }
.demo p { max-width: 30rem; margin-top: .75rem; color: var(--grey-300); font-size: 1.0625rem; line-height: 1.5; }
.demo__more, .site-card__more { display: inline-flex; margin-top: 1.25rem; color: var(--brand); font-weight: 600; }

/* portfolio: staggered two columns; hovering scrolls the full-page screenshot */
.sites__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5rem 3rem; }
.site-card:nth-child(even) { margin-top: 10rem; }
.site-card a { display: block; }
.site-card__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2rem; background: var(--brand-50); }
.site-card__img img { object-fit: cover; object-position: 50% 0; transition: object-position 4s ease-in-out; }
.site-card a:hover .site-card__img img { object-position: 50% 100%; }
.site-card__body { padding-top: 1.5rem; }
.site-card__tag { color: var(--grey-300); font-size: .9375rem; }
.site-card h3 { margin-top: .5rem; font-size: 2rem; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; transition: color .3s; }
.site-card a:hover h3 { color: var(--brand); }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.plan__inner { position: relative; height: 100%; padding: 3.5rem; border: 1px solid var(--grey-100); border-radius: 2.5rem; background: #fff; }
.plan--popular .plan__inner { border-color: var(--dark); background: var(--dark); color: #fff; }
.plan__badge { position: absolute; right: 3.5rem; top: 3.5rem; padding: .375rem .875rem; border-radius: 3rem; background: var(--brand); color: #fff; font-size: .875rem; font-weight: 600; }
.plan h3 { font-size: 3rem; font-weight: 500; letter-spacing: -.03em; }
.plan p { max-width: 30rem; margin-top: 1.25rem; color: var(--grey-300); font-size: 1.1875rem; line-height: 1.55; }
.plan--popular p { color: rgba(255, 255, 255, .7); }
.plan ul { margin: 2.5rem 0; padding: 0; list-style: none; }
.plan li { display: flex; align-items: center; gap: .75rem; padding: 1rem 0; border-top: 1px solid var(--grey-100); font-size: 1.0625rem; }
.plan--popular li { border-color: rgba(255, 255, 255, .15); }
.plan li::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand); }
.plan--popular li::before { background: var(--brand-300); }

/* social › platforms marquee (two rows, opposite directions) */
.platforms { padding: 2rem 0 6rem; overflow: hidden; }
.platforms__row { display: flex; font-size: 5.5rem; font-weight: 700; line-height: 1.3; letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap; }
.platforms__row span { flex: none; animation: marquee 60s linear infinite; }
.platforms__row--outline { color: transparent; -webkit-text-stroke: 1.5px var(--brand); }
.platforms__row--outline span { animation-direction: reverse; }

/* social › motion graphics studio: intro + three auto-scrolling columns of demo tiles (dark) */
.reels { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 5rem; padding: 8rem var(--pad); overflow: hidden; background: var(--dark); color: #fff; }
.reels em { color: var(--brand-300); }
.reels .kicker { color: var(--brand-300); }
.reels .section-lede { color: rgba(255, 255, 255, .7); }
.reels__caps { display: flex; flex-wrap: wrap; gap: .625rem; margin: 2.25rem 0 0; padding: 0; list-style: none; }
.reels__caps.tilt { display: flex; }
.reels__caps li { padding: .625rem 1.125rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 3rem; font-size: .9375rem; }
.reels__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; margin-top: 2.75rem; }
.reels__actions.tilt { display: flex; }
.reels__hint { color: rgba(255, 255, 255, .5); font-size: .9375rem; }
.reels__wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; height: 46rem; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.reels__col { overflow: hidden; }
/* two copies + a trailing gap, so -50% lands exactly on the start of the second copy */
.reels__track { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 1rem; animation: reelsUp var(--dur, 60s) linear infinite; }
.reels__col--down .reels__track { animation-name: reelsDown; }
.reels__wall:hover .reels__track, .reels__wall:focus-within .reels__track { animation-play-state: paused; }
.reel-tile { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; overflow: hidden; border: 0; border-radius: 1.25rem; background: #000; color: #fff; cursor: pointer; }
.reel-tile:nth-child(even) { aspect-ratio: 1; }
.reel-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.34); transition: transform .7s cubic-bezier(.16, 1, .3, 1); } /* hqdefault thumbnails are letterboxed */
.reel-tile:hover img { transform: scale(1.44); }
.reel-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(30, 27, 75, .85)); }
.reel-tile__play { position: absolute; left: 50%; top: 50%; z-index: 1; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgba(255, 255, 255, .92); transform: translate(-50%, -50%) scale(.9); transition: transform .3s; }
.reel-tile__play::before { content: ''; position: absolute; left: 54%; top: 50%; border-left: .9rem solid var(--dark); border-top: .55rem solid transparent; border-bottom: .55rem solid transparent; transform: translate(-50%, -50%); }
.reel-tile:hover .reel-tile__play { transform: translate(-50%, -50%) scale(1.05); }
.reel-tile__title { position: absolute; left: 1rem; right: 1rem; bottom: .875rem; z-index: 1; font-size: 1rem; font-weight: 600; text-align: left; }
@keyframes reelsUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes reelsDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }

.video-modal { width: min(64rem, calc(100vw - 2.5rem)); max-width: none; padding: 2rem; border: 0; border-radius: 2rem; background: #fff; color: var(--ink); }
.video-modal::backdrop { background: rgba(30, 27, 75, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.video-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.video-modal .kicker { margin-bottom: .5rem; }
.video-modal h3 { font-size: 2rem; font-weight: 500; letter-spacing: -.02em; }
.video-modal__close { position: relative; flex: none; width: 2.75rem; height: 2.75rem; border: 1px solid var(--grey-150); border-radius: 50%; background: #fff; cursor: pointer; }
.video-modal__close::before, .video-modal__close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 1rem; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%) rotate(45deg); }
.video-modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.video-modal__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1.25rem; background: #000; }
.video-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-modal .underlink { display: inline-block; margin-top: 1.25rem; color: var(--brand); font-weight: 600; }

/* social › offering rows (image + copy, alternating sides) */
.service-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 6rem; padding: 5rem 0; border-top: 1px solid var(--grey-100); }
.service-row:nth-of-type(even) .service-row__img { order: 2; }
.service-row__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2.5rem; background: var(--brand-100); }
.service-row__img img { object-fit: cover; transform: scale(1.12) translateY(calc((.5 - var(--p, .5)) * 8%)); }
.service-row__title { font-size: 3.5rem; font-weight: 500; line-height: 1.08; letter-spacing: -.03em; }
.service-row__text { margin-top: 1.5rem; color: var(--grey-300); font-size: 1.1875rem; line-height: 1.6; }
.service-row .founder__skills { grid-template-columns: 1fr; }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 6rem; padding: 10rem var(--pad); interpolate-size: allow-keywords; }
.faq__head { position: sticky; top: 8rem; align-self: start; }
.faq__title .tilt { display: block; }
.faq details { border-top: 1px solid var(--grey-100); }
.faq details:last-child { border-bottom: 1px solid var(--grey-100); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem 0; font-size: 1.625rem; font-weight: 500; line-height: 1.3; list-style: none; cursor: pointer; transition: color .3s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }
.faq summary i { position: relative; flex: none; width: 2.75rem; height: 2.75rem; border: 1px solid var(--grey-150); border-radius: 50%; color: var(--ink); transition: background .3s, border-color .3s, color .3s, transform .4s; }
.faq summary i::before, .faq summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: .875rem; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary i { border-color: var(--brand); background: var(--brand); color: #fff; transform: rotate(45deg); }
.faq details p { max-width: 46rem; padding: 0 4rem 2rem 0; color: var(--grey-300); font-size: 1.1875rem; line-height: 1.6; }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .5s ease, content-visibility .5s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* ---------- Closing CTA + footer (all pages) ---------- */
.cta { position: relative; overflow: hidden; padding-bottom: 9rem; background: var(--dark); color: #fff; }
.cta__marquee { display: flex; margin-bottom: 8rem; padding: 3rem 0; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.cta__marquee div { flex: none; color: transparent; font-family: var(--wide); font-size: 5.5rem; line-height: 1.1; white-space: nowrap; -webkit-text-stroke: 1px rgba(255, 255, 255, .35); animation: marquee 50s linear infinite; }
.cta__body { padding: 0 var(--pad); text-align: center; }
.cta .kicker { margin-left: auto; margin-right: auto; }
.cta__title { display: block; max-width: 72rem; margin: 0 auto; font-size: 6rem; font-weight: 500; line-height: 1.05; letter-spacing: -.035em; --spell-tr: 4rem; --spell-step: .012s; --spell-delay: .2s; }
.cta__text { max-width: 36rem; margin: 2.5rem auto 0; color: rgba(255, 255, 255, .72); font-size: 1.25rem; line-height: 1.5; }
.cta__actions { display: flex; align-items: center; justify-content: center; gap: 3rem; margin-top: 3.5rem; }
.cta__btn { display: inline-flex; align-items: center; min-height: 4.5rem; padding: 0 2.5rem; border-radius: 6rem; background: var(--brand); color: #fff; font-size: 1.125rem; font-weight: 500; transition: background-color .3s; }
.cta__btn:hover { background: var(--brand-600); }
.cta__note { margin-top: 2.5rem; color: rgba(255, 255, 255, .45); font-size: .9375rem; }

.site-footer { padding: 6rem var(--pad) 2.5rem; }
.site-footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1.6fr; gap: 3rem; padding-bottom: 5rem; }
.site-footer__brand img { width: auto; height: 4.5rem; margin-bottom: 1.5rem; }
.site-footer__brand p { max-width: 20rem; color: var(--grey-300); font-size: 1.0625rem; line-height: 1.5; }
.site-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; font-size: 1.0625rem; }
.site-footer__col a { transition: color .3s; }
.site-footer__col a:hover { color: var(--brand); }
.site-footer address { max-width: 17rem; margin-top: .5rem; color: var(--grey-300); font-style: normal; line-height: 1.5; }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 2rem; padding: 2rem 10rem 0 0; border-top: 1px solid var(--grey-100); color: var(--grey-300); font-size: .9375rem; }

/* ---------- Blog › index ---------- */
.blog-hero { padding: 15.0625rem var(--pad) 5rem; }
.blog-hero__title .rise { display: block; }
.blog-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 4rem; margin-top: 3.5rem; }
.blog-hero__sub { max-width: 34rem; color: var(--grey-300); font-size: 1.25rem; line-height: 1.5; }
.search { display: flex; align-items: center; gap: .75rem; width: 26rem; padding-bottom: .875rem; border-bottom: 1px solid var(--grey-150); transition: border-color .3s; }
.search:focus-within { border-color: var(--brand); }
.search svg { flex: none; width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.search input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: none; font: inherit; font-size: max(1.125rem, 16px); }
.filters { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 3rem; }
.filters button { padding: .875rem 1.5rem; border: 1px solid var(--grey-100); border-radius: 3.75rem; background: #fff; font-size: .9375rem; font-weight: 500; cursor: pointer; transition: border-color .3s, background-color .3s, color .3s; }
.filters button:hover { border-color: var(--grey-200); }
.filters button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: #fff; }

.posts { padding: 0 var(--pad) 9rem; }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4.5rem 2.5rem; }
.post-card[hidden] { display: none; }
.post-card__link { display: flex; flex-direction: column; height: 100%; }
.post-card__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1.5rem; background: var(--brand-50); }
.post-card__img img { object-fit: cover; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.post-card__link:hover .post-card__img img { transform: scale(1.05); }
.post-card__body { display: flex; flex: 1; flex-direction: column; padding-top: 1.75rem; }
.post-card__meta { color: var(--grey-300); font-size: .9375rem; }
.post-card__title { margin-top: .875rem; font-size: 1.75rem; font-weight: 500; line-height: 1.25; letter-spacing: -.015em; transition: color .3s; }
.post-card__link:hover .post-card__title { color: var(--brand); }
.post-card__excerpt { display: -webkit-box; margin-top: 1rem; overflow: hidden; color: var(--grey-300); font-size: 1.0625rem; line-height: 1.55; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.post-card__more { display: inline-flex; margin-top: auto; padding-top: 1.5rem; color: var(--brand); font-weight: 600; }
/* whole card hover rolls its "Read article" / "View demo" / "Visit site" label */
:is(.post-card__link, .demo, .site-card a):hover .roll__tr > span:first-child { transform: translateY(-150%) rotate(-10deg); }
:is(.post-card__link, .demo, .site-card a):hover .roll__tr > span:last-child { transform: translateY(-100%); }
.post-card--feature { margin-bottom: 6rem; }
.post-card--feature .post-card__link { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 4rem; }
.post-card--feature .post-card__img { border-radius: 2.5rem; }
.post-card--feature .post-card__title { font-size: 3.5rem; line-height: 1.08; letter-spacing: -.03em; }
.post-card--feature .post-card__excerpt { font-size: 1.25rem; -webkit-line-clamp: 4; }
.post-card--feature .post-card__more { margin-top: 0; padding-top: 2rem; }
.posts__empty { padding: 4rem 0; color: var(--grey-300); font-size: 1.25rem; text-align: center; }

/* ---------- Blog › post ---------- */
.progress { position: fixed; left: 0; top: 0; z-index: 1001; width: 100%; height: 3px; background: var(--brand); transform: scaleX(0); transform-origin: 0 50%; }
.post-hero { max-width: calc(60rem + 2 * var(--pad)); margin: 0 auto; padding: 12rem var(--pad) 4rem; }
.back { display: inline-flex; align-items: center; color: var(--grey-300); font-size: 1rem; font-weight: 500; transition: color .3s; }
.back:hover { color: var(--brand); }
.post-hero__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.post-hero__tags li { padding: .4375rem .875rem; border-radius: 3rem; background: var(--brand-50); color: var(--brand-700); font-size: .875rem; font-weight: 600; }
.post-hero__title { display: block; margin-top: 1.75rem; }
.post-hero .rise { display: flex; width: fit-content; }
.post-hero .post-hero__title.rise { display: block; width: auto; }
.post-hero__meta { display: flex; align-items: center; gap: 2.5rem; margin-top: 2.75rem; color: var(--grey-300); font-size: .9375rem; line-height: 1.45; }
.post-hero__meta img { width: 3rem; height: 3rem; margin-right: -1.5rem; padding: .55rem; border-radius: 50%; background: var(--brand-50); object-fit: contain; }
.post-hero__meta b { color: var(--ink); font-weight: 600; }
/* cover: grows from the text column to full width as it scrolls up */
.post-cover { --base: min(100% - 2 * var(--pad), 60rem); padding-bottom: 6rem; }
.post-cover__inner { position: relative; width: calc(var(--base) + (100% - 2 * var(--pad) - var(--base)) * var(--p, 0)); max-height: 85vh; aspect-ratio: 16 / 9; margin: 0 auto; overflow: hidden; border-radius: 2.5rem; background: var(--brand-50); }
.post-cover__inner img { object-fit: cover; }

.prose { max-width: 46rem; margin: 0 auto; padding: 0 var(--pad) 8rem; box-sizing: content-box; color: #3f3f46; font-size: 1.1875rem; line-height: 1.75; }
.prose > * + * { margin-top: 1.5rem; }
.prose h2 { margin-top: 3.75rem; color: var(--ink); font-size: 2.25rem; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.prose h2 + * { margin-top: 1.25rem; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color .3s; }
.prose a:hover { color: var(--brand-700); }
.prose ul, .prose ol { margin-bottom: 0; padding-left: 1.5rem; }
.prose li + li { margin-top: .625rem; }
.prose li::marker { color: var(--brand); font-weight: 600; }
.prose code { padding: .15em .4em; border-radius: .4em; background: var(--brand-50); color: var(--brand-700); font-size: .875em; }
.prose pre { overflow-x: auto; padding: 1.5rem; border-radius: 1.25rem; background: var(--dark); color: var(--brand-100); font-size: .9375rem; line-height: 1.6; }
.prose pre code { padding: 0; background: none; color: inherit; }
.prose img { height: auto; border-radius: 1.5rem; }

.related { padding: 7rem var(--pad) 9rem; border-top: 1px solid var(--grey-100); }
.related__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 3.5rem; }
.related__title { font-size: 4rem; }

/* ---------- Tablet ---------- */
@media (max-width: 992px) {
  .intro, .blog-hero { padding-top: 12.5rem; } /* homepage hero's tablet --pad-y */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
  .offer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-row { gap: 3rem; }
  .reels { grid-template-columns: 1fr; gap: 3rem; }
  .plan__inner { padding: 2.5rem; }
  .plan__badge { right: 2.5rem; top: 2.5rem; }
  .story__quote { font-size: 3.5rem; }
  .founder { gap: 3rem; }
  .founder__skills { grid-template-columns: 1fr; }
  .value { grid-template-columns: 5rem minmax(0, 1fr); }
  .value__text { grid-column: 2; }
  .goal__text { font-size: 4rem; }
  .faq { grid-template-columns: 1fr; gap: 3rem; }
  .faq__head { position: static; }
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-card--feature .post-card__link { grid-template-columns: 1fr; gap: 0; }
  .blog-hero__row { flex-direction: column; align-items: flex-start; gap: 2.5rem; }
  .search { width: 100%; max-width: 32rem; }
}

/* ---------- Phone ---------- */
@media (max-width: 576px) {
  .site { --pad: 1.25rem; }
  .site .header.is-scrolled { padding-top: .875rem; padding-bottom: .875rem; }
  .kicker { margin-bottom: 1rem; font-size: .75rem; }
  .section-title, .faq__title, .related__title { font-size: 2.75rem; }
  .section-head { margin-bottom: 2.5rem; }
  .section-lede { font-size: 1.0625rem; }
  .intro__title, .blog-hero__title, .post-hero__title { font-size: 2.125rem; line-height: 2.625rem; } /* homepage phone size */

  .intro { padding-top: 10.625rem; padding-bottom: 3rem; } /* homepage hero's phone --pad-y */
  .panel__inner { border-radius: calc(1.5rem * (1 - var(--p, 0))); }
  .intro__row { flex-direction: column; align-items: flex-start; gap: 1.25rem; margin-top: 2rem; }
  .intro__sub { font-size: 1.0625rem; }
  .intro__row .chip { margin-left: 0; }
  .panel { padding-bottom: 4rem; }
  .panel__inner { height: auto; min-height: 0; }
  .panel__title { top: 2.5rem; font-size: 2.5rem; }
  .stats { gap: 2rem 1.25rem; padding: 9rem var(--pad) 2.5rem; }
  .stat dt { font-size: 3rem; }
  .stat dt small { font-size: 1rem; }
  .stat dd { font-size: .875rem; }
  .story { padding: 4rem var(--pad) 6rem; }
  .story__quote { font-size: 2rem; }
  .story__answer { margin-top: 3rem; }
  .story__answer p { font-size: 1.125rem; }

  .edge__stage { position: static; height: auto; overflow: visible; }
  .edge .about__scroll { padding-top: 4rem; padding-bottom: 4rem; }

  .founders { padding: 5rem var(--pad) 3rem; }
  .founder { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 0; }
  .founder:nth-of-type(even) .founder__photo { order: 0; }
  .founder__photo { border-radius: 1.5rem; }
  .founder__name { font-size: 2.25rem; }
  .founder__bio { font-size: 1rem; }
  .founder__skills li { font-size: .9375rem; }

  .values { padding: 5rem var(--pad); }
  .values .section-head { margin-bottom: 2rem; }
  .value--line .value__name { font-size: 1.5rem; }
  .value { grid-template-columns: 1fr; gap: .75rem; padding: 2rem 0; }
  .value__text { grid-column: auto; font-size: 1rem; }
  .value__name { font-size: 2rem; }
  .value__num { font-size: .875rem; }

  .goal { padding: 6rem var(--pad); }
  .goal__text { font-size: 2.125rem; }
  .goal__pill { margin: 0 .5rem; padding: .1875rem; }
  .goal__pill img, .goal__pill b { width: 2.25rem; height: 2.25rem; margin-right: -.375rem; }
  .goal__note { font-size: 1rem; }
  .audience li { padding: .625rem 1rem; font-size: .875rem; }

  .offer, .sites, .pricing, .services { padding: 5rem var(--pad); }
  .offer__grid { grid-template-columns: 1fr; }
  .offer__item { padding: 2rem 0 2.5rem; }
  .offer__num { margin-bottom: 1rem; }
  .offer__item h3 { font-size: 1.625rem; }
  .offer__item p { font-size: 1rem; }
  .demos { flex-direction: column; gap: 3rem; margin: 0; }
  .demo { width: 100%; }
  .demo__img { border-radius: 1.25rem; }
  .demo h3 { font-size: 1.625rem; }
  .sites__grid { grid-template-columns: 1fr; gap: 3rem; }
  .site-card:nth-child(even) { margin-top: 0; }
  .site-card__img { border-radius: 1.25rem; }
  .site-card h3 { font-size: 1.5rem; }
  .plans { grid-template-columns: 1fr; gap: 1.25rem; }
  .plan__inner { padding: 2rem 1.5rem; border-radius: 1.5rem; }
  .plan__badge { right: 1.5rem; top: 2rem; }
  .plan h3 { font-size: 2rem; }
  .plan p { font-size: 1rem; }
  .reels { padding: 5rem var(--pad); }
  .reels__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 32rem; gap: .625rem; }
  .reels__col:nth-child(3) { display: none; }
  .reels__track { gap: .625rem; padding-bottom: .625rem; }
  .reel-tile { border-radius: .875rem; }
  .reel-tile__play { width: 2.75rem; height: 2.75rem; }
  .video-modal { padding: 1.25rem; border-radius: 1.25rem; }
  .video-modal h3 { font-size: 1.5rem; }
  .platforms { padding: 1rem 0 3rem; }
  .platforms__row { font-size: 2.5rem; }
  .service-row { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 0; }
  .service-row:nth-of-type(even) .service-row__img { order: 0; }
  .service-row__img { border-radius: 1.5rem; }
  .service-row__title { font-size: 2rem; }
  .service-row__text { font-size: 1rem; }

  .faq { padding: 5rem var(--pad); gap: 2rem; }
  .faq summary { gap: 1rem; padding: 1.5rem 0; font-size: 1.125rem; }
  .faq summary i { width: 2.25rem; height: 2.25rem; }
  .faq details p { padding-right: 0; font-size: 1rem; }

  .cta { padding-bottom: 5rem; }
  .cta__marquee { margin-bottom: 4rem; padding: 1.5rem 0; }
  .cta__marquee div { font-size: 2.5rem; }
  .cta__title { font-size: 2.75rem; }
  .cta__text { font-size: 1.0625rem; }
  .cta__actions { flex-direction: column; gap: 1.75rem; }
  .cta__btn { min-height: 3.75rem; }
  .site-footer { padding-top: 4rem; }
  .site-footer__top { grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 3rem; }
  .site-footer__bottom { flex-direction: column; gap: 1rem; padding: 2rem 0 5rem; }

  .blog-hero { padding: 10.625rem var(--pad) 3rem; }
  .blog-hero__sub { font-size: 1.0625rem; }
  .filters { gap: .5rem; margin-top: 2rem; }
  .filters button { padding: .625rem 1rem; font-size: .8125rem; }
  .posts { padding-bottom: 5rem; }
  .post-grid { grid-template-columns: 1fr; gap: 3rem; }
  .post-card--feature { margin-bottom: 3rem; }
  .post-card--feature .post-card__img { border-radius: 1.5rem; }
  .post-card--feature .post-card__title, .post-card__title { font-size: 1.625rem; }
  .post-card--feature .post-card__excerpt, .post-card__excerpt { font-size: 1rem; }

  .post-hero { padding-top: 8rem; padding-bottom: 2.5rem; }
  .post-hero__meta { flex-wrap: wrap; gap: 1.5rem; }
  .post-cover { padding-bottom: 3rem; }
  .post-cover__inner { border-radius: 1.25rem; }
  .prose { padding-bottom: 5rem; font-size: 1.0625rem; }
  .prose h2 { margin-top: 2.75rem; font-size: 1.625rem; }
  .related { padding: 4rem var(--pad) 5rem; }
  .related__head { flex-direction: column; align-items: flex-start; margin-bottom: 2rem; }
}