/* ===== Palette C: Moonrise Kingdom / Life Aquatic — colour layer over the original build ===== */
:root{
  --beige:#efe6c8;              /* khaki-yellow background */
  --black:#2f3a2a;              /* pine text */
  --black-40:#2f3a2a66; --black-10:#2f3a2a1a;
  --white:#f7f0d8;              /* paper for cards that were white */
  --ochre:#d9a441; --rust:#b7583a; --sky:#7fb3c7; --paper:#f7f0d8;
}
/* one accent: ochre for active nav item and button hover */
.nav-item.w--current{background:var(--ochre);color:var(--paper);font-style:normal;padding:4rem 10rem;border-radius:100vw}
.button:hover{background:var(--ochre);border-color:var(--black);color:var(--paper)}
/* hero badges as paper tags */
.hero-bullet{background:var(--paper);color:var(--black);border:1rem dashed var(--rust);border-radius:8rem;transform:rotate(-1.5deg)}
.hero-bullet + .hero-bullet{transform:rotate(1deg)}
/* service (round) covers and testimonial covers: pale tints */
.podcast-card:nth-child(2n) .podcast-card__cover{background:var(--sky)}
.podcast-card:nth-child(2n+1) .podcast-card__cover{background:#e9cf8f}
.podcast-card__cover img{mix-blend-mode:multiply;opacity:.9}
/* testimonials: logo tiles removed, the single photo takes the whole right column */
.charity-first-card{display:block!important}
.charity-logo-image{width:100%}
.charity-logo-image img{width:100%;height:auto;display:block}
/* Olya, 2026-09-25: this block should read exactly like Sasha's — three identical paper cards, no tints.
   (The old rule painted card 1 Zissou blue and card 3 ochre, which is what made it look different.) */

/* live-ish details */
.embed-link{text-decoration-color:var(--rust)}
.splide__pagination__page.is-active{background:var(--rust)}
/* the green feather on load, instead of the hero doodle */
.hero-icon svg{display:none!important}
.hero-icon{background:url(../images/deck/feather.png) center/contain no-repeat;transform:rotate(-30deg);width:110rem!important;filter:drop-shadow(0 6rem 6rem rgba(0,0,0,.25))}
/* --- business section: two stacked videos, heading kept clear of the media --- */
.is-hero-second-bg.duo{display:flex!important;flex-direction:column;justify-content:center;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:auto;aspect-ratio:16/9;padding:0;background:transparent;overflow:hidden;border-radius:32rem}
.second-section-bg .duo{position:relative;top:auto;transform:none;height:100%;aspect-ratio:auto}
.duo video{flex:1 1 0;min-height:0;width:100%;height:100%;object-fit:cover;display:block;opacity:1;border-radius:32rem}
@media (min-width:992px){
/* Olya approved "вариант А" 2026-09-24: both text columns centred on the video card's axis, instead of
   the flex-start that aligned their TOPS and left the three columns with three different centres. */
.hero-second__heading-layout{align-items:center;transform:translateY(-17rem)}
/* the -17rem pulls that shared axis onto the CARD's axis. It cannot be exact at every width: the card is a
   scroll-animated sticky element, so its resting centre is fixed in rem, while the row's centre moves with
   how the right-hand column wraps (555rem tall at 1440, 477rem at 2000). -17rem lands it exactly at 1440
   and within ~8rem at 2000. Use transform, never margin: a margin here would shorten the container and drag
   the business-cards marquee down onto the newsletter. */
/* narrower side columns so the 16:9 video card (640×360rem) fits between them without overlap.
   Keep the text column's WIDTH at the original 28% (only trim the heading column) — shrinking
   the paragraph column too made it wrap onto extra lines, which grows .hero-second-layout.container's
   own height, and since the business-cards marquee below is position:absolute at "top:100% + 72rem",
   a taller container pushes the whole marquee row down into the next section (the "кривая вёрстка" bug). */
/* both side columns the SAME width (25%) so the gap between them is centred on the viewport — the
   640rem card is centred by the sticky hero, so asymmetric columns made the text column touch the video */
.hero-second__heading-layout > .section-heading:first-child{max-width:25%;flex:0 0 25%}
.hero-second__heading-layout h2.text-h1{font-size:60rem}
.hero-second__heading-layout h2.text-h1 span.text-h2{display:block!important;font-size:54rem}
.hero-second__heading.section-heading{max-width:25%;flex:0 0 25%}
/* small floating airship clip at the bottom-left of the Media-first block, like the pj-float photos */
.hero-bg-wrp{overflow:visible}
.mf-float{position:absolute;left:-90rem;bottom:-46rem;width:220rem;height:150rem;border-radius:16rem;overflow:hidden;z-index:5;
  box-shadow:0 8rem 18rem rgba(47,58,42,.18);transform:rotate(-3deg);opacity:0;transition:opacity .5s .4s;pointer-events:none}
.hero-bg-wrp:has(.hero-bg.change) .mf-float{opacity:1}
.mf-float video{width:100%;height:100%;object-fit:cover;display:block}
/* the business-cards marquee is position:absolute at "100% + 72rem" of its container and hangs ~300rem
   below it; give the next (newsletter) section room so the cards never sit on top of it */
.container.teams-container{padding-top:230rem}
}
/* a16z quote under the manifesto: bigger and set apart, but still secondary to the 28rem paragraph above */
.hero-second__heading p.text-p3{margin-top:36rem;font-size:20rem;line-height:1.4}
.hero-second__heading .quote-hl{font-style:italic;font-weight:600;color:var(--rust);text-decoration:underline;text-decoration-color:var(--ochre);text-decoration-thickness:2rem;text-underline-offset:4rem}
.hero-second__heading .quote-attr{display:block;margin-top:14rem;font-size:13rem;line-height:1.45;opacity:.75}
.hero-second__heading .quote-attr img{display:block;height:30rem;width:auto;margin-bottom:10rem;opacity:.9}
/* Irresistible slide: analytics screenshot as a second cover, wide so the 7.1M figures stay legible */
/* column total = 188 + 16 + 201 = 405rem — same as the reference .project-cover.is-1, so the absolutely
   positioned .project-about__wrapper stays inside .project-about__pixel and doesn't climb onto the intro */
.irr-covers{display:flex;flex-direction:column;gap:16rem;flex:0 0 auto}
.irr-covers .project-cover.is-1{width:336rem;height:188rem}
.project-cover.irr-analytics{width:336rem;height:201rem;background:#fff;flex:0 0 auto}
.project-cover.irr-analytics img{width:100%;height:100%;object-fit:contain;display:block}
/* hero keeps the photo; the two videos sit behind it and are revealed only after the scroll swap */
.hero-bg img.is-hero-bg{z-index:2;object-position:50% 50%}
.hero-bg .is-hero-second-bg.duo{z-index:1;opacity:0;transition:opacity .6s;top:0;transform:none;height:100%;aspect-ratio:auto}
/* darken the hero photo so the white heading/subhead stay readable over it (filter on the img itself, not a separate overlay box — the hero box is position:absolute/z-index:-1 and stays in the DOM behind later sections after you scroll past, so an extra ::before box on it bleeds through there) */
.hero-bg img.is-hero-bg{filter:brightness(.72) saturate(1.05)}
.hero-bg.change .is-hero-second-bg.duo{opacity:1}
/* three floating project images: own classes, own scroll motion */
.pj-float{position:absolute;z-index:1;width:171rem;height:116rem;border-radius:16rem;overflow:hidden;display:flex;
  box-shadow:0 8rem 18rem rgba(47,58,42,.18);will-change:transform;opacity:0;transition:opacity .7s ease}
.pj-float.is-in{opacity:1}
.pj-inner{width:100%;height:100%;display:flex}
.pj-float img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:992px){
  .pj-1{left:-96rem;top:250rem}
  .pj-2{right:-26rem;top:22rem}
  .pj-3{left:42rem;bottom:-84rem}
}
@media (max-width:991px){ .pj-2,.pj-3{display:none} .pj-1{left:auto;right:16rem;bottom:-66rem;width:148rem;height:100rem} }

/* hero text sits on the left half so it never crosses the face */
@media (min-width:992px){
  .hero-layout{display:flex;justify-content:flex-start;align-items:flex-end}
  .hero-content{max-width:660rem;margin-right:auto;margin-left:0}
}
/* case cards in the carousel: wider, roomier text, name in the display face */
@media (min-width:992px){
  /* like Sasha's: logo + role vertically centred; the description only appears on hover */
  .business-card{width:300rem;max-width:300rem;height:300rem;max-height:300rem;padding:28rem 24rem;justify-content:center}
}
.business-card__logo{font-family:"Fraunces",serif!important;font-weight:500!important;font-size:30rem!important;letter-spacing:-.02em!important;text-transform:none!important;line-height:1.05}
.business-card__heading .text-p3{font-family:"Courier Prime",monospace;font-size:12rem;letter-spacing:.02em;text-transform:none}
.business-card__about p{font-family:"Poppins","Jost",sans-serif;font-size:13rem;line-height:1.45}
.business-card__about-grid{max-height:190rem;overflow:hidden}
/* keep the head in frame while the card grows on scroll */
/* collab-1.jpg now carries a 90px strip of backdrop above the head (14% was too much air at 2000px) (Olya, 2026-09-25: "чтобы моя голова не обрезалась"); anchor to the top so
   the landscape box crops from the bottom, never the hair. Untouched original: content/originals/collab-1.orig.jpg */
.projects-subsection__image-1 img{object-position:50% 0%}
/* audience doodle instead of the hugging hands, moved under the heading on the left */
.business-icon svg{display:none!important}
.business-icon{background:url(../images/audience.svg) center/contain no-repeat;width:150rem!important;height:110rem!important;
  left:4rem;right:auto!important;bottom:-150rem!important;transform:rotate(-1deg)}

/* press card #1: square portrait from the FTR article inside the wide 654×433 cover — keep the face, crop the shoulders */
/* press row, 2026-09-25: Olya found it far too tall ("сейчас он очень большой"). The old square portrait set the
   row height; the cover is now the landscape report-entry card at a fixed height, and the heading tile shrinks
   its padding to match. Top-anchored so the report's logo band is never cropped. */
#articles .media-card__cover.fill-height{height:auto;max-height:none;min-height:0;aspect-ratio:870/480;flex:0 0 auto}  /* the card's own ratio: shown whole at every width */
#articles .media-card__cover img{width:100%;height:100%;object-fit:cover;object-position:50% 0%}
#articles .media-empty{padding:36rem;grid-row-gap:32rem;grid-column-gap:32rem}
/* Sumsub slide: two square video covers stacked (Olya, 2026-09-24 — "в самсаб тоже два ролика").
   SQUARE, not the default wide 290×160 box: the "Verify & Comply" reel is a 1:1 social cut with burned-in
   subtitles across its bottom edge, and a landscape crop cuts them off. The Multiverse clip is 5:4, so a
   square box actually crops it LESS than the wide box did.
   Column total = 194 + 16 + 194 = 404rem — the same ceiling as .irr-covers (405). Don't exceed it: the
   .project-about__wrapper is position:absolute inside .project-about__pixel and a taller one climbs up
   onto the "All my projects" intro. */
.sumsub-covers{display:flex;flex-direction:column;gap:16rem;flex:0 0 auto}
.sumsub-covers .project-cover{width:194rem;height:194rem;flex:0 0 auto}
/* "Shows I produce" card: real view counts on the video, same paper-pill language as the press-card logo
   (Olya, 2026-09-24). No release year anywhere here — she asked for the numbers without a date. */
/* TOP-left, not bottom-left like the press-card pill: the clip carries a big "DISCLAIMER" caption across
   its lower third around 0:07, and pills sitting there collided with it. The hairline border + shadow keep
   the pills readable when the shot behind them is the presenter's white shelving. */
.shows-stats{position:absolute;z-index:1;left:24rem;top:24rem;display:flex;flex-direction:column;gap:8rem;pointer-events:none;align-items:flex-start}
.shows-stat{background:var(--white);border:1rem solid var(--black-10);border-radius:16rem;padding:8rem 14rem;display:flex;align-items:baseline;gap:8rem;box-shadow:0 2rem 10rem rgba(47,58,42,.12)}
.shows-stat__num{font-family:"Fraunces",serif;font-weight:600;font-size:22rem;line-height:1.1;color:var(--black)}
.shows-stat__label{font-family:"Courier Prime",monospace;font-size:11rem;letter-spacing:.02em;color:var(--black);opacity:.8}
@media (max-width:991px){
  .shows-stats{left:16rem;top:16rem;gap:6rem}
  .shows-stat{padding:6rem 10rem}
  .shows-stat__num{font-size:18rem}
  .shows-stat__label{font-size:10rem}
}
/* The clip opens on a full-width title card ("FAKE DOCUMENTS | EXPERIMENT") that runs edge to edge in the
   16:9 frame. This cover box is ~1.35:1, so the default object-fit:cover sliced the word "EXPERIMENT" off.
   Show the whole frame instead; the letterbox bars take the pine of the palette so they read as framing. */
.media-card__cover .u-video-wrapper{background:var(--black)}
.media-card__cover .u-video{object-fit:contain}
/* ABBYY slide: two press covers stacked (Guardian on top, The New Yorker under it) — Olya asked for more
   tier-1 coverage on this slide, 2026-09-24. 160 + 16 + 160 = 336rem, under the 405rem .irr-covers ceiling. */
.abbyy-covers{display:flex;flex-direction:column;gap:16rem;flex:0 0 auto}
.abbyy-covers .project-cover{width:290rem;height:160rem;flex:0 0 auto}
.abbyy-covers .project-cover img{width:100%;height:100%;object-fit:cover;display:block}
/* Irresistible slide, 2026-09-24: a second clip under the company description, and a view count on each
   video. The about column is about-box + 16 + a 16:9 cover at the same 336rem width. */
.irr-about-col{display:flex;flex-direction:column;gap:16rem;flex:0 0 auto;width:336rem}
.irr-about-col .project-about{flex:0 0 auto}
.project-cover.irr-second{width:336rem;height:189rem;flex:0 0 auto;position:relative}
.project-cover.irr-second video{border-radius:0}
/* view-count pill, same paper-chip language as the press-card logo and the shows-block stats */
.project-cover{position:relative}
.vcount{position:absolute;left:12rem;bottom:12rem;z-index:2;pointer-events:none;
  background:var(--white);border:1rem solid var(--black-10);border-radius:12rem;padding:5rem 10rem;
  font-family:"Courier Prime",monospace;font-size:11rem;line-height:1;letter-spacing:.02em;color:var(--black);
  box-shadow:0 2rem 8rem rgba(47,58,42,.14)}
/* Newsletter column as a Wes Anderson shelf (Olya, 2026-09-25): analogue objects from her deck instead of
   photos — each one laid flat and centred on a pastel card, not cropped. The tints cycle so the vertical
   marquee reads as a colour script rather than a photo strip. */
.team-section__image.wes{display:flex;align-items:center;justify-content:center;padding:26rem;
  border:1rem solid var(--black-10);background:var(--white)}
.team-section__image.wes.tint-1{background:#dfebee}   /* pale Zissou blue */
.team-section__image.wes.tint-2{background:#f0e4be}   /* pale ochre */
.team-section__image.wes img{width:100%;height:100%;object-fit:contain;display:block}
@media (max-width:991px){ .team-section__image.wes{padding:18rem} }
/* Sumsub slide: WSJ citation card to the left of the two video squares (2026-09-25) */
.project-cover.sumsub-wsj{width:210rem;height:116rem;flex:0 0 auto;align-self:center}
.project-cover.sumsub-wsj img{width:100%;height:100%;object-fit:cover;display:block}
/* footer YouTube: no channel yet — inert button with a "coming soon" tag hanging under it (2026-09-25) */
.footer-top__buttons a.is-soon{position:relative;cursor:default;pointer-events:none}
.footer-top__buttons a.is-soon .soon-tag{position:absolute;left:50%;top:calc(100% + 8rem);transform:translateX(-50%) rotate(-2deg);
  white-space:nowrap;background:var(--white);border:1rem dashed var(--rust);border-radius:8rem;padding:3rem 9rem;
  font-family:"Courier Prime",monospace;font-size:11rem;letter-spacing:.04em;text-transform:none;color:var(--rust)}

/* Newsletter column, 2026-09-25 (Olya: "чтобы двигались сами телефоны и билетики, а не квадраты"):
   freeze the GSAP scroll-marquee that moves the whole tile column (setTeamMarque() in the vendor script
   sets an inline transform on '.team-section__images-track' children every frame) and instead give each
   object its own small idle drift/rotate loop. An author-stylesheet !important rule beats a plain inline
   style in the CSS cascade, so this works without touching the JS. */
.team-section__image.wes img{animation:wes-drift 7s ease-in-out infinite}
.team-section__image.wes:nth-child(1) img{animation-duration:8.5s;animation-delay:-1.2s}
.team-section__image.wes:nth-child(2) img{animation-duration:6.5s;animation-delay:-3.6s;animation-direction:reverse}
.team-section__image.wes:nth-child(3) img{animation-duration:9s;animation-delay:-.4s}
.team-section__image.wes:nth-child(4) img{animation-duration:7.5s;animation-delay:-5s;animation-direction:reverse}
.team-section__image.wes:nth-child(5) img{animation-duration:6s;animation-delay:-2.1s}
.team-section__image.wes:nth-child(6) img{animation-duration:8s;animation-delay:-4.4s;animation-direction:reverse}
.team-section__image.wes:nth-child(7) img{animation-duration:7s;animation-delay:-1.8s}
.team-section__image.wes:nth-child(8) img{animation-duration:9.5s;animation-delay:-3s;animation-direction:reverse}
.team-section__image.wes:nth-child(9) img{animation-duration:6.8s;animation-delay:-.9s}
@keyframes wes-drift{
  0%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(3rem,-4rem) rotate(-4deg)}
  50%{transform:translate(-2rem,3rem) rotate(3deg)}
  75%{transform:translate(-3rem,-2rem) rotate(-2deg)}
  100%{transform:translate(0,0) rotate(0deg)}
}
@media (prefers-reduced-motion: reduce){
  .team-section__image.wes img{animation:none}
}

/* 2026-09-25 (Olya: "чтобы квадратов не было — только сами предметы, и чтобы они двигались"):
   no tiles at all — transparent, borderless, the object alone with a soft contact shadow. The column
   scroll is back on (it now moves only the objects, since there are no squares left to move), and each
   object keeps its own drift on top of it. */
.team-section__image.wes,.team-section__image.wes.tint-1,.team-section__image.wes.tint-2{background:transparent!important;border:0!important;border-radius:0!important;padding:6rem!important;overflow:visible!important}
.team-section__images,.team-section__images-track{overflow:visible}
.team-section__image.wes img{filter:drop-shadow(0 8rem 10rem rgba(47,58,42,.22))}
/* radio reads too small next to the phone and envelope (Olya, 2026-09-26: "эту давайте чуть увеличим").
   `scale` is a separate property, so it composes with the wes-drift transform animation instead of fighting it. */
.team-section__image.wes img[src*="deck/radio.png"]{scale:1.4}
/* gift-card covers all the same size (Olya, 2026-09-26): the card is a flex column, and card 1's three-line
   title made flex shrink its cover to a short landscape strip. Covers must never shrink. */
.gift-card__cover{flex:0 0 auto;width:200rem;height:200rem;aspect-ratio:1}
.gift-card__cover img{width:100%;height:100%;object-fit:cover;display:block}
/* 2026-09-26 (Olya: "увеличить, но разбросать, чтобы они не шли друг за другом"): the round objects
   (coffee, donut, craspedia...) all sat dead-center via justify-content:center, so they lined up in one
   straight column. `translate` is its own CSS property (like `scale` above), so a static per-item offset
   here composes with the wes-drift keyframe animation instead of overriding it. */
.team-section__image.wes:nth-child(1) img{translate:-14rem 0}
.team-section__image.wes:nth-child(2) img{translate:20rem 0}
.team-section__image.wes:nth-child(3) img{translate:-10rem 0}
.team-section__image.wes:nth-child(4) img{translate:16rem 0}
.team-section__image.wes:nth-child(5) img{translate:-22rem 0}
.team-section__image.wes:nth-child(6) img{translate:12rem 0}
.team-section__image.wes:nth-child(7) img{translate:-16rem 0}
.team-section__image.wes:nth-child(8) img{translate:18rem 0}
.team-section__image.wes:nth-child(9) img{translate:-12rem 0}
.team-section__image.wes img[src*="deck/donut.png"]{scale:1.3}