/* Страница Летуаль: редакционная композиция по утверждённому референсу. */
.letoile-overview{padding-top:54px;padding-bottom:46px}
.letoile-overview>h1{margin-bottom:40px}
.letoile-overview>h1{margin-bottom:12px}
.letoile-overview .letoile-position{margin:0 0 40px;color:var(--muted);font-size:15px;line-height:1.5}
.letoile-overview .letoile-role{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding:0;margin:0;align-items:start;scroll-margin-top:125px}
.letoile-eyebrow{font-size:11px!important;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px!important;line-height:1.5!important}
.letoile-role h2{font-size:clamp(29px,3.1vw,48px);line-height:1.1;letter-spacing:-.04em;font-weight:750;margin:0 0 22px}
.letoile-role-copy>p:not(.letoile-eyebrow){font-size:15px;line-height:1.65;max-width:540px;margin:0;color:var(--muted)}
.letoile-responsibilities p{display:grid;grid-template-columns:24px minmax(0,1fr);gap:15px;padding:0 0 17px;margin:0 0 21px;border-bottom:1px solid var(--line);font-size:clamp(17px,1.65vw,25px);line-height:1.3;color:var(--ink)}
.letoile-step{font-size:10px;line-height:2.8;color:var(--lime);font-weight:700}
:root[data-theme="light"] .letoile-step{color:#627600}
.letoile-overview .letoile-results{padding:0;margin:55px 0 0;scroll-margin-top:125px}
.letoile-results-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;margin-bottom:24px}
.letoile-results-heading h2{margin:0;font-size:clamp(25px,2.6vw,39px);line-height:1.12;letter-spacing:-.035em}
.letoile-results-heading>.letoile-eyebrow{padding-top:5px}
.letoile-overview .letoile-demo-note{margin:0 0 30px;font-size:12px;line-height:1.6;color:var(--muted);max-width:850px}
.letoile-overview .letoile-demo-note{font-size:14px;color:var(--muted)}
.letoile-overview .letoile-metric-grid + .letoile-demo-note{margin:20px 0 0}
.letoile-demo-note>span{display:inline-block;font-weight:700;color:var(--ink);margin-right:8px}
.letoile-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.letoile-metric{min-width:0;border-bottom:1px solid var(--line);padding-bottom:15px}
.letoile-metric>p{margin:0 0 15px;font-size:13px;line-height:1.4;color:var(--ink)}
.letoile-metric>strong{display:block;font-weight:450;font-variant-numeric:tabular-nums;font-size:clamp(46px,6.4vw,96px);line-height:1;letter-spacing:-.055em;color:var(--ink);white-space:nowrap;margin-bottom:14px}
.letoile-metric>strong>span{font-size:.62em;letter-spacing:-.04em}
.letoile-metric>.letoile-metric-caption{font-size:11px;line-height:1.5;margin:0;color:var(--muted)}
.letoile-overview .letoile-metric-footnote{font-size:11px;line-height:1.5;color:var(--muted);margin:15px 0 0}
@media(max-width:1000px){.letoile-overview .letoile-role,.letoile-results-heading{gap:28px}.letoile-role h2{font-size:33px}.letoile-metric-grid{gap:20px}.letoile-metric>strong{font-size:clamp(45px,6.5vw,75px)}}
@media(max-width:700px){.letoile-overview{padding-top:34px;padding-bottom:30px}.letoile-overview>h1{margin-bottom:28px}.letoile-overview .letoile-role,.letoile-results-heading{grid-template-columns:minmax(0,1fr);gap:26px}.letoile-role h2{font-size:clamp(28px,6.5vw,38px)}.letoile-role h2 br{display:none}.letoile-responsibilities p{font-size:18px;padding-bottom:14px;margin-bottom:17px}.letoile-overview .letoile-results{margin-top:34px}.letoile-results-heading{gap:8px;margin-bottom:20px}.letoile-results-heading h2{font-size:29px}.letoile-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 18px}.letoile-metric>strong{font-size:62px}.letoile-overview .letoile-demo-note{margin-bottom:24px}}
@media(max-width:700px){.letoile-overview>h1{margin-bottom:12px}.letoile-overview .letoile-position{margin-bottom:28px}.letoile-metric>strong{font-size:clamp(34px,9vw,62px)}}

.letoile-metric>strong>sup{font-size:.27em;letter-spacing:0;vertical-align:super;position:relative;top:-.25em;margin-left:4px;color:var(--muted)}
.letoile-overview .letoile-metric-footnote{margin-top:20px;max-width:100%;font-size:12px;line-height:1.6;color:var(--muted)}

/* Летуаль: единая гарнитура, инструменты отдельно от этапов. */
@font-face{font-family:"Portfolio Inter";src:url("../../../../fonts/inter/Inter-variable.ttf") format("truetype");font-style:normal;font-weight:100 900;font-display:swap}
body{font-family:"Portfolio Inter",Inter,Arial,sans-serif}
.letoile-overview .letoile-tools{padding:0;margin:34px 0 0;scroll-margin-top:125px}
.letoile-tools>h2{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;margin:0 0 18px;color:var(--muted)}
.letoile-tool-groups{display:grid;grid-template-columns:1fr 1fr 1.4fr 1fr;gap:24px;border-top:1px solid var(--line);padding-top:18px}
.letoile-tool-groups h3{font-size:12px;font-weight:600;color:var(--muted);line-height:1.5;margin:0 0 8px}
.letoile-tool-groups p{font-size:14px;color:var(--ink);line-height:1.65;margin:0}
.letoile-metric>.letoile-metric-caption{font-size:13px;line-height:1.55}
.letoile-metric>p{font-size:14px}
@media(max-width:1000px){.letoile-tool-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}}
@media(max-width:480px){.letoile-tool-groups{grid-template-columns:minmax(0,1fr);gap:16px}.letoile-tool-groups h3{margin-bottom:4px}}

/* Свободный список инструментов вместо четырёх рубрик. */
.letoile-tools>h2{font-size:17px;letter-spacing:-.015em;text-transform:none;color:var(--ink);margin-bottom:16px}
.letoile-tool-groups{display:flex;flex-wrap:wrap;gap:10px;border:0;padding:0;grid-template-columns:none}
.letoile-tool-groups>div,.letoile-tool-groups p{display:contents}
.letoile-tool-groups h3{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.letoile-tool-tag{display:inline-flex;align-items:center;padding:8px 13px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-weight:450;line-height:1.4;color:var(--ink);background:transparent}
@media(max-width:480px){.letoile-tool-groups{gap:8px}.letoile-tool-tag{padding:7px 11px;font-size:13px}}

/* Инструменты: общий контур и овальные метки по новому референсу. */
.letoile-overview .letoile-tools{display:grid;grid-template-columns:minmax(180px,.75fr) minmax(0,1.6fr);gap:28px;padding:24px 26px;border:1px solid var(--line);border-radius:0;align-items:center}
.letoile-tools>h2{margin:0;font-size:clamp(20px,2vw,28px);font-weight:600;line-height:1.2;letter-spacing:-.025em;text-transform:none}
.letoile-tool-groups{gap:8px;align-items:center;justify-content:flex-start;min-width:0}
.letoile-tool-tag{padding:10px 16px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:500;line-height:1.35;background:transparent}
@media(max-width:800px){.letoile-overview .letoile-tools{grid-template-columns:minmax(0,1fr);gap:20px;padding:22px}.letoile-tools>h2{font-size:23px}}
@media(max-width:480px){.letoile-overview .letoile-tools{padding:18px;gap:16px}.letoile-tool-tag{font-size:13px;padding:9px 13px}}

/* Полный референс: две равные колонки, строки с линиями и лёгкие цифры. */
.letoile-overview .letoile-role{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,4vw,64px)}
.letoile-role h2{font-size:clamp(30px,3.1vw,46px);font-weight:700;line-height:1.08;letter-spacing:-.035em}
.letoile-responsibilities p{display:block;padding-bottom:18px;margin-bottom:22px;font-size:clamp(18px,1.8vw,27px);line-height:1.3;border-bottom:1px solid var(--line)}
.letoile-responsibilities .letoile-step{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.letoile-results-heading{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,4vw,64px);margin-bottom:34px}
.letoile-results-heading h2{font-size:clamp(27px,2.8vw,42px);font-weight:700;line-height:1.12;letter-spacing:-.03em}
.letoile-metric-grid{gap:clamp(22px,3vw,42px)}
.letoile-metric>strong{font-weight:400;font-size:clamp(52px,6.8vw,100px);letter-spacing:-.055em}
.letoile-metric{padding-bottom:14px}
@media(max-width:1000px){.letoile-metric>strong{font-size:clamp(40px,6.3vw,72px)}}
@media(max-width:700px){.letoile-overview .letoile-role,.letoile-results-heading{grid-template-columns:minmax(0,1fr);gap:24px}.letoile-results-heading{gap:8px;margin-bottom:26px}.letoile-responsibilities p{font-size:18px;padding-bottom:15px;margin-bottom:18px}.letoile-metric>strong{font-size:clamp(42px,10vw,70px)}.letoile-metric-grid{gap:26px 20px}}

/* Изолированная проба: оригинальные файлы не меняются. */
.letoile-overview{padding-top:42px;padding-bottom:32px}
.letoile-overview>h1{font-size:clamp(44px,5.8vw,74px);line-height:1.02;letter-spacing:-.05em;margin-bottom:14px}
.letoile-overview .letoile-position{font-size:14px;line-height:1.6;margin-bottom:34px}
.letoile-overview .letoile-role,.letoile-results-heading{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
.letoile-role h2{font-size:clamp(26px,2.5vw,36px);line-height:1.2;letter-spacing:-.03em;font-weight:600;margin-bottom:18px}
.letoile-role-copy>p:not(.letoile-eyebrow){font-size:15px;line-height:1.7;max-width:490px}
.letoile-eyebrow{font-size:10px!important;letter-spacing:.09em;margin-bottom:12px!important}
.letoile-responsibilities p{font-size:clamp(16px,1.45vw,21px);font-weight:400;line-height:1.5;padding-bottom:14px;margin-bottom:14px;border-color:color-mix(in srgb,var(--ink) 12%,transparent)}
.letoile-responsibilities p:last-child{margin-bottom:0}
.letoile-overview .letoile-results{margin-top:38px}
.letoile-results-heading{align-items:start;margin-bottom:24px}
.letoile-results-heading h2{font-size:clamp(23px,2.15vw,30px);font-weight:550;line-height:1.22;letter-spacing:-.025em}
.letoile-metric-grid{gap:24px}
.letoile-metric{padding-bottom:12px;border-color:color-mix(in srgb,var(--ink) 15%,transparent)}
.letoile-metric>p{min-height:40px;margin-bottom:12px;font-size:13px;line-height:1.45;color:var(--muted)}
.letoile-metric>strong{font-size:clamp(46px,5.1vw,72px);font-weight:400;line-height:1.04;letter-spacing:-.055em;margin-bottom:14px}
.letoile-metric>.letoile-metric-caption{font-size:12px;min-height:0;line-height:1.6;margin:0}
.letoile-overview .letoile-demo-note,.letoile-overview .letoile-metric-footnote{font-size:12px;line-height:1.65;margin-top:16px}
.letoile-overview .letoile-tools{display:grid;grid-template-columns:155px minmax(0,1fr);gap:24px;padding:0;margin-top:30px;border:0;align-items:start}
.letoile-tools>h2{font-size:14px;line-height:1.5;font-weight:500;letter-spacing:0;margin:5px 0 0;color:var(--muted)}
.letoile-tool-groups{gap:7px}
.letoile-tool-tag{font-size:12px;font-weight:400;padding:6px 11px;border-color:color-mix(in srgb,var(--ink) 15%,transparent);line-height:1.45;color:var(--muted)}
@media(max-width:900px){.letoile-overview .letoile-role,.letoile-results-heading{gap:28px}.letoile-metric-grid{gap:18px}.letoile-metric>strong{font-size:clamp(36px,5.4vw,56px)}}
@media(max-width:700px){.letoile-overview{padding-top:30px;padding-bottom:24px}.letoile-overview .letoile-role,.letoile-results-heading{grid-template-columns:minmax(0,1fr);gap:24px}.letoile-role h2{font-size:29px}.letoile-results-heading{gap:8px}.letoile-results-heading h2{font-size:25px}.letoile-overview .letoile-results{margin-top:32px}.letoile-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}.letoile-metric>strong{font-size:52px}.letoile-metric>p{min-height:0}.letoile-overview .letoile-tools{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:26px}}

/* Дополнительные проекты Л’Этуаль: бренд-зона, баннеры и рассылки. */
.letoile-material-section{margin-top:34px;padding-top:28px;border-top:1px solid var(--line);scroll-margin-top:140px}
.letoile-material-section .project-section-head{margin-bottom:24px}
.letoile-material-section .project-section-head>p:not(.project-label){max-width:760px;font-size:15px;line-height:1.65;color:var(--muted)}
.letoile-material-group{margin-top:28px}
.letoile-material-group h3{margin:0 0 14px;font-size:clamp(18px,2vw,23px);font-weight:600;line-height:1.25;letter-spacing:-.02em}
.letoile-material-group>p{max-width:760px;margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.6}
.letoile-material-gallery{gap:18px;align-items:start}
.letoile-material-gallery.letoile-wide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.letoile-material-gallery.letoile-category-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.letoile-material-gallery figure{display:grid;gap:8px}
.letoile-material-gallery figcaption{font-size:12px;line-height:1.45;color:var(--muted)}
@media(max-width:900px){.letoile-material-gallery.letoile-category-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){.letoile-material-section{margin-top:28px;padding-top:22px}.letoile-material-gallery.letoile-wide-grid{grid-template-columns:minmax(0,1fr)}.letoile-material-gallery.letoile-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.letoile-material-group{margin-top:24px}}

/* Бренд-зона собрана как витрина Ozon: первый экран, тематические полосы, категории. */
.letoile-ozon-preview{display:grid;gap:10px;padding:clamp(12px,2vw,22px);border:1px solid transparent;border-radius:22px;background:#f3f5f8;color:#29282d}
.letoile-ozon-preview figure{margin:0;min-width:0;overflow:hidden}
.letoile-ozon-preview img{display:block;width:100%;height:auto;cursor:pointer}
.letoile-ozon-preview-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:1px 2px 4px;color:#777681;font-size:11px;line-height:1.4}
.letoile-ozon-hero img{border-radius:10px}
.letoile-ozon-feature-row,.letoile-ozon-categories{display:grid;gap:clamp(9px,1.6vw,18px);padding:clamp(10px,1.7vw,18px);border-radius:18px;background:#fff}
.letoile-ozon-feature-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.letoile-ozon-feature-row img{aspect-ratio:1392/400;object-fit:cover;border-radius:8px}
.letoile-ozon-categories{grid-template-columns:repeat(6,minmax(0,1fr))}
.letoile-ozon-categories img{aspect-ratio:1;object-fit:cover;border-radius:10px}
.letoile-material-gallery.letoile-mobile-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.letoile-mobile-gallery img{border-radius:14px}
@media(max-width:900px){.letoile-ozon-categories{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.letoile-material-gallery.letoile-mobile-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.letoile-ozon-preview-meta{align-items:flex-start;flex-direction:column;gap:3px}}
@media(max-width:560px){.letoile-material-gallery.letoile-mobile-gallery{display:flex;overflow-x:auto;gap:12px;padding:0 0 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.letoile-mobile-gallery figure{flex:0 0 min(82vw,360px);scroll-snap-align:start}.letoile-ozon-feature-row{grid-template-columns:minmax(0,1fr)}.letoile-ozon-categories{grid-template-columns:repeat(2,minmax(0,1fr))}}
.letoile-ozon-preview figcaption{padding:6px 2px 0;color:#777681;font-size:10px;line-height:1.35}

/* Три широких баннера: каждый следующий въезжает справа. */
.letoile-banner-window{width:100%;overflow:hidden}
.letoile-banner-track{display:flex;width:100%;animation:letoile-banner-cycle 30s linear infinite}
.letoile-banner-track figure{flex:0 0 100%;min-width:0;margin:0;padding:0}
.letoile-banner-track img{display:block;width:100%;height:auto;border-radius:14px;cursor:pointer}
.letoile-banner-track figcaption{margin-top:9px;color:var(--muted);font-size:12px;line-height:1.45}
body:has(#lightbox[open]) .letoile-banner-track{animation-play-state:paused}
@keyframes letoile-banner-cycle{from{transform:translateX(0)}to{transform:translateX(-300%)}}
@media(prefers-reduced-motion:reduce){.letoile-banner-window{overflow-x:auto;scroll-snap-type:x mandatory}.letoile-banner-track{animation:none;transform:none}.letoile-banner-track figure{scroll-snap-align:start}.letoile-banner-track figure[aria-hidden=true]{display:none}}