/* WordPress проставляє картинкам атрибути width і height, і картинка
   тягнеться за ними, ламаючи пропорції там, де макет їх не задає явно.

   Обгортка :where() обнуляє силу селектора. Без неї два атрибути важать
   як два класи — правило перемагало навіть .hero-media img{height:100%},
   і кожна картинка з object-fit складалася до своєї пропорції. Тепер
   будь-яке правило макета сильніше, а це працює лише там, де висоту
   ніхто не задав. — Site Done */
:where(img[width][height]){height:auto;}

/*
 * Egholm — общая основа: переменные, типографика, шапка, кнопки, секции.
 * Источник: исходная статика Egholm, стили перенесены без переписывания.
 * Developer: Site Done · https://sitedone.tech
 */

:root{
  --bg-dark:#1B3A20;
  --bg-dark-2:#12291A;
  --bg-light:#F6F3EC;
  --paper:#EFEBE1;
  --accent:#EA7125;
  --accent-dim:#C05A16;
  --brand-green:#40B143;
  --brand-green-dim:#2E7F30;
  --text-dark:#14231C;
  --text-light:#F6F4EE;
  --muted:#8A9690;
  --muted-dark:#5B6960;
  --line-dark:rgba(20,35,28,0.12);
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:'Inter',sans-serif;
  background:var(--bg-light);
  color:var(--text-dark);
  overflow-x:hidden;
}

h1,h2,h3,.display{
  font-family:'Inter',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:0.95;
}

.eyebrow{
  font-family:'Inter',sans-serif;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:0.18em;
  font-weight:700;
  color:var(--brand-green);
}

/* ---- top nav ---- */
.topnav{
  position:sticky;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 40px;height:64px;
  background:rgba(246,243,236,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-dark);
}

.topnav .logo{
  display:flex;align-items:center;
  background:#fff;padding:5px 10px;border-radius:6px;
  text-decoration:none;
}

.topnav .logo img{height:32px;width:auto;display:block;}

.topnav ul{list-style:none;display:flex;gap:34px;}

.topnav a{
  color:var(--muted-dark);text-decoration:none;font-size:13px;letter-spacing:.05em;
  text-transform:uppercase;font-family:'Inter';font-weight:600;
  transition:color .2s;
}

.topnav a:hover{color:var(--text-dark);}

.topnav .nav-cta{
  background:var(--accent);color:#fff;padding:9px 18px;border-radius:2px;
}

.topnav .nav-cta:hover{color:#fff;background:var(--accent-dim);}

.topnav .back-link{display:flex;align-items:center;gap:8px;}

/* ---- buttons ---- */
.cta{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--accent);color:#fff;
  padding:16px 26px;border:none;border-radius:2px;
  font-family:'Inter';font-weight:700;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  text-decoration:none;
}

.cta:hover{background:var(--accent-dim);}

.cta.secondary{background:transparent;border:1.5px solid var(--text-dark);color:var(--text-dark);}

.cta.secondary:hover{background:rgba(20,35,28,.06);}

/* На тёмных полосах вторая кнопка светлая — иначе тёмная рамка и текст
   сливаются с фоном. В макете это инлайновый стиль у каждой ссылки;
   здесь одно правило на весь сайт. */
.section.dark .cta.secondary{border-color:var(--text-light);color:var(--text-light);}

.section.dark .cta.secondary:hover{background:rgba(246,244,238,.1);}

/* ---- shared section shells ---- */
.section{padding:100px 8vw;}

.section.paper{background:var(--paper);}

.section.dark{background:var(--bg-dark);color:var(--text-light);}

.section.dark .eyebrow{color:var(--brand-green);}

.section-head{max-width:680px;margin-bottom:56px;}

.section-head h2{font-size:clamp(28px,3.6vw,46px);margin-top:14px;font-weight:800;}

.action-banner{position:relative;width:100%;aspect-ratio:21/9;overflow:hidden;}

.action-banner img,.action-banner video{width:100%;height:100%;object-fit:cover;display:block;}

.action-banner .action-caption{
  position:absolute;left:0;right:0;bottom:0;padding:40px 8vw 28px 8vw;
  background:linear-gradient(180deg, transparent, rgba(10,20,15,.75));
  color:#fff;font-size:16px;font-weight:600;letter-spacing:.01em;
}

footer{
  background:var(--paper);color:var(--muted-dark);
  padding:26px 8vw;font-size:12px;letter-spacing:.04em;
  display:flex;justify-content:space-between;border-top:1px solid var(--line-dark);
  flex-wrap:wrap;gap:8px;
}

/* В макете левая надпись набрана прописными прямо в тексте. Держим текст
   читаемым в словаре, а регистр задаём стилем. — Site Done */
footer span:first-child{text-transform:uppercase;}

/* Медиазапросы собраны в конец файла: при склейке стилей нескольких
 * страниц они оказывались раньше базовых правил, и мобильная
 * раскладка перекрывалась десктопной. */

@media (max-width:860px){
  .action-banner{aspect-ratio:4/3;}
  .action-banner .action-caption{padding:24px 6vw 20px 6vw;font-size:14px;}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
}

@media (max-width:860px){
  .topnav{padding:0 20px;}
  .topnav ul{display:none;}
  .section{padding:64px 6vw;}
  .attach-photos{margin:0 -6vw;}
  .attach-photos .attach-photo{border-radius:0;}
  .a-media{margin:0 -6vw;border-radius:0;}
}