/* ===================
   Design tokens
==================== */
:root{
  --bg:#f3f5f8; --panel:#ffffff; --muted:#616e7c; --brand:#ff8a00; --brand-2:#ff5d00;
  --text:#111318; --border:#e5e7eb; --soft:#f8fafc; --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

/* =============== Base =============== */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0}

/* =============== Header =============== */
.site-header{position:sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid var(--border); backdrop-filter:saturate(180%) blur(6px); overflow-x:clip}
.site-bar{
  max-width:1200px; margin:0 auto; padding:10px 18px;
  display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"brand nav right";
  gap:14px; align-items:center;
}
.brand{grid-area:brand; display:flex; align-items:center; gap:12px}
.brand .logo-link{display:block; width:100px; height:100px; flex:0 0 100px; border-radius:14px; box-shadow:var(--shadow); overflow:hidden; background:#fff}
.brand .logo-link img{width:100%; height:100%; object-fit:contain; display:block}
.brand .slogan{color:#111; font-weight:800; letter-spacing:.1px; line-height:1.22; font-size:18.75px; max-width:20ch; user-select:text}

.site-links{grid-area:nav; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:nowrap; min-width:0; overflow:hidden}
.site-links .link{display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:#f7f8fb; color:#111; font-weight:600; white-space:nowrap; transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}
.site-links .link:hover{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; border-color:transparent; box-shadow:0 8px 22px rgba(255,138,0,.25)}
.site-links .cta{display:inline-flex; align-items:center; justify-content:center; padding:8.8px 13.2px; border-radius:999px; border:0; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; font-weight:800; box-shadow:0 8px 20px rgba(255,138,0,.22); transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; white-space:normal}
.site-links .cta .stack{display:flex; flex-direction:column; align-items:center; line-height:1.05; font-size:100%}
.site-links .cta:hover{ filter:saturate(110%); box-shadow:0 10px 26px rgba(255,138,0,.30) }
.site-links .cta:active{ transform:translateY(1px) }

.right-strip{grid-area:right; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding-right:10%}
.address{display:flex; flex-direction:column; line-height:1.15}
.right-strip .phone{ white-space:nowrap }

/* Mobile toggle */
.burger{ display:none; width:42px; height:42px; border:1px solid var(--border); border-radius:12px; background:#fff; cursor:pointer; align-items:center; justify-content:center }
.burger svg{ width:22px; height:22px }
.mobile-panel{ display:none; position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--border); box-shadow:0 14px 30px rgba(0,0,0,.06) }
.mobile-panel a{ display:block; padding:14px 18px; border-top:1px solid #f1f5f9; color:#111 }
.mobile-panel a:hover{ background:#fff7ef }
.mobile-panel .cta{ display:block; margin:10px 18px; text-align:center }
.site-header.open .mobile-panel{ display:block }

/* =============== Main =============== */
.hero{display:grid;grid-template-columns:1.85fr .85fr;gap:22px;margin-top:16px; align-items:flex-start} /* top-align grid items */
.hero-card{position:relative;overflow:hidden;border-radius:18px;background:#fff;box-shadow:var(--shadow);border:1px solid var(--border);min-height:420px}
.slides{position:absolute;inset:0}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;background:#fff;opacity:0;transition:opacity .6s ease}
.slides img.active{opacity:1}
.scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%, rgba(255,255,255,.85) 75%)}
.content{position:absolute;inset:0;padding:28px;display:flex;flex-direction:column;justify-content:flex-end}
.badges{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.badge{background:#f3f4f6;border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-size:12px;color:#374151;cursor:pointer}
.badge.active{background:rgba(255,138,0,.12);border-color:#ffc085}
.hero h2{font-size:34px;line-height:1.15;margin:0 0 8px}
.hero p{margin:0;color:var(--muted)}

.calc{background:#fff;border-radius:18px;padding:18px;box-shadow:var(--shadow);border:1px solid var(--border); align-self:flex-start} /* calc hugs its content */
.calc small{color:var(--muted)}

/* --- Compact calculator spacing + controls (~10% shorter) --- */
.calc{ padding:14px 14px 12px; }
.calc h3{ font-size:18px; margin-bottom:6px; }
.calc small{ display:block; margin-bottom:8px; }
.calc .row{ margin:8px 0; }
.calc .grid-2{ gap:8px; }
.calc .btn{ padding:9px 11px; line-height:1.15; }
select{ width:100%; padding:10px 40px 10px 12px; border-radius:12px; border:1px solid var(--border); background:#fff; color:#111; font:inherit; outline:none; -webkit-appearance:none; appearance:none; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%236a7381" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>'); background-repeat:no-repeat; background-position:right 12px center; background-size:20px }
input[type=range]{ width:100%; height:10px; margin-top:6px; background:#e5e7eb; border-radius:999px; outline:none; -webkit-appearance:none; border:1px solid #d1d5db }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-2)); cursor:pointer; box-shadow:0 6px 18px rgba(255,138,0,.25) }
.price{ display:flex; justify-content:space-between; align-items:center; background:var(--soft); border:1px solid var(--border); border-radius:12px; padding:8px 10px }
.calc .row:last-child{ margin-bottom:0 } /* no extra space under last row */
.calc .row--center{ display:flex; justify-content:center } /* helper class for centered row */

/* Defaults used elsewhere */
.row{margin:10px 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn{padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#f3f4f6;cursor:pointer}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:0;font-weight:700}

.section{margin-top:24px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{border-radius:18px;background:#fff;padding:18px;border:1px solid var(--border);box-shadow:var(--shadow)}
.card h4{margin:0 0 8px}
.card p{margin:0;color:var(--muted)}
.tabs{display:flex;gap:8px;margin:6px 0 14px}
.tab{padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:#f3f4f6;color:#374151;cursor:pointer}
.tab.active{background:rgba(255,138,0,.12);border-color:#ffc085}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(117px,1fr));gap:6px}
.tile{position:relative;aspect-ratio:5/12;overflow:hidden;border-radius:14px;background:#f1f5f9;border:1px solid var(--border)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.contact{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;margin:22px 0}
.box{border-radius:18px;background:#fff;padding:18px;border:1px solid var(--border)}
.inp{width:100%;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid #d1d5db;color:#111}
.inp::placeholder{color:#9aa3b2}
footer{text-align:center;margin:20px 0;color:#6b7280}

/* =============== Responsive (single, unified block) =============== */
@media (max-width: 1000px){
  .brand .slogan{ font-size:14px }
}

@media (max-width: 900px){
  /* Header compact layout */
  .site-bar{
    padding:8px 12px; row-gap:6px;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "brand brand burger"
      "right  right  right";
  }
  .site-links{ display:none !important } /* burger only on mobile */
  .burger{ display:flex; grid-area:burger }
  .brand .logo-link{ width:72px; height:72px }
  .brand .slogan{ font-size:clamp(16px, 4.6vw, 18px) }
  .right-strip{ grid-area:right; padding-right:0; flex-direction:row; flex-wrap:wrap; gap:10px 14px; align-items:center }

  /* Right-align address & phone to the edge on mobile */
  .right-strip{ margin-left:auto; width:100%; justify-content:flex-end; text-align:right }
  .right-strip .address, .right-strip .phone{ text-align:right }

  /* Gallery tiles: 35% smaller vs original 130px → ~84px */
  .gallery{ grid-template-columns:repeat(auto-fill,minmax(84px,1fr)) !important; }

  .right-strip .address{ line-height:1.15 }
  .right-strip .phone{ white-space:nowrap }

  /* Hero single column, calculator below */
  .hero{ grid-template-columns:1fr !important; gap:16px; margin-top:8px }
  .calc{ position:static; width:100% }

  /* Hero image & content behavior */
  .hero-card{ min-height:60vh }
  .slides img{ object-fit:contain; background:#fff }
  .scrim{
    position:absolute; left:0; right:0; bottom:0; top:auto;
    height:60%;
    background:linear-gradient(0deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.86) 45%, rgba(255,255,255,0) 100%);
    pointer-events:none;
  }
  .content{
    position:absolute; left:0; right:0; bottom:0; top:auto;
    padding:12px 16px calc(22px + env(safe-area-inset-bottom, 0px));
    display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
  }
  .badges{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; margin:0 0 8px;
  }
  .badge{ padding:6px 10px; font-size:13px; text-align:center; white-space:nowrap; text-overflow:ellipsis; overflow:hidden }
  .hero h2{ font-size:clamp(20px,5.4vw,26px); line-height:1.15; margin:0 }
  .hero p{ font-size:14px; margin:0 }

  /* Grids */
  .cards{ grid-template-columns:1fr }
  .contact{ grid-template-columns:1fr }

  /* Locks: 20% smaller buttons */
  .locks .btn{ padding:9px 10px; font-size:.9rem }

  /* add bottom padding after Uzstādīšana row */
  .install-row{ padding-bottom:2% }
}

/* ===== Desktop: make header menu ~25% bigger ===== */
@media (min-width: 901px){
  .site-links{ gap:12px; }
  .site-links .link{
    font-size: 125%;
    padding: 10px 15px; /* bigger chips */
  }
  .site-links .cta{
    font-size: 125%;
    padding: 11px 16px;
  }
  .site-links .cta .stack{ font-size: 100%; } /* keep two-line layout stable */
  
  
  /* Force bigger menu buttons everywhere */
.site-header .site-links .link{
  font-size:120% !important;
  padding:10px 15px !important;
}

.site-header .site-links .cta{
  font-size:130% !important;
  padding:11px 16px !important;
}
/* Desktop: let hero-card be controlled by JS height */
@media (min-width: 901px){
  .hero-card{ min-height:0; }
}
/* Auto-growing textarea: no scrollbars, no manual drag */

/* Auto-growing textarea */
/* Auto-growing textarea (fills width like other inputs) */
#message{
  box-sizing: border-box !important;  /* match other .inp fields */
  width: 100% !important;
  display: block;

  overflow: hidden;
  resize: none;         /* remove the drag handle; delete this line if you want it */
  max-height: 60vh;
  line-height: 1.3;
}

  
}