/* Faithful Finish Painting Co.
   Direction: the client's own brand, taken from the four supplied assets (round logo,
   Facebook cover, business card front and back): deep forest green, gold and cream, a
   Trajan-style serif wordmark, thin gold rules, a cross worked into the FF monogram.

   The chrome is the GREEN surface carrying CREAM ink (13.3:1). Gold is the accent:
   buttons carry DARK ink on gold (7.1:1). Gold on cream is 2.1:1 and is therefore
   DECORATIVE ONLY, never text. Forked from exterior-express/site/styles/main.css; the
   gable dividers there became flat gold rules here (--peak-h is 0), which is what the
   business card does between its panels.

   REBRAND SURFACE (invariant 7): the three tokens marked REBRAND below, plus
   assets/logo.webp / logo.png (the client's round mark, cut out of its black square).
   Never hard-code a colour anywhere else. */

:root {
  /* ---- REBRAND: change these three to reskin the whole site ---- */
  --brand:      #0d2b1a;  /* REBRAND  forest green chrome + hero. Cream ink on it = 13.3:1 */
  --brand-ink:  #1c4a32;  /* REBRAND  links on cream — 8.3:1                            */
  --accent:     #c9a24e;  /* REBRAND  gold: rules + button surface. Dark ink on it 7.1:1 */
  /* -------------------------------------------------------------- */

  --brand-soft: color-mix(in srgb, var(--accent) 70%, #ffffff);  /* eyebrows on green */
  --brand-deep: color-mix(in srgb, var(--accent) 80%, #000000);  /* button hover      */

  --color-bg:      #faf7f0;  /* cream paper, from the cover photo */
  --color-surface: #f1ece0;
  --color-tint:    #ece5d3;  /* the contact panel */
  --color-band:    var(--brand);
  --color-text:    #141f18;  /* 15:1 on bg */
  --color-muted:   #4b5a50;  /* 6.5:1 on bg */
  --color-border:  #ddd6c4;
  --color-field:   #ffffff;

  --step--1: clamp(0.94rem, 0.90rem + 0.20vw, 1.06rem);
  --step-0:  clamp(1.06rem, 1.00rem + 0.30vw, 1.22rem);
  --step-1:  clamp(1.28rem, 1.18rem + 0.50vw, 1.60rem);
  --step-2:  clamp(1.55rem, 1.36rem + 0.95vw, 2.15rem);
  --step-3:  clamp(1.90rem, 1.55rem + 1.75vw, 3.05rem);
  --step-4:  clamp(2.40rem, 1.70rem + 3.40vw, 4.60rem);

  --space-xs: clamp(0.5rem,  0.45rem + 0.25vw, 0.7rem);
  --space-s:  clamp(0.8rem,  0.70rem + 0.40vw, 1.1rem);
  --space-m:  clamp(1.2rem,  1.05rem + 0.70vw, 1.8rem);
  --space-l:  clamp(1.8rem,  1.50rem + 1.40vw, 2.9rem);
  --space-xl: clamp(2.8rem,  2.20rem + 2.80vw, 5.2rem);
  --space-2xl:clamp(4.0rem,  3.00rem + 4.50vw, 7.5rem);

  --peak-h:    0px;   /* flat gold rules, not gables */
  --peak-line: 4px;
  --header-h:  calc(clamp(44px, 4.6vw, 56px) + 1rem);

  --radius:       3px;
  --radius-field: 6px;
  --radius-lg:    10px;
  --shadow:    0 1px 2px rgba(20, 31, 24, .05), 0 8px 24px -12px rgba(20, 31, 24, .18);
  --measure:   68ch;

  /* Serif, to sit with the logo's Trajan-style caps. Georgia ships on Windows and macOS. */
  --font: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
          "Times New Roman", serif;

  --motion-ok: 1;
}

@supports not (color: color-mix(in srgb, red, white)) {
  :root { --brand-soft: #dfc995; --brand-deep: #a1823e; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.14; letter-spacing: -0.005em; margin: 0 0 var(--space-s); text-wrap: balance; }
h1 { font-size: var(--step-4); font-weight: 400; }
h2 { font-size: var(--step-3); font-weight: 700; }
h3 { font-size: var(--step-1); font-weight: 700; }
p  { margin: 0 0 var(--space-s); max-width: var(--measure); }
a  { color: var(--brand-ink); text-underline-offset: 3px; }
ul, ol { margin: 0; padding: 0; }

:focus-visible { outline: 3px solid var(--brand-ink); outline-offset: 3px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: var(--space-s); top: var(--space-s); z-index: 100;
  background: var(--accent); color: var(--color-text); padding: .7rem 1rem;
  border-radius: var(--radius); font-weight: 700; text-decoration: none;
  clip-path: inset(50%);
}
.skip-link:focus { clip-path: none; }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2.5rem, 74rem); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 48rem); }
.section { padding-block: var(--space-2xl); }
.section--alt { background: var(--color-surface); }
.section--center { text-align: center; }
.section--center p { margin-inline: auto; }
.section__lede { font-size: var(--step-1); color: var(--color-muted); margin-bottom: var(--space-l); }
.section__foot { margin-top: var(--space-l); color: var(--color-muted); font-size: var(--step--1); }

/* Gold eyebrow with the card's hairline rule either side of the wordmark in spirit:
   small caps, wide tracking. On cream it is dark green (gold fails contrast as text). */
.eyebrow {
  font-size: var(--step--1); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand-ink); margin: 0 0 var(--space-xs);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .85rem 1.5rem;
  border: 2px solid transparent; border-radius: var(--radius);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--brand { background: var(--accent); color: var(--color-text); }
.btn--brand:hover { background: var(--brand-deep); color: var(--color-bg); }
.btn--ghost { background: transparent; color: var(--brand-ink); border-color: var(--brand-ink); }
.btn--ghost:hover { background: var(--color-surface); }
.btn--lg { font-size: var(--step-0); padding: 1.05rem 1.9rem; }

/* ---------- header: the green bar ---------- */
#nav-sentinel { height: 1px; }
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--brand); color: var(--color-bg);
  border-bottom: var(--peak-line) solid var(--accent);
  transition: box-shadow .2s ease;
}
.site-header.nav--scrolled { box-shadow: 0 2px 14px rgba(20, 31, 24, .35); }
.header-inner { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-m); padding-block: .5rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.brand__logo { height: clamp(44px, 4.6vw, 56px); width: auto; }
.brand__name { font-size: var(--step-0); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; line-height: 1.1; color: var(--color-bg); }
.brand__sub { display: block; font-size: .72em; font-weight: 400; letter-spacing: .18em;
  color: var(--accent); }

.nav__list { display: flex; align-items: center; gap: var(--space-m); list-style: none; }
.nav__list a { color: var(--color-bg); text-decoration: none; font-weight: 400; }
.nav__list a:hover, .nav__list a[aria-current="page"] { text-decoration: underline;
  text-decoration-color: var(--accent); text-underline-offset: 6px; }
.nav__call { font-weight: 700; white-space: nowrap; color: var(--accent) !important; }
.site-header :focus-visible { outline-color: var(--accent); }

.nav-toggle { display: none; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .8rem;
  background: transparent; border: 1px solid rgba(250, 247, 240, .5); border-radius: var(--radius);
  font: inherit; font-weight: 700; color: var(--color-bg); cursor: pointer; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 20px; height: 2px; background: currentColor; content: ""; }
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after  { position: absolute; top: 6px; }

@media (max-width: 58rem) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; inset-inline: 0; top: 100%;
    background: var(--brand); box-shadow: 0 8px 20px rgba(20, 31, 24, .35); display: none;
    border-bottom: var(--peak-line) solid var(--accent);
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-s) var(--space-m) var(--space-m); }
  .nav__list li { border-bottom: 1px solid rgba(250, 247, 240, .18); }
  .nav__list li:last-child { border: 0; }
  .nav__list a { display: block; padding: .9rem 0; }
}
@media (max-width: 30rem) { .brand__name { display: none; } }

/* ---------- hero: green, with the photo behind a scrim ---------- */
/* The photo behind a hero or page head is a real <img class="hero__bg"> inside the
   section, not a CSS url(): a url() carried in a custom property set inline resolves
   against the STYLESHEET in Chrome, so `assets/x.webp` silently became
   `styles/assets/x.webp` and 404'd. An <img> resolves against the page, gets srcset,
   and is what the browser reports as the LCP element. The scrim is a ::before overlay
   so the type keeps its contrast over any photo. */
.hero {
  position: relative; overflow: hidden;
  display: grid; align-items: center;
  min-height: min(78vh, 700px);
  padding-block: var(--space-2xl);
  text-align: center;
  color: var(--color-bg);
  background-color: var(--brand);
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.hero::before, .page-head::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    radial-gradient(120% 95% at 78% 4%, rgba(201, 162, 78, .14), transparent 60%),
    linear-gradient(168deg, rgba(13, 43, 26, .74) 0%, rgba(10, 34, 21, .80) 48%, rgba(6, 22, 13, .86) 100%);
}
.hero > .wrap, .page-head > .wrap { position: relative; z-index: 2; }
.hero__copy { max-width: 46rem; margin-inline: auto; }
.hero .eyebrow { color: var(--brand-soft); }
.hero h1 { text-shadow: 0 2px 20px rgba(0, 0, 0, .45); }
.hero .lede {
  font-size: var(--step-1); color: rgba(250, 247, 240, .93);
  max-width: 40rem; margin-inline: auto;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s);
  justify-content: center; margin-block: var(--space-m) var(--space-s); }
.hero .btn--ghost { color: var(--color-bg); border-color: rgba(250, 247, 240, .6); }
.hero :focus-visible { outline-color: var(--accent); }
.hero .btn--ghost:hover { background: rgba(250, 247, 240, .12); border-color: var(--color-bg); }
.hero__note { font-size: var(--step--1); color: rgba(250, 247, 240, .82); margin: 0; }

/* ---------- cards / grids ---------- */
.card-grid { display: grid; gap: var(--space-l); list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); text-align: left; }
.card-grid--two { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  max-width: 56rem; margin-inline: auto; }
.card { background: var(--color-bg); border: 1px solid var(--color-border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg); padding: var(--space-l); box-shadow: var(--shadow); }
.card p { color: var(--color-muted); margin-bottom: 0; }

.steps { display: grid; gap: var(--space-l); list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); text-align: left; }
.step__n { display: inline-grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--accent); color: var(--color-text); font-weight: 700;
  font-size: var(--step-0); margin-bottom: var(--space-s); }
.step p { color: var(--color-muted); margin-bottom: 0; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-s);
  list-style: none; justify-content: center; }
.chips li { background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 999px; padding: .5rem 1.05rem; font-weight: 700; font-size: var(--step--1); }

/* ---------- FAQ ---------- */
.qa { border-bottom: 1px solid var(--color-border); text-align: left; }
.qa summary { cursor: pointer; list-style: none; padding: var(--space-m) 2.2rem var(--space-m) 0;
  font-size: var(--step-1); font-weight: 700; position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: .3rem; top: 50%;
  translate: 0 -50%; font-size: 1.5em; font-weight: 400; color: var(--brand-ink); line-height: 1; }
.qa[open] summary::after { content: "\2212"; }
.qa p { color: var(--color-muted); padding-bottom: var(--space-m); margin: 0; }

/* ---------- closing CTA + form ---------- */
.cta { background: var(--color-tint); color: var(--color-text);
  padding-block: var(--space-2xl); text-align: center; }
.cta__lede { font-size: var(--step-1); color: var(--color-muted); max-width: 38rem; margin-inline: auto; }
.cta__actions { margin-block: var(--space-m) var(--space-l); }

.form { text-align: left; max-width: 40rem; margin-inline: auto; }
.form__grid { display: grid; gap: 0 var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.form__row { display: grid; gap: .4rem; margin-bottom: var(--space-m); align-content: start; }
.form__row--wide { grid-column: 1 / -1; }
.form label { font-weight: 400; font-size: var(--step--1); }
.form input, .form textarea {
  font: inherit; color: inherit; padding: .8rem .9rem; min-height: 48px;
  border: 1px solid var(--color-border); border-radius: var(--radius-field);
  background: var(--color-field); width: 100%;
}
.form input:focus-visible, .form textarea:focus-visible { border-color: var(--brand-ink); }
.form textarea { resize: vertical; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__submit { text-align: center; }
.form__status { margin: var(--space-s) 0 0; font-weight: 700; min-height: 1.5em; text-align: center; }
.form__status[data-state="error"] { color: #8c2f21; }
.form__status[data-state="ok"] { color: var(--brand-ink); }

/* ---------- footer: green, logo first, gold rule on top ---------- */
.site-footer {
  background: var(--color-band); color: var(--color-bg);
  border-top: var(--peak-line) solid var(--accent);
  padding-block: var(--space-xl);
  text-align: center;
}
.footer-inner { display: grid; gap: var(--space-m); justify-items: center; }
.footer__logo { height: clamp(96px, 12vw, 150px); width: auto; }
.footer__tagline { font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin: 0; }
.footer__nav ul { display: flex; flex-wrap: wrap; gap: var(--space-m); list-style: none; justify-content: center; }
.footer__cta { margin: 0; }
.site-footer a { color: var(--color-bg); }
.site-footer :focus-visible { outline-color: var(--accent); }
.footer__contact { line-height: 1.9; }
.footer__contact a { font-size: var(--step-1); font-weight: 700; text-decoration: none; }
.footer__contact a:hover { text-decoration: underline; }
.footer__email { font-size: var(--step-0) !important; font-weight: 400 !important; }
.footer__areas, .footer__legal {
  color: rgba(250, 247, 240, .82); font-size: var(--step--1); margin: 0;
  max-width: var(--measure); margin-inline: auto;
}

/* ---------- page head ---------- */
.page-head {
  position: relative; overflow: hidden;
  padding-block: var(--space-2xl);
  text-align: center;
  color: var(--color-bg);
  background-color: var(--brand);
}
.page-head .eyebrow { color: var(--brand-soft); }
.page-head .eyebrow a { color: inherit; }
.page-head h1 { text-shadow: 0 2px 20px rgba(0, 0, 0, .45); }
.page-head .lede {
  font-size: var(--step-1); color: rgba(250, 247, 240, .93);
  max-width: 40rem; margin-inline: auto; text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}
.page-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-s);
  justify-content: center; margin-block: var(--space-m) 0; }
.page-head .btn--ghost { color: var(--color-bg); border-color: rgba(250, 247, 240, .6); }
.page-head .btn--ghost:hover { background: rgba(250, 247, 240, .12); border-color: var(--color-bg); }
.page-head :focus-visible { outline-color: var(--accent); }

/* ---------- photos: the Our Work grid and the in-page strip ---------- */
.gallery { display: grid; gap: var(--space-m); list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }
.gallery figure, .strip figure { margin: 0; }
.gallery img, .strip img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow);
  background: var(--color-surface); }
.gallery figcaption, .strip figcaption { color: var(--color-muted); font-size: var(--step--1);
  padding: var(--space-xs) .2rem 0; }
.strip { display: grid; gap: var(--space-m); list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); text-align: left;
  margin-top: var(--space-l); }
.prose .figure { margin: var(--space-l) 0; }
.prose .figure img { width: 100%; height: auto; border-radius: var(--radius-lg);
  border: 1px solid var(--color-border); box-shadow: var(--shadow); }
.prose .figure figcaption { color: var(--color-muted); font-size: var(--step--1); padding-top: var(--space-xs); }

/* ---------- long-form ---------- */
.prose { margin-bottom: var(--space-xl); }
.prose h2 { margin-top: var(--space-l); }
.prose p { color: var(--color-muted); }
.prose > .qa p { padding-bottom: var(--space-m); }

.related { margin-top: var(--space-xl); padding-top: var(--space-l); border-top: 1px solid var(--color-border); }
.related ul { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); list-style: none; }
.related a { font-weight: 700; }

.footer__nav--services ul { gap: var(--space-s) var(--space-m); }
.footer__nav--services a { font-size: var(--step--1); }

/* Social row. A stub is a profile that has no URL yet: rendered as plain text so it
   never becomes a dead or guessed link, and dimmed so it does not read as one. */
.footer__social ul { gap: var(--space-s) var(--space-m); }
.footer__social a { font-weight: 700; font-size: var(--step--1); display: inline-flex; align-items: center; gap: .4em; }
.footer__social-icon { width: 1.4em; height: 1.4em; flex: none; }
.footer__social-stub { font-size: var(--step--1); color: rgba(250, 247, 240, .55); }
.footer__social-stub small { font-size: .85em; }

.card h2, .card h3 { margin-bottom: var(--space-xs); }
.card h2 a, .card h3 a { text-decoration: none; }
.card h2 a:hover, .card h3 a:hover { text-decoration: underline; }

/* ---------- the gold rule between panels ----------
   The business card separates its panels with a thin gold line. That is the divider
   here: a section that follows the hero or a page head carries .rule-top, which paints
   a 4px gold band along its top edge. Kept LAST so its padding wins over the
   padding-block shorthand on .section and .cta by source order. */
.rule-top {
  position: relative;
  background: var(--color-bg);
  padding-top: var(--space-2xl);
  z-index: 1;
}
.rule-top::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: var(--peak-line);
  background: var(--accent); pointer-events: none;
}
.cta.rule-top { background: var(--color-tint); }

/* ---------- motion ---------- */
[data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(1.5rem);
    transition: opacity .55s ease, transform .55s ease; }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }
  .js [data-reveal][data-reveal-delay="1"] { transition-delay: .08s; }
  .js [data-reveal][data-reveal-delay="2"] { transition-delay: .16s; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-ok: 0; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .nav, .form { display: none; }
  [data-reveal], .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero, .page-head { min-height: 0; color: var(--color-text); background: none; }
  .hero__bg, .hero::before, .page-head::before { display: none; }
  .hero h1, .hero .lede, .hero__note, .page-head h1, .page-head .lede { text-shadow: none; color: var(--color-text); }
}