@font-face{font-family:'BPG Arial';src:url(/assets/fonts/bpg-arial.woff2) format('woff2');font-display:swap}
@font-face{font-family:'BPG Arial Caps';src:url(/assets/fonts/bpg-arial-caps.woff2) format('woff2');font-display:swap}
/* Self-hosted Latin subsets (Anton + Inter). Georgian = BPG (separate). */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/anton-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/anton-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

  :root{
    --pine:#1C4040; --forest:#04332B; --white:#fff;
    --ink60:#5F7A7A; --line:#E3EAE8; --bg-soft:#F4F7F6;
  }
/* WHITE ACCENT (client-approved): two-tone monochrome.
   Root default = pine accent for light surfaces; dark sections
   opt into the white accent in the override layer at file end. */
:root{--accent:var(--pine); --on-accent:#fff}

  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:'Inter','BPG Arial',system-ui,sans-serif;
    color:var(--pine); background:var(--white);
    font-size:clamp(1rem, .95rem + .3vw, 1.125rem); line-height:1.6;
  }
  h1,h2,h3{font-family:'Anton','BPG Arial Caps',sans-serif; font-weight:800; line-height:1.08; letter-spacing:-.02em}
  h2{font-size:clamp(1.9rem, 1.4rem + 2vw, 3rem); margin-bottom:14px}
  .kicker{display:inline-block; background:var(--accent); color:var(--on-accent);
    font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    padding:6px 14px; border-radius:6px; margin-bottom:18px}
  .wrap{max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,48px)}
  section{padding:clamp(56px,9vw,110px) 0}
  .sub{color:var(--ink60); max-width:640px}

  /* draft notice */
  .draft-bar{position:fixed; left:16px; bottom:16px; z-index:900; background:var(--forest); color:#cfe0dc;
    font-size:.72rem; line-height:1.45; padding:9px 14px; border-radius:12px; pointer-events:none;
    box-shadow:0 8px 30px rgba(4,51,43,.35); max-width:min(430px, 62vw)}
  .draft-bar b{color:#fff}

  .btn{display:inline-block; background:var(--pine); color:#fff; text-decoration:none;
    font-weight:700; font-size:.92rem; padding:13px 24px; border-radius:10px; border:none; cursor:pointer}
  .btn:hover{background:var(--forest)}
  .btn.accent{background:var(--accent); color:var(--on-accent)}


  /* stats */
  .stats{background:var(--forest); color:#fff; padding:34px 0}
  .stats .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center}
  .stats b{display:block; font-family:'Anton','BPG Arial Caps'; font-size:clamp(1.6rem,1.2rem+1.6vw,2.6rem); color:var(--accent)}
  html[data-accent="mono"] .stats b{color:#fff}
  .stats span{font-size:.82rem; color:#b9cdc9}
  @media(max-width:720px){.stats .wrap{grid-template-columns:repeat(2,1fr)}}

  /* services */
  .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:38px}
  .card{background:var(--bg-soft); border-radius:16px; padding:28px 24px}
  .card .cellico{width:44px; height:24px; border-radius:6px; background:var(--accent); transform:skewX(-13deg); margin-bottom:18px}
  .card h3{font-size:1.15rem; margin-bottom:10px}
  .card p{font-size:.92rem; color:var(--ink60)}

  /* process */
  .process{background:var(--bg-soft)}
  .steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:38px; counter-reset:step}
  .step{background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 22px}
  .step::before{counter-increment:step; content:"0" counter(step);
    font-family:'Anton'; font-size:1.6rem; color:var(--accent); display:block; margin-bottom:10px}
  html[data-accent="mono"] .step::before{color:var(--pine)}
  .step h3{font-size:1.05rem; margin-bottom:8px}
  .step p{font-size:.9rem; color:var(--ink60)}

  /* projects */
  .projgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-top:38px}
  .proj{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff}
  .proj .ph{aspect-ratio:16/10; background:var(--pine) url('/assets/img/proj-placeholder.webp') center/cover; position:relative}
  .proj .ph::after{content:"ფოტო დაემატება"; position:absolute; inset:auto 12px 12px auto;
    background:rgba(4,51,43,.8); color:#fff; font-size:.7rem; padding:4px 10px; border-radius:6px}
  .proj .info{padding:18px 20px}
  .proj .info h3{font-size:1.02rem; margin-bottom:6px}
  .proj .meta{display:flex; gap:14px; font-size:.82rem; color:var(--ink60)}
  .proj .meta b{color:var(--pine)}

  /* calculator */
  .calc{background:var(--pine); color:#fff}
  .calc .box{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
    border-radius:20px; padding:clamp(24px,4vw,44px); margin-top:38px;
    display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center}
  @media(max-width:760px){.calc .box{grid-template-columns:1fr}}
  .calc label{font-size:.9rem; color:#b9cdc9; display:block; margin-bottom:10px}
  .calc input[type=range]{width:100%; accent-color:var(--accent)}
  .calc .bill{font-family:'Anton'; font-size:2rem; color:var(--accent); margin:8px 0 4px}
  html[data-accent="mono"] .calc .bill, html[data-accent="mono"] .calc .res b{color:#fff}
  .calc .res{display:grid; gap:14px}
  .calc .res div{background:rgba(255,255,255,.07); border-radius:12px; padding:14px 18px; font-size:.9rem}
  .calc .res b{display:block; font-family:'Anton'; font-size:1.5rem; color:var(--accent)}
  .calc .note{font-size:.75rem; color:#9db8b3; margin-top:16px}

  /* faq */
  details{border:1px solid var(--line); border-radius:12px; padding:18px 22px; margin-top:12px}
  details summary{cursor:pointer; font-weight:700; font-size:.98rem}
  details p{margin-top:10px; font-size:.92rem; color:var(--ink60)}

  /* contact */
  .contact{background:var(--bg-soft)}
  .contact .row{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px}
  .pill{display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line);
    border-radius:12px; padding:14px 22px; text-decoration:none; color:var(--pine); font-weight:600}
  .pill:hover{border-color:var(--pine)}

  /* footer */
  footer{background:var(--pine); color:#b9cdc9; padding:46px 0 0; overflow:hidden}
  footer .wrap{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center}
  footer .flogo{display:inline-flex; align-items:center; gap:12px; text-decoration:none}
  footer .fword{font-family:'Anton','BPG Arial Caps',sans-serif; font-weight:400; font-size:1.4rem;
    letter-spacing:.06em; color:#fff; line-height:1}
  footer .fcontact{font-size:.85rem}
  footer .fcontact a{color:inherit; text-decoration:underline}
  footer .fcells{display:flex; gap:10px; margin-top:38px}
  footer .fcells i{flex:0 0 64px; height:30px; background:var(--accent); border-radius:6px; transform:skewX(-13deg)}
  html[data-accent="mono"] footer .fcells i{background:rgba(255,255,255,.85)}
  footer .copy{font-size:.78rem; padding:18px 0 8px}


  /* warranty + equipment + financing */
  .trust{background:#fff}
  #projects{background:var(--bg-soft)}
  .wgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:38px}
  .wcard{background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px 24px;
    transition:transform .45s var(--x-expo), border-color .3s ease}
  .wcard:hover{transform:translateY(-4px); border-color:var(--accent)}
  .wcard b{display:block; font-family:'Anton','BPG Arial Caps',sans-serif; font-weight:400;
    font-size:clamp(1.7rem,1.2rem+1.6vw,2.4rem); color:var(--pine); line-height:1; margin-bottom:10px}
  .wcard span{font-size:.9rem; color:var(--ink60)}
  /* running "trusted equipment" logo strip — monochrome white logos on a dark band */
  .equip{margin-top:34px; padding:24px 8px 26px; background:var(--pine); border-radius:16px}
  .equip-label{display:block; font-size:.78rem; letter-spacing:.08em; color:#9fbbb5; padding:0 18px}
  .eqmarq{margin-top:18px; overflow:hidden;
    -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
            mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .eqmarq-track{display:flex; align-items:flex-end; width:max-content; animation:eqmarq 34s linear infinite}
  .eq-item{position:relative; display:flex; flex-direction:column; align-items:center; gap:11px;
    margin:0 10px; padding:12px 22px; border-radius:14px; flex:none;
    transition:background .28s var(--x-expo), transform .28s var(--x-expo)}
  .eq-lw{position:relative; display:flex; align-items:flex-end; justify-content:center; height:56px}
  /* per-brand optical heights */
  .eq-l-tongwei{height:30px}
  .eq-l-huaweimark{height:44px}
  .eq-l-abb{height:32px}
  .eq-l-staubli{height:30px}
  .eq-l-ipos{height:26px}   /* 7:1 lockup — kept short so it doesn't dwarf the rest */
  .eq-l-elvare{height:56px}
  .eq-l-saqkabeli{height:48px}
  .eq-logo{width:auto; display:block; transition:opacity .28s ease}
  .eq-lw .hov{position:absolute; left:50%; bottom:0; transform:translateX(-50%); opacity:0}
  .eq-item .base{opacity:.94}
  .eq-nm{font-family:'BPG Arial Caps',sans-serif; font-size:.72rem; letter-spacing:.05em;
    white-space:nowrap; color:rgba(255,255,255,.62); transition:color .28s ease}
  .eq-item:hover{transform:translateY(-3px); background:var(--accent)}
  .eq-item:hover .base{opacity:0}
  .eq-item:hover .hov{opacity:1}
  .eq-item:hover .eq-nm{color:var(--on-accent)}
  @keyframes eqmarq{to{transform:translateX(-50%)}}
  .fin{margin-top:20px; font-size:.92rem; color:var(--ink60)}
  .hours{margin-top:18px; font-size:.9rem; color:var(--ink60)}
  .hours a{color:var(--ink60)}

/* ===== premium layer ===== */
:root{--x-expo:cubic-bezier(.16,1,.3,1); --x-p4:cubic-bezier(.76,0,.24,1)}
::selection{background:var(--accent); color:var(--on-accent)}
html{scrollbar-gutter:stable}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#EDF2F0}
::-webkit-scrollbar-thumb{background:var(--pine); border-radius:8px; border:3px solid #EDF2F0}

/* scroll reveal (JS adds .in, then strips .rv after the entrance so
   component hover transforms/transitions regain control) */
html.js .rv{transition:opacity .8s var(--x-expo), transform .95s var(--x-expo)}
html.js .rv:not(.in){opacity:0; transform:translateY(26px)}


/* buttons: lift + shine sweep on accent */
.btn{position:relative; overflow:hidden; transition:transform .35s var(--x-expo), box-shadow .35s ease, background .3s ease}
.btn:hover{transform:translateY(-2px)}
.btn.accent{box-shadow:0 10px 26px -12px var(--accent)}
.btn.accent::after{content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg); transition:left .55s var(--x-expo)}
.btn.accent:hover::after{left:125%}
.btn.accent:hover{box-shadow:0 16px 34px -12px var(--accent)}

/* marquee strip */
.marq{background:var(--accent); color:var(--on-accent); overflow:hidden; padding:14px 0}
.marq-track{display:flex; align-items:center; width:max-content;
  animation:marq 32s linear infinite}
.marq-track span{font-family:'BPG Arial Caps',sans-serif; font-size:.85rem; letter-spacing:.06em; white-space:nowrap; margin-right:34px}
.marq-track i{width:16px; height:9px; border-radius:2.5px; background:var(--on-accent); opacity:.85; transform:skewX(-13deg); flex:none; margin-right:34px}
@keyframes marq{to{transform:translateX(-50%)}}

/* service cards v2 — image + zoom + lift */
.card{padding:0; overflow:hidden; border:1px solid var(--line); background:#fff;
  transition:transform .5s var(--x-expo), box-shadow .5s ease}
.card:hover{transform:translateY(-6px); box-shadow:0 24px 48px -22px rgba(4,51,43,.35)}
.cimg{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-soft)}
.cimg img{width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.03); transition:transform .9s var(--x-expo)}
.card:hover .cimg img{transform:scale(1.09)}
.cimg::after{content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--x-expo)}
.card:hover .cimg::after{transform:scaleX(1)}
.cbody{padding:24px}

/* steps + projects micro-interactions */
.step{transition:transform .45s var(--x-expo), border-color .3s ease}
.step:hover{transform:translateY(-4px); border-color:var(--accent)}
.proj{transition:transform .5s var(--x-expo), box-shadow .5s ease}
.proj:hover{transform:translateY(-6px); box-shadow:0 24px 48px -22px rgba(4,51,43,.3)}

/* pre-calculator CTA band */
.band{position:relative; color:#fff;
  background:linear-gradient(100deg, rgba(4,35,35,.9) 12%, rgba(4,35,35,.55) 58%, rgba(4,51,43,.4)),
    url('/assets/img/band-dusk.webp') center/cover}
.band h2{color:#fff; max-width:660px}
.band p{color:#d9e4e2; max-width:520px; margin:14px 0 32px}

/* calculator premium slider */
.calc input[type=range]{-webkit-appearance:none; appearance:none; height:6px; border-radius:6px;
  background:rgba(255,255,255,.18); outline:none}
.calc input[type=range]:focus-visible{outline:2px solid var(--accent); outline-offset:5px; border-radius:6px}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--accent); border:3px solid var(--on-accent); cursor:pointer;
  box-shadow:0 2px 12px rgba(0,0,0,.35); transition:transform .2s var(--x-expo)}
.calc input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
.calc input[type=range]::-moz-range-thumb{width:22px; height:22px; border-radius:50%;
  background:var(--accent); border:3px solid var(--on-accent); cursor:pointer}
.calc input[type=range]::-moz-range-track{height:6px; border-radius:6px; background:rgba(255,255,255,.18)}

/* faq premium open */
details{transition:border-color .3s ease}
details:hover{border-color:var(--pine)}
details summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:14px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+" / ""; font-family:'Anton',sans-serif; font-size:1.2rem; color:var(--pine);
  line-height:1; transition:transform .35s var(--x-expo); flex:none}
details[open] summary::after{transform:rotate(45deg)}
details[open] p{animation:faqIn .5s var(--x-expo)}
@keyframes faqIn{from{opacity:0; transform:translateY(-6px)}}

@media (prefers-reduced-motion: reduce){
  .hx-video{animation:none}
  .marq-track{animation:none}
  .eqmarq-track{animation:none}
  html.js .rv, html.js .rv:not(.in){opacity:1; transform:none; transition:none}
  .btn, .card, .cimg img, .step, .proj, details summary::after{transition:none}
  details[open] p{animation:none}
  .btn.accent::after, .cimg::after{transition:none}
  .calc input[type=range]::-webkit-slider-thumb{transition:none}
}


/* ===== hero — Photon Stream (hx-), Luka's pick ===== */
/* ===== Solarcell hero — "Photon Stream" (hx-) =====
   Layers: video(0) → shade(1) → canvas(2) → content(3).
   Animation surface: canvas + opacity/transform only. */

.hx-hero{position:relative; color:#fff; overflow:hidden; background:#04332B}
.hx-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.hx-shade{position:absolute; inset:0; z-index:1; background:
  linear-gradient(105deg, rgba(4,35,35,.92) 0%, rgba(4,35,35,.74) 46%, rgba(4,51,43,.52) 100%)}
.hx-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none}

.hx-wrap{position:relative; z-index:3; max-width:1180px; margin:0 auto;
  padding:clamp(84px,13vh,148px) clamp(20px,4vw,48px);
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px,5vw,72px); align-items:center}

/* --- copy --- */
.hx-h1{font-family:'Anton','BPG Arial Caps',sans-serif; font-weight:800;
  line-height:1.1; letter-spacing:-.02em; color:#fff;
  font-size:clamp(2.25rem, 1.35rem + 3.7vw, 4.1rem)}
.hx-h1 em{font-style:normal; color:var(--accent)}
html[data-accent="mono"] .hx-h1 em{color:#fff}
.hx-sub{margin:22px 0 34px; max-width:560px; color:#d9e4e2; line-height:1.65}

.hx-cta{display:flex; gap:14px; flex-wrap:wrap}
.hx-btn{display:inline-block; font-weight:700; font-size:.95rem; text-decoration:none;
  padding:14px 26px; border-radius:12px;
  transition:transform .18s cubic-bezier(.3,.7,.3,1), box-shadow .18s ease,
    border-color .18s ease, background .18s ease}
.hx-btn:active{transform:translateY(1px) scale(.99)}
.hx-btn-accent{background:var(--accent); color:var(--on-accent);
  box-shadow:0 6px 22px -10px var(--accent)}
.hx-btn-accent:hover{transform:translateY(-2px); box-shadow:0 14px 30px -10px var(--accent)}
html[data-accent="mono"] .hx-btn-accent{background:#fff; color:#1C4040;
  box-shadow:0 6px 22px -10px rgba(255,255,255,.6)}
.hx-btn-ghost{color:#fff; background:transparent; border:2px solid rgba(255,255,255,.45); padding:12px 24px}
.hx-btn-ghost:hover{border-color:#fff; transform:translateY(-2px)}

/* --- stage: the 9-cell brand grid + live meter --- */
.hx-stage{position:relative; display:flex; flex-direction:column; align-items:center;
  gap:clamp(22px,3vw,32px); perspective:720px; perspective-origin:60% 40%}

.hx-cells{display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:clamp(9px,1.6vw,15px); width:min(100%,380px); aspect-ratio:1/1;
  transform:skewX(-13deg); will-change:transform}
.hx-cell{position:relative; border-radius:clamp(12px,1.8vw,20px);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.hx-cell i{position:absolute; inset:-1px; border-radius:inherit; display:block;
  background:linear-gradient(150deg, var(--accent) 8%, transparent 125%);
  box-shadow:0 0 28px -2px var(--accent), inset 0 0 12px rgba(255,255,255,.25);
  will-change:opacity}
html[data-accent="mono"] .hx-cell i{
  background:linear-gradient(150deg, #fff 8%, transparent 125%);
  box-shadow:0 0 28px -2px rgba(255,255,255,.85), inset 0 0 12px rgba(255,255,255,.25)}

/* Static pattern = the no-JS AND reduced-motion look (JS mirrors it, then takes over) */
.hx-cell:nth-child(1) i{opacity:.85}
.hx-cell:nth-child(2) i{opacity:.15}
.hx-cell:nth-child(3) i{opacity:.45}
.hx-cell:nth-child(4) i{opacity:.30}
.hx-cell:nth-child(5) i{opacity:.70}
.hx-cell:nth-child(6) i{opacity:.12}
.hx-cell:nth-child(7) i{opacity:.50}
.hx-cell:nth-child(8) i{opacity:.22}
.hx-cell:nth-child(9) i{opacity:.80}

/* --- live energy meter (skewed like a cell, content counter-skewed) --- */
.hx-meter{display:flex; align-items:center; gap:14px; padding:14px 22px;
  border-radius:14px; background:rgba(4,51,43,.55);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transform:skewX(-13deg)}
.hx-meter > *{transform:skewX(13deg)}
.hx-dot{position:relative; width:9px; height:9px; border-radius:50%;
  background:var(--accent); flex:none}
.hx-dot::after{content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--accent);
  animation:hxPing 2.2s cubic-bezier(.2,.6,.3,1) infinite}
html[data-accent="mono"] .hx-dot,
html[data-accent="mono"] .hx-dot::after{background:#fff}
@keyframes hxPing{0%{transform:scale(1); opacity:.7} 70%,100%{transform:scale(3.4); opacity:0}}
.hx-meter-txt{display:flex; flex-direction:column; gap:2px}
.hx-meter-label{font-size:.66rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#bfd2cd; white-space:nowrap}
.hx-meter-val{display:flex; align-items:baseline; gap:7px; color:#fff}
.hx-meter-val b{font-family:'Anton','BPG Arial Caps',sans-serif; font-weight:400;
  font-size:clamp(1.35rem, 1rem + 1vw, 1.8rem); letter-spacing:.01em;
  color:var(--accent); font-variant-numeric:tabular-nums;
  display:inline-block; transform-origin:left center; will-change:transform}
html[data-accent="mono"] .hx-meter-val b{color:#fff}
.hx-meter-val small{font-size:.8rem; font-weight:600; color:#d9e4e2}

/* --- responsive --- */
@media (max-width:920px){
  .hx-wrap{grid-template-columns:1fr; gap:48px;
    padding-top:clamp(64px,10vh,110px); padding-bottom:clamp(64px,10vh,110px)}
  .hx-cells{width:min(66vw,320px)}
  .hx-sub{margin-bottom:28px}
}
@media (max-width:480px){
  .hx-cells{width:min(72vw,280px)}
  .hx-btn{padding:13px 20px; font-size:.9rem}
}

/* --- reduced motion: static, still beautiful --- */
@media (prefers-reduced-motion: reduce){
  .hx-dot::after{animation:none; opacity:0}
  .hx-btn{transition:none}
}

/* ============================================================
   v2 polish — intro choreography, texture, trust row.
   Easing map (from Enovus decompile): expo→cubic-bezier(.16,1,.3,1),
   power4.inOut→cubic-bezier(.76,0,.24,1). Big moves 1-1.5s, micro .3-.55s.
   ============================================================ */
:root{--x-expo:cubic-bezier(.16,1,.3,1); --x-p4:cubic-bezier(.76,0,.24,1)}

.hx-hero{min-height:100svh; display:flex; align-items:center}
.hx-wrap{width:100%}

/* faint skewed cell texture above the shade */
.hx-shade::after{content:""; position:absolute; inset:0; opacity:.05; pointer-events:none;
  background:
    repeating-linear-gradient(77deg, #fff 0 1px, transparent 1px 74px),
    repeating-linear-gradient(-13deg, #fff 0 1px, transparent 1px 44px)}
/* soft accent aura behind the copy */
.hx-aura{position:absolute; z-index:2; left:-14%; top:-20%; width:60vw; height:60vw; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 62%);
  filter:blur(10px)}
html[data-accent="mono"] .hx-aura{background:radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 62%)}

/* kicker chip */
.hx-chip{display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:8px 16px; margin-bottom:26px;
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#cfe0dc}
.hx-chip i{position:relative; width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none}
.hx-chip i::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--accent);
  animation:hxPing 2.4s var(--x-expo) infinite}
html[data-accent="mono"] .hx-chip i,
html[data-accent="mono"] .hx-chip i::after{background:#fff}

/* split headline lines (mask rise) */
.hx-h1 .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.hx-h1 .in{display:inline-block; will-change:transform}
.hx-h1 em{white-space:nowrap; position:relative}
.hx-h1 em::after{content:""; position:absolute; left:0; right:0; bottom:.02em; height:.1em;
  background:var(--accent); opacity:.35; border-radius:2px;
  transform:skewX(-13deg) scaleX(0); transform-origin:left}
html[data-accent="mono"] .hx-h1 em::after{background:#fff}

/* button shine sweep */
.hx-btn{position:relative; overflow:hidden}
.hx-btn-accent::after{content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-20deg); transition:left .55s var(--x-expo)}
.hx-btn-accent:hover::after{left:125%}

/* trust row under CTAs */
.hx-trust{display:flex; align-items:center; gap:clamp(16px,2.2vw,28px); flex-wrap:wrap;
  margin-top:42px; font-size:.78rem; color:#9db8b3}
.hx-trust b{display:block; font-family:'Anton','BPG Arial Caps',sans-serif; font-weight:400;
  font-size:1.25rem; color:#fff; letter-spacing:.01em}
.hx-trust .sep{width:1px; height:30px; background:rgba(255,255,255,.16); flex:none}

/* scroll hint */
.hx-scrollhint{position:absolute; z-index:3; left:50%; transform:translateX(-50%);
  bottom:clamp(16px,3.2vh,32px); display:flex; align-items:center; gap:10px;
  color:#9db8b3; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase}
.hx-scrollhint i{width:1px; height:34px; display:block;
  background:linear-gradient(#fff,transparent);
  animation:hxDrip 1.8s var(--x-expo) infinite}
@keyframes hxDrip{from{transform:scaleY(0); transform-origin:top} 55%{transform:scaleY(1); transform-origin:top} to{transform:scaleY(1); transform-origin:top; opacity:0}}

/* verbar replay */
.verbar button{border:1px solid #E3EAE8; background:#fff; border-radius:8px; padding:5px 10px;
  cursor:pointer; font-size:.75rem; color:#1C4040; font-weight:700; margin-left:6px}
.verbar button:hover{background:#e8efed}

/* ---- intro choreography (from-only keyframes; toggled with .hx-run) ---- */
@keyframes xLine {from{transform:translateY(112%)}}
@keyframes xUp   {from{opacity:0; transform:translateY(22px)}}
@keyframes xFade {from{opacity:0}}
@keyframes xStage{from{opacity:0; transform:translateY(26px) scale(.97)}}
@keyframes xMark {to{transform:skewX(-13deg) scaleX(1)}}

.hx-run .hx-chip{animation:xUp .7s var(--x-expo) .08s both}
.hx-run .hx-h1 .ln:nth-child(1) .in{animation:xLine .95s var(--x-expo) .18s both}
.hx-run .hx-h1 .ln:nth-child(2) .in{animation:xLine .95s var(--x-expo) .30s both}
.hx-run .hx-sub{animation:xUp .8s var(--x-expo) .5s both}
.hx-run .hx-cta{animation:xUp .8s var(--x-expo) .62s both}
.hx-run .hx-trust{animation:xUp .8s var(--x-expo) .78s both}
.hx-run .hx-stage{animation:xStage 1.15s var(--x-p4) .45s both}
.hx-run .hx-scrollhint{animation:xFade 1s var(--x-expo) 1.5s both}
.hx-run .hx-h1 em::after{animation:xMark .6s var(--x-expo) 1.55s both}

@media (max-width:920px){
  .hx-scrollhint{display:none}
  .hx-trust{margin-top:32px}
  .hx-trust b{font-size:1.1rem}
}
@media (prefers-reduced-motion: reduce){
  .hx-run .hx-chip, .hx-run .hx-h1 .ln:nth-child(n) .in, .hx-run .hx-sub, .hx-run .hx-cta,
  .hx-run .hx-trust, .hx-run .hx-stage, .hx-run .hx-scrollhint{animation:none}
  .hx-run .hx-h1 em::after{animation:none; transform:skewX(-13deg) scaleX(1)}
  .hx-scrollhint i, .hx-chip i::after{animation:none}
  .hx-btn-accent::after{transition:none}
}
@media (max-width:560px){
  .hx-trust .sep{display:none}
}
@media (max-width:359px){
  .hx-h1 em{white-space:normal}
}

/* integration with draft: floating header above, generic section padding off */
section.hx-hero{padding:0}
.hx-wrap{padding-top:clamp(120px,17vh,176px)}
@keyframes vidSettle{from{transform:scale(1.07)}}
.hx-video{animation:vidSettle 2.8s var(--x-p4) both}
@media (prefers-reduced-motion: reduce){.hx-video{animation:none}}
/* scroll hint collides with the fixed draft-bar between 921-1000px */
@media (max-width:1000px){.hx-scrollhint{display:none}}

/* ===== header — Floating Capsule (hd2) ===== */
/* hd2 — Floating Capsule */
.hd2{position:fixed;top:0;left:0;right:0;z-index:1000;pointer-events:none;font-family:'Inter','BPG Arial',sans-serif;--hd2-exp:cubic-bezier(.16,1,.3,1);transition:transform .5s var(--hd2-exp);animation:hd2-drop .7s var(--hd2-exp) both}
@keyframes hd2-drop{from{opacity:0;transform:translateY(-26px)}}
.hd2.is-hidden{transform:translateY(-120%)}
.hd2 a:focus-visible,.hd2 button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hd2-underlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1;background:rgba(2,26,22,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .4s ease}
.hd2.is-open .hd2-underlay{opacity:1;pointer-events:auto}
.hd2-bar{pointer-events:auto;position:relative;display:flex;align-items:center;gap:16px;width:calc(100% - 32px);max-width:1150px;height:68px;margin:16px auto 0;padding:0 10px 0 20px;border-radius:17px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:max-width .55s var(--hd2-exp),height .55s var(--hd2-exp),background .45s ease,border-color .45s ease,box-shadow .45s ease}
.hd2.is-scrolled .hd2-bar{max-width:1080px;height:60px;background:rgba(4,51,43,.78);border-color:rgba(255,255,255,.1);box-shadow:0 18px 44px -16px rgba(0,0,0,.55)}
.hd2-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none;border-radius:8px}
.hd2-logo svg{display:block}
.hd2-word{font-family:'Anton',sans-serif;font-size:1.05rem;line-height:1;letter-spacing:.04em;color:#fff}
.hd2-panel{display:flex;align-items:center;gap:16px;flex:1;justify-content:flex-end;min-width:0}
.hd2-links{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.hd2-links a{position:relative;display:inline-block;padding:6px 0;font-family:'BPG Arial Caps',sans-serif;font-weight:700;font-size:.84rem;letter-spacing:.03em;color:rgba(255,255,255,.82);text-decoration:none;transition:color .3s ease}
.hd2-links a:hover,.hd2-links a:focus-visible{color:#fff}
.hd2-links a::after{content:"";position:absolute;left:50%;bottom:-1px;width:72%;height:3px;border-radius:2px;background:var(--accent);transform:translateX(-50%) skewX(-13deg) scaleX(0);transition:transform .3s var(--hd2-exp)}
.hd2-links a:hover::after,.hd2-links a:focus-visible::after{transform:translateX(-50%) skewX(-13deg) scaleX(1)}
.hd2-phone{font-size:.84rem;font-weight:500;white-space:nowrap;color:rgba(255,255,255,.82);text-decoration:none;transition:color .3s ease}
.hd2-phone:hover,.hd2-phone:focus-visible{color:#fff}
/* language switch — single skewed ghost chip showing the TARGET language
   (only "EN" for now; becomes a real link when the English version ships) */
.hd2-lang{display:inline-flex;align-items:center;position:relative;margin-left:14px;padding-left:22px}
/* S-1: skewed hairline separates the page menu from the controls */
.hd2-lang::before{content:"";position:absolute;left:0;top:50%;width:2px;height:24px;
  border-radius:2px;background:rgba(255,255,255,.22);transform:translateY(-50%) skewX(-13deg)}
.hd2-lang .lng{position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:7px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.35);
  font-family:'BPG Arial Caps',sans-serif;font-size:.78rem;letter-spacing:.08em;
  color:#fff;text-decoration:none;transform:skewX(-13deg);
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.hd2-lang .lng .lin{display:inline-block;transform:skewX(13deg)}
.hd2-lang .lng.soon{cursor:default}
.hd2-lang .lng:hover,.hd2-lang a.lng:focus-visible{background:var(--accent);color:var(--on-accent);border-color:transparent}
.hd2-cta{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;white-space:nowrap;padding:10px 18px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-family:'BPG Arial Caps',sans-serif;font-size:.8rem;letter-spacing:.03em;text-decoration:none;transition:transform .3s var(--hd2-exp),filter .3s ease}
.hd2-cta:hover{transform:translateY(-1px);filter:brightness(1.07)}
.hd2-burger{display:none;position:relative;flex-shrink:0;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;cursor:pointer}
.hd2-burger span{position:absolute;left:11px;width:22px;height:2px;border-radius:2px;background:#fff;transition:top .35s var(--hd2-exp),transform .35s var(--hd2-exp),opacity .25s ease}
.hd2-burger span:nth-child(1){top:15px}
.hd2-burger span:nth-child(2){top:21px}
.hd2-burger span:nth-child(3){top:27px}
.hd2.is-open .hd2-burger span:nth-child(1){top:21px;transform:rotate(45deg)}
.hd2.is-open .hd2-burger span:nth-child(2){opacity:0}
.hd2.is-open .hd2-burger span:nth-child(3){top:21px;transform:rotate(-45deg)}
@media (max-width:1240px) and (min-width:881px){.hd2-phone{display:none}}
@media (max-width:1024px) and (min-width:881px){.hd2-links{gap:16px}.hd2-panel{gap:12px}}
@media (max-width:880px){
.hd2-bar{flex-wrap:wrap;gap:0;padding:8px 8px 8px 18px}
.hd2-bar,.hd2.is-scrolled .hd2-bar{height:auto;min-height:60px}
.hd2-logo{margin-right:auto}
.hd2-burger{display:block;order:2}
.hd2-panel{order:3;flex:0 0 100%;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;max-height:0;overflow:hidden;transition:max-height .6s var(--hd2-exp)}
.hd2.is-open .hd2-panel{max-height:70vh}
.hd2-links{flex-direction:column;align-items:stretch;gap:0;margin-top:6px}
.hd2-links a{display:block;padding:13px 4px;font-size:.98rem;border-top:1px solid rgba(255,255,255,.09)}
.hd2-links a::after{display:none}
.hd2-phone{display:block;padding:13px 4px;font-size:.98rem;border-top:1px solid rgba(255,255,255,.09)}
.hd2-lang{padding:14px 4px 6px;font-size:.82rem;margin-left:0;
  border-top:1px solid rgba(255,255,255,.09)}   /* same rhythm as the links above */
.hd2-lang::before{display:none}
.hd2-cta{margin:12px 2px 14px;padding:13px 18px;font-size:.88rem}
/* Open menu needs a solid backdrop. The bar is 6% white glass, which reads as a
   slim bar over any hero but is effectively transparent once it expands to full
   height — the hero headline showed straight through the menu items. */
.hd2.is-open .hd2-bar{background:rgba(4,44,37,.975);border-color:rgba(255,255,255,.14);
  box-shadow:0 26px 60px -18px rgba(0,0,0,.6)}
.hd2-links li,.hd2-phone,.hd2-lang,.hd2-cta{opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .5s var(--hd2-exp)}
.hd2.is-open .hd2-links li,.hd2.is-open .hd2-phone,.hd2.is-open .hd2-lang,.hd2.is-open .hd2-cta{opacity:1;transform:none}
.hd2.is-open .hd2-links li:nth-child(1){transition-delay:.05s}
.hd2.is-open .hd2-links li:nth-child(2){transition-delay:.1s}
.hd2.is-open .hd2-links li:nth-child(3){transition-delay:.15s}
.hd2.is-open .hd2-links li:nth-child(4){transition-delay:.2s}
.hd2.is-open .hd2-links li:nth-child(5){transition-delay:.25s}
.hd2.is-open .hd2-phone{transition-delay:.3s}
.hd2.is-open .hd2-lang{transition-delay:.35s}
.hd2.is-open .hd2-cta{transition-delay:.4s}
}
html[data-accent="mono"] .hd2-links a::after{background:#fff}
html[data-accent="mono"] .hd2-cta{background:#fff;color:#1C4040}
html[data-accent="mono"] .hd2 a:focus-visible,html[data-accent="mono"] .hd2 button:focus-visible{outline-color:#fff}
@media (prefers-reduced-motion:reduce){
.hd2{animation:none}
.hd2,.hd2-bar,.hd2-panel,.hd2-links li,.hd2-links a,.hd2-links a::after,.hd2-phone,.hd2-lang,.hd2-cta,.hd2-burger span,.hd2-underlay{transition:none!important}
}
/* active section link (scroll-spy) */
.hd2-links a.is-active{color:#fff}
.hd2-links a.is-active::after{transform:translateX(-50%) skewX(-13deg) scaleX(1)}
body.hd-lock{overflow:hidden}



/* ===== page hero (sub-pages) ===== */
.page-hero{position:relative; background:var(--forest); color:#fff; overflow:hidden;
  padding:clamp(120px,17vh,168px) 0 clamp(46px,7vh,70px)}
.page-hero::before{content:""; position:absolute; inset:0; opacity:.06; pointer-events:none;
  background:repeating-linear-gradient(-13deg,#fff 0 1px,transparent 1px 46px)}
.page-hero .wrap{position:relative; z-index:1}
.page-hero h1{font-family:'Anton','BPG Arial Caps',sans-serif; color:#fff;
  font-size:clamp(2rem,1.4rem+2.6vw,3.4rem); line-height:1.1; letter-spacing:-.02em}
.page-hero .lead{margin-top:14px; max-width:600px; color:#cfe0dc; line-height:1.7}
.crumb{font-size:.76rem; color:#9db8b3; margin-bottom:14px; letter-spacing:.04em}
.crumb a{color:#9db8b3; text-decoration:none} .crumb a:hover{color:#fff}
/* section-level "see all" link */
.seeall{display:inline-flex; align-items:center; gap:8px; margin-top:30px; font-weight:700;
  font-size:.92rem; color:var(--pine); text-decoration:none}
.seeall:hover{gap:12px} .seeall span{transition:transform .3s var(--x-expo)}
/* detail list used on services/about */
.deflist{display:grid; gap:14px; margin-top:26px; max-width:760px}
.deflist div{display:flex; gap:14px; align-items:flex-start}
.deflist b{flex:none; width:8px; height:8px; margin-top:9px; border-radius:2px; background:var(--accent); transform:skewX(-13deg)}
.prose{max-width:680px; line-height:1.8}
.prose p{margin-top:16px; color:var(--ink60)}
.prose p:first-child{color:var(--pine)}

/* ===== footer nav ===== */
footer .fnav{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:26px}
footer .fnav a{color:#b9cdc9; text-decoration:none; font-size:.85rem; transition:color .3s}
footer .fnav a:hover{color:#fff}


/* ==================================================================
   POLISH v3 — design-audit pass. Appended last so it wins ties by
   source order. (typography · depth · brand motif · states · motion)
   ================================================================== */

/* -- design tokens -- */
:root{
  --r-1:8px; --r-2:12px; --r-3:16px; --r-4:20px; --r-pill:999px;
  --fs-title:clamp(1.2rem,1.05rem+.55vw,1.4rem);
  --sh-1:0 2px 10px -4px rgba(4,51,43,.16);
  --sh-2:0 14px 34px -18px rgba(4,51,43,.30);
  --sh-3:0 26px 52px -24px rgba(4,51,43,.38);
}

/* -- true-weight display type: the fonts ship ONLY a 400 face, so 800
      forced faux-bold on every heading; use real weight + guard -- */
h1,h2,h3{font-weight:400; font-synthesis-weight:none}
.hx-h1{font-weight:400}
h2,.page-hero h1{text-wrap:balance}
.sub,.lead,.prose p,.hx-sub,.band p{text-wrap:pretty}

/* -- unified card-title tier (was 1.15/1.05/1.02, barely above body) -- */
.card h3,.step h3,.proj .info h3{font-size:var(--fs-title)}
details summary{font-size:1.0625rem}

/* -- one radius scale + one button padding -- */
.kicker{border-radius:var(--r-1)}
.btn,.pill,details{border-radius:var(--r-2)}
.card,.wcard,.proj,.step{border-radius:var(--r-3)}
.calc .box{border-radius:var(--r-4)}
.btn{padding:14px 26px}

/* -- layered depth: soft resting shadow + richer hover lift -- */
.card,.wcard,.proj{box-shadow:var(--sh-1)}
.card:hover,.proj:hover{box-shadow:var(--sh-3)}
.wcard:hover{box-shadow:var(--sh-2)}

/* -- grids keep the leftover track so a lone card never balloons -- */
.cards,.wgrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.projgrid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
@media(min-width:721px) and (max-width:1024px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.stats .wrap{grid-template-columns:repeat(2,1fr); row-gap:26px}}

/* -- header capsule floats with a soft shadow + frosted top highlight -- */
.hd2-bar{background:rgba(255,255,255,.08);
  box-shadow:0 10px 34px -18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14)}

/* -- flat dark bands get a subtle 'lit' radial depth -- */
.calc{background:radial-gradient(120% 140% at 15% 0%, #245a52 0%, var(--pine) 55%)}
footer{background:radial-gradient(100% 120% at 85% 0%, #123f38 0%, var(--pine) 60%)}
.page-hero{background:radial-gradient(120% 130% at 80% -10%, #0c463c 0%, var(--forest) 58%)}
.stats{background:radial-gradient(120% 160% at 50% 0%, #0a3f36 0%, var(--forest) 70%)}

/* -- footer close: hairline divider + intentional cell baseline -- */
footer .fnav{padding-top:26px; border-top:1px solid rgba(255,255,255,.09)}
footer .fcells{gap:12px; opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
footer .fcells i{height:22px}

/* -- calculator: filled track, tabular figures, highlighted recommendation -- */
.calc input[type=range]{background:linear-gradient(90deg,var(--accent) 0 var(--cval,30%),rgba(255,255,255,.18) var(--cval,30%))}
.calc input[type=range]::-moz-range-track{background:linear-gradient(90deg,var(--accent) 0 var(--cval,30%),rgba(255,255,255,.18) var(--cval,30%))}
.calc .res b,.calc .bill{font-variant-numeric:tabular-nums}
.calc .res div{border-left:2px solid transparent}
.calc .res div:first-child{border-left-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent)}
.calc .box{box-shadow:inset 0 1px 0 rgba(255,255,255,.09), var(--sh-2)}

/* -- placeholder tile already carries its own label -- */
.proj .ph::after{display:none}

/* -- service cards: numbered skewed-cell brand badge lapping the seam -- */
.cbody{position:relative}
.cnum{position:absolute; top:-32px; right:18px; z-index:2; display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; background:var(--accent); border-radius:var(--r-2); transform:skewX(-13deg); box-shadow:var(--sh-2)}
.cnum b{font-family:'Anton','BPG Arial Caps',sans-serif; font-weight:400; font-size:1.15rem; color:var(--on-accent); transform:skewX(13deg)}
html[data-accent="mono"] .cnum{background:#fff}

/* -- whole-card links (home) feel intentional -- */
a.card,a.proj{text-decoration:none; color:inherit; display:block}

/* -- consistent accent focus ring on everything keyboard-reachable -- */
.hx-btn:focus-visible,.btn:focus-visible,.pill:focus-visible,.seeall:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.btn.accent:focus-visible,.hx-btn-accent:focus-visible{outline-color:var(--on-accent)}
.crumb a:focus-visible,footer a:focus-visible,.fnav a:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
details summary:focus-visible{outline:2px solid var(--pine); outline-offset:3px}

/* -- press + hover feedback parity across button families -- */
.btn:active,.pill:active{transform:translateY(1px)}
.pill{transition:border-color .3s ease, transform .3s var(--x-expo), box-shadow .3s ease}
.pill:hover{transform:translateY(-2px); box-shadow:var(--sh-1)}
.seeall{gap:8px}
.seeall:hover span{transform:translateX(5px)}

/* -- skip link -- */
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:1100; background:var(--accent); color:var(--on-accent);
  padding:10px 16px; border-radius:var(--r-1); font-weight:700; text-decoration:none}

/* -- honest, non-interactive EN chip until the translation exists -- */
.hd2-lang .soon{color:rgba(255,255,255,.32); padding:4px 5px; cursor:default}

/* -- mobile nav: not tab-focusable while visually collapsed -- */
@media(max-width:880px){
  .hd2-panel{visibility:hidden; transition:max-height .6s var(--hd2-exp), visibility 0s linear .6s}
  .hd2.is-open .hd2-panel{visibility:visible; transition:max-height .6s var(--hd2-exp), visibility 0s}
}

/* -- sub-page hero: carry the home hero's brand language (aura + skewed
      lime underline + on-load entrance) so interior pages don't read flat -- */
.page-hero{padding-bottom:clamp(56px,8vh,84px)}
.page-hero::after{content:""; position:absolute; right:-10%; top:-40%; width:55vw; height:55vw; pointer-events:none; z-index:0;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 62%); filter:blur(8px)}
html[data-accent="mono"] .page-hero::after{background:radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 62%)}
.page-hero h1{position:relative; display:inline-block}
.page-hero h1::after{content:""; position:absolute; left:0; bottom:-14px; height:5px; width:clamp(56px,7vw,84px);
  background:var(--accent); border-radius:3px; transform:skewX(-13deg) scaleX(0); transform-origin:left}
html[data-accent="mono"] .page-hero h1::after{background:#fff}
.page-hero .lead{margin-top:28px}
html.js .page-hero .crumb{animation:xUp .7s var(--x-expo) .06s both}
html.js .page-hero h1{animation:xUp .85s var(--x-expo) .16s both}
html.js .page-hero .lead{animation:xUp .8s var(--x-expo) .30s both}
html.js .page-hero h1::after{animation:xMark .6s var(--x-expo) .55s both}

/* -- smooth cross-page navigation (progressive enhancement; Chromium) -- */
@view-transition{navigation:auto}
.hd2{view-transition-name:site-header}

/* -- reduced-motion: neutralize every motion this block introduced -- */
@media (prefers-reduced-motion: reduce){
  .wcard,.pill,.seeall span{transition:none}
  html.js .page-hero .crumb, html.js .page-hero h1, html.js .page-hero .lead{animation:none}
  .page-hero h1::after{animation:none; transform:skewX(-13deg) scaleX(1)}
}

/* -- projects: unpopulated tile "coming soon" note -- */
.proj .soon-note{font-size:.82rem; color:var(--ink60)}
.proj.soon{opacity:.92}

/* -- v3.1 corrections (post-verify) -- */
.wgrid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}   /* 3 cards fill the row; no empty 4th track */
a.card:focus-visible,a.proj:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.proj:hover{transform:none; box-shadow:var(--sh-1)}                /* only clickable tiles lift... */
a.proj:hover{transform:translateY(-6px); box-shadow:var(--sh-3)}   /* ...so home tiles lift, projects.html divs don't */
.proj.soon:hover{cursor:default}
#main{scroll-margin-top:96px}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ==================================================================
   APPROVED INTEGRATIONS (hero v2 + mobile B + preloader A + map)
   ================================================================== */

/* -- hero v2: meter flash when a discharge pulse lands -- */
.hx-meter{transition:border-color .3s ease, box-shadow .35s ease}
.hx-meter.hit{border-color:color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow:0 0 30px -6px var(--accent)}

/* ===== mobile hero (<=880px) — one screen, backdrop grid (variant B) ===== */
.chip-short{display:none}
@media (max-width:880px){
  .chip-full{display:none}
  .chip-short{display:inline}
  .hx-chip{font-size:.66rem;padding:7px 14px;margin-bottom:18px}
  .sub-more{display:none}
  .hx-sub{margin:16px 0 22px;font-size:.95rem;line-height:1.6;max-width:none}
  .hx-h1{font-size:clamp(2.05rem, 8.6vw, 2.6rem);line-height:1.14}
  .hx-wrap{display:flex;flex-direction:column;justify-content:center;gap:0;
    min-height:100svh;padding-top:96px;padding-bottom:110px}
  .hx-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:430px}
  .hx-btn{text-align:center;padding:13px 8px;font-size:.86rem}
  .hx-btn-ghost{padding:11px 8px}
  .hx-stage{position:static;perspective:none}
  .hx-meter{position:absolute;left:clamp(16px,4vw,40px);right:clamp(16px,4vw,40px);bottom:16px;
    transform:none;border-radius:12px;padding:10px 14px;gap:10px}
  .hx-meter > *{transform:none}
  .hx-meter-txt{flex-direction:row;align-items:baseline;justify-content:space-between;width:100%;gap:10px}
  .hx-meter-label{font-size:.6rem}
  .hx-meter-val b{font-size:1.25rem}
  .hx-run .hx-stage{animation:none}
  .hx-run .hx-meter{animation:xUp .7s var(--x-expo) .85s both}
  .hx-cells{position:absolute;top:clamp(100px,15svh,150px);right:-10vw;width:56vw;max-width:260px;
    margin:0;opacity:.34;z-index:-1;gap:8px}
  .hx-cell{border-radius:12px}
  .hx-run .hx-cells{animation:xFade 1.1s var(--x-expo) .5s both}
  .sc-cpick{bottom:92px!important}
}

/* ===== preloader — variant A "Assembly" (session-once via html.pl-show) ===== */
.pl{display:none;position:fixed;inset:0;z-index:4000;background:var(--forest);
  align-items:center;justify-content:center;transition:transform .75s var(--x-p4)}
html.pl-show .pl{display:flex}
.pl::before{content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background:repeating-linear-gradient(-13deg,#fff 0 1px,transparent 1px 46px)}
.pl-box{display:flex;flex-direction:column;align-items:center;gap:26px}
.pl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;width:118px;transform:skewX(-13deg)}
.pl-cell{aspect-ratio:1;border-radius:8px;background:var(--accent);opacity:0}
.pl-word{font-family:'Anton',sans-serif;font-size:1.7rem;letter-spacing:.08em;color:#fff;opacity:0}
.pl-line{width:74px;height:4px;border-radius:3px;background:var(--accent);
  transform:skewX(-13deg) scaleX(0);transform-origin:left}
@keyframes plPop{from{opacity:0;transform:scale(.45)}60%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}
@keyframes plUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes plMark{to{transform:skewX(-13deg) scaleX(1)}}
html.pl-show .pl-cell{animation:plPop .5s var(--x-expo) both}
html.pl-show .pl-cell:nth-child(1){animation-delay:.05s}
html.pl-show .pl-cell:nth-child(2){animation-delay:.13s}
html.pl-show .pl-cell:nth-child(3){animation-delay:.21s}
html.pl-show .pl-cell:nth-child(4){animation-delay:.29s}
html.pl-show .pl-cell:nth-child(5){animation-delay:.37s}
html.pl-show .pl-cell:nth-child(6){animation-delay:.45s}
html.pl-show .pl-cell:nth-child(7){animation-delay:.53s}
html.pl-show .pl-cell:nth-child(8){animation-delay:.61s}
html.pl-show .pl-cell:nth-child(9){animation-delay:.69s}
html.pl-show .pl-word{animation:plUp .6s var(--x-expo) .85s both}
html.pl-show .pl-line{animation:plMark .5s var(--x-expo) 1.15s both}
.pl.out{transform:translateY(-101%)}
@media (prefers-reduced-motion: reduce){.pl{display:none!important}}

/* ===== projects map (gmap) ===== */
.gmap{background:radial-gradient(120% 130% at 70% -10%, #0c463c 0%, var(--forest) 58%);color:#fff}
.gmap h2{color:#fff}
.gmap .sub{color:#cfe0dc}
.gmap .sub b{color:#fff}
.gmap .mapbox{position:relative;margin-top:34px}
.gmap svg.geo{width:100%;height:auto;display:block;overflow:visible}
.gmap .hx-land{fill:#0B4237;stroke:rgba(255,255,255,.30);stroke-width:1.6}
.gmap .hx-sea-label{font-family:'BPG Arial',sans-serif;font-size:14px;letter-spacing:.32em;fill:rgba(255,255,255,.26)}
.gmap .hx-wave{stroke:rgba(255,255,255,.16);stroke-width:1.6;stroke-linecap:round;fill:none}
.gmap .pin{cursor:pointer;opacity:0;animation:pinIn .6s ease both;animation-delay:var(--pd,0s)}
@keyframes pinIn{from{opacity:0}to{opacity:1}}
.gmap .pin circle.core{fill:var(--accent);stroke:#04332B;stroke-width:2}
.gmap .pin.soon circle.core{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:3 3}
.gmap .pin circle.ring{fill:none;stroke:var(--accent);stroke-width:1.6;opacity:0;
  animation:ringPulse 2.6s var(--x-expo) infinite;animation-delay:var(--rd,0s)}
.gmap .pin.soon circle.ring{stroke:#fff}
@keyframes ringPulse{0%{opacity:.7;r:8}70%,100%{opacity:0;r:26}}
.gmap .tip{position:absolute;z-index:10;min-width:200px;max-width:250px;pointer-events:none;
  background:rgba(255,255,255,.97);color:var(--pine);border-radius:12px;padding:12px 15px;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.55);opacity:0;
  transition:opacity .25s ease,transform .3s var(--x-expo)}
.gmap .tip.on{opacity:1}
.gmap .tip b{display:block;font-size:.95rem;margin-bottom:3px}
.gmap .tip .m{display:flex;gap:12px;font-size:.78rem;color:#5F7A7A}
.gmap .tip .m i{font-style:normal;font-family:'Anton','BPG Arial Caps',sans-serif;color:var(--pine)}
.gmap .tip .st{display:inline-block;margin-top:7px;font-size:.66rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 9px;border-radius:6px;background:var(--accent);color:var(--on-accent)}
.gmap .tip.soon .st{background:#EDF2F0;color:#5F7A7A}
.gmap .legend{display:flex;gap:22px;margin-top:22px;font-size:.82rem;color:#cfe0dc;flex-wrap:wrap}
.gmap .legend span{display:inline-flex;align-items:center;gap:8px}
.gmap .legend i{width:11px;height:11px;border-radius:50%;background:var(--accent);flex:none}
.gmap .legend .s i{background:none;border:2px dashed #fff}
@media (prefers-reduced-motion: reduce){
  .gmap .pin{animation:none;opacity:1}
  .gmap .pin circle.ring{animation:none;opacity:0}
  .gmap .tip{transition:none}
  .hx-run .hx-cells,.hx-run .hx-meter{animation:none}
  .hx-meter{transition:none}
}


/* ==================================================================
   SERVICES v2 (approved: variant C "step deck") + animated brand icons
   ================================================================== */
.ic{width:76px;height:76px;display:block;color:var(--pine)}
.ic-skew{transform:skewX(-13deg);transform-origin:48px 48px}
.ic rect,.ic path,.ic line,.ic circle{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ic-dash{stroke-dasharray:3 4;opacity:.55}
.ic-trace{stroke:var(--accent);stroke-width:3;stroke-dasharray:60;stroke-dashoffset:60;
  animation:icTrace 2.6s var(--x-expo) infinite}
@keyframes icTrace{0%{stroke-dashoffset:60}45%,70%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.ic-pen{stroke:var(--accent);stroke-width:3;stroke-dasharray:96;stroke-dashoffset:96;
  animation:icPen 2.6s ease-in-out infinite}
@keyframes icPen{0%{stroke-dashoffset:96}40%,60%{stroke-dashoffset:0}100%{stroke-dashoffset:-96}}
.ic-drop{fill:currentColor;stroke:none;opacity:.14;
  animation:icDrop 3.6s ease-in-out infinite;animation-delay:calc(var(--i) * .18s)}
.ic-drop.ic-acc{fill:var(--accent)}
@keyframes icDrop{0%,8%{opacity:.14;transform:translateY(-5px)}18%,72%{opacity:1;transform:none}88%,100%{opacity:.14;transform:translateY(-5px)}}
.ic-cell{fill:var(--accent);stroke:none}
.ic-mast,.ic-bar{opacity:.8}
.ic-pulse{fill:var(--accent);stroke:none;offset-path:path('M34 44 H50 L56 36 L62 52 L68 44 H84');
  animation:icPulse 2.1s linear infinite}
@keyframes icPulse{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
.ic-wave{stroke:var(--accent);stroke-width:3;stroke-dasharray:110;stroke-dashoffset:110;
  animation:icWave 2.8s ease-in-out infinite}
@keyframes icWave{0%{stroke-dashoffset:110}55%,75%{stroke-dashoffset:0}100%{stroke-dashoffset:-110}}
.ic-dot{fill:var(--accent);stroke:none;animation:icDot 1.4s ease-in-out infinite}
@keyframes icDot{0%,100%{opacity:.25}50%{opacity:1}}
.ic-leg{opacity:.6}
.ic-tray{opacity:.85}

.svcsec{background:radial-gradient(120% 130% at 70% -10%, #0c463c 0%, var(--forest) 58%);color:#fff}
.svcsec h2{color:#fff}
.svcsec .sub{color:#cfe0dc}
.svcsec .seeall{color:#fff;margin-top:44px}
.svc-box{display:grid;grid-template-columns:minmax(220px,4fr) minmax(0,8fr);gap:clamp(24px,4vw,60px);
  margin-top:50px;align-items:start}
.svc-rail{display:grid;gap:6px}
.svc-tab{position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;
  text-align:left;background:none;border:none;border-radius:14px;padding:16px 18px;cursor:pointer;
  color:rgba(255,255,255,.55);transition:background .3s,color .3s;overflow:hidden;
  font-family:inherit}
.svc-tab:hover{background:rgba(255,255,255,.06);color:#fff}
.svc-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.svc-tab.on{background:rgba(255,255,255,.09);color:#fff}
.svc-tab b{font-family:'Anton',sans-serif;font-weight:400;font-size:1.15rem;letter-spacing:.04em}
.svc-tab.on b{color:var(--accent)}
.svc-tab span{font-family:'BPG Arial Caps',sans-serif;font-size:.92rem}
.svc-prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.12);
  transform:scaleX(0);transform-origin:left}
.svc-prog{transition:transform .12s linear}
.svc-tab.on .svc-prog{background:var(--accent)}
.svc-stage{position:relative;min-height:380px}
.svc-panel{position:absolute;inset:0;display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,3vw,44px);
  align-items:start;opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .45s ease,transform .55s var(--x-expo)}
.svc-panel.on{opacity:1;transform:none;pointer-events:auto}
.svc-ic{width:120px;height:120px;border-radius:24px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.svc-ic .ic{width:76px;height:76px;color:#fff}
.svc-tx h3{font-size:clamp(1.5rem,1.2rem+1.2vw,2.1rem);color:#fff;margin-bottom:10px}
.svc-tx > p{color:#cfe0dc;line-height:1.65;margin-bottom:16px;max-width:480px}
.svc-b{list-style:none;display:grid;gap:8px;margin-bottom:18px}
.svc-b li{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:#b9cdc9;line-height:1.55}
.svc-b li i{flex:none;width:8px;height:8px;border-radius:2px;background:var(--accent);transform:skewX(-13deg);margin-top:7px}
.svc-chip{display:inline-block;font-size:.72rem;font-weight:700;color:var(--on-accent);
  background:var(--accent);border-radius:999px;padding:6px 14px}
/* Phones and tablets: the two-column deck becomes an accordion.
   Stacking the rail above the stage put the content ~700px below the step you
   tapped, and the stage had to reserve room for the tallest panel, so short
   ones left a screen of empty space. display:contents lets the tabs and panels
   interleave — tab, its panel, next tab — without touching the markup, and each
   panel is only as tall as its own content. */
@media (max-width:980px){
  .svc-box{display:flex;flex-direction:column;gap:0;margin-top:34px;
    border-top:1px solid rgba(255,255,255,.12)}
  .svc-rail,.svc-stage{display:contents}

  .svc-tab{width:100%;grid-template-columns:auto 1fr auto;border-radius:0;padding:19px 4px;
    border-bottom:1px solid rgba(255,255,255,.12);background:none}
  .svc-tab.on,.svc-tab:hover{background:none;color:#fff}
  .svc-tab.on{border-bottom-color:transparent}
  .svc-tab::after{content:"";width:9px;height:9px;margin-right:6px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);opacity:.6;
    transition:transform .32s var(--x-expo),opacity .3s ease}
  .svc-tab.on::after{transform:rotate(-135deg);opacity:1}
  .svc-prog{display:none}          /* nothing auto-advances here any more */

  .svc-panel{position:static;inset:auto;display:none;grid-template-columns:1fr;gap:0;
    opacity:1;transform:none;pointer-events:auto;transition:none;
    padding:2px 4px 26px;border-bottom:1px solid rgba(255,255,255,.12)}
  .svc-panel.on{display:grid;animation:svcOpen .34s var(--x-expo) both}
  @keyframes svcOpen{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

  .svc-ic{width:58px;height:58px;border-radius:17px;margin-bottom:15px}
  .svc-ic .ic{width:36px;height:36px}
  .svc-tx h3{font-size:1.28rem;margin-bottom:8px}
  .svc-tx > p{margin-bottom:14px}
}
@media (max-width:980px) and (prefers-reduced-motion: reduce){
  .svc-panel.on{animation:none}
}

/* interleave order: tab 0, its panel, tab 1, its panel … */
@media (max-width:980px){
  .svc-tab[data-i="0"]{order:1}  .svc-panel[data-i="0"]{order:2}
  .svc-tab[data-i="1"]{order:3}  .svc-panel[data-i="1"]{order:4}
  .svc-tab[data-i="2"]{order:5}  .svc-panel[data-i="2"]{order:6}
  .svc-tab[data-i="3"]{order:7}  .svc-panel[data-i="3"]{order:8}
  .svc-tab[data-i="4"]{order:9}  .svc-panel[data-i="4"]{order:10}
}
@media (prefers-reduced-motion: reduce){
  .ic-trace,.ic-pen,.ic-drop,.ic-pulse,.ic-wave,.ic-dot{animation:none}
  .ic-drop{opacity:1;transform:none}
  .ic-trace,.ic-wave{stroke-dashoffset:0}
  .svc-tab.on .svc-prog{transform:scaleX(1)}
  .svc-panel{transition:none}
}


/* ===== services step deck: scroll-pinning (desktop) ===== */
.svc-view .wrap{width:100%}
@media (min-width:981px){
  section.svcsec{padding:0}
  .svc-pin{height:520svh;position:relative}
  .svc-view{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;
    overflow:hidden;padding:96px 0 44px}
}
@media (prefers-reduced-motion: reduce) and (min-width:981px){
  section.svcsec{padding:clamp(56px,9vw,110px) 0}
  .svc-pin{height:auto}
  .svc-view{position:static;min-height:0;padding:0;overflow:visible}
}


/* ==================================================================
   PROJECTS on home (approved: variant C "map + list", .pcsec)
   ================================================================== */
#projects.pcsec{background:radial-gradient(120% 130% at 70% -10%, #0c463c 0%, var(--forest) 58%);color:#fff}
.pcsec h2{color:#fff}
.pcsec .sub{color:#cfe0dc}
.pcsec .sub b{color:#fff}
.pcsec .seeall{color:#fff}
.pc-cols{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(26px,4vw,60px);
  margin-top:44px;align-items:center}
.pc-map svg{width:100%;height:auto;display:block;overflow:visible}
.pc-land{fill:#0B4237;stroke:rgba(255,255,255,.30);stroke-width:1.6}
.pcsec .pin circle.core{fill:var(--accent);stroke:#04332B;stroke-width:2}
.pcsec .pin.soon circle.core{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:3 3}
.pcsec .pin circle.ring{fill:none;stroke:var(--accent);stroke-width:1.6;opacity:0}
.pcsec .pin.soon circle.ring{stroke:#fff}
.pcsec .pin.hot circle.ring{opacity:.8;animation:pcRing 1.4s var(--x-expo) infinite}
.pcsec .pin.hot circle.core{stroke-width:3}
@keyframes pcRing{0%{r:8;opacity:.8}100%{r:26;opacity:0}}
.pc-rows{display:grid;gap:6px}
.pc-row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;text-align:left;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:13px;
  padding:15px 18px;cursor:pointer;color:#fff;font-family:inherit;
  transition:background .3s,border-color .3s,transform .35s var(--x-expo)}
.pc-row:hover,.pc-row.hot{background:rgba(255,255,255,.1);
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);transform:translateX(5px)}
.pc-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pc-dot{width:11px;height:11px;border-radius:50%;background:var(--accent);flex:none}
.pc-row.soon .pc-dot{background:none;border:2px dashed rgba(255,255,255,.6)}
.pc-name{font-family:'BPG Arial Caps',sans-serif;font-size:.95rem}
.pc-meta{font-size:.76rem;color:#9db8b3;white-space:nowrap}
.pc-row.soon{opacity:.8}
.pcsec .pchip{display:none}
@media (max-width:980px){
  .pc-cols{grid-template-columns:1fr}
}
/* Phones: the map is ~180px of dark green with 3px specks, six of which sit on
   top of each other around Tbilisi, and its whole point (hover a row, the pin
   lights up) does not exist on touch. The list carries the information; the
   full map lives on the projects page where it has room. */
@media (max-width:700px){
  .pc-map{display:none}
  .pcsec .sub-more{display:none}   /* the sentence points at a map that is gone */
  .pc-cols{margin-top:30px;gap:0}
  .pc-rows{gap:8px}
  /* name and figures no longer fight over one line: name on top, figures under */
  .pc-row{grid-template-columns:auto 1fr;gap:3px 11px;align-items:start;padding:13px 15px}
  .pc-row:hover,.pc-row.hot{transform:none}
  .pc-dot{margin-top:5px}
  .pc-name{grid-column:2;line-height:1.35}
  .pc-meta{grid-column:2;white-space:normal;font-size:.78rem}
}
@media (prefers-reduced-motion: reduce){
  .pcsec .pin.hot circle.ring{animation:none;opacity:0}
  .pc-row{transition:none}
}


/* ==================================================================
   CONTACT on home (approved: variant C "what happens next", LIGHT)
   ================================================================== */
.cc-cols{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,4vw,70px);align-items:center}
.cc-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.cc-card{background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:clamp(24px,3vw,38px);box-shadow:var(--sh-2)}
.cc-card h3{font-size:1.15rem;margin-bottom:20px}
.cc-steps{list-style:none;display:grid}
.cc-steps li{display:grid;grid-template-columns:auto 1fr;gap:16px;position:relative;padding-bottom:22px}
.cc-steps li:last-child{padding-bottom:0}
.cc-steps li::before{content:"";position:absolute;left:17px;top:38px;bottom:2px;width:2px;background:var(--line)}
.cc-steps li:last-child::before{display:none}
.cc-n{width:36px;height:36px;border-radius:11px;background:var(--accent);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:.95rem;
  transform:skewX(-13deg);flex:none;position:relative;z-index:1}
.cc-n b{transform:skewX(13deg);font-weight:400}
.cc-steps h4{font-size:.98rem;font-weight:700;margin-bottom:3px}
.cc-steps p{font-size:.8rem;color:var(--ink60);line-height:1.55}
@media (max-width:980px){
  .cc-cols{grid-template-columns:1fr}
}


/* ==================================================================
   CALCULATOR v2 — savings-first, presets, CTA
   ================================================================== */
.calc-minmax{display:flex;justify-content:space-between;font-size:.68rem;color:#9db8b3;margin-top:8px}
.calc-presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.calc-presets button{font-family:inherit;font-size:.78rem;font-weight:700;color:#cfe0dc;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:8px 15px;cursor:pointer;transition:border-color .3s,color .3s,background .3s}
.calc-presets button:hover{border-color:#fff;color:#fff}
.calc-presets button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.calc-presets button.on{background:var(--accent);color:var(--on-accent);border-color:transparent}
.calc-out{display:grid;gap:13px}
.calc-hero{background:color-mix(in srgb, var(--accent) 11%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);border-radius:14px;padding:18px 22px}
.calc-hero > span{font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:#cfe0dc;font-weight:700}
.calc-hero b{display:block;font-family:'Anton','BPG Arial Caps',sans-serif;font-weight:400;
  font-size:clamp(2rem,1.5rem+1.8vw,3rem);color:var(--accent);font-variant-numeric:tabular-nums;
  line-height:1.05;margin-top:4px}
.calc-hero small{font-size:.78rem;color:#b9cdc9;display:block;margin-top:5px;font-variant-numeric:tabular-nums}
.calc-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px}
.calc-mini > div{background:rgba(255,255,255,.07);border-radius:12px;padding:12px 14px}
.calc-mini b{display:block;font-family:'Anton','BPG Arial Caps',sans-serif;font-weight:400;
  font-size:1.15rem;color:#fff;font-variant-numeric:tabular-nums}
.calc-mini span{font-size:.66rem;color:#9db8b3;line-height:1.4;display:block;margin-top:3px}
.calc-pay{font-size:.82rem;color:#cfe0dc}
.calc-pay b{color:var(--accent)}
.calc-cta{text-align:center;margin-top:2px}
@media (prefers-reduced-motion: reduce){
  .calc-presets button{transition:none}
}

/* ============================================================
   WHITE ACCENT — dark-surface override layer.
   Every dark section flips the accent to white; light surfaces
   inherit the pine accent from :root. Keep this list in sync
   when a section changes its background tone.
   ============================================================ */
.hx-hero,.stats,.marq,.svcsec,.pcsec,.band,footer,
.page-hero,.gmap,.hd2,.pl,.equip,.case-info,.lb{
  --accent:#fff; --on-accent:#1C4040;
}
/* .calc is now a LIGHT section (rhythm break) → keeps the root pine accent */
/* hero highlight word: underline drawn as an inline background gradient —
   paints inside the line box (immune to the .ln mask) AND animates:
   the bar sweeps in left→right after the headline settles */
.hx-h1 em{text-decoration:none; padding-bottom:.14em;
  /* inline padding paints without changing line layout — it extends the
     background area below the glyphs. The bar sits at 92% (NOT 100%):
     the padded bottom edge falls outside the .ln line-mask and gets
     clipped, 92% lands in the visible gap under the letterforms. */
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat; background-position:0 calc(100% - .3em);
  background-size:100% .085em}
@media (prefers-reduced-motion: no-preference){
  html.js .hx-run .hx-h1 em{background-size:0% .085em}
  /* no preloader (in-site nav): draw after the headline lands */
  html.js:not(.pl-show) .hx-run .hx-h1 em{animation:emDraw .65s var(--x-expo) 1.25s forwards}
  /* preloader shown: hold at 0 and draw only once the curtain lifts
     (.pl-done is added by app.js when the preloader starts its exit) */
  html.js.pl-done .hx-run .hx-h1 em{animation:emDraw .65s var(--x-expo) .85s forwards}
}
@keyframes emDraw{to{background-size:100% .085em}}

/* ============================================================
   CALCULATOR — LIGHT surface (rhythm break before contact).
   Pine accent (inherited from :root); dark-theme colors flipped.
   ============================================================ */
.calc{background:var(--bg-soft); color:var(--pine)}
.calc .box{background:#fff; border:1px solid var(--line);
  box-shadow:0 30px 60px -30px rgba(4,51,43,.18)}
.calc label{color:var(--ink60)}
.calc .bill{color:var(--accent)}
.calc-minmax{color:var(--ink60)}
.calc input[type=range]{background:rgba(28,64,64,.14)}
.calc input[type=range]::-moz-range-track{background:rgba(28,64,64,.14)}
.calc input[type=range]{background:linear-gradient(90deg,var(--accent) 0 var(--cval,30%),rgba(28,64,64,.14) var(--cval,30%))}
.calc input[type=range]::-moz-range-track{background:linear-gradient(90deg,var(--accent) 0 var(--cval,30%),rgba(28,64,64,.14) var(--cval,30%))}
.calc-presets button{color:var(--pine); border:1px solid var(--line); background:#fff}
.calc-presets button:hover{border-color:var(--accent); color:var(--accent)}
.calc-presets button.on{background:var(--accent); color:var(--on-accent); border-color:transparent}
.calc-hero{background:color-mix(in srgb, var(--accent) 8%, #fff);
  border-color:color-mix(in srgb, var(--accent) 22%, transparent)}
.calc-hero > span{color:var(--ink60)}
.calc-hero small{color:var(--ink60)}
.calc-mini > div{background:var(--bg-soft); border:1px solid var(--line)}
.calc-mini b{color:var(--pine)}
.calc-mini span{color:var(--ink60)}
.calc-pay{color:var(--ink60)}
.calc .note{color:var(--ink60)}

/* real project photos inside the card frame */
.proj .ph img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   PROJECTS PAGE — case blocks (V-A for every project) + lightbox
   ============================================================ */
.cases{padding-bottom:20px}
.case{display:grid;grid-template-columns:7fr 5fr;border-radius:22px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 30px 70px -30px rgba(4,51,43,.28);
  margin-top:26px;background:#fff}
.case:first-of-type{margin-top:34px}
.case:nth-of-type(even) .case-media{order:2}
.case-media{position:relative;display:flex;flex-direction:column;min-height:380px}
.case-photo{position:relative;flex:1;display:block;overflow:hidden;min-height:300px;border:none;padding:0;background:#0c463c}
.case-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--x-expo)}
a.case-photo{cursor:zoom-in}
a.case-photo:hover img{transform:scale(1.035)}
a.case-photo:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.case-thumbs{position:absolute;left:14px;bottom:14px;display:flex;gap:8px;z-index:2}
.case-thumbs a{display:block;width:84px;height:58px;border-radius:10px;overflow:hidden;
  border:2px solid rgba(255,255,255,.85);box-shadow:0 6px 18px rgba(0,0,0,.35);cursor:zoom-in;
  transition:transform .3s var(--x-expo)}
.case-thumbs a:hover{transform:translateY(-3px)}
.case-thumbs a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.case-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.case-info{background:radial-gradient(120% 130% at 70% -10%, #0c463c 0%, var(--forest) 58%);
  color:#fff;padding:34px 32px;display:flex;flex-direction:column;gap:14px}
.case-kick{font-size:.68rem;letter-spacing:.12em;color:#9fbbb5;font-family:'BPG Arial Caps',sans-serif}
.case-kick.soonk{color:#e8d9a0}
.case-info h3{font-family:'Anton','BPG Arial Caps',sans-serif;font-weight:400;
  font-size:clamp(1.3rem,1.1rem+.8vw,1.7rem);color:#fff;line-height:1.15}
.case-addr{font-size:.84rem;color:#b9cdc9}
.case-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
.case-stats div{background:rgba(255,255,255,.07);border-radius:12px;padding:12px 14px}
.case-stats b{display:block;font-family:'Anton','BPG Arial Caps',sans-serif;font-weight:400;
  font-size:1.2rem;color:#fff;font-variant-numeric:tabular-nums}
.case-stats span{font-size:.66rem;color:#9db8b3;line-height:1.35;display:block;margin-top:3px}
@media (max-width:900px){
  .case{grid-template-columns:1fr}
  .case:nth-of-type(even) .case-media{order:0}
  .case-media{min-height:0}
  .case-photo{min-height:0;aspect-ratio:16/10;flex:none}
  .case-info{padding:24px 20px}
}

/* lightbox */
.lb{position:fixed;inset:0;z-index:4000;display:none;align-items:center;justify-content:center;
  background:rgba(4,35,29,.93);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lb.on{display:flex}
.lb img{max-width:min(1300px,92vw);max-height:86vh;border-radius:14px;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.7)}
.lb button{position:absolute;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);
  color:#fff;cursor:pointer;border-radius:50%;width:46px;height:46px;font-size:1.25rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .25s}
.lb button:hover{background:var(--accent);color:var(--on-accent)}
.lb .lb-x{top:20px;right:20px}
.lb .lb-p{left:18px;top:50%;transform:translateY(-50%)}
.lb .lb-n{right:18px;top:50%;transform:translateY(-50%)}
.lb .lb-c{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  color:#cfe0dc;font-size:.8rem;letter-spacing:.06em;font-family:'BPG Arial Caps',sans-serif}
.lb .lb-p.off,.lb .lb-n.off{display:none}

/* case block: looping project video + play button for the full cut */
.case-photo.has-vid{position:relative}
.case-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.case-play{position:absolute;right:14px;top:14px;z-index:3;display:inline-flex;align-items:center;gap:10px;
  padding:9px 16px 9px 12px;border-radius:999px;cursor:pointer;font-family:'BPG Arial Caps',sans-serif;
  font-size:.72rem;letter-spacing:.04em;color:#fff;border:1px solid rgba(255,255,255,.35);
  background:rgba(4,35,29,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .3s ease,color .3s ease,transform .3s var(--x-expo)}
.case-play i{width:0;height:0;border:7px solid transparent;border-left-color:currentColor;
  border-left-width:11px;margin-left:3px}
.case-play:hover{background:#fff;color:var(--pine);border-color:transparent;transform:translateY(-2px)}
.case-play:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion: reduce){ .case-vid{display:none} }
/* video lightbox */
.lb video{max-width:min(1300px,92vw);max-height:86vh;border-radius:14px;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.7);background:#000}

/* about: "why choose us" cards */
.whyh{margin-top:46px;font-family:'Anton','BPG Arial Caps',sans-serif;font-weight:400;
  font-size:clamp(1.2rem,1rem+.8vw,1.6rem);color:var(--pine)}
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:22px}
.whyc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px;
  transition:transform .45s var(--x-expo),border-color .3s ease}
.whyc:hover{transform:translateY(-4px);border-color:var(--accent)}
.whyi{display:block;width:44px;height:24px;border-radius:6px;background:var(--accent);
  transform:skewX(-13deg);margin-bottom:16px}
.whyc b{display:block;font-family:'BPG Arial Caps',sans-serif;font-weight:400;
  font-size:1.02rem;color:var(--pine);margin-bottom:8px;line-height:1.3}
.whyc p{font-size:.9rem;color:var(--ink60);line-height:1.65}

/* ============================================================
   CONTACT PAGE — ways cards, request form, next-steps footer
   ============================================================ */
.ct-ways{background:radial-gradient(120% 130% at 70% -10%, #0c463c 0%, var(--forest) 58%);color:#fff;
  --accent:#fff; --on-accent:#1C4040}
.ct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.ct-card{display:flex;flex-direction:column;gap:6px;padding:26px 24px;border-radius:18px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff;
  text-decoration:none;transition:transform .45s var(--x-expo),background .3s ease,border-color .3s ease}
.ct-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.4)}
.ct-card:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ct-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);margin-bottom:10px}
.ct-ic svg{width:22px;height:22px}
.ct-lbl{font-size:.7rem;letter-spacing:.12em;color:#9fbbb5;font-family:'BPG Arial Caps',sans-serif}
.ct-val{font-family:'Anton','BPG Arial Caps',sans-serif;font-weight:400;font-size:1.32rem;
  letter-spacing:.01em;line-height:1.2}
.ct-note{font-size:.78rem;color:#b9cdc9}
.ct-card.ct-primary{background:#fff;border-color:transparent;color:var(--pine)}
.ct-card.ct-primary .ct-ic{background:rgba(28,64,64,.08);border-color:rgba(28,64,64,.15)}
.ct-card.ct-primary .ct-lbl{color:var(--ink60)}
.ct-card.ct-primary .ct-note{color:var(--ink60)}
.ct-card.ct-primary:hover{background:#fff;transform:translateY(-4px);box-shadow:0 22px 44px -20px rgba(0,0,0,.5)}

.ct-main{background:var(--bg-soft)}
.ct-cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(26px,4vw,56px);align-items:start}
.ct-formwrap .sub{margin-bottom:26px}
.ct-form{display:grid;gap:16px;background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:clamp(22px,3vw,32px);box-shadow:0 30px 60px -34px rgba(4,51,43,.22)}
.ct-f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ct-form label{display:grid;gap:7px;font-size:.78rem;font-weight:700;color:var(--pine);letter-spacing:.01em}
.ct-form input,.ct-form select,.ct-form textarea{font-family:inherit;font-size:.92rem;font-weight:400;
  color:var(--pine);background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;outline:none;transition:border-color .25s ease,background .25s ease}
.ct-form input::placeholder,.ct-form textarea::placeholder{color:#9db0ad}
.ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{border-color:var(--accent);background:#fff}
.ct-form textarea{resize:vertical;min-height:96px;line-height:1.55}
.ct-send{width:100%;text-align:center;margin-top:4px}
.ct-hint{font-size:.74rem;color:var(--ink60);line-height:1.55;text-align:center}
.cc-foot{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:4px}
.cc-foot b{font-size:.9rem;color:var(--pine)}
.cc-foot span{font-size:.78rem;color:var(--ink60)}
@media (max-width:900px){
  .ct-cols{grid-template-columns:1fr}
  .ct-f2{grid-template-columns:1fr}
}

/* contact page: form standing alone (next-steps card removed) */
.ct-cols.ct-solo{grid-template-columns:minmax(0,1fr);max-width:760px;margin:0 auto}
.ct-cols.ct-solo .ct-formwrap{text-align:center}
.ct-cols.ct-solo .ct-form{text-align:left}
.ct-cols.ct-solo .sub{margin-left:auto;margin-right:auto}

/* ============================================================
   PROJECTS — in-progress cases read differently from built ones
   ============================================================ */
.cases-div{display:flex;align-items:center;gap:18px;margin:56px 0 4px;
  font-family:'BPG Arial Caps',sans-serif;font-weight:400;font-size:.82rem;
  letter-spacing:.14em;color:var(--ink60)}
.cases-div::before,.cases-div::after{content:"";height:1px;background:var(--line);flex:1}
.case.soon{border-style:dashed;border-color:#cfdcd8;box-shadow:none;background:transparent}
.case.soon .case-info{background:transparent;color:var(--pine);
  border-left:1px dashed #cfdcd8;--accent:var(--pine);--on-accent:#fff}
.case.soon .case-info h3{color:var(--pine)}
.case.soon .case-addr{color:var(--ink60)}
.case.soon .case-kick.soonk{color:#8a7328}
.case.soon .case-stats div{background:rgba(28,64,64,.05);border:1px dashed #d5e0dd}
.case.soon .case-stats b{color:var(--pine)}
.case.soon .case-stats span{color:var(--ink60)}
@media (max-width:900px){ .case.soon .case-info{border-left:none;border-top:1px dashed #cfdcd8} }

/* "under construction" artwork instead of a photo */
.case-soonart{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:20px;min-height:300px;padding:30px;
  background:repeating-linear-gradient(-13deg,rgba(28,64,64,.035) 0 12px,transparent 12px 26px)}
.case-soonart svg{width:132px;height:132px}
.sa-skew{transform:skewX(-13deg);transform-origin:48px 48px}
.sa-cell{fill:none;stroke:var(--pine);stroke-width:2.4;opacity:.28;stroke-dasharray:3 4}
.sa-cell.built{fill:var(--pine);stroke:none;opacity:.9;
  animation:saBuild 4.5s ease-in-out infinite;animation-delay:calc(var(--i) * .22s)}
@keyframes saBuild{0%,10%{opacity:.12}22%,72%{opacity:.9}88%,100%{opacity:.12}}
.sa-tag{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;
  background:#fff;border:1px dashed #cfdcd8;font-family:'BPG Arial Caps',sans-serif;
  font-size:.72rem;letter-spacing:.05em;color:var(--pine)}
.sa-tag i{width:8px;height:8px;border-radius:50%;background:#c8a63a;flex:none;
  animation:saPulse 1.8s ease-in-out infinite}
@keyframes saPulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion: reduce){
  .sa-cell.built,.sa-tag i{animation:none}
  .sa-cell.built{opacity:.9}
}
/* in-progress cards carry fewer stats — don't stretch them to the card's height */
.case.soon .case-stats{margin-top:8px}
.case.soon .case-info{justify-content:center;gap:12px}
.case.soon .case-media{min-height:0}
.case.soon .case-soonart{min-height:250px}

/* --- in-progress: louder, on the brand gold (#E0B84C) --- */
.cases-div{display:flex;align-items:center;gap:14px;margin:64px 0 6px;justify-content:flex-start}
.cases-div::before{display:none}
.cases-div::after{content:"";height:2px;background:repeating-linear-gradient(90deg,
  rgba(224,184,76,.75) 0 10px, transparent 10px 18px);flex:1;border-radius:2px}
.cd-chip{display:inline-flex;align-items:center;gap:9px;background:#E0B84C;color:#3a2c05;
  border-radius:999px;padding:8px 18px;font-family:'BPG Arial Caps',sans-serif;
  font-size:.78rem;letter-spacing:.08em}
.cd-chip::before{content:"";width:9px;height:9px;border-radius:50%;background:#3a2c05;
  animation:saPulse 1.8s ease-in-out infinite}
.cd-tx{font-family:'BPG Arial Caps',sans-serif;font-size:.9rem;color:var(--pine);letter-spacing:.02em}

.case.soon{border:2px dashed rgba(224,184,76,.7);
  background:linear-gradient(180deg, rgba(224,184,76,.09), rgba(224,184,76,.03))}
.case.soon .case-info{border-left:2px dashed rgba(224,184,76,.45);background:transparent}
.case.soon .case-kick.soonk{color:#9a7413;font-size:.72rem}
.case.soon .case-stats div{background:rgba(224,184,76,.14);border:1px solid rgba(224,184,76,.35)}
.case.soon .case-stats b{color:#5c4708}
.case.soon .case-stats span{color:#7a6420}
.case.soon .case-info h3{color:var(--pine)}
.case-soonart{background:repeating-linear-gradient(-13deg,
  rgba(224,184,76,.16) 0 14px, transparent 14px 30px)}
.sa-cell{stroke:#9a7413;opacity:.32}
.sa-cell.built{fill:#E0B84C;opacity:1}
.sa-tag{background:#E0B84C;border:none;color:#3a2c05;font-size:.76rem;padding:10px 20px;
  box-shadow:0 8px 22px -10px rgba(154,116,19,.8)}
.sa-tag i{background:#3a2c05}
@media (max-width:900px){
  .case.soon .case-info{border-left:none;border-top:2px dashed rgba(224,184,76,.45)}
}

/* stats: five tiles (built · generated · in-progress · years · warranty) */
.stats .wrap{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.stats .wrap{grid-template-columns:repeat(3,1fr); row-gap:26px}}
@media(max-width:720px){
  .stats .wrap{grid-template-columns:repeat(2,1fr)}
  .stats .wrap > div:last-child{grid-column:1 / -1}
}
/* Phones: five tiles in two columns left the fifth stranded on its own row, and
   the longer labels wrapped so no two rows were the same height. One column
   instead — figure left, label right — which stays even and scans in one pass. */
/* the 5% edge fade is only ~19px on a phone, so logos still hard-cut at the
   rim — widen it so they dissolve instead */
@media(max-width:600px){
  .eqmarq{-webkit-mask:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
                  mask:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent)}
  .equip{padding:22px 6px 24px}
}
@media(max-width:600px){
  .stats{padding:8px 0 14px}
  /* column-gap would break the divider in two — the gap lives inside b's padding
     so the rule runs unbroken across the row */
  .stats .wrap{grid-template-columns:auto 1fr;column-gap:0;row-gap:0;text-align:left}
  .stats .wrap > div{display:contents}
  .stats .wrap > div:last-child{grid-column:auto}
  .stats b{font-size:1.42rem;line-height:1.15;padding:13px 18px 12px 0;white-space:nowrap;
    border-bottom:1px solid rgba(255,255,255,.11)}
  .stats span{font-size:.82rem;text-align:right;align-self:center;padding:13px 0 12px;
    border-bottom:1px solid rgba(255,255,255,.11)}
  .stats .wrap > div:last-child b,
  .stats .wrap > div:last-child span{border-bottom:0}
}

/* ── mechanical odometer digits (live kWh figures) ──
   The digit cells are <span>s, so they must out-specify any ambient
   "<container> span" rule (e.g. .case-stats span sets .66rem + a colour). */
/* .odo.odo — doubled class so it out-specifies host rules like
   .case-stats b{display:block}, which otherwise forces a line break */
.odo.odo{display:inline-flex;align-items:baseline;line-height:1;flex-wrap:nowrap;white-space:nowrap}
.odo .odo-c,.odo .odo-s{font-size:inherit;color:inherit;letter-spacing:inherit;
  margin:0;line-height:1;vertical-align:baseline}
.odo .odo-c{display:inline-block;overflow:hidden;height:1em}
.odo .odo-c > i{display:block;font-style:normal;will-change:transform;
  transition:transform .6s cubic-bezier(.22,1,.28,1)}
.odo .odo-c > i > span{display:block;height:1em;line-height:1;text-align:center;
  font-size:inherit;color:inherit;margin:0}
@media (prefers-reduced-motion: reduce){ .odo .odo-c > i{transition:none} }
/* contact form: spam honeypot + submit feedback */
.ct-honey{display:none !important}
.ct-hint.ok{color:#1C4040;font-weight:700}
.ct-hint.bad{color:#b4432b;font-weight:700}
.ct-send[disabled]{opacity:.65;cursor:default}
.ct-hint a{color:inherit;text-decoration:underline}

/* legal pages */
.legal{max-width:760px}
.legal-upd{font-size:.82rem;color:var(--ink60);margin-bottom:28px}
.legal h2{font-family:'Anton','BPG Arial Caps',sans-serif;font-weight:400;
  font-size:clamp(1.05rem,.95rem+.5vw,1.35rem);color:var(--pine);margin:34px 0 10px}
.legal p{margin-bottom:12px}
.legal ul{margin:0 0 14px 20px;display:grid;gap:6px}
.legal li{color:var(--ink60);line-height:1.6}
.legal a{color:var(--pine);text-decoration:underline}
.ct-legal{font-size:.72rem;color:var(--ink60);line-height:1.55;text-align:center;margin-top:-6px}
.ct-legal a{color:var(--ink60);text-decoration:underline}

/* ---- inline icons ----------------------------------------------------
   Replaces the emoji that used to sit in buttons and text lines. Emoji are
   drawn by the OS in their own colours, so they clashed with the pine
   buttons and looked different on every machine. These are stroked paths
   that inherit currentColor, so one icon works on light and dark alike. */
.ico{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.17em;
  margin-right:.5em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.hd2-cta .ico{margin-right:.45em;width:1em;height:1em;vertical-align:0}
.hours .ico{margin-right:.42em;opacity:.75}

/* ===== mobile polish: contact buttons + footer nav ===== */
@media (max-width:560px){
  /* stacked, the two buttons sized to their own text and looked ragged */
  .cc-row{display:grid;grid-template-columns:1fr;gap:10px}
  .cc-row .btn{text-align:center}
}
@media (max-width:600px){
  /* flex-wrap left a hole mid-row and pushed the last link to the edge */
  footer .fnav{display:grid;grid-template-columns:1fr 1fr;gap:13px 16px}
  footer .copy{margin-top:20px;font-size:.76rem;line-height:1.55}
}

/* Phones: the four cards stacked to ~200px each — 800px of screen just to list
   a phone number and three links. Icon moves beside the label instead of above
   it, which halves the height without losing anything. */
@media (max-width:600px){
  .ct-grid{gap:11px}
  .ct-card{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;
    align-items:center;padding:15px 16px;border-radius:15px}
  .ct-ic{grid-row:1 / span 2;width:40px;height:40px;border-radius:11px;margin-bottom:0}
  .ct-ic svg{width:20px;height:20px}
  .ct-lbl{grid-column:2;font-size:.64rem;letter-spacing:.1em}
  .ct-val{grid-column:2;font-size:1.06rem;line-height:1.2}
  .ct-note{grid-column:2;grid-row:3;font-size:.74rem;margin-top:3px}
  .ct-card:hover{transform:none}
}

/* ===== რჩევები (blog): index cards + article niceties ===== */
.bloggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.bcard{display:flex;flex-direction:column;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:26px 24px;text-decoration:none;color:inherit;box-shadow:var(--sh-2);
  transition:transform .4s var(--x-expo),box-shadow .35s ease,border-color .3s ease}
.bcard:hover{transform:translateY(-4px);border-color:var(--pine);
  box-shadow:0 18px 40px -18px rgba(28,64,64,.35)}
.bcard .bk{font-family:'BPG Arial Caps',sans-serif;font-size:.66rem;letter-spacing:.12em;
  color:var(--ink60)}
.bcard h2{font-size:1.08rem;line-height:1.4;color:var(--ink)}
.bcard p{font-size:.88rem;line-height:1.6;color:var(--ink60)}
.bcard .bmore{margin-top:auto;padding-top:10px;font-weight:700;font-size:.85rem;color:var(--pine)}
/* article body links read as links */
.prose a{color:var(--pine);text-decoration:underline;text-underline-offset:2px}

/* ---- hero meter: day/night state (the counter freezes at night) ---- */
.hx-meter-state{display:flex;align-items:center;gap:6px;margin-top:5px;
  font-family:'BPG Arial Caps',sans-serif;font-size:.56rem;letter-spacing:.1em;
  color:rgba(255,255,255,.62)}
.hx-meter-state em{font-style:normal}
.hx-meter-state svg{width:11px;height:11px;flex:none}
.ms-sun{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.ms-moon{fill:currentColor;display:none}
.ms-night{display:none}
.hx-meter.is-night .ms-sun{display:none}
.hx-meter.is-night .ms-moon{display:block}
.hx-meter.is-night .ms-day{display:none}
.hx-meter.is-night .ms-night{display:inline}
.hx-meter.is-night .hx-dot{opacity:.4}
.hx-meter.is-night .hx-dot::after{animation:none;opacity:0}
@media (max-width:880px){
  .hx-meter-txt{flex-wrap:wrap}
  .hx-meter-state{width:100%;margin-top:3px}
}