/* ========= BASE ========= */
    * { box-sizing: border-box; }
    html, body { }
    body {
      margin: 0;
      font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      font-weight: 400;
      color: #000;
      background: #fff; /* тёмный фон по умолчанию под hero */
    }

    /* ========= HEADER / HERO ========= 
    .header {
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-image: url(https://citywiderepair.com/wp-content/themes/citywiderepair/222/bg.jpg);
      background-size: cover;
      background-position: center;
    }
    @media screen and (max-width: 520px) {
      .header {
        background-image: url(https://citywiderepair.com/wp-content/themes/citywiderepair/222/bg-mobile.png);
        background-size: cover;
        background-position: center;
      }
    }

    .header-top{
      display:flex;
      align-items:center;
      gap: clamp(8px, 2vw, 32px);
      padding-inline: clamp(16px, 6vw, 100px);
      padding-top: clamp(12px, 3vw, 30px);
    }*/
    /* позволяем колонкам сжиматься */
    .logo, .menu-link, .social-links { min-width: 0; }

    .logo{
      flex: 1 1 220px;
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:600;
      color:#fff;
      font-size: clamp(16px, 1.8vw, 24px);
    }
    .logo img{ display:block; width:auto; height:34px; margin-right:0; }

    .menu-link{
      flex: 2 1 600px;
      display:flex;
      justify-content:center;
      gap: clamp(12px, 2.2vw, 40px);
    }
    .menu-link a{
      color:#fff;
      text-decoration:none;
      font-size: clamp(14px, 1.6vw, 20px);
    }

    .social-links{
      flex: 1 1 260px;
      display:flex;
      justify-content:flex-end;
      gap: clamp(8px, 1.2vw, 16px);
    }

    .facebook {
      font-weight: bold;
      padding: clamp(8px,1.1vw,12px) clamp(12px,1.6vw,18px);
      color: #fff;
      text-decoration: none;
      border-radius: 100px;
      border: 2px solid #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    .instagram{
      width: 46px;
      height: 46px;
      background-color: #fff;
      -webkit-mask: url(https://citywiderepair.com/wp-content/themes/citywiderepair/222/instagram.svg) no-repeat center / contain;
              mask: url(https://citywiderepair.com/wp-content/themes/citywiderepair/222/instagram.svg) no-repeat center / contain;
    }

    #btn-phone{
      white-space: nowrap;
      flex: 0 0 200px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: clamp(12px, 1.4vw, 18px);
      padding: clamp(8px,1.1vw,12px) clamp(12px,2vw,12px);
      background-color: rgba(255, 255, 255, 0.70);
      border-radius: 999px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      color: #000;
    }

    .header-bottom{ display:flex; align-items:center; justify-content:center; padding: 0px; }
    .promo {
      max-width: 890px;
      margin: 0 auto;
      text-align: center;
      color: #fff;
      padding: 0 15px;
    }
    .promo h1 { font-size: clamp(32px, 6vw, 64px); margin-bottom: 30px; line-height:1.1; }
    .promo h2 { margin: 0 auto; max-width: 470px; font-size: clamp(18px, 6vw, 22px); font-weight: 500; }

    #book-repair-btn {
      padding: 12px 40px;
      background-color: rgba(255, 255, 255, 0.70);
      border-radius: 50px;
      border: none;
      cursor: pointer;
      margin-top: 30px;
      margin-bottom: 60px;
      text-decoration: none;
      color: #000;
    }
    @media screen and (min-width: 1500px) {
      .promo h1 { font-size: 64px; font-weight: bold; }
    }

    /* ========= BURGER / MOBILE NAV ========= */
    .burger{
      display:none;
      width:60px;height:42px;
      border-radius:50px;
      border:2px solid rgba(255,255,255,1);
      background:rgba(255,255,255,.08);
      backdrop-filter: blur(6px);
      align-items:center;justify-content:center;
      cursor:pointer;
    }
    .burger__line,
    .burger__line::before,
    .burger__line::after{
      display:block; content:""; width:20px; height:2px; background:#fff; border-radius:2px;
      position:relative; transition:transform .2s ease, opacity .2s ease;
    }
    .burger__line::before{ position:absolute; top:-6px; left:0; }
    .burger__line::after{ position:absolute; top:6px; left:0; }
    .burger[aria-expanded="true"] .burger__line{ transform:rotate(45deg); }
    .burger[aria-expanded="true"] .burger__line::before{ transform:rotate(90deg) translateX(-6px); }
    .burger[aria-expanded="true"] .burger__line::after{ opacity:0; transform:translateY(-6px); }

    @media (max-width:1280px){
      .burger{display:inline-flex;}
      .menu-link{display:none!important;}
    }

    .mobile-nav{
      position:fixed; inset:0; z-index:1000; display:flex;
      background:rgba(0,0,0,.4); backdrop-filter: blur(4px);
    }
    .mobile-nav[hidden]{ display:none; }
    .mobile-nav__panel{
      margin-left:auto;
      width:min(86vw, 420px);
      height:100%; background:#ffffff; color:#0b0f14;
      padding:24px clamp(16px,4vw,28px);
      transform:translateX(100%); transition:transform .25s ease;
      display:flex; flex-direction:column; gap:20px;
    }
    .mobile-nav.open .mobile-nav__panel{ transform:none; }
    .mobile-nav__close{
      align-self:flex-end; width:40px;height:40px; border-radius:10px; border:1px solid #e6ecf2;
      background:#f7fbff; font-size:22px; cursor:pointer;
    }
    .mobile-nav__list{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
    .mobile-nav__list a{
      text-decoration:none; color:#0b0f14; font-weight:600; font-size:18px;
      padding:10px 6px; border-radius:10px;
    }
    .mobile-nav__list a:active{ background:#f2f6ff; }
    .mobile-nav__cta{
      margin-top:6px; display:inline-block; text-decoration:none; font-weight:700;
      padding:12px 16px; border-radius:999px; background:#eaf2ff; color:#1e3a8a; border:1px solid #d9e6ff;
    }
    .mobile-nav__socials{ display:flex; gap:12px; align-items:center; }

    body.no-scroll{ overflow:hidden; }

    /* ========= STICKY BAR (mobile) ========= */
    .sticky-bar{
      position:fixed; left:0; right:0; bottom:0; z-index:900;
      display:flex; gap:10px; justify-content:center;
      padding:10px 14px calc(10px + env(safe-area-inset-bottom));
      background:rgba(255,255,255,.9); backdrop-filter: blur(6px);
      border-top:1px solid #e6ecf2;
    }
    .sticky-bar__btn{
      flex:1 1 0;
      display:inline-flex; align-items:center; justify-content:center;
      padding:12px 16px; border-radius:999px; text-decoration:none; font-weight:700;
      border:1px solid #d9e6ff;
    }
    .sticky-bar__btn--call{ background:#eaf7ff; color:#0b3a7a; }
    .sticky-bar__btn--book{ background:#2a5bd7; color:#fff; border-color:#1f4ec2; }
    @media (min-width:641px){ .sticky-bar{ display:none; } }

    /* ========= SERVICES ========= */
    .services{ padding: 80px; }
    .services h2{
      padding: 0 15px;
      width:auto; max-width:1000px;
      font-size: clamp(24px, 6vw, 96px);
      text-wrap: balance;
      line-height: 1.1;
      margin: 0 0 20px 0;
    }
    .services .items{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(16px, 3vw, 30px);
      margin: 0;
    }
    @media (max-width:640px){
      .services .items{ grid-template-columns: 1fr; }
        
        .services{ padding: 50px 0px; }
    }

    .services .item{
      display: flex;
      align-items: center;
      gap: clamp(12px, 2.4vw, 24px);
      padding: clamp(12px, 2.4vw, 20px);
      border-radius: 24px;
      background: rgba(255,255,255,0.04);
      container-type: inline-size; /* 1cqi = 1% ширины карточки */
      min-width:0;
    }
    .services .item img{
      flex: 0 0 32cqi; /* ~32% карточки */
      width: 50%;
      max-width: none;
      aspect-ratio: 1/1;
      object-fit: cover;
      border-radius: clamp(12px, 2vw, 30px);
    }
    .services .item .content{
      flex: 0 0 50cqi;
      width: auto;
      max-width: none;
    }
    .services .item h3{
      font-size: max(16px, 4.5cqi);
      line-height: 1.1;
      margin: 0 0 0px 0;
    }
    .services .item p{
      font-size: max(13px, 3.8cqi);
      line-height: 1.45;
      word-break: keep-all;
      overflow-wrap: normal;
      margin: 15px 0 0 0;
    }
    .services .item .service-link{
      display: inline-block;
      font-size: clamp(12px, 2.8cqi, 16px);
      padding: clamp(6px, 1.2cqi, 10px) clamp(10px, 2cqi, 16px);
      border-radius: 999px;
      text-decoration: none;
      background-color: #F3F3F3; color:#0b1220;
      margin-top:10px;
    }
    @media (max-width:640px){
      .services .item{ flex-direction: column; align-items: flex-start; }
      .services .item img{ flex: 0 0 auto; width: 100%; }
      .services .item .content{ flex: 1 1 auto; width: 100%; }
      .logo img { display:none; }
      .instagram{ width:42px; height:42px; }
    }

    /* ========= PORTFOLIO ========= */
    .portfolio { padding: 0 100px; }
    .portfolio h2{
      width:auto; max-width:1000px;
      font-size: clamp(24px, 6vw, 96px);
      text-wrap: balance; line-height:1.1; margin-bottom:30px; color:#000;
    }
    .portfolio p{
      width:auto; max-width:1000px;
      font-size: clamp(18px, 2.5vw, 36px);
      text-wrap: balance; line-height:1.1; margin-top:0; color:#000;
    }
    .portfolio img { border-radius: 30px; width: 100%; display:block; }
    .portfolio .items { margin: 0 -5px; display: flex; flex-wrap: wrap; }
    .portfolio .item { width: calc(25% - 10px); margin: 5px; }
    @media (max-width:640px){
      .portfolio{ padding: 0 15px; }
      .portfolio h2{ margin-bottom:15px; }
      .portfolio .item{ width: calc(50% - 10px); }
      .portfolio img{ border-radius: 15px; }
    }
    @media (max-width:360px){
      .portfolio .item{ width:100%; }
    }

    /* ========= ADVANTAGES / PROCESS ========= */
    .advantages {
      padding: 100px;
      display: flex;
      gap:20px;
      color:#000;
    }
    .advantages .col-left,
    .advantages .col-right{ width:50%; min-width:0; }
    .advantages .col-left { container-type: inline-size; }
    .advantages h2{
      font-size: clamp(28px, 12cqi, 48px);
      line-height:1.1; text-wrap:balance; max-width:22ch; margin:0;
    }
    .advantages .items { display:flex; flex-wrap:wrap; }
    .advantages .item { width:50%; padding:10px; container-type:inline-size; min-width:0; }
    .advantages .item > span{
      display:block; line-height:1; font-size: clamp(24px, 12cqi, 96px);
    }
    .advantages .item h3{
      font-weight:700; margin:15px 0; line-height:1.15; text-wrap:balance;
      font-size: clamp(18px, 10cqi, 36px); /* фикс вместо max(10cqi) */
    }
    .advantages .item p{
      line-height:1.45;
      font-size: clamp(14px, 4cqi, 20px); /* фикс вместо max(4cqi) */
      color:#000;
    }
    @media (max-width:460px){
      .advantages{ flex-direction:column; padding:50px 15px; }
      .advantages .col-left, .advantages .col-right{ width:100%; }
      .advantages .items{ margin:0 -10px; }
      .advantages .item{ width:100%; }
      .advantages .item h3{ font-size: clamp(16px, 5cqi, 24px); }
    }

    /* ========= CERTIFICATES / WHY US ========= */
    .certificates {
      padding: 100px;
      background: linear-gradient(to bottom right, #4a8fbc 0%, #89d2f0 100%);
      margin: 15px;
      border-radius: 30px;
      color: #fff;
    }
    .certificates .row { container-type:inline-size; min-width:0; max-width:900px; margin:0 auto; }
    .certificates h2{
      text-align:center; margin:0 0 0 0;
      font-size: clamp(22px, 5cqi, 38px); /* фикс */
    }
    .certificates p{
      text-align:center; margin:15px auto 0; width:min(70%, 800px);
      font-size: clamp(14px, 3cqi, 18px); /* фикс */
    }
    .certificates .items { display:flex; margin-top:50px; gap:0; }
    .certificates .item {
      width: 33.333333%;
      padding: 15px;
      display:flex; flex-direction:column; align-items:center;
      container-type:inline-size; min-width:0;
      text-align:center;
    }
    .certificates .item h3{ margin:15px 0; font-size: clamp(18px, 5cqi, 28px); } /* фикс */
    .certificates .item p{ margin:0; font-size: clamp(14px, 3cqi, 18px); } /* фикс */
    .certificates img { height:115px; width:100%; object-fit:contain; display:block; }
    @media (max-width:640px){
      .certificates{ padding:40px 16px; border-radius:20px; }
      .certificates .items{ flex-direction:column; }
      .certificates .item{ width:100%; }
    }

    /* ========= FAQ ========= */
    :root{
      --faq-bg:#f2f7fa;
      --faq-text:#0b0f14;
      --faq-muted:#4b5563;
      --faq-ring:#e6ecf2;
      --faq-radius:22px;
    }
    .faq-wrapper {
      background-color: var(--faq-bg);
      padding: 100px;
      margin: 15px;
      border-radius: 30px;
      color:#0b0f14;
    }
    .faq{ padding:10px; display:grid; place-items:center; }
    .faq__card{
      width:min(100%, 1000px);
      background:#fff;
      border-radius:var(--faq-radius);
      box-shadow:0 10px 30px rgba(0,0,0,.04);
      padding:min(7vw,56px);
      border:1px solid var(--faq-ring);
    }
    .faq__title{
      font-weight:700;
      font-size:clamp(26px, 4.2vw, 44px);
      letter-spacing:-0.02em;
      line-height:1.05;
      margin:0 0 28px 0;
    }
    .faq__title em{ font-style:normal; color:#6b7280; }
    .accordion{ display:flex; flex-direction:column; gap:6px; }
    .accordion__item{ border-top:1px solid var(--faq-ring); padding-top:6px; }
    .accordion__item:last-child{ border-bottom:1px solid var(--faq-ring); padding-bottom:6px; }
    .accordion__trigger{
      width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
      padding:22px 6px; background:none; border:0; cursor:pointer; text-align:left;
      border-radius:12px; transition:background .2s ease;
    }
    .accordion__trigger:hover, .accordion__trigger:focus-visible{ background:rgba(15,23,42,.03); outline:none; }
    .accordion__question{ font-size:clamp(18px, 2.4vw, 28px); font-weight:500; letter-spacing:-.01em; }
    .accordion__icon{
      flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center;
      font-size:26px; line-height:1; border-radius:10px; border:1px solid var(--faq-ring);
      user-select:none; transition:transform .2s ease, background .2s ease;
    }
    .accordion__trigger[aria-expanded="true"] .accordion__icon{ transform:rotate(45deg); background:#fafcff; }
    .accordion__content{ overflow:hidden; max-height:0; transition:max-height .28s ease; will-change:max-height; padding:0 6px; }
    .accordion__inner{ padding:0 0 24px 0; color:#4b5563; font-size:clamp(15px, 1.8vw, 18px); }
    @media (prefers-reduced-motion:reduce){
      .accordion__content{transition:none}
      .accordion__icon{transition:none}
    }
    @media (max-width:460px){ .faq-wrapper{ padding:0; } }

    /* ========= BLOG ========= */
    :root{
      --blog-text:#0b0f14;
      --blog-muted:#5b6676;
      --blog-ring:#e6edf6;
      --blog-card:#eef4ff;
      --blog-btn:#cfe2ff;
      --blog-radius:22px;
    }
    .blog{
      width: 100%;
      margin-inline:auto;
      padding:48px 135px 80px;
      color:#000;
    }
    .blog-title{
      font-weight:800;
      font-size:clamp(42px, 6.2vw, 86px);
      line-height:1.04;
      letter-spacing:-.02em;
      margin:12px 0 28px;
    }
    .blog-title em{ font-style:normal; color:#9aa6b2; }
    .grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(220px, 1fr));
      gap:26px;
    }
    @media (max-width:1100px){ .grid{grid-template-columns:repeat(3, 1fr);} }
    @media (max-width:820px){  .grid{grid-template-columns:repeat(2, 1fr);} }
    @media (max-width:540px){  .grid{grid-template-columns:1fr;} }
    .blog .card{
      background:var(--blog-card);
      border:1px solid var(--blog-ring);
      border-radius:var(--blog-radius);
      padding:22px 22px 18px;
      display:flex; flex-direction:column; min-height:360px;
      box-shadow:0 8px 26px rgba(15,23,42,.06);
      color:#000!important;
    }
    .blog .card .date{ font-size:14px; color:#6c778a; margin-bottom:10px; text-transform:lowercase; }
    .blog .card h3{ margin:0 0 10px; font-size:clamp(18px, 2.3vw, 22px); line-height:1.3; letter-spacing:-.01em; }
    .blog .excerpt{ color:#000!important; font-size:15px; margin:0 0 18px; }
    .readmore{
      margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:10px;
      font-weight:600; font-size:15px; text-decoration:none; color:#2a5bd7;
      background:var(--blog-btn); padding:12px 16px; border-radius:999px; border:1px solid #d9e6ff;
      transition:transform .15s ease, box-shadow .15s ease;
    }
    .readmore:hover{ transform:translateY(-1px); box-shadow:0 8px 16px rgba(37,99,235,.18); }
    .readmore__icon{ width:28px;height:28px; border-radius:50%; background:#e6efff; display:grid;place-items:center; border:1px solid #d9e6ff; }
    @media (max-width:460px){ .blog{ padding:15px; } }

    /* ========= CTA / CONTACTS ========= */
    :root{
      --cta-bg:#ffffff;
      --cta-text:#0b1220;
      --cta-ink:#3d4a5c;
      --cta-accent:#6ec1e4;
      --cta-accent-2:#9ad8ff;
      --cta-ring:#dfe8f4;
      --cta-radius-xl:28px;
      --cta-radius-lg:22px;
    }
    .wrap{
      width:calc(100% - 30px);
      margin:15px;
      margin-bottom: 80px;
      border-radius: 30px;
      padding:0px;
    }
    .cta{
      position:relative;
      border-radius:34px;
      padding:52px clamp(18px, 3.6vw, 38px);
      background:linear-gradient(135deg, var(--cta-accent) 0%, var(--cta-accent-2) 100%);
      overflow:hidden;
      box-shadow:0 18px 40px rgba(30, 80, 140, .18);
      color:#0b1220;
    }
    .cta__grid{
      display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:start;
    }
    @media (max-width:980px){ .cta__grid{ grid-template-columns:1fr; } }
    .title{
      color:#fff; font-weight:800; font-size:clamp(28px, 5vw, 48px);
      line-height:1.08; letter-spacing:-.02em; margin:10px 0 26px; max-width:20ch;
    }
    .contact-list{ color:#fff; display:grid; gap:18px; margin-bottom:36px; }
    .label{ font-weight:700; margin:0 0 4px; }
    .value{ margin:0; font-weight:500; opacity:.95; }

    .card{
      background:#fff; border:1px solid rgba(255,255,255,.5);
      border-radius:40px; padding:26px clamp(16px, 3vw, 34px);
      box-shadow:0 16px 28px rgba(12, 43, 80, .18);
    }
    .card h3{ margin:2px 0 18px; font-size:clamp(18px, 2.2vw, 22px); letter-spacing:-.01em; }
    .card h3 u{ text-underline-offset:3px; }
    .field{ margin:14px 0 6px; }
    .field label{
      display:block; font-size:14px; color:#5c6676; margin-bottom:8px;
    }
    .field input, .field select{
      width:100%; border:0; border-bottom:2px solid #e6edf5; padding:12px 2px;
      font-size:16px; color:#0f172a; background:#fff; border-radius:0; outline:none; transition:border-color .15s ease;
    }
    .field input::placeholder{ color:#a8b3c2; }
    .field input:focus, .field select:focus{ border-color:#b9d9ff; }
    .actions{ display:flex; justify-content:flex-end; margin-top:24px; }
    .btn{
      display:inline-flex; align-items:center; gap:10px;
      background:#86c5ff; color:#0b1220; text-decoration:none; font-weight:600;
      border:1px solid #cde6ff; border-radius:999px; padding:12px 18px; cursor:pointer;
      transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 18px rgba(25, 90, 170, .25); background:#99ceff; }
    .btn__icon{
      width:28px;height:28px; display:grid;place-items:center; border-radius:999px;
      background:#e6f2ff; border:1px solid #cfe6ff;
    }

    .footer-row{
      display:flex; align-items:flex-end; gap:20px; justify-content:space-between; flex-wrap:nowrap; margin-top:40px; color:#fff;
    }
    .brand{ margin-top:24px; color:#fff; max-width:34ch; }
    .brand__name{ font-weight:800; font-size:22px; margin:16px 0 6px; }
    .brand__desc{ margin:0; opacity:.95; }
    .links{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px 40px; min-width:240px; }
    .links a{ color:#fff; text-underline-offset:3px; }
    .copyright{ opacity:.9; font-size:14px; }
    .footer-row .logo{
      display:flex; align-items:center; gap:12px; color:#fff; font-weight:800; font-size:22px; white-space:nowrap;
    }
    .logo-badge{ width:34px;height:34px; border-radius:50%; display:grid;place-items:center; background:#ffffff; color:#2b63d6; box-shadow:0 8px 18px rgba(0,0,0,.16) inset; }

    @media (max-width:620px){
      .footer-row{ gap:16px; flex-wrap:wrap; }
      .links{ grid-template-columns:1fr 1fr; gap:8px 24px; }
      .footer-row .logo{ order:3; }
      .copyright{ order:2; }
    }

    /* ========= REVEAL ANIMATIONS ========= */
    @media (prefers-reduced-motion: no-preference){
      .reveal {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity .6s ease, transform .6s ease;
        will-change: opacity, transform;
      }
      .reveal.in { opacity: 1; transform: none; }
      .services .items .item { transition-duration: .6s; }
      .services .items .item:nth-child(2n+1){ transition-delay: .10s; }
      .services .items .item:nth-child(2n)  { transition-delay: .22s; }
    }
    @media (prefers-reduced-motion: reduce){
      .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
    }

    /* ========= SMALL TWEAKS ========= */
    @media screen and (max-width: 520px) {
      .header-top { padding-inline:15px; padding-top:15px; }
      .social-links { gap:8px; }
      .promo { text-align:left; }
      .promo h1 { margin-bottom: 15px!important; }
      .promo h2 { margin-bottom: 15px!important; }
      #book-repair-btn { margin-top: 15px; }
      .facebook { padding: 7px 15px; margin-right: 0px; }
      #btn-phone { max-width: none; font-size:14px; padding:10px 14px; display: none;}
    }