.brand{min-height:44px}
.direction-stage__controls{height:48px;padding-inline:4px}
.direction-stage__controls{display:none!important}
.direction-stage__controls button,.project-slider__controls button{width:44px;height:44px}
.project-slider__controls{height:48px;padding-inline:4px;gap:8px}
.project-slider__track{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;contain:layout paint}
.project-slider__track::-webkit-scrollbar{display:none}
.project-slider__slide{flex:0 0 100%;width:100%;min-width:100%;max-width:100%;scroll-snap-align:start}
.project-slider__slide picture{display:block;width:100%;height:100%}
[hidden]{display:none!important}
.direction-swipe-hint{height:38px;margin-top:-38px;display:flex;align-items:center;justify-content:flex-end;gap:13px;color:#6f7c80;font:400 11px/1 Bebas,Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase}
.direction-swipe-hint i{width:72px;height:2px;position:relative;overflow:hidden;background:#d1d5d2}
.direction-swipe-hint b{width:25px;height:2px;position:absolute;left:0;top:0;background:var(--blue);animation:swipe-cue 2.4s var(--ease) infinite}
.direction-stage.is-portrait-media{background:#d8d4cd}
.direction-stage.is-portrait-media>img{object-fit:contain}
.direction-stage.has-multiple-images{cursor:grab;touch-action:pan-y}
.direction-stage.has-multiple-images.is-dragging{cursor:grabbing}
.scope-step--timing h3{margin-bottom:10px}
.scope-step__lead{max-width:520px;margin:0 0 26px;color:#748083;font-size:14px}
.scope-options--timing button{min-height:142px;padding:20px;align-content:stretch;grid-template-rows:auto 1fr auto}
.scope-options--timing button strong{align-self:end;margin-top:22px;font-size:24px;font-weight:500;line-height:1.08;letter-spacing:-.035em}
.scope-options--timing button small{margin-top:7px;font:400 11px/1.2 Bebas,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}
@keyframes swipe-cue{0%,100%{transform:translateX(0)}50%{transform:translateX(47px)}}
@media(min-width:761px){
  .direction-tabs button{height:100px;min-height:100px;padding-top:17px;padding-bottom:15px}
  .direction-tabs button small{margin-top:6px}
}
@media(max-width:820px) and (min-width:761px){
  h2{font-size:64px;line-height:.92}
  .section-head,.section-head--split{display:block}
  .section-head>p:last-child,.section-head--split>p:last-child{margin-top:24px;max-width:520px}
}
@media(max-width:760px){
  .direction-swipe-hint{height:34px;margin:-18px 0 10px;justify-content:flex-start}
  .direction-swipe-hint i{flex:1;max-width:92px}
  .direction-stage{height:auto;min-height:0;aspect-ratio:4/3}
  .direction-stage.is-portrait-media{aspect-ratio:3/4}
  .direction-stage.is-portrait-media>img{object-fit:cover}
  .real-card--wide .project-slider{height:auto;min-height:0;max-height:none;aspect-ratio:4/3}
  .real-card--portrait .project-slider,.real-card--portrait>img{height:auto;min-height:0;max-height:none;aspect-ratio:3/4}
  .real-card--wardrobe .project-slider{aspect-ratio:9/16}
  .real-card--walk-in .project-slider{aspect-ratio:9/16}
  .real-card--entry .project-slider,.real-card--bathroom .project-slider{aspect-ratio:3/4}
  .project-slider__slide picture{height:100%}
  .project-slider__slide img{object-fit:contain;object-position:center}
  .scope-step--timing h3{margin-bottom:7px}
  .scope-step__lead{margin-bottom:18px;font-size:12px;line-height:1.4}
  .scope-options--timing button{min-height:104px;padding:14px;grid-template-columns:minmax(0,1fr) minmax(96px,auto);grid-template-rows:auto auto;gap:10px 12px;align-items:end}
  .scope-options--timing button strong{justify-self:end;max-width:150px;margin:0;text-align:right;font-size:19px;line-height:1.05}
  .scope-options--timing button small{grid-column:1/-1;margin:0;font-size:9px}
}
@media(prefers-reduced-motion:reduce){.direction-swipe-hint b{animation:none;left:47px}}

/* FAQ structure must remain stable after CMS text registration in Chromium/Yandex. */
.faq-list summary>.faq-list__question,
.faq-list summary>.cms-text-fragment{
  flex:1 1 auto;
  min-width:0;
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  display:block;
  font:inherit;
  line-height:1.28;
  transform:none!important;
}
.faq-list summary>.faq-list__toggle{
  flex:0 0 40px;
  width:40px;
  height:40px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:21px;
  line-height:1;
  transition:transform .3s var(--ease);
}
.faq-list details[open] summary>.faq-list__toggle{transform:rotate(45deg)}
@media(max-width:760px){
  .faq-list summary{min-height:88px;padding:18px 0;align-items:center;font-size:17px;line-height:1.28}
  .faq-list summary>.faq-list__toggle{flex-basis:36px;width:36px;height:36px}
}

/* Motion pass: stable tabs, layered media and editorial scroll rhythm. */
.direction-tabs button{position:relative;padding-left:24px;overflow:hidden;isolation:isolate}
.direction-tabs button:before{content:"";position:absolute;inset:0;z-index:-1;background:#e2e5e0;opacity:0;transform:scaleX(.965);transform-origin:left center;transition:opacity .5s var(--ease),transform .72s var(--ease)}
.direction-tabs button.is-active{padding-left:24px;background:transparent}
.direction-tabs button.is-active:before{opacity:1;transform:scaleX(1)}
.direction-tabs button b,.direction-tabs button span,.direction-tabs button small{transition:color .45s var(--ease),transform .55s var(--ease),opacity .45s var(--ease)}
.direction-tabs button.is-active span,.direction-tabs button.is-active small{transform:translate3d(6px,0,0)}
.direction-stage>.direction-stage__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:none;transition:none!important}
.direction-stage>.direction-stage__media.is-active{opacity:1;transform:none}
.direction-stage__caption>span,.direction-stage__caption>p,.direction-stage__caption>small{backface-visibility:hidden;transform:translateZ(0)}

/* Static content is the fail-safe when scripts or the CMS are unavailable. */
html:not(.motion-ready) .observe{opacity:1;transform:none}
.motion-ready .observe{opacity:0;transition-duration:.68s;transition-delay:var(--reveal-delay,0ms);transform:translate3d(0,24px,0);will-change:opacity,transform}
.motion-ready .observe.is-visible{opacity:1;transform:translate3d(0,0,0);will-change:auto}
.motion-ready .section-head.observe{opacity:1;transform:none;transition:none;will-change:auto}
.motion-ready .section-head.observe>.eyebrow,.motion-ready .section-head.observe>h2,.motion-ready .section-head.observe>p:last-child,.motion-ready .section-head.observe>div{opacity:0;transform:translate3d(0,22px,0);transition:opacity .78s var(--ease),transform .9s var(--ease)}
.motion-ready .section-head.observe>h2,.motion-ready .section-head.observe>div{transition-delay:90ms}
.motion-ready .section-head.observe>p:last-child{transition-delay:180ms}
.motion-ready .section-head.observe.is-visible>.eyebrow,.motion-ready .section-head.observe.is-visible>h2,.motion-ready .section-head.observe.is-visible>p:last-child,.motion-ready .section-head.observe.is-visible>div{opacity:1;transform:translate3d(0,0,0)}
.motion-ready .real-card.observe figcaption span,.motion-ready .real-card.observe figcaption small{opacity:0;transform:translate3d(0,10px,0);transition:opacity .58s var(--ease),transform .68s var(--ease)}
.motion-ready .real-card.observe figcaption small{transition-delay:80ms}
.motion-ready .real-card.observe.is-visible figcaption span,.motion-ready .real-card.observe.is-visible figcaption small{opacity:1;transform:translate3d(0,0,0)}

.project-slider__track{scroll-behavior:smooth;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.project-slider__slide{scroll-snap-stop:always;overflow:hidden}
.project-slider__slide img{transform:none;opacity:1;transition:none;backface-visibility:hidden}
.project-slider__controls button{transition:opacity .25s var(--ease),transform .3s var(--ease)}
.project-slider__controls button:not(:disabled):hover{transform:translate3d(0,-1px,0)}
.project-slider__controls button:disabled{opacity:.32;cursor:default}

@media(max-width:760px){
  .direction-tabs button{padding-left:18px}
  .direction-tabs button.is-active{padding-left:18px}
  .direction-tabs button.is-active span,.direction-tabs button.is-active small{transform:translate3d(3px,0,0)}
  .motion-ready .observe{transform:translate3d(0,16px,0);transition-duration:.62s}
  .motion-ready .observe.is-visible{transform:translate3d(0,0,0)}
  .motion-ready .section-head.observe>.eyebrow,.motion-ready .section-head.observe>h2,.motion-ready .section-head.observe>p:last-child,.motion-ready .section-head.observe>div{transform:translate3d(0,16px,0);transition-duration:.72s}
}

@media(prefers-reduced-motion:reduce){
  .direction-stage__media{opacity:0;transform:none}
  .direction-stage__media.is-active{opacity:1}
  .direction-tabs button:before,.direction-tabs button b,.direction-tabs button span,.direction-tabs button small,.project-slider__slide img{transition:none}
  .project-slider__slide img{opacity:1;transform:none}
}

/* Tablet project gallery: balanced two-column rhythm without oversized portrait cards. */
@media(min-width:761px) and (max-width:899px){
  .site-header__inner{height:72px;grid-template-columns:1fr auto;gap:20px}
  .menu-toggle{width:68px;height:44px;padding:0;border:0;background:transparent;color:#fff;display:grid;place-items:center;font:400 11px/1 Bebas,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
  .menu-toggle i,.menu-toggle i:before{content:"";display:block;width:20px;height:1px;background:currentColor;transition:transform .25s var(--ease)}
  .menu-toggle i:before{transform:translateY(5px)}
  .menu-toggle[aria-expanded=true] i{transform:rotate(45deg)}
  .menu-toggle[aria-expanded=true] i:before{transform:rotate(90deg)}
  .site-nav{display:none;position:absolute;top:72px;left:0;right:0;padding:28px 24px 34px;background:rgba(24,32,40,.98);flex-direction:column;gap:20px;font-size:18px}
  .site-nav.is-open{display:flex}
  .header-cta{display:none}
  .real-gallery{display:grid;width:var(--shell);grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 16px;align-items:start}
  .real-gallery>.real-pair{display:contents}
  .real-card{width:100%;min-width:0;margin:0}
  .real-card--wide{grid-column:1/-1}
  .real-card .project-slider{width:100%;height:auto;min-width:0;min-height:0;max-width:100%;max-height:none;overflow:hidden}
  .real-card--wide .project-slider{aspect-ratio:4/3}
  .real-card--entry .project-slider,.real-card--bathroom .project-slider{aspect-ratio:3/4}
  .real-card--wardrobe .project-slider,.real-card--walk-in .project-slider{aspect-ratio:9/16}
  .real-card .project-slider__track{width:100%;overflow:hidden}
  .real-card .project-slider__slide{min-width:100%;max-width:none}
  .real-card .project-slider__slide img{width:100%;max-width:none;object-fit:contain;object-position:center}
  .real-card figcaption{min-height:64px;padding:12px 0 16px}
  .real-card figcaption span{font-size:20px}
}

/* Desktop project gallery: Figma 2/3 + 1/3 first row and three equal cards below. */
@media(min-width:900px){
  .real-gallery{
    --project-card-height:clamp(520px,calc((min(100vw - 80px,1360px) - 32px)/3*1.21 + 64px),600px);
    width:min(var(--shell),1360px);
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:32px 16px;
    align-items:start;
  }
  .real-gallery>.real-pair{display:contents}
  .real-card{
    width:100%;
    min-width:0;
    height:var(--project-card-height);
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
  }
  .real-card--wide{
    grid-column:1/3;
    grid-row:1;
  }
  .real-card--entry{grid-column:3;grid-row:1}
  .real-card--wardrobe{grid-column:1;grid-row:2}
  .real-card--walk-in{grid-column:2;grid-row:2}
  .real-pair--walk-in-bathroom>.real-card--bathroom{grid-column:3;grid-row:2}
  .real-card .project-slider{
    width:100%;
    height:100%;
    min-height:0;
    max-height:none;
    aspect-ratio:auto;
    overflow:hidden;
  }
  .project-slider__slide img{
    object-fit:cover;
    object-position:center;
  }
  .real-card--entry .project-slider__slide img,
  .real-card--wardrobe .project-slider__slide img,
  .real-card--walk-in .project-slider__slide img{object-position:center bottom}
  .real-card--bathroom .project-slider__slide img{object-position:center}
  .real-card figcaption{min-height:64px;padding:14px 0 16px;gap:12px}
  .real-card figcaption span{flex:1 1 auto;font-size:20px;white-space:nowrap}
  .real-card figcaption small{flex:0 1 136px;max-width:136px}
}

.choice,.scope-options button{position:relative;isolation:isolate;overflow:hidden}
.choice__cms-image{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:opacity .25s ease}
.has-cms-image::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,28,34,.86),rgba(20,28,34,.48))}
.choice.has-cms-image,.scope-options button.has-cms-image{color:#fff}
.choice.has-cms-image small,.scope-options button.has-cms-image small{color:rgba(255,255,255,.76)}

/* Let project captions wrap before they can widen a narrow desktop column. */
@media(min-width:900px) and (max-width:1100px){
  .real-card figcaption,.real-card figcaption span,.real-card figcaption small{min-width:0}
  .real-card figcaption span{white-space:normal}
}