/* Вариант C по мотивам madamepolare.com: большой wordmark, светло-серый фон, направления — стопкой папок на всю ширину.
   Папка липнет под шапкой со сдвигом на высоту корешка, следующая наезжает сверху. Группы по 3 (как у референса):
   sticky работает внутри .fgroup, после группы стопка уезжает целиком. */
/* заголовок секции слева, крупно */
.sec-left{text-align:left;max-width:none;margin:0 0 40px}
.sec-left h2{font-size:clamp(40px,4.4vw,64px);font-weight:600;letter-spacing:-.03em;margin:6px 0 14px}
.sec-left p{max-width:720px}
.eyebrow{font-size:13px;color:var(--mute)}
.v-c #expertise{padding-bottom:0}
.v-c #expertise .extra{margin:40px 0 104px}

.folders{--nav:85px;--tab:90px;--gap:12px;--h:440px;margin:0 calc(50% - 50vw)}
.fgroup{position:relative}
.fold-anchor{height:0;scroll-margin-top:calc(var(--nav) + var(--gap) + var(--i) * var(--tab))}
.fold{position:sticky;top:calc(var(--nav) + var(--gap) + var(--i) * var(--tab));z-index:calc(var(--i) + 1);
  background:var(--bg);color:var(--fg);min-height:var(--h);
  display:grid;grid-template-columns:1.5fr 1fr 1.5fr;grid-template-rows:auto 1fr;gap:24px;padding:24px;box-sizing:border-box}
/* стопка выключается: папка не помещается на экран (folders.js), фокус с клавиатуры внутри листа, reduced motion */
.fgroup.is-static>.fold,.fgroup:has(.fold :focus-visible)>.fold{position:relative;top:auto;z-index:auto}

/* строка корешка: название со стрелкой на две колонки (в корешок попадает одной строкой), ниже слоган и список */
.ftitle{grid-column:1/3;grid-row:1;color:inherit;display:flex;align-items:center;gap:20px;min-width:0;width:fit-content;max-width:100%}
.ftitle h3{font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:clamp(32px,3.3vw,48px);line-height:1;letter-spacing:-.025em;margin:0;overflow-wrap:anywhere}
.ftitle:hover h3{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.ftitle:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.go{flex:none;width:42px;height:42px;border-radius:50%;background:var(--fg);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:18px;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.ftitle:hover .go{transform:rotate(-45deg)}
.tag{grid-column:1;grid-row:2;align-self:end;font-size:20px;line-height:1.4;max-width:80%}
.flist{grid-column:2;grid-row:2;align-self:end;list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px;line-height:1.4}

/* колонка 3: медиа на всю высоту папки */
.fmedia{grid-column:3;grid-row:1/3;border-radius:5px;overflow:hidden;min-width:0;min-height:0;background:#fff;position:relative}
.fmedia>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.fm-phone{background:rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center}
.fm-phone .phone{position:absolute;top:4%;bottom:4%;left:50%;transform:translateX(-50%);aspect-ratio:390/844;background:#1b1c21;border-radius:30px;padding:7px;box-sizing:border-box}
.fm-phone .phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:23px}
.fm-type{position:static;background:transparent;border:1px solid currentColor;padding:22px;display:flex;flex-direction:column;gap:12px}
.fm-type .k{font-size:13px;opacity:.75}
.fm-type .ch{display:flex;flex-wrap:wrap;gap:8px}
.fm-type .ch span{border:1px solid currentColor;border-radius:10rem;padding:5px 12px;font-size:13px}
.fm-type .sync{margin-top:auto;display:flex;align-items:center;gap:16px;font-weight:700;font-size:34px;letter-spacing:-.02em}
.fm-type .sync span{color:var(--mp-yellow)}
.fm-spec table{width:100%;border-collapse:collapse}
.fm-spec th,.fm-spec td{padding:12px 0;border-bottom:1px solid currentColor;font-size:16px;text-align:left;font-weight:500}
.fm-spec td{text-align:right;font-family:var(--mono);font-size:14px}

/* цвета папок — палитра референса */
.c-white{--bg:var(--mp-white);--fg:var(--ink)}
.c-pink{--bg:var(--mp-pink);--fg:var(--ink)}
.c-coral{--bg:var(--mp-coral);--fg:var(--ink)}
.c-dark{--bg:var(--mp-dark);--fg:#fff}
.c-mint{--bg:var(--mp-mint);--fg:var(--ink)}
.c-yellow{--bg:var(--mp-yellow);--fg:var(--ink)}
.c-blue{--bg:var(--mp-blue);--fg:var(--ink)}

/* планшет: две колонки, медиа справа во всю высоту */
@media(max-width:1100px){
  .fold{grid-template-columns:1.2fr 1fr;grid-template-rows:auto 1fr auto}
  .ftitle{grid-column:1}
  .tag{grid-column:1;grid-row:2;max-width:none;font-size:18px}
  .flist{grid-column:1;grid-row:3}
  .fmedia{grid-column:2;grid-row:1/4}
}
/* телефон: медиа скрыта, корешок ниже */
@media(max-width:760px){
  .folders{--tab:64px;--gap:8px;--h:auto}
  .fold{grid-template-columns:1fr;grid-template-rows:none;padding:16px 16px 22px;gap:14px;min-height:min(380px,calc(100svh - var(--nav) - var(--gap) - 2 * var(--tab)))}
  .fmedia{display:none}
  .ftitle{grid-column:1;justify-content:space-between;width:100%;gap:12px}
  .ftitle h3{font-size:clamp(22px,6.6vw,30px);line-height:1.05}
  .go{width:36px;height:36px}
  .tag{grid-column:1;grid-row:auto;font-size:16px;align-self:start}
  .flist{grid-column:1;grid-row:auto;font-size:14px}
  .wordmark{padding:8px 16px 0}
}
@media(max-width:560px){.folders{--nav:69px}}
@media(prefers-reduced-motion:reduce){.go{transition:none}.ftitle:hover .go{transform:none}.fold{position:relative;top:auto;z-index:auto}}
.fm-type .fm-more{margin-top:auto;font-weight:600;font-size:16px;text-decoration:underline;text-underline-offset:4px;color:inherit;width:fit-content}
.fm-type .fm-more:focus-visible{outline:2px solid currentColor;outline-offset:3px}