/* ==========================================================================
   Wild Roots Hauling — stylesheet
   Palette and type scale carried over from the original Tailwind theme.
   Breakpoints: md 768px, lg 1024px.
   ========================================================================== */

:root {
  --forest:     oklch(32.83% 0.0577 154.05);
  --deep-moss:  oklch(41.52% 0.0704 152.7);
  --moss:       oklch(57.57% 0.0854 148.5);
  --sage:       oklch(79.55% 0.0741 143.6);
  --near-black: oklch(20.3%  0.0165 150);
  --off-white:  oklch(99.22% 0.0022 145);

  --font-bebas:  "Bebas Neue", sans-serif;
  --font-barlow: "Barlow", sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--off-white);
  color: var(--near-black);
  font-family: var(--font-barlow);
  font-size: 1rem;
  line-height: 1.5;
}

/* height:auto keeps the width/height HTML attributes from overriding CSS-driven
   sizing (aspect-ratio, object-fit); the attributes still reserve layout space. */
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
h1, h2, h3, h4, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

.shell { margin-inline: auto; max-width: 80rem; }
.stars { display: flex; gap: 0.125rem; }
.stars svg { height: 1rem; width: 1rem; }

/* --- Nav ---------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid color-mix(in oklab, var(--forest) 20%, transparent);
  background-color: var(--near-black);
  color: var(--off-white);
  padding: 1rem 1.5rem;
}
.nav__brand { display: flex; align-items: center; gap: 0.75rem; }
.nav__logo { height: 2.75rem; width: auto; }
.nav__phone {
  display: none;
  background-color: var(--moss);
  padding: 0.5rem 1.5rem;
  font-family: var(--font-bebas);
  font-size: 1.125rem; line-height: 1.75rem;
  letter-spacing: 0.025em;
  color: var(--off-white);
  transition: background-color 150ms;
}
.nav__phone:hover { background-color: var(--sage); }

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

.hero { position: relative; display: flex; align-items: center; height: 85vh; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { height: 100%; width: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0;
  background-image: linear-gradient(
    to right,
    var(--near-black),
    color-mix(in oklab, var(--near-black) 60%, transparent),
    transparent
  );
}
.hero__body { position: relative; z-index: 10; max-width: 56rem; padding-inline: 1.5rem; }

.hero__badge {
  display: inline-flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1.5rem;
  border: 1px solid color-mix(in oklab, var(--sage) 40%, transparent);
  background-color: color-mix(in oklab, var(--near-black) 60%, transparent);
  padding: 0.5rem 1rem;
  backdrop-filter: blur(4px);
  transition: border-color 150ms;
}
.hero__badge:hover { border-color: var(--sage); }
.hero__badge .stars { color: var(--sage); }

.eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--off-white);
}

.hero__title {
  margin-bottom: 1.5rem;
  font-family: var(--font-bebas); font-weight: 400;
  font-size: 3.75rem; line-height: 0.9;
  color: var(--off-white);
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
}
.hero__title span { color: var(--sage); }

.hero__lede {
  margin-bottom: 2rem; max-width: 36rem;
  font-size: 1.25rem; line-height: 1.75rem; font-weight: 300;
  color: color-mix(in oklab, var(--off-white) 90%, transparent);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.btn {
  display: inline-block;
  font-family: var(--font-bebas); font-size: 1.5rem; line-height: 2rem;
  padding: 1rem 2.5rem;
  transition: all 150ms;
}
.btn--solid { background-color: var(--sage); color: var(--forest); }
.btn--solid:hover { background-color: var(--off-white); }
.btn--ghost { border: 2px solid var(--off-white); color: var(--off-white); }
.btn--ghost:hover { background-color: var(--off-white); color: var(--forest); }

/* --- Trust bar ---------------------------------------------------------- */

.trustbar {
  border-block: 1px solid color-mix(in oklab, var(--off-white) 10%, transparent);
  background-color: var(--near-black);
  padding: 1.5rem;
}
.trustbar .shell {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  column-gap: 2.5rem; row-gap: 1rem;
}
.trustbar span {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--sage);
}

/* --- Shared section furniture ------------------------------------------- */

.section { padding: 6rem 1.5rem; }

.section__head {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 1.5rem; margin-bottom: 4rem;
}
.section__rule { display: none; }

.h2 { font-family: var(--font-bebas); font-weight: 400; font-size: 3rem; line-height: 1; }

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

.services { background-color: var(--forest); color: var(--off-white); }
.services__intro { max-width: 42rem; }
.services__intro .h2 { margin-bottom: 1rem; }
.services__intro p {
  font-size: 1.125rem; line-height: 1.75rem;
  color: color-mix(in oklab, var(--sage) 80%, transparent);
}

.grid-hairline {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background-color: color-mix(in oklab, var(--sage) 10%, transparent);
}

.card { background-color: var(--forest); padding: 2rem; transition: background-color 150ms; }
.card:hover { background-color: var(--deep-moss); }
.card h3 {
  margin-bottom: 1rem;
  font-family: var(--font-bebas); font-weight: 400;
  font-size: 1.875rem; line-height: 2.25rem;
  transition: color 150ms;
}
.card:hover h3 { color: var(--sage); }
.card p { margin-bottom: 1.5rem; color: color-mix(in oklab, var(--off-white) 70%, transparent); }
.card ul {
  display: flex; flex-direction: column; gap: 0.5rem;
  font-size: 0.875rem; line-height: 1.25rem;
  color: color-mix(in oklab, var(--sage) 60%, transparent);
}

/* --- Work in progress / Why us ------------------------------------------ */

.work { overflow: hidden; }
.work .h2 { margin-bottom: 4rem; text-align: center; }
.work__grid { display: grid; gap: 3rem; }
.work__shots { display: flex; flex-direction: column; gap: 1.5rem; }
.work__shot { position: relative; }
.work__shot img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.work__tag {
  position: absolute; left: 1rem; top: 1rem;
  padding: 0.25rem 1rem;
  font-family: var(--font-bebas); font-size: 1.25rem; line-height: 1.75rem;
  color: var(--off-white);
}
.work__tag--before { background-color: var(--near-black); }
.work__tag--after  { background-color: var(--moss); }

.work__why { display: flex; flex-direction: column; justify-content: center; }
.rule-left { border-left: 4px solid var(--moss); padding-left: 2rem; }
.work__why h3 {
  margin-bottom: 1rem;
  font-family: var(--font-bebas); font-weight: 400;
  font-size: 2.25rem; line-height: 2.5rem;
}
.work__reasons { display: flex; flex-direction: column; gap: 1.5rem; }
.work__reasons h4 { margin-bottom: 0.25rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; }
.work__reasons p { color: color-mix(in oklab, var(--near-black) 70%, transparent); }

/* --- Testimonials ------------------------------------------------------- */

.reviews {
  border-top: 1px solid color-mix(in oklab, var(--near-black) 10%, transparent);
  background-color: var(--off-white);
}
.reviews__label {
  margin-bottom: 0.75rem;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--moss);
}
.reviews__score {
  display: flex; align-items: center; gap: 1rem;
  border-left: 4px solid var(--moss); padding-left: 1.5rem;
}
.reviews__score-num {
  font-family: var(--font-bebas); font-size: 3.75rem; line-height: 1; color: var(--forest);
}
.reviews__score .stars { color: var(--moss); }
.reviews__score p {
  margin-top: 0.25rem;
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
  color: color-mix(in oklab, var(--near-black) 60%, transparent);
}

.grid-hairline--light { background-color: color-mix(in oklab, var(--near-black) 10%, transparent); }

.review { display: flex; flex-direction: column; background-color: var(--off-white); padding: 2rem; }
.review .stars { color: var(--moss); }
.review blockquote {
  margin-top: 1rem; flex-grow: 1;
  color: color-mix(in oklab, var(--near-black) 80%, transparent);
}
.review figcaption {
  margin-top: 1.5rem; padding-top: 1rem;
  border-top: 1px solid color-mix(in oklab, var(--near-black) 10%, transparent);
}
.review__name {
  display: block;
  font-family: var(--font-bebas); font-size: 1.5rem; line-height: 1;
}
.review__meta {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.2em; color: color-mix(in oklab, var(--near-black) 40%, transparent);
}

.reviews__foot { margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.btn--forest {
  display: inline-block;
  background-color: var(--forest); color: var(--off-white);
  padding: 0.75rem 2rem;
  font-family: var(--font-bebas); font-size: 1.25rem; line-height: 1.75rem;
  transition: background-color 150ms;
}
.btn--forest:hover { background-color: var(--moss); }
.reviews__foot p {
  font-size: 0.875rem; line-height: 1.25rem;
  color: color-mix(in oklab, var(--near-black) 60%, transparent);
}

/* --- Estimate / contact ------------------------------------------------- */

.estimate { background-color: var(--near-black); }
.estimate__inner { margin-inline: auto; max-width: 48rem; }
.estimate__head { margin-bottom: 3rem; text-align: center; }
.estimate__head .h2 { margin-bottom: 1rem; color: var(--sage); }
.estimate__head p { color: color-mix(in oklab, var(--off-white) 60%, transparent); }

.estimate__actions { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.btn--xl { font-size: 2.25rem; line-height: 2.5rem; padding: 1.25rem 3rem; text-align: center; }
.estimate__alt { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; }
.estimate__alt a {
  color: var(--sage);
  font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em;
  transition: color 150ms;
}
.estimate__alt a:hover { color: var(--off-white); }
.estimate__note {
  margin-top: 0.5rem; text-align: center;
  font-size: 0.875rem; line-height: 1.25rem;
  color: color-mix(in oklab, var(--off-white) 60%, transparent);
}

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

.footer {
  border-top: 1px solid color-mix(in oklab, white 5%, transparent);
  background-color: var(--forest);
  color: color-mix(in oklab, var(--off-white) 60%, transparent);
  padding: 3rem 1.5rem;
}
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.footer__logo { margin-bottom: 1.5rem; height: 5rem; width: auto; }
.footer h4 {
  margin-bottom: 1.5rem;
  font-family: var(--font-bebas); font-weight: 400;
  font-size: 1.5rem; line-height: 2rem; letter-spacing: 0.025em;
  color: var(--off-white);
}
.footer__about { margin-bottom: 1.5rem; font-size: 0.875rem; line-height: 1.625; }
.footer__social { color: var(--sage); transition: color 150ms; }
.footer__social:hover { color: var(--off-white); }
.footer ul { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; }
.footer__phone {
  display: block; margin-bottom: 0.5rem;
  font-family: var(--font-bebas); font-size: 1.5rem; line-height: 2rem;
  color: var(--sage);
}
.footer__legal {
  margin: 3rem auto 0; max-width: 80rem;
  border-top: 1px solid color-mix(in oklab, white 5%, transparent);
  padding-top: 2rem; text-align: center;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
}
.footer__links {
  margin-bottom: 1rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem;
}
.footer__links a { color: var(--sage); transition: color 150ms; }
.footer__links a:hover { color: var(--off-white); }

/* --- Legal pages (privacy policy, terms) -------------------------------- */

.legal { padding: 4rem 1.5rem 6rem; }
.legal__inner { margin-inline: auto; max-width: 48rem; }

.legal__eyebrow {
  margin-bottom: 0.75rem;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--moss);
}
.legal h1 {
  font-family: var(--font-bebas); font-weight: 400;
  font-size: 3rem; line-height: 1;
}
.legal__meta {
  margin-top: 1.25rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid color-mix(in oklab, var(--near-black) 10%, transparent);
  font-size: 0.875rem; line-height: 1.6;
  color: color-mix(in oklab, var(--near-black) 60%, transparent);
}
.legal__meta strong { color: var(--near-black); font-weight: 600; }

.legal h2 {
  margin-top: 3rem; margin-bottom: 0.75rem;
  font-family: var(--font-bebas); font-weight: 400;
  font-size: 1.875rem; line-height: 1.15;
}
.legal h3 {
  margin-top: 1.75rem; margin-bottom: 0.5rem;
  font-size: 1.0625rem; font-weight: 700; line-height: 1.4;
}
.legal p, .legal li {
  line-height: 1.7;
  color: color-mix(in oklab, var(--near-black) 82%, transparent);
}
.legal p { margin-bottom: 1rem; }
.legal ul {
  list-style: disc; padding-left: 1.375rem;
  margin-bottom: 1rem; display: block;
}
.legal li { margin-bottom: 0.4rem; }
.legal a { color: var(--moss); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--forest); }

.legal__callout {
  margin: 1.5rem 0;
  border-left: 4px solid var(--moss);
  background-color: color-mix(in oklab, var(--sage) 14%, transparent);
  padding: 1.25rem 1.5rem;
}
.legal__callout p:last-child { margin-bottom: 0; }

.legal__contact {
  margin-top: 1.5rem;
  border: 1px solid color-mix(in oklab, var(--near-black) 12%, transparent);
  padding: 1.5rem;
}
.legal__contact p { margin-bottom: 0.35rem; }
.legal__contact p:last-child { margin-bottom: 0; }

.legal__back {
  display: inline-block; margin-top: 3rem;
  font-family: var(--font-bebas); font-size: 1.25rem;
  color: var(--forest); text-decoration: none;
}
.legal__back:hover { color: var(--moss); text-decoration: none; }

/* --- md: 768px ---------------------------------------------------------- */

@media (min-width: 768px) {
  .nav { padding-inline: 3rem; }
  .nav__logo { height: 3.5rem; }
  .nav__phone { display: block; }

  .hero__body { padding-inline: 3rem; }
  .hero__title { font-size: 6rem; }
  .hero__lede { font-size: 1.5rem; line-height: 2rem; }

  .trustbar { padding-inline: 3rem; }
  .section { padding-inline: 3rem; }
  .footer { padding-inline: 3rem; }
  .legal { padding-inline: 3rem; }
  .legal h1 { font-size: 3.75rem; }

  .section__head { flex-direction: row; align-items: flex-end; }
  .section__rule {
    display: block; height: 1px; flex-grow: 1;
    margin-inline: 2rem; margin-bottom: 1.5rem;
    background-color: color-mix(in oklab, var(--sage) 20%, transparent);
  }
  .h2 { font-size: 3.75rem; }

  .grid-hairline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .estimate__actions { gap: 1.75rem; }
}

/* --- lg: 1024px --------------------------------------------------------- */

@media (min-width: 1024px) {
  .grid-hairline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}