/* ==========================================================================
   Copeland Roofing, a demonstration trade site by We Sort Sites.
   Plain CSS, mobile first, no framework, no webfont. One file, no build step.

   Rules this file is written to keep:
   - Nothing may overflow horizontally between 320px and 430px. Long strings
     (the email address, the phone numbers) wrap rather than push the page out.
   - Every text/background pair is at least AA (4.5:1, or 3:1 for large text).
     Checked with a contrast script, not by eye.
   - Focus is always visible and always contrasts with the surface it is on,
     which is why --focus is redefined on the dark sections.
   ========================================================================== */

:root {
  --ink: #12161a;
  --ink-soft: #4a555e;
  --paper: #ffffff;
  --stone: #f4f3f0;
  --line: #d9d6d0;
  --line-strong: #8b9198;
  --accent: #b8420b;      /* white text on this = 5.49:1 */
  --accent-dark: #93340a; /* white text on this = 7.67:1 */
  --accent-ink: #a63b09;  /* accent as text on white = 6.46:1 */
  --accent-bright: #f07a3d; /* large text / icons on dark = 6.54:1 */
  --danger: #a1160f;
  --focus: #0b5cd5;
  --dim: #c6ccd2;

  --wrap: 68rem;
  --radius: 3px;
  --shadow: 0 1px 0 rgba(18, 22, 26, .08);
}

*,
*::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: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  /* Deliberately NO `overflow-x: hidden` here. It would hide a real overflow
     from both the visitor's scrollbar and from the width sweep used to check
     this file, which is how an overflow bug survives a test. Anything that
     wants to be wider than the viewport has to be fixed where it lives. */
}

h1, h2, h3 {
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  font-weight: 800;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

img, svg { max-width: 100%; }

.wrap {
  width: min(100% - 2rem, var(--wrap));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* --- focus ------------------------------------------------------------- */

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

/* The ring colour follows the SURFACE the ring is actually drawn on, so it is
   set by inheritance rather than by a `.section--dark :focus-visible`
   descendant selector. That selector was wrong: it matched every focusable
   thing inside a dark section, including the white quote form nested in one,
   and painted a #ffcf3d ring on #ffffff at 1.47:1. Measured, on the surfaces
   these actually land on:
     #0b5cd5 on white 5.99:1 · on --stone 5.40:1 · on the error panel 5.60:1
     #ffcf3d on --ink 12.33:1 · on the nav's #1b2127 11.01:1
   A light island nested inside a dark section has to take back the ring meant
   for light surfaces, which is what the .form rule below does. */
.section--dark,
.site-header,
.site-footer { --focus: #ffcf3d; }

.form { --focus: #0b5cd5; }

/* Fixed, not absolute. The header is sticky, so an absolutely positioned skip
   link scrolls away with the document: shift-tabbing back to it from halfway
   down the page focused something 2000px above the viewport and the visitor saw
   nothing move. Fixed keeps it on screen wherever the page is scrolled to, and
   z-index 50 puts it over the sticky header's 30. It lands on the dark header,
   hence the light ring. */
.skip {
  position: fixed;
  --focus: #ffcf3d;
  left: .5rem;
  top: -4rem;
  z-index: 50;
  background: var(--ink);
  color: #fff;
  padding: .7rem 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: top .12s ease-out;
}
.skip:focus { top: .5rem; color: #fff; }

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

/* The whole header is sticky, not just the call bar inside it. A sticky child
   is clipped to its own parent, so a sticky .topbar would have scrolled away
   with the header and left the phone number unreachable from halfway down the
   page. Whole-header sticky costs about 90px of a phone screen and keeps both
   the number and the section links permanently in reach. Anything with an
   anchor needs a matching scroll-margin-top or it lands underneath this. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--ink);
  color: #fff;
}

.topbar {
  background: var(--ink);
  border-bottom: 1px solid #2a3239;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 3.5rem;
  padding-block: .5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  color: #fff;
  text-decoration: none;
  min-width: 0;
}
.brand__mark { color: var(--accent-bright); flex: none; width: 30px; height: 24px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand__name {
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.brand__sub {
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}

.callbtn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: none;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: .5rem .75rem;
  border-radius: var(--radius);
  min-height: 2.75rem;
}
.callbtn:hover { background: var(--accent-dark); color: #fff; }
.callbtn svg { flex: none; }
.callbtn__text { display: flex; flex-direction: column; line-height: 1.1; }
.callbtn__label {
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
}
.callbtn__num { font-size: .9375rem; white-space: nowrap; }

.mainnav { background: #1b2127; }
.mainnav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  list-style: none;
  /* `margin: 0` here would undo the `margin-inline: auto` that .wrap sets on
     the same element and slam the nav against the left edge. */
  margin: 0 auto;
  padding: 0;
}
.mainnav a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: .75rem 0;
  border-bottom: 3px solid transparent;
}
.mainnav a:hover { color: #fff; border-bottom-color: var(--accent-bright); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .75rem 1.25rem;
  border: 3px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}
.btn--ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--wide { width: 100%; }

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

.hero {
  background: var(--stone);
  border-bottom: 4px solid var(--ink);
  padding: 2rem 0 2.25rem;
}
.hero__inner { display: grid; gap: 1.75rem; }

.eyebrow {
  margin: 0 0 .5rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.hero__title {
  font-size: clamp(1.875rem, 8.2vw, 3.25rem);
  margin-bottom: .35em;
}

.hero__lead {
  font-size: 1.125rem;
  color: var(--ink-soft);
  max-width: 34em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.25rem 0 1.25rem;
}
.hero__actions .btn { flex: 1 1 14rem; }

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .9375rem;
  font-weight: 600;
}
.hero__facts li { position: relative; padding-left: 1.4rem; }
.hero__facts li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: .75rem; height: .4rem;
  border-left: 3px solid var(--accent-ink);
  border-bottom: 3px solid var(--accent-ink);
  transform: rotate(-45deg);
}

.hero__art { display: none; }

/* --- sections ---------------------------------------------------------- */

/* Every scroll target clears the sticky header. Measured across 320-1440px,
   not guessed: the header renders 108px on a phone and 110px from 40rem up,
   where the type steps up. 7.5rem (120px) clears both, by 12px and 10px. It is
   one value on purpose — 7rem (112px) also cleared, but only by 2px at the
   tightest target (#hours, whose heading is the first thing in its box and so
   has no section padding above it to absorb an error). */
.section,
[id] { scroll-margin-top: 7.5rem; }

.section { padding: 2.5rem 0; }
.section--stone { background: var(--stone); }
.section--dark {
  background: var(--ink);
  color: #fff;
}
.section--dark a { color: var(--accent-bright); }
.section--dark a:hover { color: #fff; }

.section__title {
  font-size: clamp(1.5rem, 5.5vw, 2rem);
  margin-bottom: .5rem;
}
.section__title::after {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  margin-top: .6rem;
  background: var(--accent);
}
.section--dark .section__title::after { background: var(--accent-bright); }

.section__lead {
  color: var(--ink-soft);
  max-width: 40em;
  margin-bottom: 1.75rem;
}
.section--dark .section__lead { color: var(--dim); }

/* --- service cards ----------------------------------------------------- */

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.card {
  background: var(--paper);
  border: 2px solid var(--line);
  border-top: 5px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.card__icon { color: var(--accent-ink); display: block; margin-bottom: .5rem; }
.card__title { font-size: 1.125rem; margin-bottom: .35em; }
.card p { color: var(--ink-soft); margin: 0; }

/* --- steps ------------------------------------------------------------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  counter-reset: step;
}
.step {
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  border-radius: 50%;
  margin-bottom: .6rem;
}
.step__title { font-size: 1.0625rem; }
.step p { color: var(--ink-soft); margin: 0; }

/* --- areas ------------------------------------------------------------- */

.areas {
  display: grid;
  gap: 1.5rem;
}
.areas__heading {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent-ink);
  margin-bottom: .6rem;
}
.areas__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .3rem 1rem;
  font-size: .9375rem;
}
.areas__list li {
  padding: .35rem 0;
  border-bottom: 1px solid var(--line);
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

/* --- hours and contact ------------------------------------------------- */

.hours__wrap {
  display: grid;
  gap: 2.5rem;
  padding-block: 2.5rem;
}

.hours {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
.hours th,
.hours td {
  text-align: left;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line-strong);
  vertical-align: top;
}
.hours th { font-weight: 700; padding-right: .75rem; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.hours__note {
  color: var(--ink-soft);
  font-size: .9375rem;
  border-left: 4px solid var(--accent);
  padding-left: .85rem;
}

.contact { margin: 0; }
.contact dt {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 800;
  color: var(--ink-soft);
  margin-top: .9rem;
}
.contact dt:first-child { margin-top: 0; }
.contact dd {
  margin: .15rem 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
/* Standalone links in lists are tap targets, not prose. Padded to clear the
   24px WCAG 2.2 minimum with room to spare on a wet thumb. */
.contact dd a,
.plain a {
  display: inline-block;
  padding-block: .35rem;
}

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

.quote__wrap {
  display: grid;
  gap: 1.75rem;
  align-items: start;
}
.quote__intro p { color: var(--dim); max-width: 34em; }
.quote__or { font-weight: 700; }

.form {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 1.25rem;
  border-top: 5px solid var(--accent);
}

.form__note {
  background: var(--stone);
  border-left: 4px solid var(--ink);
  padding: .85rem 1rem;
  font-size: .875rem;
  color: var(--ink);
  margin-bottom: 1.25rem;
}

.form__errors {
  border: 2px solid var(--danger);
  color: var(--danger);
  background: #fff5f4;
  padding: .85rem 1rem;
  margin-bottom: 1.25rem;
  font-size: .9375rem;
  font-weight: 600;
}
.form__errors ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.form__errors a { color: var(--danger); }

.form__handoff {
  border: 2px solid var(--ink);
  border-left-width: 6px;
  background: var(--stone);
  padding: .85rem 1rem;
  margin-bottom: 1.25rem;
  font-size: .9375rem;
}
.form__handoff p { margin: 0; }

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-weight: 700;
  margin-bottom: .3rem;
}
.req, .opt {
  font-weight: 500;
  font-size: .8125rem;
  color: var(--ink-soft);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: .65rem .75rem;
  font: inherit;
  font-size: 1rem; /* 16px, so iOS does not zoom on focus */
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
}
.field textarea { min-height: 6rem; resize: vertical; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--ink-soft); }

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--danger);
  background: #fff8f7;
}

.field__err {
  margin: .35rem 0 0;
  color: var(--danger);
  font-size: .875rem;
  font-weight: 700;
}

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

.site-footer {
  background: var(--ink);
  color: #fff;
  padding: 2.5rem 0 1.5rem;
}
.site-footer a { color: var(--accent-bright); overflow-wrap: break-word;
  overflow-wrap: anywhere; }
.site-footer a:hover { color: #fff; }

.footer__grid {
  display: grid;
  gap: 1.75rem;
}
.footer__brand {
  font-weight: 800;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin-bottom: .4rem;
}
.footer__col p { color: var(--dim); }
.footer__h {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
  color: #fff !important;
  margin-bottom: .5rem;
}
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: .25rem 0; color: var(--dim); overflow-wrap: break-word;
  overflow-wrap: anywhere; }

.footer__note {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid #2a3239;
}
.footer__note p {
  color: var(--dim);
  font-size: .8125rem;
  max-width: 46em;
}

/* --- wider screens ------------------------------------------------------ */

@media (min-width: 40rem) {
  body { font-size: 1.125rem; }
  .hero { padding: 3rem 0 3.25rem; }
  .section { padding: 3.5rem 0; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hours__wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form { padding: 1.75rem; }
  .callbtn__num { font-size: 1.0625rem; }
  .brand__mark { width: 38px; height: 30px; }
  .brand__name { font-size: 1.25rem; }
}

@media (min-width: 60rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
    gap: 2.5rem;
  }
  .hero__art { display: block; }
  .hero__art svg { width: 100%; height: auto; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .areas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .quote__wrap {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 3rem;
  }
  .hero__actions .btn { flex: 0 1 auto; }
}