/* Wood Maker — прототип обновлённого сайта (тёмная тема, палитра — только цвета логотипа) */
:root{
  --black:#0b0a08;
  --bg-alt:#121110;
  --card:#18160f;
  --line:#2e2a22;
  --ink:#efe9db;
  --ink-soft:#a79c89;
  --orange:#f2985e;
  --orange-dark:#d97a3d;
  --green:#4b9c66;
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Georgia","Times New Roman",serif;
  background:var(--black);
  color:var(--ink);
  line-height:1.55;
}
h1,h2,h3{font-family:"Georgia","Times New Roman",serif; color:var(--ink); margin:0 0 .5em; line-height:1.2}
h1{font-size:2.3rem}
h2{font-size:1.55rem; margin-top:0}
h3{font-size:1.15rem}
p{margin:0 0 1em; color:var(--ink)}
a{color:var(--orange)}
img{max-width:100%; display:block}
.container{max-width:1120px; margin:0 auto; padding:0 24px}
.section{padding:56px 0}
.section--tight{padding:32px 0}
.section--alt{background:var(--bg-alt)}

/* top bar */
.topbar{background:var(--black); color:var(--ink); font-family:Arial, sans-serif; font-size:.82rem; border-bottom:1px solid var(--line)}
.topbar .container{display:flex; justify-content:space-between; align-items:center; padding-top:8px; padding-bottom:8px; flex-wrap:wrap; gap:6px}
.topbar a{color:var(--ink); text-decoration:none}
.topbar .msg-links a{margin-left:14px}
.topbar .msg-links a.topbar-cta{margin-left:18px; padding:5px 14px; font-size:.74rem; border-width:1px; vertical-align:middle}

/* header / nav */
header.site{background:var(--black); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
header.site .container{position:relative; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; row-gap:14px; padding-top:14px; padding-bottom:14px; gap:20px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:none}
.logo-text{font-family:Arial, sans-serif; font-weight:700; letter-spacing:.08em; font-size:1rem; color:var(--ink)}
nav.mainnav{display:flex; flex-wrap:wrap; gap:10px 22px; font-family:Arial, sans-serif; font-size:.88rem}
nav.mainnav a{text-decoration:none; color:var(--ink); padding:6px 0; border-bottom:2px solid transparent; white-space:nowrap}
nav.mainnav a.active, nav.mainnav a:hover{color:var(--orange); border-bottom-color:var(--orange)}
/* mobile nav toggle (hamburger) — hidden on desktop, shown ≤900px, see media query below */
.nav-toggle{display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:36px; height:36px; padding:0; background:none; border:none; cursor:pointer; flex:none}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease}
.nav-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-active span:nth-child(2){opacity:0}
.nav-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.btn{
  display:inline-block; font-family:Arial, sans-serif; font-weight:700; font-size:.86rem;
  padding:12px 22px; border-radius:999px; text-decoration:none; letter-spacing:.02em;
  border:2px solid var(--orange);
}
.btn--solid{background:var(--orange); color:#171410}
.btn--solid:hover{background:var(--orange-dark); border-color:var(--orange-dark); color:#fff}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--orange)}
.btn--ghost:hover{background:var(--orange); color:#171410}
.btn--small{padding:9px 16px; font-size:.78rem}

/* hero */
.hero{background:linear-gradient(180deg, var(--bg-alt) 0%, var(--black) 100%); padding:54px 0 44px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.eyebrow{font-family:Arial, sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; color:var(--orange); font-weight:700; margin-bottom:10px}
.hero p.lead{font-size:1.08rem; color:var(--ink-soft); max-width:46ch}
.hero-actions{display:flex; gap:14px; margin-top:22px; flex-wrap:wrap}
.hero-photo{border-radius:var(--radius); overflow:hidden; box-shadow:0 18px 40px -18px rgba(0,0,0,.6); aspect-ratio:4/5}
.hero-photo img{width:100%; height:100%; object-fit:cover}
.hero-slideshow{position:relative}
.hero-slideshow .hero-slide{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease}
.hero-slideshow .hero-slide.is-active{opacity:1}

/* trust strip */
.trust-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px}
.trust-chip{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 16px; text-align:center}
.trust-chip .num{font-family:Arial, sans-serif; font-weight:800; font-size:1.5rem; color:var(--ink)}
.trust-chip .label{font-family:Arial, sans-serif; font-size:.78rem; color:var(--ink-soft); margin-top:4px}
.fill-in{color:var(--orange); border-bottom:1px dashed var(--orange)}
.fill-note{font-family:Arial, sans-serif; font-size:.72rem; color:var(--ink-soft); margin-top:10px; text-align:center}

/* photo placeholder (used instead of hotlinked images in this prototype) */
.photobox{
  position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column;
  background:linear-gradient(135deg,#cdb28a 0%,#a9835a 48%,#8c6a45 100%);
  color:#fff; text-align:center; overflow:hidden; border-radius:inherit;
}
.photobox:after{content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 2px, transparent 2px 14px)}
.photobox .pb-label{position:relative; z-index:1; font-family:Arial, sans-serif; font-weight:700; font-size:.85rem; letter-spacing:.02em; padding:0 12px}
.photobox .pb-sub{position:relative; z-index:1; font-family:Arial, sans-serif; font-size:.66rem; opacity:.85; margin-top:4px; padding:0 10px}
.gallery-grid .photobox .pb-label{font-size:.72rem}
.gallery-grid .photobox .pb-sub{font-size:.6rem}

.logo-mark{
  width:34px; height:34px; border-radius:8px; background:var(--orange); color:#171410;
  display:flex; align-items:center; justify-content:center; font-family:Arial, sans-serif;
  font-weight:800; font-size:1rem; flex:none;
}
.logo-img{height:130px; width:auto; max-width:100%; display:block}
/* на узких экранах логотип не должен вылезать за контейнер и давать горизонтальный скролл */
@media (max-width:560px){
  .logo{min-width:0; max-width:100%}
  .logo-img{height:auto; max-height:74px}
}

/* category cards */
.cards-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column}
.card-photo{position:relative; aspect-ratio:4/3; overflow:hidden; background:#1a1812}
.card-photo img{width:100%; height:100%; object-fit:cover}
/* сменяющиеся фото внутри карточки категории (несколько фото друг за другом) */
.card-photo .card-slide{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease}
.card-photo .card-slide.is-active{opacity:1}
.card-body{padding:18px 18px 20px}
.card-body h3{margin-bottom:8px}
.card-body p{font-size:.92rem; color:var(--ink-soft); margin-bottom:12px}
.card-link{font-family:Arial, sans-serif; font-size:.82rem; font-weight:700; text-decoration:none; color:var(--orange)}

/* callout banner */
.callout{background:var(--card); color:var(--ink); border-radius:var(--radius); padding:34px 36px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; border:1px solid var(--orange)}
.callout h2{color:var(--orange); margin-bottom:6px}
.callout p{color:var(--ink-soft); margin-bottom:0; max-width:56ch}

/* principles */
.principles{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.principle{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.principle .n{font-family:Arial, sans-serif; font-weight:800; color:var(--orange); font-size:.78rem; letter-spacing:.08em; margin-bottom:8px}

/* gallery */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.gallery-grid .photobox{width:100%; aspect-ratio:1/1}
.gallery-grid .gallery-photo{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius); display:block; border:1px solid var(--line)}

/* photo tiles (category / project cards — caption overlaid on photo, Maltese-style) */
.tiles-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.tiles-grid--2col{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.tile{position:relative; display:block; border-radius:var(--radius); overflow:hidden; text-decoration:none; border:1px solid var(--line)}
.tile .photobox{position:absolute; inset:0; border-radius:inherit}
.tile .tile-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; transition:filter .2s ease}
/* сменяющиеся фото внутри плитки категории (raboty.html) */
.tile .tile-slide{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; opacity:0; transition:opacity 1.1s ease, filter .2s ease}
.tile .tile-slide.is-active{opacity:1}
.tile:hover .tile-slide{filter:brightness(1.1)}
.tile-caption{position:absolute; left:0; right:0; bottom:0; padding:16px 18px 14px; background:linear-gradient(180deg, transparent 0%, rgba(11,10,8,.5) 40%, rgba(11,10,8,.92) 100%)}
.tile-caption h2{margin:0; font-size:1.05rem; color:var(--ink)}
.tile-caption .tile-title{display:block; margin:0; font-size:1.02rem; color:var(--ink); font-family:var(--font-display, inherit)}
.tile-caption .type{display:block; font-family:Arial, sans-serif; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--orange); margin-top:4px}
.tile:hover{border-color:var(--orange)}
.tile:hover .photobox, .tile:hover .tile-photo{filter:brightness(1.1)}
.tile--cta{background:var(--card); display:flex; align-items:center; justify-content:center; text-align:center; padding:24px}
.tile--cta:hover{border-color:var(--orange)}
.tile-caption--static{position:static; background:none; padding:0}

/* sample project card */
.sample-card{background:var(--card); border:1px dashed var(--orange); border-radius:var(--radius); padding:20px; margin:18px 0}
.sample-card .tag{display:inline-block; font-family:Arial, sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.06em; color:#171410; background:var(--orange); padding:3px 10px; border-radius:999px; margin-bottom:10px}
.sample-card dl{display:grid; grid-template-columns:120px 1fr; gap:6px 12px; font-family:Arial, sans-serif; font-size:.86rem; margin:0}
.sample-card dt{color:var(--ink-soft)}
.sample-card dd{margin:0; color:var(--ink)}

/* placeholder block */
.placeholder{background:repeating-linear-gradient(45deg,#151310,#151310 10px,#1c1a15 10px,#1c1a15 20px); border:1px dashed var(--line); border-radius:var(--radius); padding:26px; text-align:center; font-family:Arial, sans-serif; color:var(--ink-soft); font-size:.86rem}

/* stat / process steps */
.steps{counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.step{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 18px 18px}
.step:before{counter-increment:step; content:counter(step); font-family:Arial, sans-serif; font-weight:800; color:#171410; background:var(--orange); width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.85rem; margin-bottom:12px}

/* forms */
.form-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form-grid .full{grid-column:1/-1}
label{display:block; font-family:Arial, sans-serif; font-size:.8rem; color:var(--ink-soft); margin-bottom:6px}
input, select, textarea{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:8px;
  font-family:Arial, sans-serif; font-size:.92rem; background:#141210; color:var(--ink);
}
input::placeholder, textarea::placeholder{color:#6f6a5c}
textarea{resize:vertical; min-height:90px}
.form-note{font-family:Arial, sans-serif; font-size:.72rem; color:var(--ink-soft); margin-top:10px}
.form-status:empty{display:none}
/* honeypot-поле от спам-ботов — скрыто визуально, но остаётся в DOM */
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-status.is-ok{color:var(--green)}
.form-status.is-error{color:#e2705a}

/* карта проезда (Яндекс.Карты, встраивается через iframe без API-ключа) */
.map-embed{position:relative; background:var(--card)}
.map-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* contact list */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px}
.contact-list{list-style:none; padding:0; margin:0; font-family:Arial, sans-serif}
.contact-list li{padding:14px 0; border-bottom:1px solid var(--line)}
.contact-list .k{display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:4px}
.contact-list a{color:var(--orange); text-decoration:none; font-size:1.02rem}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}

/* footer */
footer.site{background:var(--black); color:var(--ink-soft); font-family:Arial, sans-serif; margin-top:64px; border-top:1px solid var(--line)}
footer.site .container{padding:44px 24px 26px; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:30px}
footer.site .footer-heading{color:var(--ink); font-size:.86rem; letter-spacing:.04em; margin:0 0 14px; font-weight:700}
footer.site ul{list-style:none; padding:0; margin:0}
footer.site li{margin-bottom:9px; font-size:.86rem}
footer.site a{color:var(--ink-soft); text-decoration:none}
footer.site a:hover{color:var(--orange)}
.footer-note{border-top:1px solid rgba(255,255,255,.1); margin:0 auto; padding:16px 24px 0; max-width:96ch; font-size:.72rem; line-height:1.55; color:#7c7366; text-align:center}
.footer-bottom{text-align:center; font-size:.76rem; padding:14px 16px 18px; color:var(--ink-soft)}

@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  .trust-strip{grid-template-columns:repeat(2,1fr)}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .principles{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  footer.site .container{grid-template-columns:1fr 1fr}
  .tiles-grid{grid-template-columns:repeat(2,1fr)}
  .tiles-grid--2col{grid-template-columns:1fr}

  /* мобильное меню: показываем гамбургер, прячем строку меню из шапки
     (телефон уже есть в верхней плашке topbar), меню раскрывается
     выпадающей панелью под шапкой — см. .nav-toggle в generate.js/header() */
  .nav-toggle{display:flex}
  nav.mainnav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0;
    background:var(--black); border-bottom:1px solid var(--line);
    padding:6px 24px 14px; box-shadow:0 12px 24px -12px rgba(0,0,0,.5);
  }
  nav.mainnav.is-open{display:flex}
  nav.mainnav a{padding:12px 0; border-bottom:1px solid var(--line); width:100%}
  nav.mainnav a:last-child{border-bottom:none}
}

@media (max-width: 560px){
  h1{font-size:1.7rem}
  .hero{padding:36px 0 32px}
  .cards-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .tiles-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .trust-strip{grid-template-columns:repeat(2,1fr); gap:10px}
  .trust-chip{padding:14px 10px}
  footer.site .container{grid-template-columns:1fr; gap:26px}
  .callout{flex-direction:column; align-items:flex-start; padding:26px 22px}
  .sample-card dl{grid-template-columns:1fr}
  .topbar .msg-links a{margin-left:10px}
}

/* низкие десктопные экраны (ноутбуки ~700px высотой): на первом экране должны помещаться
   заголовок, описание и обе кнопки — фото 4/5 распирало первый экран */
@media (min-width:900px) and (max-height:820px){
  .hero{padding-top:22px; padding-bottom:22px}
  .hero-photo{aspect-ratio:4/3}
  .hero h1{font-size:2rem; margin-bottom:12px}
  .hero .lead{margin-bottom:12px}
  /* шапка: те же элементы, меньше воздуха */
  .topbar .container{padding-top:5px; padding-bottom:5px}
  header.site .container{padding-top:9px; padding-bottom:9px; row-gap:10px}
  .hero-grid{gap:28px}
}
/* якорь #form под липкой шапкой: без этого заголовок формы уезжает под неё */
#form{scroll-margin-top:170px}
@media (max-width:900px){#form{scroll-margin-top:96px}}
/* на телефоне первый экран — текст и кнопка без наложений и горизонтального скролла */
@media (max-width:560px){
  .hero{padding-top:22px; padding-bottom:26px}
  .hero h1{font-size:1.6rem}
  .hero p.lead{font-size:1rem}
  .hero-actions{display:flex; flex-wrap:wrap; gap:10px}
  .hero-actions .btn{flex:1 1 100%; text-align:center}
  #cookie-banner{padding:8px 12px !important}
  #cookie-banner button{width:100%}
}

/* <picture> — прозрачная обёртка: без этих правил картинка в сетке
   теряет заданные пропорции и растягивается на натуральную высоту */
.gallery-grid picture{display:block; width:100%}
.gallery-grid picture .gallery-photo{width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block}
/* атрибуты width/height в разметке задают и CSS-высоту — без height:auto
   заданные пропорции игнорируются и картинка тянется на натуральную высоту */
.gallery-grid .gallery-photo{height:auto}
.tile picture, .card-photo picture{position:absolute; inset:0; display:block}
.tile picture .tile-photo, .card-photo picture img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
picture{max-width:100%}
.gallery-grid img, .tiles-grid img{max-width:100%}