/* ============================================================
   EXPERTS — the /experts page (Linear MAR-133), built on the design system.
   Requires: tokens.css, page.css, surface.css, patterns.css, form.css
     .experts-logos     the «our experts come from» line (LogoStrip)
     .experts-format    one format: heading, its lead, the cards
     .experts-card      a card; the whole card opens its dialog (the button's ::after covers it)
     .experts-dialog    the card's full text, in the HTML for search and AI agents
   ============================================================ */

/* in-page links (the hero's «Become Expert», the format chips, the arrows to the form) glide to their target instead
   of jumping, as anchor links did on the Webflow page; no motion for people who turned it off */
@media (prefers-reduced-motion: no-preference) { html:has(.experts) { scroll-behavior: smooth; } }

/* logos line */
/* logos: the shared LogoStrip; on the dark page the wordmarks go one white, whatever their own colours */
.theme-dark .experts-logos .logo-strip__logos img { filter: brightness(0) invert(1); }
/* the first screen's heading: «Birch», three faces overlapping, «experts» in one line —
   circles 0.73 of the heading's size (in em, so they scale with it), the visible circle on the baseline, each over the last by 16 (Spacing SM), 8 after «Birch», «experts» over the last circle by 32 —
   per the mock (less overlap, «experts» runs over the circles), framed in the page's black; the photos keep their covers' colours, the bird last */
.experts-title { display: flex; align-items: baseline; justify-content: center; gap: var(--space-xs); margin: 0; } /* the circles sit on the words' baseline */
.experts-title__end { position: relative; margin-left: calc(-1 * var(--space-md) + var(--experts-shift, 0.085em)); } /* «experts» over the last circle a little: +9 at 1440 (0.085em, scales with the heading); --experts-shift: the lab slider */
.experts-faces { display: flex; }
.experts-faces img { display: block; width: var(--faces-size, 0.73em); height: var(--faces-size, 0.73em); position: relative; top: calc(var(--border-thick) + var(--faces-shift, 0.076em)); /* 0.73 of the heading, 8 lower at 1440 (0.076em, scales with it) */ /* the frame is the page's black: moved down by it, the visible circle sits on the baseline; --faces-shift: the lab slider */ border-radius: var(--radius-pill); object-fit: cover; object-position: 50% 20%; border: var(--border-thick) solid var(--color-bg); background: var(--color-bg); }
.experts-faces img[hidden] { display: none; }
/* they come in on load and part the words smoothly, no pop:
   the line starts as «Birch experts»; each circle grows its width (the words slide apart)
   from a little smaller, no fade (opacity out of place), 600 ms on a soft curve, no overshoot, 150 ms apart */
.experts-faces img { --ease: cubic-bezier(0.25, 0.1, 0.25, 1); transition: width 600ms var(--ease), margin-left 600ms var(--ease), border-width 600ms var(--ease), transform 600ms var(--ease); }
.experts-title__end { transition: margin-left 600ms cubic-bezier(0.25, 0.1, 0.25, 1); }
.experts-title.is-pre .experts-faces img:not(.is-in) { width: 0; border-width: 0; margin-left: 0; transform: scale(0.85); }
.experts-title.is-pre:not(.is-open) .experts-title__end { margin-left: 0; }
@media (prefers-reduced-motion: reduce) { .experts-faces img, .experts-title__end { transition: none; } }
.experts-faces img:not([hidden]) ~ img { margin-left: calc(-1 * var(--space-sm)); } /* after the first shown face: two of four are shown, on every load another pair */
.experts-logos .logo-strip { gap: var(--space-md); } /* the lead closer to its logos than LogoStrip's 48, but not tight: 32 (on /experts only) */
.experts-logos .logo-strip__lead { font-size: var(--text-para-lg-size); line-height: var(--text-para-lg-lh); } /* Paragraph LG, a step under the component's XL */
.experts-logos .logo-strip__lead { margin: 0; } /* the paragraph's own 24 under it added to the gap */
/* the first screen: the hero and the logos line under it fill the screen under the menu; the hero
   gives up its own screen height and takes what the logos leave. Desktop only for now */
@media (min-width: 768px) {
  .experts-first { display: flex; flex-direction: column; min-height: calc(100svh - var(--nav-height)); padding-bottom: var(--space-lg); } /* no margin under it: the next section brings its own section space (was doubled, 264) */
  .experts-first > .hero { flex: 1; min-height: 0; }
}
/* formats: all five in a row of sections */
/* the form's section: a link to it lands the form under the fixed menu with Spacing SM to spare — the section's own top
   space counts toward it, so on desktop (section space over the menu height) nothing is added */
#become-expert { scroll-margin-top: max(0rem, calc(var(--nav-height) + var(--space-sm) - var(--section-space))); }
.experts-format { display: grid; gap: var(--space-md); scroll-margin-top: var(--space-2xl); } /* a link lands it where the sticky column sits, under the menu */
.experts-format + .experts-format { margin-top: var(--section-space); }

/* sticky (the gallery and featured layouts were compared and removed): the heading, the
   text and the call to the form stay in view in their 3 columns while the cards scroll by */
/* the aside is a card: one more cell of the cards' grid, so the grid reads; it stays in view at least a screen tall, the call to the form at its bottom — pinned to the bottom of the
   screen while the cards scroll by; a longer aside just grows. Desktop only for now. */
.experts-format__aside {
  position: sticky; top: var(--space-2xl); align-self: start;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space);
  /* the gap under the card to the screen edge = the gap from the menu pill to the card: the pill
     ends at --nav-height minus its air (nav.css --nav-pill-top, 0.375rem, scoped to .nav-v3 — not readable here) */
  --aside-gap: calc(var(--space-2xl) - var(--nav-height) + 0.375rem);
  min-height: calc(100vh - var(--space-2xl) - var(--aside-gap));
}
.experts-format__aside > :last-child { margin-top: auto; }
/* the bottom of the column: «How we help» and the call to the form, with no card around it (five
   cards weighed the page down) */
.experts-format__help { display: grid; justify-items: start; gap: var(--space-sm); align-self: stretch; }
.experts-format__part { display: grid; gap: var(--space-xs); }
/* the cards across all 9 remaining columns, off the page grid on purpose, laid out per format
   (data-cards) so the page is not one sheet of the same card. Side-by-side cards keep the cover at the top: its
   8 field and radius 16 − 8 hold (nested-radius rule). */
.experts-format__cards { grid-column: span 9; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.experts-format__cards .experts-card { grid-column: auto; }
.experts-format__cards[data-cards="trio"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.experts-format__cards[data-cards="rows"] { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
/* side-by-side cards are .card--side (surface.css; ExpertsPage.astro picks them: every guide and story, a lead's big
   card); here only their columns: guides the picture on half (the default), the lead's big card the picture bigger
   still (was 3 : 2) across the row */
[data-cards="lead"] .experts-card.card--side { grid-column: 1 / -1; --side-split: minmax(0, 7fr) minmax(0, 3fr); }
@media (max-width: 47.9375rem) {
  .experts-format__cards, .experts-format__cards[data-cards] { grid-template-columns: minmax(0, 1fr); }
}
/* the round arrow to the form (sticky column): a small circle, the arrow masked in the text
   colour, its label beside it; hover fills the circle Indigo and nudges the arrow down */
.experts-down { display: inline-flex; align-items: center; gap: var(--space-xs); padding-block: var(--space-xs); color: inherit; text-decoration: none; }
.experts-down__circle {
  position: relative; flex: none;
  width: var(--space-md); height: var(--space-md); /* smaller than the XS button; the link around it keeps a 48 touch area */
  border-radius: var(--radius-pill);
  background: var(--color-bg-cta-grey);
  transition: background-color var(--duration-hover) var(--ease-hover);
}
.experts-down__circle::before {
  content: ""; position: absolute; inset: 30%; background: currentColor;
  mask: url("../icons/arrow-down.svg") center / contain no-repeat;
  transition: transform var(--duration-hover) var(--ease-hover);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .experts-down:hover .experts-down__circle { background: var(--color-accent-indigo); }
  .experts-down:hover .experts-down__circle::before { transform: translateY(12%); }
}
.experts-down:focus-visible { outline: var(--border-thick) solid var(--color-accent-indigo); outline-offset: var(--border-thin); border-radius: var(--radius-pill); }

/* tablets and phones: the column sits above its cards, a plain card — 3 of 12 columns at 768 was a
   160 px strip of small text */
@media (max-width: 61.9375rem) {
  .experts-format__aside { position: static; min-height: 0; grid-column: 1 / -1; }
  .experts-format__cards { grid-column: 1 / -1; }
}
/* tablets only: the column's two parts side by side — the heading and its line, then «How we help» with the call — so a
   paragraph keeps a reading line (one column at 768 ran 90–136 characters) */
@media (min-width: 48rem) and (max-width: 61.9375rem) {
  .experts-format__aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; }
  .experts-format__aside > :last-child { margin-top: 0; }
}

/* cards */
.experts-cards { row-gap: var(--grid-gap); }
/* the card is a .card with modifiers (surface.css): --inset, a thin field around the cover
   (its nested radius 16 − 8), the text further in on its own padding; --zoom, the cover grows on hover; the fill follows
   the theme or --card-tint / --card-fill (ExpertCard.astro) */
.experts-card { position: relative; display: grid; align-content: start; gap: var(--space-sm); }
.experts-card:not(.card--side) { grid-template-rows: auto 1fr; }
.experts-card__text { display: grid; grid-template-rows: auto 1fr; gap: var(--space-xs); } /* its padding: .card__text (surface.css) */
/* the name on the card's bottom line: in a row of cards a shorter title leaves the space above the
   name, so the names line up; cards with the picture beside the text keep one row (minmax below) */
.experts-card__who { align-self: end; }
.experts-card__open {
  all: unset;
  cursor: pointer;
  text-wrap: balance;
}
.experts-card__open::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.experts-card__open:focus-visible::after { outline: var(--border-thick) solid var(--color-accent-indigo); outline-offset: var(--border-thin); }

/* tint: the card takes its cover's own colour (--card-tint, surface.css), so the sheet of cards is
   not one grey; no colour found → plain grey. Its dark-page rule (hue at 70% chroma, OKLCH L 0.28) is this page's:
   mixing more of the colour in made the card lighter and the grey names fell under AA (25%: 4.2); at a fixed dark
   lightness the worst card keeps 5.07 */

/* portrait (stories): the card is the story's backdrop colour (`backdrop` in the data, or read off a
   studio photo's edge — lib/picture-colour.ts). The portraits are cut-outs: the picture's
   cell is a wrapper a shade darker than the card, inset with the 8 field and nested radius of every card (.card--inset,
   not run into the card's edge), the person whole at its bottom — a narrow cell used to cut a third of the photo off. A light backdrop gets
   .theme-light: dark text. */
.experts .experts-card--portrait { align-content: stretch; } /* .card--side .card--inset, the backdrop as --card-fill; the inner row fills the card: a card stretched by a taller neighbour kept a strip of backdrop under the photo */
.experts .experts-card--portrait .experts-card__cover { --zoom-origin: 50% 100%; background: color-mix(in oklab, var(--card-fill) 90%, black); background: oklch(from var(--card-fill) calc(l - 0.06) c h); }
.experts-card--portrait .experts-card__cover img { object-fit: contain; object-position: 50% 100%; }
/* stories: the text first, the picture on the right; the name pinned to the bottom of its column */
/* every story card as tall as the tallest: equal rows, not each row its own text's height */
.experts-format__cards[data-cards="sides"] { grid-auto-rows: 1fr; }
[data-cards="sides"] .experts-card { --side-split: minmax(0, 3fr) minmax(0, 2fr); } /* .card--side-end; the text wider, the photo smaller: a more compact card */
[data-cards="sides"] .experts-card__text { align-self: stretch; grid-template-rows: auto 1fr; align-content: stretch; }
[data-cards="sides"] .experts-card__text > :last-child { align-self: end; }
.theme-dark .experts .experts-card--portrait.theme-light .text-grey { color: var(--ink); }
.theme-dark .experts .experts-card--portrait:not(.theme-light) .text-grey { color: var(--color-text); } /* on a dark backdrop the name in white, as on webinars and guides: Text/Grey (on Grey) fell to 2.35 on Tim's grey-blue (page-check) */ /* the names in black too: grey on the coloured backdrops fell to 2.4–2.8; the size (Paragraph SM) keeps them second */

/* the cover above the text, no fill (as .media-card) */
.experts-card__cover {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface);
}
#format-events .experts-card__cover { aspect-ratio: 1; }
/* stories: the case studies' portraits are 4:3 — a 16:9 frame cut their heads and chins */
#format-stories .experts-card__cover { aspect-ratio: 4 / 3; }
.experts-card__cover { position: relative; }
/* pinned to the frame: a percentage height did not resolve in the grid, and a tall picture spilled under the name */
.experts-card__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* the hover zoom: .card--zoom */

/* dark page: fills from the theme, as surface.css (Surface on light pages, Background/Grey on dark ones); the empty
   cover sits one step lighter inside the grey card */
.theme-dark .experts-card__cover { background: var(--color-bg-grey-hover); }
/* grey text on a grey fill (cards, the steps panel, the referral card): the on-grey token — Text/Grey there is 4.50, under AA */
.theme-dark .experts :is(.card, .panel) .text-grey { color: var(--color-text-grey-on-grey); }
/* the window takes focus on open (the page's script): no ring around the whole window */
.experts-dialog:focus { outline: none; }
/* an event's photo under all the text: the text column's width, the picture's radius */
.experts-dialog__photo { width: 100%; height: auto; border-radius: var(--radius-md); }
/* the pictures set a step further from the text than the window's items are from each other: Spacing (24), not SM —
   the cover over the heading, the event photo under the speakers */
.experts-dialog__media:not(.experts-dialog__media--empty) { margin-bottom: calc(var(--space) - var(--window-gap, var(--space-sm))); }
.experts-dialog__photo { margin-top: calc(var(--space) - var(--window-gap, var(--space-sm))); }
@media (max-width: 47.9375rem) { .experts-dialog__photo { border-radius: var(--radius-xs); } }
.theme-dark .experts-dialog__media--empty { background: var(--color-bg-grey); }

/* how it works */
/* step cards (the AI Promo «Card», Figma 242:1169): title on top, the number in the middle, the text at the bottom.
   The card's proportion comes from the mock (400 × 470) — the number needs the air in the middle. The number is
   Birch/H1 96: the mock's 150 has no type style (open question). */
.experts-steps { margin: 0; padding: 0; list-style: none; }
.experts-step { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-sm); aspect-ratio: 4 / 5; } /* taller than the mock's 40 / 47: more air around the number */
.experts-step__title, .experts-step__num { color: var(--color-text-primary); }
.experts-step__num { align-self: center; justify-self: center; }

/* the form block: the site's form card and the site form's system look (form.css, FormSplit.astro — the defaults were made
   from this page); here only the thank-you's chat bubble's motion — the picture itself sits by the form's template (form.css, «the thank-you
   with a picture»; Figma 44:97 / 42:625) */
/* the dots hop one after another, like someone typing back (a hop, not a pulse); up along the
   bubble's own tilt (−5.88°, Figma 42:625); the Motion panel tunes the cycle */
.experts-form__art {
  --motion-dur: 1.2s;
  --motion-ease: linear; /* the curves are in the keyframes: up fast, down falling */
  --motion-jump: -35%; /* of a dot's own height */
}
.experts-chat__dot { transform-box: fill-box; transform-origin: center; animation: experts-typing var(--motion-dur) var(--motion-ease) infinite; }
.experts-chat__dot:nth-of-type(2) { animation-delay: calc(var(--motion-dur) / 6); }
.experts-chat__dot:nth-of-type(3) { animation-delay: calc(var(--motion-dur) / 3); }
/* a sharper hop on the same rhythm: quick up, falling back, the rest of the cycle still */
@keyframes experts-typing {
  0% { transform: rotate(-5.88deg) translateY(0); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
  30% { transform: rotate(-5.88deg) translateY(var(--motion-jump)); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4); }
  60%, 100% { transform: rotate(-5.88deg) translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .experts-chat__dot { animation: none; } }

/* dialog */
/* the shell — width, colours, the dimmed page, opening, the close — is the site's window (window.css, made from this dialog);
   here the card's own: one height for every card */
.experts-dialog {
  /* one height for every window: it no longer jumps from card to card, the button bar always sits
     at its bottom, a long text scrolls inside; at most 48rem on tall screens, so a short text is not lost in it */
  height: min(calc(100dvh - 2 * var(--space-lg)), 48rem);
  max-height: none;
}
@media (max-width: 47.9375rem) {
  .experts-dialog { height: 100dvh; max-height: 100dvh; } /* phones: the window's sheet (window.css) at the full available height, not 90% */
}

/* the picture is a reminder, not the content: at most 30% of the screen tall, so the text shows under it (a square
   event poster filled the whole window). Whole and at its own proportions, no field around it,
   at the left edge as the text */
.experts-dialog__media { align-self: flex-start; width: auto; max-width: 100%; height: auto; max-height: 30vh; border-radius: var(--radius-md); }
@media (max-width: 47.9375rem) {
  /* on phones the picture takes the window's full width, no 30% height cap */
  .experts-dialog__media { align-self: stretch; width: 100%; max-height: none; border-radius: var(--radius-xs); }
  /* the picture runs the window's width on phones, so it starts under the close button, not behind it:
     the close's 8 from the window's top, its height, and 8 under it */
  .experts-dialog__media { margin-top: calc(2 * var(--space-xs) + var(--window-close) - var(--window-pad)); }
} /* nested radii: the sheet's 28 less its 24 field leaves 4 for the picture (page-check at 375) */
/* the content set off from the button bar: Spacing MD above the bar, the next step up
   from the SM between the window's items — the last item (the text, the speakers or the photo) tops up the column's gap */
.experts-dialog__inner > :has(+ .experts-dialog__links) { margin-bottom: calc(var(--space-md) - var(--window-gap, var(--space-sm))); }
/* a story's cut-out portrait: on the same backdrop as in its card's wrapper — the card colour a shade darker (on the
   window's grey the cut-out read as a sticker) */
.experts-dialog__media--portrait { background: color-mix(in oklab, var(--card-fill) 90%, black); background: oklch(from var(--card-fill) calc(l - 0.06) c h); }
.experts-dialog__media--empty { align-self: stretch; width: 100%; display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--color-surface); text-align: center; padding: var(--space); }
.experts-dialog__speakers ul { margin: var(--space-xxs) 0 0; padding: 0; list-style: none; } /* a short list of names: no bullets */
/* the format, the heading and its byline read as one block: 8 inside it, the dialog's gap around */
.experts-dialog__head { display: grid; gap: var(--space-xs); }
/* nothing to link yet: a plain line in the bar, as tall as a button */
.experts-dialog__note { display: grid; place-items: center; min-height: var(--btn-h-xs); color: var(--color-text-grey); font-size: var(--text-btn-xs-size); font-weight: 600; line-height: var(--text-btn-lh); letter-spacing: var(--text-btn-ls); } /* the XS button's text */
/* secondary text on the grey window: Text/Grey only reaches 4.50 on Background/Grey, its on-grey twin 5.5 */
.theme-dark .experts-dialog .text-grey { color: var(--color-text-grey-on-grey); }
.experts-dialog a:not(.btn) { color: inherit; }
/* links out of the dialog (the speakers' LinkedIn, the partners' sites): the text as it is, no underline — a grey ↗
   after it says the link leaves the page; on hover the arrow turns the text colour and nudges up-right. The Indigo
   link would sit under AA on the window's grey */
.experts-dialog__out { text-decoration: none; }
.experts-dialog__out::after { content: "\2197"; display: inline-block; margin-left: 0.05em; color: var(--color-text-grey-on-grey); transition: color var(--duration-hover) var(--ease-hover), translate var(--duration-hover) var(--ease-hover); }
@media (hover: hover) { .experts-dialog__out:hover::after { color: currentColor; translate: 0.1em -0.1em; } }
@media (prefers-reduced-motion: reduce) { .experts-dialog__out::after { transition: none; } }
/* the speakers a little apart, not a run-on block: 8 between them */
.experts-dialog__speakers ul { display: grid; gap: var(--space-xs); }
/* the speakers' names are links, a plain list at every width: 48-tall rows read as gaps between the names.
   On phones each row is the WCAG 2.2 minimum target, 24 tall (page-check FAILs under 24; its 44 is a
   recommendation, declined for this list for the same reason). Links inside a sentence (the partners' «With …») stay in the text:
   WCAG 2.2 exempts them */
@media (max-width: 47.9375rem) {
  .experts-dialog__speakers li a { display: inline-flex; align-items: center; min-height: var(--space); }
}

/* the buttons in a black bar near the window's bottom, stuck there while a long text scrolls; the buttons share its
   width. Radii nest out from the yellow XS button: button 12 + the bar's 8 (airier than 4)
   = bar 20, + its 8 from the window's edges = the window 28 — sums of tokens (window.css). */
.experts-dialog__links {
  position: sticky; bottom: var(--space-xs); z-index: 1;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-xs);
  margin: auto calc(var(--space-xs) - var(--window-pad)) calc(var(--space-xs) - var(--window-pad)); /* top auto: down to the window's bottom */
  padding: var(--space-xs);
  border-radius: var(--window-bar-radius);
  background: var(--color-bg);
}

/* names: on webinars and guides the author's name is white — the cover shows the person, the name
   ties it to them; elsewhere it stays grey */
.theme-dark .experts :is(.experts-card--webinars, .experts-card--guides) .experts-card__who { color: var(--color-text); }
/* podcasts: the card in Primary, the design system's yellow (a step darker before); dark text
   (.theme-light), the names dark too */
.experts-card--podcasts { --card-fill: var(--color-primary); }
.theme-dark .experts .experts-card--podcasts .text-grey { color: var(--ink); }
/* guides: the article's blog category under the name, in its own blog chip (patterns.css, .chip[data-cat]) */
/* as wide as its word, never the column; pinned to the card's bottom, under the title and name */
.experts-card__chip { justify-self: start; align-self: end; width: fit-content; }
.experts-card:has(.experts-card__chip) .experts-card__text { align-self: stretch; grid-template-rows: auto auto 1fr; }
/* stories (the photo a little bigger): in the side-by-side cards the portrait's wrapper fills the
   card's height instead of sitting at 4:3 in its corner; the cut-out inside it stays whole */
#format-stories [data-cards="sides"] .experts-card--portrait .experts-card__cover { align-self: stretch; aspect-ratio: auto; min-height: 100%; }

/* intro (Figma, Experts 16:355; with stickers 17:415 — chosen over the split, centre and piles intros compared on
   /lab pages): the heading, the deal and its rows on the middle 8 columns;
   seven photos and three stickers thrown over the whole block, each its centre in % of the block and its turn (inline,
   from the mock); a photo is 22% of the block wide (268.8 of 1232), upright. The block has no fill: the photos lie on the
   page itself; its field 16 */
.experts-intro { position: relative; padding: var(--space-sm); border-radius: var(--radius-xl); margin-bottom: 0; }
.experts-intro :where(h2, p) { margin: 0; }
.experts-intro > * { grid-row: 1; }
/* the text at the top of the block, the heap below it; the deal right under the heading as a
   block-head's lead (16) */
.experts-intro__middle { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--space-sm); padding-block: var(--space-md); text-align: center; }
.experts-intro__deal { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
/* the deal: the line at Paragraph XL's own 1.1, the rows 48 under it across the 8 columns */
.experts-intro__deal p { line-height: var(--text-para-xl-lh); }
/* «the rest» as rows of a list (the mock): a hairline over each, 8 between them; the row 16 · 8 (the mock's 20 · 10 — no
   such tokens), the check 24 before the text */
.experts-intro__rows { display: grid; gap: var(--space-xs); width: 100%; margin: var(--space-lg) 0 0; padding: 0; list-style: none; text-align: left; }
.experts-intro__rows li { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-xs); border-top: var(--border-hairline) solid var(--color-text); }
.experts-intro__rows li::before { content: ""; flex: none; width: var(--space); height: var(--space); background: url("../icons/check-circle-inverted.svg") center / contain no-repeat; }
/* the panel as tall as the heap, not the screen (empty above the heading at 0.65) — 12 : 5 of its
   width (565 at 1440), never taller than the screen under the menu */
.experts-intro { min-height: 0; aspect-ratio: 2 / 1; max-height: calc(100vh - var(--nav-height) - var(--space-lg)); }
/* the text over every photo, so it can be read while the heap stands (under them it was unreadable) — a soft
   halo of the page's black under the letters keeps it legible on a busy photo. The bird's layer is still above it all */
.experts-intro__middle { position: relative; z-index: 4; }
.experts-intro__middle :is(h2, p, li) { text-shadow: 0 0 var(--space-md) var(--color-bg), 0 0 var(--space-xs) var(--color-bg); }

/* the scroll track («time»): the panel sticks in a short track of 9 steps of 15vh (≈ 2.35 screens)
   while the photos come on a timer; the second half of the track blows them apart. 80 under it: the content below
   comes up close, a little over the heap's lower photos (48 covered half the group photo). Photos may run past the
   container (not cut by it); only the screen's edge stops them — the clip sits on the full-width
   section, and clip, not hidden, so the panel still sticks */
.experts-intro-scroll { height: calc(100vh + 9 * 15vh); margin-bottom: var(--space-xl); --scatter-scale: 0.65; --scatter-spread: 1.1; --scatter-drop: 14%; }
.experts-intro-scroll > .experts-intro { position: sticky; top: calc(var(--nav-height) + var(--space-xs)); }
.section:has(.experts-intro-scroll) { overflow-x: clip; }
/* the photo layer: the whole block, not the grid's row inside its padding — the same box as the bird's layer, so % here
   = % of the block (the arranged end frame). No z-index: its photos layer with the text one by one */
.experts-scatter { position: absolute; inset: 0; pointer-events: none; }
.experts-intro > .experts-scatter { grid-row: auto; }
/* the top layer (the bird): sticks with the panel, its size and place set by the script, over the content below */
.experts-scatter.experts-scatter--top { position: sticky; inset: auto; z-index: 2; }
/* a photo: just the picture, no frame round it (the 8 black frame read heavy), upright as the shots.
   Size and spread: every photo and sticker at 0.65 of the mock, their centres spread 1.1 — wider
   than the mock, the side photos run a little past the container; the whole heap dropped 14% lower, clear of the
   heading and the deal */
.experts-pile__card {
  position: absolute; width: calc(22% * var(--scatter-scale)); padding: 0; background: none; border-radius: var(--radius-md); overflow: hidden;
  box-shadow: 0 var(--space-xs) var(--space-md) color-mix(in oklab, var(--color-bg) 50%, transparent);
  left: calc(50% + (var(--x) - 50%) * var(--scatter-spread)); top: calc(50% + (var(--y) - 50%) * var(--scatter-spread) + var(--scatter-drop, 0%)); translate: -50% -50%; rotate: var(--r);
  z-index: 3;
}
.experts-pile__card img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.experts-scatter .experts-pile__card:is(:nth-child(2), :nth-child(3)) { z-index: 1; } /* crowd and dog under the text */
/* stickers among the photos (Figma, Experts 17:415): drawn whole in their SVG — no radius, clip or
   shadow of a photo, their own width; they drop in like the photos */
.experts-pile__card--sticker { width: calc(var(--w) * var(--scatter-scale)); border-radius: 0; overflow: visible; box-shadow: none; }
.experts-pile__card--sticker img { aspect-ratio: auto; object-fit: contain; }
/* a landscape shot kept landscape (the group photo): 3 : 2, half again as wide, about a portrait photo's area */
.experts-pile__card--wide { width: calc(33% * var(--scatter-scale)); }
.experts-pile__card--wide img { aspect-ratio: 3 / 2; }
/* each photo snaps down onto the block (sharper, in quick taps): a short drop from a little higher,
   turned a little more, landing without a bounce and at its own size (no scale, no bounce, no fade). The page's
   script sets .is-in; without it (.is-scrub unset) or with reduced motion all photos simply lie there */
.experts-pile__card { transition: translate 200ms cubic-bezier(0.2, 0.8, 0.2, 1), rotate 200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.is-scrub .experts-pile__card:not(.is-in) { opacity: 0; translate: -50% calc(-50% - var(--space-lg)); rotate: calc(var(--r) * 2); }
/* the heading and the deal come in first, the rows later (the script): a fade and rise of 500 ms */
.experts-intro__step { transition: opacity 500ms ease, translate 500ms ease; }
.is-scrub .experts-intro__step:not(.is-in) { opacity: 0; translate: 0 var(--space-xs); }
/* the gust (as if the wind blew the heap apart): all at once, each photo to its own end point — the arranged end frame
   (--ex / --ey / --er) — a slide that dies away: fast at the start, a long drawn-out end (1.2 s, no stagger). The photos
   stay on the page: a little chaos, not gone */
.experts-scatter.is-blown .experts-pile__card.is-in {
  left: var(--ex); top: calc(var(--ey) + var(--end-shift, 0%)); translate: -50% -50%; rotate: var(--er);
  transition: left 1200ms cubic-bezier(0.05, 0.7, 0.1, 1), top 1200ms cubic-bezier(0.05, 0.7, 0.1, 1), rotate 1200ms cubic-bezier(0.05, 0.7, 0.1, 1);
}
@media (prefers-reduced-motion: reduce) {
  .experts-pile__card, .experts-intro__step { transition: none; }
  .is-scrub .experts-pile__card:not(.is-in) { opacity: 1; translate: -50% -50%; rotate: var(--r); }
  .experts-scatter.is-blown .experts-pile__card.is-in { left: calc(50% + (var(--x) - 50%) * var(--scatter-spread)); top: calc(50% + (var(--y) - 50%) * var(--scatter-spread) + var(--scatter-drop, 0%)); rotate: var(--r); transition: none; }
}

/* the formats' contents before the cards (Figma, Experts 13:218): a grey .card, the prompt, the
   links as the form's chips, filled with the page's black (the mock) and no outline; hover Indigo, as the grey button */
.experts-nav { display: grid; gap: var(--space-sm); margin-bottom: var(--grid-gap); } /* the grid gap to the first format, as between the cards: one grid */
.experts-nav__list { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.experts-nav__link { border-color: transparent; background: var(--color-bg); color: var(--color-text); text-decoration: none; transition: background-color 200ms ease; }
.experts-nav__link:hover { background: var(--color-accent-indigo); }
.experts-nav__link:focus-visible { outline: var(--border-thin) solid var(--color-text); outline-offset: var(--border-thin); }
/* the content under the intro lies over its photos, blown or not */
.experts-nav, .experts-format { position: relative; z-index: 1; }

/* tablets: the block 3 : 2 of its width, not 2 : 1 — at 2 : 1 the text with its rows filled the
   whole block and the group photo's end point lay on «Making sure…»; the blown frame (the 1440 end points, in % of the
   block) also shifts down a tenth, under the rows */
@media (max-width: 61.9375rem) {
  .experts-intro { aspect-ratio: 3 / 2; max-height: none; --end-shift: 10%; }
}

/* phones: no scene — the text and its rows, then the heap of photos lying still under
   them, the bird in it (the script moves it in). No sticky track: the block is as tall as its content. The heap is its
   own box, 4 : 3 of the width; the photos bigger (1.2 of the mock: at 0.65 they were 49 px) and not dropped */
@media (max-width: 47.9375rem) {
  .experts-intro-scroll { height: auto; --scatter-scale: 1.2; --scatter-drop: 0%; --scatter-spread: 0.95; } /* spread 0.95, not the desktop's 1.1: there the outer photos spill past the block on purpose, here the block meets the screen's edges and they were cut by 12–16 px */
  .experts-intro-scroll > .experts-intro { position: static; top: auto !important; aspect-ratio: auto; min-height: 0; max-height: none; padding: 0; }
  .experts-intro__middle { padding-block: 0; }
  .experts-intro > .experts-scatter { position: relative; inset: auto; grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; margin-top: var(--space-md); }
  .experts-scatter--top { display: none; } /* its bird is moved into the heap by the script */
  .experts-pile__card, .is-scrub .experts-pile__card:not(.is-in) { opacity: 1; translate: -50% -50%; rotate: var(--r); }
  /* the photos drop in one by one once the heap is in view (the drop-in itself reads well on phones): the desktop's
     short snap from a little higher, turned a little more, no fade — the script sets .is-drop, then .is-in on each */
  .experts-scatter.is-drop .experts-pile__card:not(.is-in) { opacity: 0; translate: -50% calc(-50% - var(--space-lg)); rotate: calc(var(--r) * 2); }
  .experts-intro__step, .is-scrub .experts-intro__step:not(.is-in) { opacity: 1; translate: none; transition: none; }
  .experts-intro__middle :is(h2, p, li) { text-shadow: none; }
}

/* phones: every format's cards and the «How it works» steps as a gallery — one row that scrolls
   sideways and snaps to each card, about one and a quarter in view; the row runs to the screen edges and starts at the
   container's padding (as .rule-gallery, product-blocks.css). Tablets keep the desktop grid for now */
@media (max-width: 47.9375rem) {
  .experts-format__cards, .experts-format__cards[data-cards], .experts-steps.grid {
    display: flex; gap: var(--grid-gap);
    margin-inline: calc(var(--pad-horizontal) * -1); padding-inline: var(--pad-horizontal);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad-horizontal);
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  :is(.experts-format__cards, .experts-steps)::-webkit-scrollbar { display: none; }
  /* the card as wide as the row allows while the next one still shows 48 (Spacing MD + the row padding): at 80% the text was too
     big for the card */
  .experts-format__cards > .experts-card { flex: 0 0 calc(100% - var(--grid-gap) - var(--space-md)); max-width: 24rem; scroll-snap-align: start; }
  .experts-steps > .experts-step { flex: 0 0 68%; max-width: 17rem; scroll-snap-align: start; }
}

/* phone fixes, checked at 430 */
/* the heading's faces on phones: in one line with «Birch experts» they squeezed the words — here they sit in a row of
   their own over the heading, bigger (1.4 of the heading: ~63 at 430), «experts» right after «Birch» again. They still
   come in on load, growing one after another (the same transition) */
@media (max-width: 47.9375rem) {
  .experts-title { flex-wrap: wrap; row-gap: var(--space-sm); }
  .experts-faces { order: -1; flex-basis: 100%; justify-content: center; }
  .experts-faces img { --faces-size: 1.4em; top: 0; }
  .experts-title__end, .experts-title.is-pre .experts-title__end { margin-left: 0; }
}
/* a card's blog chip: 16 under the name, not the column's 8 — it read stuck to the name (every width) */
.experts-card__chip { margin-top: var(--space-xs); }
/* stories on phones: the portrait under the text, across the card at 16 : 9 — the cut-out whole, as drawn — not beside it */
@media (max-width: 47.9375rem) {
  #format-stories .experts-format__cards .experts-card--portrait { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  #format-stories .experts-format__cards .experts-card--portrait .experts-card__cover { align-self: end; aspect-ratio: 16 / 9; min-height: 0; } /* 16 : 9, not 4 : 3 — the portraits smaller */
  #format-stories .experts-format__cards .experts-card--portrait .experts-card__cover img { width: 100%; height: 100%; }
}
/* the steps' number on phones: twice the phone H1 (~90 at 430, the desktop H1's size) — at 45 it was lost in the card.
   Off the phone type scale on purpose: agreed for this number only (site/decisions/_agreed.json) */
@media (max-width: 47.9375rem) { .experts-step__num { font-size: calc(var(--text-h1-size) * 2); } }
/* the logos line on phones (squeezed at 480): more room over it than the hero's 24 — at 48 from the CTA it read stuck
   to the button — and the first screen's 48 under it as on desktop; with the section space after it, 96 to the intro */
@media (max-width: 47.9375rem) {
  .experts-logos { margin-top: var(--space-lg); }
  .experts-first { padding-bottom: var(--space-lg); }
}