/* Ярче Дом — дизайн-система v3 */

:root{
  --paper: #FFF6EA;
  --paper-2: #F5EBD9;
  --ink: #12273C;
  --slate: #5B6672;
  --signal: #1B3A5C;
  --signal-light: #E4EAEE;
  --copper: #B5652E;
  --whatsapp: #25D366;
  --line: #E7DECF;
  --font-display: 'Playfair Display', serif;
  --font-body: 'Alice', serif;
  --font-hero: 'Playfair Display', serif;

  --container: 1120px;

  /* one consistent size for every H2 / H3 on the site */
  --h2-size: clamp(20px, 2.1vw, 26px);
  --h3-size: clamp(16px, 1.5vw, 18px);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h2{ font-size: var(--h2-size); }
h3{ font-size: var(--h3-size); font-weight: 600; }
.one-line{ white-space: nowrap; }
@media (max-width: 480px){ .one-line{ white-space: normal; } }

p{ margin: 0 0 1em; max-width: 62ch; }
a{ color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }
.section{ padding: clamp(48px, 8vw, 100px) 0; border-top: 1px solid var(--line); text-align:center; }
.section:first-of-type{ border-top: none; }
.section-head{ text-align: center; }
.eyebrow{ font-family: var(--font-body); font-style: italic; color: var(--slate); font-size: 17px; margin: 0 0 12px; }
.lede{ font-size: clamp(19px, 2vw, 22px); color: var(--slate); max-width: 56ch; margin-left:auto; margin-right:auto; }

/* Icons */
.icon{
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--ink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.icon svg{ width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons */
.btn{
  display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 18px;
  padding: 15px 28px; border-radius: 3px; text-decoration: none; border: 1px solid transparent;
}
.btn-primary{ background: var(--signal); color: var(--paper); }
.btn-primary:hover{ background: #142d47; }
.btn-secondary{ color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover{ background: var(--paper-2); }
.btn-hero{ background: var(--copper); color: #FFF6EA; font-size: 17px; padding: 17px 34px; }
.btn-hero:hover{ background: #9c5526; }
.btn-whatsapp{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--whatsapp); color: #fff; font-family: var(--font-body); font-weight: 600;
  font-size: 14px; padding: 9px 16px; border-radius: 4px; text-decoration: none;
}
.btn-whatsapp:hover{ background: #1fb959; }
.btn-whatsapp svg{ width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 1.8; }

/* Header */
.site-header{
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,246,234,0.95); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

/* Homepage: header sits directly over the hero image */
body:has(.hero) .site-header{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
}
body:has(.hero) .nav-links a,
body:has(.hero) .header-phone{
  color: #fff;
}
body:has(.hero) .nav-links a:hover,
body:has(.hero) .header-phone:hover{
  color: #fff;
}
body:has(.hero) .nav-toggle-label{
  color: #fff;
}
.header-row{
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 12px clamp(20px, 5vw, 48px); max-width: var(--container); margin: 0 auto;
}
.logo{ display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo img{ height: 48px; width: auto; display: block; }
.nav-links{ display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-links a{ color: var(--ink); text-decoration: none; font-family: var(--font-body); font-size: 15px; font-weight: 500; white-space: nowrap; }
.nav-links a:hover{ color: var(--signal); }
.header-contact{ display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.header-phone{ color: var(--ink); text-decoration: none; font-family: var(--font-body); font-weight: 500; font-size: 14px; white-space: nowrap; }
#nav-toggle{ display: none; }
.nav-toggle-label{ display: none; cursor: pointer; font-size: 24px; color: var(--ink); }

@media (max-width: 900px){
  .header-phone{ display: none; }
  .nav-links{
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line); max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  .nav-links li{ border-top: 1px solid var(--line); width: 100%; }
  .nav-links a{ display: block; padding: 14px clamp(20px, 5vw, 48px); }
  .nav-links li:last-child{ padding: 14px clamp(20px, 5vw, 48px); }
  #nav-toggle:checked ~ .nav-links{ max-height: 400px; }
  .nav-toggle-label{ display: block; }
}

/* Hero — full-bleed photo, left-aligned content */
.hero{ position: relative; min-height: 620px; display: flex; align-items: center; overflow: hidden; }
.hero img.bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; }
.hero::after{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(18,39,60,0.88) 0%, rgba(18,39,60,0.6) 48%, rgba(18,39,60,0.22) 80%);
}
.hero-inner{ position:relative; z-index:2; max-width:1120px; width:100%; padding:0 clamp(24px, 5vw, 48px); margin:0 auto; text-align:left; }
.hero h1{
  font-family: var(--font-display); font-weight: 600; color: var(--paper);
  font-size: clamp(32px, 4.6vw, 50px); line-height: 1.15; max-width: 18ch; margin:0;
}
.hero-actions{ margin-top:34px; display:flex; justify-content:flex-start; }
body:has(.hero) .logo img{ filter: brightness(0) invert(1); }
@media (max-width: 700px){
  .hero{ min-height: 560px; }
  .hero::after{ background: rgba(18,39,60,0.78); }
}

/* Systems / Trust — unified grid-table, icon + short label */
.grid-table{ margin-top: 32px; display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.grid-cell{ flex:1 1 25%; min-width:220px; display:flex; align-items:center; justify-content:center; gap:14px; padding:22px 20px; text-align:center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.grid-cell h3{ color: var(--ink); }
@media (max-width: 900px){ .grid-cell{ flex: 1 1 50%; } }
@media (max-width: 560px){ .grid-cell{ flex: 1 1 100%; } }

/* Format — visual client journey */
.client-journey{ overflow:hidden; text-align:center; }
.client-journey-head{ margin-bottom:34px; display:flex; justify-content:center; }
.client-journey-head h2{ margin:0 auto; }
.steps{
  margin-top:0; display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.step{
  position:relative; min-height:410px; padding:26px 28px 32px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,246,234,.82) 100%);
  transition:transform .25s ease, background .25s ease;
  text-align:center;
}
.step:hover{ transform:translateY(-4px); background:var(--paper); }
.step-art{
  height:155px; margin-bottom:22px; overflow:hidden;
  border-bottom:1px solid rgba(18,39,60,.10); display:flex; align-items:center; justify-content:center;
  color:var(--signal);
}
.step-art svg{ width:min(100%,220px); height:145px; display:block; }
.step-num{
  display:inline-flex; width:46px; height:28px; align-items:center; justify-content:center;
  border:1px solid var(--signal); color:var(--signal); background:transparent;
  font-family:var(--font-body); font-size:11px; letter-spacing:.14em;
  margin-bottom:15px;
}
.step h3{ margin:0 auto 10px; font-size:20px; line-height:1.18; max-width:18ch; }
.step p{ color:var(--slate); margin:0 auto; font-size:17px; line-height:1.48; max-width:28ch; }

@media (max-width:980px){
  .client-journey-head{ flex-direction:column; align-items:center; gap:14px; }
  .steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .steps{ grid-template-columns:1fr; }
  .step{ min-height:0; }
  .step-art{ height:135px; }
}

/* Objects grid — smaller, centered label above image */
.objects-grid{ margin:36px auto 0; display:flex; flex-wrap:wrap; gap:28px 24px; justify-content:center; }
.object-card{ background: var(--paper); flex: 1 1 calc(25% - 18px); min-width: 200px; text-align: center; }
.object-card .object-label{ padding: 0 0 12px; }
.object-card h3{ margin: 0; }
.object-card .sq{ position: relative; width: 100%; padding-top: 100%; overflow: hidden; border: 1px solid var(--line); }
.object-card img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.1) contrast(1.02); }
@media (max-width: 860px){ .object-card{ flex: 1 1 calc(50% - 12px); } }
@media (max-width: 480px){ .object-card{ flex: 1 1 100%; } }
.objects-more{ margin-top: 36px; text-align: center; }

/* Tariffs table (used on tariffs.html) */
.tariff-table-wrap{ margin-top: 44px; overflow-x: auto; }
table.tariffs{ width: 100%; border-collapse: collapse; min-width: 640px; font-family: var(--font-body); }
table.tariffs th, table.tariffs td{ text-align: center; padding: 18px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.tariffs thead th{ font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--slate); border-bottom: 1px solid var(--ink); }
table.tariffs td.row-label{ font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--slate); white-space: nowrap; }
table.tariffs td.price{ font-family: var(--font-body); font-weight: 700; font-size: 22px; color: var(--copper); }
.tariff-note{ margin-top: 20px; color: var(--slate); font-size: 15px; font-style: italic; }
.recommended{ font-family: var(--font-body); font-style: italic; color: var(--copper); font-size: 14px; display: block; margin-bottom: 4px; }
table.tariffs th.is-recommended{ color: var(--copper); }
.page-hero{ padding-top: clamp(120px, 14vw, 176px); }
.page-hero h1{ max-width: 18ch; }

/* CTA — final, minimal */
.cta-section{ background: var(--ink); color: var(--paper); border-top: none; text-align: center; }
.cta-section h2{ color: var(--paper); max-width: 22ch; margin: 0 auto; }
.cta-section .btn-hero{ margin-top: 32px; }

/* Simple content pages (about / contacts / why-maintenance / privacy) */
.content-page{ padding-top:clamp(120px,14vw,168px); padding-bottom:80px; text-align:center; }
.content-page h1{ max-width:22ch; margin:0 auto 24px; }
.content-page h2{ margin:48px auto 16px; }
.content-page p{ color:var(--slate); max-width:72ch; margin-left:auto; margin-right:auto; }
.content-page .lede{ font-size: 20px; color: var(--slate); max-width: 60ch; }
.note-box{ margin-top: 40px; padding: 20px 24px; border: 1px solid var(--line); background: var(--paper-2); font-size: 15px; color: var(--slate); font-style: italic; }

/* Contact block reused on contacts page */
.contact-grid{ margin:40px auto 0; display:flex; gap:56px; flex-wrap:wrap; justify-content:center; text-align:center; }
.contact-grid > *{ flex:1 1 320px; display:flex; flex-direction:column; align-items:center; }
.contact-facts{ display:flex; flex-direction:column; gap:18px; align-items:center; }
.contact-facts .row{ display:flex; flex-direction:column; gap:4px; align-items:center; }
.contact-facts .label{ font-family: var(--font-body); font-size: 13px; color: var(--slate); text-transform: uppercase; letter-spacing: .04em; }
.contact-facts .value{ font-size: 18px; }
.contact-facts .value a{ color: var(--ink); }

form.diagnostic-form{ display:flex; flex-direction:column; gap:18px; max-width:440px; width:100%; margin:0 auto; text-align:center; }
.field{ display:flex; flex-direction:column; gap:8px; align-items:center; }
.field label{ font-family: var(--font-body); font-size: 14px; color: var(--slate); }
.field input, .field select, .field textarea{
  font-family: var(--font-body); font-size: 16px; background: var(--paper); border: 1px solid var(--line); color: var(--ink);
  padding: 12px 14px; border-radius: 3px;
}
.field textarea{ resize: vertical; min-height: 90px; }
.diagnostic-form .btn-primary{ align-self:center; }

/* Footer */
.site-footer{ background: var(--paper-2); border-top: 1px solid var(--line); padding: 56px 0 0; }
.footer-grid{ display:flex; flex-wrap:wrap; gap:40px; padding-bottom:40px; text-align:center; justify-content:center; }
.footer-col{ flex: 1 1 220px; }
.footer-col h3{ font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--slate); margin-bottom: 16px; }
.footer-col .footer-logo img{ height: 38px; width: auto; display: block; margin-bottom: 12px; }
.footer-col p{ color:var(--slate); font-size:17px; max-width:32ch; margin-left:auto; margin-right:auto; }
.footer-nav{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; align-items:center; gap:12px; }
.footer-nav a{ color: var(--ink); text-decoration: none; font-size: 15px; }
.footer-nav a:hover{ color: var(--signal); }
.footer-contact{ display:flex; flex-direction:column; gap:14px; align-items:center; }
.footer-contact a{ color: var(--ink); text-decoration: none; font-size: 15px; }
.footer-bottom{ border-top:1px solid var(--line); padding:20px 0; min-height:58px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:20px; font-size:15px; color:var(--slate); }
.footer-bottom a{ justify-self:start; color:var(--slate); text-decoration:none; margin-left:24px; }
.footer-bottom a:hover{ color:var(--ink); }

/* Requested typography: Playfair Display for headings and hero text; Alice for all other site text. */
h1,h2,h3,h4,h5,h6,.display{font-family:var(--font-display);}
body,p,li,a,span,label,input,select,textarea,button,.eyebrow,.nav-links,.header-phone,.footer-nav,.footer-contact,.btn,.btn-whatsapp{font-family:var(--font-body);}