/* Two isolated art directions. The approved scope is desktop Ukrainian only. */
body[data-direction]{--sc-font-display:Onest,Arial,sans-serif;padding-bottom:68px}
body[data-direction] .wrap{width:min(1400px,calc(100% - 96px))}
body[data-direction] .site-header{position:sticky;top:12px;z-index:40;margin:12px 20px 0;border:0;box-shadow:none}
body[data-direction] .header-inner{height:70px}
body[data-direction] .desktop-nav{margin-left:auto;margin-right:50px;gap:32px}
body[data-direction] .header-cta{border-bottom:0;padding:12px 18px;border-radius:9px;font-size:12px;gap:24px}
.direction-hero{overflow:hidden;isolation:isolate}
.direction-hero h1{font-weight:400;letter-spacing:-.075em;line-height:.94;text-wrap:initial;margin:0}
.direction-description{font-size:1.04rem;line-height:1.65;max-width:390px}
.direction-action{display:flex;align-items:center;gap:25px;margin-top:28px}
.direction-action .button{gap:35px;min-height:58px;padding-inline:25px}
.direction-promise{font-size:11px;line-height:1.6}
.hero-baseline{display:flex;align-items:center;justify-content:space-between;min-height:72px;border-top:1px solid #796c6350;font-size:12px;position:relative;z-index:5}
.hero-baseline a{display:flex;align-items:center;gap:35px}
.hero-baseline a span{font-size:22px}
.direction-mockup{display:block;padding:0;width:100%;position:relative;background:#e5e1da;border:1px solid #ffffff65;border-radius:11px;overflow:hidden;box-shadow:0 25px 35px -20px #14212a6b;transition:box-shadow 200ms,translate 200ms}
.direction-mockup>span:first-child{display:block}.direction-mockup img{display:block;width:100%;height:auto}
.mockup-open{position:absolute;right:14px;bottom:14px;width:36px;height:36px;display:grid;place-content:center;background:#eeeae4;color:#252522;border-radius:50%;font-size:20px}
.direction-mockup:hover{box-shadow:0 32px 45px -19px #14212a85;translate:0 -3px}
.showcase-panel[hidden]{display:none}

/* A: concrete, graphite, and a concentrated orange material. */
body[data-direction=warm]{--paper:#d8d2c8;--ink:#292929;--muted:#635c54;--line:#b2a797;--orange:#ed7221;--sc-canvas:#d8d2c8;--sc-ink:#292929;background:var(--paper);color:var(--ink)}
[data-direction=warm] .site-header{background:#eeeae4;border-radius:12px}
[data-direction=warm] .header-cta{background:#292929;color:#f6f0e4}
[data-direction=warm] .warm-hero{background:#bdb5a7;margin-top:-82px;padding-top:82px}
.warm-hero-grid{display:grid;grid-template-columns:.93fr 1.07fr;gap:4%;padding-top:58px;padding-bottom:50px;min-height:742px;align-items:center}
.warm-hero .hero-label{font-size:12px;margin-bottom:32px;color:#60584f}
.warm-hero h1{font-size:clamp(76px,7.5vw,122px)}
.warm-hero h1>span{display:block;color:#514437;margin-left:8%}
.warm-hero .direction-description{margin-top:28px;max-width:380px;color:#524c45;font-size:15px}
[data-direction=warm] .primary{background:#292929;color:#faf3e8;border-radius:8px}
[data-direction=warm] .primary:hover{background:#594231}
.warm-gallery{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-width:0;padding-top:45px}
.gallery-material{position:absolute;inset:32px -10px 155px 50px;background:#e77728;border-radius:50% 50% 12px 12px;transform:rotate(6deg);overflow:hidden;z-index:-1;box-shadow:12px 30px 35px -25px #81513377}
.gallery-material>span{position:absolute;inset:40px 38px 0;background:#ed8e49;border-radius:50% 50% 0 0;box-shadow:inset 12px 8px 25px #b34e2550;transform:rotate(-13deg);transform-origin:bottom center}
.gallery-caption{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-bottom:30px;padding:0 15px;color:#422e20}
.gallery-caption>span:last-child{font-size:38px;line-height:1}
.spotlight-frame{position:relative;width:105%;margin-left:-6%;rotate:-5deg;z-index:2;min-height:355px;display:grid;align-items:center}
.spotlight-frame .direction-mockup{border-radius:9px;box-shadow:0 25px 40px -15px #392d2766}
.spotlight-caption{display:flex;justify-content:space-between;gap:20px;font-size:10px;margin:27px 0 23px;color:#534839}
.spotlight-caption>span:last-child{white-space:nowrap}
.showcase-thumbnails{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;position:relative;z-index:3}
.showcase-thumbnails button{min-width:0;padding:0;border:0;border-radius:5px;background:transparent;text-align:left;color:#51493f}
.thumbnail-image{display:block;aspect-ratio:1.6;overflow:hidden;background:#dad4c9;border-radius:5px;border:2px solid transparent;transition:transform 200ms,border-color 200ms}
.thumbnail-image>img{width:100%;height:100%;object-fit:contain}
.showcase-thumbnails button[aria-pressed=true] .thumbnail-image{border-color:#292929;transform:translateY(-5px)}
.showcase-thumbnails button:hover .thumbnail-image{transform:translateY(-5px)}
.thumbnail-label{display:block;font-size:9px;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-direction=warm] .why-site{width:calc(100% - 40px);max-width:none;padding:65px max(48px,calc((100vw - 1400px)/2));background:#292929;color:#eee9df;border:0;border-radius:0 0 24px 24px}
[data-direction=warm] .why-intro{color:#aca399}
[data-direction=warm] .first-impression>p{font-size:clamp(35px,3.4vw,54px)}
[data-direction=warm] .first-impression>p:last-child span{color:#f39a59}
[data-direction=warm] .why-note{margin-top:45px}
[data-direction=warm] .why-note p{color:#bfb6aa}
[data-direction=warm] .work{padding-top:110px;padding-bottom:75px}
[data-direction=warm] .work .section-head{display:grid;grid-template-columns:1.4fr 1fr;gap:80px;align-items:end;max-width:none;margin-bottom:55px}
[data-direction=warm] .work .section-head h2{font-size:clamp(44px,4.8vw,76px)}
[data-direction=warm] .work .section-intro{font-size:16px;max-width:320px;padding:0 0 3px;margin-left:auto}
[data-direction=warm] .case-toolbar,[data-direction=warm] .case-stage{background:#c3b8a6}
[data-direction=warm] .case-toolbar{border-radius:10px 10px 0 0}
[data-direction=warm] .case-stage{border-radius:0 0 10px 10px}
[data-direction=warm] .lens-tabs button{border-color:#aa9c8b;border-radius:7px}
[data-direction=warm] .work-grid{grid-template-columns:1fr 1fr;gap:40px}
[data-direction=warm] .project-visual{background:#c4b9a8;border-radius:10px}
[data-direction=warm] .project-1 .project-visual{background:#7e8174}
[data-direction=warm] .project-1{margin-top:85px}
[data-direction=warm] .catalog-link{background:#ed782c;border:0;border-radius:12px;box-shadow:none;padding:60px}
[data-direction=warm] .catalog-link h3{font-size:clamp(35px,3.7vw,58px)}
[data-direction=warm] .catalog-link>div>p:not(.eyebrow){color:#57341e}
[data-direction=warm] .catalog-number{color:#60391e}
[data-direction=warm] .catalog-link .underlined{border-radius:7px;background:#292929}
[data-direction=warm] .starting{padding-block:85px;border-top:1px solid #aa9f8f}
[data-direction=warm] .intent-switch button{border-color:#a59886;border-radius:8px}
[data-direction=warm] .intent-switch button[aria-pressed=true]{background:#ed782c}
[data-direction=warm] .light-process{background:#bbb1a1;padding-block:90px}
[data-direction=warm] .process-image{border-radius:10px}
[data-direction=warm] .process-image>p{background:#d8d2c8e8;border-radius:8px;color:#292929}
[data-direction=warm] .process-list li{border-color:#9f9280}
[data-direction=warm] .plan{background:#e4dfd5;border-color:#b9ad9b;border-radius:10px}
[data-direction=warm] .plan-featured{background:#c4b49d;border-color:#9f886b}
[data-direction=warm] .subscription{border-color:#b2a797}
[data-direction=warm] .contact{background:#ed782c;border-radius:16px}
[data-direction=warm] .footer{background:#eeeae4}

/* B: calm slate canvas and a working colour-coded index. */
body[data-direction=cool]{--paper:#d6dad7;--ink:#172b36;--muted:#54666b;--line:#a5b3b5;--light:#c7cecd;--sc-canvas:#d6dad7;--sc-ink:#172b36;--sc-ink-soft:#54666b;background:var(--paper);color:var(--ink)}
[data-direction=cool] .site-header{background:#142933;color:#e2e7e4;border-radius:24px}
[data-direction=cool] .brand img,[data-direction=cool] .footer-brand img{width:134%;left:-17%;aspect-ratio:1}
[data-direction=cool] .header-cta{background:#c7cecd;color:#172b36;border-radius:20px}
[data-direction=cool] .desktop-nav a:hover{color:#fff}
[data-direction=cool] .cool-hero{background:#c7cecd;margin-top:-82px;padding-top:82px}
.cool-hero-top{text-align:center;padding-top:40px}
.cool-hero .hero-label{font-size:11px;letter-spacing:.03em;margin-bottom:20px;color:#53646a}
.cool-hero h1{font-size:clamp(64px,5.8vw,94px);line-height:1.01;letter-spacing:-.065em;color:#203441}
.cool-hero h1 span{color:#536a76}
.cool-hero .direction-description{max-width:590px;margin:22px auto 0;font-size:15px;line-height:1.55}
.cool-hero .direction-action{justify-content:center;margin-top:22px;gap:20px}
.cool-hero .direction-promise{text-align:left}
[data-direction=cool] .primary{background:#243d4b;border-radius:32px;color:#f2f4f2}
[data-direction=cool] .primary:hover{background:#405e6b}
.color-chapters{display:flex;height:430px;margin-top:35px;overflow:hidden;border-radius:28px;box-shadow:0 25px 40px -30px #11232c66}
.color-chapter{position:relative;flex:0 0 78px;min-width:0;overflow:hidden;transition:flex-grow 620ms cubic-bezier(.22,1,.36,1);color:#1d303a}
.color-chapter.is-open{flex:1 0 78px}
.chapter-work{background:#203142;color:#e0e5e4}.chapter-lab{background:#bfc0c0;color:#293640}.chapter-approach{background:#eeeee9;color:#2c3d44}.chapter-formats{background:#e78354;color:#3e2c25}.chapter-contact{background:#4f5d75;color:#f2f2ed}
.chapter-toggle{position:absolute;inset:0 auto 0 0;width:78px;padding:27px 0;border:0;background:transparent;color:inherit;display:flex;align-items:center;flex-direction:column;justify-content:space-between;z-index:3;transition:background 180ms}
.chapter-toggle:hover{background:#ffffff13}
.chapter-number{font-size:10px;opacity:.7}
.chapter-name{writing-mode:vertical-rl;transform:rotate(180deg);font-size:30px;letter-spacing:-.06em}
.chapter-arrow{font-size:24px;line-height:1}
.chapter-content{height:100%;padding:27px 35px 25px 104px;overflow:hidden;min-width:470px;animation:chapter-reveal 400ms ease both}
.chapter-content[hidden]{display:none}
.chapter-heading{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:19px;font-size:11px}
.chapter-heading>p{font-size:15px}
.chapter-heading>a{border-bottom:1px solid #ffffff55;padding-bottom:5px;white-space:nowrap}
.chapter-work .direction-mockup{width:min(100%,550px);margin:auto;box-shadow:0 20px 30px -20px #0006}
.chapter-note{font-size:10px;margin-top:13px;opacity:.75;text-align:center}
.chapter-lab{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-block:30px 20px}
article.chapter-lab{display:block;margin:0}
.chapter-lab-copy{font-size:15px;line-height:1.6;max-width:440px;margin-top:20px}
.chapter-link{display:inline-flex;font-size:13px;gap:20px;border-bottom:1px solid currentColor;padding-bottom:7px;margin-top:23px}
.chapter-eyebrow{font-size:9px;letter-spacing:.1em;margin-bottom:26px;opacity:.8}
.chapter-content h2{font-size:clamp(36px,3.8vw,58px);font-weight:400;letter-spacing:-.055em;line-height:1.02}
.cool-hero .hero-baseline{min-height:57px;border:0;color:#53646a}
[data-direction=cool] .why-site{padding-top:80px;padding-bottom:85px;border-top:0}
[data-direction=cool] .first-impression{gap:0;border-bottom:1px solid #a5b3b5;padding-bottom:45px}
[data-direction=cool] .first-impression>p{padding-left:35px;border-left:1px solid #a5b3b5;font-size:clamp(32px,3.5vw,52px)}
[data-direction=cool] .first-impression>p:first-child{padding-left:0;border:0}
[data-direction=cool] .first-impression>p:last-child span{color:#597581}
[data-direction=cool] .orange-rule{background:#4f6876}
[data-direction=cool] .work{padding-top:40px}
[data-direction=cool] .work .section-head{max-width:950px;text-align:center;margin:0 auto 50px}
[data-direction=cool] .work .section-head h2{font-size:clamp(42px,4.5vw,70px)}
[data-direction=cool] .work .section-intro{margin:auto;max-width:600px;font-size:16px}
[data-direction=cool] .case-toolbar{background:#526772;color:#ecf0ed;border-radius:28px 28px 0 0;padding-inline:35px}
[data-direction=cool] .case-stage{background:#526772;border-radius:0 0 28px 28px;padding-bottom:45px}
[data-direction=cool] .compare-toggle{border-color:#8b9da3}
[data-direction=cool] .compare-toggle button{color:#eef0ed}
[data-direction=cool] .compare-toggle button[aria-pressed=true]{background:#d6dedc;color:#18313d}
[data-direction=cool] .lens-tabs button{border-color:#97aaaf;border-radius:24px}
[data-direction=cool] .lens-tabs button[aria-pressed=true]{background:#2a4452;border-color:#2a4452;color:#f1f3ef}
[data-direction=cool] .work-grid{grid-template-columns:1fr 1fr;gap:35px}
[data-direction=cool] .project-1{margin-top:0}
[data-direction=cool] .project-visual,[data-direction=cool] .project-1 .project-visual{border-radius:28px;aspect-ratio:1.28;background:#aebcbf}
[data-direction=cool] .project-1 .project-visual{background:#768d96}
[data-direction=cool] .catalog-link{background:#2b4655;color:#e5ebe7;border-radius:28px;border:0;padding:55px;box-shadow:none}
[data-direction=cool] .catalog-link>div>p:not(.eyebrow){color:#bfccd0}
[data-direction=cool] .catalog-number{color:#92a7b0}
[data-direction=cool] .catalog-link .underlined{background:#d1dbd9;color:#243d4b;border-radius:24px}
[data-direction=cool] .starting{border-top:1px solid #a5b3b5}
[data-direction=cool] .intent-switch button{border-color:#95a9ae;border-radius:24px}
[data-direction=cool] .intent-switch button[aria-pressed=true]{background:#46616e;border-color:#46616e;color:#edf0ed}
[data-direction=cool] .light-process{background:#bfcbcc}
[data-direction=cool] .process-image{border-radius:28px}
[data-direction=cool] .process-image>p{background:#e0e7e4ed;border-radius:24px;color:#263c47}
[data-direction=cool] .process-list li{border-color:#96aaaf}
[data-direction=cool] .plan{background:#e0e5e1;border-color:#b1bec0;border-radius:25px}
[data-direction=cool] .plan-featured{background:#a9bdc1;border-color:#7e999f}
[data-direction=cool] .plan-featured .primary{background:#243d4b}
[data-direction=cool] .subscription{border-color:#a5b3b5}
[data-direction=cool] .contact{background:#253f4d;color:#e2e8e4;border-radius:32px}
[data-direction=cool] .contact h2{color:#edf0eb}
[data-direction=cool] .contact-copy>p:not(.eyebrow),[data-direction=cool] .contact-form label{color:#d1dddc}
[data-direction=cool] .contact-form small,[data-direction=cool] .form-note{color:#a5b9bd}
[data-direction=cool] .contact-form input,[data-direction=cool] .contact-form textarea{color:#f0f3ef;border-color:#75919a}
[data-direction=cool] .contact-form input::placeholder,[data-direction=cool] .contact-form textarea::placeholder{color:#a8bfc3}
[data-direction=cool] .contact-form .black{background:#cad7d5;color:#203b49;border-radius:30px}
[data-direction=cool] .contact-links a{border-color:#819ca5}
[data-direction=cool] .chosen-intent,[data-direction=cool] #form-status{border-color:#829da5;color:#d6e1df}
[data-direction=cool] .footer{background:#142933;color:#e4e9e5;padding-bottom:40px}
[data-direction=cool] .footer-top p,[data-direction=cool] .footer-bottom{color:#9db0b6}
[data-direction=cool] .footer-bottom{border-color:#48626c}
[data-direction=cool] .image-dialog{background:#d6dedb;color:#203b49}
[data-direction=cool] .contact-form input:focus-visible,[data-direction=cool] .contact-form textarea:focus-visible{outline-color:#e6f0eb}
[data-direction=cool] .chapter-toggle:focus-visible{outline-color:currentColor;outline-offset:-6px}
.review-rail{position:fixed;z-index:60;bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;border:1px solid #ffffff55;padding:5px;border-radius:30px;background:#202929ee;box-shadow:0 8px 25px #12212a26;backdrop-filter:blur(12px);color:#e5e9e5;font-size:11px;white-space:nowrap}
.review-rail a{padding:10px 15px;border-radius:22px}
.review-rail a[aria-current=page]{background:#e9e5dc;color:#232d30}
.review-rail a:hover{background:#ffffff20}.review-rail a[aria-current=page]:hover{background:#fff}
.direction-preview .review-rail{display:none}.direction-preview{padding-bottom:0!important}
@keyframes chapter-reveal{from{opacity:0;translate:12px 0}to{opacity:1;translate:0 0}}
@media(min-width:851px) and (max-width:1250px){
 body[data-direction] .wrap{width:calc(100% - 64px)}
 .warm-hero-grid{gap:5%;padding-block:45px;min-height:665px}
 .warm-hero h1{font-size:7.3vw}.warm-hero .direction-description{font-size:14px;max-width:340px}
 .spotlight-frame{min-height:290px}.gallery-material{inset:55px -10px 130px 30px}
 .gallery-caption{margin-bottom:15px}.spotlight-caption{font-size:8px;margin-top:20px}
 .showcase-thumbnails{gap:8px}.thumbnail-label{font-size:8px}
 .chapter-toggle{width:62px}.color-chapter{flex-basis:62px}.chapter-content{padding-left:83px;min-width:410px}
 .chapter-name{font-size:25px}.color-chapters{height:405px}.chapter-work .direction-mockup{max-width:485px}
 .chapter-content h2{font-size:44px}
}
@media(min-width:851px) and (max-height:800px){
 .warm-hero-grid{padding-top:35px;padding-bottom:30px;min-height:600px}
 .warm-hero h1{font-size:clamp(70px,6.3vw,94px)}
 .warm-hero .hero-label{margin-bottom:22px}.warm-hero .direction-description{margin-top:22px;font-size:14px}
 .warm-gallery{padding-top:15px}.gallery-caption{margin-bottom:10px}.spotlight-frame{min-height:300px}
 .gallery-material{inset:20px -10px 130px 50px}.spotlight-caption{margin:15px 0 20px}
 .hero-baseline{min-height:56px}.direction-action{margin-top:20px}
 .cool-hero-top{padding-top:28px}.cool-hero h1{font-size:clamp(60px,5vw,76px)}
 .cool-hero .hero-label{margin-bottom:14px}.cool-hero .direction-description{font-size:14px;margin-top:15px}
 .cool-hero .direction-action{margin-top:17px}.cool-hero .direction-action .button{min-height:48px}
 .color-chapters{height:355px;margin-top:25px}.chapter-content{padding-top:22px;padding-bottom:20px}
 .chapter-work .direction-mockup{max-width:440px}.chapter-heading{margin-bottom:13px}
 .chapter-content h2{font-size:43px}.chapter-eyebrow{margin-bottom:15px}.chapter-lab-copy{font-size:13px;margin-top:14px}.chapter-link{margin-top:17px}
 .chapter-lab{margin-top:18px;margin-bottom:12px}.cool-hero .hero-baseline{min-height:45px}
}
@media(prefers-reduced-motion:reduce){.color-chapter,.chapter-content,.direction-mockup,.thumbnail-image,.review-rail a{animation:none;transition:none}}
.motion-off .color-chapter,.motion-off .chapter-content,.motion-off .direction-mockup,.motion-off .thumbnail-image{animation:none;transition:none}

/* Keep image proportions and labels stable as the selected concept changes. */
.warm-gallery .spotlight-frame{width:100%;margin-left:0;rotate:-3deg;aspect-ratio:1.6;min-height:0}
.showcase-panel{min-width:0;grid-area:1/1}
.warm-gallery .spotlight-caption{position:relative;z-index:3;margin-top:25px}
.direction-mockup .interior-photo img,.direction-mockup .dental-photo img{height:100%;object-fit:cover}
.chapter-content>div.chapter-lab{max-width:700px;margin:20px auto 10px}
article.chapter-lab .chapter-lab-copy{display:none}
article.chapter-lab .chapter-link{margin-top:12px}
@media(min-width:851px) and (max-width:1250px){.color-chapter.is-open{flex-basis:62px}}
@media(min-width:851px) and (max-height:800px){.chapter-content>div.chapter-lab{max-width:520px;margin-top:15px}}
[data-direction=warm] .review-rail{left:32px;transform:none}
