/* KRASILYUK DESIGN — SILVER ARCHITECTURE / premium light identity */
:root{
 --bg:#eef0f2;--surface:#f8f9fa;--surface-2:#e5e8eb;--white:#fff;
 --ink:#171c22;--ink-2:#343c45;--muted:#707982;--line:#d4d9de;
 --accent:#a77c53;--accent-soft:#d5c1aa;--steel:#9da7b1;--dark:#202831;
 --serif:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;letter-spacing:-.018em}
/* Progressive reveal: content remains visible unless JavaScript is active. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}
.js .reveal.is-visible{opacity:1;transform:translateY(0)}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
::selection{background:#c9b49d;color:#171c22}
.skip-link{position:fixed;z-index:200;top:10px;left:10px;padding:12px 16px;background:#fff;color:#171c22;transform:translateY(-160%);transition:transform .2s}
.skip-link:focus{transform:translateY(0)}
.topbar{height:88px;padding:0 clamp(22px,6.4vw,104px);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:30;background:rgba(245,247,248,.91);backdrop-filter:blur(22px);border-bottom:1px solid #d8dde1}
.brand{display:flex;align-items:center;gap:13px;font:700 15px Arial,sans-serif;letter-spacing:.13em;color:var(--ink)}
.brand-mark{width:46px;height:46px;object-fit:contain}
.brand small{display:block;margin-top:6px;font:600 7px Arial,sans-serif;letter-spacing:.22em;color:#858d95}
.muted{color:var(--accent)}
.topbar nav{display:flex;align-items:center;gap:clamp(12px,1.7vw,26px);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#59636d}
.topbar nav a{transition:color .2s}
.topbar nav a:hover{color:var(--accent)}
.nav-office{padding:14px 19px;border:1px solid #aeb6be;color:var(--ink)!important;background:#ffffff80}
.menu-toggle{display:none;background:none;border:0;color:var(--ink);font-size:25px;cursor:pointer}
.hero{position:relative;min-height:700px;overflow:hidden;display:flex;align-items:center;padding:clamp(90px,10vw,145px) 10% 112px;background:linear-gradient(112deg,#f7f8f9 0%,#e7eaed 52%,#d9dee2 100%);color:var(--ink)}
.hero:before{content:"";position:absolute;right:4%;top:7%;width:min(54vw,700px);aspect-ratio:1;border:1px solid #9da7b144;border-radius:50%;box-shadow:0 0 0 34px #ffffff50,0 0 0 70px #ffffff38,0 0 0 110px #ffffff20}
.hero:after{content:"";position:absolute;right:13%;top:17%;width:min(38vw,500px);aspect-ratio:1;border:1px solid #aab2ba70;border-radius:50%}
.hero-grid{position:absolute;inset:0;opacity:.42;background-image:linear-gradient(#aab2ba20 1px,transparent 1px),linear-gradient(90deg,#aab2ba20 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(90deg,transparent,#000 44%,#000)}
.hero-copy{position:relative;z-index:3;max-width:690px}
.eyebrow,.section-kicker{font-size:9px;letter-spacing:.24em;font-weight:700;text-transform:uppercase}
.eyebrow{color:#68727c}
.eyebrow i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:12px;box-shadow:0 0 0 5px #a77c5318}
h1{font-size:clamp(49px,6.6vw,91px);line-height:.97;letter-spacing:-.078em;margin:34px 0 26px;font-weight:600}
h1 em,h2 em,.production h2 em{font-family:var(--serif);font-weight:400;color:var(--accent)}
.hero-lead{max-width:560px;color:#59636d;font-size:14px;line-height:1.95}
.hero-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-top:36px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:30px;padding:18px 23px;font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;transition:transform .25s,background .25s,box-shadow .25s}
.btn-light{background:var(--ink);color:#fff;box-shadow:0 14px 32px #20283125}
.btn-light:hover{background:#39434d;transform:translateY(-3px);box-shadow:0 18px 36px #20283130}
.text-link{font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#39434d}
.text-link:hover{color:var(--accent)}
.hero-visual{position:absolute;z-index:2;right:8%;top:50%;width:min(37vw,480px);height:450px;transform:translateY(-45%);opacity:1}
.metal-object{position:absolute;inset:72px 30px 38px;transform:rotate(-13deg) skewY(-5deg);filter:drop-shadow(24px 32px 28px #3c465222)}
.metal-sheet{position:absolute;inset:0;border:1px solid #fff;background:linear-gradient(135deg,#fff 0%,#c4cbd1 35%,#f5f6f7 62%,#9da8b2 100%);clip-path:polygon(16% 0,100% 15%,84% 100%,0 82%)}
.sheet-back{transform:translate(48px,-34px);opacity:.62;background:linear-gradient(135deg,#aab4bd,#dfe3e6)}
.sheet-mid{transform:translate(24px,-17px);opacity:.8;background:linear-gradient(135deg,#f8f9fa,#aab4bd)}
.sheet-front{display:flex;align-items:center;justify-content:space-evenly;padding:8%;background:linear-gradient(145deg,#fff,#c4cbd1 52%,#eef0f2)}
.sheet-front i{width:1px;height:70%;background:#64717d55}
.metal-edge{position:absolute;right:-15px;top:16%;width:17px;height:75%;background:linear-gradient(90deg,#7f8993,#f7f8f9,#89949e);transform:skewY(-12deg)}
.visual-index,.visual-measure{position:absolute;color:#78838d;font-size:8px;letter-spacing:.2em}
.visual-index{top:20px;left:0}.visual-index span{margin-left:18px;color:#a77c53}
.visual-measure{right:0}.measure-top{top:55px}.measure-bottom{bottom:15px}.measure-bottom b{color:var(--accent)}
.visual-orbit{position:absolute;inset:42px 0;border:1px solid #87939d55;border-radius:50%;transform:rotate(-28deg) scaleY(.42)}
.hero-side{position:absolute;right:4%;top:38%;z-index:3;color:#87919a;font-size:8px;letter-spacing:.2em}
.vertical-label{writing-mode:vertical-rl}
.hero-bottom{position:absolute;left:10%;right:10%;bottom:28px;display:flex;justify-content:space-between;border-top:1px solid #b9c1c8;padding-top:17px;color:#78828b;font-size:8px;letter-spacing:.19em}
.section-wrap{padding:clamp(76px,9vw,122px) 10%}
.section-kicker{color:var(--accent)}
.intro{display:grid;grid-template-columns:.7fr 1.7fr;gap:8%;background:var(--surface)}
.intro h2,.section-heading h2,.workflow h2,.contacts h2{font-size:clamp(36px,4.2vw,58px);line-height:1.03;letter-spacing:-.07em;font-weight:600;margin:20px 0}
.intro-text{max-width:720px;color:#68727c;font-size:14px;line-height:2}
.services{background:#e9ecef}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:46px}
.section-heading p{max-width:410px;color:#707a84;font-size:12px;line-height:1.9}
.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.service-card{position:relative;min-height:340px;padding:27px 23px;background:linear-gradient(145deg,#fff,#f5f6f7);border:1px solid #d7dce0;box-shadow:0 14px 38px #26313a09;transition:transform .28s,box-shadow .28s,border-color .28s}
.service-card:hover{transform:translateY(-7px);border-color:#b8a18a;box-shadow:0 24px 48px #26313a16}
.service-no{font:600 10px Arial,sans-serif;color:#a77c53;letter-spacing:.16em}
.service-icon{width:52px;height:52px;display:grid;place-items:center;border:1px solid #d7dce0;border-radius:50%;background:#edf0f2;color:#6f7a84;font-size:25px;margin:29px 0 23px}
.service-card h3{font-size:17px;letter-spacing:-.035em;color:var(--ink)}
.service-card p{font-size:11px;line-height:1.9;color:#737d86;min-height:100px}
.add-service{display:flex;justify-content:space-between;align-items:center;padding-top:15px;border-top:1px solid #dce1e4;color:#535e68;font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.add-service b{font-size:17px;color:var(--accent)}
.production{position:relative;overflow:hidden;background:linear-gradient(115deg,#252e37,#3c4650);color:#f6f7f8}
.production:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 40px,#ffffff08 41px 42px)}
.production:after{content:"";position:absolute;right:-8%;top:-40%;width:650px;aspect-ratio:1;border:1px solid #ffffff20;border-radius:50%;box-shadow:0 0 0 42px #ffffff08,0 0 0 85px #ffffff06}
.production-inner{position:relative;z-index:1;min-height:560px;padding:clamp(80px,9vw,118px) 10%}
.production .section-kicker{color:#d0b79d}
.production-copy{max-width:580px;margin-left:12%}
.production h2{font-size:clamp(46px,5.5vw,73px);line-height:1.01;letter-spacing:-.075em;margin:30px 0}
.production-copy p{font-size:13px;line-height:2;color:#cbd1d7}
.production-stamp{position:absolute;right:12%;top:38%;width:145px;height:145px;display:grid;place-content:center;text-align:center;border:1px solid #d1b99f88;border-radius:50%;color:#e2d2c2;font-size:9px;letter-spacing:.2em;line-height:1.8;background:#ffffff08}
.production-stamp b{font-size:25px;color:#d2b18f}
.btn-outline{border:1px solid #c8b49f;color:#f5f2ee;margin-top:20px}
.btn-outline:hover{background:#d2b18f;color:#202831}
.gallery-section{background:var(--surface)}
.production-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gallery-card{position:relative;min-width:0;min-height:250px;overflow:hidden;background:#d8dde1;border:1px solid #d4d9de}
.gallery-card-wide{grid-column:span 2}
.gallery-card img{display:block;width:100%;height:100%;min-height:250px;max-height:420px;object-fit:cover;filter:saturate(.72) contrast(1.04);transition:transform .7s}
.gallery-card:hover img{transform:scale(1.045)}
.gallery-card:after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#171e25df);pointer-events:none}
.gallery-card figcaption{position:absolute;z-index:1;left:23px;right:20px;bottom:20px;display:grid;gap:7px;color:#fff}
.gallery-card figcaption span{font-size:8px;letter-spacing:.21em;color:#d8c2a9}
.gallery-card figcaption b{font-size:15px;font-weight:600}
.workflow{background:#e9ecef}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px}
.steps>div{border-top:1px solid #bfc7ce;padding:25px 20px 0 0}
.steps span{font-size:11px;color:var(--accent);letter-spacing:.16em}
.steps h3{font-size:18px;color:#303943}
.steps p{font-size:12px;line-height:1.9;color:#737d86}
.project-pack{background:var(--surface)}
.pack-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:9%}
.pack-mark{font-size:9px;letter-spacing:.22em;color:var(--accent)}
.pack-intro h3{font-size:27px;letter-spacing:-.045em;color:#28313a}
.pack-intro p{font-size:12px;line-height:1.95;color:#747e87}
.pack-intro .text-link{display:inline-block;color:#8d6a4b;margin-top:20px}
.pack-list{list-style:none;padding:0;margin:0}
.pack-list li{display:flex;gap:22px;padding:20px 0;border-bottom:1px solid #dce1e4}
.pack-list li>b{font-size:10px;color:var(--accent)}
.pack-list strong{display:block;font-size:13px;color:#303943}
.pack-list small{display:block;margin-top:6px;color:#78828b;font-size:11px;line-height:1.7}
.request-section{display:grid;grid-template-columns:1fr .8fr;gap:10%;align-items:center;padding:clamp(75px,9vw,116px) 10%;background:linear-gradient(115deg,#dce1e5,#edf0f2)}
.request-copy h2{font-size:clamp(45px,5vw,68px);line-height:1;letter-spacing:-.075em;color:#202831}
.request-copy>p{max-width:470px;color:#606b75;font-size:13px;line-height:1.95}
.request-note{max-width:460px;border-left:2px solid var(--accent);padding:10px 0 10px 16px;color:#737d86;font-size:11px;line-height:1.85;margin-top:24px}
.contact-simple{background:#fafbfc;border:1px solid #d1d8de;padding:36px;box-shadow:0 24px 60px #26313a14}
.contact-simple h3{font-size:clamp(24px,3vw,34px);letter-spacing:-.045em;margin:18px 0 8px}
.contact-simple p{color:#78828b;font-size:12px;line-height:1.85}
.contact-simple .field-hint{font-size:10px;color:#9aa1a7;margin-top:22px}
.faq-section{background:#e9ecef}
.faq-list details{padding:22px 0;border-bottom:1px solid #cfd6dc}
.faq-list summary{font-size:14px;font-weight:600;color:#303943;cursor:pointer;list-style:none}
.faq-list summary:after{content:"+";float:right;color:var(--accent);font-size:20px;font-weight:400}
.faq-list details[open] summary:after{content:"−"}
.faq-list p{max-width:780px;color:#737d86;font-size:12px;line-height:1.95;padding-top:10px}
.contacts{display:grid;grid-template-columns:.8fr 1.2fr;gap:8%;background:var(--surface)}
.contacts h2{font-size:clamp(44px,5vw,66px)}
.contact-details>p{color:#737d86;font-size:12px;margin:20px 0 35px}
.contact-line{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid #dce1e4}
.contact-line span{font-size:8px;letter-spacing:.19em;color:#929ba3}
.contact-line b{font-size:12px;font-weight:600;color:#303943;text-align:right}
.contact-line a:hover{color:var(--accent)}
footer{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:34px 10%;background:#202831;color:#cbd1d7;border-top:1px solid #48535e}
.footer-brand{color:#f4f6f7}
footer .brand small{color:#aeb7bf}
footer>a:last-child{font-size:9px;letter-spacing:.12em;color:#d9c2a8;border-bottom:1px solid #9d856d;padding-bottom:5px;text-transform:uppercase}
@media(max-width:1050px){
 .topbar nav{gap:10px;font-size:8px}
 .hero-visual{right:4%;opacity:.72}
 .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:980px){
 .topbar{height:78px;padding-inline:24px}
 .menu-toggle{display:block}
 .topbar nav{display:none;position:absolute;top:78px;left:0;right:0;padding:12px 24px 20px;background:#f5f7f8;border-top:1px solid var(--line);box-shadow:0 20px 30px #20283116}
 .topbar nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0}
 .topbar nav>a{padding:15px 4px;border-bottom:1px solid #e1e5e8;color:#303943}
 .nav-office{margin-top:10px;text-align:center}
}
@media(max-width:760px){
 .topbar{height:72px;padding-inline:20px}
 .topbar nav{top:72px;padding-inline:20px}
 .hero{min-height:660px;padding:100px 7% 105px}
 .hero-visual{right:-100px;top:51%;width:330px;height:330px;opacity:.34}
 .hero:before{right:-170px;top:22%;width:440px}
 .hero:after{right:-115px;top:27%;width:340px}
 .hero-copy{max-width:100%}
 h1{font-size:clamp(43px,11vw,65px)}
 .hero-lead{max-width:96%;font-size:13px}
 .hero-actions{align-items:flex-start;flex-direction:column;gap:18px}
 .hero-side{display:none}
 .hero-bottom{left:7%;right:7%;font-size:7px;gap:15px}
 .hero-bottom span:last-child{text-align:right}
 .section-wrap{padding:72px 7%}
 .intro{grid-template-columns:1fr;gap:20px}
 .section-heading{display:block}
 .section-heading p{margin-top:18px}
 .service-grid{grid-template-columns:1fr 1fr;gap:9px}
 .service-card{min-height:305px;padding:20px 15px}
 .service-card p{min-height:112px}
 .production-inner{padding:72px 7% 85px;min-height:unset}
 .production-copy{margin:0;max-width:100%}
 .production-stamp{position:relative;top:auto;right:auto;margin:35px 0 0 auto;width:108px;height:108px}
 .production-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .gallery-card,.gallery-card img{min-height:180px}
 .gallery-card-wide{grid-column:span 2}
 .gallery-card figcaption{left:13px;right:13px;bottom:13px}
 .gallery-card figcaption b{font-size:12px}
 .request-section{grid-template-columns:1fr;padding:72px 7%;gap:30px}
 .contacts{grid-template-columns:1fr;gap:25px}
 footer{padding:28px 7%;flex-wrap:wrap}
}
@media(max-width:420px){
 .service-grid{grid-template-columns:1fr}
 .service-card{min-height:unset}
 .service-card p{min-height:unset}
 .contact-line{align-items:flex-start;flex-direction:column;gap:8px}
 .contact-line b{text-align:left}
 .hero-bottom{letter-spacing:.08em}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}.js .reveal{opacity:1;transform:none}}


/* Media slots managed through assets/media.json */
.hero-media-slot{position:absolute;z-index:2;inset:64px 8px 38px;overflow:hidden;border:1px solid #ffffffb8;background:#dce1e5;box-shadow:0 26px 70px #20283125}
.hero-media-slot[hidden]{display:none}
.hero-media-slot img,.hero-media-slot video{display:block;width:100%;height:100%;object-fit:cover}
.hero-visual:has(.hero-media-slot:not([hidden])) .metal-object,
.hero-visual:has(.hero-media-slot:not([hidden])) .visual-orbit{display:none}
.hero-visual:has(.hero-media-slot:not([hidden])) .visual-index,
.hero-visual:has(.hero-media-slot:not([hidden])) .visual-measure{z-index:3;padding:7px 9px;background:#202831bd;color:#fff}
.media-fallback{grid-column:1/-1;padding:28px;border:1px dashed var(--line);color:var(--muted);font-size:12px}
@media(max-width:760px){
 .hero-media-slot{inset:50px 20px 45px 0}
}


/* Persistent contact action on small screens */
.mobile-call{display:none}
@media(max-width:760px){
  .mobile-call{
    position:fixed;z-index:40;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    padding:16px 20px;background:#202831;color:#fff;border:1px solid #ffffff25;
    box-shadow:0 12px 34px #17212b45;font-size:10px;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase
  }
  .mobile-call span{font-size:18px;color:#d9c2a8}
  body{padding-bottom:76px}
}
@media(prefers-reduced-motion:reduce){.mobile-call{transition:none}}


/* Real production photography in service cards */
.service-card-photo{overflow:hidden;padding-top:190px}
.service-card-photo .service-photo{position:absolute;inset:0 0 auto;width:100%;height:168px;object-fit:cover;filter:saturate(.78) contrast(1.04)}
.service-card-photo:before{content:"";position:absolute;z-index:1;left:0;right:0;top:125px;height:44px;background:linear-gradient(transparent,#ffffff)}
.service-card-photo .service-no{position:absolute;top:178px;right:22px;z-index:2;background:#fff;padding:5px 8px}
.service-card-photo .service-icon{position:relative;z-index:2;margin:0 0 18px;width:42px;height:42px}
.service-card-photo h3,.service-card-photo p,.service-card-photo .add-service{position:relative;z-index:2}
@media(max-width:760px){
 .service-card-photo{padding-top:160px}
 .service-card-photo .service-photo{height:140px}
 .service-card-photo:before{top:105px}
 .service-card-photo .service-no{top:148px;right:12px}
 .service-card-photo .service-icon{width:36px;height:36px;margin-bottom:14px}
}