/* ============================================================
   БОЯН — Покриви и хидроизолация
   Brand: red #A93B2A / charcoal #323232 (from logo)
   Type:  Oswald (display) + Manrope (body), cyrillic
   ============================================================ */

:root {
  --red: #A93B2A;
  --red-dark: #8C2E1F;
  --red-soft: rgba(169, 59, 42, 0.1);
  --ink: #221F1C;
  --ink-2: #2B2724;
  --charcoal: #323232;
  --paper: #F6F3EE;
  --card: #FFFFFF;
  --line: #E3DCD2;
  --line-dark: #443F3A;
  --muted: #6E6862;
  --light-txt: #CDC6BB;
  --display: "Oswald", "Arial Narrow", sans-serif;
  --body: "Manrope", "Helvetica Neue", sans-serif;
  --radius: 8px;
  --header-h: 86px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
html, body { overflow-x: clip; }

body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--card);
}

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

.wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 40px); }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--display); text-transform: uppercase; }

h1 {
  font-size: clamp(2.7rem, 7.5vw, 5.4rem);
  font-weight: 600; line-height: 1.22; letter-spacing: 0.01em;
}
h2 {
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  font-weight: 600; line-height: 1.08; letter-spacing: 0.01em;
  margin-bottom: 0.5em;
}
h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: 0.03em; }

.kicker {
  font-family: var(--display); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.24em;
  font-size: 0.82rem; color: var(--muted); margin-bottom: 1.1em;
}
.kicker b { color: var(--red); font-weight: 600; margin-right: 0.7em; }
.kicker-light { color: var(--light-txt); }

.lead { font-size: 1.1rem; color: var(--muted); max-width: 640px; margin-bottom: 1.5em; }
.lead-light { color: var(--light-txt); }

.only-desktop { display: none; }
@media (min-width: 768px) { .only-desktop { display: inline; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 0.85em 1.7em; border-radius: 5px;
  text-decoration: none; border: 2px solid transparent;
  cursor: pointer; transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 1em 2.1em; font-size: 1.06rem; }
.btn-red { background: var(--red); color: #fff; box-shadow: 0 10px 24px -10px rgba(169, 59, 42, 0.6); }
.btn-red:hover { background: var(--red-dark); }
.btn-ghost { background: rgba(255, 255, 255, 0.06); color: #fff; border-color: rgba(255, 255, 255, 0.65); backdrop-filter: blur(4px); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.14); }
.btn-white { background: #fff; color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.6em; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.site-header.scrolled { border-color: var(--line); box-shadow: 0 8px 30px -18px rgba(34, 31, 28, 0.35); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.brand-logo { height: 52px; width: auto; }

.main-nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); }
.main-nav > a:not(.btn) {
  font-family: var(--display); font-weight: 500; font-size: 0.95rem;
  text-transform: uppercase; letter-spacing: 0.09em;
  text-decoration: none; color: var(--ink);
  padding: 6px 2px; position: relative;
}
.main-nav > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--red); transition: right 0.22s ease;
}
.main-nav > a:not(.btn):hover::after { right: 0; }
.nav-cta { font-size: 0.95rem; padding: 0.6em 1.2em; }

.nav-toggle { display: none; }

@media (max-width: 860px) {
  /* backdrop-filter makes the header a containing block for its position:fixed
     descendants, which would trap the nav overlay inside the header strip */
  .site-header { backdrop-filter: none; background: #fff; }

  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 48px; height: 48px; padding: 12px 10px;
    background: none; border: 0; cursor: pointer; z-index: 70;
  }
  .nav-toggle span { display: block; height: 3px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

  .main-nav {
    /* starts below the header bar, so the logo and the X stay visible
       and the navbar never blanks out while the panel slides in */
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 65;
    background: var(--paper); overflow-y: auto;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 8px; padding: 36px clamp(28px, 8vw, 48px) 40px;
    transform: translateX(100%); visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.6, 0, 0.2, 1), visibility 0.32s;
  }
  .main-nav.open { transform: translateX(0); visibility: visible; }
  .main-nav > a:not(.btn) { font-size: 1.7rem; font-weight: 600; padding: 10px 0; }
  .main-nav .nav-cta { margin-top: 22px; width: 100%; font-size: 1.1rem; padding: 1em; }
  /* must lock the root, not body: body has overflow-x:clip, so overflow:hidden
     here would make body its own scroll container and break the sticky header */
  html.no-scroll { overflow: hidden; }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: max(620px, 96svh); display: grid; align-items: center; color: #fff; isolation: isolate; }
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background: url("assets/hero-roofs.jpg") center / cover no-repeat;
}
/* The hero cycles: tiled roofs -> timber canopy -> roof structure, 6s each.
   Layers stack base < slide-2 < slide-3, and at every moment one layer is
   fully opaque: each slide fades IN over the opaque layer below it and only
   drops out once it is hidden. Fading two layers at once would let the base
   image flash through the gap between them. */
.hero-slide {
  position: absolute; inset: 0; z-index: -2;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  opacity: 0;
  animation-duration: 18s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.hero-slide-2 {
  background-image: url("assets/hero-timber.jpg");
  animation-name: heroSlideCovered; animation-delay: 6s;
}
.hero-slide-3 {
  background-image: url("assets/hero-truss.jpg");
  animation-name: heroSlideTop; animation-delay: 12s;
}
/* fades in, then snaps off while hidden beneath the slide above it */
@keyframes heroSlideCovered {
  0%     { opacity: 0; }
  5.56%  { opacity: 1; }
  38.8%  { opacity: 1; }
  38.9%  { opacity: 0; }
  100%   { opacity: 0; }
}
/* topmost layer: fades back out to reveal the opaque base image */
@keyframes heroSlideTop {
  0%      { opacity: 0; }
  5.56%   { opacity: 1; }
  33.33%  { opacity: 1; }
  38.89%  { opacity: 0; }
  100%    { opacity: 0; }
}

.hero-overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    /* directional: darkest behind the text on the left */
    linear-gradient(78deg, rgba(20, 14, 11, 0.86) 0%, rgba(20, 14, 11, 0.62) 45%, rgba(20, 14, 11, 0.18) 78%),
    linear-gradient(0deg, rgba(20, 14, 11, 0.6) 0%, rgba(20, 14, 11, 0) 34%),
    /* flat base tint so bright slides never wash the white text out */
    rgba(20, 14, 11, 0.34);
}
.hero h1, .hero-sub { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35); }
.hero-content { width: 100%; padding-top: 110px; padding-bottom: 90px; }
.hero-kicker {
  display: inline-block;
  font-family: var(--display); font-weight: 500; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.22em;
  padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 100px;
  margin-bottom: 26px; background: rgba(24, 17, 14, 0.25); backdrop-filter: blur(3px);
}
.hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.22rem); max-width: 560px; margin-top: 1.2em; color: rgba(255, 255, 255, 0.92); }
.hero-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 2.2em; }
.hero-chips li {
  font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; gap: 8px;
}
.hero-chips li::before {
  content: "✓"; display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); font-size: 0.75rem; font-weight: 800;
}

.hero-stamp { position: absolute; right: clamp(30px, 7vw, 110px); bottom: 52px; width: 132px; height: 132px; z-index: 1; }
.hero-stamp svg { width: 100%; height: 100%; animation: spin 26s linear infinite; }
.hero-stamp text { font-family: var(--display); font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; fill: #fff; }
.hero-stamp .stamp-roof { fill: none; stroke: var(--red); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; animation: spin-rev 26s linear infinite; transform-origin: 60px 60px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }
@media (max-width: 900px) { .hero-stamp { display: none; } }

/* ---------- Marquee ---------- */
.marquee { background: var(--ink); color: var(--paper); overflow: hidden; padding: 14px 0; border-block: 3px solid var(--red); }
.marquee-track { display: inline-flex; white-space: nowrap; animation: marquee 30s linear infinite; }
.marquee-track span {
  font-family: var(--display); font-weight: 500; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: 0.14em; padding-right: 0.6em;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 116px) 0; }
.section-paper { background: var(--paper); }
.section-dark { background: var(--ink); color: #fff; }
.section-cta { background: var(--red); color: #fff; }

/* roofline divider */
.roofline { line-height: 0; background: #fff; }
.roofline svg { width: 100%; height: 46px; }
.roofline path { stroke: var(--line); stroke-width: 2; }
.roofline circle { fill: var(--red); }

/* ---------- Services ---------- */
.services-grid {
  display: grid; gap: 22px; margin-top: 44px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1080px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .services-grid { grid-template-columns: 1fr; } }

.service-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(34, 31, 28, 0.35); }
.service-img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.service-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.service-card:hover .service-img img { transform: scale(1.06); }
.tag-real {
  position: absolute; top: 12px; left: 12px;
  background: var(--red); color: #fff;
  font-family: var(--display); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 5px 10px; border-radius: 4px;
}
.service-body { padding: 22px 22px 26px; }
.service-body h3 { margin-bottom: 0.5em; }
.service-body h3::after { content: ""; display: block; width: 34px; height: 3px; background: var(--red); margin-top: 10px; }
.service-body p { color: var(--muted); font-size: 0.95rem; }

.services-more { margin-top: 34px; color: var(--muted); font-size: 0.95rem; }
.services-more span {
  display: inline-block; margin: 4px 4px 0 6px; padding: 5px 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 100px;
  font-weight: 600; font-size: 0.85rem; color: var(--ink);
}

/* ---------- Feature (gazebo / why) ---------- */
.feature-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 6vw, 80px); align-items: center;
}
.feature-grid-rev { grid-template-columns: 0.95fr 1.05fr; }
@media (max-width: 900px) {
  .feature-grid, .feature-grid-rev { grid-template-columns: 1fr; }
  .feature-grid-rev .feature-media { order: 2; }
}

.feature-media { position: relative; }
.feature-media img { border-radius: var(--radius); position: relative; z-index: 1; width: 100%; }
.feature-media::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  transform: translate(16px, 16px);
  border: 2px solid var(--red); border-radius: var(--radius); opacity: 0.55;
}
.feature-media figcaption {
  position: relative; z-index: 1;
  font-size: 0.85rem; color: var(--muted); margin-top: 14px;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}

.check-list { list-style: none; margin: 1.4em 0 0.4em; }
.check-list li { padding-left: 36px; position: relative; margin-bottom: 14px; font-weight: 500; }
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--red-soft); color: var(--red);
  display: grid; place-items: center; font-weight: 800; font-size: 0.8rem;
}

/* ---------- Diagnostic tool ---------- */
.diag-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(30px, 5vw, 70px); align-items: end;
}
@media (max-width: 980px) { .diag-grid { grid-template-columns: 1fr; } }

/* rain countdown */
.rain-q {
  font-family: var(--display); font-weight: 500; font-size: 0.95rem;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--light-txt);
  margin-bottom: 14px;
}
.sky-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.sky-picker button {
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #fff; background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 6px;
  padding: 11px 20px; cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.18s ease;
}
.sky-picker button:hover { border-color: var(--red); transform: translateY(-2px); }
.sky-picker button.active { background: var(--red); border-color: var(--red); }

.rain-card {
  position: relative;
  background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 10px;
  padding: clamp(22px, 3vw, 34px); margin-top: 22px;
  /* fixed so the box never resizes when the forecast changes */
  height: 370px;
}
@media (max-width: 980px) { .rain-card { height: 350px; } }
.rain-lead {
  font-family: var(--display); font-weight: 500; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.22em; color: var(--light-txt);
  position: relative; z-index: 1;
}
.rain-count {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.5rem, 5.5vw, 4.2rem); line-height: 1.05; color: #fff;
  margin-top: 8px; position: relative; z-index: 1;
}
.rain-detail { color: var(--light-txt); font-size: 0.95rem; margin-top: 6px; position: relative; z-index: 1; }
.rain-verdict {
  border-left: 3px solid var(--red); padding-left: 14px; margin-top: 18px;
  font-weight: 600; color: #fff; position: relative; z-index: 1; max-width: 480px;
}
.rain-card.dry .rain-count { color: #DFAF56; }
.rain-card.dry .rain-verdict { border-color: #DFAF56; }
.rain-card.loading .rain-count { animation: blink 1.1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.35; } }

/* clips the falling drops without clipping the forecast text */
.drops { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 9px; }
.drops span {
  position: absolute; top: -22%; width: 2px; height: 20%;
  background: linear-gradient(to bottom, rgba(158, 191, 222, 0), rgba(158, 191, 222, 0.65));
  border-radius: 2px;
  animation: fall linear infinite;
}
@keyframes fall { to { transform: translateY(640%); } }

.rain-src { font-size: 0.78rem; color: var(--light-txt); opacity: 0.55; margin-top: 14px; }

/* worksheet */
.worksheet {
  background: var(--paper); color: var(--ink);
  border-radius: 10px; padding: clamp(22px, 3vw, 34px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
}
.worksheet-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 18px;
}
.ws-title { font-family: var(--display); font-weight: 600; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.06em; }
.ws-sub { font-family: var(--display); font-weight: 500; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--red); }

/* form */
#diagForm { margin-top: 6px; }
.hidden-field { display: none; }
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.form-row label small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 6px;
  font-family: var(--body); font-size: 1rem; color: var(--ink); background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-row textarea { resize: vertical; }

/* custom dropdown — positioned by us, so it can't render off in the wrong place */
.select { position: relative; }
.select-btn {
  position: relative; width: 100%; text-align: left;
  padding: 12px 44px 12px 14px;
  border: 1.5px solid var(--line); border-radius: 6px;
  background: #fff; color: var(--ink);
  font-family: var(--body); font-size: 1rem; line-height: 1.5;
  cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.select-btn::after {
  content: ""; position: absolute; right: 17px; top: 50%; margin-top: -7px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: rotate(45deg); transition: transform 0.2s ease, margin-top 0.2s ease;
}
.select-btn:focus-visible { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.select.open .select-btn { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.select.open .select-btn::after { transform: rotate(-135deg); margin-top: -3px; }
.select-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  list-style: none; padding: 6px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 8px;
  box-shadow: 0 20px 44px -20px rgba(34, 31, 28, 0.5);
  max-height: 264px; overflow-y: auto;
}
.select-list li {
  padding: 12px; border-radius: 5px; cursor: pointer;
  font-weight: 600; font-size: 0.98rem;
}
.select-list li:hover { background: var(--paper); }
.select-list li[aria-selected="true"] { background: var(--red); color: #fff; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft);
}
.btn-submit { width: 100%; margin-top: 6px; }
.form-note { font-size: 0.85rem; color: var(--muted); margin-top: 14px; text-align: center; }
.form-note a { color: var(--red-dark); font-weight: 700; }

.ws-success { text-align: center; padding: 30px 10px 10px; }
.success-mark {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--red); color: #fff; display: grid; place-items: center;
  font-size: 1.8rem; font-weight: 800;
}
.ws-success h3 { margin-bottom: 0.4em; }
.ws-success p { color: var(--muted); }

/* ---------- Offer list ---------- */
.offer-list { list-style: none; counter-reset: offer; margin-top: 10px; }
.offer-list li { counter-increment: offer; padding: 20px 0 20px 64px; position: relative; border-top: 1px solid var(--line); }
.offer-list li:first-child { border-top: 0; }
.offer-list li::before {
  content: "0" counter(offer);
  position: absolute; left: 0; top: 20px;
  font-family: var(--display); font-weight: 600; font-size: 1.5rem;
  color: var(--red);
}
.offer-list h3 { margin-bottom: 0.2em; }
.offer-list p { color: var(--muted); font-size: 0.95rem; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 46px; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px 28px; position: relative; }
.step-num {
  font-family: var(--display); font-weight: 700; font-size: 3.4rem; line-height: 1;
  color: var(--red-soft); -webkit-text-stroke: 1.5px var(--red);
  display: block; margin-bottom: 12px;
}
.step h3 { margin-bottom: 0.35em; }
.step p { color: var(--muted); font-size: 0.93rem; }

/* ---------- Gallery ---------- */
.gallery {
  /* first photo lines up with the page content; the strip bleeds off to the right */
  --gallery-edge: clamp(20px, calc((100vw - 1200px) / 2 + 40px), 40vw);
  display: flex; gap: 18px; overflow-x: auto;
  padding: 44px var(--gallery-edge) 10px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  /* free scrolling, no snap-back; `none` also kills the elastic overscroll bounce */
  overscroll-behavior-x: none;
}
.gallery figure { flex: 0 0 min(380px, 78vw); }
.gallery img { width: 100%; height: 300px; object-fit: cover; border-radius: var(--radius); }
.gallery figcaption {
  font-family: var(--display); font-weight: 500; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-top: 12px;
}
.gallery figcaption::before { content: "— "; color: var(--red); }

/* brand panel filling the dead margin to the left of the first photo.
   Only exists once that margin is wide enough to hold it. */
.gallery-intro { display: none; }

@media (min-width: 1320px) {
  .gallery { padding-left: 0; }
  .gallery-intro {
    /* edge minus the flex gap, so the first photo still starts at the content column */
    flex: 0 0 calc(var(--gallery-edge) - 18px); align-self: stretch;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    gap: 16px; padding: 26px 12px;
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--ink); color: #fff; text-decoration: none;
    position: relative; overflow: hidden;
    transition: background 0.25s ease;
  }
  /* faint batten stripes, echoing roof laths */
  .gallery-intro::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.055) 0 2px, transparent 2px 13px);
  }
  .gallery-intro:hover { background: var(--red); }
  .gallery-intro > * { position: relative; z-index: 1; }
  .gi-mark { width: min(46px, 60%); height: auto; flex: none; }
  .gi-slab-red { fill: var(--red); transition: fill 0.25s ease; }
  .gi-slab-light { fill: #D9D2C7; }
  .gallery-intro:hover .gi-slab-red { fill: #fff; }
  .gi-vertical {
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: var(--display); font-weight: 600; font-size: 0.9rem;
    text-transform: uppercase; letter-spacing: 0.18em; white-space: nowrap;
  }
  .gi-arrow { font-size: 1.15rem; line-height: 1; transition: transform 0.2s ease; }
  .gallery-intro:hover .gi-arrow { transform: translateX(4px); }
}

/* ---------- Final CTA ---------- */
.section-cta { text-align: center; }
.section-cta .kicker b { color: #fff; }
.section-cta .lead { margin-inline: auto; color: rgba(255, 255, 255, 0.88); }
.section-cta .cta-row { justify-content: center; }
.section-cta .btn-ghost { border-color: rgba(255, 255, 255, 0.8); }
.cta-alt { margin-top: 22px; color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; }
.cta-alt a { color: #fff; font-weight: 700; }
.areas { margin-top: 34px; font-size: 0.95rem; color: rgba(255, 255, 255, 0.8); }
.areas b { color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: #fff; border-top: 1px solid var(--line); padding: 26px 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.footer-logo { height: 44px; width: auto; }
.footer-inner p { font-size: 0.85rem; color: var(--muted); }
.footer-links a { color: var(--ink); font-weight: 700; text-decoration: none; }
.footer-links a:hover { color: var(--red); }
.footer-legal { font-size: 0.82rem; }
.footer-legal a { color: var(--muted); text-decoration: none; }
.footer-legal a:hover { color: var(--red); }

/* ---------- Legal pages ---------- */
.legal { padding: clamp(38px, 6vw, 70px) 0 clamp(54px, 8vw, 88px); }
.legal .wrap { max-width: 820px; }
.legal h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); line-height: 1.12; margin-bottom: 0.25em; }
.legal-updated { color: var(--muted); font-size: 0.88rem; margin-bottom: 2.2em; }
.legal h2 {
  font-size: clamp(1.1rem, 2.1vw, 1.35rem); line-height: 1.25;
  margin: 2em 0 0.5em; padding-top: 1em; border-top: 1px solid var(--line);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.4em; }
.legal p { margin-bottom: 0.9em; }
.legal ul { margin: 0 0 1.1em 1.15em; }
.legal li { margin-bottom: 0.45em; }
.legal a { color: var(--red-dark); font-weight: 600; }
.legal dl { margin-bottom: 1.2em; }
.legal dt {
  font-weight: 800; font-size: 0.76rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin-top: 0.9em;
}
.legal dd { margin: 2px 0 0; }
/* still-to-be-filled company details */
.ph {
  display: inline-block;
  background: #FCF3D8; border: 1px dashed #C79A44; color: #7A5A12;
  padding: 1px 8px; border-radius: 4px; font-weight: 700; font-size: 0.93em;
}

/* ---------- Mobile sticky bar ---------- */
.mobile-bar { display: none; }
@media (max-width: 767px) {
  .mobile-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 55;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(246, 243, 238, 0.92); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }
  .mobile-bar .btn { padding: 0.85em 0.5em; font-size: 0.92rem; width: 100%; }
  body { padding-bottom: 74px; }
  .site-footer { padding-bottom: 34px; }
}

/* ---------- Reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track, .hero-stamp svg, .hero-stamp .stamp-roof, .drops span, .rain-card.loading .rain-count { animation: none; }
  .hero-slide { animation: none; opacity: 0; }
}

/* ---------- Mobile fine-tuning ---------- */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .section { padding: 56px 0; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
  .hero { min-height: max(560px, 92svh); }
  /* text is centred on mobile, so darken evenly instead of from the left */
  .hero-overlay {
    background:
      linear-gradient(180deg, rgba(20, 14, 11, 0.52) 0%, rgba(20, 14, 11, 0.68) 100%),
      rgba(20, 14, 11, 0.34);
  }
  .hero-content { padding-top: 34px; padding-bottom: 52px; }
  .hero-sub { font-size: 1.02rem; margin-inline: auto; }
  .hero-chips { gap: 10px 16px; margin-top: 1.8em; justify-content: center; }
  .hero-chips li { font-size: 0.88rem; }
  .service-body { padding: 18px 18px 22px; }
  .worksheet { padding: 20px 18px 24px; }
  .feature-media::after { transform: translate(10px, 10px); }
  .gallery img { height: 240px; }
  .footer-inner { flex-direction: column; text-align: center; gap: 8px; }
  .marquee-track span { font-size: 0.92rem; }

  /* centre headings and intro copy; lists, form fields and the forecast
     readout stay left-aligned, where centring would hurt readability */
  h2, .kicker, .lead, .hero-content, .rain-q,
  .service-body, .step, .services-more,
  .feature-media figcaption { text-align: center; }
  .lead { margin-inline: auto; }
  .service-body h3::after { margin-inline: auto; }
  .sky-picker { justify-content: center; }
}