/* MooBooks — hand-written CSS. Mobile-first: base rules are the phone layout,
   media queries only ever add to it. Her buyers open this in a truck. */

/* ---------------------------------------------------------------- tokens */

:root {
  /* Sampled from the logo: the terracotta in the bandana and coffee cups,
     and the chocolate brown of the calf. Every pair below clears WCAG AA
     on its intended background — check before changing any of them. */
  --cream:      #FBF8F5;
  --panel:      #F4EDE6;
  --card:       #FFFFFF;
  --border:     #E6DAD0;
  --border-str: #D8C6B8;

  --ink:        #2E1F18;   /* 14.98:1 on cream */
  --soft:       #5A4639;   /*  8.37:1 on cream */
  --rust:       #B04A26;   /*  5.15:1 on cream, 5.45:1 white-on-rust */
  --rust-dark:  #8F3B1D;
  --rust-tint:  #F7E9E1;

  --radius:     14px;
  --radius-sm:  10px;
  --shadow:     0 1px 2px rgba(46,31,24,.05), 0 8px 24px -12px rgba(46,31,24,.18);
  --shadow-lg:  0 2px 4px rgba(46,31,24,.06), 0 18px 44px -18px rgba(46,31,24,.26);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;

  --bar-h: 60px;   /* height of the fixed mobile call bar */
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* room for the fixed call bar so it can never cover the footer */
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
}

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

a { color: var(--rust); }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--rust); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- layout */

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

.band { padding: 56px 0; }
.band-warm { background: var(--panel); border-block: 1px solid var(--border); }

.kicker {
  font-family: var(--sans);
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rust); margin: 0 0 10px;
}

.section-title { font-size: 30px; letter-spacing: -.015em; margin: 0 0 14px; }
.section-lede { color: var(--soft); font-size: 17px; margin: 0 0 30px; max-width: 62ch; }

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

.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251, 248, 245, .92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.head-inner { display: flex; align-items: center; gap: 12px; min-height: 62px; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; margin-right: auto; }
.brand img { width: 40px; height: 40px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-family: var(--serif); font-size: 18px; letter-spacing: -.01em; }
.brand-text em { font-style: normal; font-size: 11px; color: var(--soft); letter-spacing: .02em; }

.head-nav { display: none; gap: 22px; }
.head-nav a { color: var(--soft); text-decoration: none; font-size: 15px; font-weight: 600; }
.head-nav a:hover { color: var(--rust); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-size: 16px; font-weight: 700; line-height: 1;
  padding: 13px 20px; border-radius: var(--radius-sm);
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .1s;
}
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--rust); color: #fff; }
.btn-primary:hover { background: var(--rust-dark); }

.btn-ghost { background: transparent; color: var(--rust); border-color: var(--border-str); }
.btn-ghost:hover { border-color: var(--rust); background: var(--rust-tint); }

.btn-lg { padding: 16px 24px; font-size: 17px; }
.btn-block { width: 100%; }

/* Two-line button: label on top, the actual number or address underneath, so
   both are readable without the button growing as wide as the address. */
.btn-stack { align-items: center; }
/* Centre the two lines on each other, and keep the icon on the label line —
   "[icon] Call" over the number — rather than floating it beside the whole
   stack, where it sat against the short word and looked misaligned. */
.btn-stack-text {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; line-height: 1.15; min-width: 0;
}
.btn-stack-text strong {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: 700;
}
.btn-stack-text small {
  font-size: 12.5px; font-weight: 600; letter-spacing: .005em;
  opacity: .85; overflow-wrap: anywhere;
}

/* .btn sets display:inline-flex, and this has equal specificity — so it must
   come AFTER the .btn block or it loses. Putting it up with the header rules
   is what once left a wrapped, half-cut phone button in the mobile header.

   The header call button is redundant on a phone; the fixed bottom bar covers
   it. The hero's two buttons are not redundant — they are the two ways to
   reach her, so both stay at every width. */
.head-call { display: none; }

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

.hero { padding: 22px 0 48px; }
.hero-grid { display: grid; gap: 26px; }

.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--rust); margin: 0 0 10px;
}

/* Sized so the headline, the lede, the call button and the top of the form all
   land above the fold on a 390x844 phone. Check with `node shot.mjs` before
   making any of it bigger. */
/* Deliberately large on a phone — this is the first thing a contractor sees
   from a truck cab, and it earns the space. Two short words per line is what
   buys the size; a longer headline at this scale pushes the form under the
   fold and shot.mjs fails the build.

   The line break is an explicit <br> in the markup, so no `text-wrap: balance`
   here — it would fight a break we have already decided. */
.hero h1 {
  font-size: 52px; line-height: 1.02; letter-spacing: -.03em; margin: 0 0 16px;
}
.hero h1 .accent { color: var(--rust); }

.lede { font-size: 16.5px; line-height: 1.5; color: var(--soft); margin: 0 0 18px; max-width: 56ch; }

/* A 360px Android is the tightest case: headline, lede, both buttons AND the
   top of the form have to fit above a 60px call bar. Everything here is
   shaving vertical space to make that hold — `node shot.mjs` fails if it
   stops holding. */
@media (max-width: 420px) {
  .hero h1 { font-size: 46px; }
  .lede { font-size: 16px; margin-bottom: 16px; }
  .btn-lg { padding: 13px 18px; }
  .btn-stack-text strong { font-size: 16px; }
  .hero-actions { gap: 8px; }
}

.reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.reasons li {
  position: relative; padding-left: 30px;
  font-size: 15.5px; color: var(--soft); line-height: 1.55;
}
.reasons li::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--rust-tint);
  border: 1.5px solid var(--rust);
}
.reasons li::after {
  content: ""; position: absolute; left: 6px; top: 10px;
  width: 6px; height: 3px;
  border-left: 2px solid var(--rust); border-bottom: 2px solid var(--rust);
  transform: rotate(-45deg);
}
.reasons strong { color: var(--ink); font-weight: 700; display: block; }

/* Equal-height columns once they sit side by side, so the two-line labels line
   up rather than one button standing taller than the other. */
.hero-actions { display: grid; gap: 10px; align-items: stretch; }

/* ------------------------------------------------------------------ card */

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

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

.form-card { box-shadow: var(--shadow-lg); border-color: var(--border-str); }
.form-title { font-size: 22px; margin: 0 0 4px; }
.form-sub { font-size: 14.5px; color: var(--soft); margin: 0 0 20px; }

.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 13.5px; font-weight: 700;
  color: var(--ink); margin-bottom: 6px;
}
.field .opt { font-weight: 400; color: var(--soft); }

.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--sans);
  /* 16px minimum, or iOS Safari zooms the whole page on focus */
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  padding: 12px 13px;
  border: 1.5px solid var(--border-str);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.field select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235A4639' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 11px;
  padding-right: 36px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--rust); outline: none;
  box-shadow: 0 0 0 3px rgba(176, 74, 38, .16);
}
.field input.bad, .field select.bad, .field textarea.bad { border-color: #C0392B; }

.row { display: grid; gap: 14px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: 13px; color: var(--soft); text-align: center; margin: 12px 0 0; }

.form-status { font-size: 14.5px; margin: 12px 0 0; text-align: center; }
.form-status:empty { margin: 0; }
.form-status.ok  { color: #1B6B3A; background: #E7F5EC; border: 1px solid #BFE3CC;
                   padding: 12px; border-radius: var(--radius-sm); text-align: left; }
.form-status.err { color: #9B2C1C; background: #FBEAE6; border: 1px solid #F0C6BC;
                   padding: 12px; border-radius: var(--radius-sm); text-align: left; }

/* -------------------------------------------------------------- services */

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

.svc h3 { font-size: 18px; margin: 0 0 8px; }
.svc p { font-size: 15.5px; color: var(--soft); margin: 0; }

/* ---------------------------------------------------------- construction

   Deliberately NOT another grid of bordered cards. Services above already
   uses that shape, and running the same treatment twice made the two sections
   read as one long duplicate. This is a plain checklist: no card chrome, term
   and explanation on one line, ticks down the left. */

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

.checklist li {
  position: relative;
  padding: 12px 0 12px 34px;
  font-size: 15.5px; line-height: 1.5; color: var(--soft);
  border-bottom: 1px solid var(--border);
}
.checklist li:last-child { border-bottom: 0; }

.checklist li::before {
  content: ""; position: absolute; left: 2px; top: 16px;
  width: 9px; height: 16px;
  border-right: 2.5px solid var(--rust); border-bottom: 2.5px solid var(--rust);
  transform: rotate(42deg);
}

.checklist strong {
  display: block; color: var(--ink);
  font-family: var(--serif); font-size: 17px; font-weight: 700;
  margin-bottom: 1px;
}

/* ----------------------------------------------------------------- about */

.about-grid { display: grid; gap: 28px; }
.about-copy p { color: var(--soft); margin: 0 0 16px; max-width: 62ch; }

/* Capped on a phone — full width would make a portrait taller than the copy
   it belongs to and push the contact card off the screen. */
.about-photo { margin: 0; max-width: 260px; }
.about-photo img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.sig { font-family: var(--serif); font-style: italic; color: var(--ink) !important; font-size: 18px; }

.contact-card h3 { font-size: 18px; margin: 0 0 14px; }
.contact-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 13px; }
.contact-list li { display: grid; gap: 2px; font-size: 15.5px; }
.contact-list .lbl {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--soft);
}
.contact-list a { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.contact-list a:hover { text-decoration: underline; }

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

.faq { display: grid; gap: 10px; }

.faq details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq details[open] { border-color: var(--border-str); box-shadow: var(--shadow); }

.faq summary {
  list-style: none; cursor: pointer;
  padding: 16px 46px 16px 18px; position: relative;
  font-family: var(--serif); font-size: 17px; font-weight: 700; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 18px; top: 22px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--rust); border-bottom: 2px solid var(--rust);
  transform: rotate(45deg); transition: transform .18s;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 26px; }
/* [open] stays true while the panel animates shut, so the chevron needs this
   to start turning back at the same moment the panel does. */
.faq details.is-closing summary::after { transform: rotate(45deg); top: 22px; }
.faq summary:hover { color: var(--rust); }

/* site.js animates this element's height, which only works if it clips. */
.faq-body { padding: 0 18px 18px; overflow: hidden; }
.faq-body p { margin: 0; color: var(--soft); font-size: 15.5px; }

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

.cta-band { background: var(--ink); border-top: 1px solid var(--ink); }
.cta-inner { text-align: center; }
.cta-band .section-title { color: var(--cream); font-size: 28px; }
.cta-band .section-lede { color: #C9B8AC; margin-inline: auto; }
.cta-actions { justify-content: center; }
.cta-band .btn-ghost { color: #F1E4DA; border-color: #6A5346; }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.08); border-color: #C9B8AC; color: #fff; }
.cta-mail { margin: 22px 0 0; font-size: 15px; }
.cta-mail a { color: #E9B79F; }

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

.site-foot { background: var(--panel); border-top: 1px solid var(--border); padding: 34px 0 0; }
.foot-inner { display: grid; gap: 22px; }
.foot-brand { display: flex; align-items: center; gap: 16px; }
/* The logo is the one piece of her own branding on the page, so it gets room
   here. Source file is 200px, so 88 still has headroom on a 2x screen. */
.foot-brand img { width: 88px; height: 88px; flex: none; }
.foot-brand strong { display: block; font-size: 15px; line-height: 1.3; }
.foot-brand span { font-size: 13px; color: var(--soft); }

.foot-contact { display: grid; gap: 6px; font-size: 15px; }
.foot-contact a { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.foot-contact a:hover { text-decoration: underline; }
.foot-contact span { color: var(--soft); }

.foot-legal {
  margin-top: 26px; padding: 16px 20px 24px;
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--soft);
}

/* -------------------------------------------------------- mobile call bar */

.call-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--rust); color: #fff;
  font-size: 17px; font-weight: 700; text-decoration: none;
  box-shadow: 0 -2px 16px rgba(46, 31, 24, .18);
}
.call-bar svg { width: 19px; height: 19px; fill: currentColor; }
.call-bar:active { background: var(--rust-dark); }

/* ============================================================ ≥ 620px === */
@media (min-width: 620px) {
  .row { grid-template-columns: 1fr 1fr; }
  .hero-actions { grid-auto-flow: column; justify-content: start; }
  .cta-actions { justify-content: center; }
  .foot-inner { grid-template-columns: 1fr auto; align-items: center; }
  .foot-contact { justify-items: end; text-align: right; }
}

/* ============================================================ ≥ 760px === */
@media (min-width: 760px) {
  body { font-size: 17.5px; }
  .band { padding: 76px 0; }
  .hero { padding: 48px 0 66px; }
  .hero h1 { font-size: 64px; }
  .section-title { font-size: 36px; }
  .cta-band .section-title { font-size: 34px; }
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 20px; }
  /* Two columns of ticks. column-gap carries a rule between them so the two
     lists don't run together. */
  .checklist {
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
  }
  .card { padding: 26px; }
}

/* ============================================================ ≥ 1000px == */
@media (min-width: 1000px) {
  .head-nav { display: flex; }
  .head-call { display: inline-flex; padding: 10px 16px; font-size: 15px; }
  .head-inner { gap: 26px; }

  /* Bottom bar is a phone affordance — on desktop the header button covers it. */
  .call-bar { display: none; }
  body { padding-bottom: 0; }

  /* Put the reasons back under the copy and the form alongside both. The
     source order is phone order (copy → form → reasons); this restores the
     reading order a wide screen wants without touching the markup. */
  /* The form spans both rows and is much taller than the copy beside it. With
     default `auto auto` rows the browser splits that surplus height evenly
     between them, which opened a dead gap between the buttons and the reasons.
     `max-content 1fr` sizes row 1 to the copy and dumps all the slack into
     row 2, so the reasons sit straight under the buttons where they belong. */
  .hero-grid {
    grid-template-columns: 1.05fr .95fr;
    grid-template-rows: max-content 1fr;
    column-gap: 52px; row-gap: 28px;
    align-items: start;
  }
  .hero-copy    { grid-column: 1; grid-row: 1; }
  .hero-reasons { grid-column: 1; grid-row: 2; align-self: start; margin-bottom: 0; }
  .hero-form    { grid-column: 2; grid-row: 1 / span 2; align-self: start; }

  .hero h1 { font-size: 72px; }
  /* Copy runs down the left; photo and contact card stack in the right column. */
  .about-grid {
    grid-template-columns: 1.35fr .65fr;
    column-gap: 48px; row-gap: 24px;
    align-items: start;
  }
  .about-copy  { grid-column: 1; grid-row: 1 / span 2; }
  .about-photo { grid-column: 2; grid-row: 1; max-width: none; }
  .about-side  { grid-column: 2; grid-row: 2; }

  /* The form is the point of the page — keep it in view while the copy scrolls. */
  .hero-form { position: sticky; top: 82px; }
}

/* ============================================================ ≥ 1120px == */
@media (min-width: 1120px) {
  .hero h1 { font-size: 78px; }
}