/* ==========================================================================
   rewrite.css   2026-10-24 review build. Loaded AFTER style.css.
   Everything the brief asked for that style.css does not already do:
   ivory sections, 44px tap targets, lighter mobile hero, comparison table,
   numbered inspection steps, photo and CONFIRM placeholders, CTA review,
   plain town list, map, native contact form, footer credentials.
   NOT DEPLOYED. Nothing here is live until Travis says so.
   ========================================================================== */

:root {
  --ivory:      #fdfcf8;   /* TRC house-style paper */
  --ivory-2:    #f5f1e8;
  --ivory-line: #e6dfd0;
}

body { background: var(--ivory); }
.masthead { background: #fff; }
.section--paper2, .section--ivory2 { background: var(--ivory-2); }
.four-up { background: var(--ivory-line); border-color: var(--ivory-line); }
.four-up > div { background: #fff; }
.options, .options > div, .steps, .steps > div { border-color: var(--ivory-line); }
.aside, .card { background: #fff; }

/* ---------------------------------------------------- tap targets, 44px */
.tel-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (max-width: 1240px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 64px;
  }
}
@media (max-width: 560px) {
  .nav-toggle { padding: 9px 12px; }
  .tel-btn { padding: 10px 12px; }
}
.masthead__logo { display: inline-flex; align-items: center; min-height: 44px; }
.gcard__toggle { min-height: 44px; margin-top: 0; }
.calllink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
}
.calllink:hover { color: var(--gold-deep); }
.morelink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  line-height: 1.2;
}
.morelink::after { content: "\2192"; margin-left: 8px; }
.morelink:hover { color: var(--gold-deep); }

/* ------------------------------------------------------------- hero */
.hero .eyebrow { color: var(--gold); margin-bottom: 18px; }
.hero__note {
  margin-top: 14px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: #fff !important;
}
.trustline { max-width: 52rem; margin-top: 26px; }
/* The new hero carries more (eyebrow, note, trust strip). At the old 9.6em
   measure the H1 broke into six lines, the band grew to 957px at 1280 wide and
   the cover crop cut his head off. Wider H1, tighter padding, crop higher. */
.hero h1 { max-width: 11em; font-size: clamp(31px, 4.2vw, 50px); }
.hero__inner { padding-block: clamp(44px, 5vw, 72px); min-height: 0; }
@media (min-width: 701px) {
  /* Photo sits in the right 72% so his face lands beside the headline, not under it. */
  .hero__img { left: auto; right: 0; width: 72%; object-position: 18% 22%; }
  /* 2026-10-25 review: the photo's left edge met the navy in a hard vertical
     line. Feather it so the photo fades into the navy instead. */
  .hero__img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%);
            mask-image: linear-gradient(90deg, transparent 0, #000 24%);
  }
}
/* the review count inside the trust strip must not pick up the bullet dot */
.trustline b { font-weight: inherit; }
.trustline i { font-style: normal; }   /* one flex item, so the count sits in the sentence */
@media (max-width: 700px) {
  /* Brief 7: tint was 72 to 95% navy and the crop cut his face off at 390px.
     Face sits about 45% across and 25% down the narrow frame. The text
     starts lower so the face shows above it. */
  /* Photo pinned to the top 440px so his face sits above the eyebrow at any
     text length; it fades into the navy the text sits on. */
  .hero__img { height: 440px; bottom: auto; object-position: 42% 22%; }
  .hero__tint {
    background: linear-gradient(180deg,
      rgba(0, 27, 62, 0.45) 0px,
      rgba(0, 27, 62, 0.50) 190px,
      rgba(0, 27, 62, 0.75) 330px,
      #001b3e 440px);
  }
  .hero__inner { padding-top: 220px; padding-bottom: 44px; }
  .hero h1 { text-shadow: 0 2px 16px rgba(0, 20, 45, 0.7); }
  .hero p { text-shadow: 0 1px 10px rgba(0, 20, 45, 0.75); }
}

/* --------------------------------------------- the difference table */
.vs {
  width: 100%;
  border-collapse: collapse;
  margin-top: 34px;
  background: #fff;
  border: 1px solid var(--ivory-line);
  font-size: 17px;
  line-height: 1.5;
}
.vs th {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: left;
  padding: 16px 22px;
  background: var(--navy);
  color: #fff;
}
.vs th:first-child { background: #e9e3d6; color: var(--muted); }
.vs td {
  padding: 18px 22px;
  vertical-align: top;
  border-top: 1px solid var(--ivory-line);
}
.vs td:first-child { color: var(--muted); width: 40%; background: #faf8f3; }
@media (max-width: 720px) {
  .vs thead { display: none; }
  .vs, .vs tbody, .vs tr, .vs td { display: block; width: auto; }
  .vs tr { border-top: 1px solid var(--ivory-line); padding: 18px; }
  .vs tr:first-child { border-top: 0; }
  .vs td { border: 0; padding: 0; background: none !important; width: auto !important; }
  .vs td + td { margin-top: 12px; }
  .vs td::before {
    content: attr(data-h);
    display: block;
    font-family: var(--display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 4px;
  }
}

/* ------------------------------------------- photo and confirm marks */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 220px;
  padding: 26px;
  background: repeating-linear-gradient(135deg, #f3efe6 0 14px, #ece5d6 14px 28px);
  border: 2px solid #e0d3b0;
  border-radius: 3px;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.ph--tall { min-height: 340px; }
.ph--short { min-height: 150px; }
.ph--wide { aspect-ratio: 16 / 9; min-height: 0; }
.ph--portrait { aspect-ratio: 4 / 5; min-height: 0; }
.confirm {
  background: #fff3cd;
  border: 1px dashed var(--gold-deep);
  color: #5c3f00;
  padding: 1px 7px;
  border-radius: 3px;
  font-family: var(--display);
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: none;
}
.confirm--block { display: block; padding: 12px 14px; margin: 16px 0; font-size: 14px; line-height: 1.5; max-width: 34rem; }

/* --------------------------------------------- page head with aside */
.headsplit {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .headsplit { grid-template-columns: 1fr; } }
.getbox {
  background: #fff;
  border: 1px solid var(--ivory-line);
  border-top: 4px solid var(--gold);
  border-radius: 3px;
  padding: clamp(22px, 3vw, 30px);
}
.getbox h2, .getbox h3 { font-size: 19px; margin-bottom: 14px; }
.getbox ul { list-style: none; padding: 0; margin: 0; }
.getbox li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 16.5px;
  line-height: 1.45;
}
.getbox li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 11px;
  height: 6px;
  border-left: 3px solid var(--gold-deep);
  border-bottom: 3px solid var(--gold-deep);
  transform: rotate(-45deg);
}
.getbox .fineprint { margin-top: 14px; }

/* ----------------------------------------- numbered inspection steps */
.isteps { margin-top: 40px; border-top: 1px solid var(--ivory-line); }
.istep {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 4vw, 52px);
  padding: clamp(28px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--ivory-line);
  align-items: start;
}
@media (max-width: 820px) { .istep { grid-template-columns: 1fr; } }
.istep__n {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 10px;
}
.istep h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 900; margin-bottom: 12px; }

/* --------------------------------------------------- split bands */
.band2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 860px) { .band2 { grid-template-columns: 1fr; } }
.teasers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--ivory-line);
  border: 1px solid var(--ivory-line);
}
@media (max-width: 820px) { .teasers { grid-template-columns: 1fr; } }
.teasers > div { background: #fff; padding: clamp(26px, 4vw, 44px); }
.teasers h2 { font-size: clamp(23px, 2.8vw, 30px); }

/* --------------------------------------------- CTA block, every page */
.cta2 {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 880px) { .cta2 { grid-template-columns: 1fr; } }
.contact-strip .positioning {
  margin-top: 16px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
  max-width: 26rem;
}
.contact-strip .btn--ghost { color: #fff; border: 2px solid rgba(237, 242, 249, 0.45); }
.contact-strip .btn--ghost:hover { color: var(--ink); background: #fff; border-color: #fff; }
.contact-strip a.big { min-height: 44px; }
.cta2__review .gcard { max-width: 32rem; }
/* .contact-strip p is dimmed for navy; the white review card must not inherit it */
.contact-strip .gcard p { color: var(--ink); }
.contact-strip .gcard .gcard__meta,
.contact-strip .gcard .gcard__src { color: var(--muted); }
.cta2__label {
  display: block;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

/* --------------------------------------------- static review grids */
.gstatic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 34px;
  align-items: start;
}
@media (max-width: 960px) { .gstatic { grid-template-columns: 1fr; max-width: 36rem; } }
.gstatic .gcard, .reviews-plain .gcard { border: 1px solid var(--ivory-line); }
.reviews-count {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 6px;
}
.reviews-count .stars { color: var(--gold); letter-spacing: 3px; margin-right: 6px; }

/* ------------------------------------------------- credentials card */
.creds {
  background: #fff;
  border: 1px solid var(--ivory-line);
  border-left: 4px solid var(--navy);
  border-radius: 0 3px 3px 0;
  padding: clamp(22px, 3vw, 30px) clamp(24px, 3vw, 34px);
  max-width: 46rem;
}
.creds p { max-width: none; }

/* --------------------------------------------- service area: towns + map */
.townplain {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.7;
  color: var(--ink);
  max-width: 44rem;
  margin-top: 22px;
}
.townplain span { white-space: nowrap; display: inline-block; }
.townplain span + span::before { content: "\00B7"; color: var(--gold-deep); margin: 0 10px; }
@media (max-width: 600px) {
  .townplain { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
  .townplain span + span::before { content: none; }
}
.map {
  background: #fff;
  border: 1px solid var(--ivory-line);
  border-radius: 3px;
  padding: 10px;
}
.map svg { display: block; width: 100%; height: auto; }
.map figcaption { font-size: 13.5px; color: var(--muted); margin: 8px 6px 2px; }

/* --------------------------------------------------- contact page */
.callcard {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 520px) {
  .callcard { grid-template-columns: 92px minmax(0, 1fr); gap: 16px; }
  .callcard .ph.ph--portrait { font-size: 8.5px; padding: 6px; letter-spacing: 0.04em; }
}
.callcard .ph { min-height: 0; aspect-ratio: 4 / 5; font-size: 11px; padding: 14px; }
.callnum {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: -0.02em;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.callcard .punch { font-size: 19px; margin-top: 14px; }
.callcard h2 { margin-bottom: 4px; }
.callnum:hover { color: var(--gold-deep); }
.rform .field input,
.rform .field textarea { border-radius: 3px; background: #fff; }
.rform .btn { width: 100%; margin-top: 4px; }
.rform__done {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--ivory-2);
  border-left: 4px solid var(--gold);
  font-weight: 600;
}
.rform__done[hidden] { display: none; }
.agents {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--ivory-line);
}

/* ------------------------------------------------------------ footer */
.sitefoot__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.sitefoot__contact li { margin: 0; display: flex; align-items: center; min-height: 44px; }
.sitefoot__contact a { display: inline-flex; align-items: center; min-height: 44px; }
.sitefoot__links a { display: inline-flex; align-items: center; min-height: 44px; }
.sitefoot__links { gap: 0 28px; padding-bottom: 18px; }
.sitefoot__creds {
  flex-basis: 100%;
  font-family: var(--body);
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.6;
  color: var(--on-navy-dim);
  max-width: 52rem;
}
.sitefoot__base { gap: 14px 26px; }

/* ------------------------------------------------- privacy & terms */
.legal h2 { font-size: clamp(21px, 2.4vw, 26px); margin: 1.7em 0 0.5em; }
.legal h2:first-child { margin-top: 0; }
.legal ul { margin-bottom: 1.15em; }
.sitefoot__legal a { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------ picked job photos */
.jobphoto { margin: 0; }
.jobphoto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  background: var(--ivory-2);
}
.jobphoto figcaption, .ba > figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 34rem;
}
.istep .jobphoto img { max-height: 460px; object-fit: cover; }
.ba { margin: 0; }
.ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ba__pair > div { position: relative; }
.ba__pair .jobphoto img { aspect-ratio: 1 / 1; object-fit: cover; }
.ba__tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  background: var(--navy);
  color: #fff;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 3px;
}
.ba__pair > div + div .ba__tag { background: var(--gold); color: var(--ink); }
.callcard .callcard__img img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 30%; }

/* two photos side by side in one inspection step */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.istep .duo .jobphoto img { aspect-ratio: 3 / 4; max-height: none; object-fit: cover; }
.duo figcaption { font-size: 13px; }

/* roof before/after: keep the drone frame whole instead of squaring it */
.ba--wide .ba__pair .jobphoto img { aspect-ratio: 4 / 3; }

/* home: "Why the name" story block between the roof photo and the four cards */
.story { max-width: 46rem; margin: 34px 0 6px; padding-left: 18px; border-left: 3px solid var(--gold); }
.story h3 { margin: 0 0 8px; }
.story p { margin: 0 0 12px; }


/* ------------------------------------------------ 2026-10-26: hero, company then area */
.hero__brand { margin-bottom: 4px; }
.hero__area {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(16px, 1.7vw, 20px);
  color: rgba(255, 255, 255, .9);
  margin: 0 0 18px;
}
/* the area lands a beat after the company name; static when motion is reduced */
.fx .hero__area { opacity: 0; animation: heroBeat .55s ease-out .65s forwards; }
@keyframes heroBeat { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------ 2026-10-26: the checklist */
.promise { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; max-width: 52rem; }
.promise li {
  position: relative;
  background: #fff;
  border: 1px solid var(--ivory-line);
  border-left: 4px solid var(--gold);
  border-radius: 3px;
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 30px) clamp(20px, 3vw, 28px) clamp(56px, 7vw, 70px);
}
.promise li::before,
.promise-mini li::before {
  content: "";
  position: absolute;
  border-left: 4px solid var(--gold-deep);
  border-bottom: 4px solid var(--gold-deep);
  transform: rotate(-45deg);
}
.promise li::before { left: clamp(20px, 2.6vw, 26px); top: clamp(28px, 3.6vw, 37px); width: 16px; height: 9px; }
.promise h2 { font-size: clamp(21px, 2.4vw, 26px); margin: 0 0 8px; }
.promise p { margin: 0; max-width: 44rem; }
.promise-mini {
  list-style: none;
  padding: 0;
  margin: 22px 0 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 32px;
  max-width: 46rem;
}
.promise-mini li {
  position: relative;
  padding-left: 32px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  color: var(--navy);
}
.promise-mini li::before { left: 3px; top: 5px; width: 13px; height: 7px; border-width: 3px; }
@media (max-width: 640px) { .promise-mini { grid-template-columns: 1fr; } }


/* ------------------------------------------------ 2026-10-26f: texting, phones only */
.sms-only { display: none; }
.cta2__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__sms { margin: 10px 0 0; }
.hero__sms a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mbar { display: none; }
@media (max-width: 700px) {
  a.sms-only { display: inline-flex; }
  p.sms-only { display: block; }
  /* calm navy call/text bar: fixed, no animation, never covers content */
  .mbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--navy);
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  .mbar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .02em;
    text-decoration: none;
    color: #fff;
  }
  .mbar__call { color: var(--gold) !important; border-right: 1px solid rgba(255, 255, 255, .14); }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}


/* ------------------------------------------------ 2026-10-26g: reviews, one calm style everywhere */
.rv-js .gcard__text.is-clamped { -webkit-line-clamp: 8; line-clamp: 8; }
.gcard__src { letter-spacing: .02em; }
@media (max-width: 640px) {
  /* one card at a time with a peek of the next; snap stops on each card */
  .gcards > .gcard { flex-basis: 88%; scroll-snap-stop: always; }
}