/* Mobile-first. Brand colours (--primary, --accent) are injected from content/company.md. */

:root {
  /* --primary (black), --accent (gold), --highlight (yellow) and --wa come from
     content/company.md. The values here are fallbacks only. */
  --primary: #14130f;
  --accent: #c9a227;
  --highlight: #ffd23f;
  --wa: #25d366;

  /* Gold is only ~2.5:1 on white, which fails WCAG. Darken it for anything on a light
     background, and keep the bright yellow for use on black. */
  --accent-deep: color-mix(in srgb, var(--accent) 78%, #3d2f00);

  --ink: #14130f;
  --ink-soft: #57544c;
  --line: #e6e2d6;
  --bg: #fff;
  --bg-alt: #f8f6ef; /* warm off-white, so the gold reads as gold and not as mustard */
  --radius: 14px;
  --shadow: 0 1px 2px rgb(20 19 15 / 6%), 0 8px 24px rgb(20 19 15 / 10%);
  --bar: 0px; /* height of the sticky mobile action bar; set at the breakpoint */
}

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

body {
  margin: 0;
  padding-bottom: var(--bar);
  font: 400 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%; /* stop iOS inflating text in landscape */
}

h1, h2, h3 {
  margin: 0 0 .5em;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2rem, 7vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 4.5vw, 2.25rem); }
h3 { font-size: 1.175rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; }

a { color: var(--primary); }

svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
}

.wrap {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 20px;
}

.wrap--narrow { max-width: 760px; }

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--primary);
  color: #fff;
  border-radius: 8px;
}

:where(a, button, summary, input, textarea):focus-visible {
  outline: 3px solid var(--accent-deep);
  outline-offset: 2px;
}

/* Deep gold vanishes on the black sections — switch to the bright yellow there. */
.strip :focus-visible,
.cta :focus-visible,
.footer :focus-visible { outline-color: var(--highlight); }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  gap: .55em;
  align-items: center;
  justify-content: center;
  min-height: 48px; /* comfortable thumb target */
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}

.btn:active { transform: translateY(1px); }
.btn:hover { filter: brightness(1.06); }
.btn--block { width: 100%; }
.btn--primary { background: var(--primary); color: #fff; }
.btn--wa { background: var(--wa); color: #05341a; }

/* Yellow on black: the strongest contrast pair on the page, so it goes on the header CTA. */
.btn--call {
  background: var(--highlight);
  color: var(--ink);
}

.btn--ghost {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 45%);
}

/* ------------------------------------------------------------------- header */

.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.header__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

/* The logo file, inlined. It carries its own wordmark, so no text sits beside it.
   It is a square badge rather than a horizontal lockup, so it needs real height to stay
   legible — hence the taller header bar. */
.logo__svg {
  width: auto;
  height: 52px;
  flex: none;
  fill: none; /* the svg sets its own fills; the global `fill: currentColor` would flatten it */
}

/* Fallback when no logo file is set: a lettered tile plus the company name. */
.logo__mark {
  display: grid;
  place-items: center;
  min-width: 36px; /* a square for one letter, wider if the brand uses initials */
  height: 36px;
  padding-inline: 8px;
  border-radius: 10px;
  background: var(--highlight);
  color: var(--ink);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.logo__text {
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

/* CSS-only mobile menu — no JavaScript to break. */
.burger {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  cursor: pointer;
}

.burger span {
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

.nav {
  display: none;
  position: absolute;
  inset: 100% 0 auto;
  flex-direction: column;
  padding: 8px 20px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.nav a {
  padding: 14px 0;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.nav-toggle:checked ~ .nav { display: flex; }
.nav-toggle:checked ~ .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle:checked ~ .burger span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.header .btn--call span { display: none; } /* icon only until there's room */

/* --------------------------------------------------------------------- hero */

.hero {
  padding: 48px 0 40px;
  background:
    radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent),
    linear-gradient(180deg, var(--bg-alt), var(--bg));
}

/* The big logo at the top of the page. Sized in vw so it scales down on small phones instead of
   pushing the headline below the fold. */
.hero__logo {
  margin-bottom: 16px;
}

.hero__logo .logo__svg {
  height: clamp(68px, 16vw, 104px);
}

.hero__sub {
  max-width: 34em;
  color: var(--ink-soft);
  font-size: 1.075rem;
}

/* Photo band, directly under the header. */
.banner {
  margin: 0;
  background: var(--bg-alt);
  line-height: 0; /* kill the descender gap under the img */
}

/* The photo keeps its own proportions and is never cropped, so the roof and the crew's boots
   are both always in frame.
   Capping the WIDTH is what makes this work on a wide monitor. Capping the height instead — as
   this used to — means an ever-harsher crop as the screen gets wider: at 2560px a 520px-tall
   band is a ~5:1 slot for a 1.83:1 photo, and the top of the picture is thrown away. */
.banner img {
  display: block;
  width: 100%;
  max-width: 1140px; /* lines up with .wrap, so it sits on the page's grid */
  margin-inline: auto;
  height: auto;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 7px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .84rem;
  white-space: nowrap;
}

.chip svg { color: var(--accent-deep); }

.card {
  padding: 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.quote { margin-top: 32px; }
.quote__title { font-size: 1.3rem; }

.quote__note {
  margin: 16px 0 12px;
  color: var(--ink-soft);
  font-size: .9rem;
  text-align: center;
}

/* --------------------------------------------------------------------- form */

.form { display: grid; gap: 6px; }

.form label {
  font-size: .87rem;
  font-weight: 600;
}

.opt { font-weight: 400; color: var(--ink-soft); }

.form input,
.form textarea {
  width: 100%;
  min-height: 48px;
  margin-bottom: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 16px; /* under 16px, iOS Safari zooms the page on focus */
  background: var(--bg);
  color: var(--ink);
}

.form textarea { resize: vertical; }

.form input:focus,
.form textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.form__small {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: .78rem;
  text-align: center;
}

/* -------------------------------------------------------------- trust strip */

.strip {
  padding: 22px 0;
  background: var(--primary);
  color: #fff;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.badge {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: .87rem;
  font-weight: 600;
}

.badge svg { color: var(--highlight); }

.strip__clients {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgb(255 255 255 / 22%);
  font-size: .87rem;
  opacity: .92;
}

.strip__clients span { font-weight: 700; }
.strip__clients em { font-style: normal; opacity: .85; }

/* ----------------------------------------------------------------- sections */

.section { padding: 56px 0; }
.section--alt { background: var(--bg-alt); }
.section__title { text-align: center; }

.section__intro {
  max-width: 46em;
  margin: 0 auto 32px;
  color: var(--ink-soft);
  text-align: center;
}

.section__title + .grid,
.section__title + .steps,
.section__title + .prices,
.section__title + .areas,
.section__title + .faq { margin-top: 32px; }

.grid {
  display: grid;
  gap: 16px;
}

.service h3 { color: var(--primary); }
.service p { color: var(--ink-soft); font-size: .95rem; }

/* -------------------------------------------------------------------- steps */

.steps {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: var(--bg-alt);
  border-radius: var(--radius);
}

.step__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--highlight);
  color: var(--ink);
  font-weight: 700;
}

.step__body { min-width: 0; }
.step h3 { margin: 6px 0 4px; }
.step p { color: var(--ink-soft); font-size: .95rem; }

/* ------------------------------------------------------------------- prices */

.prices {
  width: 100%;
  border-collapse: collapse;
}

/* On phones the table becomes a stack of cards — no horizontal scrolling. */
.prices thead { display: none; }

.prices tbody tr {
  display: grid;
  gap: 2px;
  margin-bottom: 12px;
  padding: 16px;
  background: var(--bg-alt);
  border-radius: var(--radius);
}

.prices td {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  font-size: .95rem;
}

.prices td::before {
  content: attr(data-label);
  color: var(--ink-soft);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.prices td.price {
  color: var(--primary);
  font-size: 1.2rem;
  font-weight: 700;
}

.footnote {
  margin-top: 20px;
  color: var(--ink-soft);
  font-size: .82rem;
  text-align: center;
}

/* ------------------------------------------------------------------ reviews */

.review { margin: 0; }

.review__stars {
  display: flex;
  gap: 2px;
  color: var(--accent-deep);
  margin-bottom: 10px;
}

.review blockquote {
  margin: 0 0 14px;
  font-size: .96rem;
  color: var(--ink-soft);
}

.review figcaption {
  font-size: .87rem;
  font-weight: 700;
}

/* -------------------------------------------------------------------- areas */

.areas {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.areas li {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-alt);
  border-radius: 10px;
  font-size: .95rem;
}

.areas svg { color: var(--accent-deep); }

/* ---------------------------------------------------------------------- faq */

.faq {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--primary);
  font-size: 1.3rem;
  font-weight: 400;
}

.faq[open] summary::after { content: "−"; }

.faq__body {
  padding-bottom: 18px;
  color: var(--ink-soft);
  font-size: .95rem;
}

/* ---------------------------------------------------------------------- cta */

.cta {
  padding: 56px 0;
  background: var(--primary);
  color: #fff;
  text-align: center;
}

.cta p { color: rgb(255 255 255 / 88%); }

.cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}

.cta__hours {
  margin-top: 18px;
  font-size: .85rem;
  opacity: .75;
}

/* ------------------------------------------------------------------- footer */

.footer {
  padding: 40px 0 32px;
  /* The call to action above is already black. Without a deeper shade and a gold rule, the two
     merge into one undifferentiated slab. */
  background: color-mix(in srgb, var(--primary) 82%, #000);
  border-top: 3px solid var(--accent);
  color: rgb(255 255 255 / 70%);
  font-size: .87rem;
}

.footer a {
  display: inline-block;
  padding: 4px 0; /* keeps the tap target above the 24px WCAG 2.2 minimum */
  color: #fff;
}

/* The logo has navy and charcoal elements that all but vanish on the black footer, so it sits
   on a white plate. */
.footer__logo {
  display: inline-block;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 12px;
}

.footer__logo .logo__svg { height: 56px; }

.footer__name { color: #fff; font-weight: 700; }

.footer__grid {
  display: grid;
  gap: 24px;
}

.footer__print {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / 15%);
  font-size: .78rem;
  opacity: .7;
}

/* ------------------------------------------------- sticky mobile action bar */

.actionbar {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  display: flex;
  gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); /* clears the iPhone home bar */
  background: rgb(255 255 255 / 95%);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
}

.actionbar__btn {
  display: flex;
  flex: 1;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
}

.actionbar__btn--call {
  flex: 0 0 34%;
  background: var(--highlight);
  color: var(--ink);
}

.actionbar__btn--wa {
  background: var(--wa);
  color: #05341a;
}

/* -------------------------------------------------------------- breakpoints */

@media (max-width: 767px) {
  :root { --bar: 74px; } /* body padding so the action bar never covers the footer */
}

@media (min-width: 600px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .areas { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  body { font-size: 18px; }
  .actionbar { display: none; } /* the header CTA is always visible on desktop */
  .burger, .nav-toggle { display: none; }

  .nav {
    display: flex;
    position: static;
    flex-direction: row;
    gap: 24px;
    padding: 0;
    background: none;
    border: 0;
  }

  .nav a {
    padding: 0;
    border: 0;
    font-size: .95rem;
  }

  .nav a:hover { color: var(--primary); }

  .header .btn--call span { display: inline; }
  .header__bar { gap: 28px; min-height: 80px; }
  .logo__svg { height: 60px; }
  .hero { padding: 48px 0 56px; }
  .section { padding: 80px 0; }
  .cta { padding: 80px 0; }
  .steps { grid-template-columns: repeat(2, 1fr); }

  /* Enough width for a real table again. */
  .prices thead { display: table-header-group; }
  .prices tbody tr { display: table-row; margin: 0; padding: 0; background: none; }

  .prices th {
    padding: 12px 16px;
    color: var(--ink-soft);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    border-bottom: 2px solid var(--line);
  }

  .prices td {
    display: table-cell;
    padding: 18px 16px;
    border-bottom: 1px solid var(--line);
  }

  .prices td::before { display: none; }
  .prices td.price { text-align: right; white-space: nowrap; }
  .prices th:last-child { text-align: right; }
}

@media (min-width: 900px) {
  /* Copy and the quote form sit side by side; the picture spans the full width beneath them,
     so the crew are shown large rather than squeezed into a column. */
  .hero__grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 48px;
    align-items: center;
  }

  .quote { margin-top: 0; padding: 28px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .step { flex-direction: column; }
  .areas { grid-template-columns: repeat(3, 1fr); }

  .strip .wrap {
    display: flex;
    gap: 32px;
    align-items: center;
    justify-content: space-between;
  }

  .strip__clients {
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid rgb(255 255 255 / 22%);
    padding-left: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .header, .actionbar, .cta__buttons { display: none; }
}