/* ============================================================
   NOVOTILE — SITE.CSS
   Єдиний стилевий файл на весь сайт.

   Було: assets/style.css + assets/refine.css + власний <style>
   у 8 сторінках + окрема тема всередині iframe калькулятора.
   Токени палітри були оголошені в 7 місцях — зміна кольору
   вимагала 7 правок.

   Порядок секцій має значення: рефініш-шар іде останнім,
   бо перекриває все вище.

     1-4  база, компоненти, сторінкові модулі  (колишній style.css)
     6-7  лендінги (body.lp) і подяка (body.ty)
     8    спільні модулі, витягнуті зі сторінок
     9    рефініш-шар: шкали, типографіка, фокус, рух
   ============================================================ */

:root{
    --ink:#2f4a39;
    --ink-soft:#3a5a46;
    --cream:#e9e2d3;
    --cream-deep:#ddd3bd;
    --paper:#f6f1e7;
    --clay:#4a6b54;
    --clay-deep:#34503f;
    --brass:#7c8b76;
    --stone:#6f7a66;
    --line:rgba(52,80,63,.16);
    --line-light:rgba(52,80,63,.12);
    --shadow:0 24px 60px -24px rgba(39,64,47,.3);
    --display:'Cormorant Garamond',Georgia,serif;
    --body:'Lora',Georgia,serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--body);
    background:var(--paper);
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body::before{
    content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  ::selection{background:var(--clay);color:var(--paper)}

  /* ---------- HEADER ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:1000;
    display:flex;align-items:center;justify-content:space-between;
    padding:20px clamp(20px,5vw,72px);
    background:rgba(47,74,57,.94);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(246,241,231,.14);
    transition:padding .4s ease;
  }
  .brand{display:flex;align-items:center;gap:12px;cursor:pointer;text-decoration:none;color:var(--paper)}
  .brand .mark{width:42px;height:42px;flex:none;display:block;color:var(--paper)}
  .brand .name{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:.01em;color:var(--paper)}
  .brand .name small{display:block;font-family:var(--body);font-size:.5rem;letter-spacing:.32em;color:rgba(246,241,231,.6);font-weight:600;margin-top:4px;text-transform:uppercase}

  nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px)}
  nav a{
    font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(246,241,231,.82);
    text-decoration:none;cursor:pointer;position:relative;padding:4px 0;font-weight:500;
  }
  nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;background:var(--paper);transition:width .3s ease}
  nav a:hover::after,nav a.active::after{width:100%}
  nav a:hover,nav a.active{color:var(--paper)}
  .nav-cta{
    background:var(--paper);color:var(--clay-deep)!important;padding:11px 22px;border-radius:2px;
    letter-spacing:.08em;transition:background .3s ease;font-weight:600;
  }
  .nav-cta::after{display:none}
  .nav-cta:hover{background:#fff}
  .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px}
  .burger span{width:26px;height:2px;background:var(--paper);transition:.3s}
  .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)}

  /* ---------- PAGE SYSTEM ---------- */
  main{padding-top:78px}
  .page{display:none}
  .page.active{display:block;animation:fade .6s ease both}
  @keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,72px)}
  .kicker{
    display:inline-flex;align-items:center;gap:10px;font-size:.72rem;letter-spacing:.34em;
    text-transform:uppercase;color:var(--clay-deep);font-weight:600;margin-bottom:22px;
  }
  .kicker::before{content:"";width:30px;height:1px;background:var(--clay)}
  h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.04;letter-spacing:-.01em}
  .section{padding:clamp(72px,11vw,150px) 0}

  /* ---------- HERO ---------- */
  .hero{position:relative;background:linear-gradient(160deg,#f6f1e7 0%,var(--cream) 100%);color:var(--ink);overflow:hidden;min-height:90vh;display:flex;align-items:center}
  .hero .wrap{position:relative;z-index:2;width:100%;padding-top:60px;padding-bottom:60px}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
  .hero h1{font-size:clamp(2.3rem,5.2vw,4.3rem);color:var(--ink)}
  .hero h1 em{font-style:italic;color:var(--clay);font-weight:300}
  .hero p{margin:30px 0 38px;font-size:1.08rem;color:#4f5f4a;max-width:36ch;font-weight:300}
  .hero .kicker{color:var(--clay-deep)}
  .hero .kicker::before{background:var(--clay)}
  .hero-stats{display:flex;gap:38px;margin-top:54px;flex-wrap:wrap}
  .hero-stats div span{font-family:var(--display);font-size:2.6rem;color:var(--clay-deep);display:block;line-height:1}
  .hero-stats div small{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
  .hero-visual{position:relative;height:440px;border-radius:5px;overflow:hidden;box-shadow:var(--shadow);border:5px solid var(--clay-deep)}
  .hero-visual::after{content:"";position:absolute;inset:7px;border:1px solid rgba(246,241,231,.55);border-radius:3px;pointer-events:none;z-index:6}
  .hero-visual .tile-art{position:absolute;inset:0}
  .hero-tag{
    position:absolute;bottom:18px;left:18px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
    color:var(--ink);padding:12px 18px;font-size:.78rem;letter-spacing:.1em;border-left:2px solid var(--clay);box-shadow:0 8px 24px -12px rgba(39,64,47,.38);
  }
  .hero-glow{position:absolute;width:60vw;height:60vw;max-width:680px;max-height:680px;border-radius:50%;
    background:radial-gradient(circle,rgba(74,107,84,.26),transparent 65%);top:-20%;right:-10%;z-index:1}

  .btn{
    display:inline-flex;align-items:center;gap:12px;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
    font-weight:600;padding:16px 32px;border-radius:2px;cursor:pointer;text-decoration:none;border:none;
    transition:.3s ease;
  }
  .btn-primary{background:var(--clay-deep);color:#fff}
  .btn-primary:hover{background:#27402f;transform:translateY(-2px)}
  .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
  .btn-ghost:hover{border-color:var(--clay);color:var(--clay-deep)}
  .btn-dark{background:var(--clay-deep);color:#fff}
  .btn-dark:hover{background:#27402f}
  .btn .arrow{transition:transform .3s ease}
  .btn:hover .arrow{transform:translateX(4px)}

  /* ---------- INTRO / ABOUT ---------- */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
  .split h2{font-size:clamp(2rem,4.4vw,3.4rem);margin-bottom:24px}
  .split p{color:#50604c;margin-bottom:18px;max-width:46ch}
  .lead{font-size:1.15rem;color:var(--ink)!important;font-weight:400}
  .about-art{height:480px;border-radius:3px;overflow:hidden;position:relative;box-shadow:var(--shadow)}

  /* ---------- ADVANTAGES ---------- */
  .feats{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .feat-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;margin-bottom:60px}
  .feat-head h2{font-size:clamp(2rem,4.4vw,3.2rem);max-width:14ch}
  .feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
  .feat{background:var(--cream);padding:38px 30px;transition:background .4s ease}
  .feat:hover{background:var(--paper)}
  .feat .num{font-family:var(--display);font-size:1rem;color:var(--clay);letter-spacing:.1em}
  .feat h3{font-size:1.35rem;margin:18px 0 12px}
  .feat p{font-size:.92rem;color:#50604c}

  /* ---------- SERVICES / PRICES ---------- */
  .price-table{margin-top:50px;border-top:1px solid var(--line)}
  .price-row{
    display:grid;grid-template-columns:48px 1fr auto;gap:24px;align-items:center;
    padding:26px 8px;border-bottom:1px solid var(--line);transition:.3s ease;cursor:default;
  }
  .price-row:hover{background:var(--cream);padding-left:18px}
  .price-row .pnum{font-family:var(--display);font-size:1rem;color:var(--stone)}
  .price-row .pinfo h3{font-size:1.45rem;margin-bottom:4px}
  .price-row .pinfo p{font-size:.9rem;color:#6f7a66}
  .price-row .pprice{font-family:var(--display);font-size:1.6rem;color:var(--clay-deep);white-space:nowrap;text-align:right}
  .price-row .pprice small{display:block;font-family:var(--body);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);font-weight:500}
  .price-note{margin-top:26px;font-size:.86rem;color:#6f7a66;font-style:italic}

  .process{background:var(--cream);color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .process .kicker{color:var(--clay-deep)}
  .process .kicker::before{background:var(--clay)}
  .process h2{font-size:clamp(2rem,4.4vw,3.2rem);color:var(--ink);margin-bottom:60px;max-width:18ch}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
  .step{position:relative;padding-top:30px;border-top:1px solid var(--clay)}
  .step .snum{font-family:var(--display);font-size:2.6rem;color:var(--clay-deep);line-height:1}
  .step h3{font-size:1.25rem;color:var(--ink);margin:16px 0 10px}
  .step p{font-size:.9rem;color:#4f5f4a}

  /* ---------- GALLERY ---------- */
  .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
  .gcard{position:relative;aspect-ratio:4/5;border-radius:3px;overflow:hidden;cursor:pointer;box-shadow:0 12px 32px -18px rgba(28,23,20,.4)}
  .gcard .tile-art{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
  .gcard:hover .tile-art{transform:scale(1.07)}
  .gcard .goverlay{
    position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;
    background:linear-gradient(to top,rgba(28,23,20,.85),transparent 55%);color:var(--cream);
    opacity:1;transition:.4s;
  }
  .gcard .gtag{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:6px}
  .gcard .gtitle{font-family:var(--display);font-size:1.4rem}
  .gcard.tall{grid-row:span 1}
  .gallery-note{margin-top:40px;text-align:center;font-size:.9rem;color:#6f7a66;font-style:italic}

  /* ---------- PROJECT CAROUSEL ---------- */
  .carousel{position:relative;max-width:600px;margin:50px auto 0;aspect-ratio:4/5;border-radius:5px;overflow:hidden;box-shadow:var(--shadow);background:#1b211a;border:5px solid var(--clay-deep)}
  .carousel::after{content:"";position:absolute;inset:7px;border:1px solid rgba(246,241,231,.55);border-radius:3px;pointer-events:none;z-index:5}
  .carousel .cslide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease;cursor:zoom-in}
  .carousel .cslide.active{opacity:1}
  .carousel .cshade{position:absolute;inset:0;background:linear-gradient(to top,rgba(27,33,26,.85),transparent 42%);pointer-events:none;z-index:2}
  .carousel .ccap{position:absolute;left:24px;bottom:24px;right:74px;color:var(--paper);z-index:3}
  .carousel .ccap .cgtag{display:block;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:#cdd6c2;margin-bottom:6px}
  .carousel .ccap .cgtitle{font-family:var(--display);font-size:1.6rem;font-weight:600;line-height:1.1}
  .carousel .carr{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;background:rgba(246,241,231,.92);color:var(--clay-deep);font-size:1.6rem;line-height:1;display:grid;place-items:center;transition:.25s}
  .carousel .carr:hover{background:#fff;transform:translateY(-50%) scale(1.07)}
  .carousel .cprev{left:14px}
  .carousel .cnext{right:14px}
  .carousel .ccount{position:absolute;top:16px;right:16px;z-index:3;background:rgba(27,33,26,.72);backdrop-filter:blur(4px);color:var(--paper);font-size:.76rem;letter-spacing:.08em;padding:6px 12px;border-radius:20px}

  /* ---------- LIGHTBOX ---------- */
  .lb{position:fixed;inset:0;z-index:5000;background:rgba(20,26,20,.95);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;cursor:zoom-out}
  .lb.open{display:flex;animation:fade .25s ease both}
  .lb img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:4px;box-shadow:0 30px 90px -20px rgba(0,0,0,.75);user-select:none;-webkit-user-drag:none;cursor:default}
  .lb-close{position:absolute;top:18px;right:20px;width:48px;height:48px;border:none;border-radius:50%;background:rgba(246,241,231,.92);color:var(--clay-deep);font-size:1.7rem;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:2;transition:.25s}
  .lb-close:hover{background:#fff;transform:rotate(90deg)}
  .lb-arr{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border:none;border-radius:50%;background:rgba(246,241,231,.9);color:var(--clay-deep);font-size:2rem;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:2;transition:.25s}
  .lb-arr:hover{background:#fff;transform:translateY(-50%) scale(1.07)}
  .lb-prev{left:18px}.lb-next{right:18px}
  .lb-count{position:absolute;top:20px;left:20px;color:var(--paper);font-size:.8rem;letter-spacing:.08em;background:rgba(20,26,20,.5);padding:6px 13px;border-radius:20px;z-index:2}
  .lb-cap{position:absolute;left:0;right:0;bottom:24px;text-align:center;color:var(--paper);z-index:2;padding:0 74px;pointer-events:none}
  .lb-cap .lb-tag{display:block;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:#cdd6c2;margin-bottom:6px}
  .lb-cap .lb-title{font-family:var(--display);font-size:1.4rem;font-weight:600}
  @media(max-width:600px){.lb-arr{width:44px;height:44px;font-size:1.7rem}.lb-prev{left:10px}.lb-next{right:10px}.lb img{max-width:96vw;max-height:80vh}.lb-cap{padding:0 16px;bottom:80px}.lb-cap .lb-title{font-size:1.05rem}}



  .hero-visual .ba{position:absolute;inset:0;max-width:none;width:100%;height:100%;margin:0;aspect-ratio:auto;border-radius:inherit;box-shadow:none}
  /* ---------- BEFORE / AFTER SLIDER ---------- */
  .ba{position:relative;max-width:560px;margin:46px auto 0;aspect-ratio:3/4;border-radius:6px;overflow:hidden;box-shadow:var(--shadow);cursor:ew-resize;user-select:none;-webkit-user-select:none;touch-action:none;background:#1b211a}
  .ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;user-select:none}
  .ba-line{position:absolute;top:0;bottom:0;width:3px;background:var(--paper);transform:translateX(-50%);pointer-events:none;box-shadow:0 0 0 1px rgba(39,64,47,.15)}
  .ba-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--clay-deep);color:var(--paper);display:grid;place-items:center;box-shadow:0 4px 16px rgba(39,64,47,.45)}
  .ba-tag{position:absolute;top:16px;z-index:3;background:rgba(27,33,26,.7);backdrop-filter:blur(4px);color:var(--paper);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;padding:6px 12px;border-radius:20px;pointer-events:none}
  .ba-l{left:16px}
  .ba-r{right:16px}

  /* ---------- 3D DESIGN ---------- */
  .design-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:50px}
  .dcard{position:relative;aspect-ratio:16/10;border-radius:4px;overflow:hidden;cursor:pointer;box-shadow:0 14px 36px -20px rgba(39,64,47,.45);border:1px solid var(--line)}
  .dcard .tile-art{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
  .dcard:hover .tile-art{transform:scale(1.05)}
  .dcard .dbadge{position:absolute;top:16px;left:16px;z-index:2;background:rgba(47,74,57,.9);backdrop-filter:blur(4px);color:var(--paper);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;padding:6px 12px;border-radius:2px}
  .dcard .doverlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;background:linear-gradient(to top,rgba(28,33,26,.82),transparent 55%);color:var(--paper)}
  .dcard .dtag{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:#cdd6c2;margin-bottom:6px}
  .dcard .dtitle{font-family:var(--display);font-size:1.5rem;font-weight:600}
  .dcard.empty{display:flex;align-items:center;justify-content:center;background:var(--cream);border:1.5px dashed var(--clay)}
  .dcard.empty .eplus{text-align:center;color:var(--clay-deep)}
  .dcard.empty .eplus span{font-size:2.4rem;font-family:var(--display);display:block;line-height:1}
  .dcard.empty .eplus small{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
  @media(max-width:680px){.design-grid{grid-template-columns:1fr}}

  /* ---------- BEFORE / AFTER ---------- */
  .ba-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:30px}
  .ba-card{position:relative;aspect-ratio:3/4;border-radius:4px;overflow:hidden;box-shadow:0 14px 36px -20px rgba(39,64,47,.45);border:1px solid var(--line)}
  .ba-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .ba-card .ba-badge{position:absolute;top:16px;left:16px;z-index:2;background:rgba(47,74,57,.9);backdrop-filter:blur(4px);color:var(--paper);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;padding:6px 12px;border-radius:2px}
  @media(max-width:680px){.ba-grid{grid-template-columns:1fr}}
  /* click-to-enlarge cursor hint for 3D design images */
  #design3d .dcard,#design3d .ba-card{cursor:zoom-in}

  /* ---------- CONTACTS ---------- */
  .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,80px);margin-top:50px;align-items:start}
  .cinfo-item{padding:24px 0;border-bottom:1px solid var(--line)}
  .cinfo-item:first-child{padding-top:0}
  .cinfo-item .clabel{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);margin-bottom:8px}
  .cinfo-item .cval{font-family:var(--display);font-size:1.5rem;color:var(--ink)}
  .cinfo-item .cval a{color:inherit;text-decoration:none;transition:color .3s}
  .cinfo-item .cval a:hover{color:var(--clay)}
  .cinfo-item .csub{font-size:.9rem;color:#6f7a66;margin-top:4px}
  .socials{display:flex;gap:12px;margin-top:30px}
  .socials a{
    width:46px;height:46px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;
    color:var(--ink);text-decoration:none;font-size:.78rem;letter-spacing:.04em;transition:.3s;
  }
  .socials a:hover{background:var(--clay-deep);color:#fff;border-color:var(--clay-deep)}

  .form-card{background:var(--cream);border:1px solid var(--line);border-radius:4px;padding:clamp(28px,4vw,48px)}
  .form-card h3{font-size:1.9rem;margin-bottom:8px}
  .form-card .fsub{font-size:.92rem;color:#6f7a66;margin-bottom:30px}
  .field{margin-bottom:22px}
  .field label{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-bottom:9px;font-weight:600}
  .field input,.field textarea,.field select{
    width:100%;padding:14px 16px;border:1px solid var(--line);background:var(--paper);border-radius:2px;
    font-family:var(--body);font-size:1rem;color:var(--ink);transition:.3s;
  }
  .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--clay);box-shadow:0 0 0 3px rgba(74,107,84,.14)}
  .field textarea{resize:vertical;min-height:110px}
  .form-msg{display:none;margin-top:18px;padding:16px;background:rgba(74,107,84,.12);border-left:3px solid var(--clay);font-size:.92rem;color:var(--clay-deep)}
  .form-msg.show{display:block;animation:fade .4s ease both}

  /* ---------- CTA BAND ---------- */
  .cta-band{background:linear-gradient(135deg,var(--clay-deep),#3f6049);color:#fff;text-align:center}
  .cta-band h2{font-size:clamp(2rem,5vw,3.6rem);color:#fff;margin-bottom:18px}
  .cta-band p{max-width:48ch;margin:0 auto 34px;color:rgba(255,255,255,.9)}
  .cta-band .btn-light{background:#fff;color:var(--clay-deep)}
  .cta-band .btn-light:hover{background:#27402f;color:#fff;transform:translateY(-2px)}

  /* ---------- FOOTER ---------- */
  footer{background:var(--cream-deep);color:#4f5f4a;padding:70px clamp(20px,5vw,72px) 36px}
  .foot-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:38px;padding-bottom:48px;border-bottom:1px solid var(--line)}
  .foot-grid .brand .name{color:var(--ink)}
  .foot-col h4{font-family:var(--body);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--clay-deep);margin-bottom:20px;font-weight:600}
  .foot-col a{display:block;color:#4f5f4a;text-decoration:none;margin-bottom:11px;font-size:.92rem;cursor:pointer;transition:color .3s}
  .foot-col a:hover{color:var(--clay-deep)}
  .foot-about{font-size:.92rem;margin:18px 0 0;max-width:34ch}
  .foot-bottom{max-width:1180px;margin:28px auto 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.8rem;letter-spacing:.04em}

  /* ---------- TILE TEXTURES (CSS placeholders) ---------- */
  .t-marble{background:
    radial-gradient(ellipse 120% 80% at 30% 20%,rgba(255,255,255,.5),transparent 50%),
    linear-gradient(115deg,#e8e4dd 0%,#d8d2c8 40%,#efeae2 60%,#cfc8bd 100%);
    position:relative}
  .t-marble::after{content:"";position:absolute;inset:0;opacity:.4;
    background:
      linear-gradient(72deg,transparent 48%,rgba(120,110,98,.4) 49%,transparent 50%),
      linear-gradient(88deg,transparent 60%,rgba(120,110,98,.3) 61%,transparent 62%),
      linear-gradient(100deg,transparent 30%,rgba(140,130,118,.25) 31%,transparent 33%)}
  .t-herring{background:#9c6b3f;position:relative;overflow:hidden}
  .t-herring::before{content:"";position:absolute;inset:-10%;
    background:
      repeating-linear-gradient(45deg,#b07c4a 0 18px,#a06f40 18px 36px),
      repeating-linear-gradient(-45deg,rgba(0,0,0,.08) 0 18px,transparent 18px 36px);
    background-size:51px 51px}
  .t-terra{background:#c0703f;position:relative;overflow:hidden}
  .t-terra::before{content:"";position:absolute;inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.08) 2px,transparent 2px),
      linear-gradient(90deg,rgba(0,0,0,.12) 2px,transparent 2px);
    background-size:46px 40px;background-position:center}
  .t-terra::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 40% 30%,rgba(255,200,150,.18),transparent 60%)}
  .t-cement{background:#2c3a3e;position:relative;overflow:hidden}
  .t-cement::before{content:"";position:absolute;inset:0;
    background:
      repeating-conic-gradient(from 0deg at 50% 50%,#e9e2d4 0deg 90deg,#2c3a3e 90deg 180deg);
    background-size:64px 64px;opacity:.92}
  .t-porcelain{background:linear-gradient(135deg,#3a3531,#22201d);position:relative;overflow:hidden}
  .t-porcelain::before{content:"";position:absolute;inset:0;
    background:
      radial-gradient(ellipse 70% 50% at 70% 30%,rgba(178,146,91,.35),transparent 55%),
      linear-gradient(60deg,transparent 47%,rgba(178,146,91,.4) 48%,transparent 50%)}
  .t-porcelain::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),
               linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:90px 90px}
  .t-mosaic{background:#1f5d63;position:relative;overflow:hidden}
  .t-mosaic::before{content:"";position:absolute;inset:0;
    background-image:radial-gradient(circle at center,#2e8a8f 38%,transparent 40%);
    background-size:26px 26px;background-position:0 0}
  .t-mosaic::after{content:"";position:absolute;inset:0;
    background-image:radial-gradient(circle at center,#b2925b 30%,transparent 32%);
    background-size:26px 26px;background-position:13px 13px;opacity:.7}
  .t-wood{background:#7a4f2c;position:relative;overflow:hidden}
  .t-wood::before{content:"";position:absolute;inset:0;
    background:repeating-linear-gradient(90deg,#8a5a32 0 70px,#7a4f2c 70px 140px),
              repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 9px)}

  /* ---------- RESPONSIVE ---------- */
  @media(max-width:920px){
    .hero-grid,.split,.contact-grid{grid-template-columns:1fr}
    .hero-visual,.about-art{height:300px}
    .feat-grid{grid-template-columns:repeat(2,1fr)}
    .steps{grid-template-columns:repeat(2,1fr)}
    .gallery-grid{grid-template-columns:repeat(2,1fr)}
    .foot-grid{grid-template-columns:1fr 1fr}
  }
  @media(max-width:680px){
    nav{
      position:fixed;top:78px;right:0;left:0;flex-direction:column;align-items:flex-start;gap:0;
      background:rgba(47,74,57,.98);border-bottom:1px solid rgba(246,241,231,.14);padding:8px clamp(20px,5vw,72px) 20px;
      transform:translateY(-150%);transition:transform .4s ease;box-shadow:var(--shadow);
    }
    nav.open{transform:translateY(0)}
    nav a{width:100%;padding:14px 0;border-bottom:1px solid rgba(246,241,231,.14)}
    nav a.nav-cta{margin-top:14px;text-align:center;justify-content:center}
    .burger{display:flex}
    .feat-grid,.gallery-grid{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr}
    .price-row{grid-template-columns:1fr auto;gap:14px}
    .price-row .pnum{display:none}
    .foot-grid{grid-template-columns:1fr}
  }

  /* ---------- COMPACT GALLERY GRID ---------- */
  .proj-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 38px;margin-top:34px;align-items:start}
  .proj h3{margin-top:0 !important;font-size:clamp(1.15rem,1.9vw,1.5rem) !important}
  .proj > p{font-size:.9rem !important;line-height:1.5;margin-top:8px !important;max-width:none !important}
  .proj .carousel{max-width:100% !important;margin:16px auto 0 !important;aspect-ratio:3/4 !important}
  .proj .ccap{padding:14px 16px}
  .proj .cgtitle{font-size:.95rem}
  .proj .gallery-note{font-size:.78rem;margin-top:10px}
  @media(max-width:760px){ .proj-grid{grid-template-columns:1fr;gap:36px} }

  /* --- click-to-call additions --- */
  .nav-call{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;letter-spacing:.04em;color:var(--paper);
    text-decoration:none;font-weight:600;border:1px solid rgba(246,241,231,.42);padding:9px 16px;border-radius:2px;
    transition:background .3s ease}
  .nav-call svg{width:15px;height:15px}
  .nav-call::after{display:none}
  .nav-call:hover{background:rgba(246,241,231,.12);color:var(--paper)}
  .call-fab{position:fixed;right:18px;bottom:18px;z-index:1200;display:none;align-items:center;justify-content:center;
    width:60px;height:60px;border-radius:50%;background:var(--clay-deep);color:#fff;text-decoration:none;
    box-shadow:0 12px 30px -8px rgba(39,64,47,.65);animation:fabPulse 2.4s ease-out infinite}
  .call-fab svg{width:26px;height:26px}
  @keyframes fabPulse{0%{box-shadow:0 12px 30px -8px rgba(39,64,47,.65),0 0 0 0 rgba(74,107,84,.5)}
    70%{box-shadow:0 12px 30px -8px rgba(39,64,47,.65),0 0 0 16px rgba(74,107,84,0)}
    100%{box-shadow:0 12px 30px -8px rgba(39,64,47,.65),0 0 0 0 rgba(74,107,84,0)}}
  @media(max-width:860px){.call-fab{display:inline-flex}}
  @media(prefers-reduced-motion:reduce){.call-fab{animation:none}}

  /* --- gallery filter --- */
  .gfilter{display:flex;flex-wrap:wrap;gap:10px;margin:38px 0 6px}
  .gf{font-family:var(--body);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
    color:var(--clay-deep);background:transparent;border:1px solid var(--line);padding:10px 18px;border-radius:2px;
    cursor:pointer;transition:.25s ease}
  .gf:hover{border-color:var(--clay)}
  .gf.active{background:var(--clay-deep);color:#fff;border-color:var(--clay-deep)}
  .proj.hide{display:none}
  /* --- trust strip --- */
  .trust-strip{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .trust-wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;padding-top:22px;padding-bottom:22px}
  .trust-rating{display:flex;align-items:center;gap:12px;font-size:.95rem;color:var(--ink)}
  .trust-rating .stars{color:#c8a24a;letter-spacing:2px;font-size:1.1rem}
  .trust-rating strong{font-family:var(--display);font-size:1.35rem;color:var(--clay-deep)}
  .trust-rating em{font-style:normal;color:var(--stone)}
  .trust-chips{display:flex;flex-wrap:wrap;gap:10px}
  .trust-chips span{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--clay-deep);
    border:1px solid var(--line);padding:8px 14px;border-radius:2px;background:var(--paper)}
  /* --- testimonials --- */
  .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
  .tcard{background:#fff;border:1px solid var(--line);padding:28px;border-radius:4px;box-shadow:var(--shadow)}
  .tstars{color:#c8a24a;letter-spacing:2px;margin-bottom:12px}
  .tcard p{font-style:italic;color:var(--ink-soft)}
  .tname{margin-top:16px;font-weight:600;color:var(--clay-deep);font-size:.9rem}
  .reviews-note{margin-top:20px;color:var(--stone);font-size:.8rem;font-style:italic}
  @media(max-width:860px){.tgrid{grid-template-columns:1fr}}
  /* --- Google review cards --- */
  .rev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:26px}
  .rcard{display:flex;flex-direction:column}
  .rhead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
  .ravatar{width:44px;height:44px;border-radius:50%;background:var(--clay-deep);color:var(--paper);display:grid;place-items:center;font-family:var(--display);font-size:1.3rem;font-weight:700;flex:none}
  .rname-wrap{min-width:0}
  .rcard .tname{margin-top:0}
  .rmeta{display:flex;align-items:center;gap:6px;font-size:.72rem;letter-spacing:.03em;color:var(--stone);margin-top:3px}
  .rcard p{flex:1;margin-top:2px}
  @media(max-width:760px){.rev-grid{grid-template-columns:1fr}}
  /* --- before/after toggle on gallery carousels --- */
  .cba{position:absolute;top:14px;left:14px;z-index:7;background:rgba(47,74,57,.92);color:var(--paper);border:none;
    font-family:var(--body);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
    padding:8px 14px;border-radius:2px;cursor:pointer;backdrop-filter:blur(6px);transition:.25s ease}
  .cba:hover{background:var(--clay-deep)}
  /* --- reveal on scroll --- */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

  /* --- value band --- */
  .value-band{background:linear-gradient(155deg,var(--clay-deep),#243a2c);color:var(--paper);position:relative;overflow:hidden}
  .value-band::after{content:"";position:absolute;width:52vw;height:52vw;max-width:560px;max-height:560px;border-radius:50%;
    background:radial-gradient(circle,rgba(124,139,118,.28),transparent 65%);top:-16%;right:-8%;z-index:1}
  .value-band .wrap{position:relative;z-index:2}
  .value-band .kicker{color:rgba(246,241,231,.82)}
  .value-band .kicker::before{background:rgba(246,241,231,.6)}
  .value-band h2{font-size:clamp(2.1rem,5.2vw,3.7rem);max-width:20ch;color:#fff}
  .value-band h2 em{font-style:italic;color:#cdd8c6;font-weight:300}
  .value-band p{margin-top:22px;max-width:58ch;font-size:1.08rem;line-height:1.7;color:rgba(246,241,231,.85);font-weight:300}
  .value-band .btn{margin-top:32px}

  /* --- owner / meet vova --- */
  .owner-photo{position:relative;border-radius:5px;overflow:hidden;box-shadow:var(--shadow);border:5px solid var(--clay-deep);min-height:400px;background:var(--cream)}
  .owner-photo img{width:100%;height:100%;min-height:400px;object-fit:cover;display:block}
  .owner-mono{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:linear-gradient(155deg,var(--clay-deep),#243a2c)}
  .owner-mono span{font-family:var(--display);font-size:7rem;color:rgba(246,241,231,.92)}
  /* --- messenger fab --- */
  .msgr-fab{position:fixed;right:18px;bottom:88px;z-index:1200;display:none;align-items:center;justify-content:center;
    width:60px;height:60px;border-radius:50%;background:#0a7cff;color:#fff;text-decoration:none;box-shadow:0 12px 30px -8px rgba(10,60,120,.6)}
  .msgr-fab svg{width:28px;height:28px}
  @media(max-width:860px){.msgr-fab{display:inline-flex}}

  /* ============================================================
     CONVERSION UPGRADES — hero rating, single CTA, mobile order,
     sticky call bar. Everything below is additive; delete this
     block to revert to the previous layout.
     ============================================================ */

  /* --- Google rating row under the subheading --- */
  .hero-rating{display:inline-flex;align-items:center;gap:9px;margin:-14px 0 30px;text-decoration:none;
    flex-wrap:wrap;line-height:1;color:var(--ink)}
  .hero-rating .stars{color:#c8a24a;letter-spacing:2px;font-size:1.05rem}
  .hero-rating strong{font-family:var(--display);font-size:1.3rem;color:var(--clay-deep);font-weight:700}
  .hero-rating em{font-style:normal;font-size:.86rem;color:var(--stone)}
  .hero-rating:hover em{color:var(--clay-deep)}

  /* --- one dominant CTA, secondary demoted to a text link --- */
  .hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
  .hero-link{font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
    color:var(--clay-deep);cursor:pointer;text-decoration:none;border-bottom:1px solid var(--clay);padding-bottom:3px}
  .hero-link:hover{color:var(--ink)}
  .hero-reply{font-size:.82rem;color:var(--stone);font-style:italic;flex-basis:100%}

  /* --- caption under the before/after --- */
  .hero-cap{position:absolute;left:0;right:0;bottom:0;z-index:7;text-align:center;
    background:linear-gradient(to top,rgba(27,33,26,.78),transparent);color:var(--paper);
    font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;padding:22px 10px 9px;pointer-events:none}

  /* --- compact call chip in the mobile header --- */
  .hdr-call{display:none;align-items:center;gap:7px;margin-left:auto;margin-right:14px;
    background:var(--paper);color:var(--clay-deep);text-decoration:none;font-weight:700;
    font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;padding:9px 14px;border-radius:2px}
  .hdr-call svg{width:14px;height:14px}

  /* ---------- TABLET + MOBILE: reorder the hero ---------- */
  @media(max-width:920px){
    .hero-grid{display:flex;flex-direction:column;gap:0;align-items:stretch}
    .hero-col{display:contents}
    .hero-col h1{order:1}
    .hero-col > p{order:2}
    .hero-rating{order:3}
    .hero-visual{order:4;margin-bottom:30px;width:100%;align-self:stretch;
      max-width:560px;margin-left:auto;margin-right:auto}
    .hero-actions{order:5}
    .hero-stats{order:6}
  }

  @media(max-width:680px){
    /* headline: 2 lines instead of 4 */
    .hero h1{font-size:1.92rem;line-height:1.12}
    .hero p{margin:18px 0 24px;font-size:1rem;max-width:none}
    .hero .wrap{padding-top:26px;padding-bottom:40px}
    .hero{min-height:0}

    .hero-rating{margin:0 0 20px}
    .hero-rating strong{font-size:1.15rem}
    .hero-rating em{font-size:.8rem}

    /* the proof image sits above the fold, short and wide */
    .hero-visual{height:auto;aspect-ratio:16/9;max-height:212px;border-width:3px;margin-bottom:24px}
    .hero-cap{font-size:.6rem;padding:18px 8px 7px}

    /* full-width primary button, secondary demoted */
    .hero-actions{gap:14px}
    .hero-actions .btn{width:100%;justify-content:center}
    .hero-link{flex:1}
    .hero-reply{flex-basis:auto;text-align:center;width:100%;margin-top:-4px}

    /* trust stats: one compact row instead of three screens */
    .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:26px}
    .hero-stats div{background:rgba(255,255,255,.55);border:1px solid var(--line);
      border-radius:3px;padding:10px 6px;text-align:center}
    .hero-stats div span{font-size:1.02rem;line-height:1.15}
    .hero-stats div small{font-size:.58rem;letter-spacing:.02em;display:block;margin-top:4px;line-height:1.35}

    /* Drag works on phones too: touch-action pan-y lets the browser keep
       vertical scrolling while horizontal gestures reach the slider. */
    .ba{touch-action:pan-y}
    .hero-visual .ba-handle{width:40px;height:40px}
    .hero-visual .ba-handle svg{width:17px;height:17px}
    .hero-visual .ba-line{width:2px;opacity:.9}
    .ba-tag{top:10px;font-size:.58rem;padding:5px 9px}
  }

  /* --- "drag to compare" hint, hidden after the first interaction --- */
  .ba-hint{position:absolute;left:50%;bottom:56px;transform:translateX(-50%);
    z-index:5;background:rgba(27,33,26,.72);color:var(--paper);
    font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
    padding:7px 14px;border-radius:20px;pointer-events:none;
    transition:opacity .4s ease;white-space:nowrap}
  .ba.touched .ba-hint{opacity:0}
  @media(max-width:680px){
    .ba-hint{top:auto;bottom:40px;left:50%}
  }

  /* ---------- STICKY CALL BAR (replaces the round call button) ---------- */
  .call-bar{position:fixed;left:0;right:0;bottom:0;z-index:1300;display:none;align-items:center;
    justify-content:center;gap:10px;background:var(--clay-deep);color:#fff;text-decoration:none;
    font-family:var(--body);font-weight:700;font-size:.92rem;letter-spacing:.05em;
    padding:15px 16px;padding-bottom:calc(15px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 24px -10px rgba(39,64,47,.55)}
  .call-bar svg{width:19px;height:19px;flex:none}
  .call-bar small{display:block;font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
    font-weight:600;opacity:.72;margin-top:2px}
  .call-bar span{text-align:left}

  @media(max-width:860px){
    .call-bar{display:flex}
    .hdr-call{display:inline-flex}
    .call-fab{display:none}                 /* round call button retired */
    .msgr-fab{width:46px;height:46px;right:14px;bottom:88px;opacity:.9;background:var(--clay-deep)}
    .msgr-fab svg{width:22px;height:22px}
    body{padding-bottom:74px}               /* room for the sticky bar */
  }
  @media(max-width:680px){
    header{padding-top:14px;padding-bottom:14px}
    .brand .name{font-size:1.22rem}
    .brand .mark{width:34px;height:34px}
    nav{top:68px}

    /* keep the tagline on one line instead of breaking after the dot */
    .brand .name small{letter-spacing:.16em;white-space:nowrap;font-size:.47rem}
  }

  /* The sticky call bar is the contact path on mobile. The floating chat
     bubble sits on top of the hero links, so it is off by default.
     To bring it back, delete the two lines below. */
  @media(max-width:860px){
    .msgr-fab{display:none}
  }


/* ============================================================
   6. ЛОКАЛЬНІ ЛЕНДІНГИ  —  body.lp
   tile-installer-victoria / saanich / langford / oak-bay,
   flooring-installation-victoria

   Ці сторінки мали власну копію токенів і власну мову форми:
   кнопки-пігулки radius 50px проти квадратних 2px на решті
   сайту. Тут вони приведені до однієї мови; специфічність
   body.lp перекриває базові правила оболонки.
   ============================================================ */

body.lp{line-height:1.7}

/* оболонка: світлий липкий хедер замість темного фіксованого */
body.lp main{padding-top:0}
body.lp header.site{
  position:sticky;top:0;z-index:50;
  display:block;padding:0;
  background:rgba(246,241,231,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
body.lp header.site .bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s-3) var(--s-5);max-width:1180px;margin:0 auto;
}
body.lp .brand{color:var(--ink)}
body.lp .brand .mark{color:var(--clay-deep)}
body.lp .brand .name{color:var(--ink)}
body.lp .brand .name small{color:var(--stone);font-size:.6rem}

/* телефон у хедері: у темній оболонці він схований, тут — головний елемент */
body.lp .hdr-call{
  display:inline-flex;align-items:center;gap:var(--s-2);
  margin:0;background:transparent;color:var(--clay-deep);
  font-family:var(--ui);font-weight:600;font-size:.95rem;
  letter-spacing:0;text-transform:none;
  border:1px solid var(--line);
  padding:var(--s-2) var(--s-4);border-radius:var(--r-sm);
}
body.lp .hdr-call:hover{background:var(--clay-deep);color:var(--paper);border-color:var(--clay-deep)}
body.lp .hdr-call svg{width:16px;height:16px}

/* герой лендінга — без повноекранної висоти й градієнта головної */
body.lp .hero{
  display:block;min-height:0;background:none;overflow:visible;
  padding:clamp(54px,9vw,104px) 0 clamp(40px,6vw,64px);
}
body.lp .hero h1{font-size:clamp(2.5rem,6.4vw,4.6rem);max-width:16ch}
body.lp .hero p.lead{
  font-size:clamp(1.05rem,2vw,1.25rem);color:var(--ink-soft);
  max-width:60ch;margin:22px 0 30px;
}
body.lp .cta-row{display:flex;flex-wrap:wrap;gap:var(--s-3)}

body.lp .trust{
  display:flex;flex-wrap:wrap;gap:var(--s-5);align-items:center;
  margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line);
}
body.lp .trust .stars{color:var(--gold);letter-spacing:2px;font-size:1.05rem}
body.lp .trust b{color:var(--clay-deep)}
body.lp .trust a{color:var(--clay-deep);font-weight:600}

body.lp .sect{padding:clamp(40px,6vw,70px) 0}
body.lp .sect h2{font-size:clamp(1.9rem,4.2vw,2.9rem);max-width:20ch;margin-bottom:var(--s-2)}
body.lp .sect p.intro{color:var(--ink-soft);max-width:64ch;margin-top:var(--s-3);font-size:1.04rem}

body.lp .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);margin-top:var(--s-6)}
body.lp .card{
  background:var(--cream);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--sh-1);
}
body.lp .card h3{font-size:1.45rem;margin-bottom:var(--s-2)}
body.lp .card p{color:var(--ink-soft);font-size:.96rem}

body.lp .gal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);margin-top:var(--s-6)}
body.lp .gal a{
  display:block;aspect-ratio:4/5;overflow:hidden;
  border-radius:var(--r-md);border:1px solid var(--line);box-shadow:var(--sh-1);
}
body.lp .gal img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--t-slow) var(--e-out);
}
body.lp .gal a:hover img{transform:scale(1.04)}

/* чіпи — та сама форма, що .trust-chips на решті сайту */
body.lp .chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}
body.lp .chip{
  font-family:var(--ui);font-size:.72rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--clay-deep);
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);
}

body.lp .band{
  background:var(--clay-deep);color:var(--paper);
  border-radius:var(--r-lg);padding:clamp(30px,5vw,52px);
  margin:clamp(40px,6vw,64px) 0;text-align:center;
}
body.lp .band h2{color:var(--paper);font-size:clamp(1.8rem,4vw,2.7rem);max-width:22ch;margin:0 auto var(--s-3)}
body.lp .band p{color:rgba(246,241,231,.85);max-width:48ch;margin:0 auto var(--s-5)}

/* ромб-маркер — відсилання до укладання плитки під 45° */
body.lp .areas{columns:2;column-gap:40px;margin-top:var(--s-5);max-width:640px}
body.lp .areas li{
  list-style:none;padding:7px 0 7px 24px;position:relative;
  color:var(--ink-soft);break-inside:avoid;
}
body.lp .areas li::before{
  content:"";position:absolute;left:0;top:15px;width:9px;height:9px;
  border:1.5px solid var(--clay);transform:rotate(45deg);
}

body.lp footer.site{
  background:var(--cream);border-top:1px solid var(--line);
  margin-top:var(--s-6);padding:54px 0 30px;
}
body.lp footer.site .cols{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;
  padding-bottom:40px;border-bottom:1px solid var(--line);
}
body.lp footer.site h4{
  font-family:var(--ui);font-size:.74rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--clay-deep);margin-bottom:var(--s-4);font-weight:600;
}
body.lp footer.site a{display:block;color:#4a5946;text-decoration:none;margin-bottom:10px;font-size:.92rem}
body.lp footer.site a:hover{color:var(--clay-deep)}
body.lp footer.site .fabout{color:var(--ink-soft);font-size:.92rem;margin-top:var(--s-3);max-width:34ch}
body.lp .fbottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s-2);
  padding-top:var(--s-5);font-size:.82rem;color:var(--stone);font-family:var(--ui);
}

@media(max-width:860px){
  body.lp .grid3,body.lp .gal{grid-template-columns:1fr 1fr}
  body.lp footer.site .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  body.lp .grid3,body.lp .gal{grid-template-columns:1fr}
  body.lp .areas{columns:1}
  body.lp footer.site .cols{grid-template-columns:1fr}
  body.lp .hdr-call span.lbl{display:none}
}


/* ============================================================
   7. СТОРІНКА ПОДЯКИ  —  body.ty
   Оболонка та сама, що на головній; унікальні лише блоки нижче.
   ============================================================ */

body.ty{min-height:100vh;display:flex;flex-direction:column}
body.ty main{
  flex:1;padding-top:78px;display:flex;align-items:center;
  background:linear-gradient(160deg,var(--paper) 0%,var(--cream) 100%);
  position:relative;overflow:hidden;
}
body.ty .glow{
  position:absolute;width:60vw;height:60vw;max-width:680px;max-height:680px;
  border-radius:50%;background:radial-gradient(circle,rgba(74,107,84,.22),transparent 65%);
  top:-22%;right:-12%;z-index:0;
}
body.ty .wrap{
  max-width:920px;margin:0 auto;
  padding:clamp(60px,9vw,120px) clamp(20px,5vw,72px);
  position:relative;z-index:2;
}

/* печатка: єдина анімація на сторінці, спрацьовує один раз */
body.ty .seal{
  width:88px;height:88px;margin-bottom:var(--s-6);position:relative;
  border:5px solid var(--clay-deep);border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--sh-3);display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--clay),var(--clay-deep));
}
body.ty .seal::after{content:"";position:absolute;inset:5px;border:1px solid rgba(246,241,231,.55);border-radius:2px}
body.ty .seal svg{
  width:42px;height:42px;stroke:#fff;stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:32;stroke-dashoffset:32;
  animation:draw .55s var(--e-out) forwards .35s;
}
@keyframes draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){body.ty .seal svg{animation:none;stroke-dashoffset:0}}

body.ty h1{font-size:clamp(2.4rem,6vw,4.2rem)}
body.ty .lead{margin:var(--s-5) 0 0;font-size:1.15rem;color:#4a5946;max-width:46ch}
body.ty .steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);
  margin:54px 0 0;border-top:1px solid var(--line);padding-top:var(--s-2);
}
body.ty .meanwhile{
  margin-top:54px;background:var(--cream);border:1px solid var(--line);
  border-radius:var(--r-md);padding:clamp(24px,4vw,34px);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-5);flex-wrap:wrap;
}
body.ty .mw-label{
  font-family:var(--ui);font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--stone);margin-bottom:var(--s-2);
}
body.ty .mw-phone{font-family:var(--display);font-size:2rem;color:var(--ink);text-decoration:none}
body.ty .mw-phone:hover{color:var(--clay)}
body.ty .mw-sub{font-size:.9rem;color:var(--stone);margin-top:var(--s-1)}
body.ty .actions{display:flex;gap:var(--s-3);margin-top:42px;flex-wrap:wrap}

@media(max-width:920px){
  body.ty .steps{grid-template-columns:1fr}
  body.ty .meanwhile{flex-direction:column;align-items:flex-start}
}


/* ============================================================
   8. СПІЛЬНІ МОДУЛІ, ЩО ЖИЛИ В ОКРЕМИХ СТОРІНКАХ
   ============================================================ */

/* липка смуга дзвінка — була продубльована в 6 файлах */
.call-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:1300;
  display:none;align-items:center;justify-content:center;gap:var(--s-2);
  background:var(--clay-deep);color:#fff;text-decoration:none;
  font-family:var(--ui);font-weight:700;font-size:.92rem;letter-spacing:.02em;
  padding:15px 16px;padding-bottom:calc(15px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 24px -10px rgba(39,64,47,.55);
}
.call-bar svg{width:19px;height:19px;flex:none}
.call-bar span{text-align:left}
.call-bar small{
  display:block;font-size:.63rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;opacity:.75;margin-top:2px;
}
@media(max-width:860px){
  .call-bar{display:flex}
  body:has(.call-bar){padding-bottom:74px}
}

/* FAQ — був у 5 файлах трьома різними варіантами */
.faq-item{border-top:1px solid var(--line);padding:var(--s-5) 0}
.faq-item h3{font-family:var(--display);font-size:1.18rem;font-weight:600;margin:0 0 var(--s-2)}
.faq-item p{margin:0;color:#4a5946;line-height:1.65;max-width:68ch}

/* прайс-рядки сторінки підлог */
.rates{margin-top:var(--s-6);border-top:1px solid var(--line)}
.rate{display:flex;align-items:baseline;gap:var(--s-4);padding:15px 0;border-bottom:1px solid var(--line)}
.rate .nm{flex:1 1 auto;font-weight:600;color:var(--ink)}
.rate .nm small{display:block;font-weight:400;font-size:.86rem;color:var(--stone);margin-top:2px}
.rate .pr{
  flex:0 0 auto;font-family:var(--display);font-size:1.5rem;font-weight:600;
  color:var(--clay-deep);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.rate .pr em{font-family:var(--ui);font-style:normal;font-size:.78rem;color:var(--stone);margin-left:var(--s-1)}
.note{margin-top:var(--s-4);font-size:.9rem;color:var(--stone);max-width:64ch}
@media(max-width:560px){.rate{gap:var(--s-3)}.rate .pr{font-size:1.25rem}}

/* таблиця розцінок на сторінці послуг */
.ptable{width:100%;border-collapse:collapse;margin:var(--s-5) 0 var(--s-2);font-size:15.5px}
.ptable caption{
  text-align:left;font-family:var(--ui);font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:600;color:var(--clay-deep);padding-bottom:var(--s-3);
}
.ptable th,.ptable td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.ptable thead th{
  font-family:var(--ui);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  color:#4a5946;font-weight:600;border-bottom:1.5px solid rgba(47,74,57,.3);
}
.ptable td.rate{white-space:nowrap;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.ptable td small{display:block;color:var(--stone);font-weight:400;font-size:13px;margin-top:3px}
.ptable tbody tr:hover{background:rgba(47,74,57,.035)}
.pnote{color:#4a5946;font-size:14.5px;line-height:1.65;max-width:68ch;margin:var(--s-3) 0 0}
@media(max-width:620px){.ptable{font-size:14.5px}.ptable th,.ptable td{padding:11px 8px}}

/* картки послуг на головній */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:var(--s-5);margin-top:var(--s-6)}
.svc-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-5) 22px;
}
.svc-card h3{font-family:var(--display);font-weight:600;font-size:1.24rem;margin:0 0 var(--s-2);color:var(--ink)}
.svc-card p{margin:0;font-size:14.7px;line-height:1.62}
.svc-card .svc-price{
  display:block;margin-top:var(--s-3);font-size:13px;font-weight:600;
  color:var(--clay-deep);font-variant-numeric:tabular-nums;
}
.svc-areas{margin-top:var(--s-6);color:#4a5946;line-height:1.8}
.svc-areas a{color:var(--clay-deep);font-weight:600}

/* калькулятор кошторису — тепер окремий файл, не srcdoc */
/* ============================================================
   9. РЕФІНІШ-ШАР
   ============================================================ */

/* ------------------------------------------------------------
   1. ШКАЛИ
   Було: 8 різних радіусів, одна тінь на всьому, 5 різних
   таймінгів, відступи 18/22/26/30/34/38/46/54px без системи.
   ------------------------------------------------------------ */
:root{
  /* Радіус — 3 значення замість 8. Розмір радіуса = розмір об'єкта. */
  --r-sm:2px;    /* кнопки, поля, чіпи */
  --r-md:4px;    /* картки, зображення */
  --r-lg:8px;    /* великі панелі */
  --r-full:999px;

  /* Тіні шарами. Одна велика розмита пляма читається як штамп;
     дві накладені (контактна + розсіяна) дають глибину. */
  --sh-1:0 1px 2px rgba(39,64,47,.06), 0 2px 6px -2px rgba(39,64,47,.08);
  --sh-2:0 2px 4px rgba(39,64,47,.05), 0 8px 20px -8px rgba(39,64,47,.16);
  --sh-3:0 4px 8px rgba(39,64,47,.06), 0 20px 44px -16px rgba(39,64,47,.24);
  --sh-lift:0 4px 10px rgba(39,64,47,.07), 0 26px 52px -18px rgba(39,64,47,.28);

  /* Простір — шкала з кроком, а не довільні числа */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  /* Рух. `ease` — дефолт браузера, читається млявим.
     Вхід — швидкий старт, м'яка зупинка. */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-in-out:cubic-bezier(.65,0,.35,1);
  --t-fast:140ms;
  --t-base:220ms;
  --t-slow:420ms;

  /* Контраст. --stone #6f7a66 дає 4.01:1 на paper і 3.50:1 на cream —
     нижче порогу WCAG AA (4.5:1) для дрібного тексту. */
  --stone:#5e6a56;        /* 5.15:1 на paper, 4.52:1 на cream */
  --gold:#a8801f;         /* зірки: було 2.41:1 на білому, стало 4.54:1 */

  --focus:#1f6f4a;
}


/* ------------------------------------------------------------
   2. ТИПОГРАФІКА
   Cormorant + Lora — два серифи з близьким характером. Різниця
   між ними слабка, тому ієрархія тримається лише на кеглі.
   Додаю третю роль: гротеск для інтерфейсної дрібноти —
   навігація, кнопки, лейбли, ціни, підписи.

   Треба додати в <head> кожної сторінки, у той самий link:
   ...&family=Inter:wght@400;500;600;700&display=swap
   ------------------------------------------------------------ */
:root{
  --ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}

nav a, .nav-cta, .nav-call, .hdr-call,
.btn, .gf, .kicker, .brand .name small,
.field label, .trust-chips span,
.hero-stats div small, .hero-link, .hero-reply,
.cinfo-item .clabel, .foot-col h4,
.gcard .gtag, .dcard .dtag, .carousel .ccap .cgtag,
.ba-tag, .dbadge, .ba-badge, .cba, .lb-cap .lb-tag,
.svc-card .svc-price, .price-row .pprice small,
.rmeta, .tname, .foot-bottom{
  font-family:var(--ui);
}

/* Курсивний Lora у відгуках зникає — гротеск не має курсивного
   характеру, тому лапки беруть на себе роль маркера */
.tcard p, .rcard p{font-style:normal}
.tcard p::before{content:"\201C";margin-right:1px}
.tcard p::after{content:"\201D"}

/* Трекінг .34em — це рівень плаката, а не інтерфейсу.
   На дрібному кеглі слово розсипається на літери. */
.kicker{letter-spacing:.16em;font-size:.7rem;font-weight:600}
.kicker::before{width:22px}
.brand .name small{letter-spacing:.14em}
.cinfo-item .clabel,.foot-col h4,.field label{letter-spacing:.09em}
.gcard .gtag,.dcard .dtag,.carousel .ccap .cgtag,.lb-cap .lb-tag{letter-spacing:.12em}
.hero-stats div small{letter-spacing:.08em}
.trust-chips span,.dbadge,.ba-badge,.cba,.ba-tag{letter-spacing:.06em}
nav a{letter-spacing:.02em;text-transform:none;font-size:.875rem;font-weight:500}
.btn{letter-spacing:.02em;text-transform:none;font-size:.9rem;font-weight:600}
.gf{letter-spacing:.02em;text-transform:none;font-weight:500}

/* Цифри у прайсі й статистиці мають вирівнюватись по колонках */
.price-row .pprice,.hero-stats div span,.trust-rating strong,
.hero-rating strong,.step .snum,.svc-card .svc-price{
  font-variant-numeric:tabular-nums;
}

/* Довжина рядка. Сериф тримає трохи більше, але 74ch забагато. */
.svc-areas{max-width:66ch}
.value-band p{max-width:54ch}
.cta-band p{max-width:44ch}

/* Cormorant на великому кеглі має від'ємний трекінг,
   на дрібному — ні, інакше злипається */
h1{letter-spacing:-.02em}
h2{letter-spacing:-.015em}
h3{letter-spacing:0}


/* ------------------------------------------------------------
   3. ФОКУС
   Зараз на сайті немає жодного focus-стилю. Клавіатурна
   навігація й скрінрідери працюють наосліп.
   ------------------------------------------------------------ */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible{outline-offset:0}
header a:focus-visible,.nav-cta:focus-visible,.hdr-call:focus-visible{
  outline-color:var(--paper);
}
.lb-close:focus-visible,.lb-arr:focus-visible,.carousel .carr:focus-visible{
  outline-color:var(--paper);outline-offset:2px;
}
/* Мишею — без рамки */
:focus:not(:focus-visible){outline:none}

/* Пропуск до контенту. Додати першим елементом у <body>:
   <a class="skip" href="#main">Skip to content</a>
   і id="main" на <main> */
.skip{
  position:absolute;left:var(--s-4);top:var(--s-4);z-index:2000;
  transform:translateY(-200%);
  background:var(--paper);color:var(--clay-deep);
  font-family:var(--ui);font-size:.875rem;font-weight:600;
  padding:var(--s-3) var(--s-5);border-radius:var(--r-sm);
  box-shadow:var(--sh-2);text-decoration:none;
  transition:transform var(--t-base) var(--e-out);
}
.skip:focus{transform:none}


/* ------------------------------------------------------------
   4. РАДІУСИ — узгодження
   ------------------------------------------------------------ */
.btn,.nav-cta,.nav-call,.hdr-call,.gf,.trust-chips span,
.dbadge,.ba-badge,.cba,.field input,.field textarea,.field select{
  border-radius:var(--r-sm);
}
.gcard,.dcard,.ba-card,.carousel,.hero-visual,.about-art,
.owner-photo,.tcard,.rcard,.form-card,.lb img{
  border-radius:var(--r-md);
}
.svc-card,.ba{border-radius:var(--r-lg)}
.ba-tag,.carousel .ccount,.lb-count{border-radius:var(--r-full)}


/* ------------------------------------------------------------
   5. ТІНІ — за вагою елемента, не одна на всіх
   ------------------------------------------------------------ */
.svc-card,.tcard,.rcard{box-shadow:var(--sh-1)}
.gcard,.dcard,.ba-card,.form-card{box-shadow:var(--sh-2)}
.hero-visual,.about-art,.owner-photo,.carousel,.ba{box-shadow:var(--sh-3)}

.svc-card:hover{box-shadow:var(--sh-2)}

/* Лайтбокс лишається найглибшим шаром */
.lb img{box-shadow:0 8px 20px rgba(0,0,0,.4),0 40px 100px -20px rgba(0,0,0,.7)}


/* ------------------------------------------------------------
   6. РУХ
   ------------------------------------------------------------ */
.btn,.nav-cta,.nav-call,.hdr-call,.gf,.svc-card,
.socials a,.foot-col a,.cinfo-item .cval a,
.carousel .carr,.lb-close,.lb-arr,.cba{
  transition:background-color var(--t-base) var(--e-out),
             color var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out),
             box-shadow var(--t-base) var(--e-out),
             transform var(--t-fast) var(--e-out);
}
.btn .arrow{transition:transform var(--t-base) var(--e-out)}
nav a::after{transition:width var(--t-base) var(--e-out)}
.gcard .tile-art,.dcard .tile-art{
  transition:transform var(--t-slow) var(--e-out);
}
.gcard:hover .tile-art{transform:scale(1.04)}
.dcard:hover .tile-art{transform:scale(1.03)}

/* .price-row:hover міняв padding-left — це reflow всього рядка
   на кожному наведенні. Той самий ефект без перерахунку layout. */
.price-row{
  transition:background-color var(--t-base) var(--e-out);
  position:relative;
}
.price-row:hover{padding-left:8px;background:var(--cream)}
.price-row .pinfo{transition:transform var(--t-base) var(--e-out)}
.price-row:hover .pinfo{transform:translateX(10px)}

/* Кнопки: підйом на -2px читається як стрибок. -1px достатньо,
   і тінь має підростати разом із ним, інакше об'єкт «летить». */
.btn-primary:hover,.cta-band .btn-light:hover{
  transform:translateY(-1px);
  box-shadow:var(--sh-lift);
}
.btn-primary:active,.cta-band .btn-light:active{
  transform:translateY(0);
  box-shadow:var(--sh-1);
  transition-duration:60ms;
}
.svc-card:hover{transform:translateY(-1px)}

/* Reveal на кожній секції — найпомітніша ознака шаблону.
   Лишаю механізм, але роблю рух коротким і майже непомітним:
   він має підказувати, а не анонсувати себе. */
.reveal{
  opacity:0;transform:translateY(10px);
  transition:opacity var(--t-slow) var(--e-out),
             transform var(--t-slow) var(--e-out);
}
.reveal.in{opacity:1;transform:none}

/* Пульсуючий FAB б'є в око на кожній сторінці постійно.
   Три імпульси й тиша. */
.call-fab{animation:fabPulse 2.4s ease-out 3}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}


/* ------------------------------------------------------------
   7. КОНТРАСТ — застосування виправлених значень
   ------------------------------------------------------------ */
.trust-rating .stars,.tstars,.hero-rating .stars{color:var(--gold)}
.price-row .pinfo p,.price-note,.gallery-note,
.cinfo-item .csub,.form-card .fsub,.reviews-note{color:var(--stone)}
.feat p,.step p,.svc-card p,.split p{color:#4a5946}


/* ------------------------------------------------------------
   8. ДРІБНИЦІ, ЯКІ ВИДНО ЛИШЕ РАЗОМ
   ------------------------------------------------------------ */

/* Зображення не мають розтягуватись, поки не завантажились */
img{max-width:100%;height:auto}

/* Приховати alt-текст поламаного зображення на темному фоні —
   він зараз вивалюється сирим шрифтом */
.gcard img,.dcard img,.carousel img,.ba img{color:transparent}

/* Поля форми: 16px мінімум, інакше iOS Safari зумить сторінку
   при фокусі й людина губить контекст */
.field input,.field textarea,.field select{
  font-size:16px;
  transition:border-color var(--t-base) var(--e-out),
             box-shadow var(--t-base) var(--e-out);
}

/* Ціль дотику 44px — нижня межа для пальця */
@media(max-width:680px){
  nav a{min-height:44px;display:flex;align-items:center}
  .socials a{width:44px;height:44px}
}

/* Підкреслення в тексті мають пропускати нижні виносні літер */
.svc-areas a,.split p a,.value-band p a{
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(52,80,63,.35);
  transition:text-decoration-color var(--t-base) var(--e-out);
}
.svc-areas a:hover,.split p a:hover{text-decoration-color:currentColor}

/* Сітка переваг: 1px-щілини на var(--line) дають брудний край
   на дробових DPI. Явна межа читається чистіше. */
.feat-grid{gap:0;background:transparent}
.feat{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.feat:nth-child(4n){border-right:none}
@media(max-width:920px){
  .feat:nth-child(4n){border-right:1px solid var(--line)}
  .feat:nth-child(2n){border-right:none}
}
@media(max-width:680px){.feat{border-right:none}}

/* Хедер: зменшення відступу при скролі має бути помітним,
   інакше transition на padding просто гальмує рендер */
header{transition:padding var(--t-base) var(--e-out),
                  background-color var(--t-base) var(--e-out)}

/* Зерно поверх усього тримає окремий композитний шар на
   весь екран. Заборона підказує браузеру не перемальовувати. */
body::before{will-change:auto;contain:strict}

/* overflow-x:hidden на body — заглушка, яка ламає
   position:sticky всередині. Причина зазвичай одна: */
.hero-glow,.value-band::after{max-width:100%}

/* Резервна висота калькулятора, поки не прийшла реальна */
@media(max-width:920px){}

/* ============================================================
   10. ЗАКРИТТЯ ПРОГАЛИН ПІСЛЯ ЗЛИТТЯ
   Класи, що працювали лише в межах своєї сторінки і при
   об'єднанні лишилися б без стилю.
   ============================================================ */

/* .btn-light жив тільки всередині .cta-band, а лендінги
   використовують його 10 разів на темному фоні .band */
.btn-light{background:#fff;color:var(--clay-deep)}
.btn-light:hover{background:var(--cream);color:var(--clay-deep)}
.btn-light:active{background:var(--cream-deep)}
.cta-band .btn-light:hover{background:#27402f;color:#fff}

body.lp .band .btn{border:1px solid rgba(246,241,231,.55)}
body.lp .band .btn-light{border-color:#fff}
body.lp .band .btn-ghost{background:transparent;color:var(--paper)}
body.lp .band .btn-ghost:hover{background:rgba(246,241,231,.14);color:#fff}

/* базовий footer задає color, який моя секція лендінгів не перекривала */
body.lp footer.site{color:#4a5946}

/* .btn на лендінгах мав рамку 1.5px і був єдиним варіантом;
   тепер форма спільна з рештою сайту */
body.lp .btn-ghost{border:1px solid var(--line);color:var(--clay-deep)}
body.lp .btn-ghost:hover{border-color:var(--clay-deep);background:var(--clay-deep);color:var(--paper)}

/* Сторінка подяки не має бургер-меню, тому на вузьких екранах
   пункти навігації ховаються — правило жило в її власному <style> */
@media(max-width:920px){body.ty nav .nav-link{display:none}}
@media(max-width:560px){body.ty nav .nav-cta{display:none}}

/* ============================================================
   11. МОБІЛЬНІ ВИПРАВЛЕННЯ
   ============================================================ */

/* --- 11.1 Причина «Content is wider than screen» ---
   У сітках 37 оголошень grid-template-columns з 1fr і лише одне
   з minmax(0,1fr). А 1fr — це скорочення від minmax(auto,1fr),
   тобто мінімальна ширина колонки дорівнює min-content: колонка
   фізично не може стиснутися вужче за свій вміст і розпирає
   сітку за межі екрана. Те саме з flex: у flex-елемента
   min-width за замовчуванням auto.

   overflow-x:hidden на body ховав наслідок, тому очима це
   непомітно, але PageSpeed рахує реальну ширину і репортить. */
.hero-grid > *, .split > *, .contact-grid > *,
.feat-grid > *, .steps > *, .gallery-grid > *,
.design-grid > *, .ba-grid > *, .proj-grid > *,
.tgrid > *, .rev-grid > *, .foot-grid > *,
.svc-grid > *, .price-row > *,
body.lp .grid3 > *, body.lp .gal > *,
body.lp footer.site .cols > *, body.ty .steps > *{
  min-width:0;
}
.hero-actions > *, .trust-wrap > *, .foot-bottom > *,
.cta-row > *, .chips > *, .gfilter > *,
.trust-chips > *, .socials > *, .actions > *{
  min-width:0;
}

/* Довгі нерозривні рядки — пошта, посилання, назви матеріалів —
   інакше одне слово вивалює весь блок за екран на 320px */
body{overflow-wrap:break-word}
h1,h2,h3{overflow-wrap:break-word;hyphens:auto}
.cinfo-item .cval,.cinfo-item .cval a,.mw-phone{overflow-wrap:anywhere}

/* Ціни: nowrap потрібен, щоб «$10 / sq ft» не рвалося посередині,
   але тоді комірка не має права стискатися — дозволяємо перенос
   лише на найвужчих екранах */
@media(max-width:400px){
  .price-row .pprice,.ptable td.rate{white-space:normal}
}


/* --- 11.2 Цілі дотику ---
   Мінімум 44×44px. Три елементи були менші, і всі три —
   на мобільному, де ними користуються пальцем. */

/* бургер: 26×2px смужки + відступи = 38×28px */
.burger{
  min-width:44px;min-height:44px;
  align-items:center;justify-content:center;
  padding:0;
}

/* ручка слайдера: на мобільному її зменшували до 40px */
.hero-visual .ba-handle{width:44px;height:44px}

/* телефон у хедері */
.hdr-call,body.lp .hdr-call{min-height:44px}

/* стрілки каруселі й лайтбокса */
.carousel .carr{width:44px;height:44px}
.lb-close{width:48px;height:48px}

/* посилання у футері стоять щільно — рознести по вертикалі */
@media(max-width:680px){
  .foot-col a{padding:6px 0;margin-bottom:4px}
  .gf{min-height:44px;display:inline-flex;align-items:center}
}


/* --- 11.3 Липка смуга дзвінка й безпечна зона ---
   env() повертає 0 без viewport-fit=cover у meta — його тепер
   додано на всі сторінки. */
body:has(.call-bar){
  padding-bottom:calc(64px + env(safe-area-inset-bottom,0px));
}
body:has(.call-fab){
  padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));
}
.call-fab{bottom:calc(18px + env(safe-area-inset-bottom,0px))}
.msgr-fab{bottom:calc(88px + env(safe-area-inset-bottom,0px))}

/* :has() не всюди підтримано — запасний варіант за класом сторінки */
@media(max-width:860px){
  body.lp{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
}


/* --- 11.4 Слайдер before/after ---
   touch-action:pan-y стояв лише в блоці ≤680px. На планшетах
   і великих телефонах 681–920px діяло touch-action:none —
   палець, що починав рух на зображенні, не гортав сторінку. */
.ba{touch-action:pan-y}

/* Підпис-підказка і підпис проєкту стоять один над одним
   у тому самому кутку; на вузькому екрані ховаємо підказку */
@media(max-width:400px){
  .ba-hint{display:none}
}

/* ============================================================
   12. iOS SAFARI
   Конструкції, які Safari обробляє інакше за Chrome.
   ============================================================ */

/* --- 12.1 Липка панель дзвінка: прибрати залежність від :has()
   .call-bar є на всіх 11 сторінках, а запасний варіант я написав
   лише для body.lp. На Safari без підтримки :has() (до 15.4)
   решта сторінок лишалася б без нижнього відступу, і панель
   накрила б футер. Умова не потрібна взагалі. */
@media(max-width:860px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
}

/* --- 12.2 -webkit-backdrop-filter
   Safari до 18 версії розуміє лише префіксний запис. Без нього
   напівпрозорі підкладки лишаються просто прозорими, і білий
   текст лягає на світле фото. */
header,.lb,.carousel .ccount,.ba-tag,
.dcard .dbadge,.ba-card .ba-badge,.cba,
.hero-tag,body.lp header.site{
  -webkit-backdrop-filter:blur(10px);
}
header,body.lp header.site{-webkit-backdrop-filter:blur(14px)}
.lb{-webkit-backdrop-filter:blur(8px)}

/* --- 12.3 Одиниця vh
   В iOS Safari 100vh дорівнює висоті екрана БЕЗ панелі
   інструментів, хоч панель видно. Тобто елемент завжди вищий
   за те, що реально видно. svh — це висота при показаній
   панелі; старі браузери просто проігнорують другий рядок. */
.hero{min-height:90vh;min-height:90svh}
body.ty{min-height:100vh;min-height:100svh}

/* У лайтбоксі це помітно найбільше: низ фото й підпис ховалися
   під панеллю Safari */
.lb img{max-height:86vh;max-height:82svh}
@media(max-width:600px){.lb img{max-height:80vh;max-height:74svh}}
.lb-cap{bottom:calc(24px + env(safe-area-inset-bottom,0px))}

/* --- 12.4 Роздування шрифту
   Safari сам збільшує кегль при повороті в альбомну орієнтацію,
   що ламає розраховані розміри й може дати переповнення. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* --- 12.5 Дрібне
   Інерційна прокрутка всередині лайтбокса і зняття сірого
   спалаху при тапі, який Safari малює поверх власних :active */
.lb{-webkit-overflow-scrolling:touch}
a,button{-webkit-tap-highlight-color:rgba(52,80,63,.18)}


/* ============================================================
   9. ЛІД-ФОРМИ (єдиний компонент на всіх сторінках)
   ============================================================ */

.form-err{
  display:none;margin:10px 0 0;padding:9px 12px;border-radius:6px;
  background:#fdecec;color:#8c2b2b;font-size:.86rem;line-height:1.45;
}
.form-trust{
  margin:12px 0 0;font-size:.78rem;line-height:1.5;color:var(--stone);text-align:center;
}

/* блок «копія + форма» перед футером */
.cta-form-band{padding-top:var(--s-7)}
.cfb-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.cfb-copy h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.8rem,3.8vw,2.6rem);line-height:1.12;margin:10px 0 16px;
}
.cfb-copy p{color:#50604c;line-height:1.7;max-width:52ch}
.cfb-list{list-style:none;padding:0;margin:22px 0 0}
.cfb-list li{
  position:relative;padding-left:26px;margin-bottom:11px;
  color:#3f4d3c;line-height:1.55;font-size:.95rem;
}
.cfb-list li::before{
  content:"";position:absolute;left:2px;top:.5em;width:9px;height:9px;
  border-left:2px solid var(--clay-deep);border-bottom:2px solid var(--clay-deep);
  transform:rotate(-45deg);
}
.cfb-call{
  display:inline-block;margin-top:22px;font-weight:600;color:var(--clay-deep);
  border-bottom:1px solid rgba(39,64,47,.3);padding-bottom:2px;text-decoration:none;
}
@media(max-width:860px){
  .cfb-grid{grid-template-columns:1fr;gap:30px}
}

/* коротка форма першого екрана */
.quick-form{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:20px;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 18px 46px -30px rgba(39,64,47,.55);max-width:440px;
}
.quick-form strong{
  font-family:var(--display);font-weight:600;font-size:1.3rem;line-height:1.2;color:var(--ink);
}
.qf-sub{font-size:.85rem;color:var(--stone);line-height:1.5;margin-bottom:2px}
.qf-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quick-form input,.quick-form select{
  width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:7px;
  font-family:var(--ui);font-size:.95rem;color:var(--ink);background:#fff;
}
.quick-form input:focus,.quick-form select:focus{
  outline:none;border-color:var(--clay-deep);box-shadow:0 0 0 3px rgba(39,64,47,.09);
}
.quick-form .btn{width:100%;justify-content:center;margin-top:2px}
.qf-note{font-size:.75rem;color:var(--stone);text-align:center;line-height:1.45}
@media(max-width:460px){.qf-row{grid-template-columns:1fr}}


/* двоколонковий перший екран лендінгів: текст + форма */
body.lp .lp-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,56px);align-items:start;
}
body.lp .lp-hero-grid .lp-hero-form{position:sticky;top:96px}
body.lp .lp-hero-grid h1{max-width:14ch}
body.lp .lp-hero-grid .quick-form{max-width:none}
@media(max-width:900px){
  body.lp .lp-hero-grid{grid-template-columns:1fr;gap:26px}
  body.lp .lp-hero-grid .lp-hero-form{position:static}
}


/* ============================================================
   10. КЛІЄНТСЬКИЙ КАЛЬКУЛЯТОР (3 питання → діапазон → заявка)
   ============================================================ */

.est-h{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3.6vw,2.3rem);margin:10px 0 6px}
.est-lead{color:#50604c;margin:0 0 24px;max-width:60ch;line-height:1.65}

.estimator{
  border:1px solid var(--line);border-radius:10px;background:#fff;
  padding:clamp(20px,3vw,34px);box-shadow:0 22px 60px -42px rgba(39,64,47,.6);
}
.est-step{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.est-q{
  display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--stone);font-weight:600;margin-bottom:13px;
}
.est-q b{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:var(--clay-deep);color:#fff;
  font-size:.68rem;margin-right:8px;vertical-align:middle;
}
.est-opts{display:flex;flex-wrap:wrap;gap:9px}
.est-opts button{
  flex:0 1 auto;text-align:left;cursor:pointer;
  border:1px solid var(--line);background:var(--cream);border-radius:8px;
  padding:11px 15px;font-family:var(--ui);font-size:.92rem;color:var(--ink);
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.est-opts button small{
  display:block;font-size:.76rem;color:var(--stone);margin-top:3px;font-weight:400;
}
.est-opts button:hover{border-color:var(--clay)}
.est-opts button.on{
  border-color:var(--clay-deep);background:#fff;
  box-shadow:0 0 0 2px rgba(39,64,47,.13);font-weight:600;
}
.est-opts button.on small{font-weight:400}
.est-rooms button{flex:1 1 210px}

.est-area-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.est-area-row .est-q{margin-bottom:0}
.est-area-row input{
  width:130px;padding:10px 12px;border:1px solid var(--line);border-radius:7px;
  font-family:var(--ui);font-size:.95rem;
}

.est-out{padding:4px 0 2px;min-height:64px}
.est-empty{color:var(--stone);font-size:.94rem;margin:0}
.est-label{
  display:block;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--stone);font-weight:600;margin-bottom:6px;
}
.est-range{
  font-family:var(--display);font-weight:600;color:var(--clay-deep);
  font-size:clamp(2rem,5vw,2.9rem);line-height:1.1;font-variant-numeric:tabular-nums;
}
.est-note{margin:12px 0 0;color:var(--stone);font-size:.86rem;line-height:1.6;max-width:62ch}

.est-cta{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.est-form{display:flex;flex-direction:column;gap:10px;max-width:520px}
.est-form strong{font-family:var(--display);font-weight:600;font-size:1.25rem;color:var(--ink)}
.est-form .qf-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.est-form input[type=text],.est-form input[type=tel]{
  width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:7px;
  font-family:var(--ui);font-size:.95rem;
}
.est-form .btn{justify-content:center}
@media(max-width:560px){
  .est-form .qf-row{grid-template-columns:1fr}
  .est-rooms button{flex:1 1 100%}
}


/* ============================================================
   11. ЦІНА ЗА ПРОЄКТ ЦІЛКОМ (не тільки за кв. фут)
   ============================================================ */

.totals{margin:34px 0 46px}
.totals-h{font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,3.8vw,2.5rem);margin:0 0 12px}
.totals-lead{color:#50604c;line-height:1.7;max-width:70ch;margin:0 0 28px}
.totals-lead a{color:var(--clay-deep);font-weight:600}

.totals-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.tot{
  border:1px solid var(--line);border-radius:10px;background:var(--cream);
  padding:24px 22px;display:flex;flex-direction:column;
}
.tot-featured{
  background:#fff;border-color:var(--clay-deep);
  box-shadow:0 26px 60px -44px rgba(39,64,47,.75);
}
.tot-tag{
  display:inline-block;align-self:flex-start;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--clay-deep);
  background:rgba(39,64,47,.09);padding:4px 9px;border-radius:20px;margin-bottom:12px;
}
.tot h3{font-family:var(--display);font-weight:600;font-size:1.35rem;margin:0 0 8px;line-height:1.2}
.tot-price{
  font-family:var(--display);font-weight:600;color:var(--clay-deep);
  font-size:1.85rem;line-height:1.15;margin-bottom:12px;font-variant-numeric:tabular-nums;
}
.tot p{color:#50604c;font-size:.92rem;line-height:1.6;margin:0 0 14px}
.tot ul{list-style:none;padding:0;margin:auto 0 0}
.tot li{
  position:relative;padding-left:19px;margin-bottom:7px;
  font-size:.87rem;color:#4a5946;line-height:1.5;
}
.tot li::before{
  content:"";position:absolute;left:0;top:.46em;width:7px;height:7px;
  border-left:2px solid var(--clay);border-bottom:2px solid var(--clay);transform:rotate(-45deg);
}
.totals-note{
  margin-top:22px;color:var(--stone);font-size:.86rem;line-height:1.65;max-width:78ch;
}
@media(max-width:900px){.totals-grid{grid-template-columns:1fr}}


/* ============================================================
   12. 3D-ОФФЕР (перший екран + секція на головній)
   ============================================================ */

.hero-offer{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:22px;padding:8px 14px 8px 8px;border-radius:40px;
  background:rgba(39,64,47,.07);border:1px solid rgba(39,64,47,.16);
  text-decoration:none;color:var(--ink);
  transition:background .18s,border-color .18s,transform .18s;
}
.hero-offer:hover{background:rgba(39,64,47,.12);border-color:var(--clay-deep);transform:translateY(-1px)}
.ho-badge{
  background:var(--clay-deep);color:#fff;font-size:.63rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;padding:5px 10px;border-radius:30px;white-space:nowrap;
}
.ho-text{font-size:.92rem;font-weight:600;line-height:1.35}
.ho-arr{color:var(--clay-deep);font-weight:700}
@media(max-width:520px){.ho-text{font-size:.85rem}}

.d3-band{padding-top:var(--s-6)}
.d3-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:center}
.d3-copy h2{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.12;margin:10px 0 18px;max-width:18ch}
.d3-copy p{color:#50604c;line-height:1.72;max-width:56ch;margin-bottom:14px}
.d3-list{list-style:none;padding:0;margin:20px 0 0}
.d3-list li{position:relative;padding-left:25px;margin-bottom:10px;color:#3f4d3c;font-size:.95rem;line-height:1.55}
.d3-list li::before{
  content:"";position:absolute;left:2px;top:.5em;width:9px;height:9px;
  border-left:2px solid var(--clay-deep);border-bottom:2px solid var(--clay-deep);transform:rotate(-45deg);
}
.d3-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px}
.d3-link{color:var(--clay-deep);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(39,64,47,.3);padding-bottom:2px}
.d3-visual{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.d3-visual figure{margin:0}
.d3-visual img{width:100%;height:auto;display:block;border-radius:8px;box-shadow:0 26px 60px -40px rgba(39,64,47,.7)}
.d3-visual figcaption{
  margin-top:8px;font-size:.73rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--stone);font-weight:600;
}
.d3-visual figure:last-child{margin-top:26px}
@media(max-width:900px){
  .d3-grid{grid-template-columns:1fr;gap:28px}
  .d3-visual figure:last-child{margin-top:0}
}