/* Manrope — локальные файлы шрифта (вариативный, 400–700) */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/manrope-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:#f3f1ec;
  --paper:#faf9f6;
  --soft:#e9e7e1;
  --ink:#1b1b18;
  --text:#2d2c28;
  --muted:#706d65;
  --line:#d5d1c8;
  --line-dark:#aaa69d;
  --footer:#181816;
  --container:1280px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.62;
  letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
p,ul,ol,dl{margin:0}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:500;letter-spacing:-.04em;overflow-wrap:break-word;hyphens:auto}
h1{font-size:clamp(38px,3.6vw,52px);line-height:1.03}
h2,.as-h2{font-size:clamp(30px,2.9vw,42px);line-height:1.08}
h3{font-size:clamp(21px,1.65vw,25px);line-height:1.22;letter-spacing:-.028em}
button,input,select,textarea{font:inherit}

.wrap{width:min(var(--container),calc(100% - 64px));margin-inline:auto}
.block{padding:clamp(72px,6.8vw,94px) 0}
.block-first{padding-top:clamp(58px,6vw,82px)}
.section-alt{background:var(--soft)}
.section-head{max-width:740px;margin:0 0 clamp(32px,3.4vw,44px);text-align:left}
.section-head p,.lead,.page-lead,.card p,.plain-card p,.aud p,.step p,.work-note p,.download-meta,.rules li,.c-label,.form-note{color:var(--muted)}
.section-head p,.lead,.page-lead{font-size:18px;line-height:1.62}
.section-head h2+p,.section-head h1+p{margin-top:15px}

/* Header */
.topbar{
  position:sticky;top:0;z-index:80;
  background:rgba(250,249,246,.96);
  border-bottom:1px solid rgba(170,166,157,.42);
  backdrop-filter:blur(10px);
}
.topbar-inner{
  width:min(1400px,calc(100% - 64px));margin-inline:auto;
  min-height:72px;display:flex;align-items:center;gap:34px;
}
.logo{display:flex;align-items:baseline;gap:14px;min-width:max-content}
.logo b{font-size:22px;line-height:1;font-weight:600;letter-spacing:-.045em;color:var(--ink)}
.logo span{max-width:160px;font-size:10px;line-height:1.25;letter-spacing:.075em;text-transform:uppercase;color:var(--muted)}
.topbar nav{display:flex;align-items:center;justify-content:center;gap:clamp(20px,2vw,31px);margin-left:auto;font-size:14px;color:#5e5b54}
.topbar nav>a,.has-drop>a{display:block;padding:27px 0 26px;white-space:nowrap;transition:color .16s ease}
.topbar nav a:hover,.phone:hover{color:var(--ink)}
.page-index .topbar nav>a[href="index.html"],
.page-portfolio .topbar nav>a[href="portfolio.html"],
.page-detailization .topbar nav>a[href="detalization.html"],
.page-contacts .topbar nav>a[href="contacts.html"],
.page-service .has-drop>a{color:var(--ink)}
.phone{margin-left:4px;padding:12px 0;white-space:nowrap;font-size:14px;font-weight:600;color:var(--ink)}
.has-drop{position:relative}
.drop{
  position:absolute;left:-18px;top:calc(100% - 2px);min-width:330px;
  display:none;flex-direction:column;padding:10px 0;background:var(--paper);border:1px solid var(--line);
}
.has-drop:hover .drop,.has-drop:focus-within .drop{display:flex}
.drop a{padding:11px 18px;font-size:13px;line-height:1.4;color:var(--muted)}
.drop a:hover{color:var(--ink);background:var(--bg)}
.menu-toggle{display:none;width:42px;height:42px;padding:0;border:1px solid var(--line);background:transparent}
.menu-toggle span{display:block;width:18px;height:1px;margin:4px auto;background:var(--ink)}

/* Buttons */
.actions,.cta{display:flex;flex-wrap:wrap;gap:10px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:50px;
  padding:14px 23px;border:1px solid var(--ink);border-radius:0;
  font-size:13px;line-height:1;font-weight:600;letter-spacing:0;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-primary:hover{background:#373731;border-color:#373731}
.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(24,24,22,.38)}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.more{display:inline-flex;align-items:center;gap:9px;width:max-content;margin-top:22px;padding-bottom:4px;border-bottom:1px solid rgba(24,24,22,.34);font-size:13px;font-weight:600;color:var(--ink)}
.more::after{content:"↗";font-size:12px;transition:transform .16s ease}
.more:hover::after{transform:translate(2px,-2px)}
.cta{margin-top:36px}

/* Home hero — simple image composition */
.hero-home{
  position:relative;height:calc(100svh - var(--header-h,72px));min-height:560px;
  overflow:hidden;background:#282722;color:#fff;isolation:isolate;
}
.hero-bg,.hero-bg-slide,.hero-shade{position:absolute;inset:0}
.hero-bg{z-index:-3}
.hero-bg-slide{opacity:0;transition:opacity 1.35s ease}
.hero-bg-slide.is-active{opacity:1}
.hero-bg-slide img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.88) contrast(1.02)}
.hero-shade{
  z-index:-2;
  background:
    linear-gradient(90deg,rgba(15,15,13,.46) 0%,rgba(15,15,13,.24) 33%,rgba(15,15,13,.06) 64%,rgba(15,15,13,0) 78%),
    linear-gradient(180deg,rgba(15,15,13,.02) 40%,rgba(15,15,13,.34) 100%);
}
.hero-main,.hero-grid{height:100%}
.hero-grid{display:flex;align-items:flex-end;padding-bottom:clamp(58px,9vh,100px)}
.hero-text{max-width:720px}
.hero-text h1{max-width:10.8em;color:#fff;font-size:clamp(40px,min(3.8vw,6.4vh),54px);line-height:1.02;font-weight:500;text-shadow:0 1px 12px rgba(0,0,0,.10)}
.hero-text .lead{max-width:620px;margin-top:20px;color:rgba(255,255,255,.84);font-size:17px;line-height:1.58}
.hero-text .actions{margin-top:26px}
.hero-home .btn-primary{background:#f6f3ec;color:var(--ink);border-color:#f6f3ec}
.hero-home .btn-primary:hover{background:#fff;border-color:#fff}
.hero-home .btn-ghost{color:#fff;border-color:rgba(255,255,255,.56);background:rgba(255,255,255,.02)}
.hero-home .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* Facts live outside the hero */
.facts-strip{background:var(--paper);border-bottom:1px solid var(--line)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;list-style:none}
.facts li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;min-height:88px;padding:18px 26px 18px 0;color:var(--muted);font-size:14px;line-height:1.35}
.facts li+li{padding-left:26px;border-left:1px solid var(--line)}
.facts .num{font-size:27px;line-height:1;font-weight:500;letter-spacing:-.045em;color:var(--ink)}

/* Home services — same photo geometry, alternating composition */
.page-index #services{background:var(--paper)}
.page-index #services .section-head{margin-bottom:38px}
.page-index #services .cards{display:grid;grid-template-columns:1fr;gap:0}
.page-index #services .card{
  display:grid;grid-template-columns:minmax(0,1.66fr) minmax(330px,.84fr);
  align-items:center;background:transparent;border-top:1px solid var(--line);
}
.page-index #services .card:last-child{border-bottom:1px solid var(--line)}
.page-index #services .card .media{aspect-ratio:3/2;overflow:hidden;background:#ddd8cf}
.page-index #services .card .media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.page-index #services .card:hover .media img{transform:scale(1.012)}
.page-index #services .card-body{display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,4.2vw,62px)}
.page-index #services .card-body h3{max-width:390px;margin-bottom:16px}
.page-index #services .card-body p{max-width:430px;font-size:16px;line-height:1.64}
.page-index #services .card:nth-child(even) .media{grid-column:2;grid-row:1}
.page-index #services .card:nth-child(even) .card-body{grid-column:1;grid-row:1}

/* Image pause */
/* Order */
.page-index .section-alt{background:var(--soft)}
.order-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(42px,6vw,84px);align-items:center}
.order-text .section-head{margin-bottom:24px}
.steps{display:grid;gap:0;border-top:1px solid var(--line-dark)}
.step{display:grid;grid-template-columns:68px 1fr;column-gap:22px;padding:22px 0 24px;border-bottom:1px solid var(--line)}
.step .num{grid-row:1/3;font-size:30px;line-height:1;font-weight:400;letter-spacing:-.05em;color:#9b978e}
.step h3{margin-bottom:7px;font-size:19px}
.step p{max-width:500px;font-size:16px;line-height:1.6}
.order-text>.actions{margin-top:26px}
.order-media{aspect-ratio:3/2;overflow:hidden;background:#d9d5cd}
.order-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.order-video iframe,.order-video video{display:block;width:100%;height:100%;border:0}
.order-video video{object-fit:cover;background:#111}
.map iframe{display:block;width:100%;height:100%;border:0}


/* Audience */
.audience-section{background:var(--bg)}
.audience{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.aud{padding:28px 30px 32px 0}
.aud+.aud{padding-left:30px;border-left:1px solid var(--line)}
.aud h3{max-width:320px;margin-bottom:12px;font-size:21px}
.aud p{max-width:360px;font-size:16px;line-height:1.62}

/* Service pages */
.page-service{background:var(--paper)}
.page-hero{background:var(--bg);border-bottom:1px solid var(--line);padding:58px 0}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:clamp(44px,6vw,86px);align-items:center}
.page-hero .lead{max-width:590px;margin:20px 0 26px;font-size:18px;line-height:1.62}
.page-hero .hero-price{margin-top:-8px;padding-left:16px;border-left:2px solid var(--ink)}
.page-hero .hero-price strong{color:var(--ink);font-weight:600}
.page-hero .media{aspect-ratio:3/2;overflow:hidden;background:#dedad2}
.page-hero .media img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.page-service .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.page-service .card{display:flex;flex-direction:column;min-width:0;background:transparent}
.page-service .card .media{aspect-ratio:3/2;overflow:hidden;background:#ddd8cf}
.page-service .card .media img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.page-service .card:hover .media img{transform:scale(1.012)}
.page-service .card-body{display:flex;flex:1;flex-direction:column;padding:18px 0 0}
.page-service .card-body h3{margin-bottom:11px}
.page-service .card-body p{font-size:16px;line-height:1.62}
.params{display:grid;gap:0;margin-top:16px;border-top:1px solid var(--line)}
.params>div{display:grid;grid-template-columns:112px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.5}
.params dt{font-weight:600;color:var(--ink)}
.params dd{margin:0;color:var(--muted)}

/* Two-column information sections */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.plain-card{padding:28px 32px 30px 0;background:transparent}
.plain-card:nth-child(even){padding-left:32px;border-left:1px solid var(--line)}
.plain-card h3{margin-bottom:11px;font-size:21px}
.plain-card p{max-width:560px;font-size:16px;line-height:1.62}

/* Four-step service process */
.steps-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.steps-4 .step{display:block;padding:26px 26px 30px 0;border:0}
.steps-4 .step+.step{padding-left:26px;border-left:1px solid var(--line)}
.steps-4 .step .num{display:block;margin-bottom:30px;font-size:27px;color:#98948b}
.steps-4 .step h3{margin-bottom:9px;font-size:19px}
.steps-4 .step p{font-size:16px;line-height:1.58}
.work-note{max-width:760px;margin:28px auto 0;text-align:center}
.work-note p{font-size:16px}
.work-note .cta{justify-content:center}

/* Portfolio — editorial grid with real project proportions */
.page-portfolio{background:var(--paper)}
.portfolio-projects{padding-top:clamp(62px,6.5vw,90px)}
.portfolio-projects .portfolio-intro{max-width:790px;margin-bottom:48px}
.portfolio-projects .portfolio-intro p{max-width:700px}
.page-portfolio .portfolio-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:24px;
  row-gap:58px;
  grid-auto-flow:row;
}
.page-portfolio .portfolio-card{display:flex;flex-direction:column;min-width:0;background:transparent}
.page-portfolio .portfolio-card.span-4{grid-column:span 4}
.page-portfolio .portfolio-card.span-6{grid-column:span 6}
.page-portfolio .portfolio-card.span-8{grid-column:span 8}
.page-portfolio .portfolio-card.span-12{grid-column:span 12}
.page-portfolio .portfolio-card .media{overflow:hidden;background:#ddd8cf;cursor:zoom-in}
.page-portfolio .portfolio-card.landscape .media{aspect-ratio:3/2}
.page-portfolio .portfolio-card.landscape-43 .media{aspect-ratio:3/2}
.page-portfolio .portfolio-card.portrait .media{aspect-ratio:4/5}
.page-portfolio .portfolio-card.panorama .media{aspect-ratio:16/8.7}
.page-portfolio .portfolio-card .media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease,filter .45s ease}
.page-portfolio .portfolio-card.feature-person .media img{object-position:center 38%}
.page-portfolio .portfolio-card.detail-shot .media img{object-position:center 42%}
.page-portfolio .portfolio-card:hover .media img{transform:scale(1.008);filter:brightness(.96)}
.page-portfolio .portfolio-card .card-body{padding:15px 0 0;min-height:76px}
.page-portfolio .portfolio-card .card-body h3{margin:0 0 5px;font-size:19px;font-weight:500;letter-spacing:-.025em}
.page-portfolio .portfolio-card .card-body p{max-width:620px;font-size:15px;line-height:1.52;color:var(--muted)}
.page-portfolio .portfolio-card.span-12 .card-body{max-width:760px}
.page-portfolio .cta{justify-content:flex-start;margin-top:56px}

/* Detailization */
.page-detailization{background:var(--paper)}
.intro{background:var(--bg);padding:clamp(62px,6.5vw,90px) 0}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);gap:clamp(48px,7vw,100px);align-items:center}
.intro-text h1{max-width:720px}
.intro-text .page-lead{max-width:650px;margin-top:18px;font-size:18px}
.intro-text .actions{margin-top:26px}
.download{padding:30px 0;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.download-icon{display:block;margin-bottom:26px;font-size:12px;letter-spacing:.08em;color:var(--muted)}
.download-title{max-width:370px;margin-bottom:10px;font-size:28px;line-height:1.16}
.download-meta{margin-bottom:22px;font-size:14px}
.rules{max-width:940px;padding:0;margin:0;list-style:none;border-top:1px solid var(--line-dark)}
.rules li{padding:16px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.62}
.hint{margin-top:18px;color:var(--muted);font-size:14px}
.page-detailization .cta{justify-content:flex-start}

/* Contacts */
.page-contacts{background:var(--paper)}
.page-title{padding:clamp(54px,5.5vw,76px) 0 42px;background:var(--bg);border-bottom:1px solid var(--line)}
.page-title h1{font-size:clamp(36px,3.7vw,52px)}
.page-title .page-lead{max-width:700px;margin-top:16px;font-size:18px}
.contacts-main{padding-top:60px;background:var(--paper)}
.contacts-main-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(440px,1.1fr);gap:clamp(56px,7vw,100px);align-items:start}
.contacts-stack{display:grid;gap:44px}
.contact-card,.contact-form-card{background:transparent;border:0;padding:0}
.contact-card h2,.contact-form-card h2{margin-bottom:22px;font-size:26px}
.c-row{padding:16px 0;border-top:1px solid var(--line)}
.c-row:last-child{border-bottom:1px solid var(--line)}
.c-label{display:block;margin-bottom:5px;font-size:12px;line-height:1.3;letter-spacing:.055em;text-transform:uppercase}
.c-value{display:block;font-size:clamp(16px,1.2vw,19px);line-height:1.42;font-weight:500;color:var(--ink)}
.form{display:grid;gap:0}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.input{width:100%;min-height:58px;padding:15px 0;border:0;border-bottom:1px solid var(--line-dark);border-radius:0;background:transparent;color:var(--ink);outline:none;font:inherit;font-size:16px}
textarea.input{min-height:140px;resize:vertical}
.input:focus{border-color:var(--ink)}
.file-label{display:grid;gap:8px;padding:18px 0;border-bottom:1px solid var(--line-dark);color:var(--muted);font-size:14px}
.file-label input{font:inherit;font-size:14px}
.contact-form-card .btn{margin-top:22px}
.form-note{margin-top:13px;font-size:12px}
.contacts-map-wrap{padding-top:0;background:var(--paper)}
.map{height:360px;overflow:hidden;background:#dedad2}
.map-note{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.5}
.map-note p{margin:0;color:var(--muted)}
.map-note a{font-weight:500;text-decoration:underline;text-underline-offset:3px}
.ph{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(145deg,#dedbd4,#cbc9c3);color:#77736c}
.ph b{font-size:15px;font-weight:500}

/* FAQ */
.faq{max-width:980px;margin:0;border-top:1px solid var(--line-dark)}
.faq details{border-bottom:1px solid var(--line);background:transparent}
.faq summary{position:relative;cursor:pointer;list-style:none;padding:21px 52px 21px 0;font-size:18px;line-height:1.4;font-weight:500;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:17px;font-size:24px;line-height:1;font-weight:300;color:var(--muted);transition:transform .16s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{max-width:800px;padding:0 52px 21px 0;font-size:16px;line-height:1.64;color:var(--muted)}

/* Footer */
.site-footer{margin-top:0;background:var(--footer);color:rgba(255,255,255,.7)}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr .9fr 1.05fr;gap:clamp(34px,5vw,70px);padding:clamp(60px,6vw,84px) 0 46px}
.f-logo{display:inline-block;margin-bottom:18px;font-size:30px;line-height:1;font-weight:500;letter-spacing:-.04em;color:#fff}
.f-about p{max-width:410px;font-size:14px;line-height:1.65;color:rgba(255,255,255,.52)}
.f-col h4{margin-bottom:16px;font-size:12px;font-weight:500;letter-spacing:.055em;text-transform:uppercase;color:rgba(255,255,255,.46)}
.f-col ul{display:grid;gap:9px;padding:0;margin:0;list-style:none;font-size:14px;line-height:1.55}
.f-col a{transition:color .15s ease}
.f-col a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0 26px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:rgba(255,255,255,.4)}
.f-legal{display:flex;gap:18px;flex-wrap:wrap}

/* Floating contact buttons */
.fab{position:fixed;right:20px;bottom:20px;z-index:70;display:grid;justify-items:end;gap:10px}
.fab-stack{display:grid;gap:10px;justify-items:end}
.fab-btn{
  position:relative;display:grid;place-items:center;width:48px;height:48px;
  border:0;border-radius:50%;color:#fff;
  box-shadow:0 6px 18px rgba(18,18,16,.28);
  transition:transform .18s ease,filter .18s ease;
}
.fab-wa{background:#25a95a}
.fab-tg{background:#2f9fd6}
.fab-call{background:var(--ink)}
.fab-btn:hover,.fab-btn:focus-visible{filter:brightness(1.12);transform:translateY(-1px);outline:none}
.fab-tip{
  position:absolute;right:calc(100% + 12px);top:50%;
  transform:translateY(-50%) translateX(8px);opacity:0;pointer-events:none;
  padding:8px 12px;white-space:nowrap;
  background:var(--ink);color:#fff;border-radius:3px;
  font-size:12px;line-height:1;font-weight:600;letter-spacing:.01em;
  transition:opacity .18s ease,transform .18s ease;
}
.fab-btn:hover .fab-tip,.fab-btn:focus-visible .fab-tip{opacity:1;transform:translateY(-50%)}

/* Lightbox */
body.lightbox-open{overflow:hidden}
.portfolio-lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:52px;background:rgba(18,18,16,.94)}
.portfolio-lightbox.is-open{display:flex}
.portfolio-lightbox img{max-width:min(88vw,1500px);max-height:88vh;width:auto;height:auto;object-fit:contain}
.lightbox-close,.lightbox-prev,.lightbox-next{position:absolute;border:0;background:transparent;color:#fff;cursor:pointer;font-family:inherit;font-weight:300}
.lightbox-close{right:26px;top:18px;font-size:34px}
.lightbox-prev,.lightbox-next{top:50%;transform:translateY(-50%);font-size:46px}
.lightbox-prev{left:24px}.lightbox-next{right:24px}

@media (max-width:1100px){
  .topbar-inner{position:relative}
  .topbar nav{display:none;position:absolute;left:0;right:0;top:calc(100% + 1px);padding:12px;background:var(--paper);border:1px solid var(--line);margin:0}
  .topbar.menu-open nav{display:grid;gap:0;justify-content:stretch;text-align:left;max-height:calc(100svh - var(--header-h,72px) - 12px);overflow-y:auto;overscroll-behavior:contain}
  .topbar nav>a,.has-drop>a{padding:11px 12px}
  .has-drop{display:grid}
  .drop{position:static;display:flex;border:0;padding:0 0 4px 14px;background:transparent}
  .drop a{padding:8px 12px}
  .menu-toggle{display:block;margin-left:auto}
  .phone{margin-left:0}
  .page-service .cards{gap:22px}
  .footer-top{grid-template-columns:1.35fr 1fr 1fr}
}

@media (max-width:900px){
  .wrap{width:min(var(--container),calc(100% - 40px))}
  .topbar-inner{width:calc(100% - 40px)}
  .hero-text{max-width:640px}
  .page-index #services .card{grid-template-columns:1fr}
  .page-index #services .card .media{grid-column:1!important;grid-row:1!important;aspect-ratio:3/2}
  .page-index #services .card .card-body{grid-column:1!important;grid-row:2!important;padding:28px 0 44px}
  .order-grid,.page-hero-grid,.intro-grid,.contacts-main-grid{grid-template-columns:1fr}
  .order-media,.page-hero .media{aspect-ratio:3/2;order:-1}
  .page-service .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps-4 .step:nth-child(3){padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .steps-4 .step:nth-child(4){border-top:1px solid var(--line)}
  .page-portfolio .portfolio-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:18px;row-gap:44px}
  .page-portfolio .portfolio-card.span-8,.page-portfolio .portfolio-card.span-12{grid-column:span 12}
  .page-portfolio .portfolio-card.span-4,.page-portfolio .portfolio-card.span-6{grid-column:span 6}
  .page-portfolio .portfolio-card.landscape .media,.page-portfolio .portfolio-card.panorama .media{aspect-ratio:3/2}
  .page-portfolio .portfolio-card.portrait .media{aspect-ratio:4/5}
  .audience{grid-template-columns:1fr}
  .aud,.aud+.aud{padding:24px 0;border-left:0;border-bottom:1px solid var(--line)}
  .aud:last-child{border-bottom:0}
  .footer-top{grid-template-columns:1fr 1fr}
}

@media (max-width:600px){
  body{font-size:16px}
  .wrap{width:calc(100% - 32px)}
  .topbar-inner{width:calc(100% - 32px);min-height:66px;gap:12px}
  .logo span{display:none}
  .phone{font-size:12px}
  .hero-home{height:calc(100svh - var(--header-h,66px));min-height:560px}
  .hero-grid{padding-bottom:84px}
  .hero-shade{background:linear-gradient(180deg,rgba(15,15,13,.12) 0%,rgba(15,15,13,.2) 35%,rgba(15,15,13,.62) 100%)}
  .actions .btn,.cta .btn{flex:1 1 auto}
  .hero-text h1{font-size:clamp(34px,10vw,45px);max-width:10.2em}
  .hero-text .lead{margin-top:16px;font-size:16px;line-height:1.55}
  .hero-text .actions{margin-top:20px}
  .hero-text .actions .btn{flex:1 1 100%}
  .facts{grid-template-columns:1fr}
  .facts li,.facts li+li{min-height:0;grid-template-columns:64px 1fr;padding:12px 0;border-left:0;border-bottom:1px solid var(--line)}
  .facts li:last-child{border-bottom:0}
  .facts .num{font-size:22px}
  .block{padding:58px 0}
  .section-head{margin-bottom:30px}
  
.page-index #services .card .card-body{padding-bottom:38px}
  .page-service .cards,.grid-2,.steps-4{grid-template-columns:1fr}
  .page-service .card .media{aspect-ratio:3/2}
  .plain-card,.plain-card:nth-child(even){padding:22px 0;border-left:0;border-bottom:1px solid var(--line)}
  .grid-2{border-bottom:0}
  .steps-4 .step,.steps-4 .step+.step,.steps-4 .step:nth-child(3),.steps-4 .step:nth-child(4){padding:22px 0;border-left:0;border-top:1px solid var(--line)}
  .steps-4 .step:first-child{border-top:0}
  .steps-4 .step .num{margin-bottom:18px}
  .page-portfolio .portfolio-grid{grid-template-columns:1fr;row-gap:38px}
  .page-portfolio .portfolio-card,.page-portfolio .portfolio-card.span-4,.page-portfolio .portfolio-card.span-6,.page-portfolio .portfolio-card.span-8,.page-portfolio .portfolio-card.span-12{grid-column:1!important}
  .page-portfolio .portfolio-card.landscape .media,.page-portfolio .portfolio-card.panorama .media{aspect-ratio:3/2}
  .page-portfolio .portfolio-card.portrait .media{aspect-ratio:4/5}
  .page-portfolio .portfolio-card .card-body{min-height:0}
  .intro-grid{gap:40px}
  .form-row{grid-template-columns:1fr;gap:0}
  .map{height:300px}
  .map-note{align-items:flex-start;flex-direction:column;gap:8px}
  .page-title h1{font-size:clamp(28px,8.6vw,40px)}
  .footer-top{grid-template-columns:1fr;gap:30px}
  .footer-bottom{flex-direction:column;align-items:flex-start;padding-bottom:84px}
  .portfolio-lightbox{padding:36px 18px}
  .lightbox-prev{left:8px}.lightbox-next{right:8px}
}

/* Home hero — local background video */
.hero-video-bg{overflow:hidden;background:#282722}
.hero-video-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  filter:saturate(.86) contrast(1.02) brightness(.82);
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;transition:opacity .8s ease;
  filter:saturate(.86) contrast(1.02) brightness(.82);
  pointer-events:none;
}
.hero-video.is-playing{opacity:1}

/* Local vertical video in the order section */
.order-video{aspect-ratio:9/16;width:min(100%,380px);justify-self:center;background:#111}
.order-video video{object-fit:contain}
@media (max-width:900px){.order-video{order:-1;width:min(100%,360px);aspect-ratio:9/16}}
@media (max-width:900px) and (min-width:641px){
}
@media (max-width:600px){.order-video{width:min(100%,320px)}}

/* Order video — 4:5 web crop */
.order-video{
  width:min(100%,540px);
  aspect-ratio:4/5;
  justify-self:end;
}
.order-video video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

@media (max-width:900px){
  .order-video{
    width:min(100%,520px);
    aspect-ratio:4/5;
    justify-self:center;
    order:-1;
  }
}

@media (max-width:640px){
  .order-video{
    width:100%;
    aspect-ratio:4/5;
  }
}

/* Video in service page hero */
.page-hero .page-hero-video{
  position:relative;
  aspect-ratio:3/2;
  overflow:hidden;
  background:#171714;
}
.page-hero .page-hero-video iframe,
.page-hero .page-hero-video video{
  display:block;
  width:100%;
  height:100%;
  border:0;
}
.page-hero .page-hero-video video{
  object-fit:cover;
  object-position:center center;
  background:#171714;
}


/* Local 4:5 video in aluminum service hero */
.page-hero .page-hero-local-video{
  width:min(100%,520px);
  aspect-ratio:4/5;
  justify-self:end;
  background:#171714;
}
.page-hero .page-hero-local-video video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
@media (max-width:900px){
  .page-hero .page-hero-local-video{
    width:min(100%,520px);
    aspect-ratio:4/5;
    justify-self:center;
    order:-1;
  }
}
@media (max-width:640px){
  .page-hero .page-hero-local-video{width:100%;}
}

/* Aluminum hero video — more compact 4:5 block */
.page-al .page-hero .page-hero-local-video{
  width:min(100%,420px);
}
@media (max-width:900px){
  .page-al .page-hero .page-hero-local-video{
    width:min(100%,380px);
  }
}
@media (max-width:640px){
  .page-al .page-hero .page-hero-local-video{
    width:min(100%,340px);
  }
}

/* Aluminum service hero — keep original copy width, move only video left */
@media (min-width:1101px){
  .page-al .page-hero .page-hero-local-video{
    justify-self:start;
    /* Align the video’s left edge with the “Услуги” nav item on desktop. */
    transform:translateX(clamp(13px, calc(46vw - 522.8px), 140px));
  }
}

/* Form: consent, anti-spam field, status */
.hp-field{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;border:0!important;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);opacity:0}
.form{position:relative}
.consent{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;padding:18px 0 0;font-size:13px;line-height:1.5;color:var(--muted);cursor:pointer}
.consent input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--ink)}
.consent a{color:var(--ink);border-bottom:1px solid rgba(24,24,22,.34)}
.form .btn[disabled]{opacity:.6;cursor:progress}
.form-status{margin-top:16px;padding:14px 16px;font-size:14px;line-height:1.5;border-left:2px solid var(--ink);background:var(--bg);color:var(--ink)}
.form-status.is-error{border-left-color:#a4372b;color:#7c2a21}
.file-label input{max-width:100%}
.f-legal a{color:rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.2)}
.f-legal a:hover{color:#fff}

/* Privacy & 404 */
.legal{max-width:860px}
.legal h2{margin:40px 0 14px;font-size:clamp(22px,2vw,26px)}
.legal p,.legal li{color:var(--muted);font-size:16px;line-height:1.66}
.legal p+p,.legal ul{margin-top:10px}
.legal ul{padding-left:20px}
.legal li+li{margin-top:6px}
.page-404 .page-title{min-height:calc(100svh - var(--header-h,72px));display:flex;align-items:center;border-bottom:0}
.page-404 .actions{margin-top:28px}

/* Sound toggle on videos with audio */
.order-video,.page-hero-video,.page-hero-local-video{position:relative}
.video-sound{
  position:absolute;left:14px;bottom:14px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:9px 14px 9px 11px;
  border:1px solid rgba(255,255,255,.28);border-radius:0;background:rgba(24,24,22,.72);color:#fff;
  font-size:13px;line-height:1;font-weight:600;cursor:pointer;backdrop-filter:blur(6px);
  transition:background .16s ease;
}
.video-sound:hover{background:rgba(24,24,22,.9)}
.video-sound svg{flex:none}
@media (max-width:600px){.video-sound{left:10px;bottom:10px}}

/* Messengers: mobile toggle, footer and contacts page */
.fab-toggle{
  display:none;width:52px;height:52px;padding:0;place-items:center;cursor:pointer;
  background:var(--ink);color:#fff;border:0;border-radius:50%;
  box-shadow:0 8px 22px rgba(18,18,16,.3);
  transition:background .18s ease,color .18s ease;
}
.fab-toggle .fab-close{display:none}
@media (max-width:900px){
  .fab{right:16px;bottom:16px}
  .fab-toggle{display:grid}
  .fab-tip{display:none}
  .fab .fab-stack{display:none}
  .fab.is-open .fab-stack{display:grid}
  .fab.is-open .fab-btn{animation:fab-in .24s ease both}
  .fab.is-open .fab-btn:nth-child(2){animation-delay:.05s}
  .fab.is-open .fab-btn:nth-child(3){animation-delay:.1s}
  .fab.is-open .fab-toggle{background:#fff;color:var(--ink);box-shadow:0 8px 22px rgba(18,18,16,.22)}
  .fab.is-open .fab-toggle .fab-close{display:block}
  .fab.is-open .fab-toggle .fab-chat{display:none}
}
@keyframes fab-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fab.is-open .fab-btn{animation:none}}
.c-messengers{display:flex;flex-wrap:wrap;gap:8px 18px}
.c-messengers a{border-bottom:1px solid rgba(24,24,22,.3)}
.c-messengers a:hover{border-color:var(--ink)}
.f-social{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px;font-size:13px}
.f-social a{color:rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.2)}
.f-social a:hover{color:#fff;border-color:rgba(255,255,255,.5)}

/* Подвал: пометка к соцсетям */
.f-note{display:block;margin-top:6px;font-size:11px;color:rgba(255,255,255,.35)}
/* Уведомление о cookies */
.cookie-note{position:fixed;left:20px;bottom:20px;z-index:80;max-width:420px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:16px 18px;background:#fff;color:var(--ink);border-radius:14px;box-shadow:0 12px 34px rgba(18,18,16,.18);font-size:13px;line-height:1.5}
.cookie-note a{color:var(--ink);border-bottom:1px solid rgba(24,24,22,.34)}
.cookie-note button{padding:10px 18px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-weight:600;cursor:pointer}
@media (max-width:640px){.cookie-note{left:12px;right:12px;bottom:84px;max-width:none}}
