/* Product cutaways and VEKA surface collections. */
.systems-overview{align-items:stretch}
.systems-overview>.profile-card{padding:28px 24px 12px;overflow:hidden;display:flex;flex-direction:column}
.profile-card .system-size{font-size:49px;letter-spacing:-2.4px}
.systems-overview>.profile-card h2{font-size:18px;margin-top:21px;padding-top:20px}
.systems-overview>.profile-card p{min-height:64px}
.profile-image{display:block;width:100%;height:335px;object-fit:contain;margin:16px auto 4px}
.systems-overview>.motion-card{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px;padding:34px 44px;background:linear-gradient(115deg,#8aa8bc10,transparent),var(--paper)}
.motion-copy{max-width:420px}
.motion-copy .studio-label{font-size:9px;line-height:1.7;letter-spacing:1.3px;margin-bottom:16px;color:var(--blue)}
.systems-overview>.motion-card h2{font-size:clamp(25px,3.4vw,40px);letter-spacing:-1.4px;border:0;padding:0;margin:0;line-height:1.15}
.systems-overview>.motion-card p{font-size:13px;line-height:1.9;margin-top:19px}
.motion-detail{display:block;margin-top:21px;font-size:11px;color:var(--text)}
.motion-image{width:100%;height:310px;object-fit:contain;filter:drop-shadow(0 12px 12px #152b3a18)}
.surfaces-section{grid-column:1/-1;margin-top:64px}
.surfaces-heading{max-width:650px;margin:0 auto 32px;text-align:center}
.surfaces-heading .studio-label{color:var(--blue);letter-spacing:1.6px}
.surfaces-heading h2{font-size:clamp(30px,4vw,46px);font-weight:600;letter-spacing:-1.7px;line-height:1.16}
.surfaces-heading p{max-width:520px;font-size:13px;color:var(--muted);line-height:1.85;margin:18px auto 0}
.surface-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.surface-card{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--paper);min-width:0}
.material-display{height:182px;position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 25%,#cbd6dd65,transparent 80%),var(--bg);border-bottom:1px solid var(--line)}
.material-tile{position:absolute;display:block;width:105px;height:138px;left:50%;top:24px;border-radius:8px;box-shadow:1px 1px 0 #ffffff65 inset,3px 4px 0 #0003,7px 12px 18px #0002;transform:translateX(-50%) rotate(-12deg) skewY(4deg)}
.tile-first{margin-left:-59px;top:38px;transform:translateX(-50%) rotate(-22deg) skewY(4deg)}
.tile-second{z-index:1}
.tile-third{margin-left:59px;top:31px;z-index:2;transform:translateX(-50%) rotate(9deg) skewY(4deg)}
.material-decor .tile-first{background:#eceeea}.material-decor .tile-second{background:#424b50}.material-decor .tile-third{background:#915b1f url('assets/golden-oak.jpg') center/cover}
.material-spectral .tile-first{background:#eeeae2}.material-spectral .tile-second{background:#5c554f}.material-spectral .tile-third{background:linear-gradient(125deg,#41494e,#303639)}
.material-fine .tile-first{background-color:#aaa9a0}.material-fine .tile-second{background-color:#646b67}.material-fine .tile-third{background-color:#414449}
.material-fine .material-tile{background-image:url('assets/fine-grain.svg');background-size:90px 90px}
.surface-copy{padding:25px 24px 23px}
.surface-kicker{display:block;color:var(--muted);font-size:8px;font-weight:600;letter-spacing:1px;margin-bottom:10px;line-height:1.5}
.surface-copy h3{font-size:19px;letter-spacing:-.5px;font-weight:600;line-height:1.3}
.surface-copy>p{min-height:115px;margin-top:13px;color:var(--muted);font-size:12px;line-height:1.85}
.surface-tags{display:flex;gap:7px;flex-wrap:wrap;align-items:center;min-height:46px;margin-top:15px}
.surface-tags span{font-size:9px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:6px 9px}
.surface-colours{margin-top:15px;border-top:1px solid var(--line)}
.surface-colours summary{min-height:46px;display:flex;align-items:center;gap:10px;justify-content:space-between;cursor:pointer;font-size:11px;color:var(--blue);list-style:none}
.surface-colours summary::-webkit-details-marker{display:none}
.surface-colours summary:after{content:'+';font-size:20px;font-weight:300;line-height:1}
.surface-colours[open] summary:after{content:'−'}
.surface-colours summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:4px}
.surface-palette{display:grid;grid-template-columns:1fr;gap:10px;list-style:none;margin:6px 0 0;padding:0}
.surface-palette li{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted);line-height:1.5}
.surface-dot{display:block;width:25px;height:25px;flex-shrink:0;border-radius:50%;background:var(--sample);box-shadow:inset 0 0 0 1px #0002,0 1px 3px #0002}
.material-fine~.surface-copy .surface-dot{background-image:url('assets/fine-grain.svg');background-size:75px 75px}
.surface-aluminium{display:flex;align-items:center;gap:20px;margin-top:20px;padding:24px 28px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.aluminium-sample{display:block;width:52px;height:62px;flex-shrink:0;border-radius:4px;transform:skewY(-8deg);background:linear-gradient(110deg,#c0c6cb,#edf0f1 32%,#a5afb5 35%,#d0d7db 65%,#98a2a9);box-shadow:3px 2px 0 #69757c,5px 6px 12px #0002}
.surface-aluminium h3{font-size:14px;font-weight:500;line-height:1.5}
.surface-aluminium p{font-size:12px;line-height:1.8;margin-top:5px;color:var(--muted);max-width:800px}
.surface-note{font-size:10px;line-height:1.8;color:var(--muted);text-align:center;max-width:560px;margin:18px auto 0}
.finish-picker{flex-direction:column;gap:11px}
.finish-options{justify-content:center;gap:7px}
.finish-content{padding:6px 10px;font-size:10px;gap:7px}

/* Only the screen mechanism varies; outer dimensions are shared at each width. */
.screen-preview{flex-shrink:0}
/* Texture is masked to the rails, leaving the glass and insect fabric clear. */
.demo-stage[data-finish=golden-oak] .screen-surround:after,
.demo-stage[data-finish=golden-oak] .screen-leaf:before,
.shutter-stage[data-finish=golden-oak] .window-frame:after,
.shutter-stage[data-finish=golden-oak] .window-sash:after{
  content:'';position:absolute;pointer-events:none;inset:calc(-1 * var(--rail));padding:var(--rail);background:var(--finish-texture) center/240px 240px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
}
.screen-surround{--rail:10px}.screen-leaf{--rail:6px}.shutter-stage .window-frame{--rail:13px}.shutter-stage .window-sash{--rail:10px}
.shutter-stage .frame-depth{background:linear-gradient(95deg,var(--finish-edge),var(--finish-light) 12%,var(--finish-edge) 94%,var(--finish-shadow))}
.screen-stage[data-type=pleated] .screen-leaf:before,.screen-stage[data-type=roller] .screen-leaf:before{display:none}
.demo-stage[data-finish=golden-oak] .screen-topbox,
.demo-stage[data-finish=golden-oak] .screen-pull,
.demo-stage[data-finish=golden-oak] .fabric-bottom-bar,
.shutter-stage[data-finish=golden-oak] .roller-box,
.shutter-stage[data-finish=golden-oak] .roller-last-slat,
.shutter-stage[data-finish=golden-oak] .window-sill{background:var(--finish-texture) center/240px 240px}
.shutter-stage[data-finish=golden-oak] .roller-curtain{background-image:repeating-linear-gradient(180deg,#33200e44 0px,#ffffff22 2px,transparent 3px 10px,#33200e66 11px,#33200e44 13px),var(--finish-texture);background-size:auto,240px 240px}

/* Contact groups share a row with the social links on desktop. */
.footer-info{grid-column:1;grid-row:1;line-height:1.7}
.footer-copyright{grid-column:2;grid-row:1}
.footer-contacts{grid-column:1;grid-row:2;flex-wrap:nowrap;gap:24px}
.footer>.social-links{grid-column:2;grid-row:2;align-self:center;display:flex;flex-wrap:nowrap}
@media(max-width:1120px) and (min-width:761px){.footer>.social-links .social-link span{display:none}.footer>.social-links .social-link{width:44px;padding:0}.footer-contacts{gap:20px}}
@media(max-width:960px) and (min-width:761px){.surface-copy{padding:23px 18px}.surface-copy>p{min-height:156px}.material-tile{width:85px}}
@media(max-width:760px){
  .systems-overview>.profile-card{padding:25px 24px 12px}.profile-card .system-size{font-size:46px}.systems-overview>.profile-card p{min-height:0}
  .profile-image{height:330px;max-width:360px;margin-top:16px}
  .systems-overview>.motion-card{grid-template-columns:minmax(0,1fr);gap:5px;padding:30px 24px 12px}.motion-copy{max-width:none}.motion-image{height:270px;max-width:420px;justify-self:center}
  .surfaces-section{margin-top:44px}.surfaces-heading{margin-bottom:25px}.surfaces-heading h2{font-size:33px;letter-spacing:-1.1px}.surfaces-heading p{font-size:12px}
  .surface-cards{grid-template-columns:minmax(0,1fr);gap:18px}.material-display{height:170px}.surface-copy{padding:24px}.surface-copy>p{min-height:0}.surface-tags{margin-top:12px}.surface-palette{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px}.surface-palette li{font-size:10px;gap:8px}
  .surface-aluminium{padding:22px;gap:17px;align-items:flex-start}.surface-aluminium h3{font-size:13px}.surface-aluminium p{font-size:11px}.surface-note{font-size:9px;padding:0 10px}
  .finish-content{font-size:10px;padding:6px 9px}.finish-options{gap:6px}.finish-swatch{width:21px;height:21px}
  .footer-info{grid-column:1;grid-row:1}.footer-contacts{grid-column:1;grid-row:2;flex-direction:row;flex-wrap:wrap;gap:5px 22px;align-items:center;justify-content:center}
  .footer>.social-links{grid-column:1;grid-row:3;gap:6px;justify-content:center}
  .footer>.social-links .social-link{flex:1;min-width:0;max-width:100px;flex-direction:column;gap:5px;padding:9px 3px}
  .footer>.social-links .social-link span{display:block;font-size:9px;line-height:1.2}
  .footer-copyright{grid-column:1;grid-row:4;justify-self:center}
}

@media(max-width:380px){.footer>.social-links{gap:4px}.footer>.social-links .social-link{padding-inline:1px}.footer>.social-links .social-link span{font-size:8px}}