:root{
      --bg:#0f1b2d;
      --text:#f2f6ff;
      --muted:rgba(242,246,255,.78);
      --card:rgba(255,255,255,.10);
      --border:rgba(255,255,255,.18);
      --shadow:0 18px 60px rgba(0,0,0,.28);
      --accent:#9fe2ff;
      --accent2:#6f95ff;
      --radius:18px;
      --header-h:68px;

      /* относительный путь, чтобы работало и при file:// */
      --hero-image: url('../img/hero.png');
    }

    *{box-sizing:border-box}
    html,body{height:100%; min-height:100vh; display:flex; flex-direction:column;}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
      background: radial-gradient(1200px 800px at 20% 0%, rgba(159,226,255,.18), transparent 60%), radial-gradient(900px 700px at 100% 20%, rgba(111,149,255,.14), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%), var(--bg);
      color:var(--text);
      overflow-x:hidden;
    }

    a{color:inherit; text-decoration:none}
    .container{width:min(1180px, 92vw); margin:0 auto}

    
    main.container{flex:1 0 auto;}
    footer{margin-top:auto;}
/* Header */
    .header{
      position:sticky; top:0; z-index:50;
      height:var(--header-h);
      display:flex; align-items:center;
      backdrop-filter: blur(14px);
      background: linear-gradient(180deg, rgba(7,11,20,.85), rgba(7,11,20,.55));
      border-bottom:1px solid var(--border);
    }
    .header-inner{display:flex; align-items:center; justify-content:space-between; gap:18px}
    .brand{display:flex; align-items:center; gap:12px}
    .logo{
      width:36px; height:36px; border-radius:12px;
      overflow:hidden;
      background: rgba(255,255,255,.04);
      background: radial-gradient(1200px 800px at 20% 0%, rgba(159,226,255,.18), transparent 60%), radial-gradient(900px 700px at 100% 20%, rgba(111,149,255,.14), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%), var(--bg);
      border:1px solid rgba(255,255,255,.18);
      box-shadow:0 10px 30px rgba(0,0,0,.25);
    }
    .logo img{width:100%; height:100%; object-fit:contain; display:block; border-radius:12px}
    .brand-title{font-weight:800; letter-spacing:.2px}
    .brand-sub{font-size:12px; color:var(--muted); margin-top:2px}

    .nav{display:flex; align-items:center; gap:8px}
    .nav a{
      padding:10px 12px;
      border-radius:12px;
      color:var(--muted);
      border:1px solid transparent;
      transition: .25s ease;
      font-weight:600;
      font-size:14px;
    }
    .nav a:hover{color:var(--text); border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.04)}
    .nav a.active{color:var(--text); border-color:rgba(143,211,255,.38); background:rgba(143,211,255,.08)}

    .cta{
      display:flex; gap:10px; align-items:center;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.05);
      color:var(--text);
      font-weight:800;
      cursor:pointer;
      transition:.25s ease;
      box-shadow:0 10px 30px rgba(0,0,0,.18);
      user-select:none;
    }
    .btn:hover{transform: translateY(-1px); background:rgba(255,255,255,.08)}
    .btn.primary{
      border-color:rgba(143,211,255,.35);
      background: linear-gradient(135deg, rgba(143,211,255,.18), rgba(91,132,255,.14));
    }

    .burger{display:none; width:44px; height:44px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05)}
    .burger-lines{display:grid; gap:6px; place-content:center}
    .burger-lines span{display:block; width:18px; height:2px; background:rgba(234,240,255,.75); border-radius:99px}

    /* Mobile drawer */
    .drawer-backdrop{
      position:fixed; inset:0;
      background:rgba(0,0,0,.55);
      opacity:0; pointer-events:none;
      transition:.25s ease;
      z-index:60;
    }
    .drawer{
      position:fixed; top:0; right:0; height:100%; width:min(360px, 88vw);
      background: linear-gradient(180deg, rgba(7,11,20,.98), rgba(11,18,32,.96));
      border-left:1px solid rgba(255,255,255,.12);
      transform: translateX(110%);
      transition:.25s ease;
      z-index:70;
      padding:18px;
    }
    .drawer.open{transform: translateX(0)}
    .drawer-backdrop.open{opacity:1; pointer-events:auto}
    .drawer a{display:block; padding:14px 12px; border-radius:14px; color:var(--muted); font-weight:800; border:1px solid transparent}
    .drawer a.active{color:var(--text); border-color:rgba(143,211,255,.38); background:rgba(143,211,255,.08)}
    .drawer a:hover{color:var(--text); border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.04)}

    /* Page system */
    main{min-height: calc(100vh - var(--header-h));
      flex:1;
    }
    .page{
      display:none;
      padding:32px 0 46px;
      animation: pageIn .45s ease both;
    }
    .page.active{display:block}
    @keyframes pageIn{from{opacity:0; transform: translateY(10px)} to{opacity:1; transform: translateY(0)}}

    /* Hero */
    .hero{
      position:relative;
      border-radius:28px;
      overflow:hidden;
      min-height: calc(76vh);
      display:flex;
      align-items:flex-end;
      padding:44px 34px;
      border:1px solid rgba(255,255,255,.14);
      box-shadow: var(--shadow);
      background: #000;
    }
    .hero::before{
      content:"";
      position:absolute; inset:0;
      background-image: var(--hero-image);
      background-size: cover;
      background-position: center;
      filter: none;
      transform: scale(1.02);
    }
    .hero::after{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(800px 480px at 20% 70%, rgba(255,255,255,.18), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.42));
      pointer-events:none;
    }
    .hero-content{position:relative; z-index:2; width:min(760px, 100%)}
    .kicker{color:rgba(234,240,255,.84); font-weight:800; letter-spacing:.3px}
    .hero-title{
      margin:12px 0 6px;
      font-size: clamp(34px, 4.8vw, 56px);
      line-height:1.05;
      font-weight: 900;
      letter-spacing:.3px;
      text-shadow:0 16px 50px rgba(0,0,0,.55);
    }
    .hero-sub{
      margin:0;
      font-size: clamp(16px, 1.9vw, 22px);
      color:rgba(234,240,255,.92);
      font-weight:800;
    }

    /* Sections */
    .section{margin-top:26px}
    .section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin: 20px 0 14px}
    .h2{font-size:22px; margin:0; letter-spacing:.2px}
    .lead{margin:0; color:var(--muted); font-weight:600}

/* Color band (for blocks like "О нас" on home) */
    .band{
      margin-top:28px;
      padding:22px;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.14);
      background: linear-gradient(180deg, rgba(111,149,255,.20), rgba(159,226,255,.10));
      box-shadow:0 18px 60px rgba(0,0,0,.22);
    }
    .about-band .section-head{margin-top:0}

    .grid-6{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
    .card{
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      border-radius: var(--radius);
      overflow:hidden;
      box-shadow: 0 12px 40px rgba(0,0,0,.25);
    }
    .proj-img{height:160px; background: radial-gradient(1200px 800px at 20% 0%, rgba(159,226,255,.18), transparent 60%), radial-gradient(900px 700px at 100% 20%, rgba(111,149,255,.14), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%), var(--bg);
      }
    .card-body{padding:14px 14px 16px}
    .card-title{margin:0 0 6px; font-weight:900}
    .card-text{margin:0; color:var(--muted); font-weight:600; font-size:14px}

    /* No hover/click on project cards (home) */
    .no-interact .card{pointer-events:none}

    /* Services row */
    .services-row{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px}
    .svc{
      padding:16px;
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.12);
      background: radial-gradient(1200px 800px at 20% 0%, rgba(159,226,255,.18), transparent 60%), radial-gradient(900px 700px at 100% 20%, rgba(111,149,255,.14), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%), var(--bg);
      box-shadow: 0 12px 40px rgba(0,0,0,.22);
    }
    .svc h3{margin:0 0 8px; font-size:16px; font-weight:900}
    .svc p{margin:0; color:var(--muted); font-weight:600; font-size:14px}

    /* About teaser */
    .about-teaser{
      display:grid; grid-template-columns: 1.4fr .6fr; gap:14px;
    }
    .about-box{padding:18px}
    .about-box p{margin:0; color:var(--muted); font-weight:600; line-height:1.55}
    .about-actions{display:flex; align-items:center; justify-content:center; padding:18px}

    /* Form */
    .form-wrap{display:grid; grid-template-columns: 1.1fr .9fr; gap:14px}
    .form-card{padding:18px}
    .field{display:flex; flex-direction:column; gap:8px; margin-top:12px}
    .field label{font-size:13px; color:rgba(234,240,255,.78); font-weight:800}
    .input, .textarea{
      width:100%;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(7,11,20,.35);
      color:var(--text);
      padding:12px 12px;
      outline:none;
      font-weight:650;
    }
    .textarea{min-height:110px; resize:vertical}
    .form-note{margin-top:10px; color:var(--muted); font-size:13px; line-height:1.45}

    /* Footer */
    footer{margin-top:26px; border-top:1px solid rgba(255,255,255,.12); padding:14px 0 18px; color:var(--muted)}
    
    .footer-contacts{display:flex; flex-direction:column; gap:6px; font-weight:650}
    .footer-small{font-size:12px}

    /* Responsive */
    @media (max-width: 980px){
      .grid-6{grid-template-columns: repeat(2, 1fr)}
      .services-row{grid-template-columns: repeat(2, 1fr)}
      .form-wrap{grid-template-columns: 1fr}
      .about-teaser{grid-template-columns: 1fr}
    }
    @media (max-width: 720px){
      .nav, .cta{display:none}
      .burger{display:inline-flex; align-items:center; justify-content:center}
      .hero{padding:32px 18px; min-height: 68vh}
      .grid-6{grid-template-columns: 1fr}
      .services-row{grid-template-columns: 1fr}
    }
  

/* Layout fix: footer pinned to bottom */
html,body{height:100%;}
body{min-height:100vh; display:flex; flex-direction:column;}
main{flex:1;}

.mini-stat{
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  border-radius:14px;
  padding:12px 12px;
}
.mini-stat .ms-num{font-weight:900; font-size:18px; letter-spacing:.2px}
.mini-stat .ms-lbl{margin-top:2px; color:var(--muted); font-weight:650; font-size:12.5px; line-height:1.2}
.proj-card{cursor:pointer}
.proj-img{width:100%; height:170px; object-fit:cover; border-radius:14px 14px 0 0; display:block; transition:opacity .25s ease}
@media (max-width:560px){
  .proj-img{height:150px}
  .mini-stat{padding:10px}
}

/* Modals */
.modal{position:fixed; inset:0; display:none; z-index:80}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:absolute; inset:0; background:rgba(5,10,18,.65); backdrop-filter: blur(4px)}
.modal-dialog{
  position:relative;
  width:min(760px, calc(100% - 28px));
  margin:76px auto;
  background:rgba(15,27,45,.92);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:14px 14px; border-bottom:1px solid var(--border)}
.modal-title{font-weight:900; letter-spacing:.2px}
.icon-btn{border:1px solid var(--border); background:rgba(255,255,255,.06); color:var(--text); border-radius:12px; padding:8px 10px; cursor:pointer}
.icon-btn:hover{background:rgba(255,255,255,.10)}
.modal-body{padding:14px}
.form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.field span{display:block; font-size:12px; color:var(--muted); font-weight:750; margin-bottom:6px}
.field input,.field textarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);
  outline:none;
}
.field input:focus,.field textarea:focus{border-color:rgba(159,226,255,.55); box-shadow:0 0 0 4px rgba(159,226,255,.10)}
.modal-actions{display:flex; align-items:center; gap:12px; margin-top:12px}
.hint{color:var(--muted); font-weight:650; font-size:13px}
.proj-view{display:grid; grid-template-columns:44px 1fr 44px; gap:10px; align-items:center}
.proj-view img{width:100%; height:min(56vh,420px); object-fit:cover; border-radius:14px; border:1px solid var(--border)}
.nav-btn{height:44px; width:44px; display:flex; align-items:center; justify-content:center; font-size:22px; padding:0}
@media (max-width:640px){
  .form-grid{grid-template-columns:1fr}
  .modal-dialog{margin:58px auto}
  .proj-view img{height:46vh}
}

/* Reveal */
.reveal{opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s ease}
.reveal.in{opacity:1; transform:translateY(0)}

/* --- Patches (services modal + contacts grid + inline form) --- */
#page-services .svc{
  cursor:pointer;
  width:100%;
  text-align:left;
  appearance:none;
}
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 860px){
  .contact-grid{grid-template-columns:1fr;}
}
.svc-media{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width: 720px){
  .svc-media{grid-template-columns:1fr;}
}
.svc-media img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
}
main{flex:1;}


/* --- Fix: buttons inherit text color (services were turning black in some browsers) --- */
button{font:inherit; color:inherit}

/* --- Services: full descriptions in grid --- */
.services-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; margin-top:18px}
@media (max-width: 860px){
  .services-grid{grid-template-columns:1fr}
}
.svc-block{padding:18px}
.svc-block h3{margin:0 0 12px; font-size:18px; font-weight:950; color:var(--text)}
.svc-body{display:flex; flex-direction:column; gap:12px}
.svc-media{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
.svc-media img{width:100%; height:190px; object-fit:cover; border-radius:14px; border:1px solid rgba(255,255,255,.14)}
@media (max-width: 560px){
  .svc-media{grid-template-columns:1fr}
  .svc-media img{height:210px}
}
.svc-text{color:var(--muted); font-weight:650; line-height:1.7}
.svc-text p{margin:0 0 10px}
.svc-text p:last-child{margin-bottom:0}

/* --- Footer: always centered and pinned to bottom --- */
.site-footer{width:100%; border-top:1px solid rgba(255,255,255,.12); padding:16px 0}
.footer-inner{width:min(1180px, 92vw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}



/* About page layout */
    .h3{font-size:18px; margin:0; letter-spacing:.2px}
    .about-layout{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items:start}
    .about-kicker{font-weight:900; letter-spacing:.14em; text-transform:uppercase; font-size:11px; color:rgba(242,246,255,.75)}
    .about-p{margin:0 0 12px 0; color:var(--muted); font-weight:650; line-height:1.75}
    .about-bullets{display:grid; gap:6px; margin: 10px 0 14px}
    .bullet{color:rgba(242,246,255,.88); font-weight:650; line-height:1.6}
    .about-block{margin-top:10px; padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05)}
    .about-block-title{font-weight:900; margin-bottom:8px}
    .about-mission{margin-top:12px; padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(159,226,255,.10), rgba(111,149,255,.06))}
    .tag{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.10); font-weight:900; font-size:11px; letter-spacing:.12em}
    .about-media .media-placeholder{height:100%; min-height:260px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background: radial-gradient(1200px 800px at 20% 0%, rgba(159,226,255,.16), transparent 60%), radial-gradient(900px 700px at 100% 20%, rgba(111,149,255,.14), transparent 55%), rgba(255,255,255,.04); padding:18px; display:flex; flex-direction:column; justify-content:flex-end; gap:8px}
    .mp-title{font-weight:900}
    .mp-sub{color:var(--muted); font-weight:650; line-height:1.6}
   .quote-card {
    display: flex;
    align-items: stretch;
    min-height: 500px;
    padding: 0;
}





    .quote-mark{font-size:46px; font-weight:900; line-height:1; opacity:.35; margin-bottom:8px}
    .quote-text{color:rgba(242,246,255,.90); font-weight:700; line-height:1.8}
    .quote-author{margin-top:10px; color:var(--muted); font-weight:700}

    @media (max-width: 860px){
      .about-layout{grid-template-columns: 1fr}
      .about-media .media-placeholder{min-height:200px}
    }

/* Footer layout */
.site-footer{border-top:1px solid rgba(255,255,255,.14); padding:18px 0; margin-top:auto; background: rgba(7,11,20,.25)}
.footer-wrap{display:flex; flex-direction:column; gap:12px}
.footer-nav{display:flex; flex-wrap:wrap; gap:14px}
.footer-contacts{display:flex; flex-wrap:wrap; gap:14px; color:var(--muted)}
.footer-bottom{display:flex; justify-content:flex-end; color:var(--muted); font-weight:600; font-size:13px}
.f-link{color:rgba(242,246,255,.86); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px}
.f-link:hover{color:var(--text); border-color:rgba(255,255,255,.28)}
@media (min-width: 760px){
  .footer-wrap{flex-direction:row; align-items:center; justify-content:space-between}
  .footer-bottom{justify-content:flex-end}
}


/* ===============================
   FINAL LAYOUT FIXES (ЭлитСтрой)
   =============================== */

/* 1) Footer always at bottom (prevents footer floating in the middle) */
html, body{height:100%}
body{min-height:100%; display:flex; flex-direction:column}
main{flex:1 0 auto}
.site-footer{flex:0 0 auto}

/* 2) Header logo (small icon) */
.logo{width:44px; height:44px; flex:0 0 44px; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); box-shadow:0 10px 26px rgba(0,0,0,.22)}
.logo img{width:100%; height:100%; object-fit:cover; display:block}

/* 3) Move "О нас" visually lower (separate from hero image) */
.home-about-spacer{height:140px}
@media (max-width: 720px){
  .home-about-spacer{height:90px}
}

/* 4) Services page — full width stacked blocks (scrollable, filled page) */
.services-grid{grid-template-columns:1fr !important; gap:22px; margin-top:18px}
.svc-block{padding:22px}
.svc-block h3{font-size:20px; letter-spacing:.2px}
.svc-body{display:grid; grid-template-columns: 1.05fr .95fr; gap:18px; align-items:start}
.svc-block.alt .svc-body{grid-template-columns: .95fr 1.05fr}
.svc-block.alt .svc-media{order:2}
.svc-block.alt .svc-text{order:1}
.svc-media img{height:250px}
@media (max-width: 920px){
  .svc-body{grid-template-columns:1fr}
  .svc-block.alt .svc-media{order:0}
  .svc-block.alt .svc-text{order:0}
  .svc-media img{height:220px}
}

/* 5) About page — logo as media */
.about-media .about-logo{
  width:100%;
  height:100%;
  min-height:320px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 16px 46px rgba(0,0,0,.26);
  background: rgba(255,255,255,.04);
}

/* 6) Contacts page — bigger map + typography */
.contact-grid{grid-template-columns: 1fr 1.2fr}
@media (max-width: 920px){
  .contact-grid{grid-template-columns:1fr}
}
.contact-grid > div:first-child{font-size:16px}
.contact-grid > div:first-child div[style*="Связаться с нами"]{font-size:18px}
#page-contacts iframe{height:360px !important}
.about-band {
  margin-top: 95px;
}
.hero-divider {
  height: 80px;
  background: linear-gradient(
    to bottom,
    rgba(8, 23, 45, 0) 0%,
    #0f1b2d 100%
  );
}

/* === PATCH v7: remove light horizontal bands from page background === */
body{ background: var(--bg) !important; }
.home-about-spacer{ display:none !important; }
/* ensure divider matches theme */
.hero-divider{ background: linear-gradient(to bottom, rgba(8,23,45,0) 0%, var(--bg) 100%) !important; }
.quote-card {
    display: flex;
    min-height: 500px;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
}

.quote-left {
    width: 50%;
    background: #1b2a3f;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quote-right {
    width: 50%;
    background: linear-gradient(135deg, #0f1b2d, #132844);
}


/* Contacts: light layout like reference */
.contacts-card{
  background:#ffffff;
  color:#0b1220;
}
.contacts-card a{ color:#0b1220; text-decoration:none; }
.contacts-card a:hover{ text-decoration:underline; }
.contacts-card .contact-grid{ align-items:start; gap:28px; }
.contacts-card .contact-grid > div:first-child{
  min-width:280px;
}
.contacts-card .contact-grid > div:first-child > div:first-child{
  font-size:22px;
}
.contacts-card .contact-grid > div:first-child > div:nth-child(2){
  color:#0b1220;
  font-weight:600;
  line-height:1.75;
}
.contacts-card iframe{ height:300px !important; }

@media (max-width: 860px){
  .contacts-card iframe{ height:240px !important; }
}

/* Contacts: light card */
.contacts-card{background:#fff;color:#0b1220;}
.contacts-card a{color:#0b1220;text-decoration:none;}
.contacts-card a:hover{text-decoration:underline;}
.contacts-card .contact-grid{align-items:start;gap:28px;}
.contacts-card iframe{height:320px;}
.contacts-card .btn.primary{background:#0f2a48;color:#fff;border-color:rgba(0,0,0,.12);}
@media (max-width:860px){
  .contacts-card iframe{height:260px;}
}

/* Contacts: light card */
.contacts-card{background:#fff;color:#0b1220;}
.contacts-card a{color:#0b1220;text-decoration:none;}
.contacts-card a:hover{text-decoration:underline;}
.contacts-card .contact-grid{align-items:start;gap:28px;}
.contacts-card iframe{height:320px;}
.contacts-card .btn.primary{background:#0f2a48;color:#fff;border:1px solid #0f2a48;}

@media (max-width:860px){
  .contacts-card iframe{height:260px;}
}

/* Contacts: light card */
.contacts-card{background:#fff;color:#0b1220;}
.contacts-card a{color:#0b1220;text-decoration:none;}
.contacts-card a:hover{text-decoration:underline;}
.contacts-card .contact-grid{align-items:start;gap:28px;}
.contacts-card iframe{height:320px;}
.contacts-card .btn.primary{background:#0f2a48;color:#fff;border:1px solid #0f2a48;}

/* Contacts: light card */
.contacts-card{background:#fff;color:#0b1220;}
.contacts-card a{color:#0b1220;text-decoration:none;}
.contacts-card a:hover{text-decoration:underline;}
.contacts-card .contact-grid{align-items:start;gap:28px;}
.contacts-card iframe{height:320px;}

/* About: right block photo */
.quote-right{padding:0;overflow:hidden;}
.quote-photo{width:100%;height:100%;display:block;object-fit:cover;}
.contacts-card{--muted:#41536a;}



/* --- Contacts (alt layout like reference) --- */
.contact-grid-alt{
  grid-template-columns: 1fr 1.35fr;
  align-items: start;
  gap: 18px;
}
.contact-title{
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 6px;
}
.contact-addr{
  color: var(--muted);
  font-weight: 650;
  line-height: 1.6;
  margin-bottom: 14px;
}
.contact-list{
  display: grid;
  gap: 8px;
}
.contact-row{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.6;
}
.c-ico{
  width: 18px;
  text-align: center;
  opacity: .9;
}
.c-link{
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
}
.c-link:hover{ text-decoration: underline; }

.map-wrap .map-title{
  font-weight: 900;
  margin-bottom: 10px;
}
.map-frame{
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
}

/* About quote split: make photo fill the left panel nicely */
.quote-right img.about-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}

.company-image {
    width: 420px;              /* Квадратный размер */
    height: 420px;             
    border-radius: 24px;       /* Скругленные углы */
    overflow: hidden;          /* Обрезка по углам */
    border: 1px solid rgba(255,255,255,0.08); /* Рамка */
    background: rgba(255,255,255,0.02);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);  /* Тень */
}

.company-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* Чтобы картинка не растягивалась */
    display: block;
}
.company-image {
    width: 100%;                 /* Максимальная ширина */
    height: 500px;               /* Увеличенный размер */
    border-radius: 16px;         /* Скругленные углы */
    overflow: hidden;            /* Обрезка по углам */
    margin: 0 auto;              /* Центрирование */
    display: block;              /* Блочный элемент */
}

.company-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;           /* Плавное обрезание картинки */
    display: block;              /* Блочный элемент */
}


/* --- site tweaks --- */
.header{position:sticky!important;top:0;z-index:120!important;}
.brand-link{text-decoration:none;color:inherit;cursor:pointer;}
.brand-sub{display:none;}
.header-inner{gap:14px;}
.header-quick-actions{display:flex;align-items:center;gap:10px;margin-left:auto;}
.header-icon-link{width:42px;height:42px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--text);font-size:19px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);box-shadow:0 10px 30px rgba(0,0,0,.18);transition:.25s ease;}
.header-icon-link:hover{transform:translateY(-1px);background:rgba(255,255,255,.09);}
.hero{min-height:clamp(440px,72vh,760px)!important;}
.hero::before{background-size:contain!important;background-repeat:no-repeat!important;background-position:center center!important;transform:none!important;}
.hero::after{background:linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.38))!important;}
.hero-content{max-width:560px;}
.hero-title{font-size:clamp(34px,5.6vw,68px)!important;line-height:1.04;}
.hero-sub{font-size:22px;font-weight:800;margin:8px 0 0;}
.hero-kicker{margin:10px 0 0;color:var(--text);font-weight:700;font-size:16px;max-width:420px;}
.lead-card{max-width:980px;margin:0 auto;}
.lead-form-head{text-align:center;margin-bottom:8px;}
.lead-form-title{margin:0;font-size:clamp(28px,4vw,40px);}
.lead-form-sub{margin:10px 0 0;color:var(--muted);font-weight:650;}
.form-grid select,.form-grid input,.form-grid textarea{width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(7,11,20,.35);color:var(--text);padding:12px 12px;outline:none;font-weight:650;}
.form-grid select option{color:#111;}
.field-error{margin-top:6px;color:#ffb3b3;font-size:13px;font-weight:700;}
.input-invalid{border-color:#ff8f8f!important;box-shadow:0 0 0 1px rgba(255,143,143,.3);}
.footer-wrap{display:flex;flex-direction:column;gap:16px;}
.footer-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center;}
.footer-legal{display:flex;gap:14px;flex-wrap:wrap;}
.footer-hours{color:var(--muted);}
@media (max-width:980px){.hero::before{background-size:cover!important;background-position:center center!important;}}
@media (max-width:820px){.header-quick-actions{display:none;}.hero{min-height:420px!important;}.hero-title{font-size:clamp(30px,8vw,46px)!important;}}


/* --- final header + hero fixes --- */
.header-inner{justify-content:flex-start!important;gap:18px!important;}
.nav{flex:1 1 auto;justify-content:center;min-width:0;}
.nav a{font-size:15px!important;padding:10px 14px!important;white-space:nowrap;}
.header-quick-actions{margin-left:0!important;display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.cta{flex:0 0 auto;}
.brand{flex:0 0 auto;}
.brand-title{white-space:nowrap;}
.header-contact-chip{display:flex;align-items:center;gap:0;min-width:44px;max-width:44px;height:44px;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);box-shadow:0 10px 30px rgba(0,0,0,.18);transition:max-width .28s ease, background .25s ease, border-color .25s ease;}
.header-contact-chip:hover{background:rgba(255,255,255,.08);}
.header-contact-chip.is-open{max-width:320px;background:rgba(255,255,255,.08);border-color:rgba(143,211,255,.28);}
.header-contact-toggle{width:44px;height:44px;border:0;background:transparent;color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;flex:0 0 44px;}
.header-contact-value{display:inline-flex;align-items:center;white-space:nowrap;max-width:0;opacity:0;padding-right:0;overflow:hidden;font-size:14px;font-weight:700;color:var(--text);transition:max-width .28s ease, opacity .2s ease, padding .28s ease;}
.header-contact-chip.is-open .header-contact-value{max-width:240px;opacity:1;padding-right:14px;}
.header-contact-value:hover{color:#bfe9ff;}
.hero{position:relative;overflow:hidden;min-height:clamp(460px,72vh,760px)!important;isolation:isolate;}
.hero::before{background-size:cover!important;background-repeat:no-repeat!important;background-position:center center!important;transform:none!important;}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:
linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.32) 24%, rgba(0,0,0,.14) 45%, rgba(0,0,0,.18) 100%),
radial-gradient(circle at 98% 98%, rgba(4,10,18,.96) 0 4.2%, rgba(4,10,18,.88) 4.3%, rgba(4,10,18,0) 11%),
linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.34))!important;pointer-events:none;}
.hero-content{position:absolute!important;left:34px;right:auto;bottom:34px;z-index:2;max-width:620px;}
.hero-title{font-size:clamp(42px,5vw,72px)!important;line-height:.98;text-wrap:balance;}
.hero-sub{font-size:20px!important;margin-top:10px!important;}
.hero-kicker{font-size:16px!important;margin-top:8px!important;}
@media (max-width:1180px){
  .header-inner{gap:14px!important;}
  .nav a{padding:10px 11px!important;font-size:14px!important;}
  .header-contact-chip.is-open{max-width:280px;}
}
@media (max-width:980px){
  .nav{justify-content:flex-start;overflow:auto;}
  .header-contact-chip{display:none;}
  .hero::before{background-size:cover!important;background-position:center center!important;}
}
@media (max-width:820px){
  .nav{display:none!important;}
  .hero{min-height:420px!important;}
  .hero-content{left:22px;bottom:22px;right:22px;max-width:none;}
  .hero-title{font-size:clamp(30px,8vw,48px)!important;}
}


/* --- v3 header and hero fixes --- */
:root{--hero-image:url('../img/hero_wide.png');}
.header{position:sticky!important;top:0;z-index:120!important;}
.brand-link{text-decoration:none;color:inherit;cursor:pointer;}
.brand-sub{display:none!important;}
.header-inner{justify-content:flex-start!important;gap:14px!important;min-width:0;}
.brand{flex:0 0 auto;min-width:0;}
.brand-title{white-space:nowrap;}
.nav{display:flex;flex:1 1 auto;min-width:0;justify-content:center;gap:8px;flex-wrap:nowrap;overflow:visible;}
.nav a{white-space:nowrap;font-size:15px!important;padding:10px 12px!important;line-height:1.15;}
.header-quick-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:0!important;}
.cta{flex:0 0 auto;}
.header-contact-chip{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);box-shadow:0 10px 30px rgba(0,0,0,.18);overflow:visible;}
.header-contact-toggle{width:44px;height:44px;border:0;background:transparent;color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;line-height:1;padding:0;}
.header-contact-icon{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;}
.header-contact-value{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%) scale(.98);max-width:none;opacity:0;pointer-events:none;white-space:nowrap;padding:10px 14px;border-radius:14px;border:1px solid rgba(143,211,255,.25);background:rgba(7,11,20,.94);box-shadow:0 16px 36px rgba(0,0,0,.28);color:var(--text);font-size:14px;font-weight:700;transition:opacity .22s ease, transform .22s ease;}
.header-contact-chip.is-open .header-contact-value{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1);}
.header-contact-value:hover{color:#bfe9ff;}
.hero{position:relative;overflow:hidden;min-height:clamp(460px,70vh,760px)!important;isolation:isolate;border-radius:32px;}
.hero::before{content:"";position:absolute;inset:0;background-image:var(--hero-image);background-repeat:no-repeat!important;background-position:center center!important;background-size:cover!important;transform:none!important;z-index:0;}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg, rgba(6,10,18,.56) 0%, rgba(6,10,18,.36) 22%, rgba(6,10,18,.16) 44%, rgba(6,10,18,.10) 100%), linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.22));}
.hero-content{position:absolute!important;left:34px;bottom:34px;right:auto;z-index:2;max-width:620px;}
.hero-title{font-size:clamp(42px,5vw,72px)!important;line-height:.98;text-wrap:balance;}
.hero-sub{font-size:20px!important;margin-top:10px!important;}
.hero-kicker{font-size:16px!important;margin-top:8px!important;}
@media (max-width:1280px){.nav a{font-size:14px!important;padding:10px 10px!important;}}
@media (max-width:1100px){.brand-title{font-size:28px;}.nav a{font-size:13px!important;padding:10px 9px!important;}.cta .btn{padding:12px 12px;}}
@media (max-width:980px){.header-quick-actions{display:none!important;}.nav{justify-content:flex-start;overflow:auto;}.hero{min-height:420px!important;}}
@media (max-width:820px){.nav{display:none!important;}.hero-content{left:22px;right:22px;bottom:22px;max-width:none;}.hero-title{font-size:clamp(30px,8vw,48px)!important;}}


/* --- v4 footer + contact popovers fixes --- */
.header-quick-actions{position:relative;display:flex;align-items:center;gap:8px;flex:0 0 auto;z-index:25;}
.header-contact-chip{position:relative;z-index:26;}
.header-contact-value{right:auto;left:50%;top:calc(100% + 10px);transform:translateX(-50%) translateY(-6px) scale(.98);min-width:max-content;max-width:none;}
.header-contact-chip.is-open .header-contact-value{transform:translateX(-50%) translateY(0) scale(1);}
.header-contact-value::before{content:"";position:absolute;left:50%;bottom:100%;transform:translateX(-50%);border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:8px solid rgba(143,211,255,.25);}
.header-contact-value::after{content:"";position:absolute;left:50%;bottom:calc(100% - 1px);transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:7px solid rgba(7,11,20,.94);}

.site-footer{margin-top:30px;padding:0 0 22px;border-top:none;background:transparent;}
.footer-shell{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 42px rgba(0,0,0,.18);border-radius:28px;padding:22px 24px 18px;}
.footer-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px, 360px);gap:28px;align-items:start;}
.footer-column{min-width:0;}
.footer-title{font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:rgba(191,233,255,.82);font-weight:800;margin-bottom:14px;}
.footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:10px 24px;align-items:start;justify-content:start;}
.footer-contacts{display:grid;gap:10px;justify-items:start;align-items:start;}
.footer-hours{color:var(--muted);font-size:14px;font-weight:650;line-height:1.5;}
.footer-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);}
.footer-copy{color:var(--muted);font-size:13px;font-weight:700;}
.footer-legal{display:flex;flex-wrap:wrap;gap:10px 18px;}
.f-link{display:inline-flex;align-items:center;color:rgba(242,246,255,.9);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .2s ease,border-color .2s ease,opacity .2s ease;}
.f-link:hover{color:#bfe9ff;border-color:rgba(191,233,255,.45);}
.footer-small{font-size:13px;}

@media (max-width:1180px){
  .footer-top{grid-template-columns:1fr 320px;gap:22px;}
}
@media (max-width:980px){
  .footer-top{grid-template-columns:1fr;}
  .footer-nav{grid-template-columns:repeat(2,minmax(0,max-content));}
}
@media (max-width:640px){
  .footer-shell{padding:20px 16px 16px;border-radius:22px;}
  .footer-nav{grid-template-columns:1fr;gap:10px;}
  .footer-legal{flex-direction:column;align-items:flex-start;gap:8px;}
  .footer-small,.footer-hours,.f-link{font-size:14px;}
}


/* v5 footer + fixed header */
body{padding-top:var(--header-h);}
.header{position:fixed;top:0;left:0;right:0;width:100%;z-index:100;}
main.container{padding-top:20px;}

.site-footer{width:100%;padding:28px 0 0;border-top:none;}
.footer-shell{width:100%;max-width:none;margin:0;border-left:none;border-right:none;border-bottom:none;border-radius:28px 28px 0 0;padding:26px 0 20px;background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));box-shadow:0 -8px 36px rgba(0,0,0,.14);}
.footer-shell-inner{display:grid;gap:20px;}
.footer-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px, 420px);gap:42px;align-items:start;}
.footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:12px 28px;}
.footer-contacts{gap:12px;}
.footer-bottom{align-items:flex-start;gap:10px;margin-top:0;padding-top:18px;}

@media (max-width: 900px){
  .footer-top{grid-template-columns:1fr;gap:24px;}
}

/* --- v7 clean fixed header without top gap --- */
body{padding-top:var(--header-h);}
.header{position:fixed!important;top:0!important;left:0;right:0;width:100%;z-index:140!important;height:var(--header-h);backdrop-filter:blur(14px);background:linear-gradient(180deg, rgba(7,11,20,.92), rgba(7,11,20,.80));border-bottom:1px solid rgba(255,255,255,.12);}
.header-inner{min-height:var(--header-h);}
main.container{padding-top:14px;}
.hero{margin-top:0!important;}
.drawer{top:var(--header-h);height:calc(100% - var(--header-h));}
@media (max-width:820px){body{padding-top:var(--header-h);} main.container{padding-top:12px;}}


/* --- form select + footer alignment fix --- */
.form-grid select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  padding-right:48px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(191,233,255,.92) 50%),
    linear-gradient(135deg, rgba(191,233,255,.92) 50%, transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  background-position:
    calc(100% - 22px) calc(50% - 3px),
    calc(100% - 16px) calc(50% - 3px),
    0 0;
  background-size:6px 6px, 6px 6px, 100% 100%;
  background-repeat:no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .2s ease;
}
.form-grid select:hover,
.form-grid select:focus{
  border-color:rgba(143,211,255,.42);
  box-shadow:0 0 0 3px rgba(143,211,255,.12);
  background-color:rgba(12,18,30,.55);
}
.form-grid select option{
  color:#eaf4ff;
  background:#0d1523;
}
.form-grid select option[value=""]{
  color:#9fb3c8;
}

.footer-bottom{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:18px 28px;
  flex-wrap:nowrap;
}
.footer-copy{
  flex:0 0 auto;
  white-space:nowrap;
}
.footer-legal{
  display:flex;
  align-items:center;
  gap:10px 22px;
  flex-wrap:nowrap;
  min-width:0;
}
.footer-legal .f-link{
  white-space:nowrap;
}

@media (max-width:900px){
  .footer-bottom{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .footer-legal{
    flex-wrap:wrap;
  }
}

@media (max-width:640px){
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .footer-legal{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
}