/* Shared chrome — mirrors final LAV Interiors header / footer / cards / controls.
   Keep in sync with index.html overrides. Paths assume /visual/ → ../images/ */
:root{
  --paper:#EFE9DF;
  --paper-2:#E8E1D5;
  --paper-warm:#E4DDD0;
  --cream:#D9D0C1;
  --ink:#1A1714;
  --muted:#6B6358;
  --line:rgba(26,23,20,.12);
  --sans:"Manrope", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
  --script:"Italianno","Snell Roundhand","Apple Chancery",cursive;
  --container:1180px;
  --gutter:22px;
  --header-h:112px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --shadow:0 18px 55px rgba(26,20,10,.14);
  --shadow-soft:0 10px 30px rgba(26,20,10,.10);
  --molding:rgba(26,23,20,.16);
  --molding-inner:rgba(26,23,20,.10);
  --sage:#8A7A62;
}
html[data-lang="ru"]{
  --script:"Italianno","Snell Roundhand","Apple Chancery",cursive !important;
}
*{box-sizing:border-box}
html,body{height:100%}
html,body{background:var(--paper)}
body{
  margin:0;
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:rgba(247,244,239,.92);
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

.eyebrow{
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(20,20,20,.56);margin:0 0 10px;font-family:var(--sans);
}
.h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(28px,4vw,44px);letter-spacing:.06em;
  text-transform:uppercase;margin:0 0 12px;line-height:1.14;
}
.lead{
  font-size:15px;line-height:1.75;color:rgba(26,23,20,.72);
  max-width:58ch;margin:0;
}
.script{
  font-family:var(--script);font-size:clamp(28px,3.2vw,40px);
  font-weight:400;letter-spacing:.02em;color:rgba(26,23,20,.78);
  font-style:italic;line-height:1.18;
}

.btn,.btnSend{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid rgba(20,20,20,.22);
  background:rgba(255,255,255,.42);
  padding:14px 18px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;
  border-radius:0 !important;
  transition:transform 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease);
}
.btn:hover,.btnSend:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.62);
  border-color:rgba(20,20,20,.32);
}
.btn.primary,.btn-dark{
  background:rgba(26,23,20,.92);color:#f4efe6;border-color:rgba(26,23,20,.92);
}
.btn.primary:hover{background:#111;color:#fff}
.btn.ghost{background:transparent}

/* Header — exact main-site structure */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(228,221,208,.88);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.header-inner{
  height:var(--header-h);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  padding:8px 0;
}
.nav-left{
  display:flex;align-items:center;gap:18px;
  justify-content:flex-start;min-width:0;flex-wrap:wrap;
}
.nav-left a,
.header-cta-service{
  font-family:var(--sans) !important;
  font-size:10px !important;
  letter-spacing:.22em !important;
  text-transform:uppercase !important;
  color:rgba(20,20,20,.72) !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:10px 2px !important;
  white-space:nowrap;
  position:relative;
  opacity:.92;
  text-align:left !important;
  max-width:none !important;
  text-decoration:none !important;
}
.nav-left a::after{
  content:"";
  position:absolute;left:0;right:0;bottom:6px;height:1px;
  background:rgba(20,20,20,.35);
  transform:scaleX(0);transform-origin:left;
  transition:transform 260ms var(--ease);
}
.nav-left a:hover{opacity:1}
.nav-left a:hover::after{transform:scaleX(1)}
/* LAV Visual Studio on the right — same type as Portfolio, no underline */
.header-cta-service::after,
.header-cta-service:hover::after{
  content:none !important;
  display:none !important;
}
.header-cta-service:hover{
  opacity:1;
  transform:none !important;
  background:transparent !important;
  text-decoration:none !important;
}

.brand-center{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;min-width:0;text-align:center;
}
.brand-center .brand-top{
  font-family:var(--serif);font-weight:500;font-size:22px;
  letter-spacing:.10em;text-transform:uppercase;line-height:1;white-space:nowrap;
}
.brand-center .brand-sub{
  font-family:var(--sans);font-size:10px;letter-spacing:.32em;
  text-transform:uppercase;color:rgba(20,20,20,.58);white-space:nowrap;
}
.brand-center .brand-script{
  font-family:var(--script);font-size:28px;letter-spacing:.02em;
  line-height:1.18 !important;color:rgba(20,20,20,.82);
  white-space:nowrap;font-style:italic;
  transform:none !important;margin-top:0 !important;
}
html[data-lang="ru"] .brand-center .brand-script{display:block !important;}

.actions-right{
  display:flex !important;align-items:center;justify-content:flex-end;
  gap:24px;min-width:0;
}
.lang{
  display:flex;align-items:center;gap:8px !important;
  padding:10px 0 !important;border-radius:0 !important;
  border:none !important;background:transparent !important;
  font-family:var(--sans);letter-spacing:.30em;text-transform:uppercase;
  font-size:10px;color:rgba(20,20,20,.62);user-select:none;white-space:nowrap;
}
.lang button{
  border:0;background:transparent;cursor:pointer;opacity:.85;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
}
.lang button.active{opacity:1;color:rgba(20,20,20,.92)}
.lang .sep{opacity:.45}

/* Molding cards — main site */
.molding,
.vs-card,
.pricing .box,
.contactCard,
.vs-step,
.vs-cat,
.vs-format,
.vs-final{
  border-radius:0 !important;
  border:1px solid var(--molding) !important;
  outline:1px solid var(--molding-inner) !important;
  outline-offset:-7px !important;
  box-shadow:none !important;
  background:rgba(255,255,255,.42) !important;
}

/* Section photo backgrounds — full-bleed like main site */
.section{
  padding:88px 0;
  position:relative !important;
  isolation:isolate;
  overflow:hidden;
  z-index:1;
  width:100%;
  margin:0;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  background:transparent !important;
}
.section.tight{padding:72px 0}
.section > .wrap{position:relative;z-index:1}
.section-bg{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background-color:#d9d0c1;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  transform:scale(1.06);
  transform-origin:center center;
  filter:none;
}
.section-bg::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  /* Same warm wash as main site sections */
  background:linear-gradient(180deg, rgba(239,233,223,.58), rgba(239,233,223,.66)) !important;
}
#vs-work > .section-bg{background-image:url('../images/vs-bg-work.webp') !important}
#vs-showcase > .section-bg{background-image:url('../images/vs-bg-showcase.webp') !important}
#order > .section-bg{background-image:url('../images/vs-bg-order.webp') !important}

/* kill old bg-on-section rules if any */
.section::before{content:none !important;display:none !important}

/* Pricing field / result — main calculator language */
.pricing .box{
  padding:22px;
  display:flex;flex-direction:column;min-height:100%;position:relative;
}
.pricing .field{
  margin-top:12px;
  border:1px solid rgba(20,20,20,.12);
  background:rgba(255,255,255,.38);
  border-radius:0;
  padding:12px;
  transition:border-color 220ms var(--ease), transform 220ms var(--ease), background 220ms var(--ease);
}
.pricing .field:focus-within{
  border-color:rgba(20,20,20,.24);
  background:rgba(255,255,255,.55);
  transform:translateY(-1px);
}
.pricing .label{
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(20,20,20,.56);margin-bottom:8px;font-family:var(--sans);
}
.pricing .control{
  width:100%;border:0;background:transparent;outline:none;
  font-size:14px;color:rgba(20,20,20,.90);padding:6px 2px 2px;
  appearance:none;font-family:var(--sans);
}
.result{
  margin-top:16px;
  border:1px solid rgba(20,20,20,.10);
  background:rgba(255,255,255,.32);
  padding:12px;
  display:grid;gap:10px;
  border-radius:0;
}
.metric{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border-bottom:1px solid rgba(20,20,20,.08);padding-bottom:10px;
}
.metric:last-child{border-bottom:0;padding-bottom:0}
.metric .k{
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(20,20,20,.56);font-family:var(--sans);
}
.metric .v{
  font-family:var(--serif);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;font-size:16px;color:rgba(20,20,20,.92);
  text-align:right;
}
.metric .v.total{
  font-size:28px;letter-spacing:.04em;text-transform:none;
}
.calcActions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;padding-top:10px}
.chip{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(20,20,20,.16);background:rgba(255,255,255,.4);
  padding:10px 12px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;border-radius:0 !important;
}
.chip.active,.chip.is-active{
  background:rgba(26,23,20,.9);color:#f4efe6;border-color:rgba(26,23,20,.9);
}
.tab{
  border:1px solid rgba(20,20,20,.16);background:rgba(255,255,255,.35);
  padding:11px 14px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;border-radius:0 !important;
}
.tab.active{
  background:rgba(26,23,20,.92);color:#f4efe6;border-color:rgba(26,23,20,.92);
}

/* Footer */
.site-footer, footer.site-footer{
  position:relative;overflow:hidden;
  border-top:1px solid var(--line) !important;
  padding:48px 0 28px;
  background-image:url('../images/vs-bg-footer.webp') !important;
  background-size:cover !important;
  background-position:center !important;
  isolation:isolate;
}
.site-footer::before{
  content:"" !important;position:absolute !important;inset:0 !important;
  z-index:0 !important;pointer-events:none !important;
  background:linear-gradient(180deg, rgba(239,233,223,.58), rgba(239,233,223,.66)) !important;
}
.site-footer > *{position:relative;z-index:1}
.footerInner{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
}
.footer-final{
  display:grid !important;
  grid-template-columns:minmax(250px,.95fr) minmax(260px,.72fr) minmax(420px,1.33fr) !important;
  align-items:start !important;
}
.footBrand{display:flex;flex-direction:column;gap:8px;max-width:44ch}
.footBrand .name{
  font-family:var(--serif);letter-spacing:.10em;text-transform:uppercase;
  font-weight:500;font-size:16px;margin:0;
}
.footBrand .desc{
  margin:0;font-size:12px;line-height:1.7;color:rgba(20,20,20,.64);font-family:var(--sans);
}
.legal-note-footer{margin-top:10px}
.footLinks{display:flex;gap:14px;flex-wrap:wrap}
.footLinks a{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.78;
}
.footLinks a:hover{opacity:1}
.footSocial{display:flex;gap:10px;flex-wrap:wrap}
.footSocial a{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px solid rgba(20,20,20,.18);padding-bottom:2px;
}
.footerLegal{
  margin-top:20px !important;padding-top:18px;
  border-top:1px solid rgba(20,20,20,.10);
  display:grid;grid-template-columns:1fr 1.2fr;gap:18px;align-items:start;
}
.legalLinks{display:flex;flex-wrap:wrap;gap:12px 16px}
.legalLinks a{font-size:11px;letter-spacing:.04em;color:rgba(20,20,20,.62)}
.legalLinks a:hover{color:rgba(20,20,20,.9)}
.legalInfo{font-size:11px;line-height:1.7;color:rgba(20,20,20,.55)}

@media(max-width:980px){
  .header-inner{grid-template-columns:1fr;height:auto;padding:14px 0;gap:10px}
  .nav-left{flex-wrap:wrap;justify-content:center}
  .actions-right{justify-content:center}
  .brand-center{order:-1}
  .footer-final,.footerLegal{grid-template-columns:1fr !important}
  :root{--header-h:auto}
}
@media(max-width:720px){
  .nav-left{gap:10px}
  .nav-left a{font-size:9px !important;letter-spacing:.18em !important}
  .section{padding:52px 0}
}