/* Draft 3. Greg's truck in colour: logo teal and tape yellow, drywall and pine
   around them. Yellow is kept for the call action and the tape alone, so the
   one bright thing on the page is the thing to tap. Plan and reasons:
   clients/sanders-home-repairs/PLAN-revision.md, "Draft 3". */
@font-face { font-family: Barlow; src: url(/fonts/Barlow-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Barlow; src: url(/fonts/Barlow-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url(/fonts/BarlowSemiCondensed-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url(/fonts/BarlowSemiCondensed-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --teal: #003946; --teal-2: #0b4a58; --teal-ink: #cfe0e3;
  --yellow: #ffdd00; --yellow-hi: #ffe94a;
  --drywall: #f4f5f1; --pine: #e7cf9f; --pine-2: #d9bb80;
  --pencil: #23292b; --soft: #59605f; --line: #d9ddd5;
  --in: 34px; /* one inch on the tape */
  --out-expo: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--drywall); color: var(--pencil); font: 18px/1.6 Barlow, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 18px; }
.narrow { max-width: 740px; }
h1, h2, h3 { font-family: "Barlow Semi Condensed", Barlow, sans-serif; font-weight: 800; line-height: 1.02; margin: 0; letter-spacing: -.005em; }
h1 { font-size: clamp(42px, 9vw, 86px); }
h2 { font-size: clamp(30px, 5vw, 48px); }
h3 { font-size: 24px; font-weight: 700; }
p { margin: 0; }

.draft-bar { background: #00222b; color: var(--teal-ink); font-size: 13px; text-align: center; padding: 6px 12px; }

/* Header: the logo, big, as Greg asked. */
.top { background: var(--teal); }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 14px; padding-bottom: 14px; }
.logo img { width: min(76vw, 420px); height: auto; }
.menu { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-bottom: 14px; }
.menu a { color: #fff; text-decoration: none; font-weight: 600; font-size: 16px; padding: 4px 0; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { border-color: var(--yellow); }
.call.call-top { display: none; }

/* The call button. The only yellow control on the site. */
.call { display: inline-flex; align-items: center; gap: 14px; background: var(--yellow); color: var(--teal); text-decoration: none; border-radius: 6px; padding: 14px 24px 14px 18px; box-shadow: 0 4px 0 #c9ad00; transition: transform .15s var(--out-expo), box-shadow .15s; }
.call:hover { background: var(--yellow-hi); }
.call:active { transform: translateY(3px); box-shadow: 0 1px 0 #c9ad00; }
.call svg { width: 30px; height: 30px; fill: currentColor; flex: none; }
.call span { display: grid; line-height: 1.05; }
.call small { font-size: 15px; font-weight: 600; }
.call b { font-family: "Barlow Semi Condensed", sans-serif; font-size: clamp(30px, 7vw, 40px); font-weight: 800; white-space: nowrap; }
.call-sm b { font-size: 26px; }
.call-sm { padding: 10px 18px 10px 14px; }
.call-sm svg { width: 24px; height: 24px; }

/* Hero. */
.hero { background: var(--teal); color: #fff; padding: 10px 0 40px; overflow: hidden; }
.hero-grid { display: grid; gap: 22px; grid-template-areas: 'say' 'act' 'quote'; }
.hero-pic { display: none; }
.hero-say { grid-area: say; } .hero-act { grid-area: act; } .hero-quote { grid-area: quote; }
.hero h1 { max-width: 12ch; font-size: clamp(40px, 11vw, 86px); }
.hero .sub { font-size: clamp(19px, 2.4vw, 22px); color: var(--teal-ink); max-width: 36ch; margin-top: 16px; }
.hero-quote { margin: 0; align-self: end; border-left: 4px solid var(--pine); padding-left: 16px; }
.hero-quote p { font-size: 20px; line-height: 1.45; }
.hero-quote footer { margin-top: 8px; font-size: 15px; color: var(--teal-ink); }
.stars { color: var(--yellow); letter-spacing: 2px; font-size: 18px; display: block; margin-bottom: 6px; }
.hero-act { margin-top: 4px; }
.hero-act .after { margin-top: 14px; color: var(--teal-ink); font-size: 16px; }
.hero-act .after a { color: #fff; font-weight: 600; }

/* The tape measure: pulls out once on load and stops at the number. Its inch
   marks read 5 1 7 5 1 2 3 2 4 7. CSS only, so it shows without JS. */
.tape { position: relative; margin-bottom: 18px; overflow: hidden; max-width: 640px; }
.blade { animation: pull .8s var(--out-expo) .25s both; }
.blade-svg { display: block; width: 100%; height: auto; }
@keyframes pull { from { transform: translateX(-102%); } to { transform: none; } }

/* Proof: his own photos, straight after the promise. */
.proof { padding: 40px 0 10px; }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.photos figure { margin: 0; position: relative; }
.photos img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.photos figcaption { position: absolute; left: 0; bottom: 14px; background: var(--pine); color: var(--pencil); font-weight: 600; font-size: 15px; padding: 6px 12px 6px 10px; }

/* How it works: a real sequence, so it is numbered. */
.steps-band { background: var(--pine); margin-top: 40px; padding: 40px 0 44px; }
.steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 18px; }
.steps li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; }
.steps b { font-family: "Barlow Semi Condensed", sans-serif; font-size: 56px; line-height: .85; font-weight: 800; color: var(--teal); }
.steps h3 { margin-bottom: 4px; }
.steps p { color: #3d3a30; }

/* Jobs. */
.jobs-sec { padding: 46px 0 40px; }
.lede { color: var(--soft); font-size: 19px; margin-top: 8px; max-width: 52ch; }
.two { display: grid; gap: 10px 48px; margin-top: 18px; }
.two h3 { padding-bottom: 8px; border-bottom: 3px solid var(--teal); margin-top: 16px; }
.jobs { list-style: none; margin: 0; padding: 0; }
.jobs li { border-bottom: 1px solid var(--line); }
.jobs a { display: block; padding: 11px 0; text-decoration: none; }
.jobs a b { display: block; font-weight: 600; font-size: 20px; color: var(--teal); }
.jobs a span { color: var(--soft); font-size: 16px; }
.jobs a:hover b { text-decoration: underline; text-decoration-color: var(--pine-2); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.more-line { margin-top: 16px; font-size: 17px; }
.more-line a { font-weight: 600; color: var(--teal); }

/* Reviews. */
.reviews-band { background: var(--teal); color: #fff; padding: 46px 0; }
.revs { display: grid; gap: 26px; margin-top: 22px; }
.rev { margin: 0; }
.rev p { font-size: 19px; line-height: 1.5; }
.rev footer { margin-top: 10px; color: var(--teal-ink); font-size: 15px; }
.reviews-band .more-line a { color: #fff; }

/* Greg. */
.me { padding: 46px 0; }
.me-grid { display: grid; gap: 24px; align-items: center; }
.me p + p { margin-top: 12px; }
.me .lede { color: var(--pencil); }
.slot { aspect-ratio: 4 / 5; width: 100%; max-width: 360px; background: repeating-linear-gradient(135deg, #e9eae4 0 14px, #e1e3dc 14px 28px); border: 2px dashed #b9bdb4; display: grid; place-items: center; text-align: center; color: var(--soft); font-weight: 600; }

/* The last ask. */
.last { background: var(--teal); color: #fff; padding: 46px 0 52px; }
.last-grid { display: grid; gap: 28px; }
.last p { color: var(--teal-ink); margin-top: 10px; font-size: 19px; }
.last .call { margin-top: 20px; }
.form { display: grid; gap: 12px; background: #fff; color: var(--pencil); padding: 20px; border-radius: 6px; }
.form label { display: grid; gap: 4px; font-weight: 600; font-size: 15px; }
.form input, .form textarea { font: inherit; padding: 11px 12px; border: 2px solid var(--line); border-radius: 4px; background: var(--drywall); }
.form input:focus, .form textarea:focus { border-color: var(--teal); outline: none; }
.form button { font: inherit; font-weight: 600; font-size: 18px; padding: 14px; border: 0; border-radius: 4px; background: var(--teal); color: #fff; cursor: pointer; }
.form-msg { margin: 0; font-weight: 600; color: var(--teal); }

/* Inner pages. */
.page-top { background: var(--teal); color: #fff; padding: 26px 0 34px; }
.page-top h1 { font-size: clamp(38px, 7vw, 64px); max-width: 16ch; }
.page-top .sub { color: var(--teal-ink); font-size: 20px; margin-top: 12px; max-width: 46ch; }
.page-top .call { margin-top: 22px; }
.page-body { padding: 34px 0 46px; }
.page-body .lede { color: var(--pencil); font-size: 20px; }
.page-body h2 { font-size: clamp(28px, 4vw, 38px); margin: 34px 0 10px; }
.pic { position: relative; margin: 26px 0 0; }
.pic img { width: 100%; height: auto; max-height: 480px; object-fit: cover; }
.ex-tag { position: absolute; top: 10px; left: 10px; background: rgba(0, 34, 43, .78); color: #fff; font-size: 13px; font-weight: 600; padding: 3px 8px; border-radius: 3px; }
.ticks { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
.ticks li { break-inside: avoid; padding: 5px 0 5px 22px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 13px; width: 12px; height: 3px; background: var(--teal); }
.quote { margin: 30px 0 0; border-left: 4px solid var(--pine-2); padding-left: 16px; }
.quote p { font-size: 20px; line-height: 1.5; }
.quote footer { margin-top: 8px; color: var(--soft); font-size: 15px; }
.mini-steps { background: var(--pine); padding: 20px 20px 22px; margin-top: 30px; }
.mini-steps h2 { margin-top: 0 !important; }
.mini-steps .steps { margin-top: 12px; }
.faq h2 { font-size: 26px !important; margin-top: 26px !important; }
.faq p { font-size: 19px; }

.foot { background: #00222b; color: var(--teal-ink); padding: 34px 0 110px; font-size: 16px; }
.foot .call { margin-bottom: 18px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px; }
.foot-links a { color: #fff; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }

.sticky-call { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 30; background: var(--yellow); color: var(--teal); text-align: center; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 800; font-size: 22px; padding: 14px; border-radius: 6px; text-decoration: none; box-shadow: 0 4px 0 #c9ad00, 0 10px 30px rgba(0,0,0,.3); transform: translateY(160%); transition: transform .35s var(--out-expo); }
.sticky-call.show { transform: none; }

/* Wording sheet. */
.w-item { border: 1px solid var(--line); border-left: 6px solid var(--line); background: #fff; padding: 16px; margin: 16px 0 0; }
.w-item.done { border-left-color: var(--teal); }
.w-item legend { float: left; width: 100%; font-weight: 600; font-size: 19px; line-height: 1.35; margin-bottom: 10px; }
.w-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 14px; margin-right: 10px; vertical-align: 2px; }
.w-text { clear: both; margin: 0 0 10px; padding: 10px 14px; background: var(--drywall); border-left: 3px solid var(--pine-2); font-size: 17px; }
.w-where { clear: both; margin: 0 0 10px; font-size: 14px; color: var(--soft); }
.w-opts { clear: both; display: grid; gap: 8px; }
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 2px solid var(--line); border-radius: 4px; cursor: pointer; font-size: 17px; }
.opt input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--teal); flex: none; }
.opt:has(input:checked) { border-color: var(--teal); background: #e6eff0; }
.w-note { display: grid; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--soft); }
.w-note textarea, .w-note input { font: inherit; font-weight: 400; color: var(--pencil); padding: 10px 12px; border: 2px solid var(--line); border-radius: 4px; background: #fff; }
.w-final { margin-top: 26px; font-size: 17px; color: var(--pencil); }
.w-send { margin-top: 20px; width: 100%; font: inherit; font-weight: 600; font-size: 20px; padding: 16px; border: 0; border-radius: 4px; background: var(--teal); color: #fff; cursor: pointer; }
.w-status { font-weight: 600; min-height: 1.6em; }

@media (min-width: 760px) {
  .hero { padding: 28px 0 64px; }
  .hero-grid { grid-template-columns: 1.3fr 1fr; gap: 26px 56px; grid-template-areas: 'say pic' 'act pic'; }
  .hero-pic { display: block; grid-area: pic; margin: 0; position: relative; }
  .hero-pic img { width: 100%; height: 100%; max-height: 640px; object-fit: cover; }
  .hero-quote { grid-area: pic; align-self: end; margin: 0 -18px 28px 28px; background: var(--pine); color: var(--pencil); border: 0; padding: 18px 20px; position: relative; z-index: 1; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
  .hero-quote p { font-size: 22px; }
  .hero-quote footer { color: #5c5236; }
  .hero-quote .stars { color: var(--teal); }
  .hero-act { margin-top: 10px; }
  .call-top { display: inline-flex; }
  .logo img { width: 340px; }
  .photos { grid-template-columns: 1.15fr 1fr; gap: 16px; }
  .photos img { aspect-ratio: 4 / 5; max-height: 640px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .two { grid-template-columns: 1fr 1fr; }
  .revs { grid-template-columns: repeat(3, 1fr); gap: 34px; }
  .me-grid { grid-template-columns: 1fr 1.3fr; }
  .last-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .foot { padding-bottom: 40px; }
  .sticky-call { display: none; }
}
@media (max-width: 420px) { .ticks { columns: 1; } }
@media (prefers-reduced-motion: reduce) {
  .blade { animation: none; }
  .sticky-call, .call { transition: none; }
}

@media (max-width: 759px) { .me .slot { max-width: 220px; } .hero .sub { font-size: 18px; margin-top: 12px; } }