/* ==========================================================================
   TRENTSIDE EXTERIOR CLEANING
   Wet stone: cold charcoal ground, bone type, warm amber on the actions so it
   sits with the backlit spray in the hero clip. Video hero, sticky service
   stack, static review grid, before and after comparison, team, FAQ,
   video contact band.
   ========================================================================== */

:root {
  --background: #0E1114;
  --card: #171B20;
  --foreground: #F0EDE8;
  --primary-cta: #F2B33D;
  --primary-cta-text: #17110A;
  --secondary-cta: #1D2228;
  --secondary-cta-text: #F0EDE8;
  --accent: #F2B33D;
  --background-accent: #7A5E1C;
  --radius: 1rem;
  --content-width: 87.5vw;
  --section-head-size: var(--text-6xl);
  --nav-ink: #F0EDE8;
  --nav-ink-scrolled: #F0EDE8;
  --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Clash Display', 'Satoshi', -apple-system, sans-serif;
}

@media (width >= 1536px) { :root { --section-head-size: var(--text-7xl); } }

.card {
  background: linear-gradient(to bottom right,
    color-mix(in srgb, var(--card) 95%, transparent),
    color-mix(in srgb, var(--card) 70%, transparent));
  border-color: color-mix(in srgb, var(--foreground) 10%, transparent);
}

/* --- Hero ---------------------------------------------------------------- */

.hero { position: relative; padding-top: 8rem; padding-bottom: 4rem; }

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  text-align: center;
}

.hero__title {
  max-width: 20ch;
  font-size: var(--text-8xl);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--foreground) 30%, var(--accent) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}

.hero__lede { max-width: 56ch; font-size: var(--text-xl); line-height: 1.45; opacity: 0.85; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 0.5rem; }

.hero__stage { position: relative; margin-top: 3rem; padding: 0.75rem; border-radius: var(--radius); }

.hero__stage video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: calc(var(--radius) - 0.25rem);
}

.spec-chip {
  position: absolute;
  z-index: 2;
  top: 2rem;
  right: 2rem;
  max-width: 18rem;
  padding: 1.25rem;
  border-radius: var(--radius);
}

.spec-chip svg { width: 1.1rem; height: 1.1rem; color: var(--accent); margin-bottom: 0.6rem; }
.spec-chip h3 { font-size: var(--text-2xl); margin-bottom: 0.2rem; }
.spec-chip p { font-size: var(--text-base); opacity: 0.7; }

@media (width <= 768px) {
  .hero { padding-top: 7rem; }
  .hero__title { font-size: var(--text-7xl); max-width: 14ch; }
  .spec-chip { position: static; max-width: none; margin-top: 0.75rem; }
}

/* --- Services stack -------------------------------------------------------- */

.svc-stack { display: flex; flex-direction: column; gap: 2rem; }

.svc { position: sticky; top: 6rem; background: var(--card); }
.svc .split-card__copy h3 { font-size: var(--text-6xl); }

@media (width <= 900px) { .svc { position: static; } .svc-stack { gap: 1rem; } }

/* --- Review grid -------------------------------------------------------------
   The template shipped these as a scrolling marquee. Nothing on this site
   moves on its own, so the same five cards sit in a grid and the reader
   decides where to look. ------------------------------------------------- */

/* Flex rather than grid so the five cards fall three then two, with the short
   last row centred instead of leaving a hole on the right. */
.review-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
}

.review-grid .testimonial { flex: 1 1 21rem; max-width: 27rem; }

@media (width <= 700px) { .review-grid .testimonial { flex-basis: 100%; max-width: none; } }

/* --- Before and after on the comparison columns ---------------------------- */

.compare__shot {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: calc(var(--radius) - 0.35rem);
  margin-bottom: 1.25rem;
}

/* --- Contact band ------------------------------------------------------------ */

.contact-band {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  padding: 5rem 2rem;
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
}

.contact-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.contact-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,17,20,0.94), rgba(14,17,20,0.72));
}

.contact-band > * { position: relative; z-index: 2; }
.contact-band h2 { max-width: 20ch; font-size: var(--text-6xl); line-height: 1.1; text-wrap: balance; }
.contact-band p { max-width: 48ch; font-size: var(--text-lg); line-height: 1.5; opacity: 0.85; }
.contact-band .form { max-width: 32rem; margin-top: 0.75rem; }

/* --- Footer -------------------------------------------------------------------- */

.site-footer { border-radius: var(--radius) var(--radius) 0 0; background: var(--card); color: var(--foreground); padding-block: 4rem; border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent); }
.footer-top { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: start; }
.footer-brand { font-size: var(--text-5xl); font-weight: 700; letter-spacing: -0.02em; }
.footer-nav { display: grid; grid-template-columns: repeat(3, minmax(9rem, auto)); gap: 2.5rem; }
.footer-nav h3 { font-size: var(--text-base); font-weight: 500; opacity: 0.55; margin-bottom: 1rem; }
.footer-nav ul { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-nav a { font-size: var(--text-lg); transition: color 0.2s; }
.footer-nav a:hover { color: var(--accent); }

.footer-legal-bar {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  font-size: var(--text-base); opacity: 0.6;
}
.footer-legal-bar div { display: flex; gap: 1.25rem; }

@media (width <= 768px) {
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}