/* Site-wide layout, reset and behaviour styles. Section-level layout stays
   inline in each page (inherited from the canvas export, already flex/grid
   based) — this file covers the bits that repeat across pages: reset,
   header/nav, footer, logo marquee, accordion and modal mechanics. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
}

img { max-width: 100%; display: block; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }

[hidden] { display: none !important; }

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

/* Header / nav */
.hw-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 5vw;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.hw-logo { height: 46px; }
@media (min-width: 1101px) { .hw-logo { height: 64px; } }

.hw-nav { display: flex; flex-wrap: wrap; gap: 22px; flex: 1; justify-content: center; min-width: 0; }
.hw-nav a { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold); white-space: nowrap; color: var(--color-text-primary); }
.hw-nav a:hover { color: var(--color-primary); }
.hw-nav a[aria-current="page"] { color: var(--color-primary); }
@media (max-width: 1100px) { .hw-nav { display: none !important; } }

.hw-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  cursor: pointer; color: var(--ink-900); font-size: 20px;
}
@media (max-width: 1100px) { .hw-burger { display: flex !important; } }

.hw-mobile-nav { flex-basis: 100%; display: flex; flex-direction: column; padding-top: 8px; }
.hw-mobile-nav a {
  display: flex; align-items: center; min-height: 44px;
  font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
}
.hw-mobile-nav a[aria-current="page"] { color: var(--color-primary); }

/* Logo marquee (LogoBand) */
@keyframes hw-logo-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.hw-logo-track { animation: hw-logo-marquee 60s linear infinite; }
.hw-logo-track:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hw-logo-track { animation: none; } }

/* FAQ accordion */
.hw-faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); overflow: hidden; }
.hw-faq-item.on-surface { background: var(--color-surface); }
.hw-faq-toggle {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 18px 22px; background: transparent; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-semibold);
  color: var(--ink-900); text-align: left;
}
.hw-faq-icon { font-size: 18px; color: var(--color-primary); flex: none; transition: transform var(--duration-fast) var(--ease-standard); }
.hw-faq-item[data-open="true"] .hw-faq-icon { transform: rotate(45deg); }
.hw-faq-answer { margin: 0; padding: 0 22px 20px; font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
.hw-faq-item[data-open="false"] .hw-faq-answer { display: none; }

/* Hero photo, in three steps. Stacked: a fixed height so the fold stays
   tight, cropped from the top of the frame rather than the middle. Beside
   the headline but still narrow: the original fixed height, because a
   stretched photo in a ~330px column is a sliver. Wide enough to be worth
   it: stretch to the row's height, so the photo is exactly as tall as the
   copy beside it however the headline wraps.
   min-width lives here, not inline, so the 320px floor can be lifted on
   phones — with it the hero overflowed a 320px viewport. */
.hw-hero-photo { min-width: min(320px, 100%); height: 360px; object-position: center top; }
@media (min-width: 768px) {
  .hw-hero-photo { height: 440px; object-position: center; }
}
@media (min-width: 1000px) {
  .hw-hero-photo { align-self: stretch; height: auto; min-height: 440px; }
}

/* Testimonial carousel */
.hw-carousel { max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 20px; }
.hw-carousel-track { display: flex; overflow: hidden; flex: 1; }
.hw-carousel-slides { display: flex; width: 100%; transition: transform 500ms var(--ease-standard); }
.hw-carousel-slide { flex: 0 0 100%; padding: 4px; box-sizing: border-box; }
.hw-carousel-btn {
  flex: none; width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--color-border);
  background: var(--color-surface); cursor: pointer; color: var(--color-primary); font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.hw-carousel-dots { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }
.hw-carousel-dot { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: none; cursor: pointer; background: var(--color-border); }
.hw-carousel-dot[aria-current="true"] { background: var(--color-primary); }
.hw-testimonial-card { padding: 44px; }
@media (max-width: 640px) {
  .hw-carousel { gap: 8px; }
  .hw-carousel-btn { width: 34px; height: 34px; font-size: 14px; }
  .hw-testimonial-card { padding: 28px 18px; }
}

/* Lead-magnet / newsletter modal */
.hw-modal-overlay {
  position: fixed; inset: 0; background: rgba(43,38,34,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 24px;
}
.hw-modal {
  background: var(--color-surface); border-radius: var(--radius-lg); padding: 36px;
  max-width: 420px; width: 100%; box-shadow: var(--shadow-lg); position: relative;
}
.hw-modal-close {
  position: absolute; top: 16px; right: 16px; background: none; border: none;
  cursor: pointer; font-size: 20px; color: var(--color-text-secondary);
}