/* Neutral brand gray, matched to the current Kvadrat website. */
:root{--paper:#e5e5e5;--glass:rgba(229,229,229,.68);--muted:#737373;--rule:#c7c7c7;color-scheme:light}
html,body{background:#e5e5e5}
.chapter,.subchapter,.composition:not(.evening),.image-layout,.sequence-track,.sequence-stage{background:transparent}
.image-trigger,.evening .image-trigger{background:transparent}
.reveal.visible{transform:none}
.intro-facts .location-fact span{white-space:nowrap}
.intro-subtitle{margin:-18px 0 36px;font-size:clamp(14px,1.4vw,18px);line-height:1.6;color:var(--muted)}
.zone-number{display:inline-flex;align-items:baseline;gap:.16em;white-space:nowrap;letter-spacing:-.04em}
.zone-digit{font-size:.5em;line-height:1;letter-spacing:0}
.subchapter-number{color:#a0a0a0}
.subchapter .chapter-sub:empty{display:none}

/* Only the image and its material markers scale; the expand sign stays fixed. */
.image-visual{transition:transform 1.4s cubic-bezier(.2,.7,.25,1)}
.composition:not(.gallery) .image-cell:hover .image-visual{transform:scale(1.09);transition:transform 12s linear}
.image-expand{position:absolute;right:18px;bottom:13px;z-index:7;color:#fff;font-size:25px;line-height:1;opacity:0;pointer-events:none;text-shadow:0 1px 6px #3338;transition:opacity .5s}
.image-cell:hover .image-expand,.image-cell:focus-within .image-expand{opacity:1}
.composition:not(.gallery) .image-trigger:after,.hero-image .image-trigger:after{display:none}
.gallery .image-expand,.hero-image .image-expand{display:none}

/* Galleries scroll normally. Their complete preview panel has a small drift. */
.gallery-shell{min-height:0;align-items:start;padding-bottom:82px}
.gallery-main,.gallery.reverse .gallery-main{position:relative;top:auto;align-self:start}
.gallery-info,.gallery.reverse .gallery-info{margin:0;max-height:none;transform:translate3d(0,var(--gallery-drift,0px),0);will-change:transform}
.gallery .gallery-caption{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin:0 0 22px;min-height:0}
.gallery .gallery-caption h3{margin:0;font-size:clamp(19px,2vw,28px)}
.gallery .gallery-counter{display:block;margin:0;white-space:nowrap}
.gallery .gallery-thumbs{justify-content:space-between}

/* Common arrow column, including the submenu toggle. No extra chevron. */
.navigation{background:rgba(229,229,229,.56);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.navigation>a{grid-template-columns:40px minmax(0,1fr) 30px;gap:24px}
.nav-parent-row{display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:24px;border-top:1px solid #aaa6;padding:25px 0;align-items:start}
.nav-parent-row>a{display:grid;grid-template-columns:40px minmax(0,1fr);gap:24px;font-size:clamp(20px,3vw,38px);font-weight:300;line-height:1.55}
.nav-parent-row>a>small{font-size:12px;margin-top:5px}
.nav-parent-row>a>span{transition:transform .65s var(--motion-ease)}
.nav-parent-row>a:hover>span{transform:translateX(12px)}
.nav-sub-toggle{padding:0;width:30px;font-size:clamp(20px,3vw,38px);font-weight:300;line-height:1.55;display:block}
.nav-arrow{display:block;width:30px;text-align:right;font-weight:300;line-height:1.55}
.nav-sub-toggle:hover .nav-arrow{transform:translate(3px,-3px);transition:transform .4s}
.subnav a{grid-template-columns:55px minmax(0,1fr) 30px;padding:12px 0 12px 64px;gap:16px}
.subnav a .nav-arrow{font-size:22px;line-height:1}
.subnav small{font-size:12px;line-height:1.5}
.nav-group.is-open .subnav a{transition-delay:calc(var(--i)*.055s + .06s)}
.ending-links{align-items:stretch;gap:12px}
.ending-links>.text-link,.ending-subzones a{display:flex;align-items:baseline;justify-content:space-between;gap:20px;width:100%}
.ending-links>.text-link>span:last-child,.ending-subzones a>span:last-child{flex:0 0 20px;text-align:right}
.ending-subzones{margin:0 0 14px 20px;gap:12px}

/* Tracing-paper layers share the neutral color and reveal the page beneath. */
.masthead,.masthead.scrolled,.masthead.menu-open{background:rgba(229,229,229,.64);backdrop-filter:blur(17px);-webkit-backdrop-filter:blur(17px)}
dialog,dialog.overlay,dialog.product-dialog,dialog.note-dialog{background:rgba(229,229,229,.68);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
dialog::backdrop,dialog.overlay::backdrop,dialog.product-dialog::backdrop,dialog.note-dialog::backdrop{background:rgba(41,41,41,.10);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
dialog .overlay-top,dialog .viewer-bottom,dialog .viewer-thumbs,dialog .plan-subhead,dialog .plan-bottom{background:transparent}
.floating-tools{background:rgba(229,229,229,.48);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:#7775;box-shadow:0 3px 18px #29292906}
.floating-tools button[aria-pressed=true]{color:#444}
.details-tool{position:relative;display:flex}
#detailsHint{position:absolute;left:0;bottom:calc(100% + 18px);display:block;width:300px;max-width:calc(100vw - 40px);padding:16px 18px;background:rgba(229,229,229,.84);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid #fff7;border-radius:12px;box-shadow:0 6px 24px #29292913;font-size:11px;line-height:1.8;white-space:normal;opacity:0;visibility:hidden;transform:translateY(7px);transition:opacity .35s,transform .45s,visibility .35s;pointer-events:none}
.details-tool:hover #detailsHint,.details-tool:focus-within #detailsHint{opacity:1;visibility:visible;transform:translateY(0)}

/* Factory photographs have their own natural bounds, with no letterbox slab. */
.product-dialog .product-lead,.product-dialog .product-images{max-width:620px;margin-left:0;margin-right:auto}
.product-lead figure,.product-images figure{width:fit-content;max-width:100%;margin-left:0;margin-right:auto}
.factory-photo{width:fit-content;max-width:100%;background:transparent;text-align:left}
.factory-photo img{width:auto;height:auto;max-width:100%;max-height:43vh;object-fit:contain;margin:0}
.product-images{justify-items:start;gap:12px}
.product-images .factory-photo img{max-height:38vh}
.product-dialog .close-button{background:rgba(229,229,229,.56)}
.product-story{max-width:640px}
.photo-stage{justify-content:flex-start;padding-left:max(var(--edge),35px)}
.photo-stage img{max-height:72vh;margin-left:0;margin-right:auto}

/* Small solid square, matching the studio reference. */
#brandCursor.visible{opacity:1}
#brandCursor i{width:9px;height:9px;left:-4.5px;top:-4.5px;border:0;background:#fff;animation-duration:10s}
#brandCursor.over-action i{width:11px;height:11px;left:-5.5px;top:-5.5px;animation-duration:7s}
#brandCursor.pressed i{width:7px;height:7px;left:-3.5px;top:-3.5px}

@media(min-width:901px) and (prefers-reduced-motion:no-preference){
  .offset,#B018,#B030{padding-bottom:0}
  .offset .image-layout,#B018 .image-layout,#B030 .image-layout{padding-bottom:320px}
  .scroll-sequence{padding-bottom:0}
  .sequence-track{position:relative;height:calc(var(--sequence-stage-height,70vh) + var(--sequence-run,130vh))}
  .sequence-stage{position:sticky;top:90px}
  .scroll-sequence .image-layout{align-items:start}
  .scroll-sequence .image-cell{padding-top:0!important;margin:0!important;transform:translate3d(0,var(--sequence-y,0px),0);will-change:transform}
  .scroll-sequence .image-trigger img{max-height:var(--sequence-image-max,75vh);object-fit:contain}
}
@media(max-width:1000px){.nav-parent-row>a,.nav-sub-toggle{font-size:26px}}
@media(max-width:900px){
  .gallery-shell{padding-bottom:0}
  .gallery-info,.gallery.reverse .gallery-info{transform:none;will-change:auto}
  .gallery .gallery-caption{margin:0 0 12px;gap:10px}
  .gallery .gallery-caption h3{font-size:18px}
  .gallery.reverse .gallery-main{order:0!important}.gallery.reverse .gallery-info{order:1!important}
  .sequence-track{height:auto}.sequence-stage{position:static}
  .scroll-sequence .image-cell{transform:none;will-change:auto}
}
@media(max-width:600px){
  .intro-facts .location-fact{grid-column:1/-1}
  .navigation>a{grid-template-columns:26px minmax(0,1fr) 24px;gap:13px}
  .nav-parent-row{grid-template-columns:minmax(0,1fr) 24px;gap:13px;padding:22px 0}
  .nav-parent-row>a{grid-template-columns:26px minmax(0,1fr);gap:13px;font-size:24px}
  .nav-parent-row>a>small{font-size:10px}
  .nav-sub-toggle{font-size:24px;width:24px}
  .nav-arrow{width:24px}
  .subnav a{padding:12px 0 12px 38px;grid-template-columns:40px minmax(0,1fr) 24px;gap:10px}
  .subnav small{font-size:11px}
  .product-dialog .factory-photo img{max-height:38vh}
  .image-expand{font-size:22px;right:12px;bottom:12px}
  .photo-stage{padding:0 16px}
  #detailsHint{width:280px}
}
@media(hover:none){.composition:not(.gallery) .image-cell:hover .image-visual{transform:none}}
@media(prefers-reduced-motion:reduce){
  .gallery-info{transform:none!important;will-change:auto}
  .sequence-track{height:auto}.sequence-stage{position:static}
  .scroll-sequence .image-cell{transform:none!important;will-change:auto}
  .composition:not(.gallery) .image-cell:hover .image-visual{transform:none}
  #detailsHint{transition:none}
}

/* Readability refinement: retain the accepted composition and motion. */
.navigation a:hover,.navigation .nav-parent-row:hover,.navigation .nav-sub-toggle:hover{background:transparent}
.product-dialog{color:#222}
.product-dialog p,.product-dialog .product-story p{font-size:15px;line-height:1.85;color:#222;font-weight:400}
.product-dialog .product-story h3{font-size:12px;color:#303030;font-weight:500;line-height:1.6}
.product-dialog .product-byline{font-size:13px;line-height:1.75;color:#3d3d3d}
.product-dialog .eyebrow{font-size:12px;line-height:1.6;color:#353535}
.product-dialog figcaption{font-size:11px;line-height:1.75;color:#404040}
.product-dialog .product-official{font-size:14px;color:#242424}
#photoCaption{font-size:13px;line-height:1.7;color:#303030}
#detailsHint{font-size:12px;color:#292929}
.swatch figcaption{font-size:13px;color:#fff}
.swatch figcaption span{font-size:12px;color:#f1f1f1}
@media(max-width:600px){
  .product-dialog p,.product-dialog .product-story p{font-size:14px}
  .product-dialog .product-story h3,.product-dialog .eyebrow{font-size:11px}
  .product-dialog .product-byline{font-size:12px}
  .product-dialog figcaption{font-size:11px}
  .product-dialog .product-official{font-size:13px}
  .swatch figcaption{font-size:12px}
  .swatch figcaption span{font-size:11px}
}