/* Law-firm site: the sections after the hero, built from the six templates Yulia picked on 2026-10-06.
   T1 heading beside statements (Who it is for, Why this works); T2 heading on top, two columns of statements, text underneath (Outcomes);
   T9 heading on top, cards in two columns (The challenge, Questions); the closing band (Next step) is styled like the hero;
   T11 portrait, quote first (About Yulia); T12 centered card (middle button).
   Every section sits inside the page width on white. No rules; the only dots are the list markers in Who it is for and The outcomes. The hero and the credibility strip are unchanged (law.css). */

/* ---------- Typography: one style per role, the same in every section (Yulia, 2026-10-06) ----------
   Eyebrow and heading come from site.css; every section heading has an italic second line (<em>).
   Lead: the paragraph under a heading (site.css .lead, sized in law.css .lf .lead).
   Point: each main point of a section that has its own text under it (quotes, card questions, principles, stage names); quotes are the same size, in italic.
   List item: the points of Who it is for and The outcomes, each after a small purple dot, sized between a point and its text (Yulia, 2026-10-07).
   Text: every smaller paragraph, whether it sits under a single point (stage, card, principle) or after a section's points; one size everywhere, as in How it works.
   Labels (eyebrows, the How it works stage labels, the role under Yulia's name) share one style. */
.nm,.qt,.lf .lf-step-h{font-family:var(--serif);font-weight:500;color:var(--ink);font-size:26px;line-height:32px;letter-spacing:-0.01em;text-wrap:balance}
.st{position:relative;padding-left:26px;font-family:var(--serif);font-weight:500;color:var(--ink);font-size:22px;line-height:30px;letter-spacing:-0.01em;text-wrap:pretty}
.st::before{content:"";position:absolute;left:1px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.st,.qt{margin:0}
.nm,.lf .lf-step-h{margin:0 0 12px}
.qt{font-style:italic}
.qt::before{content:"\201C"}.qt::after{content:"\201D"}
/* Type scale v2 (Yulia, 2026-10-08): text under a point grew (it read like fine print), points and bullets grew one step,
   the lead came down one step. The hero keeps its own sizes (law.css). */
.sm,.lf .lf-step-t{font-size:17px;line-height:27px}
.sx .lead,.lf-how .lead{font-size:19px;line-height:30px}
.lf .lf-step-n{font-weight:500}
@media (min-width:900px){.sx .lead,.lf-how .lead{font-size:21px;line-height:33px}}
@media (min-width:1024px){
  .nm,.qt,.lf .lf-step-h{font-size:30px;line-height:36px}
  .st{font-size:26px;line-height:34px}
  .st::before{top:14px}
  .sm,.lf .lf-step-t{font-size:18px;line-height:29px}
}
@media (min-width:1500px){
  .nm,.qt,.lf .lf-step-h{font-size:33px;line-height:40px}
  .st{font-size:28px;line-height:37px}
  .st::before{top:15.5px}
  .sm,.lf .lf-step-t{font-size:19px;line-height:30px}
  .sx .lead,.lf-how .lead{font-size:22px;line-height:35px}
}

/* ---------- The coda: the closing text after a section's points (Yulia, 2026-10-08, option C, refined).
   It sits close to the points it concludes (48px) and far from the next section (128px), under a short violet mark,
   one step smaller than the lead, in ink. The mark and the text are centered on the block of points they conclude
   (The Challenge and The Results); The Alignment is the exception below.
   The source line stays small. ---------- */
.t1-after,.t2-after,.t9-after{position:relative;max-width:820px;margin:48px auto 0;padding-top:30px;text-align:center}
.t1-after::before,.t2-after::before,.t9-after::before{content:"";position:absolute;top:0;left:50%;width:56px;height:2px;margin-left:-28px;background:var(--accent)}
.t1-after p,.t2-after,.t9-after p:not(.src){font-size:17px;line-height:27px;color:var(--ink)}
.t1-after p + p,.t9-after p + p{margin-top:16px}
@media (min-width:900px){.t1-after p,.t2-after,.t9-after p:not(.src){font-size:19px;line-height:30px}}
@media (min-width:1500px){.t1-after p,.t2-after,.t9-after p:not(.src){font-size:20px;line-height:32px}}
/* The Alignment, the only coda that sits under a column of bullets rather than across the section (Yulia, 2026-10-08):
   the text is left-aligned with the bullet text (26px in from the dots), and the violet mark stays centered over the coda.
   It sits inside the points column (Yulia, 2026-10-08), so the pinned heading beside it travels to the end of the coda, not just the bullets. */
#alignment .t1-after{text-align:left;margin:48px 0 0;max-width:760px;padding-left:26px}
#alignment .t1-after::before{left:calc(50% + 13px)}
/* The space between a heading and its lead is the same everywhere, as in How it works */
.sx .hd h2 + .lead{margin-top:36px}

/* ---------- Section frame ---------- */
.sx{background:var(--white);padding-block:var(--gap)}
:where(.sx) p{margin:0}
:where(.sx) .lead{margin:0}
.sx .hd .eyebrow{margin-bottom:18px}
.sx .btn{margin-top:0}
.sx .act{margin-top:36px}
@media (min-width:1024px){.sx{padding-block:128px}.sx .act{margin-top:40px}}
/* Big screens: the sections widen with the window, like How it works */

.card{background:var(--white);border-radius:var(--r-soft);box-shadow:0 2px 24px rgba(40,35,56,.06),0 34px 64px -44px rgba(40,35,56,.38);padding:32px 28px 34px}
.img{position:relative;background:linear-gradient(140deg,#EFEDF1 0%,#E6E2F0 100%);overflow:hidden}
.img::after{content:attr(data-ph);position:absolute;right:24px;bottom:20px;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);opacity:.65}
@media (min-width:1024px){.card{padding:44px 44px 48px}}

/* The heading column beside the points (Yulia, 2026-10-08, design audit): about 38% of the width, up to 480px, so the longest
   headings (The Method, The Principles) settle into two or three lines instead of four. Shared by The Alignment, The Method and The Principles. */
:root{--hcol:clamp(330px,38%,480px)}

/* ---------- T1 Heading beside statements (the How it works split); Who it is for lists its points in one column (Yulia, 2026-10-07) ---------- */
.t1{display:grid;gap:40px}
.t1-st{display:grid;gap:20px;max-width:760px}
.t1-one{display:grid;gap:36px;max-width:680px}
@media (min-width:1024px){
  .t1{grid-template-columns:minmax(0,var(--hcol)) minmax(0,1fr);gap:64px;align-items:start}
  .t1 .hd{position:sticky;top:48px}
  .t1-st{gap:24px}
  .t1-one{gap:48px}
}

/* T1 side by side (Yulia, 2026-10-08): the points start level with the headline, not the eyebrow. The first point's capital letters
   line up with the headline's first line. The offset is the eyebrow (line plus its space) plus the gap between the top of each line
   and its capital letters (Cormorant Garamond: capitals start 0.315 of the type size above the line's middle). */
@media (min-width:1024px){
  .t1{--h2fs:clamp(42px,4.2vw,56px);--eb:37px;--h2cap:calc(var(--eb) + 0.235 * var(--h2fs))}
  .t1 .t1-st{margin-top:calc(var(--h2cap) - 17px + 0.315 * 26px)}
  .t1 > .t1-one{margin-top:calc(var(--h2cap) - 18px + 0.315 * 30px)}
}
@media (min-width:1500px){
  .t1 .t1-st{margin-top:calc(var(--h2cap) - 18.5px + 0.315 * 28px)}
  .t1 > .t1-one{margin-top:calc(var(--h2cap) - 20px + 0.315 * 33px)}
}

/* ---------- T2 Heading on top, two columns of statements, text underneath ---------- */
.t2 .hd{margin-bottom:40px;max-width:900px}
.t2-st{display:grid;gap:20px}
@media (min-width:600px){.t2-st{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 48px}}
@media (min-width:1024px){.t2 .hd{margin-bottom:72px}.t2-st{gap:28px 96px}}

/* ---------- T9 Heading on top, cards in two columns ---------- */
.t9 .hd{margin-bottom:40px;max-width:900px}
.t9-grid{display:grid;gap:20px}
.t9-q .card{display:flex;align-items:center;justify-content:center;text-align:center;padding:32px 28px;min-height:120px}
@media (min-width:700px){
  .t9-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .t9-grid .wide{grid-column:1 / -1}
}
@media (min-width:1024px){
  .t9 .hd{margin-bottom:64px}
  .t9-grid{gap:32px}
  .t9-q .card{padding:40px 56px;min-height:136px}
}

/* ---------- The Answers: on phones each card shows only its question, and a tap opens the answer (Yulia, 2026-10-08, design audit).
   On wider screens every answer stays open and the question is plain text. Without JavaScript every answer stays open. ---------- */
.faq-q{all:unset;display:block;width:100%;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;text-wrap:inherit;cursor:default}
.faq-i{display:none}
.faq-fold .t9-faq{gap:12px}
.faq-fold .t9-faq .card{padding:0}
.faq-fold .faq-q{position:relative;width:100%;box-sizing:border-box;cursor:pointer;padding:22px 56px 22px 22px;border-radius:var(--r-soft)}
.faq-fold .faq-q:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.faq-fold .t9-faq .nm{margin:0}
.faq-fold .faq-i{display:block;position:absolute;right:22px;top:50%;width:16px;height:16px;margin-top:-8px}
.faq-fold .faq-i::before,.faq-fold .faq-i::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;border-radius:1px;background:var(--accent);transition:transform .3s ease}
.faq-fold .faq-i::after{transform:rotate(90deg)}
.faq-fold .faq-q[aria-expanded="true"] .faq-i::after{transform:rotate(0deg)}
.faq-fold .t9-faq .sm{padding:0 22px 24px}
.faq-fold .faq-q[aria-expanded="false"] + .sm,.faq-fold .t9-faq .nm:has(.faq-q[aria-expanded="false"]) + .sm{display:none}

/* ---------- The Method's call to action (Yulia, 2026-10-08): the invitation that used to sit in its own centered card now fills the
   space under the lead in the heading column, beside the stages, and travels with the pinned heading. Below 1200px, where the heading
   sits above the stages, it comes after the stages instead. ---------- */
.lf-how-cta p{margin:0;font-size:17px;line-height:27px;color:var(--ink)}
.lf-how-cta .actions{margin-top:20px}
.lf-how-cta .btn{margin-top:0}
.lf-how-cta-side{display:none}
.lf-how-cta-after{max-width:640px}
@media (min-width:900px){.lf-how-cta p{font-size:19px;line-height:30px}}
@media (min-width:1200px){
  .lf-how-cta-side{display:block}
  .lf-how-cta-after{display:none}
  .lf-stack > .lf-how-cta{margin-top:112px}
}
@media (min-width:1500px){.lf-how-cta p{font-size:20px;line-height:32px}}

/* ---------- Closing band (Yulia, 2026-10-08): styled like the hero, replacing the T10 card.
   Laptops and up: the picture runs the full width of the screen behind the section, with the hero's light wash from the left,
   and the text sits on the left over the open wall. Below 1024px, as in the hero: the picture edge to edge on top, the text beneath it.
   The text column lines up with the sections above it. ---------- */
.lf-close{position:relative;overflow:hidden;background:var(--white)}
.lf-close-pic{position:relative;overflow:hidden;aspect-ratio:3/2}
.lf-close-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 55%}
/* The picture's top edge fades in from the color of The Answers above (Yulia, 2026-10-08), so it no longer starts with a hard cut.
   The Answers is white since 2026-10-19 (The Testimonials shifted the alternation), so the fade starts from white. */
.lf-close-pic .lf-close-fade{position:absolute;inset:0 0 auto 0;height:72px;z-index:1;background:linear-gradient(180deg,var(--white) 0%,transparent 100%);pointer-events:none}
@media (min-width:1024px){.lf-close-pic .lf-close-fade{height:180px}}
.lf-close-in{position:relative;z-index:1;padding-block:40px 64px}
.lf-close-copy .eyebrow{margin-bottom:18px}
.lf-close-copy h2 + .lead{margin-top:36px}
.lf-close-copy .lead{font-size:19px;line-height:30px;margin:0}
.lf-close-copy .act{margin-top:36px}
.lf-close-note{margin:20px 0 0}
@media (min-width:600px){.lf-close-pic{aspect-ratio:16/9}}
@media (min-width:900px){.lf-close-copy .lead{font-size:21px;line-height:33px}}
@media (min-width:1024px){
  .lf-close{display:flex;align-items:center;min-height:clamp(600px,82vh,900px)}
  .lf-close-pic{position:absolute;inset:0;aspect-ratio:auto}
  .lf-close-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,248,250,.95) 0%,rgba(247,248,250,.86) 36%,rgba(247,248,250,0) 62%)}
  /* Anchored to the right edge (Yulia, 2026-10-08): when the band is taller than the picture's shape, the crop comes off the empty wall
     on the left, never off the table and chairs on the right */
  .lf-close-pic img{object-position:100% 55%}
  .lf-close-in{width:100%;padding-block:128px}
  .lf-close-copy{max-width:min(540px,46vw)}
  .lf-close-copy .act{margin-top:40px}
}
@media (min-width:1500px){
  .lf-close-copy{max-width:min(600px,40vw)}
  .lf-close-copy .lead{font-size:22px;line-height:35px}
}
/* Narrow laptops: with the picture anchored right, the table reaches under the text, so the light wash reaches further */
@media (min-width:1024px) and (max-width:1279px){
  .lf-close-pic::after{background:linear-gradient(90deg,rgba(247,248,250,.95) 0%,rgba(247,248,250,.88) 48%,rgba(247,248,250,0) 72%)}
}
/* The picture settles slowly as the section arrives, like the hero */
.lf-motion .lf-close-pic[data-reveal] img{transform:scale(1.07);transition:transform 9s var(--ease-cine)}
.lf-motion .lf-close-pic[data-reveal].is-in img{transform:scale(1)}

/* ---------- T11 Portrait, quote first, then the story (Yulia, 2026-10-08, balance pass) ----------
   The quote opens the section in place of a heading, so it takes the heading's size, in italic.
   The name and title sit under the portrait as its caption, so the picture column grows and the text column shrinks.
   On laptops the gap between the columns is 64px (was 96px), so the text gets more room while the portrait keeps its width,
   and the portrait is cropped taller (3:5 on laptops, 4:5 on large monitors) so it nearly matches the height of the text beside it. */
.t11{display:grid;gap:40px}
.t11-img img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;border-radius:var(--r-soft);box-shadow:0 34px 64px -46px rgba(40,35,56,.5)}
.t11 .qt{font-size:36px;line-height:40px;letter-spacing:-0.02em}
.t11-who{margin-top:24px}
/* Below 1024px the story reads: portrait, label, quote, story, name and title, button (Yulia, 2026-10-08); on laptops the name sits under the portrait */
.t11-who-pic{display:none}
.t11 .lead + .t11-who-text{margin-top:32px}
.t11-who-text + .act{margin-top:32px}
@media (min-width:1024px){.t11-who-pic{display:block}.t11-who-text{display:none}}
.t11-who .cite-name{display:block;font-family:var(--serif);font-weight:500;font-size:22px;line-height:28px;color:var(--ink)}
.t11-who .cite-name::before{content:none}
.t11-who .cite-role{display:block;margin-top:8px;font-size:13px;line-height:19px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.t11 .lead{margin-top:36px}
.t11 .lead + .lead{margin-top:20px}
.t11 .lead + .act{margin-top:40px}
@media (min-width:600px) and (max-width:1023px){.t11-img{max-width:480px}}
@media (min-width:900px){.t11 .qt{font-size:clamp(42px,4.2vw,56px);line-height:1.1}}
/* Laptops (Yulia, 2026-10-08): a narrower portrait column and a wider text column, the portrait cropped slimmer (3:5, a little off the shoulders),
   so the portrait with its caption and the text beside it are nearly the same height (within about 60px at 1440px) */
/* The label: on laptops it sits at the top of the section, above the portrait, where every other section starts its label
   (Yulia, 2026-10-08); the quote then starts level with the top of the portrait. Below 1024px it stays between the portrait and the quote. */
.t11-eb-pic{display:none}
@media (min-width:1024px){
  .t11-eb-pic{display:block}
  .t11-eb-text{display:none}
  .t11 > div:last-child{margin-top:35px}
}
@media (min-width:1024px){
  .t11{grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);gap:64px;align-items:start}
  .t11-img img{aspect-ratio:3/5;object-position:50% 20%}
}
/* From 1280px (Yulia, 2026-10-12): the portrait gets more width and the text a little less (5:7), keeping the slim 3:5 crop,
   so the portrait with its caption and the text end within about 70px of each other on every screen up to the 1200px page width */
@media (min-width:1280px){
  .t11{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
}

/* ---------- T12 Centered card ---------- */
.t12{max-width:880px;margin:0 auto;text-align:center;padding:40px 28px 44px}
.t12 .lead{max-width:640px;margin-inline:auto}
.t12 .actions{justify-content:center}
@media (min-width:1024px){.t12{padding:72px 80px 80px}.t12 .act{margin-top:36px}}

/* ---------- Pictures between sections (Yulia, 2026-10-06): inside the page width, rounded, with the How it works shadow and slow zoom ---------- */
.sx-pic{background:var(--white)}
.pic-band{margin:0;position:relative;overflow:hidden;aspect-ratio:3/2;border-radius:var(--r-soft);background:var(--tint);box-shadow:0 34px 64px -46px rgba(40,35,56,.5)}
.pic-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (min-width:600px){.pic-band{aspect-ratio:2/1}}
@media (min-width:1024px){.pic-band{aspect-ratio:2000/672}}
.lf-motion .pic-band[data-reveal] img{transform:scale(1.08);transition:transform 7s cubic-bezier(.2,.6,.2,1)}
.lf-motion .pic-band[data-reveal].is-in img{transform:scale(1)}

/* Phones: the two button cards keep the button on one line */
@media (max-width:599px){
  .t12{padding:36px 18px 40px}
  .t12 .btn{padding-inline:22px}
}

/* Phones (2026-10-08, button renamed "Schedule Your Firm Capacity Conversation"): the label scales with the screen so it stays
   on one line in the open sections; inside the two cards it may break into two balanced, centered lines on narrow phones */
@media (max-width:599px){
  .lf .btn{font-size:clamp(13px,3.6vw,16px);padding-inline:16px;text-align:center;text-wrap:balance}
}

/* About: the eyebrow "The Founder" sits above the opening quote (2026-10-08, eyebrow set) */
.t11 .eyebrow{margin:0 0 18px}

/* No booking button in the header (Yulia, 2026-10-08): the header shows only over the hero, which has its own button. The menu holds only the section links; on tablets and phones the menu icon sits at the right edge */
.lf-header .menu-btn{margin-left:auto}

/* ---------- Section separation (Yulia, 2026-10-08, version B) ----------
   Each picture sits inside the section it illustrates, at its top, so picture and words read as one unit.
   Sections alternate white and pearl gray, so every section edge shows without lines. The first screen is unchanged. */
:root{--alt:#F2F3F6}
/* Since 2026-10-08 (Yulia): the alternation starts with gray. Since 2026-10-19, with The Testimonials added between The Principles and
   The Founder: The Alignment, The Results, The Principles and The Founder are gray; The Challenge, The Method, The Testimonials and The Answers are white. */
#alignment,#results,#principles,#founder{background:var(--alt)}
.sx > .sx-pic{background:transparent;padding-bottom:40px}
@media (min-width:1024px){.sx > .sx-pic{padding-bottom:72px}}

/* ---------- The Method: the Sample Deal invitation under the lead (Yulia, 2026-10-11) ----------
   It replaces the Schedule invitation and button. Like the invitation it replaced, it sits beside the stages in the pinned heading column
   from 1200px, and after the 4 stages below 1200px, where the stages stack (Yulia, 2026-10-11).
   The question is set like the stage names, the sentence like the invitation it replaced, and the button is the bright primary button. */
.lf-how-cta .lf-sample-q{font-family:var(--serif);font-weight:500;color:var(--ink);font-size:24px;line-height:30px;letter-spacing:-0.01em;text-wrap:balance}
.lf-how-cta .lf-sample-t{margin-top:12px}
@media (min-width:1024px){.lf-how-cta .lf-sample-q{font-size:28px;line-height:34px}}
@media (min-width:1500px){.lf-how-cta .lf-sample-q{font-size:32px;line-height:38px}}

/* Page width (Yulia, 2026-10-12): every section stays inside the same 1200px page width as the Sample Deal on every screen; nothing widens past it.
   List items fill their column instead of breaking early (pretty still keeps a lone word off the last line); phones keep balanced lines. */
@media (min-width:600px){.lf .st{text-wrap:pretty}}

/* ---------- The Testimonials (Yulia, 2026-10-19): a deck of cards ----------
   One testimonial sits in front and two cards peek out behind it on both sides. A new card deals in every 8 seconds once the section
   is on screen; it pauses while a visitor hovers or uses the controls, and stays still for visitors who ask for reduced motion.
   Without JavaScript the cards are listed one under another. Every card has the same anatomy: the large quote (one of the person's own
   sentences), their words under it, then the name and role, with no violet mark (Yulia, 2026-10-19). The deck takes the height of its tallest card. */
.tm{overflow-x:clip}
.tm .hd{margin:0 auto 40px;max-width:900px;text-align:center}
.tm-stage{display:grid;gap:20px;position:relative}
.tm-card{margin:0;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;background:var(--white);border-radius:var(--r-soft);box-shadow:0 2px 24px rgba(40,35,56,.07),0 40px 72px -40px rgba(40,35,56,.42);padding:36px 26px 38px}
.tm-card blockquote{margin:0}
.tm-card .qt{text-wrap:pretty}
.tm-card .sm{margin-top:18px}
.tm-card .sm + .sm{margin-top:14px}
.tm-who{margin-top:24px}
.tm-who .cite-name{display:block;font-family:var(--serif);font-weight:500;font-size:22px;line-height:28px;color:var(--ink)}
.tm-who .cite-name::before{content:none}
.tm-who .cite-role{display:block;margin-top:8px;font-size:13px;line-height:19px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-wrap:balance}
.tm-layer,.tm-nav,.tm-arw{display:none}
.tm-arw{width:48px;height:48px;border-radius:50%;border:0;padding:0;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;color:var(--accent);background:radial-gradient(120% 140% at 50% 0%,#FFFFFF 0%,#F6F5FB 50%,#E6E2F3 100%);box-shadow:0 10px 22px -12px rgba(64,34,165,.45);transition:transform .2s ease,box-shadow .2s ease}
.tm-arw:hover{transform:translateY(-1px);box-shadow:0 14px 28px -12px rgba(64,34,165,.55)}
.tm-arw:focus-visible,.tm-dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tm-play{width:44px;height:44px}
.tm-i-play{display:none}
.tm-deck.is-paused .tm-i-play{display:block}
.tm-deck.is-paused .tm-i-pause{display:none}
.tm-dots{display:flex;align-items:center}
.tm-dot{width:26px;height:44px;border:0;background:none;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.tm-dot span{display:block;width:8px;height:8px;border-radius:999px;background:var(--silver);transition:width .4s var(--ease-cine),background-color .4s ease}
.tm-dot[aria-current="true"] span{width:22px;background:var(--accent)}
/* The deck (with JavaScript): every card sits in the same place, and only the front one shows */
.tm-js .tm-stage{gap:0;max-width:calc(100% - 40px);margin-inline:auto;touch-action:pan-y}
/* The cards slide sideways (Yulia, 2026-10-19): going forward, the new card glides in from the right while the old one slides out to the left;
   going back, the reverse. Straight across, with no rise or turn. */
.tm-js .tm-card{grid-area:1 / 1;visibility:hidden;opacity:0}
.tm-js .tm-card.is-on{z-index:2;visibility:visible;opacity:1;animation:tm-in-r .9s var(--ease-cine) both}
.tm-js .tm-card.is-out{visibility:visible;animation:tm-out-l .7s var(--ease-cine) both}
.tm-js .tm-deck.is-back .tm-card.is-on{animation-name:tm-in-l}
.tm-js .tm-deck.is-back .tm-card.is-out{animation-name:tm-out-r}
@keyframes tm-in-r{from{opacity:0;transform:translateX(96px)}to{opacity:1;transform:none}}
@keyframes tm-in-l{from{opacity:0;transform:translateX(-96px)}to{opacity:1;transform:none}}
@keyframes tm-out-l{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-96px)}}
@keyframes tm-out-r{from{opacity:1;transform:none}to{opacity:0;transform:translateX(96px)}}
.tm-js .tm-layer{display:block;position:absolute;z-index:0;border-radius:var(--r-soft);box-shadow:0 2px 24px rgba(40,35,56,.06),0 34px 64px -44px rgba(40,35,56,.38)}
.tm-js .tm-l1{left:-10px;right:-10px;top:24px;bottom:24px;background:#F7F6FA}
.tm-js .tm-l2{left:-20px;right:-20px;top:48px;bottom:48px;background:var(--tint)}
.tm-js .tm-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:32px}
.tm-js .tm-nav .tm-arw{display:inline-flex}
@media (prefers-reduced-motion:reduce){.tm-js .tm-card,.tm-js .tm-card.is-on{animation:none}.tm-js .tm-card.is-out{animation:none;visibility:hidden}}
@media (min-width:700px){
  .tm-card{padding:56px 56px 60px;text-align:center}
  .tm-card .sm{max-width:680px;margin-inline:auto}
  .tm-js .tm-stage{max-width:calc(100% - 120px)}
  .tm-js .tm-l1{left:-30px;right:-30px;top:36px;bottom:36px}
  .tm-js .tm-l2{left:-60px;right:-60px;top:72px;bottom:72px}
}
@media (min-width:1024px){
  .tm .hd{margin-bottom:64px}
  .tm-card{padding:64px 72px 68px}
  .tm-card .sm{margin-top:24px}
  .tm-who{margin-top:32px}
  .tm-js .tm-stage{max-width:min(880px,calc(100% - 160px))}
  .tm-js .tm-l1{left:-40px;right:-40px;top:40px;bottom:40px}
  .tm-js .tm-l2{left:-80px;right:-80px;top:80px;bottom:80px}
  .tm-js .tm-nav{margin-top:40px}
}
/* From 1280px the arrows move to the sides of the deck, as in the approved design */
@media (min-width:1280px){
  .tm-js .tm-stage{max-width:min(880px,calc(100% - 300px))}
  .tm-js .tm-side{display:inline-flex;position:absolute;z-index:3;top:50%;width:52px;height:52px;margin-top:-26px}
  .tm-js .tm-side.tm-prev{left:-150px}
  .tm-js .tm-side.tm-next{right:-150px}
  .tm-js .tm-nav .tm-low{display:none}
}