: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}
  }