/* Reference layout; the logo and value icons are separate crops of the supplied artwork. */
@font-face{font-family:Montserrat;src:url('montserrat.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{--u:min(1vw,19.2px)}
body{font-family:Montserrat,Arial,sans-serif}
.reference-crop{display:block;background-image:none;background-repeat:no-repeat;flex-shrink:0}
.header-inner{max-width:1920px;height:calc(var(--u)*7.916667);padding:0 calc(var(--u)*2.239583) 0 calc(var(--u)*2.604167);gap:0;position:relative;align-items:flex-start}
.brand{position:absolute;top:calc(var(--u)*2.083333);left:calc(var(--u)*2.604167);width:calc(var(--u)*10.9375);height:calc(var(--u)*9.270833);z-index:3;background-size:914.285714% auto;background-position:2.923977% 4.474273%}
.header-right{margin-left:calc(var(--u)*15.989583);padding-top:calc(var(--u)*2.447917)}
.nav-row{height:calc(var(--u)*5.46875);min-height:0;gap:0;justify-content:flex-start}
#primary-menu{flex:1;min-width:0}
nav ul{flex-wrap:nowrap;gap:calc(var(--u)*1.458333);justify-content:flex-start}
nav a{font-size:calc(var(--u)*.9375);font-weight:500;letter-spacing:.015em;padding:calc(var(--u)*.65) 0;white-space:nowrap;border:0}
nav .current-menu-item a{border:0}
body.home nav li:first-child a{box-shadow:0 2px 0 var(--gold)}
.reference-socials{display:flex;align-items:center;gap:calc(var(--u)*.729167);height:100%;border-left:1px solid #7d8387;margin-left:calc(var(--u)*1.25);padding-left:calc(var(--u)*2.03125);padding-right:calc(var(--u)*2.083333)}
.reference-socials .reference-crop{width:calc(var(--u)*2.604167);height:calc(var(--u)*2.604167);background-size:3840% auto}
.social-vk{background-position:79.197861% 7.632094%}
.social-telegram{background-position:82.566845% 7.632094%}
.social-youtube{background-position:85.882353% 7.632094%}
.header-phone{display:block!important;font-size:calc(var(--u)*.9375);font-weight:600;white-space:nowrap;color:var(--ink)}
.hero.wrap{max-width:1920px;height:calc(var(--u)*36.25);min-height:0;padding:0;display:block}
.hero-copy{position:absolute;top:calc(var(--u)*9.166667);left:calc(var(--u)*3.125);padding:0;width:calc(var(--u)*31);z-index:2}
.hero h1{font-size:calc(var(--u)*2.395833);font-weight:600;line-height:1.347826;letter-spacing:.025em;margin:0 0 calc(var(--u)*1.71875);color:#213344}
.gold-rule{width:calc(var(--u)*28.28125);max-width:none;margin:0 0 calc(var(--u)*1.875);background:#b89850}
.gold-rule i{width:calc(var(--u)*.9375);height:calc(var(--u)*.9375);top:calc(var(--u)*-.46875);border:2px solid #b89850}
.brand-motto{gap:calc(var(--u)*1.40625);font-size:calc(var(--u)*1.041667);letter-spacing:.27em;white-space:nowrap;margin:0 0 calc(var(--u)*1.666667);color:#30373e}
.brand-motto i{height:calc(var(--u)*1.145833)}
.about-button{width:calc(var(--u)*18.229167);height:calc(var(--u)*3.229167);min-height:0;padding:0 calc(var(--u)*1.25);justify-content:space-between;gap:calc(var(--u)*1.041667);font-size:calc(var(--u)*.9375);text-transform:uppercase;letter-spacing:.09em;background:#194361;border:0}
.button-rule{display:block;height:1px;background:#b89850;width:calc(var(--u)*4.6875);flex-shrink:0;position:relative}
.button-rule:after{content:'';position:absolute;right:0;top:calc(var(--u)*-.3125);width:calc(var(--u)*.625);height:calc(var(--u)*.625);border:2px solid #b89850;border-radius:50%;background:#194361}
.hero-image{position:absolute;left:18.489583%;top:0;width:79.270833%;height:100%;margin:0;clip-path:polygon(5.25624% 0,100% 0,100% 100%,0 100%,20.63075% 59.62644%)}
.hero-image>img{position:absolute;width:126.149803%;height:auto;max-width:none;left:-23.324573%;top:-21.83908%;object-fit:initial;object-position:initial}
.hero-image:after{display:none}
.values.wrap{max-width:1920px;position:relative;padding:calc(var(--u)*2.135417) calc(var(--u)*9.635417) calc(var(--u)*2.239583) calc(var(--u)*3.125);height:calc(var(--u)*11.666667);grid-template-columns:31.641791% 34.149254% 34.208955%;gap:0;align-items:start}
.value{padding:0 calc(var(--u)*2.5) 0 calc(var(--u)*3.385417);gap:calc(var(--u)*1.770833);height:calc(var(--u)*7.291667);display:flex;border-color:#ccc}
.value:first-child{padding-left:0;gap:calc(var(--u)*1.927083)}
.value:nth-child(2){gap:calc(var(--u)*1.25)}
.value:last-of-type{padding-left:calc(var(--u)*2.96875);padding-right:0;border:0}
.value-icon{width:calc(var(--u)*7.8125);height:calc(var(--u)*7.5);background-size:1280% auto}
.icon-compass{background-position:3.333333% 95.689655%}
.icon-shield{background-position:37.175141% 95.689655%}
.icon-bridge{background-position:68.813559% 95.689655%}
.value h2{font-size:calc(var(--u)*1.458333);font-weight:500;letter-spacing:.08em;margin:calc(var(--u)*.104167) 0 calc(var(--u)*.729167);white-space:nowrap}
.value p{font-size:calc(var(--u)*.833333);line-height:1.9;color:#34404a;max-width:calc(var(--u)*15.625)}
.values-corner{position:absolute;right:calc(var(--u)*2.239583);top:calc(var(--u)*.520833);width:calc(var(--u)*8.020833);height:calc(var(--u)*8.90625);background-size:1246.753247% auto;background-position:97.621744% 95.227525%}
.portfolio-photo{overflow:hidden;background:var(--surface)}
.portfolio-photo img{display:block;width:100%;aspect-ratio:1.5;object-fit:cover}
@media(min-width:901px) and (max-width:1200px){.menu-toggle{display:none}}
@media(max-width:900px){
 .header-inner{height:110px;padding:0 24px;align-items:center;justify-content:space-between}
 .brand{position:relative;left:auto;top:auto;width:108px;height:92px}
 .header-right{margin:0;padding:0;flex:0 1 auto}
 .nav-row{height:auto;gap:18px;flex-wrap:wrap;justify-content:flex-end}
 .menu-toggle{display:inline-flex;font-size:13px;order:3}
 .header-phone{font-size:12px}
 .reference-socials{display:none}
 #primary-menu{display:none;position:absolute;top:100%;left:0;right:0;background:white;padding:16px 24px;border-bottom:1px solid var(--line)}
 #primary-menu.open{display:block}
 nav ul{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px}
 nav a{font-size:12px;padding:12px 0;white-space:normal}
 body.home nav li:first-child a{box-shadow:none}
 .hero.wrap{height:auto;display:flex;flex-direction:column;padding:0 24px}
 .hero-copy{position:relative;top:auto;left:auto;width:100%;padding:30px 0}
 .hero h1{font-size:clamp(27px,5.4vw,44px);line-height:1.4;margin-bottom:28px;letter-spacing:.025em}
 .gold-rule{width:min(100%,490px);margin-bottom:24px}
 .gold-rule i{width:12px;height:12px;top:-6px}
 .brand-motto{font-size:clamp(10px,1.8vw,16px);gap:18px;letter-spacing:.2em;margin-bottom:26px}
 .brand-motto i{height:15px}
 .about-button{width:290px;max-width:100%;height:52px;font-size:13px;padding:0 20px;gap:18px}
 .button-rule{width:65px}.button-rule:after{width:10px;height:10px;top:-5px}
 .hero-image{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:1.75;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,10% 50%)}
 .hero-image>img{width:165.517241%;left:-61.206897%;top:-21.83908%;height:auto}
 .values.wrap{height:auto;padding:30px 24px;display:grid;grid-template-columns:1fr;gap:0}
 .value,.value:first-child{padding:20px 0;gap:25px;height:auto;border-right:0;border-bottom:1px solid var(--line);align-items:center}
 .value-icon{width:92px;height:88.32px}
 .value h2{font-size:20px;margin:0 0 8px;letter-spacing:.08em}
 .value p{font-size:13px;line-height:1.7;max-width:260px}
 .value p br{display:none}.value p br:after{content:' '}
 .values-corner{display:none}
}
@media(max-width:390px){.header-inner{padding-inline:20px}.nav-row{gap:8px}.header-phone{font-size:10px}.hero.wrap{padding-inline:20px}.brand-motto{gap:12px;letter-spacing:.14em}.value,.value:first-child{gap:18px}.value-icon{width:76px;height:72.96px}.value h2{font-size:18px}.value p{font-size:12px}}
@media print{.header-right{display:none!important}}
/* Independent image assets and CSS-only framing. */
.reference-crop{background-size:contain!important;background-position:center!important}
.brand{background-image:url('logo.png')}
.icon-compass{background-image:url('value-compass.png')}
.icon-shield{background-image:url('value-shield.png')}
.icon-bridge{background-image:url('value-bridge.png')}
.social-vk{background-image:url('social-vk.png')}
.social-telegram{background-image:url('social-telegram.png')}
.social-youtube{background-image:url('social-youtube.png')}
.values-corner{background-image:none;clip-path:polygon(100% 0,100% 100%,0 100%);background-color:#343a40}
.values-corner:after{content:'';position:absolute;bottom:0;left:0;background:#bc9138;border:2px solid white;border-radius:50%;width:24%;aspect-ratio:1}
nav ul{gap:calc(var(--u)*1.25)}
nav a{font-size:calc(var(--u)*.885417);letter-spacing:0}
.reference-socials{margin-left:calc(var(--u)*1.041667);padding-left:calc(var(--u)*1.875);padding-right:calc(var(--u)*1.875)}
.about-button{white-space:nowrap;font-size:calc(var(--u)*.833333);letter-spacing:.065em;gap:calc(var(--u)*.9375);font-weight:400}
.hero-image{clip-path:none}
.hero-image>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;max-width:100%}
.hero-frame{position:absolute;inset:0;background:linear-gradient(135deg,#fff 65%,#eef3f6);clip-path:polygon(0 0,5.26% 0,20.63% 59.63%,10.38% 100%,0 100%,0 0)}
.hero-corner{position:absolute;bottom:0;right:0;width:8%;height:27%;background:white;clip-path:polygon(100% 0,100% 100%,0 100%)}
.hero-corner:after{content:'';position:absolute;inset:8px 0 0 8px;background:#143858;clip-path:polygon(100% 0,100% 100%,0 100%)}
.value{align-items:flex-start}
.card-body,.product-card,.content-card{min-width:0;overflow-wrap:anywhere}
@media(max-width:900px){
 :root{--gutter:24px}
 .wrap{padding-inline:var(--gutter)}
 .header-inner{padding-inline:var(--gutter)}
 .hero.wrap{padding-inline:var(--gutter)}
 .hero-image{aspect-ratio:1.75}
 .hero-image>img{inset:0;width:100%;height:100%;object-fit:cover;object-position:65% center}
 .hero-frame{clip-path:polygon(0 0,0 0,10% 50%,0 100%)}
 .hero-corner{width:12%;height:24%}
 .about-button{font-size:13px;gap:18px}
 .values.wrap{padding-inline:var(--gutter)}
 .value:nth-child(n){padding:20px 0;gap:24px;border-right:0;border-bottom:1px solid var(--line);align-items:center}
 .value:last-of-type{border-bottom:0}
 .value-icon{width:90px;height:86px}
 .value p{max-width:none}
 .value>div{min-width:0}
 .value p br{display:none}
 nav a{font-size:13px;letter-spacing:0}
 .menu-toggle{width:44px;height:44px;justify-content:center;padding:10px}
 .header-phone{font-size:12px}
 .nav-row{gap:12px}
 .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .product-card h3{overflow-wrap:normal;hyphens:auto}
 .price{overflow-wrap:normal}
 .entry-content .wp-block-image{margin-inline:0}
 .woocommerce div.product .product_title{overflow-wrap:anywhere}
 .woocommerce .woocommerce-ordering{float:none;margin:0 0 20px}
 .woocommerce .woocommerce-ordering select{max-width:100%;width:100%}
}
@media(max-width:600px){
 :root{--gutter:20px}
 .value:nth-child(n){gap:20px}
 .value-icon{width:76px;height:73px}
 .value h2{font-size:18px}
 .value p{font-size:12px;line-height:1.8}
 .header-phone{font-size:11px}
 .nav-row{gap:8px}
 .card-body{padding:14px 12px}
 .card-body h3{font-size:15px}
 .product-bottom{flex-wrap:wrap;gap:8px}
 .product-bottom .price{font-size:12px}
 .brand-motto{gap:12px;font-size:10px;letter-spacing:.14em}
}
.page-heading h1,.woocommerce-products-header__title{overflow-wrap:anywhere;hyphens:auto}
#primary-menu a{position:relative;width:fit-content;text-decoration:none;border-bottom:0;box-shadow:none}
#primary-menu a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);opacity:0;transition:opacity .15s ease}
#primary-menu a:hover::after,#primary-menu a:focus-visible::after,#primary-menu .current-menu-item>a::after,#primary-menu .current-menu-parent>a::after,#primary-menu .current-menu-ancestor>a::after,body.home #primary-menu li:first-child>a::after{opacity:1}
.woocommerce ul.products li.product h2{overflow-wrap:anywhere;hyphens:auto}
@media(max-width:600px){.woocommerce ul.products li.product h2{font-size:16px!important}.page-heading h1{font-size:30px}}
/* Clip the photograph itself so fractional scaling cannot expose a vertical seam. */
@media(min-width:901px){
 .hero.wrap,.values.wrap{max-width:none}
 .hero-image{left:18.489583%;right:0;width:auto;background:#edf2f5;clip-path:polygon(5.26% 0,100% 0,100% 100%,0 100%,20.63% 59.63%)}
 .hero-image>img{clip-path:polygon(5.26% 0,100% 0,100% 100%,10.38% 100%,20.63% 59.63%)}
 .hero-frame{display:none}
 .values-corner{right:0}
}
