/* Chapters: sideways "year by year" story + typographic bands. No element shadows (project rule). */
.years-chapter{--cw0:clamp(150px,17vw,290px);position:relative;height:calc(100svh + (var(--panels,7) - 1)*86svh);margin:0;color:var(--ink);}
.years-pin{position:sticky;top:0;height:100svh;min-height:560px;overflow:clip;isolation:isolate;}
.years-head{position:absolute;z-index:6;top:104px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:center;font-size:14px;letter-spacing:.01em;}
.years-kicker{color:var(--ink);}
.years-counter{color:var(--muted);font-variant-numeric:tabular-nums;}
.years-counter b{color:var(--ink);font-weight:inherit;}
.years-stage{position:absolute;inset:0;overflow:clip;z-index:1;}
.years-track{position:absolute;inset:0;display:flex;width:calc(var(--panels,7)*100%);will-change:transform;}
.year-panel{position:relative;flex:0 0 calc(100% / var(--panels,7));height:100%;}
/* typed year */
.years-digits{position:absolute;left:50%;top:37%;z-index:0;display:flex;align-items:center;transform:translate(-50%,-50%);font-size:min(31vw,60svh);line-height:.8;letter-spacing:-.075em;color:var(--ink);pointer-events:none;opacity:0;font-variant-numeric:tabular-nums;white-space:nowrap;}
.yd{display:inline-grid;overflow:hidden;padding:.07em .012em .02em;min-width:.1em;}
.yd-in{grid-area:1/1;display:block;}
.years-caret{align-self:center;width:.016em;height:.66em;margin-left:.045em;background:var(--ink);opacity:0;}
.years-digits.is-typing .years-caret{animation:years-caret 1.1s steps(1) 3;}
@keyframes years-caret{0%,100%{opacity:1}50%{opacity:0}}
/* panels */
.year-panel>*{position:relative;z-index:2;}
.year-fan{position:absolute;left:50%;top:63%;width:0;height:0;--cw:calc(var(--cw0)*var(--scale,1));}
.year-card{position:absolute;left:0;top:0;display:block;width:var(--cw);height:calc(var(--cw)*1.3);margin:calc(var(--cw)*-.65) 0 0 calc(var(--cw)/-2);transform-origin:50% 165%;border-radius:10px;overflow:hidden;background:var(--card-bg,#ebeef4);outline:1px solid color-mix(in srgb,var(--ink) 9%,transparent);outline-offset:-1px;will-change:transform;-webkit-user-drag:none;}
.year-card img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.year-card-meta{position:absolute;left:10px;right:10px;bottom:10px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 12px;border-radius:7px;background:color-mix(in srgb,var(--raised,#fff) 80%,transparent);color:var(--ink);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);font-size:13px;line-height:1.2;opacity:0;transform:translateY(8px);transition:opacity 260ms var(--ease),transform 360ms var(--ease);}
.year-card-meta b{font-weight:inherit;}
.year-card-meta i{font-style:normal;color:var(--muted);font-size:12px;white-space:nowrap;}
.year-card[data-hover] .year-card-meta,.year-card:focus-visible .year-card-meta,.year-card:hover .year-card-meta{opacity:1;transform:none;}
.year-card-meta{z-index:3;}
/* Hover is resolved in chapters.js against resting geometry, so cards are visual only while the fan is live. */
.years-chapter:not(.is-static) .year-card{pointer-events:none;}
.years-chapter[data-pick]{cursor:pointer;}
.years-chapter:not(.is-static) .year-card::before,.years-chapter:not(.is-static) .year-card::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;}
.years-chapter:not(.is-static) .year-card::before{background:radial-gradient(circle at var(--mx,50%) var(--my,28%),rgba(255,255,255,.55),rgba(255,255,255,0) 58%);mix-blend-mode:soft-light;opacity:var(--lit,0);}
.years-chapter:not(.is-static) .year-card::after{background:var(--paper);opacity:calc(var(--dim,0)*.5);}
.year-names .yn{transition:opacity 320ms var(--ease);}
.year-names a.yn{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0 1px;background-position:0 94%;transition:opacity 320ms var(--ease),background-size 520ms var(--ease);}
.year-names a.yn[data-on]{background-size:100% 1px;}
.year-panel[data-hovering] .year-names .yn:not([data-on]){opacity:.34;}
.year-card:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.year-info{position:absolute;left:var(--gutter);bottom:88px;max-width:min(29vw,430px);transform:translate3d(calc(var(--d,0)*-11vw),0,0);}
.year-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
.year-count{font-size:14px;color:var(--muted);margin:0 0 10px;}
.year-count b{color:var(--ink);font-weight:inherit;font-variant-numeric:tabular-nums;margin-right:4px;}
.year-names{margin:0;font-size:clamp(16px,1.35vw,22px);line-height:1.34;letter-spacing:-.02em;color:var(--ink);}
.year-names span{color:var(--muted);margin:0 .5em;font-size:.8em;}
/* intro / outro */
.year-intro,.year-outro{display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter);}
.years-title{margin:0;font-weight:inherit;font-size:clamp(70px,15.5vw,270px);line-height:.88;letter-spacing:-.075em;transform:translate3d(calc(var(--d,0)*0px),0,0);}
.ym{display:block;overflow:clip;padding:.04em .04em .06em 0;margin-bottom:-.06em;}
.ym>span{display:block;transform:translateY(105%);transition:transform 1100ms var(--ease);}
.ym:nth-child(2)>span{transition-delay:110ms;}
.year-panel[data-active] .ym>span{transform:none;}
.years-lede{margin:clamp(22px,3vw,44px) 0 0;max-width:420px;font-size:clamp(16px,1.4vw,22px);line-height:1.42;color:var(--muted);}
.years-arrow{position:absolute;right:var(--gutter);bottom:96px;width:clamp(60px,8vw,120px);color:var(--ink);animation:years-nudge 2.2s var(--ease) infinite;}
.years-arrow svg{display:block;width:100%;fill:none;stroke:currentColor;stroke-width:1.5;}
@keyframes years-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(14px)}}
.years-more{display:inline-flex;align-items:center;gap:18px;align-self:flex-start;margin-top:clamp(22px,3vw,44px);padding:0 0 10px;border-bottom:2px solid var(--ink);font-size:clamp(20px,2.4vw,38px);letter-spacing:-.03em;color:var(--ink);}
.years-more svg{width:.9em;height:.9em;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform 400ms var(--ease);}
.years-more:hover svg{transform:translate(4px,-4px);}
/* ticks */
.years-ticks{position:absolute;z-index:6;left:0;right:0;bottom:22px;display:flex;justify-content:center;gap:clamp(10px,2.4vw,40px);}
.years-tick{display:grid;gap:7px;justify-items:start;min-width:44px;min-height:44px;padding:8px 2px;background:none;border:0;font:inherit;font-size:13px;color:var(--muted);cursor:pointer;transition:color 240ms;}
.years-tick i{display:block;height:2px;width:14px;background:currentColor;opacity:.5;transition:width 420ms var(--ease),opacity 240ms,background 240ms;}
.years-tick:hover{color:var(--ink);}
.years-tick[aria-current]{color:var(--ink);}
.years-tick[aria-current] i{width:100%;opacity:1;background:var(--ink);}
.years-bar{position:absolute;z-index:6;left:0;right:0;bottom:0;height:2px;background:color-mix(in srgb,var(--ink) 8%,transparent);}
.years-bar i{display:block;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(0);}
/* static (reduced motion) */
.years-chapter.is-static{height:auto;padding:clamp(80px,12vw,160px) 0;}
.years-chapter.is-static .years-pin{position:relative;height:auto;min-height:0;overflow:visible;}
.years-chapter.is-static .years-ticks,.years-chapter.is-static .years-bar,.years-chapter.is-static .years-counter{display:none;}
.years-chapter.is-static .years-head{position:static;margin:0 var(--gutter) 30px;}
.years-chapter.is-static .years-stage{position:relative;overflow:visible;}
.years-chapter.is-static .years-track{position:relative;display:block;width:auto;}
.years-chapter.is-static .year-panel{height:auto;padding:30px var(--gutter);border-top:1px solid var(--line);}
.years-chapter.is-static .year-intro,.years-chapter.is-static .year-outro{display:block;padding-top:40px;padding-bottom:40px;}
.years-chapter.is-static .ym>span{transform:none;transition:none;}
.years-chapter.is-static .years-arrow{display:none;}
.years-chapter.is-static .year-fan{position:static;display:flex;flex-wrap:wrap;gap:14px;width:auto;height:auto;}
.years-chapter.is-static .year-card{position:relative;margin:0;transform:none!important;opacity:1!important;width:min(44vw,240px);height:calc(min(44vw,240px)*1.3);}
.years-chapter.is-static .year-card-meta{opacity:1;transform:none;}
.years-chapter.is-static .year-info{position:static;max-width:none;margin-top:20px;transform:none;}
.years-chapter.is-static .year-label{position:static;width:auto;height:auto;clip:auto;overflow:visible;margin:0 0 6px;font-weight:inherit;font-size:clamp(48px,10vw,120px);letter-spacing:-.07em;line-height:.9;}
/* typographic bands */
.type-band{position:relative;overflow:clip;padding:clamp(18px,2.6vw,42px) 0;border-block:1px solid var(--line);margin:clamp(40px,7vw,110px) 0;}
.type-band-track{display:flex;width:max-content;will-change:transform;}
.type-band-set{display:flex;align-items:center;flex:none;}
.type-band-word{font-size:clamp(76px,15vw,260px);line-height:1;letter-spacing:-.07em;white-space:nowrap;padding:0 .02em .06em;color:var(--ink);}
.type-band-word.is-outline{color:color-mix(in srgb,var(--ink) 16%,transparent);-webkit-text-stroke:0;}
.type-band-dot{font-size:clamp(40px,8vw,150px);margin:0 .35em;color:var(--muted);font-weight:200;line-height:1;}
@media(max-width:700px){
 .years-chapter{--cw0:clamp(120px,40vw,210px);height:calc(100svh + (var(--panels,7) - 1)*80svh);}
 .years-digits{font-size:min(35vw,40svh);top:32%;}
 .years-head{top:92px;font-size:12px;}
 .year-fan{top:61%;}
 .year-info{max-width:calc(100% - 2*var(--gutter));bottom:76px;}
 .year-names{font-size:15px;}
 .years-title{font-size:clamp(64px,22vw,150px);}
 .years-ticks{gap:6px;bottom:16px;}
 .years-tick{font-size:12px;}
 .years-arrow{bottom:92px;}
 .year-card-meta{opacity:1;transform:none;font-size:12px;padding:7px 9px;left:7px;right:7px;bottom:7px;}
 .year-card-meta i{display:none;}
}
@media(prefers-reduced-motion:reduce){.years-arrow{animation:none;}.ym>span{transition:none;transform:none;}}

/* Clean light theme: no tinted ambient wash, neutral surfaces. Dark theme keeps its atmosphere. */
:root:not([data-theme=dark]){--paper:#ffffff;--surface:#e9ecf2;}   /* -72: the world's ground (css/space-ui.css --cool-ground), so the load never shows a pale blue paper first (jury 4 D9) */
html:not([data-theme=dark]) body::before{background:none!important;animation:none!important;}
/* About: the fan needs room to open */
.experience-scroll.scroll-enhanced{height:250svh;}
/* P0 (the coordinator, 24 Oct 2026 ~12:15Z, after Olya ~12:05Z «сцены может лишние»): the «10» is gone; its passage keeps half a
   screen for the camera's turn from the services down to the portrait, and carries nothing */
html body #about .experience-scroll.experience-transit{height:50svh;min-height:0;margin:0;padding:0}
/* line masks (site-motion.js) */
.tm-l{display:block;overflow:clip;padding-bottom:.16em;margin-bottom:-.16em;}
.tm-i{display:block;will-change:transform;}
.tm-pending .tm-i{transform:translate3d(0,108%,0);}
.tm-visible .tm-i{transform:none;transition:transform 1250ms cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*85ms);}
@media(prefers-reduced-motion:reduce){.tm-pending .tm-i{transform:none;}.tm-visible .tm-i{transition:none;}}
html.has-smooth{scroll-behavior:auto!important;}

.years-fallback{padding:60px var(--gutter);font-size:clamp(22px,3vw,44px);letter-spacing:-.04em;}
.years-fallback a{border-bottom:1px solid currentColor;}

/* page field (page-field.js): fixed WebGL layer behind everything */
canvas.page-field{position:fixed;inset:0;width:100%;height:100lvh;z-index:-1;pointer-events:none;display:block;}
html.has-field body::before{display:none!important;}
html.no-field:not([data-theme=dark]) body{background:linear-gradient(135deg,#f7faff 0%,#eff2f8 38%,#f0f3f9 68%,#fff6f0 100%) fixed;}
html.no-field[data-theme=dark] body{background:linear-gradient(135deg,#0b0e14 0%,#15181e 55%,#171a20 100%) fixed;}
html.has-field{background:var(--paper)!important;}
html.has-field body{background:transparent!important;}

/* One palette: pearl white / ink navy. Surfaces let the page field show through instead of grey-blue slabs. */
:root{--footer-surface:transparent;--nav-fill:#ffffffb3;--nav-rule:#ffffffd9;}
:root[data-theme=dark]{--paper:#090c12;--ink:#eceff5;--muted:#aaadb3;--line:#292c32;--surface:#16191f;--raised:#1d2026;--blue:#bbbec4;--nav-fill:#171717c4;--nav-rule:#d2d2d24d;--footer-surface:transparent;}
html:not([data-theme=dark]) .work-image{background:rgba(255,255,255,.58);}
html:not([data-theme=dark]) .year-card{--card-bg:rgba(255,255,255,.7)!important;}
html:not([data-theme=dark]) footer{background:transparent;}
html[data-theme=dark] .work-image{background:rgba(177,180,186,.07);}
html[data-theme=dark] .year-card{--card-bg:rgba(177,180,186,.10)!important;}

/* ---------- editorial text sections: sticky statement, numbered hairline rows, dimming on hover ---------- */
body .practice-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(30px,6vw,120px);padding:clamp(90px,12vw,200px) var(--gutter);align-items:start;}
body .practice-detail>h2{position:sticky;top:130px;margin:0;font-size:clamp(46px,6.2vw,112px);line-height:.96;letter-spacing:-.06em;font-weight:inherit;}
body .practice-grid{display:block;counter-reset:row;padding:0;margin:0;}
body .practice-grid article{position:relative;counter-increment:row;padding:clamp(28px,3.4vw,52px) 0 clamp(34px,4vw,64px) clamp(46px,5vw,86px);border-top:1px solid var(--line);background:none;border-radius:0;min-height:0;transition:opacity 500ms var(--ease);}
body .practice-grid article:last-child{border-bottom:1px solid var(--line);}
body .practice-grid article::before{content:counter(row,decimal-leading-zero);position:absolute;left:0;top:clamp(34px,4vw,60px);font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;}
body .practice-grid article h3{margin:0 0 18px;font-size:clamp(30px,3.6vw,64px);line-height:1;letter-spacing:-.05em;font-weight:inherit;}
body .practice-grid article p{margin:0;max-width:30em;font-size:clamp(16px,1.25vw,20px);line-height:1.55;color:var(--muted);}
body .practice-grid:has(article:hover) article:not(:hover){opacity:.35;}
@media(max-width:900px){body .practice-detail{grid-template-columns:1fr}body .practice-detail>h2{position:static}}

body .explore-practice{padding:clamp(90px,12vw,200px) var(--gutter) clamp(70px,9vw,140px);}
body .explore-practice-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,6vw,120px);align-items:end;margin-bottom:clamp(60px,9vw,150px);}
body .explore-practice-intro h2{margin:0;font-size:clamp(60px,10vw,190px);line-height:.9;letter-spacing:-.07em;font-weight:inherit;}
body .explore-practice-intro p{margin:0;max-width:26em;font-size:clamp(19px,1.8vw,30px);line-height:1.38;letter-spacing:-.02em;color:var(--ink);}
body .explore-practice-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,56px);counter-reset:note;}
body .explore-practice-notes article{counter-increment:note;border-top:1px solid var(--line);padding-top:22px;background:none;}
body .explore-practice-notes article::before{content:counter(note,decimal-leading-zero);display:block;margin-bottom:clamp(40px,6vw,110px);font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;}
body .explore-practice-notes h3{margin:0 0 16px;font-size:clamp(24px,2.5vw,42px);line-height:1.04;letter-spacing:-.045em;font-weight:inherit;}
body .explore-practice-notes p{margin:0;font-size:16px;line-height:1.55;color:var(--muted);max-width:26em;}
body .explore-practice-links{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,64px);margin-top:clamp(50px,7vw,110px);}
body .explore-practice-links a{font-size:clamp(22px,2.6vw,42px);letter-spacing:-.04em;}
@media(max-width:900px){body .explore-practice-intro,body .explore-practice-notes{grid-template-columns:1fr}}

/* case pages */
body .case-cover-copy h1{font-size:clamp(88px,15vw,270px);line-height:.86;letter-spacing:-.075em;font-weight:inherit;}
body .case-role{margin-top:clamp(20px,3vw,44px);padding-top:0;border-top:0;font-size:clamp(14px,1.05vw,17px);color:var(--muted);max-width:30em;}
body .project-info{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(30px,6vw,120px);align-items:start;}
body .project-copy{display:contents;}
body .project-copy h2{grid-column:1;margin:0;font-size:clamp(15px,1.1vw,18px);font-weight:inherit;color:var(--muted);letter-spacing:0;}
body .project-copy .project-tags{grid-column:1;grid-row:2;display:grid;gap:6px;margin:0;font-size:15px;color:var(--muted);}
body .project-copy .project-tags div:nth-child(2){display:none;}
body .project-copy>.f-body{grid-column:2;grid-row:1/span 2;font-size:clamp(24px,2.7vw,46px);line-height:1.18;letter-spacing:-.035em;color:var(--ink);max-width:26em;}
body .project-info .next-project{grid-column:1/-1;border-top:0;padding-top:clamp(28px,4vw,60px);margin-top:clamp(40px,7vw,120px);}
body .next-project .menu-link{font-size:clamp(48px,8.5vw,150px);line-height:.95;letter-spacing:-.07em;font-weight:inherit;}
@media(max-width:900px){body .project-info{grid-template-columns:1fr}body .project-copy{display:block}body .project-copy>.f-body{font-size:clamp(22px,5.4vw,30px)}}

/* page transitions follow the same palette: pearl white / ink navy, no cast shadows */
.page-shutter{background:linear-gradient(160deg,#f7faff 0%,#edf0f6 62%,#fffaee 100%)!important;color:#15181e!important;}
:root[data-theme=dark] .page-shutter{background:linear-gradient(160deg,#000000 0%,#14171d 62%,#1a1d23 100%)!important;color:#eceff5!important;}
.project-portal{background:#f4f7fd!important;}
:root[data-theme=dark] .project-portal{background:#15181e!important;}
/* explore notes: undo older grid placement so the three columns line up */
body .explore-practice-notes article{grid-column:auto!important;grid-row:auto!important;margin:0!important;max-width:none!important;}

/* ===== v48 section mechanics (js/chapters2.js) ===================================================== */
:root{--hair:color-mix(in srgb,var(--ink) 11%,transparent);--soft:color-mix(in srgb,var(--ink) 52%,transparent);}

/* --- About: career as expanded panels --- */
.career-detail.is-rail{position:relative;padding-block:0!important;}
.career-detail.is-rail .cr-stage{position:sticky;top:104px;height:calc(100svh - 128px);max-height:880px;min-height:520px;display:flex;flex-direction:column;gap:clamp(16px,3svh,30px);padding-block:6px 0;}
.career-detail.is-rail .cr-stage>.section-heading{margin:0!important;padding:0!important;flex:none;display:flex!important;justify-content:space-between;align-items:end;gap:30px;}
.career-detail.is-rail .cr-stage>.section-heading h2{margin:0;font-size:clamp(30px,4.1vw,60px);line-height:1.04;letter-spacing:-.045em;}
.career-detail.is-rail .cr-stage>.section-heading p{margin:0;max-width:18em;font-size:15px;line-height:1.5;color:var(--muted);}
.career-detail.is-rail .cr-stage>.career-list{flex:1;min-height:0;display:flex!important;flex-direction:row;gap:10px;width:100%;margin:0!important;padding:0!important;border:0!important;}
.career-detail.is-rail .cr-stage>.career-links{position:static!important;flex:none;display:flex;gap:32px;margin:0!important;min-height:0!important;padding-bottom:4px;}
.career-detail.is-rail .cr-panel,.career-detail.is-rail .cr-panel:nth-child(2n){--w:0;position:relative;flex:calc(.2 + var(--w)*3.3) 1 0!important;width:auto!important;min-width:0;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;display:block!important;overflow:hidden;cursor:pointer;
 border:1px solid color-mix(in srgb,var(--ink) calc(7% + var(--w)*6%),transparent)!important;border-radius:26px;
 background:color-mix(in srgb,var(--paper) calc(26% + var(--w)*44%),transparent);-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);outline-offset:3px;}
.career-detail.is-rail .cr-panel .career-logo{position:absolute;left:30px;top:28px;width:auto;max-width:170px;height:34px;max-height:none;object-fit:contain;object-position:left;margin:0;transform:translateY(calc((1 - var(--w))*10px));opacity:clamp(0,calc((var(--w) - .3)*2),1);transition:none;}
.career-detail.is-rail .cr-num{position:absolute;top:30px;right:calc(50% - 11px - var(--w)*(50% - 35px));font-size:12px;letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums;}
.career-detail.is-rail .cr-tag{position:absolute;left:50%;bottom:26px;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);white-space:nowrap;font-size:clamp(15px,1.25vw,19px);letter-spacing:-.015em;color:var(--ink);opacity:clamp(0,calc(1 - var(--w)*3.4),1);}
.career-detail.is-rail .cr-body{position:absolute;left:30px;bottom:30px;width:clamp(300px,34vw,520px);max-width:calc(100% - 60px);opacity:clamp(0,calc((var(--w) - .4)*2.6),1);transform:translateY(calc((1 - var(--w))*20px));pointer-events:none;}
.career-detail.is-rail .cr-panel.is-open .cr-body{pointer-events:auto;}
.career-detail.is-rail .cr-body h3{margin:0 0 clamp(12px,2.2svh,22px);min-height:0;display:block;font-size:clamp(34px,4.4vw,66px);line-height:1;letter-spacing:-.055em;max-width:none;}
.career-detail.is-rail .cr-body .career-role{margin:0 0 12px;font-size:clamp(16px,1.5vw,21px);color:var(--ink);}
.career-detail.is-rail .cr-body p:not(.career-role){margin:0;font-size:clamp(15px,1.25vw,18px);line-height:1.5;color:var(--muted);max-width:30em;}
.career-detail.is-rail .cr-panel:focus-visible{outline:2px solid var(--ink);}
.career-detail.is-rail .cr-panel:not(.is-open):hover{border-color:color-mix(in srgb,var(--ink) 18%,transparent)!important;}
[data-theme=dark] .career-detail.is-rail .cr-panel .career-logo{filter:brightness(0) invert(1);}
.career-detail.is-rail.is-static .cr-stage{position:static;height:auto;min-height:0;max-height:none;}
.career-detail.is-rail.is-static .cr-stage>.career-list{flex-direction:column;}
.career-detail.is-rail.is-static .cr-panel{flex:none!important;padding:26px 28px!important;}
.career-detail.is-rail.is-static .cr-body,.career-detail.is-rail.is-static .career-logo,.career-detail.is-rail.is-static .cr-num{position:static;transform:none;opacity:1;width:auto;max-width:none;}
.career-detail.is-rail.is-static .cr-tag{display:none;}
@media(max-width:760px){
 .career-detail.is-rail .cr-stage{top:92px;height:calc(100svh - 108px);min-height:480px;gap:14px;}
 .career-detail.is-rail .cr-stage>.section-heading{display:block!important;}
 .career-detail.is-rail .cr-stage>.section-heading h2{font-size:clamp(28px,8vw,40px);}
 .career-detail.is-rail .cr-stage>.section-heading p{display:none;}
 .career-detail.is-rail .cr-stage>.career-list{flex-direction:column;gap:6px;}
 .career-detail.is-rail .cr-panel,.career-detail.is-rail .cr-panel:nth-child(2n){flex:calc(.16 + var(--w)*5) 1 0!important;min-height:calc(38px + var(--w)*150px)!important;border-radius:20px;}
 .career-detail.is-rail .cr-tag{writing-mode:horizontal-tb;transform:translateY(50%);left:20px;bottom:50%;font-size:16px;}
 .career-detail.is-rail .cr-num{top:50%;right:20px;transform:translateY(-50%);}
 .career-detail.is-rail .cr-panel .career-logo{left:20px;top:18px;height:24px;}
 .career-detail.is-rail .cr-body{left:20px;bottom:18px;width:calc(100% - 40px);max-width:none;}
 .career-detail.is-rail .cr-body h3{font-size:clamp(26px,8vw,36px);}
 .career-detail.is-rail .cr-body p:not(.career-role){font-size:14px;}
}

/* --- Explore: focus rail (the card arriving from the right grows into focus) --- */
.selected-gallery.gal-focus .horizontal-track>.work-card{--s:1;--f:1;--d:0;--o:left;transform:scale(var(--s))!important;transform-origin:var(--o) 52%!important;opacity:calc(.38 + var(--f)*.62)!important;will-change:transform,opacity;}
.selected-gallery.gal-focus .work-card .work-image{overflow:hidden;}
.selected-gallery.gal-focus .work-card .work-image img{transform:translate3d(calc(var(--d)*-4.5%),0,0) scale(1.07);will-change:transform;}
.selected-gallery.gal-focus .work-card .work-caption,.selected-gallery.gal-focus .work-card>p{opacity:calc(.15 + var(--f)*.85);transform:translateY(calc((1 - var(--f))*14px));}
.selected-gallery.gal-focus .chapter-heading{align-items:end;}
.gal-count{display:flex;align-items:baseline;gap:12px;font-size:clamp(34px,4.4vw,64px);line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--ink);overflow:hidden;}
.gal-count .gal-cur{display:inline-block;}
.gal-count .gal-sep{display:inline-block;width:clamp(26px,3vw,48px);height:1px;background:var(--soft);transform:translateY(-.32em);}
.gal-count .gal-tot{color:color-mix(in srgb,var(--ink) 30%,transparent);}
@media(max-width:700px){.gal-count{font-size:30px}}

/* --- Approach: services as a sticky stack of big panels --- */
body[data-page=approach] .svc-stack .service-rows{display:block!important;position:relative;padding-bottom:4svh;}
body[data-page=approach] .svc-stack .service-rows>a{--q:0;position:sticky!important;top:calc(96px + var(--i)*18px);display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr auto auto auto;
 column-gap:clamp(20px,4vw,64px);align-content:stretch;height:min(calc(100svh - 190px),640px);min-height:380px!important;margin:0 0 clamp(24px,6svh,60px)!important;padding:clamp(22px,3vw,44px)!important;
 border:1px solid var(--hair);border-radius:30px;background:color-mix(in srgb,var(--paper) 90%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.12);backdrop-filter:blur(24px) saturate(1.12);
 transform-origin:50% 0;transform:scale(calc(1 - var(--q)*.05));overflow:hidden;z-index:1;}
body[data-page=approach] .svc-stack .service-rows>a>*{grid-column:1;}
body[data-page=approach] .svc-stack .svc-num{grid-row:1;font-size:13px;letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums;}
body[data-page=approach] .svc-stack .service-rows>a>h3{grid-row:2;align-self:end;margin:0 0 clamp(18px,3svh,34px);max-width:7.5em;font-size:clamp(40px,6.2vw,104px);line-height:.94;letter-spacing:-.06em;opacity:calc(1 - var(--q)*.6);}
body[data-page=approach] .svc-stack .service-rows>a>p{grid-row:3;margin:0 0 10px;max-width:26em;font-size:clamp(13px,1.05vw,15px);letter-spacing:.01em;color:var(--ink);opacity:.62;}
body[data-page=approach] .svc-stack .service-rows>a>p.service-description{grid-row:4;margin:0;font-size:clamp(15px,1.4vw,20px);line-height:1.45;color:var(--muted);opacity:1;max-width:24em;}
body[data-page=approach] .svc-stack .svc-cta{grid-row:5;align-self:end;justify-self:start;margin-top:clamp(18px,3svh,30px);grid-column:1;font-size:15px;color:var(--ink);border-bottom:1px solid var(--soft);padding-bottom:3px;}
body[data-page=approach] .svc-stack .service-rows>a>svg{display:none!important;}
body[data-page=approach] .svc-stack .service-rows>a>.service-preview{position:absolute!important;inset:14px 14px 14px auto!important;width:calc(50% - 14px)!important;height:auto!important;max-width:none!important;max-height:none!important;transform:none!important;z-index:1;border-radius:22px;background:radial-gradient(120% 120% at 50% 40%,color-mix(in srgb,var(--gc,#d4d7dd) 24%,transparent),transparent 72%);}
body[data-page=approach] .svc-stack .service-rows>a:nth-child(1){--gc:#c7cad0}body[data-page=approach] .svc-stack .service-rows>a:nth-child(2){--gc:#c9ccd2}body[data-page=approach] .svc-stack .service-rows>a:nth-child(3){--gc:#d6d9df}body[data-page=approach] .svc-stack .service-rows>a:nth-child(4){--gc:#f2d7cc}
[data-theme=dark] body[data-page=approach] .svc-stack .service-rows>a>.service-preview{background:radial-gradient(120% 120% at 50% 40%,color-mix(in srgb,var(--gc,#56595f) 16%,transparent),transparent 72%);}
body[data-page=approach] .svc-stack .service-rows>a:hover .svc-cta{border-color:var(--ink);}
@media(max-width:820px){
 body[data-page=approach] .svc-stack .service-rows>a{top:calc(86px + var(--i)*10px);grid-template-columns:1fr;grid-template-rows:auto 220px auto auto auto auto;height:auto;min-height:0!important;row-gap:14px;}
 body[data-page=approach] .svc-stack .service-rows>a>.service-preview{position:relative!important;inset:auto!important;grid-row:2;grid-column:1;width:100%!important;height:220px!important;}
 body[data-page=approach] .svc-stack .service-rows>a>h3{grid-row:3;font-size:clamp(34px,10vw,56px);}
 body[data-page=approach] .svc-stack .service-rows>a>p{grid-row:4;}
 body[data-page=approach] .svc-stack .service-rows>a>p.service-description{grid-row:5;}
 body[data-page=approach] .svc-stack .svc-cta{grid-row:6;justify-self:start;}
}

/* --- Explore: practice, focus reveal + pinned logo stage --- */
.explore-practice.is-focus .explore-practice-intro{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,6vw,110px);align-items:start;margin-bottom:clamp(60px,10vw,160px);}
.explore-practice.is-focus .explore-practice-intro h2{position:sticky;top:128px;}
.explore-practice.is-focus .explore-practice-intro p{max-width:none;margin:0;font-size:clamp(24px,3vw,46px);line-height:1.2;letter-spacing:-.03em;}
.explore-practice.is-focus .fw{color:color-mix(in srgb,var(--ink) calc(16% + var(--on,0)*84%),transparent);}
.explore-practice.is-focus .explore-practice-notes.ep-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,6vw,110px);margin-top:0;counter-reset:none;}
.explore-practice.is-focus .ep-grid>article{grid-column:2!important;grid-row:auto!important;display:flex!important;flex-direction:column;justify-content:center;min-height:62svh;padding:0!important;border:0!important;margin:0!important;opacity:calc(.16 + var(--a,1)*.84);transition:none;}
.explore-practice.is-focus .ep-grid>article::before{display:none!important;}
.explore-practice.is-focus .ep-grid>article h3{margin:0 0 clamp(14px,2.4svh,26px);font-size:clamp(34px,4.6vw,76px);line-height:1;letter-spacing:-.055em;max-width:11em;}
.explore-practice.is-focus .ep-grid>article p{margin:0;font-size:clamp(16px,1.45vw,21px);line-height:1.5;max-width:28em;color:var(--muted);}
.explore-practice.is-focus .ep-aside{grid-column:1;grid-row:1 / span 3;position:sticky;top:18svh;align-self:start;height:min(60svh,520px);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,2.4vw,36px);border:1px solid var(--hair);border-radius:30px;background:color-mix(in srgb,var(--paper) 40%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);overflow:hidden;}
.explore-practice.is-focus .ep-logo{position:absolute;left:clamp(22px,2.4vw,36px);top:clamp(22px,2.4vw,36px);width:auto;max-width:min(70%,300px);height:clamp(48px,7vw,92px);object-fit:contain;object-position:left top;opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);}
.explore-practice.is-focus .ep-logo.is-on{opacity:1;transform:none;}
[data-theme=dark] .explore-practice.is-focus .ep-logo{filter:brightness(0) invert(1);}
.explore-practice.is-focus .ep-count{margin-top:auto;display:flex;align-items:baseline;gap:12px;font-size:clamp(54px,8vw,128px);line-height:.9;letter-spacing:-.06em;font-variant-numeric:tabular-nums;overflow:hidden;}
.explore-practice.is-focus .ep-sep{display:inline-block;width:clamp(26px,3.4vw,56px);height:1px;background:var(--soft);transform:translateY(-.3em);}
.explore-practice.is-focus .ep-tot{color:color-mix(in srgb,var(--ink) 28%,transparent);}
.explore-practice.is-focus .ep-mini{display:none;}
@media(max-width:900px){
 .explore-practice.is-focus .explore-practice-intro,.explore-practice.is-focus .explore-practice-notes.ep-grid{grid-template-columns:1fr;}
 .explore-practice.is-focus .explore-practice-intro h2{position:static;}
 .explore-practice.is-focus .ep-aside{display:none;}
 .explore-practice.is-focus .ep-grid>article{grid-column:1!important;min-height:0;padding:34px 0!important;border-top:1px solid var(--hair)!important;opacity:1;}
 .explore-practice.is-focus .ep-mini{display:block;height:34px;width:auto;max-width:180px;object-fit:contain;object-position:left;margin-bottom:22px;}
 [data-theme=dark] .explore-practice.is-focus .ep-mini{filter:brightness(0) invert(1);}
}
@media(prefers-reduced-motion:reduce){.selected-gallery.gal-focus .horizontal-track>.work-card{transform:none!important;opacity:1!important}.explore-practice.is-focus .fw{color:var(--ink)}.explore-practice.is-focus .ep-grid>article{opacity:1}}
/* v48b: the Beetroot mark is white-on-transparent, so it needs a dark fill on the light theme */
:root:not([data-theme=dark]) :is(.career-detail.is-rail .cr-panel .career-logo,.explore-practice.is-focus .ep-logo,.explore-practice.is-focus .ep-mini)[src$="beetroot.svg"]{filter:brightness(0);}

/* ===== v50 ======================================================================================= */
/* nav: the surface switch (dark hero <-> light page) now cross-fades instead of snapping */
@property --nva{syntax:'<color>';inherits:true;initial-value:#f9f9f9b0}
@property --nvb{syntax:'<color>';inherits:true;initial-value:#e6e6e670}
@property --nvc{syntax:'<color>';inherits:true;initial-value:#f9f9f99a}
@property --nink{syntax:'<color>';inherits:true;initial-value:#1c1f25}
.site-header .glass-nav,.site-header :is(.sound-toggle,.theme-toggle){transition:--nva .7s cubic-bezier(.22,1,.36,1),--nvb .7s cubic-bezier(.22,1,.36,1),--nvc .7s cubic-bezier(.22,1,.36,1),--nink .7s cubic-bezier(.22,1,.36,1),color .7s cubic-bezier(.22,1,.36,1)!important;}
.site-header .glass-nav[data-surface=light]{--nva:#f5f5f570;--nvb:#e2e2e22b;--nvc:#f8f8f84d;--nink:#1c1f25;}
.site-header :is(.sound-toggle,.theme-toggle)[data-surface=light]{--nva:#f9f9f9b0;--nvb:#e6e6e670;--nvc:#f9f9f99a;--nink:#1c1f25;}
.site-header .glass-nav[data-surface=dark]{--nva:#1e1e1e9c;--nvb:#2727275c;--nvc:#1e1e1e8c;--nink:#f3f6fc;}
.site-header :is(.sound-toggle,.theme-toggle)[data-surface=dark]{--nva:#5353535c;--nvb:#3030303a;--nvc:#c7c7c738;--nink:#f3f6fc;}
.site-header .glass-nav[data-surface]{color:var(--nink)!important;--nav-ink:var(--nink)!important;}
.site-header .glass-nav[data-surface]::before{background:linear-gradient(125deg,var(--nva),var(--nvb) 55%,var(--nvc))!important;}
.site-header .glass-nav[data-surface] :is(.nav-links a,.menu-toggle){color:var(--nink)!important;}
.site-header :is(.sound-toggle,.theme-toggle)[data-surface]{color:var(--nink)!important;background:linear-gradient(128deg,var(--nva),var(--nvb) 55%,var(--nvc))!important;}
.site-header .glass-nav .brand img{transition:filter .7s cubic-bezier(.22,1,.36,1)!important;}
@media(prefers-reduced-motion:reduce){.site-header .glass-nav,.site-header :is(.sound-toggle,.theme-toggle),.site-header .glass-nav .brand img{transition:none!important;}}

/* year by year: no counter, no black progress bar; the intro title flies into the corner kicker */
.years-counter,.years-bar{display:none!important;}
.years-chapter:not(.is-static) .years-kicker{opacity:0;font-size:15px;}
.years-chapter .years-title{transform-origin:0 0;will-change:transform,opacity;}
.year-intro[data-seen] .ym>span{transform:none;}
.years-tick{gap:0;min-width:0;padding:10px 4px;font-size:14px;color:color-mix(in srgb,var(--ink) 26%,transparent);transition:color .5s var(--ease),transform .5s var(--ease);}
.years-tick i{display:none!important;}
.years-tick:hover{color:color-mix(in srgb,var(--ink) 60%,transparent);}
.years-tick[aria-current]{color:var(--ink);}
.year-info{display:flex;flex-direction:column;gap:12px;}
.year-count{margin:0;}
.year-names{line-height:1.4;}
.year-names .yn{white-space:nowrap;}
.year-names .ys{color:color-mix(in srgb,var(--ink) 28%,transparent);margin:0 .45em;font-size:.8em;}
.year-names .yn{color:inherit;margin:0;font-size:inherit;}

/* industries (home): white sheets, no outlines, the projects are the focus */
.design-principles .industry-panel,.design-principles .industry-panel:nth-child(2),.design-principles .industry-panel:nth-child(3){
 background:color-mix(in srgb,#ffffff 90%,transparent)!important;border:0!important;outline:0!important;overflow:clip;
 -webkit-backdrop-filter:blur(22px) saturate(1.05);backdrop-filter:blur(22px) saturate(1.05);border-radius:30px!important;
 min-height:clamp(360px,56svh,560px)!important;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important;gap:clamp(28px,4vw,72px)!important;padding:clamp(28px,3.6vw,56px)!important;}
[data-theme=dark] .design-principles .industry-panel,[data-theme=dark] .design-principles .industry-panel:nth-child(2),[data-theme=dark] .design-principles .industry-panel:nth-child(3){background:color-mix(in srgb,#181b21 86%,transparent)!important;}
.design-principles .industry-panel:nth-child(3) .chapter-cluster{order:0!important;}
.design-principles .industry-copy h3{font-size:clamp(46px,5.6vw,88px)!important;margin-bottom:clamp(14px,2vw,26px)!important;}
/* the screenshot fan stays inside its card: its height never exceeds the card's content box (no fans leaking across the stack) */
.design-principles .chapter-cluster{position:relative;width:100%;height:min(clamp(320px,36vw,500px),calc(56svh - clamp(56px,7.2vw,112px)))!important;min-height:0!important;}
.design-principles .chapter-cluster .chapter-card,.design-principles .industry-panel:nth-child(n) .chapter-cluster .chapter-card{position:absolute!important;left:0!important;top:auto!important;bottom:8%!important;width:78%!important;transform:none!important;z-index:3;}
.design-principles .chapter-cluster .chapter-media,.design-principles .industry-panel:nth-child(n) .chapter-media{width:100%!important;aspect-ratio:1.42!important;height:auto!important;border-radius:16px!important;border:0!important;transform:none!important;background:#eef1f7;}
.design-principles .chapter-media img,.design-principles .chapter-related img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform 1.1s cubic-bezier(.22,1,.36,1);}
.design-principles .chapter-related,.design-principles .industry-panel:nth-child(n) .chapter-related{position:absolute!important;display:block;overflow:hidden;border:0!important;border-radius:14px!important;transform:none!important;width:34%!important;aspect-ratio:.86!important;left:auto!important;right:0!important;top:0!important;z-index:2!important;}
.design-principles .chapter-related:last-child,.design-principles .industry-panel:nth-child(n) .chapter-related:last-child{width:27%!important;aspect-ratio:1!important;right:6%!important;top:auto!important;bottom:0!important;z-index:4!important;}
.design-principles .chapter-cluster .chapter-caption{position:absolute!important;left:0!important;right:auto!important;top:calc(100% + 14px)!important;transform:none!important;margin:0!important;font-size:15px!important;}
.design-principles .chapter-card:hover .chapter-media img,.design-principles .chapter-related:hover img{transform:scale(1.04);}
@media(max-width:700px){
 .design-principles .industry-panel,.design-principles .industry-panel:nth-child(2),.design-principles .industry-panel:nth-child(3){grid-template-columns:1fr!important;min-height:0!important;padding:26px 22px 54px!important;}
 .design-principles .chapter-cluster{height:clamp(240px,78vw,360px)!important;}
}

/* approach services: showcase (replaces the v48 card stack; no panels, no numbers, no outlines) */
body[data-page=approach] .svc-show .svc-track{position:relative;height:calc(100svh + 4*58svh);}
body[data-page=approach] .svc-show.is-static .svc-track{height:auto;}
body[data-page=approach] .svc-show .svc-stage{position:sticky;top:0;height:100svh;min-height:600px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,80px);}
body[data-page=approach] .svc-show .service-rows{display:flex!important;flex-direction:column;gap:clamp(4px,1.1svh,12px);margin:0!important;padding:0!important;border:0!important;}
body[data-page=approach] .svc-show .service-rows>a{position:static!important;display:block!important;min-height:0!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none!important;color:color-mix(in srgb,var(--ink) 45%,transparent)!important;transition:color .7s cubic-bezier(.22,1,.36,1)!important;}
body[data-page=approach] .svc-show .service-rows>a::before,body[data-page=approach] .svc-show .service-rows>a::after{display:none!important;}
body[data-page=approach] .svc-show .service-rows>a.is-current,body[data-page=approach] .svc-show .service-rows>a:hover{color:var(--ink)!important;}
body[data-page=approach] .svc-show .service-rows>a>h3{margin:0!important;max-width:none!important;font-size:clamp(38px,5.2vw,86px)!important;line-height:1.02!important;letter-spacing:-.058em!important;color:inherit!important;opacity:1!important;transform:none!important;}
body[data-page=approach] .svc-show .service-rows>a>svg{display:none!important;}
body[data-page=approach] .svc-show .svc-fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s cubic-bezier(.22,1,.36,1);}
body[data-page=approach] .svc-show .is-current .svc-fold{grid-template-rows:1fr;}
body[data-page=approach] .svc-show .svc-more{display:block;min-height:0;overflow:hidden;opacity:0;transform:translateY(10px);transition:opacity .6s,transform .8s cubic-bezier(.22,1,.36,1);}
body[data-page=approach] .svc-show .is-current .svc-more{opacity:1;transform:none;transition-delay:.12s;}
body[data-page=approach] .svc-show .svc-more p{margin:clamp(12px,2svh,22px) 0 0!important;max-width:28em!important;font-size:clamp(15px,1.25vw,19px)!important;line-height:1.5;color:var(--muted)!important;opacity:1!important;transform:none!important;}
body[data-page=approach] .svc-show .svc-more p:first-child{font-size:clamp(13px,1vw,15px)!important;color:var(--muted)!important;opacity:1!important;}   /* -72: the muted ink, not ink at .6 (3.15:1 in axe, jury 4 U6) */
body[data-page=approach] .svc-show .svc-cta{display:inline-block;margin:clamp(16px,2.6svh,28px) 0 clamp(14px,2svh,22px);font-size:15px;color:var(--ink);padding-bottom:4px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;}
body[data-page=approach] .svc-show .svc-art{position:relative;height:min(74svh,660px);}
body[data-page=approach] .svc-show .svc-art>.service-preview{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;max-width:none!important;max-height:none!important;transform:none!important;background:none!important;border-radius:0!important;}
body[data-page=approach] .svc-show.is-static .svc-stage{position:static;height:auto;min-height:0;display:block;}
body[data-page=approach] .svc-show.is-static .svc-art{display:none;}
body[data-page=approach] .svc-show.is-static .service-rows{gap:clamp(40px,8vw,64px);}
body[data-page=approach] .svc-show.is-static .service-rows>a{color:var(--ink)!important;}
body[data-page=approach] .svc-show.is-static .svc-fold{grid-template-rows:1fr;}
body[data-page=approach] .svc-show.is-static .svc-more{opacity:1;transform:none;}
body[data-page=approach] .svc-show.is-static .service-rows>a>.service-preview{position:relative!important;inset:auto!important;display:block;width:100%!important;height:clamp(200px,58vw,300px)!important;margin:0 0 18px;transform:none!important;}
/* (22 Oct, round 3) the static rows (phones, reduced motion) keep each maquette's place before it arrives: the previews
   come with an import started when the rows near, and on a slow phone a reader was already on the rows when four boxes of
   about 330 px pushed the page down (layout shift .12 at 320, devices sweep 1.18). The place is the preview's own box
   (above, and portfolio-polish-v54.css up to 820 px: clamp(300px,84vw,420px); 16 px under it, fix-approach-20261021.css) and goes the moment
   the preview is in the row; not in airy (no previews there) or when the import failed */
html:not(.airy) body[data-page=approach] .svc-show.is-static .service-rows:not([data-preview=fallback])>a:not(:has(>.service-preview)):not(#_fa):not(#_fb)::before{content:""!important;display:block!important;order:-1;align-self:stretch;flex:none;height:clamp(200px,58vw,300px);margin:0 0 16px;pointer-events:none}
@media(max-width:820px){html:not(.airy) body[data-page=approach] .svc-show.is-static .service-rows:not([data-preview=fallback])>a:not(:has(>.service-preview)):not(#_fa):not(#_fb)::before{height:clamp(300px,84vw,420px)}}

/* awards / events: typographic ledger grouped by year, no cards and no dividers */
.awwwards-list.is-ledger,.awwards-list.is-ledger,.events-grid.is-ledger{display:block!important;grid-template-columns:none!important;gap:0!important;padding:clamp(48px,7vw,110px) 0 clamp(20px,3vw,40px)!important;margin:0!important;border:0!important;}
.is-ledger .lg-group{--a:1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:0 4vw;padding:0 0 clamp(40px,5.5vw,84px);}
.is-ledger .lg-year{position:sticky;top:clamp(110px,16svh,150px);align-self:start;margin:0;font-size:clamp(54px,7.4vw,120px);line-height:.84;letter-spacing:-.065em;font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--ink) calc(13% + var(--a)*67%),transparent);}
.is-ledger .lg-items{list-style:none;margin:0;padding:clamp(4px,.8vw,12px) 0 0;display:grid;gap:clamp(26px,3.2vw,48px);}
.is-ledger .lg-item{--a:1;opacity:calc(.3 + var(--a)*.7);transform:translate3d(calc((1 - var(--a))*16px),0,0);}
.is-ledger .lg-item h4{margin:0 0 10px;font-weight:400;font-size:clamp(26px,3.1vw,48px);line-height:1.04;letter-spacing:-.045em;color:var(--ink);max-width:18em;}
.is-ledger .lg-item p{margin:0;font-size:clamp(14px,1.1vw,17px);line-height:1.45;color:var(--muted);}
@media(max-width:700px){.is-ledger .lg-group{grid-template-columns:1fr;gap:14px}.is-ledger .lg-year{position:static;font-size:48px}}
@media(prefers-reduced-motion:reduce){.is-ledger .lg-item{opacity:1;transform:none}.is-ledger .lg-year{color:color-mix(in srgb,var(--ink) 30%,transparent)}}

/* work experience: a compact, calm logo line instead of huge sparse cells */
.logo-marquee{padding:clamp(18px,3vw,40px) 0!important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
.logo-marquee .about-logo-block{width:clamp(220px,19vw,320px)!important;height:clamp(110px,10vw,160px)!important;padding:0 clamp(10px,1.2vw,20px)!important;opacity:.82;transition:opacity .5s;}
.logo-marquee .about-logo-block:hover{opacity:1;}
.logo-marquee .about-logo-block :is(img,svg){max-height:100%!important;max-width:100%!important;}
.about-tab-01>.f-body.custom-about-wex{max-width:22em!important;margin:clamp(30px,4vw,60px) 0 0!important;font-size:clamp(22px,2.4vw,38px)!important;line-height:1.18!important;letter-spacing:-.035em;color:var(--ink)!important;}

/* about career: no outlines; the open panel is a soft white sheet, the closed ones are just their labels */
.career-detail.is-rail .cr-panel,.career-detail.is-rail .cr-panel:nth-child(2n){border:0!important;background:color-mix(in srgb,#ffffff calc(var(--w)*80%),transparent)!important;}
[data-theme=dark] .career-detail.is-rail .cr-panel,[data-theme=dark] .career-detail.is-rail .cr-panel:nth-child(2n){background:color-mix(in srgb,#1e2127 calc(var(--w)*78%),transparent)!important;}
.career-detail.is-rail .cr-panel:not(.is-open):hover{background:color-mix(in srgb,#ffffff 36%,transparent)!important;}
[data-theme=dark] .career-detail.is-rail .cr-panel:not(.is-open):hover{background:color-mix(in srgb,#1e2127 40%,transparent)!important;}
.career-detail.is-rail .cr-tag{color:color-mix(in srgb,var(--ink) 55%,transparent);}

/* Fourmeta cases: focus rail */
.agency-focus .agency-projects.horizontal-track>a{--s:1;--f:1;--d:0;--o:left;transform:scale(var(--s))!important;transform-origin:var(--o) 45%!important;opacity:calc(.35 + var(--f)*.65)!important;will-change:transform,opacity;}
.agency-focus .agency-projects.horizontal-track img{background:transparent!important;object-fit:cover!important;object-position:top center;border-radius:22px;}
.agency-focus .agency-projects.horizontal-track>a :is(h3,p){opacity:calc(var(--f)*1);transform:translateY(calc((1 - var(--f))*14px));}
.agency-focus .agency-projects.horizontal-track>a{overflow:visible;}
.agency-focus .agency-projects.horizontal-track>a>img,.agency-focus .agency-projects.horizontal-track>a picture{display:block;overflow:hidden;border-radius:22px;}
.agency-focus .chapter-range{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none;}
.agency-focus .chapter-range:focus-visible{position:static!important;width:100%!important;height:auto!important;opacity:1;pointer-events:auto;}
.agency-count{position:absolute;right:var(--gutter);top:clamp(96px,13svh,128px);bottom:auto;font-size:clamp(28px,3vw,46px)!important;z-index:3;}

/* Cursor light, light theme: the daylight twin of the dark glow, coloured the way the page field is (periwinkle -> lilac). */
html:not([data-theme=dark]) .cursor-light::before,.cursor-light[data-surface=light]::before{background:radial-gradient(closest-side,rgb(128 128 128 / .30),rgb(133 133 133 / .15) 42%,rgb(184 184 184 / 0) 100%);width:620px;height:620px;margin:-30px 0 0 -30px;mix-blend-mode:normal;}
html:not([data-theme=dark]) .cursor-light[data-surface=dark]::before{background:radial-gradient(ellipse,#bababa20,transparent 68%);}

/* Design thinking: the stage copy keeps clear of the fixed sound / theme / desktop controls in the corner. */
@media (min-width:701px){.process-scroll .process-panel{padding-right:clamp(72px,8.4vw,132px);}}
/* Clarity resolve: display headings come into focus instead of only sliding up. Lines rise a shorter way,
   defocus (blur in em, so it scales with the type) and sharpen; paragraphs keep the plain mask rise. Transform, opacity, filter only. */
h1.tm-pending .tm-i,h2.tm-pending .tm-i,h3.tm-pending .tm-i,.contact-heading.tm-pending .tm-i{transform:translate3d(0,46%,0);opacity:0;filter:blur(.15em);}
h1.tm-visible .tm-i,h2.tm-visible .tm-i,h3.tm-visible .tm-i,.contact-heading.tm-visible .tm-i{transition:transform 1250ms cubic-bezier(.16,1,.3,1),opacity 620ms ease-out,filter 1150ms cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*85ms);}
@media(prefers-reduced-motion:reduce){h1.tm-pending .tm-i,h2.tm-pending .tm-i,h3.tm-pending .tm-i,.contact-heading.tm-pending .tm-i{transform:none;opacity:1;filter:none;}}

/* Focus pull on the home services list: the row under the pointer stays sharp, its neighbours drift out of focus. */
@media(hover:hover) and (min-width:701px){
 body:not([data-page=approach]) .services-section .service-rows>a{transition:filter .55s cubic-bezier(.2,.7,.2,1),opacity .55s ease;}
 body:not([data-page=approach]) .services-section .service-rows:hover>a:not(:hover):not(:focus-visible){filter:blur(1.4px);opacity:.5;}
}
@media(prefers-reduced-motion:reduce){body:not([data-page=approach]) .services-section .service-rows:hover>a:not(:hover){filter:none;opacity:1;}}
/* Clarity resolve for the [data-reveal] line masks (section titles): same focus pull as above. */
.motion-ready h2[data-reveal].reveal-pending .text-mask>span,.motion-ready h3[data-reveal].reveal-pending .text-mask>span{transform:translate3d(0,46%,0);opacity:0;filter:blur(.15em);}
h2[data-reveal].reveal-visible .text-mask>span,h3[data-reveal].reveal-visible .text-mask>span{transition:transform 1250ms cubic-bezier(.16,1,.3,1),opacity 620ms ease-out,filter 1150ms cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--line-index,0)*85ms);}
@media(prefers-reduced-motion:reduce){.motion-ready h2[data-reveal].reveal-pending .text-mask>span,.motion-ready h3[data-reveal].reveal-pending .text-mask>span{opacity:1!important;filter:none!important;}}

/* Navigation: the glass smears whatever scrolls under it, so the links stay readable over headlines and images. */
.site-header .glass-nav .nav-liquid-backdrop{backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);}
.site-header .glass-nav[data-surface=light]{border-color:color-mix(in srgb,#aeb1b7 40%,#fff)!important;}

/* Career rail: the logo (its own wordmark) and the open panel's heading must never overlap on short windows.
   The panel measures its own height; when it is too short for logo + body, the logo steps aside (the h3 carries the name). */
.career-detail.is-rail .cr-panel{container:cr-panel/size;}
@container cr-panel (max-height:380px){.career-detail.is-rail .cr-panel .career-logo{display:none;}}
@media(max-height:760px) and (min-width:701px){.career-detail.is-rail .cr-body h3{font-size:clamp(28px,min(4.4vw,8svh),52px);margin-bottom:8px;}.career-detail.is-rail .cr-body p:not(.career-role){font-size:14px;line-height:1.4;}}

/* Years cards, big and vertical (owner, 20 Oct: «карточки я бы делал крупнее и вертикальные»). A card is the cover's own
   888:1010 frame, so the cover shows whole: about 266 px wide at 1440 and half the width on a phone. The fan spreads a
   little tighter (--fan-spread in degrees, read by js/chapters.js) so the larger cards stay clear of the names row; the
   numeral moves up into its own air so the cards touch only its foot. Motion is unchanged */
.years-chapter:not(.is-static):not(#_u):not(#_v){--fan-spread:40;}
.years-chapter:not(.is-static):not(#_u):not(#_v) .years-digits{top:32%;}
.years-chapter:not(.is-static):not(#_u):not(#_v) .year-panel .year-fan{--cw:clamp(220px,18.5vw,300px);--ch:calc(var(--cw)*1010/888);top:66%;}
.years-chapter:not(.is-static):not(#_u):not(#_v) .year-panel[data-project-count="13"] .year-fan{top:64%;}
.years-chapter:not(.is-static):not(#_u):not(#_v) .year-card.has-cover{height:var(--ch);margin:calc(var(--ch)/-2) 0 0 calc(var(--cw)/-2);}
.years-chapter.is-static:not(#_u):not(#_v) .year-card.has-cover{height:auto;aspect-ratio:888/1010;}
.years-chapter:not(#_u):not(#_v) .year-card.has-cover .year-card-preview{position:absolute;inset:0;display:block;}
.years-chapter:not(#_u):not(#_v) .year-card.has-cover .year-card-preview img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;border-radius:0;}
.years-chapter:not(#_u):not(#_v) .year-card.has-cover .year-card-meta{display:none;}
/* a narrower window (21 Oct; the owner at about 840 px: «обрезается сбоку»): the 220 px floor made each card a quarter of
   the frame and the fan ran off both sides; between a phone and a laptop the cards and the fan scale down with the width */
@media (min-width:701px) and (max-width:1100px){
 .years-chapter:not(.is-static):not(#_u):not(#_v){--fan-spread:32;}
 .years-chapter:not(.is-static):not(#_u):not(#_v) .year-panel .year-fan{--cw:clamp(150px,17vw,220px);}
}
@media (max-width:700px){
 /* 21 Oct (the owner: «обрезается с боку»): a tighter fan and a deal from closer in (js/chapters.js), so a full year's
    cards stand inside the frame; cards cut at the edges between two years are the track sliding, not a clip */
 .years-chapter:not(.is-static):not(#_u):not(#_v){--fan-spread:22;}
 .years-chapter:not(.is-static):not(#_u):not(#_v) .years-digits{top:26%;}
 .years-chapter:not(.is-static):not(#_u):not(#_v) .year-panel .year-fan{--cw:50vw;top:56%;}
 .years-chapter:not(.is-static):not(#_u):not(#_v) .year-panel[data-project-count="13"] .year-fan{--cw:46vw;top:50%;}
}

/* P0 (the coordinator, 24 Oct 2026 ~12:15Z, after Olya ~12:05Z «аккуратные наложения … чтобы все продумано было»): the years
   as ruled rows (js/chapters.js ROWS; ?years=fan the fans). The numerals stand where «And the rest.» stands, at the grid's
   first column, at 6.5 times the rows' cap at most (Archivo Lens cap .7475 em; the rows' Basel at 14 px, cap 10 px: 86 px, cap
   64; a phone 56 px, the phones' display XL). The rows stand in the right seven columns as the rest index's do, the name at
   column 6 and the card's line pinned to column 9 (12 columns, 4vw margins, 2vw gutters); a row's cover prints in under the
   numerals while the hand or the focus is on it. Phones: the numerals, the year's lead cover at the image radius, the names
   in two columns under hairlines. The static chapter (reduced motion): the year at the same size over its rows, no picture */
html body #years.has-year-rows:not(.is-static) .years-digits:not(#_r):not(#_s){left:4vw;top:clamp(112px,16svh,150px);transform:none;justify-content:flex-start;font-size:86px;line-height:.8}
html body #years.has-year-rows .year-panel.is-rows .yr-rows{position:absolute;inset:0;pointer-events:none}
html body #years.has-year-rows .year-panel.is-rows .yr-list:not(#_r){position:absolute;left:43.17vw;right:4vw;top:clamp(112px,16svh,150px);grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(var(--rows,5),auto);pointer-events:auto}
html body #years.has-year-rows .year-panel.is-rows .yr-list .ri-link:not(#_r){display:grid;grid-template-columns:23.5vw minmax(0,1fr);gap:0}
html body #years.has-year-rows .year-panel.is-rows .yr-list .ri-year:not(#_r){min-width:0;overflow:hidden;text-overflow:ellipsis}
html body #years.has-year-rows .year-panel.is-rows .yr-view:not(#_r){display:block;position:absolute;left:4vw;top:calc(clamp(112px,16svh,150px) + 86px*.9 + clamp(24px,3.4svh,36px));width:min(29.33vw,440px);margin:0;visibility:hidden}
html body #years.has-year-rows .year-panel.is-rows .yr-view.is-on:not(#_r){visibility:visible}
/* the picture says nothing the row does not: no line under it (the rest index keeps its own, its rows name only the year) */
html body #years.has-year-rows .year-panel.is-rows .yr-view .ri-what:not(#_r){display:none}
/* the row under the hand stays in ink, here and in the rest index: redesign.css's old a:hover took it to the second tone while
   the rows around it stepped back to the same tone, so the hovered name read as the quiet one */
html body #years .ri-list .ri-row.is-on .ri-link:not(#_r){color:var(--ink)}
html body #years.has-year-rows.is-static .year-panel.is-rows .yr-rows:not(#_r){position:static}
html body #years.has-year-rows.is-static .year-panel.is-rows .year-label:not(#_r){font-size:86px;line-height:.8;letter-spacing:-.022em;margin:0}
html body #years.has-year-rows.is-static .year-panel.is-rows .yr-list:not(#_r):not(#_s){position:static;margin-top:24px}
html body #years.has-year-rows.is-static .year-panel.is-rows .yr-view:not(#_r):not(#_s){display:none}
@media (max-width:700px){
 html body #years.has-year-rows:not(.is-static) .years-digits:not(#_r):not(#_s){left:22px;top:clamp(84px,11svh,112px);font-size:56px}
 html body #years.has-year-rows .year-panel.is-rows .yr-rows:not(#_r){inset:auto 22px auto 22px;top:calc(clamp(84px,11svh,112px) + 56px*.9 + 16px)}
 html body #years.has-year-rows .year-panel.is-rows .yr-view:not(#_r){position:static;width:100%;margin:0 0 16px}
 html body #years.has-year-rows .year-panel.is-rows .yr-view .ri-pic{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-image,10px);background:var(--paper)}
 html body #years.has-year-rows .year-panel.is-rows .yr-view .ri-what{display:none}
 html body #years.has-year-rows .year-panel.is-rows .yr-list:not(#_r):not(#_s){position:static;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--rows2,3),auto);column-gap:12px}
 html body #years.has-year-rows .year-panel.is-rows .yr-list .ri-link:not(#_r){display:flex;padding:3.5px 0;line-height:17px}
 html body #years.has-year-rows .year-panel.is-rows .yr-list .ri-row.is-mid::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
 html body #years.has-year-rows.is-static .year-panel.is-rows .year-label:not(#_r){font-size:56px}
}
/* P0 plates (rule 1, the coordinator, 24 Oct 2026 ~12:15Z; Olya ~12:05Z «подложки белые в светлой и черные в темной»): the
   About career rail's open panel is the page's own ground, opaque once open (#FFFFFF by day, #000000 by night), at the panel
   radius, with no glass, blur, grey or border, in the live world too; a closed panel is its label, and the hover adds no ground */
html body .career-detail.is-rail .cr-panel:not(#_p):not(#_q),html body .career-detail.is-rail .cr-panel:nth-child(2n):not(#_p):not(#_q){background:color-mix(in srgb,#fff calc(var(--w,0)*100%),transparent)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;border-radius:16px!important;box-shadow:none!important}
html[data-theme=dark] body .career-detail.is-rail .cr-panel:not(#_p):not(#_q),html[data-theme=dark] body .career-detail.is-rail .cr-panel:nth-child(2n):not(#_p):not(#_q){background:color-mix(in srgb,#000 calc(var(--w,0)*100%),transparent)!important}

/* P0 (the coordinator, 24 Oct 2026 ~12:15Z, after Olya ~12:05Z «сцены может лишние»): the domains' cards show the cases they
   open (Kash app, Kinic, Sonic) in their 16:10 covers, whole, at the image radius; the box takes the cover's own ratio, so no
   ground band and no crop */
html body #principles .industry-panel .chapter-media:has(.domain-cover):not(#_p):not(#_q){aspect-ratio:1.6!important;border-radius:var(--r-image,10px)!important;overflow:hidden!important;background:none!important}
html body #principles .industry-panel .chapter-media .work-image:has(.domain-cover):not(#_p):not(#_q){border-radius:var(--r-image,10px)!important}
html body #principles .industry-panel .chapter-media .work-image>img.domain-cover:not(#_p):not(#_q){object-fit:cover!important;object-position:center!important;border-radius:var(--r-image,10px)!important;max-width:none;max-height:none}