/* Herriman Handyman Co. brand + layout
   Palette: navy #14264B, gold #F4B41A, bone #FBFAF7. Client brand (not WebDevAuto). */

:root {
  --navy: #14264B;
  --navy-700: #1E3A66;
  --navy-500: #2C4E85;
  --gold: #F4B41A;
  --gold-600: #D89B08;
  --bone: #FBFAF7;
  --white: #FFFFFF;
  --ink: #14264B;
  --body: #3B4759;
  --muted: #6B7688;
  --line: #E7E3DA;
  --ok: #187A3C;
  --ok-bg: #E9F6EE;
  --err: #B42318;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(20,38,75,.06), 0 2px 8px rgba(20,38,75,.05);
  --shadow-md: 0 8px 30px rgba(20,38,75,.12);
  --wrap: 1180px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--body);
  background: var(--bone);
  line-height: 1.6;
  font-size: 17px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

h1, h2, h3 { color: var(--ink); line-height: 1.12; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.18rem; }
p { margin: 0 0 1rem; }
a { color: var(--navy-700); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.section { padding: 72px 0; }
.section--navy { background: var(--navy); color: #DCE4F2; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--bone { background: var(--bone); }
.section--white { background: var(--white); }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .8rem; color: var(--gold-600); margin: 0 0 .6rem; }
.section--navy .eyebrow { color: var(--gold); }
.lead { font-size: 1.14rem; color: var(--body); max-width: 60ch; }
.section--navy .lead { color: #C6D2E8; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* Skip link */
.skip { position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff; padding: 10px 16px; z-index: 200; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 800; font-size: 1rem; padding: 14px 24px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; }
.btn:active { transform: translateY(1px); }
.btn--gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-600); border-color: var(--gold-600); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--ghost-light:hover { background: #fff; color: var(--navy); }
.btn--block { width: 100%; }
.btn--lg { padding: 16px 30px; font-size: 1.05rem; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(251,250,247,.92); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); font-weight: 900; letter-spacing: -.02em; font-size: 1.12rem; }
.brand svg { flex: 0 0 auto; }
.brand b { color: var(--navy); }
.brand span { color: var(--gold-600); }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { color: var(--navy); text-decoration: none; font-weight: 600; font-size: .96rem; }
.nav a:hover { color: var(--gold-600); }
.header-cta { display: flex; align-items: center; gap: 14px; }
.header-phone { font-weight: 800; color: var(--navy); text-decoration: none; white-space: nowrap; }
.header-phone:hover { color: var(--gold-600); }
@media (max-width: 860px) {
  .nav { display: none; }
  .header-phone { display: none; }
}
.btn { white-space: nowrap; }
@media (max-width: 560px) {
  .brand > span { display: none; }   /* logo icon only on small phones */
  .header-cta { gap: 10px; }
  .site-header .wrap { gap: 10px; }
}

/* Hero */
.hero { background: linear-gradient(180deg, #fff 0%, var(--bone) 100%); border-bottom: 1px solid var(--line); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start; padding-top: 44px; padding-bottom: 44px; }
.hero__copy h1 span.geo { color: var(--navy-700); }
.hero__sub { font-size: 1.2rem; color: var(--body); max-width: 46ch; margin-bottom: 1.4rem; }
.trust-list { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: 10px; }
.trust-list li { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; color: var(--navy); }
.trust-list svg { flex: 0 0 auto; margin-top: 3px; }
.hero__note { color: var(--muted); font-size: .95rem; }

/* Photo hero (homepage) */
.hero--photo { background: linear-gradient(100deg, rgba(15,23,42,.86) 0%, rgba(17,30,60,.64) 38%, rgba(20,38,75,.28) 64%, rgba(20,38,75,.16) 100%), url('/assets/hero/hero.jpg') center/cover no-repeat; border-bottom: 3px solid var(--gold); }
.hero--photo .wrap { padding-top: 44px; padding-bottom: 44px; }
.hero--photo .hero__copy { text-shadow: 0 2px 14px rgba(8,15,30,.5); }
.hero--photo .hero__copy h1 { color: #fff; }
.hero--photo .hero__copy h1 .geo { color: var(--gold); }
.hero--photo .hero__sub { color: #EAF0FA; }
.hero--photo .trust-list li { color: #fff; }
.hero--photo .eyebrow { color: var(--gold); }
@media (max-width: 900px) {
  .hero--photo { background: linear-gradient(180deg, rgba(15,23,42,.88), rgba(20,38,75,.9)), url('/assets/hero/hero.jpg') center/cover no-repeat; }
  .hero--photo .hero__copy { text-shadow: 0 2px 14px rgba(8,15,30,.6); }
}

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 32px; }
  .section { padding: 56px 0; }
}

/* Form card */
.bid-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 26px; }
.bid-card h2 { font-size: 1.5rem; margin-bottom: .25rem; }
.bid-card .sub { color: var(--muted); margin-bottom: 1.1rem; font-size: .98rem; }
.field { margin-bottom: 12px; }
/* Paired fields. Six full-width rows made the card 1073px, which drove the whole hero to
   1.34x the viewport at 1440x900 and left the H1 sitting 461px down the page. Name+Phone
   and City+Job type are short inputs that read fine side by side. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.field label { display: block; font-weight: 700; color: var(--navy); font-size: .9rem; margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 13px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: 1rem; color: var(--ink); background: #fff; transition: border-color .12s ease;
}
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy-500); outline: none; box-shadow: 0 0 0 3px rgba(44,78,133,.14); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--err); }
.field .err { color: var(--err); font-size: .82rem; margin-top: 4px; display: none; }
.field.invalid .err { display: block; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 14px; }
.consent-note{font-size:.78rem;line-height:1.5;color:var(--muted,#5b6672);margin:10px 0 0}

.consent input { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; }
.consent label { font-size: .82rem; color: var(--muted); font-weight: 500; line-height: 1.45; }
.form-note{margin:.4rem 0 .85rem;font-size:.86rem;line-height:1.45;color:#4a5158;background:#f4f6f8;border-left:3px solid #187A3C;padding:.55rem .7rem;border-radius:.25rem}
.form-foot { color: var(--muted); font-size: .86rem; margin-top: 10px; text-align: center; }
.form-foot a { color: var(--navy-700); font-weight: 700; }
.form-success { display: none; background: var(--ok-bg); border: 1px solid #B7E3C6; color: #14532d; padding: 18px; border-radius: var(--radius-sm); font-weight: 600; }
.form-success.error { background: #FDECEA; border-color: #F5C2BD; color: #7A271A; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.step .num { width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: var(--gold); display: grid; place-items: center; font-weight: 900; margin-bottom: 12px; }
.step h3 { margin-bottom: .35rem; }
.step p { margin: 0; color: var(--body); font-size: .98rem; }

/* Services */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.svc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.svc .ico { width: 44px; height: 44px; border-radius: 10px; background: rgba(244,180,26,.16); display: grid; place-items: center; margin-bottom: 12px; }
.svc h3 { font-size: 1.06rem; margin-bottom: .3rem; }
.svc p { margin: 0; font-size: .93rem; color: var(--muted); }
.svc-note { margin-top: 22px; color: var(--muted); font-size: .96rem; text-align: center; }

@media (max-width: 900px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .svc-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* Services photo backdrop
   Hovering (or keyboard-focusing) a service tile fades that job's photo in behind
   the whole section; the other tiles go translucent so the photo reads through.
   Opt-in per section via .has-photo-backdrop + a .svc-bg layer. Enabled by
   js/services-backdrop.js, and only on real hover pointers with motion allowed,
   so touch and reduced-motion visitors keep the plain bone section. */
.has-photo-backdrop { position: relative; overflow: hidden; isolation: isolate; }
.has-photo-backdrop > .wrap { position: relative; z-index: 1; }
.svc-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 1; transition: opacity .22s ease; }
.svc-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .28s ease;
}
.svc-bg img.is-shown { opacity: 1; }
/* Bone scrim. Weighted, not flat: heaviest across the top band where the heading sits
   directly on the photo, then it opens up over the grid, where the tiles supply their
   own contrast. Tuned so navy copy clears WCAG AA even over a fully black photo, while
   a bright photo still reads clearly between and around the tiles. */
.svc-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(251,250,247,.93) 0%,
    rgba(251,250,247,.86) 14%,
    rgba(251,250,247,.72) 24%,
    rgba(251,250,247,.30) 38%,
    rgba(251,250,247,.26) 78%,
    rgba(251,250,247,.46) 100%);
}
.has-photo-backdrop.is-showing .svc-bg { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .svc-grid.backdrop-ready .svc { transition: background-color .3s ease, border-color .2s ease, transform .12s ease, box-shadow .2s ease; }
  /* While a photo is up, unhovered tiles thin out and let it show through. */
  .has-photo-backdrop.is-showing .svc-grid .svc { background: rgba(255,255,255,.72); border-color: rgba(255,255,255,.8); box-shadow: none; }
  .has-photo-backdrop.is-showing .svc-grid .svc p { color: var(--body); }
  .has-photo-backdrop.is-showing .svc-grid .svc.is-active {
    background: #fff; border-color: var(--gold); box-shadow: var(--shadow-md); transform: translateY(-3px);
  }
  .has-photo-backdrop.is-showing .svc-grid .svc.is-active p { color: var(--muted); }
}
@media (prefers-reduced-motion: reduce) {
  /* Keep the always-on background image, just drop the fade/swap motion. */
  .svc-bg, .svc-bg img { transition: none; }
}

/* Why / feature list */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 40px; margin-top: 10px; }
.why-item { display: flex; gap: 14px; align-items: flex-start; }
.why-item svg { flex: 0 0 auto; margin-top: 2px; }
.why-item h3 { color: #fff; font-size: 1.05rem; margin-bottom: .2rem; }
.why-item p { margin: 0; color: #C6D2E8; font-size: .96rem; }
@media (max-width: 720px) { .why-grid { grid-template-columns: 1fr; } }

/* Area */
.area-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.area-chips span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-weight: 700; color: var(--navy); font-size: .95rem; }

/* FAQ */
.faq { max-width: 780px; margin: 0 auto; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 20px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; font-weight: 700; color: var(--navy); padding: 14px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--gold-600); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { color: var(--navy); }
.faq .ans { padding: 0 0 16px; color: var(--body); }
.faq .ans p { margin: 0; }

/* CTA band */
.cta-band { background: var(--navy); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: #C6D2E8; margin: 0 auto 1.6rem; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Footer */
.site-footer { background: #0F1D3A; color: #A9B6D0; padding: 54px 0 28px; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; margin-bottom: 34px; }
.site-footer h4,
.site-footer .foot-h { color: #fff; font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 14px; }
.site-footer a { color: #A9B6D0; text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.foot-brand b { color: #fff; }
.foot-brand span { color: var(--gold); }
.foot-nap { margin-top: 12px; line-height: 1.7; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .86rem; }
.foot-bottom a { font-weight: 700; color: #C6D2E8; }
.disclaimer { color: #6E7EA0; font-size: .82rem; margin-top: 14px; max-width: 70ch; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } }

/* ---- Sub-page components (service + location pages) ---- */
.two-col { display: grid; grid-template-columns: 1.15fr .85fr; gap: 46px; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: 30px; } }
.prose-narrow { max-width: 66ch; }
.job-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.job-list li { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.job-list .job { font-weight: 600; color: var(--navy); }
.job-list .price { color: var(--gold-600); font-weight: 800; white-space: nowrap; font-size: .95rem; }
.callout { background: #FFF7E6; border: 1px solid #F3DFA6; border-left: 4px solid var(--gold); border-radius: var(--radius-sm); padding: 14px 18px; margin-top: 22px; color: #6B5A1E; font-size: .96rem; }
.callout strong { color: #5A4A16; }
.rel-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.rel-links a { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-weight: 700; color: var(--navy); text-decoration: none; font-size: .95rem; }
.rel-links a:hover { border-color: var(--gold); color: var(--gold-600); }
.breadcrumb { font-size: .86rem; color: var(--muted); margin: 0 0 14px; }
.breadcrumb a { color: var(--navy-700); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-600); }
.section h2.tight { margin-top: 0; }
.svc-grid a.svc { text-decoration: none; color: inherit; display: block; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.svc-grid a.svc:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.area-chips a { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-weight: 700; color: var(--navy); font-size: .95rem; text-decoration: none; }
.area-chips a:hover { border-color: var(--gold); color: var(--gold-600); }
.lang-switch { font-weight: 700; color: var(--navy); text-decoration: none; font-size: .85rem; border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 11px; white-space: nowrap; }
.lang-switch:hover { border-color: var(--gold); color: var(--gold-600); }
.brand-logo { display: block; border-radius: 22%; flex: 0 0 auto; }

/* About / meet the owner */
.about-grid { display: grid; grid-template-columns: 360px 1fr; gap: 46px; align-items: center; }
.about-photo { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow-md); aspect-ratio: 665 / 1000; object-fit: cover; }
.about-copy .btn { margin-top: 6px; }

/* Contractor / pro band + navy button */
.btn--navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--navy:hover { background: var(--navy-700); border-color: var(--navy-700); }
.pro-band { background: var(--gold); }
.pro-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 24px; padding-bottom: 24px; flex-wrap: wrap; }
.pro-band p { margin: 0; font-weight: 800; color: var(--navy); font-size: 1.12rem; }
@media (max-width: 620px) { .pro-band .wrap { flex-direction: column; align-items: flex-start; } }

/* Contractor application funnel (multi-step) */
.funnel-req { background: #FFF7E6; border: 1px solid #F3DFA6; border-left: 4px solid var(--gold); border-radius: var(--radius-sm); padding: 12px 14px; font-size: .9rem; color: #6B5A1E; margin-bottom: 16px; }
.funnel-progress { margin-bottom: 16px; }
.funnel-progress .lbl { display: block; font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.funnel-progress .bar { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.funnel-progress .bar i { display: block; height: 100%; background: var(--gold); border-radius: 999px; transition: width .25s ease; }
.funnel-step { display: none; }
.funnel-step.active { display: block; }
.funnel-nav { display: flex; gap: 10px; margin-top: 4px; }
.funnel-nav .btn { flex: 1; }
.consent.invalid label { color: var(--err); font-weight: 600; }
@media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; gap: 24px; } .about-photo-wrap { max-width: 300px; } }

/* FAQ question as a real heading. An <h3> inside <summary> puts the question in
   the page outline where it belongs; this styles it back to the bare summary text
   it replaced, so nothing moves. font:inherit also kills the h3 UA margins. */
.faq-q { display: inline; margin: 0; font: inherit; color: inherit; letter-spacing: normal; }
/* letter-spacing is NOT covered by `font: inherit`, so without it these h3s inherit the
   -.01em tightening from the global h1,h2,h3 rule and render fractionally tighter than
   the plain <summary> text they replaced. Caught 2026-09-15 by diffing computed style,
   not the stylesheet: there is no declaration to read, the delta comes from a rule that
   only applies once the element is a heading. */