/*
Theme Name: УШП-Строй
Theme URI: https://ushp-stroy.ru
Author: УШП-Строй.рф
Description: Кастомная тема для сайта УШП-Строй.рф — фундаменты УШП и монолитные плиты под ключ.
Version: 6.8.1
Text Domain: ushp-stroy
*/



  :root{
    --navy:#0D1F35;
    --navy-2:#162C48;
    --navy-deep:#081525;
    --blue-soft:#EBF2F8;
    --gold:#9A7B4E;
    --gold-light:#C9A86C;
    --gold-pale:#F0E6D2;
    --cream:#F9F5EE;
    --cream-2:#F2EDE3;
    --red:#B8321A;
    --red-dark:#942812;
    --grey:#6B6B66;
    --grey-light:#86867D;
    --line:#E2DBD0;
    --white:#FDFAF5;
    --ink:#1A1A17;
    --radius:4px;
    --radius-lg:12px;
    --maxw:1280px;
    --ease:cubic-bezier(.16,1,.3,1);
    --ease-out:cubic-bezier(.25,.46,.45,.94);
    --ease-spring:cubic-bezier(.34,1.56,.64,1);
  }

  *, *::before, *::after{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
  :root{
    color-scheme: only light;
  }
  html{background:#FDFAF5;}
  body{
    background:var(--white); color:var(--ink);
    forced-color-adjust:none;
    font-family:'Manrope', sans-serif; font-size:16px; line-height:1.7; font-weight:400;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    opacity:1; transition:opacity .25s var(--ease-out);
  }
  body.loaded{opacity:1;}
  /* Subtle paper grain overlay */
  body::after{
    content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
    opacity:.03; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  h1,h2,h3{font-family:'Cormorant Garamond', serif; color:var(--navy); font-weight:600; letter-spacing:-0.01em; line-height:1.12;}
  h4{font-family:'Manrope', sans-serif; color:var(--navy); font-weight:700; letter-spacing:-0.005em;}
  p{margin:0;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  button{font-family:inherit; cursor:pointer; background:none; border:none;}
  :focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px;}
  @media(max-width:640px){.wrap{padding:0 36px;}}
  @media(max-width:760px){.hero-content{padding:0 8px;}}

  /* ---- DIVIDER ---- */
  .divider{display:flex; align-items:center; gap:16px; color:var(--gold); font-size:11px; letter-spacing:.18em; text-transform:uppercase;}
  .divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--line);}

  /* ---- BUTTONS ---- */
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Manrope', sans-serif; font-weight:700; font-size:13px;
    letter-spacing:.06em; text-transform:uppercase;
    padding:16px 34px; border:1px solid transparent; border-radius:2px;
    transition:background .3s var(--ease-out), color .3s var(--ease-out),
                box-shadow .4s var(--ease), transform .3s var(--ease);
    white-space:nowrap;
  }
  .btn:active{transform:scale(.98);}
  .btn-red{
    background:var(--red); color:var(--white);
    box-shadow:0 8px 24px -10px rgba(184,50,26,.45);
  }
  .btn-red:hover{background:var(--red-dark); box-shadow:0 14px 32px -10px rgba(184,50,26,.5); transform:translateY(-1px);}
  .btn-outline{border-color:var(--navy); color:var(--navy); background:transparent;}
  .btn-outline:hover{background:var(--navy); color:var(--white); transform:translateY(-1px);}
  .btn-ghost-white{border-color:rgba(255,255,255,.5); color:var(--white); background:transparent;}
  .btn-ghost-white:hover{background:var(--white); color:var(--navy); transform:translateY(-1px);}
  .btn-gold{border-color:var(--gold-light); color:var(--gold); background:transparent;}
  .btn-gold:hover{background:var(--gold-pale); color:var(--navy); transform:translateY(-1px);}
  .btn-header{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Manrope', sans-serif; font-weight:600; font-size:12.5px;
    letter-spacing:.04em; text-transform:uppercase;
    padding:10px 20px; border:1px solid var(--line); border-radius:2px;
    color:var(--navy); background:var(--white); white-space:nowrap;
    transition:background .3s var(--ease-out), border-color .3s var(--ease-out), color .3s var(--ease-out);
  }
  .btn-header svg{color:var(--red);}
  .btn-header:hover{background:var(--navy); border-color:var(--navy); color:var(--white);}
  .btn-header:hover svg{color:var(--gold-light);}

  /* ---- HEADER ---- */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(253,250,245,.88);
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    border-bottom:1px solid transparent;
    transition:border-color .4s var(--ease-out), box-shadow .4s var(--ease-out), background .4s var(--ease-out);
  }
  header.scrolled{
    background:rgba(253,250,245,.97);
    border-color:var(--line);
    box-shadow:0 4px 30px -8px rgba(13,31,53,.1);
  }
  .header-row{display:flex; align-items:center; justify-content:space-between; padding:16px 40px; gap:32px;}
  @media(max-width:640px){.header-row{padding:14px 36px;}}
  .logo{display:flex; align-items:center; gap:10px;}
  .logo-mark{width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center;}
  .logo-mark img{width:100%; height:100%; object-fit:contain;}
  .logo-text{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:20px; color:var(--navy); line-height:1; letter-spacing:.01em;}
  .logo-text span{display:block; font-family:'JetBrains Mono', monospace; font-weight:400; font-size:9px; color:var(--grey-light); letter-spacing:.14em; margin-top:3px; text-transform:uppercase;}
  .foot-logo{margin-bottom:20px;}
  .foot-logo img{height:52px; width:auto;}
  nav.main-nav{display:flex; gap:18px;}
  nav.main-nav a{
    position:relative; color:var(--grey); font-size:13px; font-weight:600;
    letter-spacing:.03em; text-transform:uppercase; padding:6px 0;
    white-space:nowrap; flex-shrink:0;
    transition:color .3s var(--ease-out);
  }
  @media(max-width:1300px){ nav.main-nav{gap:13px;} nav.main-nav a{font-size:12px;} }
  nav.main-nav a::after{
    content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
    background:var(--gold); transition:right .4s var(--ease);
  }
  nav.main-nav a:hover{color:var(--navy);}
  nav.main-nav a:hover::after{right:0;}
  .header-right{display:flex; align-items:center; gap:20px;}
  .header-search{position:relative; display:flex; align-items:center;}
  .header-search-toggle{background:none; border:none; padding:6px; cursor:pointer; color:var(--navy); display:flex;}
  .header-search-form{position:absolute; right:0; top:calc(100% + 10px); width:260px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s, transform .2s, visibility .2s; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:8px;}
  .header-search.is-open .header-search-form{opacity:1; visibility:visible; transform:translateY(0);}
  .header-search-form input{width:100%; padding:9px 12px; border:1px solid var(--line); font-size:13.5px;}
  @media(max-width:1024px){.header-search-form{right:-10px; width:240px;}}
  .phone-block{text-align:right;}
  .phone-block .num{font-family:'Cormorant Garamond', serif; color:var(--navy); font-weight:600; font-size:18px; letter-spacing:.01em;}
  .phone-block .hrs{color:var(--grey-light); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;}
  @media(max-width:1024px){nav.main-nav{display:none;} .phone-block{display:none;}}

  /* ---- HEADER DROPDOWN (Услуги / Компания) ---- */
  .nav-drop{position:relative; padding-bottom:14px; margin-bottom:-14px;}
  .nav-drop-toggle{display:inline-flex; align-items:center; gap:5px;}
  .nav-drop-caret{flex:none; transition:transform .25s var(--ease-out); position:relative; top:1px;}
  .nav-drop:hover .nav-drop-caret{transform:rotate(180deg);}
  .nav-drop-menu{
    position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(4px);
    min-width:220px; background:var(--white); border:1px solid var(--line);
    box-shadow:0 20px 40px -16px rgba(13,31,53,.18);
    padding:8px; margin-top:0;
    opacity:0; pointer-events:none; transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);
    display:flex; flex-direction:column; gap:0;
  }
  .nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu{
    opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);
  }
  .nav-drop-menu a{
    white-space:nowrap; padding:11px 14px; text-transform:none; letter-spacing:.01em;
    font-size:13.5px; font-weight:600; color:var(--grey);
  }
  .nav-drop-menu a::after{display:none;}
  .nav-drop-menu a:hover{background:var(--cream); color:var(--navy);}

  /* ---- MOBILE MENU ---- */
  .burger{
    display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:40px; height:40px; flex:none; border:1px solid var(--line); border-radius:2px;
    background:var(--white); cursor:pointer; position:relative; z-index:301;
    transition:border-color .3s var(--ease-out);
  }
  .burger span{
    display:block; width:18px; height:2px; background:var(--navy); border-radius:1px;
    transition:transform .35s var(--ease-spring), opacity .25s var(--ease-out);
  }
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .burger.open span:nth-child(2){opacity:0;}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  @media(max-width:1024px){.burger{display:flex;}}
  .mobile-nav-overlay{
    position:fixed; inset:0; background:rgba(8,20,38,.45); z-index:298;
    opacity:0; pointer-events:none; transition:opacity .35s var(--ease-out);
  }
  .mobile-nav-overlay.open{opacity:1; pointer-events:auto;}
  .mobile-nav{
    position:fixed; top:0; right:0; height:100%; width:min(340px,84vw); z-index:299;
    background:var(--white); box-shadow:-14px 0 50px -12px rgba(13,31,53,.3);
    transform:translateX(100%); transition:transform .4s var(--ease);
    padding:96px 32px 32px; overflow-y:auto;
    display:flex; flex-direction:column;
  }
  .mobile-nav.open{transform:translateX(0);}
  .mobile-nav a{
    padding:15px 0; border-bottom:1px solid var(--line); color:var(--navy);
    font-family:'Manrope', sans-serif; font-weight:700; font-size:14px;
    text-transform:uppercase; letter-spacing:.04em;
  }
  .mobile-nav a:hover{color:var(--gold);}
  .mobile-nav a.mn-sub{
    padding-left:16px; font-size:12.5px; font-weight:600; color:var(--grey);
    text-transform:none; letter-spacing:.01em; border-bottom-style:dashed;
  }
  .mobile-nav a.mn-sub:hover{color:var(--gold);}
  .mobile-nav .mn-phone{
    margin-top:28px; font-family:'Cormorant Garamond', serif; font-size:22px;
    font-weight:600; color:var(--navy);
  }
  .mobile-nav .mn-hrs{color:var(--grey-light); font-size:11px; letter-spacing:.04em; text-transform:uppercase; margin-top:4px;}
  .mobile-nav .btn{margin-top:20px; justify-content:center;}
  body.mnav-open{overflow:hidden;}
  @media(max-width:480px){
    .header-row{padding:12px 16px; gap:10px;}
    .logo{gap:7px; min-width:0;}
    .logo-mark{width:32px; height:32px;}
    .logo-text{font-size:14px; white-space:nowrap;}
    .logo-text span{font-size:7px; letter-spacing:.05em; margin-top:2px; white-space:normal; line-height:1.3;}
    .btn-header{padding:8px 12px; font-size:10px; gap:5px;}
    .btn-header svg{width:12px; height:12px;}
  }

  /* ---- HERO ---- */
  .hero{position:relative; overflow:hidden; min-height:680px; display:flex; align-items:center;}
  .hero-bg{position:absolute; inset:0; z-index:0; background:var(--navy); overflow:hidden;}
  .hero-bg img, .hero-bg svg{width:100%; height:100%; display:block; object-fit:cover; object-position:center bottom;}
  .hero-overlay{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(110deg, rgba(6,16,32,.96) 0%, rgba(6,16,32,.9) 26%, rgba(6,16,32,.68) 48%, rgba(6,16,32,.22) 68%, rgba(6,16,32,.05) 82%),
               linear-gradient(180deg, rgba(6,16,32,.15) 0%, transparent 25%, transparent 72%, rgba(6,16,32,.35) 100%);
  }
  .hero-inner{position:relative; z-index:2; width:100%; padding:90px 0 64px;}
  .hero-content{max-width:640px;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:12px;
    font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
    color:var(--gold-light); margin-bottom:28px;
  }
  .eyebrow-logo{width:96px; height:96px; object-fit:contain; flex:none;}
  .hero h1{
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(44px,5.8vw,72px); line-height:1.04; font-weight:500;
    color:var(--white); letter-spacing:-0.015em;
    text-shadow:0 2px 18px rgba(0,0,0,.35);
  }
  .hero h1 .accent{color:var(--gold-light); font-style:italic;}
  .hero-rule{width:48px; height:1px; background:var(--gold); margin:28px 0;}
  .hero p.lede{max-width:440px; color:rgba(253,250,245,.92); font-size:16.5px; line-height:1.65; font-weight:400; text-shadow:0 1px 12px rgba(0,0,0,.3);}
  .hero-stats{display:flex; gap:0; margin:36px 0 32px;}
  .hero-stat{flex:1; padding:20px 24px; border-right:1px solid rgba(255,255,255,.2); position:relative;}
  .hero-stat:first-child{padding-left:0;}
  .hero-stat:last-child{border-right:none;}
  .hero-stat .num{font-family:'Cormorant Garamond', serif; font-size:38px; font-weight:500; color:var(--white); line-height:1; letter-spacing:-0.02em;}
  .hero-stat .lbl{font-size:10.5px; color:rgba(253,250,245,.8); text-transform:uppercase; letter-spacing:.1em; margin-top:5px; font-weight:600;}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px;}
  .contact-row{display:flex; gap:10px; flex-wrap:wrap;}
  .pill{
    display:inline-flex; align-items:center; gap:7px;
    font-size:12.5px; font-weight:600; letter-spacing:.03em;
    padding:10px 18px; border:1px solid rgba(226,219,208,.5);
    background:rgba(253,250,245,.08); color:var(--white); border-radius:2px;
    backdrop-filter:blur(4px);
    transition:background .3s var(--ease-out), border-color .3s var(--ease-out);
  }
  .pill svg{width:14px; height:14px;}
  .pill.max{--pc:#5B9BD5;}
  .pill.tg{--pc:#6BB8E8;}
  .pill.call{--pc:var(--gold-light);}
  .pill svg{color:var(--pc, var(--gold-light));}
  .pill:hover{background:rgba(253,250,245,.14); border-color:rgba(226,219,208,.8);}

  @media(max-width:760px){
    .hero{display:block; min-height:auto;}
    .hero-bg{position:relative; height:50vw; min-height:220px; max-height:340px; overflow:hidden;}
    .hero-bg::after{content:""; position:absolute; bottom:0; left:0; right:0; height:100px; background:linear-gradient(transparent, var(--navy)); pointer-events:none;}
    .hero-overlay{display:none;}
    .hero-inner{background:var(--navy); padding:32px 0 44px;}
    .hero-stat{padding:14px 16px;}
    .hero-stat .num{font-size:28px;}
  }

  /* ---- MOBILE STICKY CTA BAR ---- */
  .mobile-sticky-bar{display:none;}
  @media(max-width:760px){
    .mobile-sticky-bar{
      display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90;
      background:var(--navy); border-top:1px solid rgba(255,255,255,.1);
      box-shadow:0 -8px 24px -8px rgba(8,20,38,.35);
      padding:8px 4px calc(8px + env(safe-area-inset-bottom));
    }
    .msb-item{
      flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
      padding:6px 2px; color:rgba(253,250,245,.75); font-size:10px; font-weight:600;
      text-align:center; letter-spacing:.01em; background:none; border:none; font-family:inherit;
      text-decoration:none; line-height:1.2;
    }
    .msb-item svg{flex:none;}
    .msb-item span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    .msb-call{color:var(--white);}
    .msb-call svg{color:var(--gold-light);}
    .msb-tg svg{color:#6BB8E8;}
    body{padding-bottom:64px;}
  }

  /* ---- TRUST STRIP ---- */
  .trust{
    background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:0;
  }
  .trust-grid{display:grid; grid-template-columns:repeat(6,1fr);}
  .trust-item{
    display:flex; flex-direction:column; gap:8px; padding:32px 28px;
    border-right:1px solid var(--line); transition:background .3s var(--ease-out);
  }
  .trust-item:last-child{border-right:none;}
  .trust-item:hover{background:var(--cream-2);}
  .trust-item .ico{
    width:36px; height:36px; flex:none;
    display:flex; align-items:center; justify-content:center;
    color:var(--gold); margin-bottom:4px;
  }
  .trust-item .ico svg{width:22px; height:22px; stroke-width:1.4;}
  .trust-item .ico img{width:26px; height:26px; object-fit:contain;}
  .trust-item h4{font-size:13px; font-weight:700; color:var(--navy); letter-spacing:-0.005em;}
  .trust-item p{font-size:12px; color:var(--grey-light); line-height:1.5;}
  @media(max-width:980px){.trust-grid{grid-template-columns:repeat(3,1fr);}
    .trust-item{border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
  }
  @media(max-width:680px){.trust-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:420px){.trust-grid{grid-template-columns:1fr;}}

  /* ---- SECTIONS ---- */
  .section{padding:128px 0; background:var(--white);}
  .section.alt{background:var(--cream);}
  @media(max-width:760px){.section{padding:80px 0;}}
  .section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:60px; gap:24px; flex-wrap:wrap;}
  .section-head .tag{
    display:flex; align-items:center; gap:12px;
    font-size:10.5px; font-weight:700; color:var(--gold); text-transform:uppercase;
    letter-spacing:.2em; margin-bottom:16px;
  }
  .section-head .tag::after{content:""; flex:1; width:24px; height:1px; background:var(--gold-light);}
  .section-head h2{font-size:clamp(30px,3.8vw,48px); font-weight:600; color:var(--navy);}
  .more-link{
    font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    color:var(--grey); border-bottom:1px solid var(--line); padding-bottom:4px;
    transition:color .3s var(--ease-out), border-color .3s var(--ease-out);
  }
  .more-link:hover{color:var(--gold); border-color:var(--gold);}

  /* ---- SERVICES ---- */
  .core-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); max-width:100%; border:1px solid var(--line); margin:0 auto;}
  .core-card{background:var(--white); overflow:hidden; transition:background .35s var(--ease-out);}
  .core-card:hover{background:var(--cream);}
  .core-photo{height:220px; position:relative; overflow:hidden; background:var(--cream); padding:14px;}
  .core-photo svg{width:100%; height:100%; display:block; transition:transform .7s var(--ease);}
  .core-photo img{width:100%; height:100%; display:block; object-fit:contain; transition:transform .7s var(--ease);}
  .core-card:hover .core-photo svg, .core-card:hover .core-photo img{transform:scale(1.04);}
  .core-icon{
    position:absolute; left:16px; bottom:-18px; width:44px; height:44px;
    background:var(--white); display:flex; align-items:center; justify-content:center;
    color:var(--gold); border:1px solid var(--line);
    transition:transform .35s var(--ease), background .3s var(--ease-out);
  }
  .core-card:hover .core-icon{transform:translateY(-2px); background:var(--gold-pale);}
  .core-icon svg{width:20px; height:20px; stroke-width:1.5;}
  .core-body{padding:36px 24px 28px;}
  #services .core-body{padding-top:26px;}
  .core-card h3{font-family:'Cormorant Garamond', serif; font-size:22px; font-weight:500; margin-bottom:10px; letter-spacing:-0.01em; color:var(--navy);}
  .core-card p{font-size:13.5px; color:var(--grey); margin:0 0 18px; line-height:1.6;}
  .core-link{
    display:inline-flex; align-items:center; gap:8px;
    font-size:11px; font-weight:700; color:var(--gold); letter-spacing:.1em; text-transform:uppercase;
    transition:gap .3s var(--ease);
  }
  .core-link::after{content:"→";}
  .core-card:hover .core-link{gap:12px; color:var(--navy);}
  /* Cards that lead to another page: keep the visible "Подробнее" link,
     but stretch that same real link over the whole card. */
  .core-card.is-clickable-card{position:relative; cursor:pointer;}
  .core-card.is-clickable-card .core-link::before{
    content:""; position:absolute; inset:0; z-index:2;
  }
  .core-card.is-clickable-card:focus-within{outline:2px solid var(--gold); outline-offset:2px;}
  @media(max-width:900px){.core-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.core-grid{grid-template-columns:1fr;}}
  /* Блок «Четыре шага» на странице «Проектирование»: всегда 2×2 (было
     3 колонки — четвёртая карточка оставалась одна в ряду с пустым
     серым полем рядом), фото без внутренних отступов на весь блок
     карточки без обрезки/сжатия по бокам, значки-бейджи скрыты. */
  /* Ширина всей сетки — как у секции «Наши услуги» на главной (та же
     .wrap, без дополнительных ограничений). Сами карточки при этом
     остаются фиксированного небольшого размера (190px) — лишнее место
     распределяется как отступы МЕЖДУ карточками (justify-content),
     а не увеличивает сами фото. */
  /* Карточка (а с ней и текст) шире — 270px, но само фото зафиксировано
     как было (190×190) и просто центрируется сверху более широкой
     карточки. Ширина всей сетки по-прежнему подстраивается под .wrap,
     как у секции «Наши услуги» — карточки чуть теснее из-за возросшей
     ширины, но левый/правый край блока остаётся тем же. */
  #design-steps .core-grid{grid-template-columns:repeat(4,270px); justify-content:space-between; max-width:none; background:transparent; border:none; gap:28px 0;}
  @media(max-width:900px){#design-steps .core-grid{grid-template-columns:repeat(2,270px);}}
  @media(max-width:460px){#design-steps .core-grid{grid-template-columns:270px; justify-content:center;}}
  #design-steps .core-photo{
    position:relative; width:190px; height:190px; margin:0 auto; padding:0; overflow:hidden; background:#fff;
  }
  #design-steps .core-photo img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  }
  #design-steps .core-icon{display:none;}

  /* Тот же приём 4-в-ряд — для блока «Конструкция» (id="layers"),
     общего для страниц «УШП-фундамент» и «Монолитная плита» (у обеих
     секция называется одинаково, поэтому одно правило покрывает обе).
     Здесь карточки — с SVG-иллюстрациями, а не фото, поэтому иконку в
     углу (.core-icon) оставляем видимой — так и было задумано для
     остальных core-card блоков на сайте. */
  #layers .core-grid{grid-template-columns:repeat(4,270px); justify-content:space-between; max-width:none; background:transparent; border:none; gap:28px 0;}
  @media(max-width:900px){#layers .core-grid{grid-template-columns:repeat(2,270px);}}
  @media(max-width:460px){#layers .core-grid{grid-template-columns:270px; justify-content:center;}}
  #layers .core-photo{
    position:relative; width:190px; height:190px; margin:0 auto; padding:0; overflow:hidden; background:#fff;
  }
  #layers .core-photo svg{width:100%; height:100%; display:block;}

  /* Блок «Бесплатный выезд инженера» на главной */
  .free-visit-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
  @media(max-width:760px){.free-visit-grid{grid-template-columns:1fr; gap:28px;}}

  /* Вкладки «Фундамент / Построенный дом» в карточке объекта портфолио */
  .obj-modal-tabs{display:flex; gap:8px; margin-bottom:16px;}
  .obj-tab{
    padding:8px 16px; font-size:11.5px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; cursor:pointer; border:1px solid var(--line);
    background:var(--white); color:var(--grey);
    transition:color .25s var(--ease-out), border-color .25s var(--ease-out), background .25s var(--ease-out);
  }
  .obj-tab:hover{border-color:var(--gold-light); color:var(--navy);}
  .obj-tab.is-active{background:var(--navy); border-color:var(--navy); color:var(--white);}

  /* Бейдж-кнопка «Дом построен» на карточках портфолио */
  .pf-house-badge{
    position:absolute; right:10px; bottom:10px; z-index:2;
    padding:6px 12px; font-size:10.5px; font-weight:700; letter-spacing:.05em;
    text-transform:uppercase; cursor:pointer; border:none;
    background:var(--gold); color:var(--white);
    transition:background .25s var(--ease-out);
  }
  .pf-house-badge:hover{background:var(--navy);}
  /* Листалка примера проекта (страница «Проектирование») */
  .pdf-viewer{margin-top:20px; max-width:760px;}
  .pdf-viewer-frame{position:relative; background:var(--cream); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; min-height:320px; overflow:auto; padding:16px;}
  .pdf-viewer-frame canvas{max-width:100%; height:auto; box-shadow:0 4px 18px rgba(13,31,53,.14); background:#fff;}
  .pdf-viewer-status{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--grey); font-size:13.5px; background:var(--cream);}
  .pdf-viewer-status[hidden]{display:none;}
  .pdf-viewer-controls{display:flex; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap;}
  .pdf-nav{width:36px; height:36px; flex:none; background:var(--white); border:1px solid var(--line); color:var(--navy); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .25s var(--ease-out), border-color .25s var(--ease-out);}
  .pdf-nav:hover{background:var(--gold-pale); border-color:var(--gold-light);}
  .pdf-nav:disabled{opacity:.35; cursor:default; background:var(--white); border-color:var(--line);}
  .pdf-viewer-page{font-size:13.5px; color:var(--grey); min-width:120px; text-align:center;}
  .pdf-download{margin-left:auto; font-size:13.5px; color:var(--gold); text-decoration:none; border-bottom:1px solid var(--gold-light); padding-bottom:1px;}
  .pdf-download:hover{color:var(--navy); border-color:var(--navy);}
  @media(max-width:560px){.pdf-viewer-frame{min-height:220px; padding:10px;} .pdf-download{margin-left:0; width:100%; text-align:center;}}
  /* Страница «Контакты»: карточек четыре, поэтому сетка 2x2 — в трёхколоночной
     четвёртая карточка оставалась одна в ряду и рядом с ней светилось пустое
     серое поле (фон сетки в незанятых ячейках). */
  .contacts-grid{grid-template-columns:repeat(2,1fr);}
  @media(max-width:560px){.contacts-grid{grid-template-columns:1fr;}}

  /* ---- CALCULATOR ---- */
  .calc-wrap{display:grid; grid-template-columns:400px 1fr; gap:32px; align-items:stretch;}
  @media(max-width:980px){.calc-wrap{grid-template-columns:1fr; align-items:start;}}
  .calc-panel{
    background:var(--navy); color:var(--white); padding:40px;
    border:1px solid rgba(255,255,255,.06);
    position:relative; overflow:hidden;
    display:flex; flex-direction:column;
  }
  .calc-panel .price-out{margin-top:auto;}
  .calc-panel::before{
    content:""; position:absolute; top:-80px; right:-80px; width:240px; height:240px;
    border-radius:50%; background:radial-gradient(circle, rgba(154,123,78,.18) 0%, transparent 70%);
    pointer-events:none;
  }
  .calc-panel h3{
    font-family:'Cormorant Garamond', serif; color:var(--white);
    font-size:26px; font-weight:500; margin-bottom:6px; letter-spacing:-0.01em;
  }
  .calc-panel .sub{font-size:12px; color:rgba(253,250,245,.45); margin-bottom:28px; display:block; letter-spacing:.04em; text-transform:uppercase;}
  .field{margin-bottom:18px;}
  .field label{display:block; font-size:10.5px; color:rgba(253,250,245,.5); margin-bottom:8px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;}
  .field select, .field input[type="number"]{
    width:100%; padding:13px 16px; background:rgba(255,255,255,.06);
    color:var(--white); border:1px solid rgba(255,255,255,.1);
    font-family:inherit; font-size:14px; border-radius:0;
    transition:border-color .3s var(--ease-out), background .3s var(--ease-out);
    -webkit-appearance:none; appearance:none;
  }
  .field select:focus, .field input[type="number"]:focus{
    border-color:var(--gold-light); background:rgba(255,255,255,.1); outline:none;
  }
  /* The dropdown *popup* a browser draws for <option> is rendered by the OS,
     not styled by our dark theme — it ignores background/appearance rules
     above and defaults to a light popup. Without this, options inherit
     color:var(--white) from the <select> and become invisible (white text
     on the browser's white popup background). */
  .field select option{color:var(--navy); background:var(--white);}
  .field input[type="number"]::placeholder{color:rgba(253,250,245,.3);}
  .checks{display:flex; gap:20px; margin:20px 0 28px; flex-wrap:wrap;}
  .checks label{display:flex; align-items:center; gap:8px; font-size:12.5px; color:rgba(253,250,245,.65); cursor:pointer;}
  .checks input[type="checkbox"]{
    width:16px; height:16px; accent-color:var(--gold-light);
    border:1px solid rgba(255,255,255,.2); cursor:pointer;
  }
  .price-out{border-top:1px solid rgba(255,255,255,.1); padding-top:22px;}
  .price-out .plbl{font-size:10px; color:rgba(253,250,245,.45); font-weight:700; letter-spacing:.14em; text-transform:uppercase;}
  .price-out .pval{
    font-family:'Cormorant Garamond', serif; font-size:44px; font-weight:500;
    color:var(--gold-light); margin:6px 0 24px; letter-spacing:-0.02em;
    transition:opacity .2s var(--ease-out);
  }

  /* ---- COMPANY DOCUMENTS ---- */
  .docs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
  .doc-card{
    display:flex; align-items:center; gap:16px; padding:18px; background:var(--white);
    border:1px solid var(--line); text-decoration:none; transition:border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
  }
  .doc-card:hover{border-color:var(--gold); box-shadow:0 14px 30px -18px rgba(20,30,50,.18);}
  .doc-thumb{
    width:56px; height:56px; flex:none; overflow:hidden; background:var(--cream);
    display:flex; align-items:center; justify-content:center; color:var(--gold);
  }
  .doc-thumb img{width:100%; height:100%; object-fit:cover;}
  .doc-body{flex:1; min-width:0;}
  .doc-type{font-size:10px; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:.08em;}
  .doc-card h4{font-size:14px; font-weight:700; color:var(--navy); margin:4px 0 2px; line-height:1.3;}
  .doc-note{font-size:11.5px; color:var(--grey-light);}
  .doc-open{
    flex:none; font-size:10.5px; font-weight:700; color:var(--grey-light); text-transform:uppercase;
    letter-spacing:.06em; align-self:center;
  }
  .doc-card:hover .doc-open{color:var(--navy);}
  @media(max-width:900px){.docs-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.docs-grid{grid-template-columns:1fr;}}

  /* ---- BLOG ---- */
  .blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  .blog-card{background:var(--white); display:flex; flex-direction:column; text-decoration:none; transition:background .3s var(--ease-out); cursor:pointer;}
  .blog-card:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
  .blog-card:hover{background:var(--cream);}
  .blog-thumb{position:relative; overflow:hidden; background:var(--cream);}
  .blog-thumb img{display:block; width:100%; height:auto; transition:transform .7s var(--ease);}
  .blog-card:hover .blog-thumb img{transform:scale(1.05);}
  .blog-body{padding:26px; display:flex; flex-direction:column; flex:1;}
  .blog-date{font-size:10.5px; color:var(--grey-light); text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:10px;}
  .blog-card h3{font-family:'Cormorant Garamond', serif; font-size:21px; font-weight:500; color:var(--navy); line-height:1.3; letter-spacing:-0.01em; margin-bottom:10px;}
  .blog-card p{font-size:13.5px; color:var(--grey); line-height:1.6; margin:0 0 18px; flex:1;}
  .blog-more{
    font-size:11px; font-weight:700; color:var(--gold); letter-spacing:.1em; text-transform:uppercase;
    display:inline-flex; align-items:center; gap:8px; transition:gap .3s var(--ease);
  }
  .blog-more::after{content:"→";}
  .blog-card:hover .blog-more{gap:12px; color:var(--navy);}
  @media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.blog-grid{grid-template-columns:1fr;}}
  .blog-pagination{display:flex; gap:8px; justify-content:center; margin-top:44px; flex-wrap:wrap;}
  .blog-pagination .page-numbers{
    min-width:38px; height:38px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--line); color:var(--navy); font-size:13px; font-weight:600; text-decoration:none;
    transition:background .3s var(--ease-out), border-color .3s var(--ease-out);
  }
  .blog-pagination .page-numbers:hover{background:var(--cream); border-color:var(--gold);}
  .blog-pagination .page-numbers.current{background:var(--navy); border-color:var(--navy); color:var(--white);}
  .entry-content .blog-single-meta{font-size:11.5px; color:var(--grey-light); text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:14px;}
  .entry-content h3{font-family:'Cormorant Garamond', serif; font-size:24px; font-weight:500; color:var(--navy); margin:34px 0 12px; letter-spacing:-0.01em;}
  .entry-content p{margin-bottom:18px;}

  /* ---- PORTFOLIO ---- */
  .pf-filters{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:20px;}
  .pf-filter-btn{padding:9px 18px; border:1px solid var(--line); background:var(--white); color:var(--grey); font-size:13px; cursor:pointer; transition:background .2s, color .2s, border-color .2s;}
  .pf-filter-btn:hover{border-color:var(--navy);}
  .pf-filter-btn.is-active{background:var(--navy); color:var(--white); border-color:var(--navy);}
  .pf-filter-sep{width:1px; height:22px; background:var(--line);}
  .pf-filter-year{padding:9px 14px; border:1px solid var(--line); background:var(--white); color:var(--grey); font-size:13px; cursor:pointer;}
  .portfolio-list{display:flex; flex-direction:column; border:1px solid var(--line); background:var(--white);}
  .portfolio-list .pf-card{border-bottom:1px solid var(--line);}
  .portfolio-list .pf-card:last-child{border-bottom:none;}
  .pf-card{
    display:grid; grid-template-columns:200px 1fr 220px; background:var(--white);
    transition:background .3s var(--ease-out); cursor:pointer;
  }
  .pf-card:hover{background:var(--cream);}
  .pf-card:focus-visible{outline:2px solid var(--gold); outline-offset:-2px;}
  .pf-thumb{position:relative; height:179px; overflow:hidden;}
  .pf-thumb svg{position:absolute; inset:0; width:100%; height:100%; transition:transform .7s var(--ease);}
  .pf-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center bottom; transition:transform .7s var(--ease);}
  .pf-card:hover .pf-thumb svg{transform:scale(1.04);}
  .pf-card:hover .pf-thumb img{transform:scale(1.04);}
  .pf-tag{
    position:absolute; left:10px; top:10px;
    background:rgba(253,250,245,.92); color:var(--navy);
    font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    padding:5px 10px;
  }
  .pf-info{padding:26px; display:flex; flex-direction:column; justify-content:center; gap:6px;}
  .pf-info .loc{font-size:10.5px; color:var(--grey-light); font-weight:700; text-transform:uppercase; letter-spacing:.08em;}
  .pf-info h4{font-family:'Cormorant Garamond', serif; font-size:22px; font-weight:500; color:var(--navy); letter-spacing:-0.01em;}
  .pf-info .meta{font-size:12.5px; color:var(--grey);}
  .pf-price{padding:26px; display:flex; flex-direction:column; justify-content:center; align-items:flex-end; gap:5px; border-left:1px solid var(--line);}
  .pf-price .p{font-family:'Cormorant Garamond', serif; font-size:24px; font-weight:500; color:var(--red);}
  .pf-price .d{font-size:10.5px; color:var(--grey-light); text-transform:uppercase; letter-spacing:.06em;}
  @media(max-width:700px){.pf-card{grid-template-columns:1fr;} .pf-price{border-left:none; border-top:1px solid var(--line); align-items:flex-start; padding:16px 22px;}}

  /* ---- PROCESS ---- */
  .process-row{
    display:grid; grid-template-columns:repeat(9,1fr);
    position:relative; gap:0; border-top:1px solid var(--line);
  }
  .pstep{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    gap:14px; padding:36px 12px 0; position:relative;
    transition:background .3s var(--ease-out);
  }
  .pstep::before{
    content:""; position:absolute; top:-1px; left:50%; transform:translateX(-50%);
    width:1px; height:16px; background:var(--line);
  }
  .pstep:hover{background:var(--cream);}
  .pstep .circ{
    width:96px; height:64px; border-radius:14px;
    border:1px solid var(--line); background:var(--white);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold); z-index:2; overflow:hidden; padding:0;
    box-shadow:0 1px 3px rgba(20,30,50,.04);
    transform:translateZ(0); backface-visibility:hidden;
    transition:border-color .3s var(--ease-out), background .3s var(--ease-out), transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .pstep:hover .circ{border-color:var(--gold); transform:translateZ(0) scale(1.06); box-shadow:0 10px 24px -12px rgba(180,140,60,.4);}
  .pstep .circ svg{width:30px; height:30px;}
  .pstep .circ img{width:100%; height:100%; object-fit:cover; display:block;}
  .pstep .name{font-size:11.5px; font-weight:700; color:var(--grey); line-height:1.4; letter-spacing:.02em;}
  .pstep:hover .name{color:var(--navy);}
  .pstep .step-num{
    position:absolute; top:-1px; left:50%; transform:translateX(-50%);
    width:22px; height:22px; border-radius:50%;
    background:var(--white); border:1px solid var(--line);
    font-size:9px; font-weight:700; color:var(--gold-light);
    display:flex; align-items:center; justify-content:center; letter-spacing:.03em;
  }
  @media(max-width:980px){.process-row{grid-template-columns:repeat(3,1fr);}
    .pstep{border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
  }
  @media(max-width:560px){.process-row{grid-template-columns:repeat(2,1fr);}}

  /* ---- TESTIMONIALS + FAQ ---- */
  .tf-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
  @media(max-width:980px){.tf-grid{grid-template-columns:1fr;}}
  .video-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
  .video-card{position:relative; border-radius:0; overflow:hidden; aspect-ratio:3/4; border:1px solid var(--line);}
  .video-card svg.thumb{position:absolute; inset:0; width:100%; height:100%; transition:transform .7s var(--ease);}
  .video-card:hover svg.thumb{transform:scale(1.04);}
  .play-btn{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
  .play-btn span{
    width:48px; height:48px; border-radius:50%;
    background:rgba(253,250,245,.9);
    display:flex; align-items:center; justify-content:center;
    color:var(--navy); border:1px solid rgba(253,250,245,.3);
    transition:transform .3s var(--ease), background .3s var(--ease-out);
  }
  .video-card:hover .play-btn span{transform:scale(1.08); background:var(--white);}
  .play-btn svg{width:16px; height:16px; margin-left:2px;}
  .video-meta{position:absolute; left:0; right:0; bottom:0; padding:16px; background:linear-gradient(transparent,rgba(8,20,38,.82)); color:var(--white);}
  .video-meta .n{font-size:13px; font-weight:700; letter-spacing:.01em;}
  .video-meta .m{font-size:11px; color:rgba(253,250,245,.6); margin-top:2px; text-transform:uppercase; letter-spacing:.06em;}
  @media(max-width:560px){.video-grid{grid-template-columns:1fr;}}

  .review-badge{display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border:1px solid var(--line); border-radius:2px; text-decoration:none; margin-bottom:28px; transition:border-color .25s var(--ease-out);}
  .review-badge:hover{border-color:var(--gold);}
  .review-badge .stars{color:var(--gold); font-size:14px; letter-spacing:1px;}
  .review-badge .rb-text{font-size:12px; color:var(--navy); font-weight:700;}
  .review-badge .rb-sub{font-size:10.5px; color:var(--grey-light); text-transform:uppercase; letter-spacing:.05em;}
  .reviews-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  @media(max-width:900px){.reviews-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:640px){.reviews-grid{grid-template-columns:1fr;}}
  .review-card{background:var(--white); border:1px solid var(--line); border-radius:2px; padding:22px 24px; display:flex; flex-direction:column;}
  .review-card .rc-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; gap:8px;}
  .review-card .rc-name{font-size:13.5px; font-weight:700; color:var(--navy);}
  .review-card .rc-date{font-size:10.5px; color:var(--grey-light); white-space:nowrap;}
  .review-card .rc-stars{color:var(--gold); font-size:12px; margin-bottom:10px; letter-spacing:1px;}
  .review-card .rc-text{font-size:13px; color:var(--grey); line-height:1.7; flex:1;}
  .review-card .rc-text p{margin:0 0 10px;}
  .review-card .rc-text p:last-child{margin-bottom:0;}
  .review-card .rc-source{margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:11px; text-transform:uppercase; letter-spacing:.05em;}
  .review-card .rc-source a{color:var(--gold); font-weight:700; text-decoration:none;}
  .review-card .rc-source a:hover{text-decoration:underline;}
  .review-card .rc-source span{color:var(--grey-light); font-weight:700;}


  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{
    width:100%; text-align:left; background:none; border:none; padding:22px 0;
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    font-family:'Manrope',sans-serif; font-weight:600; font-size:15px;
    color:var(--navy); letter-spacing:-0.005em;
    transition:color .3s var(--ease-out);
  }
  .faq-q:hover{color:var(--gold);}
  .faq-icon{
    width:26px; height:26px; flex:none; border:1px solid var(--line); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--gold); font-size:16px; line-height:1;
    transition:transform .4s var(--ease), background .3s var(--ease-out);
  }
  .faq-item.open .faq-icon{transform:rotate(45deg); background:var(--gold-pale); border-color:var(--gold-light);}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .5s var(--ease-out);}
  .faq-a p{padding-bottom:22px; font-size:14.5px; color:var(--grey); line-height:1.7; max-width:500px;}

  /* ---- MAP ---- */
  #yandex-map{width:100%; height:540px;}
  @media(max-width:760px){#yandex-map{height:380px;}}
  .yandex-map-fallback{padding:80px 30px; text-align:center; font-size:14px; color:var(--grey); line-height:1.6;}
  .yandex-map-fallback a{color:var(--red); font-weight:700;}
  .map-frame{border:1px solid var(--line); overflow:hidden;}
  .map-legend{display:flex; gap:24px; margin-top:20px; flex-wrap:wrap;}
  .map-legend-item{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--grey); font-weight:600; letter-spacing:.03em; text-transform:uppercase;}
  .map-legend-dot{width:9px; height:9px; border-radius:50%; flex:none;}
  .map-legend-dot.ushp{background:var(--red);}
  .map-legend-dot.slab{background:var(--navy);}

  /* ---- PAYMENT (2 STAGES) ---- */
  .payment-band{
    background:var(--navy); color:var(--white); position:relative; overflow:hidden; padding:88px 0;
  }
  .payment-band::before{
    content:""; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, var(--gold-light), transparent);
  }
  .payment-band::after{
    content:""; position:absolute; top:-120px; right:-120px; width:360px; height:360px;
    border-radius:50%; background:radial-gradient(circle, rgba(154,123,78,.16) 0%, transparent 70%);
    pointer-events:none;
  }
  .payment-band .section-head h2, .payment-band .label-line{color:var(--white);}
  .payment-band .label-line{color:var(--gold-light);}
  .payment-band .section-head h2{font-family:'Cormorant Garamond', serif; color:var(--white);}
  .payment-lede{max-width:600px; color:rgba(253,250,245,.72); font-size:15.5px; line-height:1.7; margin:-22px 0 48px;}
  .payment-row{display:flex; align-items:stretch; gap:0; position:relative;}
  .payment-card{
    flex:1; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
    padding:36px 34px; position:relative; transition:background .3s var(--ease-out), border-color .3s var(--ease-out);
  }
  .payment-card:hover{background:rgba(255,255,255,.07); border-color:rgba(226,180,105,.35);}
  .payment-num{
    position:absolute; top:28px; right:32px;
    font-family:'Cormorant Garamond', serif; font-size:44px; font-weight:500;
    color:rgba(253,250,245,.14); line-height:1;
  }
  .payment-icon{
    display:inline-flex; align-items:center; justify-content:center;
    width:52px; height:52px; border-radius:50%; color:var(--gold-light);
    background:rgba(226,180,105,.12); margin-bottom:22px;
  }
  .payment-card h3{
    font-family:'Cormorant Garamond', serif; font-size:24px; font-weight:500;
    color:var(--white); letter-spacing:-0.01em; margin-bottom:10px;
  }
  .payment-trigger{
    display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:var(--gold-light); background:rgba(226,180,105,.1); border:1px solid rgba(226,180,105,.3);
    padding:6px 12px; border-radius:2px; margin-bottom:16px;
  }
  .payment-card p{font-size:13.5px; color:rgba(253,250,245,.68); line-height:1.7; margin:0;}
  .payment-arrow{
    flex:none; width:64px; display:flex; align-items:center; justify-content:center;
    color:var(--gold-light); opacity:.8;
  }
  @media(max-width:760px){
    .payment-band{padding:64px 0;}
    .payment-row{flex-direction:column; gap:0;}
    .payment-arrow{width:auto; height:44px; transform:rotate(90deg);}
    .payment-num{top:24px; right:24px; font-size:36px;}
  }

  /* ---- CTA BAND ---- */
  .cta-band{
    background:var(--navy); color:var(--white); padding:0;
    position:relative; overflow:hidden;
  }
  .cta-band::before{
    content:""; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, var(--gold-light), transparent);
  }
  .cta-inner{
    display:grid; grid-template-columns:1fr 420px;
    align-items:center; gap:56px; padding:72px 40px;
  }
  @media(max-width:980px){.cta-inner{grid-template-columns:1fr; gap:36px; padding:56px 20px;}}
  .cta-inner h3{
    font-family:'Cormorant Garamond', serif; color:var(--white);
    font-size:clamp(26px,3.5vw,40px); font-weight:500; letter-spacing:-0.015em; margin-bottom:12px;
  }
  .cta-inner h3 em{font-style:italic; color:var(--gold-light);}
  .cta-inner p{color:rgba(253,250,245,.55); max-width:460px; font-size:14.5px;}
  .cta-btns{display:flex; gap:14px; flex-wrap:wrap; flex-shrink:0;}

  /* ---- LEAD FORM (contacts CTA) ---- */
  .lead-form{width:100%;}
  .lead-form .lf-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  @media(max-width:520px){.lead-form .lf-row{grid-template-columns:1fr;}}
  .lead-form .field{margin-bottom:16px;}
  .lead-form .field label{display:block; font-size:10.5px; color:rgba(253,250,245,.5); margin-bottom:8px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;}
  .lead-form input[type="text"], .lead-form input[type="tel"], .lead-form textarea{
    width:100%; padding:13px 16px; background:rgba(255,255,255,.06);
    color:var(--white); border:1px solid rgba(255,255,255,.14);
    font-family:inherit; font-size:14px; border-radius:0; resize:vertical;
    transition:border-color .3s var(--ease-out), background .3s var(--ease-out);
  }
  .lead-form input[type="text"]::placeholder, .lead-form input[type="tel"]::placeholder, .lead-form textarea::placeholder{color:rgba(253,250,245,.32);}
  .lead-form input:focus, .lead-form textarea:focus{
    border-color:var(--gold-light); background:rgba(255,255,255,.1); outline:none;
  }
  .lead-form input.lf-invalid, .lead-form textarea.lf-invalid{border-color:var(--red);}
  .lf-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;}
  .lf-file{
    display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
    cursor:pointer; transition:border-color .3s var(--ease-out), background .3s var(--ease-out);
  }
  .lf-file:hover, .lf-file:focus-within{border-color:var(--gold-light); background:rgba(255,255,255,.1);}
  .lf-file-btn{
    flex:none; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    color:var(--navy); background:var(--gold-light); padding:8px 14px;
  }
  .lf-file-name{font-size:12.5px; color:rgba(253,250,245,.5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .lf-file-name.has-file{color:var(--white);}
  .lead-form .lf-submit{width:100%; justify-content:center; border:none;}
  .lead-form .lf-submit:disabled{opacity:.6; cursor:not-allowed; transform:none;}
  .lf-msg{margin-top:14px; font-size:13px; font-weight:600; min-height:18px;}
  .lf-msg.ok{color:#7FBF8C;}
  .lf-msg.err{color:#E48A7A;}
  .lf-note{margin-top:14px; font-size:11px; color:rgba(253,250,245,.4); line-height:1.5;}
  .lf-consent{
    display:flex; align-items:flex-start; gap:10px; margin:2px 0 14px; padding:10px 11px;
    border:1px solid transparent; font-size:11px; color:rgba(253,250,245,.58); line-height:1.5;
    cursor:pointer; transition:border-color .2s var(--ease-out), background .2s var(--ease-out);
  }
  .lf-consent input[type="checkbox"]{
    width:17px; height:17px; flex:0 0 17px; margin:1px 0 0; accent-color:var(--red); cursor:pointer;
  }
  .lf-consent a{color:inherit; text-decoration:underline; text-underline-offset:2px;}
  .lf-consent.lf-invalid{border-color:var(--red); background:rgba(191,55,55,.09); color:rgba(253,250,245,.82);}
  .lf-consent:focus-within{border-color:rgba(217,190,138,.55);}

  /* ---- FOOTER ---- */
  footer{background:var(--navy-deep); color:rgba(253,250,245,.5); padding:72px 0 0;}
  .foot-grid{
    display:grid; grid-template-columns:1.3fr .9fr .9fr .9fr .9fr;
    gap:36px; margin-bottom:56px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.08);
  }
  @media(max-width:1024px){.foot-grid{grid-template-columns:1fr 1fr 1fr;}}
  @media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:560px){.foot-grid{grid-template-columns:1fr;}}
  footer h5{
    font-size:10px; font-weight:700; color:rgba(253,250,245,.35);
    text-transform:uppercase; letter-spacing:.18em; margin-bottom:20px;
  }
  footer ul{list-style:none; display:flex; flex-direction:column; gap:12px;}
  footer ul a{font-size:13.5px; color:rgba(253,250,245,.55); transition:color .3s var(--ease-out);}
  footer ul a:hover{color:var(--gold-light);}
  .foot-bottom-bar{padding:24px 0;}
  .foot-bottom{display:flex; justify-content:space-between; font-size:11.5px; color:rgba(253,250,245,.25); flex-wrap:wrap; gap:10px;}
  .foot-bottom a{transition:color .3s var(--ease-out);}
  .foot-bottom a:hover{color:rgba(253,250,245,.6);}

  /* ---- CALLBACK MODAL ("Заказать звонок") ---- */
  .cb-modal{
    position:fixed; inset:0; z-index:220; display:flex; align-items:center; justify-content:center;
    padding:24px; opacity:0; pointer-events:none; transition:opacity .3s var(--ease-out);
  }
  .cb-modal.open{opacity:1; pointer-events:auto;}
  .cb-modal-backdrop{position:absolute; inset:0; background:rgba(8,20,38,.7); backdrop-filter:blur(6px);}
  .cb-modal-panel{
    position:relative; background:var(--navy); color:var(--white); max-width:460px; width:100%;
    max-height:92vh; overflow:auto; padding:40px;
    box-shadow:0 60px 100px -40px rgba(8,20,38,.6);
    transform:translateY(20px); transition:transform .4s var(--ease);
    border:1px solid rgba(255,255,255,.08);
  }
  .cb-modal.open .cb-modal-panel{transform:none;}
  .cb-modal-close{
    position:absolute; top:16px; right:16px; z-index:2; width:36px; height:36px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
    display:flex; align-items:center; justify-content:center; color:var(--white);
    transition:background .3s var(--ease-out);
  }
  .cb-modal-close:hover{background:rgba(255,255,255,.14);}
  .cb-modal-panel .obj-modal-tag{color:var(--gold-light);}
  .cb-modal-panel .obj-modal-tag::before{background:var(--gold-light);}
  .cb-modal-panel h3{
    font-family:'Cormorant Garamond', serif; color:var(--white);
    font-size:26px; font-weight:500; margin:10px 0 8px; letter-spacing:-0.01em;
  }
  .cb-modal-lede{font-size:13.5px; color:rgba(253,250,245,.6); line-height:1.6; margin-bottom:26px;}
  .cb-modal-panel .lead-form .field select{
    width:100%; padding:13px 16px; background:rgba(255,255,255,.06);
    color:var(--white); border:1px solid rgba(255,255,255,.14);
    font-family:inherit; font-size:14px; border-radius:0;
    -webkit-appearance:none; appearance:none;
    transition:border-color .3s var(--ease-out), background .3s var(--ease-out);
  }
  .cb-modal-panel .lead-form .field select:focus{border-color:var(--gold-light); background:rgba(255,255,255,.1); outline:none;}
  @media(max-width:480px){.cb-modal-panel{padding:28px 22px;}}


  .obj-modal{
    position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
    padding:24px; opacity:0; pointer-events:none; transition:opacity .3s var(--ease-out);
  }
  .obj-modal.open{opacity:1; pointer-events:auto;}
  .obj-modal-backdrop{position:absolute; inset:0; background:rgba(8,20,38,.7); backdrop-filter:blur(6px);}
  .obj-modal-panel{
    position:relative; background:var(--white); max-width:780px; width:100%;
    max-height:88vh; overflow:auto;
    box-shadow:0 60px 100px -40px rgba(8,20,38,.6);
    transform:translateY(20px); transition:transform .4s var(--ease);
    border:1px solid var(--line);
  }
  .obj-modal.open .obj-modal-panel{transform:none;}
  .obj-modal-close{
    position:absolute; top:16px; right:16px; z-index:2; width:36px; height:36px;
    background:var(--white); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--navy);
  }
  .obj-modal-gallery{position:relative; height:380px; background:var(--navy); overflow:hidden;}
  .obj-modal-gallery svg{width:100%; height:100%; display:block;}
  /* Фото показывается целиком (contain), без обрезки краёв. Пустые поля
     по бокам заполняет размытая копия того же фото (вставляется в JS). */
  .obj-modal-gallery img.obj-modal-photo{position:relative; z-index:1; width:100%; height:100%; display:block; object-fit:contain;}
  .obj-modal-gallery img.obj-modal-photo-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(18px) brightness(.55); transform:scale(1.12);}
  @media(max-width:760px){ .obj-modal-gallery{height:250px;} }
  .vk-video-embed{position:relative; width:100%; padding-bottom:56.25%; height:0; overflow:hidden; background:var(--navy); border-radius:2px;}
  .vk-video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
  #contacts-map{height:440px; background:var(--blue-soft);}
  @media(max-width:760px){ #contacts-map{height:320px;} }
  .obj-modal-gnav{
    position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; z-index:2;
    background:rgba(253,250,245,.9); border:1px solid rgba(253,250,245,.3);
    display:flex; align-items:center; justify-content:center; color:var(--navy);
  }
  .obj-modal-gnav.prev{left:12px;} .obj-modal-gnav.next{right:12px;}
  .obj-modal-gdots{position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:center; gap:6px; z-index:2;}
  .obj-modal-gdots span{width:6px; height:6px; border-radius:50%; background:rgba(253,250,245,.4);}
  .obj-modal-gdots span.active{background:var(--white);}
  .obj-modal-body{padding:32px 36px 36px;}
  .obj-modal-tag{font-size:10px; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:.16em; display:flex; align-items:center; gap:10px; margin-bottom:10px;}
  .obj-modal-tag::before{content:""; width:20px; height:1px; background:var(--gold);}
  .obj-modal-body h3{font-family:'Cormorant Garamond', serif; font-size:28px; font-weight:500; margin-bottom:20px;}
  .obj-modal-meta{display:flex; gap:28px; flex-wrap:wrap; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--line);}
  .obj-modal-meta div{display:flex; flex-direction:column; gap:3px;}
  .obj-modal-meta .l{font-size:10px; color:var(--grey-light); text-transform:uppercase; letter-spacing:.1em; font-weight:700;}
  .obj-modal-meta .v{font-size:15px; font-weight:700; color:var(--navy);}
  .obj-modal-body p.desc{font-size:14.5px; color:var(--grey); line-height:1.7;}
  /* Ссылки внутри описания объекта портфолио */
  .obj-modal-body p.desc a{
    color:var(--red);
    font-weight:700;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
    transition:color .2s var(--ease-out), text-decoration-color .2s var(--ease-out);
  }
  .obj-modal-body p.desc a:hover,
  .obj-modal-body p.desc a:focus-visible{
    color:var(--navy);
    text-decoration-color:var(--gold);
  }
  body.modal-open{overflow:hidden;}

  /* ---- REVEAL ---- */
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
  .reveal.in{opacity:1; transform:none;}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none;}}

  /* ---- SCROLL PROGRESS ---- */
  #scroll-progress{
    position:fixed; top:0; left:0; z-index:9998; height:2px; width:0%;
    background:linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
    transition:width .1s linear;
    pointer-events:none;
  }

  /* ---- CUSTOM CURSOR (desktop) ---- */
  @media(pointer:fine){
    body.cursor-ready{cursor:none;}
    body.cursor-ready a, body.cursor-ready button, body.cursor-ready [role="button"], body.cursor-ready input, body.cursor-ready label{cursor:none;}
    /* <select> is deliberately excluded: its dropdown popup is drawn by the
       OS, not the page, so it never fires mousemove events for our custom
       cursor to follow. Hiding the native cursor here would leave visitors
       with no visible cursor at all while a dropdown is open. */
    body.cursor-ready select{cursor:pointer;}
    #cursor-dot{
      position:fixed; top:0; left:0; z-index:99999; pointer-events:none;
      width:8px; height:8px; border-radius:50%; background:var(--gold);
      transform:translate(-50%,-50%);
      transition:transform .1s linear, opacity .3s var(--ease-out);
      mix-blend-mode:multiply;
    }
    #cursor-ring{
      position:fixed; top:0; left:0; z-index:99998; pointer-events:none;
      width:34px; height:34px; border-radius:50%;
      border:1px solid var(--gold-light); opacity:.55;
      transform:translate(-50%,-50%);
      transition:transform .25s var(--ease), width .3s var(--ease), height .3s var(--ease), opacity .3s var(--ease-out);
    }
    body.cursor-hover #cursor-ring{width:48px; height:48px; opacity:.8;}
    body.cursor-click #cursor-dot{transform:translate(-50%,-50%) scale(1.8);}
  }

  /* ---- HERO extras ---- */
  .hero-divider{
    display:flex; align-items:center; gap:16px;
    margin:28px 0 32px;
  }
  .hero-divider span{height:1px; flex:1; max-width:60px; background:linear-gradient(90deg, var(--gold), transparent);}
  .hero-divider em{font-family:'Cormorant Garamond', serif; font-style:italic; font-size:13px; color:var(--gold-light); letter-spacing:.06em; opacity:.8;}

  /* ---- SECTION label upgrade ---- */
  .label-line{
    display:flex; align-items:center; gap:12px;
    font-size:10px; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:.22em;
    margin-bottom:18px;
  }
  .label-line::before{content:""; width:28px; height:1px; background:var(--gold);}

  /* ---- NUMBER hover (trust) ---- */
  .trust-item{cursor:default;}

  /* ---- FOOTER brand line ---- */
  .foot-brand-desc{font-size:13px; color:rgba(253,250,245,.4); line-height:1.7; max-width:300px; margin-top:10px;}

  /* ---- PAGE TRANSITION on link click ---- */
  .page-leaving{opacity:0; transition:opacity .4s var(--ease-out);}