/* ==========================================================================
   Roof Boss ATX / roofbossatx.com
   MCA015 · Make Creative Agency

   Design follows the Templates Jungle "Roofers" free template (Figma community
   file JxikEorT1CNHaeCrLJD7jU), rebuilt by hand. The template ships as
   Bootstrap 5; per docs/code/stack.md this is hand-coded instead: no
   framework, no build step, no JS dependencies.

   COLOUR, 2026-09-04: retuned off the client's logo instead of the template.
   Sampling 83k opaque pixels of the badge puts its sepia at hue 24-26 deg,
   saturation 0.09-0.24. The template red sat at hue 7, which is only ~17 deg
   away: analogous to the logo rather than contrasting with it, which is what
   made the badge read muddy beside it.

   The accent is now the DIRECT COMPLEMENT of that sepia, 205 deg, held at a
   slate rather than a tech blue so it reads weathered next to the badge.
   Neutrals are pulled onto the logo's own sepia ramp (hue ~25, low sat), and
   the hero overlay uses three literal stops off that ramp.

   Contrast, all verified (WCAG AA = 4.5 text, 3.0 non-text UI):
     white on accent #1D5A87 ........ 7.33
     accent text on white ........... 7.33
     accent text on bg-soft ......... 6.47
     white on accent-dark ........... 9.34
     accent-lift on ink (dark only) . 5.31
     ink on white .................. 17.49
     ink-mid on white ............... 6.11
     field-line on white ............ 3.81  (form + pill borders)
     white on hero overlay, dark end  17.84
   --line is a decorative hairline only, never a control boundary.
   ========================================================================== */

:root {
  /* Accent: complement of the logo's sepia (hue 205 vs the badge's 25) */
  --accent:      #1D5A87;
  --accent-dark: #164A70;   /* hover, and accent text wanting more weight */
  --accent-lift: #4994CA;   /* ON DARK SURFACES ONLY (5.31 on ink, 3.30 on white) */
  --accent-tint: #EDF3F8;

  /* Tertiary: hue 85. Completes a rectangle tetrad with the sepia/slate pair
     (26 + 205 is one diagonal, 86 + 265 the other). Yellow-green rather than a
     UI success-green, because in a trades context this is hi-vis work gear.
     DARK GROUNDS ONLY: 9.3 on --ink, 4.68 on the worst hero pixel, but only
     1.9 on white. If it is ever needed on a light ground use #52840B (4.5). */
  --tertiary:   #87D11F;

  /* Neutrals sit on the logo's own sepia ramp, hue ~25 at low saturation */
  --ink:        #1C1917;
  --ink-mid:    #6B6058;
  --line:       #E0D9D2;    /* decorative hairline only, never a control edge */

  --bg:         #FFFFFF;
  --bg-soft:    #F5F0EB;
  --card:       #F0E9E2;
  --footer:     #1C1917;

  /* Control borders need 3:1 as non-text UI (WCAG 1.4.11) */
  --field-line: #8B817A;
  --warn:       #A4322A;
  --warn-tint:  #FBEDEB;

  --pad: clamp(20px, 5vw, 48px);
  --section: clamp(60px, 8vw, 104px);

  --display: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
  --body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

html { 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(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, .h-cond {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1.06;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(34px, 4.6vw, 56px); }
h2 { font-size: clamp(28px, 3.5vw, 44px); }
h3 { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.2; }
p  { margin: 0 0 1.05em; }

a { color: var(--accent-dark); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.wrap { width: min(1240px, 100%); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--section); }
.section--soft { background: var(--bg-soft); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--ink); color: #fff; padding: 12px 20px;
}
.skip:focus { left: 0; }

/* Eyebrow: italic condensed, straight from the template ---------------- */
.eyebrow {
  font-family: var(--display);
  font-style: italic;
  font-size: 14px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 10px;
}
.eyebrow--on-dark { color: #E2D6C9; }

.lede { font-size: 17.5px; color: var(--ink-mid); max-width: 62ch; }

/* ==========================================================================
   BUTTONS: squared, like the template
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--body);
  font-size: 14px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 15px 30px;
  border: 2px solid transparent; border-radius: 0;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-dark); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.btn--ghost-light:hover { background: #fff; color: var(--accent-dark); border-color: #fff; }
.btn--block { width: 100%; }
.btn--lg { padding: 17px 34px; font-size: 15px; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 120;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 78px; }

.lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.lockup__badge { width: 48px; height: 48px; flex: none; }
.lockup__type { display: flex; flex-direction: column; line-height: 1; }
.lockup__name {
  font-family: var(--display); font-weight: 700;
  font-size: 23px; text-transform: uppercase; letter-spacing: .01em;
  color: var(--ink);
}
.lockup__sub {
  font-size: 9.5px; font-weight: 700; letter-spacing: .19em;
  text-transform: uppercase; color: var(--ink-mid); margin-top: 5px;
}

.nav { display: none; }
.nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav a {
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.nav a:hover { color: var(--accent-dark); }

.header-phone {
  display: none; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: 19px;
  color: var(--ink); text-decoration: none;
}
.header-phone svg { color: var(--accent); flex: none; }
.header-phone:hover { color: var(--accent-dark); }

/* Mobile menu toggle: vanilla, no framework. Panel is a real element that
   the button owns via aria-expanded / aria-controls. */
.nav-toggle {
  margin-left: auto;
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 40px; padding: 0 9px;
  background: var(--ink); border: 0; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: #fff; }
.nav-panel { display: none; border-top: 1px solid var(--line); background: #fff; }
.nav-panel[data-open="true"] { display: block; }
.nav-panel ul { list-style: none; margin: 0; padding: 8px 0 18px; }
.nav-panel a {
  display: block; padding: 13px var(--pad);
  font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.nav-panel a:hover { background: var(--bg-soft); color: var(--accent-dark); }

@media (min-width: 1040px) {
  .nav, .header-phone { display: flex; }
  .nav-toggle, .nav-panel { display: none !important; }
}

/* Below the nav breakpoint the header drops its CTA rather than wrapping it
   onto a second line. The sticky call bar already carries both actions. */
@media (max-width: 1039px) {
  .site-header .wrap { min-height: 64px; gap: 12px; }
  .site-header > .wrap > .btn { display: none; }
}
@media (max-width: 660px) {
  .lockup__sub { display: none; }
  .lockup__badge { width: 40px; height: 40px; }
  .lockup__name { font-size: 19px; }
}

/* ==========================================================================
   HERO: photo, maroon overlay, copy left, form card right
   ========================================================================== */
.hero {
  position: relative;
  background: #241F1C url("../img/work/hero-wide-sepia.jpg") center 38% / cover no-repeat;
  padding-block: clamp(52px, 7vw, 96px);
}
/* The photograph itself is now duotoned onto the badge's hue (grayscale, then
   channels mixed 1 : 0.839 : 0.72, which solves hue = 60(g-b)/(r-b) for 25.5
   deg; measured result 28.5 deg, inside the badge's own 21-32 spread). So the
   overlay only has to darken for legibility, not supply the colour, and it
   runs lighter than the maroon one it replaces. Stops are the logo's L=0.1 and
   L=0.2 bands. White on the dark end stays above 15:1. */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(26,23,21,.90) 0%, rgba(45,39,35,.78) 44%, rgba(90,80,72,.52) 100%);
}
.hero .wrap { position: relative; }
.hero__grid { display: grid; gap: clamp(34px, 4vw, 56px); align-items: center; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: 1.12fr .88fr; } }

.hero h1 { color: #fff; margin-bottom: .42em; }
.hero__lead { color: #EAE0D4; font-size: 17px; max-width: 52ch; }

.hero__points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 11px; }
.hero__points li {
  display: flex; align-items: flex-start; gap: 11px;
  color: #fff; font-size: 15px; font-weight: 500;
}
.hero__points svg { flex: none; margin-top: 3px; color: var(--tertiary); }

/* Form card */
.quote-card {
  background: var(--card);
  padding: clamp(26px, 3vw, 38px);
  border-radius: 0;
}
.quote-card h2 { font-size: clamp(24px, 2.4vw, 30px); margin-bottom: .7em; }

form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink);
}
.field .req { color: var(--accent-dark); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 16px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--field-line);
  border-radius: 0;
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29,90,135,.24);
}
.field textarea { resize: vertical; min-height: 84px; }
.form-row { display: grid; gap: 14px; }
@media (min-width: 520px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-note { font-size: 12.5px; color: var(--ink-mid); margin: 2px 0 0; line-height: 1.5; }

/* Validation banner, shown only when send-quote.php bounces a submission back
   with ?error=. Single-side accent, so square corners, per the house rule. */
.form-error {
  background: var(--warn-tint);
  border: 1px solid var(--warn);
  border-left: 4px solid var(--warn);
  border-radius: 0;
  padding: 12px 16px;
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #4A1F1A;
}

/* Native validation state on the phone field, driven by setCustomValidity. */
.field input:user-invalid {
  border-color: var(--warn);
}
.hp { position: absolute; left: -9999px; }

/* ==========================================================================
   VALUE STRIP
   ========================================================================== */
.strip { background: var(--ink); }
.strip ul {
  list-style: none; margin: 0; padding: 26px 0;
  display: grid; gap: 16px 30px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.strip li { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 14.5px; font-weight: 500; }
.strip svg { flex: none; color: var(--tertiary); }

/* ==========================================================================
   SERVICE CARDS
   Bottom rule is a single-side accent, so corners stay square (house rule).
   ========================================================================== */
.grid-3 { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); }

.svc {
  background: #fff;
  border: 1px solid var(--line);
  border-bottom: 4px solid var(--accent);
  border-radius: 0;
  padding: clamp(26px, 2.6vw, 36px);
  transition: background-color .2s ease, color .2s ease;
}
.svc__icon { color: var(--accent); margin-bottom: 16px; }
.svc h3 { margin-bottom: .45em; }
.svc p { font-size: 15.5px; color: var(--ink-mid); margin: 0; }
/* No featured/default-filled card. It previously shared its entire appearance
   with :hover, so it read as stuck in a hover state, and highlighting Roof
   Replacement pulled against the page's own argument that Roof Boss will tell
   you when you do NOT need a new roof. All six cards are equal; the fill is a
   hover response only. */
.svc:hover { background: var(--accent); border-color: var(--accent); }
.svc:hover h3 { color: #fff; }
.svc:hover p { color: #D9E7F2; }
.svc:hover .svc__icon { color: #fff; }

/* ==========================================================================
   ABOUT BAND
   ========================================================================== */
.about { display: grid; gap: clamp(32px, 4vw, 58px); align-items: center; }
@media (min-width: 900px) { .about { grid-template-columns: .85fr 1.15fr; } }
/* Direct child only, so a photograph placed here still crops square while the
   brand plate below controls its own image. */
.about__media > img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* The badge at the size its detail was drawn for. No panel behind it: the
   client's PNG is genuinely transparent (corner alpha 0, ~27% of the image
   fully transparent), so it sits straight on the section ground and the
   circular silhouette reads as the edge instead of a square. */
.brandplate {
  display: grid; place-items: center;
  padding: clamp(8px, 1.5vw, 20px);
}
.brandplate img { width: 100%; max-width: 480px; height: auto; }

.points { display: grid; gap: 0; margin-top: 8px; }
.points__item { padding: 22px 0; border-bottom: 1px solid var(--line); }
.points__item:first-child { border-top: 1px solid var(--line); }
.points__item h3 { margin-bottom: .3em; }
.points__item p { font-size: 15.5px; color: var(--ink-mid); margin: 0; }

/* ==========================================================================
   WORK GALLERY
   ========================================================================== */
.gallery {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
/* Explicit columns rather than auto-fit: six tiles auto-fitting land 4+2 on a
   wide screen, which leaves a ragged second row. 2-up then 3-up stays even. */
@media (min-width: 620px)  { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery li { aspect-ratio: 4 / 3; background: var(--bg-soft); overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery li:hover img { transform: scale(1.05); }

/* ==========================================================================
   SERVICE AREA
   ========================================================================== */
/* Landmark cells. Plain name cells read as a thin coverage area, so each town
   now carries a drawn landmark: the Capitol for Austin, the round rock in
   Brushy Creek for Round Rock, Gruene Hall for New Braunfels, and so on.
   Drawn rather than sourced, because Texas cities restrict their official
   seals and a seal here would imply municipal endorsement.

   Twelve divides by 2, 3, 4 and 6, so every breakpoint fills its rows. */
.areas {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, 1fr);
  margin: 32px 0 0; padding: 0; list-style: none;
}
@media (min-width:  560px) { .areas { grid-template-columns: repeat(3, 1fr); } }
@media (min-width:  860px) { .areas { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1140px) { .areas { grid-template-columns: repeat(6, 1fr); } }
.areas li {
  background: #fff;
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--accent);
  border-radius: 0;                    /* single-side accent, so square corners */
  padding: 24px 10px 22px;
  text-align: center;
  transition: background-color .2s ease;
}
.areas li:hover { background: var(--accent-tint); }
.areas svg { color: var(--accent); margin: 0 auto 12px; display: block; }
.areas__name {
  display: block;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 14px; line-height: 1.15; color: var(--ink);
}


/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { max-width: 900px; }
.faq details { background: #fff; border: 1px solid var(--line); margin-bottom: 10px; }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 19px 54px 19px 22px;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(16px, 1.5vw, 18px); text-transform: uppercase; letter-spacing: .01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-family: var(--body); font-size: 24px; font-weight: 400; line-height: 1; color: var(--accent);
}
.faq details[open] summary::after { content: "\2013"; }
.faq details[open] summary { color: var(--accent-dark); }
.faq details p { padding: 0 22px 20px; margin: 0; font-size: 15.5px; color: var(--ink-mid); }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band { background: var(--accent); color: #fff; padding-block: clamp(34px, 4vw, 52px); }
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 34px; }
.cta-band h2 { color: #fff; margin: 0; margin-right: auto; font-size: clamp(24px, 2.8vw, 36px); }
.cta-band a.tel {
  font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.6vw, 32px);
  color: #fff; text-decoration: none;
}
.cta-band a.tel:hover { color: #CFE2F1; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--footer); color: #C9C2BB; padding-block: 54px 30px; font-size: 14.5px; }
.site-footer .lockup__name { color: #fff; }
.site-footer .lockup__sub { color: #9A928B; }
.footer__grid { display: grid; gap: 34px; }
@media (min-width: 820px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.site-footer h3 { color: #fff; font-size: 15px; letter-spacing: .1em; margin-bottom: 1em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { color: #C9C2BB; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer p { margin-bottom: .7em; }
.footer__bottom {
  border-top: 1px solid #332E2A; margin-top: 40px; padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: 13px; color: #A79E96;
}

/* ==========================================================================
   STICKY TAP-TO-CALL (mobile). Exhibit A requires it; the template has none
   ========================================================================== */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  display: grid; grid-template-columns: 1fr 1fr;
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 10px;
  font-size: 14px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none;
}
.callbar__call { background: var(--accent); color: #fff; }
.callbar__quote { background: var(--ink); color: #fff; }
@media (min-width: 1040px) { .callbar { display: none; } }
@media (max-width: 1039px) { body { padding-bottom: 54px; } }