:root {--ink:#11110f;--paper:#f3f1eb;--acid:#ff5a1f;--line:rgba(17,17,15,.16)}

* {box-sizing:border-box}
html {scroll-behavior:smooth}
body {margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}
.site-header{position:absolute;inset:0 0 auto;z-index:20;height:92px;display:grid;grid-template-columns:260px 1fr 220px;align-items:center;padding:0 4vw;color:white;border-bottom:1px solid rgba(255,255,255,.18)}
.brand { 
  display:flex;  align-items:center;gap:11px;font-weight:900;letter-spacing:.09em;line-height:1
  }
.brand-mark {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  color:#111;
  //background:var(--acid);
  border-radius:50%;
  font-size:20px;
}
.brand-mark img.logo1 {width:38px; height:38px;}
.brand-mark2 img.logo2 {height: 32px; margin-top: 12px;}
.brand small {
  display:block;margin-top:5px;font-size:8px;font-weight:500;letter-spacing:.13em;opacity:.65
}
.nav {
  display:flex;justify-content:center;gap:26px;font-size:13px
}
.nav a {opacity:.72;transition:.25s}
.nav a:hover {opacity:1;color:var(--acid)}
.header-phone {justify-self:end;font-size:14px;font-weight:700}
.menu-button {display:none}
.hero {position:relative;min-height:790px;padding:190px 5vw 90px;overflow:hidden;color:white;background:radial-gradient(circle at 72% 42%,#3d2117 0,#171513 27%,#0c0c0b 67%)}
.hero:after {content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.22),transparent 60%),repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),rgba(255,255,255,.045) 25%);pointer-events:none}
.hero-glow {position:absolute;width:520px;height:520px;left:52%;top:24%;border-radius:50%;background:var(--acid);filter:blur(150px);opacity:.12}
.hero-content {position:relative;z-index:2;width:min(720px,57vw)}
.eyebrow {margin:0 0 30px;color:#b9b5ad;text-transform:uppercase;letter-spacing:.22em;font-size:11px}
h1 {margin:0;font-size:clamp(54px,7.4vw,88px);line-height:.83;letter-spacing:-.065em;text-transform:uppercase}
h1 em {color:var(--acid);font-style:normal;text-shadow:0 0 48px rgba(255,90,31,.3)}
.hero-copy {width:min(540px,100%);margin:40px 0 0;color:#c9c6be;font-size:17px;line-height:1.65}
.hero-actions {display:flex;gap:12px;margin-top:38px}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:57px;
  padding:0 26px;
  border-radius:2px;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  transition:.25s;
  }
.button.primary {gap:34px;color:#111;background:var(--acid)}
.button.primary:hover {background:#ff7444;transform:translateY(-2px)}
.button.ghost {border:1px solid rgba(255,255,255,.28)}
.button.ghost:hover {border-color:white}
.hero-visual {position:absolute;z-index:1;inset:180px 4vw 70px 54%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.11);transform:rotate(-2deg)}
.neon-word {font-size:clamp(62px,9vw,150px);font-weight:900;letter-spacing:-.08em;color:#ffb49a;transform:rotate(7deg);text-shadow:0 0 4px #fff,0 0 14px #ff7a4b,0 0 42px #ff4d0e,0 0 90px #ff4d0e}
.visual-caption {position:absolute;right:22px;bottom:18px;font-size:10px;color:#817c74;text-transform:uppercase;letter-spacing:.2em}
.scroll-hint {position:absolute;z-index:3;left:5vw;bottom:30px;display:flex;align-items:center;gap:12px;color:#7c7871;font-size:10px;text-transform:uppercase;letter-spacing:.15em}
.scroll-hint span {width:42px;height:1px;background:#7c7871}
.advantages {display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.advantages article {display:flex;gap:22px;min-height:185px;padding:45px 3vw;border-right:1px solid var(--line)}
.advantages article:last-child {border-right:0}
.advantages b {color:var(--acid);font-size:24px;letter-spacing:-.06em}
.advantages h3 {margin:2px 0 12px;font-size:15px;text-transform:uppercase}
.advantages p {margin:0;color:#6d6a64;font-size:13px;line-height:1.5}

.reveal {opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}
.reveal.is-visible {opacity:1;transform:none}

@media(prefers-reduced-motion:reduce)
  {html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}

@media(max-width:900px)  {
  .site-header{grid-template-columns:1fr auto;height:74px}
  .header-phone{display:none}
  .menu-button{display:flex;flex-direction:column;gap:6px;width:44px;padding:12px;border:0;background:none}.menu-button span{width:22px;height:1px;background:white}.nav{display:none;position:absolute;top:74px;left:0;right:0;padding:24px 5vw;flex-direction:column;background:#111}.nav.open{display:flex}.hero{min-height:720px;padding-top:160px}.hero-content{width:100%}.hero-visual{inset:330px -15vw 60px 30%;opacity:.42}.advantages{grid-template-columns:1fr 1fr}.advantages article{border-bottom:1px solid var(--line)}
  }

@media(max-width:560px){
  .hero{min-height:760px}h1{font-size:51px}.hero-actions{flex-direction:column;align-items:stretch}.hero-visual{inset:415px -45vw 70px 12%}.advantages{grid-template-columns:1fr}
  }

.hero {background:linear-gradient(90deg,#090a0b 0%,rgba(9,10,11,.97) 33%,rgba(9,10,11,.55) 58%,rgba(9,10,11,.08) 100%),url('hero-signage.png') center/cover no-repeat}

/* Complete one-page experience */
.hero-visual .neon-word {display:none}
.section {padding:120px 5vw}
.section-head {display:grid;grid-template-columns:80px 160px 1fr;align-items:start;margin-bottom:55px}
.section-head>span,.estimate-copy>span,.clients-copy>span,.contact-copy>span {color:var(--acid);font-size:11px;font-weight:700;letter-spacing:.16em}
.section-head>p {margin:0;color:#706d67;font-size:11px;text-transform:uppercase;letter-spacing:.16em}
.section-head h2 {max-width:850px;margin:-9px 0 0;font-size:clamp(38px,5.2vw,78px);line-height:.95;letter-spacing:-.055em;text-transform:uppercase}

.services {overflow:hidden;}
.service-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.service-card {
  min-height:560px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#f6f4ee;
  transition:opacity .75s ease,transform .75s ease,background .3s;
}
.service-card:hover {background:#fff;}
.service-art {
  position:relative;
  height:270px;
  overflow:hidden;
  background:#181817;
    display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* Необходимо, если span и i позиционируются абсолютно */
  overflow: hidden;   /* Предотвратит выход картинки за границы, если у блока есть скругления */
}
.service-art:before, .service-art:after {}
.service-art:before {}
.service-art:after {}

.service-art>span {
  position:absolute;
  z-index:2;
  top:18px;
  left:18px;
  color:#77736d;
  font-size:10px;
}

.service-1 .service-art img {
max-height: 90%;
object-fit: contain;
}

.service-1 .service-art img, .service-2 .service-art img, .service-3 .service-art img, .service-4 .service-art img, .service-5 .service-art img, .service-6 .service-art img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
   /* Создает жесткое растворение краев самой картинки, независимо от ее размера */
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent),
              linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent),
                      linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  -webkit-mask-composite: source-in;
}

.service-2 .service-art:before {}
.service-3 .service-art:before {}
.service-4 .service-art:before {}
.service-5 .service-art:before {}
.service-6 .service-art:before {}

.card-copy {padding:32px}
.card-copy small {color:var(--acid);font-size:10px}
.card-copy h3 {min-height:54px;margin:20px 0 12px;font-size:24px;line-height:1.05;text-transform:uppercase}
.card-copy p {min-height:68px;margin:0;color:#6c6963;font-size:14px;line-height:1.55}
.card-copy a,.product-card a,.box-card a{display:flex;justify-content:space-between;margin-top:32px;padding-top:17px;border-top:1px solid var(--line);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.card-copy a b {color:var(--acid)}
.dark-section {padding:120px 5vw;background:#11110f;color:#f5f2eb}
.dark-section .section-head>p {color:#87827a}
.dark-section .section-head {border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:44px}
.product-grid {display:grid;grid-template-columns:repeat(4,1fr)}
.product-card,.box-card {padding:0 24px 30px;border-right:1px solid rgba(255,255,255,.14)}
.product-card:last-child,.box-card:last-child {border-right:0}
.product-card>span,.box-card>span {display:block;margin-top:30px;color:var(--acid);font-size:10px}
.product-card h3,.box-card h3 {min-height:50px;margin:16px 0 8px;font-size:21px;text-transform:uppercase}
.product-card p,.box-card p {min-height:36px;margin:0;color:#88837b;font-size:12px}
.product-card a {border-color:rgba(255,255,255,.14)}
.letter-demo {display:grid;place-items:center;height:280px;background:#1b1b19;color:#ffb59b;font-size:160px;font-weight:900;line-height:1;text-shadow:0 0 5px #fff,0 0 18px #ff6530,0 0 50px #ff4a09}
.letter-2 {color:#fff;text-shadow:0 0 5px #fff,0 0 18px #ff6530,18px 22px 40px #ff4a09}
.letter-3 {color:#242421;text-shadow:18px 18px 18px #ff5a1f}
.letter-4 {color:#fff;text-shadow:0 0 22px #ff5a1f}
.boxes{padding-top:120px}
.boxes .section-head {border-bottom:1px solid var(--line);padding-bottom:44px}
.box-card {border-color:var(--line)}
.box-demo {display:grid;place-items:center;height:260px;background:#dedbd3}
.box-demo i {display:block;width:54%;height:38%;border:8px solid #171715;background:#ff6a30;box-shadow:0 0 26px rgba(255,90,31,.45)}
.box-1 i {border-radius:50%}
.box-2 i {clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%)}
.box-3 i {background:#171715;border:14px solid #555;box-shadow:inset 0 0 0 2px var(--acid),0 0 18px rgba(255,90,31,.3)}
.box-4 i {width:62%;height:48%;background:#fff7e3;border-width:5px}
.box-card a {border-color:var(--line)}
.about {display:grid;grid-template-columns:1.25fr .75fr;background:var(--acid)}
.about .section-head {grid-template-columns:70px 135px 1fr;margin-bottom:50px}
.about .section-head>span {color:#111}
.about .section-head>p {color:rgba(17,17,15,.58)}
.about-main {padding:110px 5vw}
.about-side {padding:110px 5vw;border-left:1px solid rgba(17,17,15,.25)}
.about-lead {max-width:760px;font-size:22px;line-height:1.5}

.stats {display:grid;grid-template-columns:repeat(3,1fr);margin-top:70px;padding-top:34px;border-top:1px solid rgba(17,17,15,.25)}
.stats div {display:flex;flex-direction:column}
.stats b {font-size:clamp(50px,6vw,90px);letter-spacing:-.07em}
.stats span {font-size:11px;text-transform:uppercase}.about-side>p{margin:0 0 50px;font-size:16px;line-height:1.65}
.about-step {display:grid;grid-template-columns:40px 1fr auto;align-items:center;padding:25px 0;border-top:1px solid rgba(17,17,15,.25)}
.about-step span{font-size:10px}
.about-step h3{margin:0;font-size:15px;text-transform:uppercase}
.about-step i{font-style:normal}

.estimate{display:grid;grid-template-columns:1fr 1fr;padding:120px 5vw;background:#11110f;color:white}.estimate-copy{padding-right:10vw}.estimate-copy h2,.clients-copy h2,.contact-copy h2{margin:30px 0;font-size:clamp(46px,6vw,88px);line-height:.92;letter-spacing:-.06em;text-transform:uppercase}.estimate-copy>p{max-width:600px;color:#9a968e;font-size:17px;line-height:1.65}.estimate-note{display:flex;gap:40px;margin-top:60px;padding-top:25px;border-top:1px solid rgba(255,255,255,.16)}.estimate-note b{color:var(--acid);text-transform:uppercase}.estimate-note span{color:#8d8981}.estimate-form{display:grid;grid-template-columns:1fr 1fr;gap:25px;padding:45px;background:#1b1b19;border:1px solid rgba(255,255,255,.11)}.estimate-form label{display:flex;flex-direction:column;gap:12px;color:#8e8a82;font-size:10px;text-transform:uppercase;letter-spacing:.1em}.estimate-form label.wide{grid-column:1/-1}.estimate-form input,.estimate-form textarea{width:100%;padding:15px 0;color:white;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.25);outline:0;text-transform:none;letter-spacing:0}.estimate-form input:focus,.estimate-form textarea:focus{border-color:var(--acid)}.estimate-form .button{border:0;cursor:pointer}.estimate-form>small{align-self:center;color:#77736c;font-size:9px;line-height:1.5}.form-success{grid-column:1/-1;align-self:center}.form-success b{color:var(--acid);font-size:48px;text-transform:uppercase}.form-success p{color:#aaa69e;line-height:1.6}.form-success button{padding:0;border:0;border-bottom:1px solid var(--acid);color:white;background:none;cursor:pointer}
.visualization{padding:120px 5vw;background:#dedbd3}.steps{display:grid;grid-template-columns:1.25fr repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.steps>*{min-height:300px;padding:35px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.step-intro b{display:block;color:var(--acid);font-size:110px;line-height:.8;letter-spacing:-.08em}.step-intro span{font-size:11px;text-transform:uppercase}.step-intro p{margin-top:55px;color:#6e6a64}.steps article{position:relative;padding-top:130px}.steps article>span{position:absolute;top:35px;left:35px;color:var(--acid);font-size:11px}.steps article i{position:absolute;top:35px;right:35px;font-style:normal}.steps h3{font-size:18px;text-transform:uppercase}.steps p{color:#706c65;font-size:13px;line-height:1.55}
.portfolio{padding:120px 5vw;background:#11110f;color:white}.portfolio .section-head>p{color:#87827a}.portfolio-image{position:relative;min-height:620px;overflow:hidden}.portfolio-image img{display:block;width:100%;height:100%;min-height:620px;object-fit:cover}.portfolio-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent 55%)}.portfolio-label{position:absolute;z-index:2;left:40px;bottom:35px}.portfolio-label span{color:var(--acid);font-size:10px}.portfolio-label h3{margin:12px 0 6px;font-size:28px;text-transform:uppercase}.portfolio-label p{margin:0;color:#aaa69e}.portfolio-image>a{position:absolute;z-index:2;right:35px;bottom:35px;padding:16px 20px;border:1px solid rgba(255,255,255,.35);font-size:11px;text-transform:uppercase}.portfolio-meta{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid rgba(255,255,255,.14)}.portfolio-meta span{padding:25px;border-right:1px solid rgba(255,255,255,.14);color:#8c8880;font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.reviews{background:#f3f1eb}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.review-card{display:flex;flex-direction:column;min-height:430px;padding:35px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.quote{color:var(--acid);font-family:Georgia,serif;font-size:80px;line-height:.7}.review-card>p{font-size:17px;line-height:1.6}.review-card>div{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:28px;border-top:1px solid var(--line)}.review-card b{text-transform:uppercase}.review-card small{color:#77736c;line-height:1.4}
.clients{display:grid;grid-template-columns:.8fr 1.2fr;padding:100px 5vw;background:#dedbd3}.clients-copy{padding-right:8vw}.clients-copy h2{font-size:clamp(38px,4.2vw,64px)}.logo-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.logo-grid div{display:grid;place-items:center;min-height:140px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:17px;font-weight:900;letter-spacing:.08em;color:#77736d}.faq-list{margin-left:240px;border-top:1px solid var(--line)}.faq details{border-bottom:1px solid var(--line)}.faq summary{display:grid;grid-template-columns:70px 1fr auto;align-items:center;min-height:88px;list-style:none;cursor:pointer;font-size:18px;text-transform:uppercase}.faq summary::-webkit-details-marker{display:none}.faq summary span{color:var(--acid);font-size:10px}.faq summary i{font-size:25px;font-style:normal;font-weight:300;transition:.25s}.faq details[open] summary i{transform:rotate(45deg)}.faq details p{max-width:750px;margin:0 0 32px 70px;color:#68645e;line-height:1.65}

.contacts {padding:110px 5vw 0;background:#11110f;color:white}
.contact-top {display:grid;grid-template-columns:1.25fr .75fr;padding-bottom:110px}
.contact-copy h2 em {color:var(--acid);font-style:normal}
.contact-data {padding-top:30px}
.contact-data>p {max-width:470px;color:#99958d;line-height:1.6}
.contact-data>a, .contact-data address {display:block;margin-top:25px;font-style:normal}
.contact-data address.lastaddr {margin-top:2px}
.contact-data .big-phone {margin-top:50px;font-size:clamp(28px,3.5vw,54px);font-weight:700;letter-spacing:-.04em;}
.contact-data .big-phone.lastphone {margin-top:10px;}
.contact-data>div {display:flex;gap:25px;margin-top:35px;color:var(--acid);font-size:11px;text-transform:uppercase}
footer {display:grid;grid-template-columns:1fr auto auto auto;gap:40px;align-items:center;min-height:110px;border-top:1px solid rgba(255,255,255,.15);color:#76726b;font-size:10px;text-transform:uppercase}
footer .brand {color:white;text-transform:none}

@media(max-width:1100px) {.service-grid{grid-template-columns:repeat(2,1fr)}.product-grid{grid-template-columns:repeat(2,1fr);gap:30px 0}.product-card:nth-child(2),.box-card:nth-child(2){border-right:0}.about{grid-template-columns:1fr}.about-side{border-left:0;border-top:1px solid rgba(17,17,15,.25)}.estimate{grid-template-columns:1fr;gap:60px}.steps{grid-template-columns:1fr 1fr}.clients{grid-template-columns:1fr;gap:45px}.faq-list{margin-left:0}.contact-top{grid-template-columns:1fr;gap:40px}}

@media(max-width:760px) {.section,.dark-section,.boxes,.visualization,.portfolio,.contacts{padding:82px 5vw}.section-head{grid-template-columns:45px 1fr;margin-bottom:38px}.section-head>p{grid-column:2}.section-head h2{grid-column:1/-1;margin-top:25px}.service-grid,.review-grid{grid-template-columns:1fr}.service-card{min-height:0}.product-grid{grid-template-columns:1fr}.product-card,.box-card{border-right:0;border-bottom:1px solid rgba(255,255,255,.14);padding:0 0 30px}.box-card{border-color:var(--line)}.about-main,.about-side{padding:82px 5vw}.about .section-head{grid-template-columns:45px 1fr}.stats{grid-template-columns:1fr;gap:30px}.estimate{padding:82px 5vw}.estimate-form{grid-template-columns:1fr;padding:28px}.steps{grid-template-columns:1fr}.portfolio-image,.portfolio-image img{min-height:520px}.portfolio-label{left:20px;bottom:90px}.portfolio-image>a{left:20px;right:auto;bottom:25px}.portfolio-meta{grid-template-columns:1fr 1fr}.logo-grid{grid-template-columns:1fr 1fr}.faq summary{grid-template-columns:45px 1fr auto;font-size:15px}.faq details p{margin-left:45px}.contact-top{padding-bottom:70px}footer{grid-template-columns:1fr;gap:20px;padding:35px 0}.clients{padding:82px 5vw}}