/* Ролл-шторы и жалюзи: шаблон главной. Каталог образцов: каждый вид штор на плоской плитке цвета, как образцы тканей, которые мастер привозит на замер. */
@font-face{font-family:Nunito;font-weight:200 1000;font-display:swap;src:url(fonts/nunito-vf-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Nunito;font-weight:200 1000;font-display:swap;src:url(fonts/nunito-vf-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --bg:#e5e1d8; --surface:#dad5ca; --paper:#f0efeb; --ink:#2a1d17; --muted:#4f3f35; --accent:#456f3a; --accent-dk:#385c2f; --accent-ink:#fff;
  --f1:#456f3a; --f1i:#fff; --f2:#4a362b; --f2i:#f0efeb; --f3:#cdbd9d; --f3i:#2a1d17; --f4:#a9b9b6; --f4i:#2a1d17;
  --f:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;
  --s-sm:clamp(.875rem,.85rem + .1vw,.9375rem); --s-body:clamp(1.0625rem,1rem + .25vw,1.1875rem); --s-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --s-head:clamp(2rem,1.3rem + 3.4vw,4.25rem); --s-disp:var(--s-head);
  --m:clamp(20px,4vw,56px); --g:16px; --hdr:76px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--hdr)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--s-body)/1.5 var(--f);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit} p,figure,h1,h2,h3,ul,blockquote{margin:0}
ul{padding:0;list-style:none}
h1,h2,h3{font-weight:500;letter-spacing:-.025em;line-height:1.05;text-wrap:balance}
h2{font-size:var(--s-head)} h3{font-size:var(--s-lead)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ul{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.22em}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;background:var(--accent);color:var(--accent-ink);font:600 var(--s-body)/1 var(--f);text-decoration:none;border:0;cursor:pointer;transition:background .25s,transform .25s}
.btn:hover{background:var(--accent-dk)} .btn:active{transform:translateY(2px)}
.btn--s{min-height:44px;padding:0 20px;font-size:var(--s-sm)}
.btn--ink{background:var(--ink);color:var(--paper)} .btn--ink:hover{background:#4a362b}
.btn--paper{background:var(--paper);color:var(--ink)} .btn--paper:hover{background:#fff}

.top{position:fixed;top:0;left:0;right:0;z-index:20;height:var(--hdr);display:flex;align-items:center;gap:28px;padding:0 var(--m);background:var(--bg)}
.logo{display:flex;align-items:center;gap:10px;color:var(--accent);font:600 var(--s-lead)/1 var(--f);letter-spacing:-.02em;text-decoration:none}
.top__nav{display:flex;gap:28px;margin-left:auto;font-size:var(--s-sm);font-weight:600}
.top__nav a{text-decoration:none;transition:color .2s} .top__nav a:hover{color:var(--accent)}

/* первый экран: плитка-образец, список названий слева, размер окна справа */
.hero{min-height:100svh;padding:calc(var(--hdr) + 18px) var(--m) 28px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);grid-template-rows:auto 1fr auto;row-gap:20px;align-content:start}
.hero__h{grid-column:1 / span 8;grid-row:1;font:500 var(--s-disp)/1.05 var(--f);letter-spacing:-.025em}
.hero__s{grid-column:9 / span 4;grid-row:1;font-size:var(--s-body);max-width:24em;padding-top:.3em}
.stage{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:center}
.wheel{grid-column:2 / span 3;align-self:stretch;position:relative;overflow:hidden;min-height:360px}
.wheel ul{position:absolute;left:0;right:0;top:0;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.wheel li{height:46px;display:flex;align-items:center;justify-content:flex-end}
.wheel button{appearance:none;border:0;background:none;padding:0;margin:0;font:500 var(--s-body)/1.2 var(--f);letter-spacing:-.01em;color:var(--ink);text-align:right;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .6s ease,font-size .6s ease}
.wheel li[data-d="0"] button{font-size:var(--s-lead);opacity:1;pointer-events:auto}
.wheel li[data-d="1"] button{opacity:.6;pointer-events:auto}
.wheel li[data-d="2"] button{opacity:.35;pointer-events:auto}
.wheel li[data-d="3"] button{font-size:var(--s-sm);opacity:.15;pointer-events:auto}
.wheel button:hover{opacity:1 !important}
.tile{grid-column:5 / span 4;position:relative;aspect-ratio:400/420;background:var(--tf,var(--f1));transition:background-color 1.1s ease;overflow:hidden}
.tile[data-f="1"]{--tf:var(--f1)} .tile[data-f="2"]{--tf:var(--f2)} .tile[data-f="3"]{--tf:var(--f3)} .tile[data-f="4"]{--tf:var(--f4)}
.pick{display:none}
.tile__art{position:absolute;inset:0;opacity:0;transition:opacity 1.3s ease}
.tile__art.is-on{opacity:1}
.tile__art svg{width:100%;height:100%}
.size{grid-column:9 / span 4;display:flex;flex-direction:column;gap:14px;padding-left:clamp(0px,1.6vw,24px)}
.size__t{font-size:var(--s-sm);font-weight:600;color:var(--muted)}
.size__in{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.size__in label{display:flex;flex-direction:column;gap:6px;font-size:var(--s-sm);font-weight:600}
.size__in input{width:100%;min-height:56px;padding:0 16px;background:var(--surface);color:var(--ink);border:0;font:600 var(--s-lead)/1 var(--f);-moz-appearance:textfield}
.size__in input::-webkit-outer-spin-button,.size__in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.size__sum{font:600 calc(var(--s-head) * .8)/1 var(--f);letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.size__note{font-size:var(--s-sm);color:var(--muted);line-height:1.45;max-width:26em}
.hero__under{grid-column:5 / span 4;grid-row:3;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.fact{font-size:var(--s-sm);color:var(--muted);min-height:2.9em;max-width:28em;display:flex;align-items:flex-end;transition:opacity .5s ease}
.hero__under .btn{min-width:240px}
.hero__links{grid-column:1 / span 4;grid-row:3;align-self:end;display:flex;gap:22px;font-size:var(--s-sm);font-weight:600;white-space:nowrap}
.hero__links a{text-decoration:none} .hero__links a:hover{color:var(--accent)}

/* две панели: ролл-шторы и жалюзи */
.duo{display:grid;grid-template-columns:1fr 1fr}
.panel{display:flex;flex-direction:column;min-height:min(92svh,900px)}
.panel--a{background:var(--f1);color:var(--f1i)} .panel--b{background:var(--f2);color:var(--f2i)}
.panel__ph{flex:1;min-height:0;position:relative;overflow:hidden;margin:0}
.panel__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.panel__row{display:flex;gap:20px;align-items:flex-end;justify-content:space-between;padding:28px;min-height:236px}
.panel__t h2{font-size:var(--s-head)} .panel__t p{margin-top:10px;max-width:28em;font-size:var(--s-body)}
.panel__act{display:flex;gap:8px;flex:none}

/* цены как меню */
.menu{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:clamp(100px,12vw,190px) var(--m) 0;align-items:start}
.menu__h{grid-column:1 / span 4;position:sticky;top:calc(var(--hdr) + 24px);display:flex;flex-direction:column;gap:18px}
.menu__h p{max-width:22em}
.menu__cols{grid-column:5 / -1;display:grid;grid-template-columns:1fr 1fr;column-gap:64px;align-items:start}
.grp{margin-bottom:48px}
.grp h3{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:22px;font-size:var(--s-lead)}
.grp h3 span{font:600 var(--s-sm)/1 var(--f);color:var(--muted);letter-spacing:0;white-space:nowrap}
.grp li{margin-bottom:22px}
.row{display:flex;justify-content:space-between;gap:16px;font-size:var(--s-body);font-weight:600}
.row b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.grp li p{margin-top:2px;max-width:36ch;font-size:var(--s-sm);color:var(--muted);line-height:1.4}

/* три шага: плитки растут */
.how{padding:clamp(100px,12vw,190px) var(--m) 0}
.how__h{max-width:12em}
.how__g{display:grid;grid-template-columns:repeat(12,1fr);column-gap:10px;align-items:end;margin-top:clamp(36px,5vw,72px)}
.st{display:flex;flex-direction:column;gap:12px}
.st--1{grid-column:1 / span 3} .st--2{grid-column:4 / span 4} .st--3{grid-column:8 / span 5}
.st__tile{width:100%;display:flex;align-items:center;justify-content:center;padding:6%}
.st__tile svg{width:100%;height:100%}
.st__tile--1{height:30vh;background:var(--f3)} .st__tile--2{height:44vh;background:var(--f4)} .st__tile--3{height:60vh;background:var(--f1)}
.st h3{margin-top:14px;font-size:var(--s-lead);font-weight:600} .st p{max-width:32ch;font-size:var(--s-body)}

/* работы: плотная мозаика */
.works{padding:clamp(100px,12vw,190px) 12px 0}
.works__t{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:0 calc(var(--m) - 12px) 56px;row-gap:14px}
.works__t h2{grid-column:1 / span 6} .works__t p{grid-column:8 / span 4;font-size:var(--s-lead);line-height:1.3;align-self:end}
.sheet{columns:6;column-gap:4px}
.sheet figure{break-inside:avoid;margin:0 0 4px;display:block}
.sheet img{width:100%;height:auto}
.sheet figcaption{padding:6px 0 14px;font-size:var(--s-sm);color:var(--muted)}

/* отзывы на бумажных листках */
.reviews{margin-top:clamp(100px,12vw,190px);background:var(--f1);color:var(--paper);padding:clamp(56px,7vw,100px) var(--m) 0;overflow:hidden}
.reviews__h{max-width:9em}
.slips{display:flex;justify-content:center;align-items:flex-start;margin:clamp(36px,5vw,72px) auto 0;max-width:1100px;padding-bottom:0}
.slip{position:relative;flex:none;width:clamp(270px,27vw,350px);background:var(--paper);color:var(--ink);padding:44px 40px 40px;clip-path:polygon(0 8px,5% 0,10% 8px,15% 0,20% 8px,25% 0,30% 8px,35% 0,40% 8px,45% 0,50% 8px,55% 0,60% 8px,65% 0,70% 8px,75% 0,80% 8px,85% 0,90% 8px,95% 0,100% 8px,100% calc(100% - 8px),95% 100%,90% calc(100% - 8px),85% 100%,80% calc(100% - 8px),75% 100%,70% calc(100% - 8px),65% 100%,60% calc(100% - 8px),55% 100%,50% calc(100% - 8px),45% 100%,40% calc(100% - 8px),35% 100%,30% calc(100% - 8px),25% 100%,20% calc(100% - 8px),15% 100%,10% calc(100% - 8px),5% 100%,0 calc(100% - 8px))}
.slip--1{transform:rotate(-4deg);margin-right:-30px;min-height:440px;z-index:1}
.slip--2{transform:rotate(2deg);margin-top:36px;min-height:520px;z-index:2}
.slip--3{transform:rotate(5deg);margin-left:-30px;margin-top:12px;min-height:640px;z-index:1}
.slip figcaption{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:18px;font-size:var(--s-sm)}
.slip figcaption b{font-size:var(--s-body);font-weight:700} .slip figcaption span{color:var(--muted)}
.slip blockquote{font-size:var(--s-body);line-height:1.5}

/* заявка: купон */
.order{padding:clamp(100px,12vw,190px) var(--m) clamp(100px,12vw,160px)}
.coupon{position:relative;display:grid;grid-template-columns:1fr 1fr;max-width:1180px;margin:0 auto;background:var(--f1);color:var(--f1i)}
.coupon::before,.coupon::after{content:"";position:absolute;left:46%;width:28px;height:28px;border-radius:50%;background:var(--bg);transform:translateX(-50%)}
.coupon::before{top:-14px} .coupon::after{bottom:-14px}
.coupon__l{grid-column:1;padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:space-between;gap:28px;border-right:5px dotted var(--bg);margin-right:-2%}
.coupon{grid-template-columns:46fr 54fr}
.coupon__l{margin-right:0}
.coupon__l h2{font-size:var(--s-head);max-width:7em}
.coupon__l p{max-width:22em}
.coupon__r{display:flex;flex-direction:column;gap:10px;padding:clamp(28px,4vw,52px) clamp(28px,4vw,52px) clamp(28px,4vw,52px) clamp(24px,3vw,40px);justify-content:center}
.coupon__r input{width:100%;min-height:56px;padding:0 18px;border:0;background:rgba(255,255,255,.16);color:var(--f1i);font:500 var(--s-body)/1 var(--f)}
.coupon__r input::placeholder{color:rgba(255,255,255,.78)}
.coupon__go{min-height:60px;border:0;background:var(--ink);color:var(--paper);font:600 var(--s-body)/1 var(--f);cursor:pointer;transition:background .25s,transform .25s}
.coupon__go:hover{background:#4a362b} .coupon__go:active{transform:translateY(2px)}

/* подвал: плитки */
.board{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;padding:0 10px 10px}
.tile-f{padding:20px;display:flex;flex-direction:column;justify-content:space-between;min-height:220px;font-size:var(--s-sm)}
.tile-f--say{grid-column:1 / span 4;background:var(--surface)} .tile-f--say p{font:500 var(--s-lead)/1.25 var(--f);letter-spacing:-.01em} .tile-f--say small{font-size:var(--s-sm);color:var(--muted);line-height:1.4}
.tile-f--nav{grid-column:5 / span 3;background:var(--f3);color:var(--f3i);gap:4px;justify-content:flex-start;font-size:var(--s-body);font-weight:600} .tile-f--nav a{text-decoration:none} .tile-f--nav a:hover{text-decoration:underline}
.tile-f--city{grid-column:8 / span 2;background:var(--f4);color:var(--f4i)} .tile-f--city p{font:600 var(--s-lead)/1.1 var(--f)}
.tile-f--mail{grid-column:10 / span 3;background:var(--f2);color:var(--f2i);justify-content:flex-end} .tile-f--mail a{font:600 var(--s-lead)/1.15 var(--f);text-decoration:none;overflow-wrap:anywhere}
.tile-f--mark{grid-column:1 / span 8;min-height:320px;background:var(--ink);color:var(--paper);align-items:center;justify-content:center} .tile-f--mark span{font:500 calc(var(--s-head) * 1.9)/1 var(--f);letter-spacing:-.03em}
.tile-f--wa{grid-column:9 / span 4;min-height:320px;background:var(--accent);color:var(--accent-ink);text-decoration:none;transition:background .25s} .tile-f--wa:hover{background:var(--accent-dk)}
.tile-f--wa span{font:600 var(--s-lead)/1.1 var(--f);max-width:7em} .tile-f--wa svg{align-self:flex-end}

/* появления */
.rv{transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.js .rv{opacity:0;transform:translateY(26px)} .js .rv.in{opacity:1;transform:none}
.js .slip.rv{opacity:0} .js .slip--1.rv:not(.in){transform:rotate(-4deg) translateY(40px)} .js .slip--2.rv:not(.in){transform:rotate(2deg) translateY(40px)} .js .slip--3.rv:not(.in){transform:rotate(5deg) translateY(40px)}
.js .slip--1.rv.in{transform:rotate(-4deg)} .js .slip--2.rv.in{transform:rotate(2deg)} .js .slip--3.rv.in{transform:rotate(5deg)}
.js .st__tile{transform:scale(.86);transform-origin:50% 100%;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)} .js .st.in .st__tile{transform:none}
.js .panel__ph img{transform:scale(1.1);transition:transform 2s cubic-bezier(.2,.7,.2,1)} .js .panel.in .panel__ph img{transform:none}

@media (max-width:1100px){
  .menu{display:flex;flex-direction:column;gap:36px} .menu__h{position:static}
  .sheet{columns:4}
  .hero__h{grid-column:1 / -1} .hero__s{grid-column:1 / span 8;grid-row:2;padding-top:0;font-size:var(--s-body)} .stage{grid-row:3} .hero__under{grid-row:4} .hero__links{grid-row:4}
  .hero{grid-template-rows:auto auto 1fr auto auto}
}
@media (max-width:860px){
  :root{--hdr:64px}
  .top__nav{display:none} .top{justify-content:space-between}
  .hero{display:flex;flex-direction:column;gap:18px;min-height:0;padding-bottom:40px}
  .hero__h{max-width:none} .hero__s{max-width:none}
  .stage{display:flex;flex-direction:column;gap:18px;align-items:stretch}
  .tile{order:1;width:100%} .wheel{display:none} .pick{display:block;order:2} .size{order:3;padding:0}
  .pick select{appearance:none;-webkit-appearance:none;width:100%;min-height:56px;padding:0 48px 0 16px;border:0;border-radius:0;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M4 7l6 6 6-6' fill='none' stroke='%232a1d17' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat right 16px center;color:var(--ink);font:600 var(--s-lead)/1 var(--f)}
  .hero__under{order:4;width:100%} .hero__under .btn{width:100%} .fact{min-height:0;justify-content:center}
  .hero__links{order:5;align-self:flex-start}
  .duo{grid-template-columns:1fr} .panel{min-height:78svh}
  .panel__row{flex-direction:column;align-items:stretch;padding:22px 20px} .panel__act .btn{flex:1}
  .menu__cols{display:block} .grp{margin-bottom:36px}
  .how__g{display:flex;flex-direction:column;align-items:stretch;gap:36px}
  .st__tile--1{height:34vw} .st__tile--2{height:46vw} .st__tile--3{height:62vw}
  .works{padding-left:10px;padding-right:10px} .works__t{display:flex;flex-direction:column;padding:0 calc(var(--m) - 10px) 40px}
  .sheet{columns:3}
  .reviews__h{max-width:none}
  .slips{flex-direction:column;align-items:stretch;gap:0;padding-bottom:40px}
  .slip{width:78%;min-height:0 !important;margin:0 0 -32px !important}
  .slip--1{align-self:flex-start} .slip--2{align-self:flex-end} .slip--3{align-self:flex-start}
  .coupon{grid-template-columns:1fr} .coupon::before,.coupon::after{display:none}
  .coupon__l{border-right:0;border-bottom:5px dotted var(--bg)} .coupon__r{padding:clamp(28px,6vw,40px)}
  .board{grid-template-columns:1fr 1fr;gap:6px;padding:0 6px 6px}
  .tile-f{min-height:160px;padding:20px}
  .tile-f--mark{grid-column:1 / -1;min-height:160px;order:1} .tile-f--wa{grid-column:1 / -1;min-height:160px;order:2}
  .tile-f--nav{grid-column:1 / span 1;order:3} .tile-f--mail{grid-column:2 / span 1;order:4;justify-content:flex-start}
  .tile-f--city{grid-column:1 / span 1;order:5} .tile-f--say{grid-column:2 / span 1;order:6}
  .tile-f--say p{font-size:var(--s-body)} .tile-f--mail a{font-size:var(--s-body)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto !important}
  .js .rv{opacity:1 !important;transform:none !important}
  .js .slip--1.rv{transform:rotate(-4deg) !important} .js .slip--2.rv{transform:rotate(2deg) !important} .js .slip--3.rv{transform:rotate(5deg) !important}
  .js .st__tile,.js .panel__ph img{transform:none !important}
}