/* Denver Flooring Collective
   Design system measured from the live site — see docs/reference/DESIGN-SPEC.md.
   Fonts: Italiana (hero display), Fraunces (section headings), Inter (everything else).
   Primary action color is terracotta #9b5236. There is no lime green. */

:root {
  --terracotta: #9b5236;
  --terracotta-dark: #7f4229;
  --deep-green: #274034;
  --forest: #567360;
  --sage: #8aa699;
  --charcoal: #323232;
  --ink-navy: #111720;
  --offwhite: #f9f9f9;
  --cream: #f2efe9;
  --paper: #ffffff;

  --font-display: 'Italiana', Georgia, serif;
  --font-head: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --space-1: .5rem;  --space-2: 1rem;  --space-3: 1.5rem;
  --space-4: 2.5rem; --space-5: 4rem;  --space-6: 6rem;
  --radius: 5px;
  --maxw: 1170px;     /* live content column at desktop: 1170 wide, x=135 at 1440 */
  --gutter: 20px;     /* live side margin on phones */

  --animate-duration: 1s;
}

/* Full Latin files from Google Fonts, the same families and weights the live GHL site loads.
   The earlier Inter and Fraunces files held only the letter "A", so most text drew in fallback fonts. */
@font-face { font-family: 'Italiana'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/italiana-400.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/fraunces-400.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/fraunces-500.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/fraunces-600.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/fraunces-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/inter-900.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/poppins-300.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/montserrat-400.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/montserrat-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex-serif-600.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/montserrat-700.woff2') format('woff2'); }

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

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-navy);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

.container { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 768px) and (max-width: 1209px) { :root { --gutter: 5%; } }
/* Empty markers carrying the old GHL section ids that ads, texts and the
   linktree page still link to. */
.ghl-anchor { display: block; height: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.text-center { text-align: center; }

/* ---------- Type ---------- */
h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 48px;
  line-height: 48px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--forest);
}
h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 48px;
  line-height: 48px;
  letter-spacing: 1px;
}
@media (max-width: 767px) { h2 { font-size: 38px; line-height: 38px; } }
h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.25rem; line-height: 1.3; }
.eyebrow { font-family: var(--font-body); font-size: 1.5rem; font-weight: 400; color: var(--ink-navy); }
.lead { font-size: 1.125rem; }
p + p { margin-top: var(--space-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  padding: 16px 36px;
  border: 5px solid transparent;
  border-radius: var(--radius);
  background: var(--terracotta);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.btn:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }

.btn--secondary {
  background: var(--cream);
  color: var(--terracotta);
  border: 2px solid var(--terracotta);
}

.btn--phone {
  background: var(--terracotta);
  color: #fff;
  border: 1px solid #fff;
  padding: 10px 16px;
  font-size: 1rem;
  text-decoration: none;
  border-radius: var(--radius);
  white-space: nowrap;
}
.btn--phone:hover { background: var(--terracotta-dark); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.btn-row--center { justify-content: center; }

/* ---------- Header ----------
   Measured on the live site. Desktop: a 140px white bar, the square logo image
   at 100x100 near the left, five Inter 15/500 links centered on the page.
   Phone: an 81px bar, a 60px logo, a bare terracotta menu icon. */
.site-header { background: var(--paper); position: relative; z-index: 40; }
.site-header .container { position: relative; height: 140px; display: flex; align-items: center; justify-content: center; }
.brand { position: absolute; left: calc(var(--gutter) + 34px); top: 20px; display: block; line-height: 0; }
.brand img { width: 100px; height: 100px; }
.nav { display: flex; align-items: center; margin-left: 60px; } /* live centers the menu 30px right of the page center */
.nav a {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 15px;
  padding: 17.5px 29px;
  color: var(--deep-green);
  text-decoration: none;
  transition: color .3s ease;
}
.nav a:hover { color: var(--forest); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--terracotta);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.nav-close { display: none; }

@media (max-width: 1023px) {
  .site-header .container { height: 81px; justify-content: flex-end; }
  .brand { left: var(--gutter); top: 10px; }
  .brand img { width: 60px; height: 61px; }
  .nav-toggle { display: inline-flex; margin-right: -12px; }
  /* Full-screen menu that fades in, like the live site's. */
  .nav {
    margin-left: 0;
    position: fixed; inset: 0; z-index: 50;
    background: var(--paper);
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    padding: 90px 0 0 41px;
    opacity: 0; visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
  }
  .site-header.nav-open .nav { opacity: 1; visibility: visible; transition: opacity .35s ease; }
  .nav a { font-size: 16px; line-height: 16px; padding: 27px 20px; }
  .nav-close {
    display: inline-flex; position: absolute; top: 20px; right: 16px;
    width: 44px; height: 44px; align-items: center; justify-content: center;
    background: transparent; border: 0; color: var(--terracotta); cursor: pointer;
  }
  .nav-close svg { width: 20px; height: 20px; fill: currentColor; }
}

/* ---------- Hero ----------
   Live: cream band with the photo at 30% held still while the page scrolls,
   80px padding, a 557px text column, Italiana 48/48 headline, Inter 18/23.4
   copy, and the two buttons stacked. Phone: everything centered, 35px headline. */
.hero {
  position: relative;
  min-height: 569px;
  display: flex;
  align-items: center;
  background-color: var(--cream);
  --hero-img: none;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: .3;
}
/* iPhone ignores fixed backgrounds and blows them up; the live site scrolls them there too. */
@supports (-webkit-touch-callout: inherit) { .hero::before { background-attachment: scroll; } }
.hero > .container { position: relative; z-index: 1; padding-block: 80px; }
.hero-copy { max-width: 557px; }
.hero h1 { color: var(--forest); line-height: 48px; }
.hero-copy p { color: #0d0d0d; font-size: 18px; line-height: 23.4px; }
.hero-copy p:first-of-type { margin-top: 15px; }
.hero-copy p + p { margin-top: 23.4px; }
.hero .btn-row { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 30px; }
@media (max-width: 767px) {
  .hero { min-height: 0; }
  .hero > .container { padding-block: 40px; }
  .hero-copy { max-width: none; text-align: center; }
  .hero h1 { font-size: 35px; line-height: 35px; font-weight: 500; }
  .hero-copy p { font-size: 16px; line-height: 20.8px; }
  .hero-copy p + p { margin-top: 20.8px; }
  .hero .btn-row { align-items: center; margin-top: 30px; }
  .hero .btn { font-size: 16px; padding: 10px; }
}

/* ---------- Sections ---------- */
.section { padding-block: 80px; }
.section p, .section li { font-size: 18px; line-height: 23.4px; }
@media (max-width: 767px) {
  .section { padding-block: 40px; }
  .section p, .section li { font-size: 16px; line-height: 20.8px; }
}
.section--offwhite { background: var(--offwhite); }
.section--cream { background: var(--cream); }
.section--charcoal { background: var(--charcoal); color: #fff; }
.section--ink { background: var(--ink-navy); color: #fff; }
.section--charcoal a:not(.btn), .section--ink a:not(.btn) { color: #fff; }
.section--photo { background-size: cover; background-position: center; position: relative; color: #fff; }
.section--photo > .container { position: relative; z-index: 1; }
.section--photo { background-color: var(--ink-navy); background-image: none !important; }
.section--photo::before { content: ''; position: absolute; inset: 0; background-image: var(--photo); background-size: cover; background-position: center; background-attachment: fixed; opacity: .3; }
@supports (-webkit-touch-callout: inherit) { .section--photo::before { background-attachment: scroll; } }

/* Heading colors, measured per-section on the live site. Applied explicitly with a
   utility class rather than inferred from the band, because the live site does not
   use one colour per background (e.g. two different greens both sit on #f9f9f9). */
.h-sage   { color: var(--sage) !important; }      /* #8aa699 — intro, projects, services, FAQ */
.h-forest { color: var(--forest) !important; }    /* #567360 — hero, why choose us, service areas */
.h-deep   { color: var(--deep-green) !important; }/* #274034 — how it works, testimonials */
.h-tan    { color: #d79f70 !important; }          /* contact us */
.eyebrow  { color: #5a7764; }
.section--charcoal .eyebrow, .section--ink .eyebrow, .section--photo .eyebrow { color: #fff; font-weight: 500; font-size: 1.125rem; }

.section-head { max-width: 52rem; margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--space-2); }
.section-head--left { margin-inline: 0; text-align: left; }

/* Two column: copy + image */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 50px; align-items: center; }
@media (min-width: 768px) { .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; } }

/* dash bullet list, matches the live "- item" rendering */
.dash-list { list-style: none; padding: 0; margin-top: var(--space-2); }
.dash-list li { padding-left: 1.1rem; position: relative; }
.dash-list li::before { content: '-'; position: absolute; left: 0; font-weight: 700; }

/* ---------- Numbered cards (Process, Why Choose Us) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.cards--two { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card {
  background: var(--paper);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.card p { margin-top: var(--space-1); }
.card--num { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); align-items: start; }
.card--stack { text-align: center; }
.card--stack .step-num { margin: 0 auto var(--space-2); }
.step-num {
  width: 76px; height: 76px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #0d0d0d;
  color: var(--cream);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 2.25rem;
  line-height: 1;
}

/* ---------- Services: outlined boxes over a dark photo ---------- */
.services { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 900px) { .services { grid-template-columns: 1fr 1.4fr; gap: var(--space-5); align-items: start; } }
.service-boxes { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 700px) { .service-boxes { grid-template-columns: 1fr 1fr; } }
.service-box {
  border: 1px solid rgba(255,255,255,.85);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  color: #fff;
  font-size: 1.125rem;
  background: transparent;
}

/* ---------- Projects carousel ---------- */
.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--space-2);
  margin-top: var(--space-4);
}
@media (min-width: 700px) { .carousel { grid-auto-columns: 46%; } }
@media (min-width: 1100px) { .carousel { grid-auto-columns: 31%; } }
.carousel > * { scroll-snap-align: center; }
.carousel img { border-radius: var(--radius); width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Cities ---------- */
.cities { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); list-style: none; padding: 0; margin-top: var(--space-3); justify-content: center; }
.cities li { background: var(--paper); border: 1px solid rgba(0,0,0,.10); border-radius: var(--radius); padding: .4rem .9rem; }

/* ---------- FAQ ---------- */
.faq { max-width: 52rem; margin: var(--space-4) auto 0; }
.faq details { border-bottom: 1px solid rgba(0,0,0,.12); padding: var(--space-2) 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.0625rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: var(--terracotta); font-weight: 700; }
.faq details[open] summary::after { content: '\2013'; }
.faq p { margin-top: var(--space-1); }

/* ---------- Forms ---------- */
.form-card { background: var(--paper); border-radius: var(--radius); padding: var(--space-4); color: var(--ink-navy); }
.form-title { font-family: var(--font-body); font-weight: 700; letter-spacing: .5px; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); }
@media (min-width: 700px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-grid .span-2 { grid-column: 1 / -1; }

label { display: block; font-weight: 600; font-size: .95rem; }
label .req, .fieldset-label .req { color: var(--terracotta); }
.fieldset-label { display: block; font-weight: 600; font-size: .95rem; }
input[type=text], input[type=email], input[type=tel], select, textarea {
  width: 100%;
  margin-top: .35rem;
  padding: .7rem .8rem;
  min-height: 44px;
  font: inherit;
  color: var(--ink-navy);
  background: var(--paper);
  border: 1px solid rgba(0,0,0,.22);
  border-radius: var(--radius);
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-navy) 50%), linear-gradient(135deg, var(--ink-navy) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.4rem; }
textarea { min-height: 8rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 1px; border-color: var(--terracotta); }
.help { font-size: .85rem; color: #5b5b5b; margin-top: .25rem; font-weight: 400; }
.field-error { display: block; color: var(--terracotta); font-size: .85rem; margin-top: .25rem; font-weight: 600; }

.choice-row { display: flex; gap: var(--space-3); margin-top: .5rem; }
.choice { display: inline-flex; align-items: center; gap: .45rem; font-weight: 400; }
.choice input { width: auto; min-height: 0; margin: 0; }

/* Honeypot: off-screen, never display:none (bots skip hidden inputs) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

#form-status { margin-top: var(--space-2); font-weight: 600; }

/* ---------- Footer ----------
   Live: light #f9f9f9, logo and blurb on the left, a stacked Fraunces menu and
   color social icons on the right, a thin rule, then the legal line. */
.site-footer { background: var(--offwhite); color: #111720; padding-block: 60px; }
.site-footer .container { padding-inline: var(--gutter); }
.footer-main { display: grid; grid-template-columns: minmax(0, 614px) auto; justify-content: space-between; gap: 40px; align-items: start; }
.footer-logo img { width: 90px; height: 91px; }
.footer-about p { font-size: 16px; line-height: 20.8px; margin-top: 18px; }
.footer-call a { color: #469e3f; font-weight: 700; text-decoration: none; }
.footer-side { display: grid; justify-items: center; gap: 28px; padding-right: 178px; }
.footer-links { display: grid; justify-items: center; gap: 12px; }
.footer-links a { font-family: var(--font-head); font-size: 16px; line-height: 23px; font-weight: 600; color: #000; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.social { display: flex; gap: 22px; }
.social a { display: block; line-height: 0; }
.social svg { width: 40px; height: 40px; }
.social-fb svg { fill: #1877f2; }
.social-ig svg { fill: #c13584; }
.footer-legal { margin-top: 40px; padding-top: 30px; border-top: 1px solid #262a36; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 16px; color: #070e1a; }
.footer-legal a { color: inherit; font-weight: 700; text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .site-footer .container { padding-inline: var(--gutter); }
  .footer-main { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .footer-side { padding-right: 0; }
  .footer-logo { display: block; width: fit-content; margin-inline: auto; }
  .footer-legal { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 20.8px; color: #0d0d0d; }
}
.area-map { max-width: 34rem; margin: var(--space-3) auto 0; }
.area-map img { border-radius: var(--radius); width: 100%; height: auto; }

/* ---------- Scroll motion (mirrors animate.css fadeInUp / fadeIn) ---------- */
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: translateZ(0); } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }

/* Elements opt in with data-anim; JS adds .is-visible when they scroll into view.
   CRITICAL: content is only pre-hidden when the .js class is present, which an inline
   head script adds. If JS is off or reveal.js fails to load, .js is never set and
   everything stays visible — the page must never depend on a script to be readable. */
.reveal-ready [data-anim] { opacity: 0; }
.reveal-ready [data-anim].is-visible { animation-duration: var(--animate-duration); animation-fill-mode: both; }
.reveal-ready [data-anim="fadeInUp"].is-visible { animation-name: fadeInUp; }
.reveal-ready [data-anim="fadeIn"].is-visible   { animation-name: fadeIn; }

@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1 !important; }
  [data-anim].is-visible { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

#process h2 { font-family: 'Italiana', Georgia, serif; }
#process .card h3 { font-family: 'Poppins', sans-serif; font-size: 24px; font-weight: 600; color: #121b22; }
.faq summary { font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700; }
.form-card label, .fieldset-label { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: #2b1810; }
fieldset { min-width: 0; }
.skip-link:focus { position: fixed; top: .5rem; left: .5rem; width: auto; height: auto; clip: auto; overflow: visible; z-index: 100; background: #fff; color: #274034; padding: 1rem; }
.carousel figure { margin: 0; min-width: 0; }

/* ---------- Intro ("Flooring That Looks Great") ----------
   Live: Fraunces 46/500 heading, 41px to the copy, light grey #d1d1d1 text,
   inline bold dashes, square-cornered photo. Phone: centered 35px heading. */
.btn-row .btn + .btn { margin: 0; }
@media (max-width: 767px) { .btn { font-size: 16px; line-height: normal; padding: 10px; } }
#about h2 { font-size: 46px; line-height: 46px; font-weight: 500; max-width: 555px; margin-bottom: 41px; }
#about p, #about li { color: #d1d1d1; }
#about p + p { margin-top: 23.4px; }
#about p + .dash-list { margin-top: 0; }
#about .dash-list li { padding-left: 0; }
#about .dash-list li::before { content: '- '; position: static; font-weight: 700; color: #fff; }
#about .btn-row { margin-top: 32px; }
@media (max-width: 767px) {
  #about h2 { font-size: 35px; line-height: 35px; font-weight: 600; text-align: center; max-width: none; margin-bottom: 40px; }
  #about .btn-row { justify-content: center; }
  #about p, #about .dash-list { padding-inline: 10px; }
}

/* ---------- Our Process ----------
   Live: 24px eyebrow, intro on two lines, four transparent cards with a thin
   border and square corners, 40px apart, each led by an 80px number badge image. */
#process .section-head { max-width: 1040px; }
#process .eyebrow { font-size: 24px; line-height: 31.2px; color: #5a7764; }
#process h2 { margin-top: 6px; }
#process .section-head p:not(.eyebrow) { margin-top: 18px; }
#process .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin-top: 60px; }
#process .card { background: transparent; border: 1px solid #dddfe4; border-radius: 0; padding: 20px 10px 30px; min-height: 432px; }
#process .step-badge { width: 80px; height: 80px; margin: 0 auto; }
#process .card h3 { margin-top: 24px; line-height: 31.2px; }
#process .card p { font-size: 16px; line-height: 20.8px; margin-top: 8px; }
#process .btn-row { margin-top: 40px; }
#process .btn { border-width: 2px; }
@media (max-width: 1023px) and (min-width: 768px) { #process .cards { gap: 20px; } }
@media (max-width: 767px) {
  #process .cards { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 40px; }
  #process .card { min-height: 0; }
  #process .section-head p:not(.eyebrow) { padding-inline: 20px; }
}

/* ---------- Our Services ----------
   Live: the photo at 30% over ink-navy, held still while scrolling; a 350px
   copy column with a 40px heading; two independent columns of 350px boxes,
   Inter 24/31.2, thin light border, square corners, 20px apart. */
#services .services { grid-template-columns: 350px 350px 350px; gap: 60px; align-items: start; }
#services h2 { font-size: 40px; line-height: 40px; }
#services .services > div:first-child p:first-of-type { margin-top: 11px; }
#services .services > div:first-child p + p { margin-top: 23.4px; }
#services .service-boxes { display: contents; }
#services .svc-col { display: flex; flex-direction: column; gap: 20px; }
#services .service-box { border: 1px solid #eaeaea; border-radius: 0; padding: 24px 0 24px 24px; font-size: 24px; line-height: 31.2px; }
@media (max-width: 1209px) and (min-width: 768px) {
  #services .services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  #services .service-box { min-height: 112px; padding: 20px 0 20px 20px; }
}
@media (max-width: 767px) {
  #services .services { grid-template-columns: minmax(0, 1fr); gap: 30px; text-align: center; }
  #services .services > div:first-child p { padding-inline: 30px; }
  #services h2 { font-size: 38px; line-height: 38px; }
  #services .svc-col { gap: 30px; }
  #services .service-box { padding: 24px 12px; font-size: 18px; line-height: 23.4px; }
}

/* ---------- Testimonials ----------
   Live: 24px subhead in #5a7764, an 18px intro, then a white panel holding a
   title line with the 5.00 score, a summary card, review cards three at a time
   and numbered pages. */
#testimonials .section-head { max-width: 1040px; }
#testimonials .section-head p { color: #000; }
#testimonials .section-head h2 + p { font-size: 24px; line-height: 31.2px; color: #5a7764; margin-top: 10px; }
#testimonials .section-head p + p { margin-top: 40px; }
.reviews { max-width: 1128px; margin: 40px auto 0; background: #fff; border-radius: 12px; padding: 32px 20px 24px; }
.reviews-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 30px 22px; }
.reviews .reviews-title { font-size: 22px; line-height: 29px; font-weight: 700; color: #2d2d2d; }
.reviews-score { text-align: right; flex: none; }
.reviews-score span { display: block; font-size: 40px; line-height: 40px; font-weight: 700; color: #2d2d2d; }
.stars { display: inline-flex; gap: 1px; }
.stars svg { width: 17px; height: 17px; fill: #fbbc05; }
.reviews-summary { border-radius: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.12); padding: 22px 20px 40px; }
.reviews .reviews-summary p { font-size: 15px; line-height: 23px; color: #2d2d2d; }
.reviews .reviews-summary-label { display: flex; align-items: center; gap: 8px; color: #5b21d6 !important; font-weight: 600; margin-bottom: 14px; font-size: 15px; }
.reviews-summary-label svg { width: 22px; height: 22px; fill: #5b21d6; }
.review-list { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 22px; }
.is-paged .review-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.review { border-radius: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.12); padding: 20px 18px 18px; display: flex; flex-direction: column; gap: 14px; min-height: 196px; }
.review-top { display: flex; align-items: center; gap: 6px; }
.review-score { color: #fbbc05; font-weight: 700; font-size: 18px; }
.review time { margin-left: auto; font-size: 12px; color: #6b7280; }
.reviews .review-text { font-size: 13px; line-height: 22px; color: #2d2d2d; flex: 1; }
.is-paged .review:not(.is-open) .review-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: none; }
.review-more { align-self: flex-start; margin-top: -10px; background: none; border: 0; padding: 0; color: #2563eb; font: inherit; font-size: 13px; cursor: pointer; }
.review-by { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: #9ca3af; color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.review-name { font-size: 13px; color: #4b5563; }
.g-icon { width: 18px; height: 18px; margin-left: auto; }
.review-pages { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 22px; }
.review-pages button { background: none; border: 0; min-width: 28px; height: 28px; font: inherit; font-size: 13px; color: #374151; cursor: pointer; border-radius: 4px; }
.review-pages button[aria-current="page"] { font-weight: 700; font-size: 16px; color: #111; }
.review-pages button:disabled { opacity: .35; cursor: default; }
.review-pages button:focus-visible, .review-more:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
@media (max-width: 767px) {
  .reviews { padding: 20px 12px; }
  .reviews-head { flex-direction: column; align-items: flex-start; padding: 0 6px 16px; }
  .reviews .reviews-title { font-size: 18px; line-height: 24px; }
  .reviews-score { text-align: left; }
  .is-paged .review-list { grid-template-columns: minmax(0, 1fr); }
  #testimonials .section-head h2 + p { font-size: 24px; line-height: 31.2px; }
}
.review[hidden] { display: none; }
.review .stars svg { width: 19px; height: 19px; }
.reviews-score .stars svg { width: 19px; height: 19px; }
.stars { gap: 0; }

/* ---------- Contact and the estimate form ----------
   Live: photo at 30% over ink-navy; tan bold phone number; an 850px white card
   with 20px corners; centered title and Poppins 300 subtitle; Poppins labels
   with dark asterisks; light-bordered 40px fields with Poppins text. */
#contact .section-head p { color: #fff; }
#contact .contact-phone { color: #d79f70; font-weight: 700; text-decoration: none; }
#contact .section-head { margin-bottom: 31px; }
.form-card { max-width: 850px; margin-inline: auto; border-radius: 20px; padding: 22px 20px 40px; }
.form-card .form-title { text-align: center; font-size: 22px; line-height: 28px; font-weight: 700; color: #274034; letter-spacing: 0; }
.form-card .form-sub { text-align: center; font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 18px; line-height: 27px; color: #3f5648; margin-top: 12px; }
.form-card .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 20px; margin-top: 24px; }
.form-card fieldset { border: 0; padding: 0; margin: 0; }
.form-card label, .form-card .fieldset-label { font-size: 15px; line-height: 23px; }
.form-card .req { color: #2b1810; }
.form-card input[type=text], .form-card input[type=email], .form-card input[type=tel], .form-card select, .form-card textarea {
  margin-top: 8px; min-height: 40.5px; padding: 8px 12px;
  font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 400; color: #567360;
  border: 1px solid rgba(172,172,172,.33); border-radius: 3px; background-color: #fff;
}
.form-card ::placeholder { color: #5b5b5b; opacity: .9; }
.form-card textarea { min-height: 70px; }
.form-card select { padding-right: 2.2rem; background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; }
.form-card .help { display: block; font-family: 'Poppins', sans-serif; font-size: 14px; color: #3f3f3f; margin-top: 6px; font-weight: 400; }
.input-icon { position: relative; display: block; }
.input-icon svg { position: absolute; left: 10px; top: calc(50% + 4px); transform: translateY(-50%); width: 14px; height: 14px; fill: #5b5b5b; pointer-events: none; }
.input-icon input { padding-left: 30px !important; }
.choice-box { margin-top: 8px; min-height: 40.5px; align-items: center; padding: 0 12px; border: 1px solid rgba(172,172,172,.33); border-radius: 3px; gap: 18px; }
.choice-stack { flex-direction: column; gap: 6px; margin-top: 8px; }
.form-card .choice { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; color: #2b1810; }
.grid-gap { display: block; }
.form-card .btn-row { margin-top: 30px; }
@media (max-width: 767px) {
  .form-card { padding: 20px 20px 40px; }
  /* Live keeps State, City and Postal Code at half width on phones. */
  .form-card .form-grid { gap: 22px 15px; }
  .form-card .form-grid > * { grid-column: 1 / -1; }
  .form-card .form-grid > .pair { grid-column: auto; }
  .form-card .form-title { line-height: 33px; }
  .form-card .btn-row .btn { width: 100%; font-size: 15px; font-weight: 700; line-height: 27px; padding: 12px 20px; border: 2px solid #eae8e4; color: #f2f2f2; }
  .grid-gap { display: none; }
}

/* ---------- Why Choose Us ----------
   Live: wide intro, a 2x2 of transparent cards with a thin border and square
   corners, the same 80px badge images, Inter 24/900 black titles. */
#why .section-head { max-width: 1040px; }
#why .section-head p { margin-top: 8px; color: #000; }
#why .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 35px 40px; margin: 60px 9px 0; }
#why .card { background: transparent; border: 1px solid #dddfe4; border-radius: 0; padding: 25px 24px 30px; gap: 19px; min-height: 180px; }
#why .step-badge { width: 80px; height: 80px; }
#why .card h3 { font-size: 24px; line-height: 31.2px; font-weight: 900; color: #000; }
#why .card p { font-size: 16px; line-height: 20.8px; color: #000; margin-top: 2px; }
@media (max-width: 767px) {
  #why .cards { grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 40px 0 0; }
  #why .card { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; padding-inline: 15px; }
  #why .section-head p { padding-inline: 20px; }
}

/* ---------- Our Projects ----------
   Live: a 1130x1000 photo, one at a time, with white arrows inside the photo,
   white/black dots along the bottom and the italic caption underneath. Phones
   and tablets get a separate portrait set. */
#projects .section-head { max-width: 1140px; }
#projects .carousel { display: none; }
.slider { position: relative; overflow: hidden; max-width: 1130px; margin: 50px 0 0; }
.slider-track { display: flex; }
.slider.is-ready .slider-track { transition: transform .3s ease; }
.slider:not(.is-ready) .slider-track { overflow-x: auto; scroll-snap-type: x mandatory; }
.slide { flex: 0 0 100%; scroll-snap-align: start; }
.slide img { width: 100%; aspect-ratio: 1130 / 1000; object-fit: cover; border-radius: 0; }
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: none; border: 0; padding: 0; color: #fff; cursor: pointer; display: none; }
.slider-arrow svg { width: 40px; height: 40px; fill: currentColor; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.slider-prev { left: 10px; } .slider-next { right: 10px; }
.slider-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: none; justify-content: center; gap: 6px; }
.slider-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: #000; cursor: pointer; }
.slider-dots button[aria-current="true"] { background: #fff; }
.slider.is-ready .slider-arrow { display: block; }
.slider.is-ready .slider-dots { display: flex; }
.slider-arrow:focus-visible, .slider-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.slider--mobile { display: none; max-width: 651px; }
.slider--mobile .slide img { aspect-ratio: 331 / 500; }
@media (max-width: 767px) { .slider--desktop { display: none; } .slider--mobile { display: block; } }
.projects-caption { text-align: center; max-width: 1040px; margin: 14px auto 0; }

/* ---------- Call to action band ---------- */
.cta-band { padding-block: 80px; color: #fff; }
.cta-row { display: flex; align-items: center; gap: 30px; padding-left: calc(var(--gutter) + 35px); }
.cta-row img { width: 80px; height: 62px; flex: none; }
.cta-row p { flex: 1; font-size: 18px; line-height: 23.4px; }
.cta-row .btn { font-size: 18px; flex: none; }
@media (max-width: 767px) {
  .cta-band { padding-block: 40px; }
  .cta-row { flex-direction: column; text-align: center; gap: 20px; padding-inline: var(--gutter); }
  .cta-row .btn { font-size: 16px; padding: 10px; border-width: 2px; }
}

/* ---------- Service Areas ----------
   Live: green intro text, a bold "We regularly work in:" line, the map on the
   left and two columns of rounded city pills on the right, filled top to
   bottom. The pill text is darker than live's #797a8c, which fails contrast. */
#areas .section-head { max-width: 980px; }
#areas .section-head p { color: #5a7764; line-height: 27px; margin: 18px auto 0; max-width: 964px; }
#areas .section-head .areas-lead { color: #333c36; font-weight: 700; margin-top: 30px; }
.areas { display: grid; grid-template-columns: 429px minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 30px; }
.area-map { display: block; max-width: none; margin: 0; }
.area-map img { width: 429px; height: 390px; object-fit: cover; border-radius: 0; }
#areas .cities { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, auto); grid-template-columns: repeat(2, minmax(0, 326px)); gap: 22px 20px; justify-content: end; margin: 0; padding: 0; list-style: none; }
#areas .cities li { display: flex; align-items: center; gap: 4px; background: transparent; border: 1px solid #000; border-radius: 75px; padding: 15px 20px; font-size: 18px; line-height: 23.4px; color: #5e5f70; }
#areas .cities svg { width: 16px; height: 16px; fill: #111; flex: none; }
.areas-note { text-align: center; color: #5a7764; margin-top: 50px; }
@media (max-width: 1023px) {
  .areas { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  #areas .cities { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; justify-content: stretch; }
}
@media (max-width: 767px) {
  .area-map img { width: 100%; height: auto; }
  #areas .section-head p { line-height: 24px; }
  #areas .cities { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #areas .cities li { justify-content: center; padding: 15px 20px; font-size: 16px; line-height: 20.8px; }
  .areas-note { margin: 30px -10px 0; line-height: 24px; }
}

/* ---------- FAQ ----------
   Live: green rounded bars with Poppins 18/700 cream questions and a caret;
   an open item turns deep green and shows the answer on a light panel. */
#faq .eyebrow { font-size: 18px; font-weight: 500; line-height: 36px; letter-spacing: 2px; color: #fff; }
#faq .section-head p:not(.eyebrow) { margin-top: 20px; }
#faq .section-head { max-width: 960px; }
.faq { max-width: 932px; margin: 42px auto 0; display: grid; gap: 10px; }
.faq details { border: 0; padding: 0; }
.faq summary { background: #567360; color: #f2efe9; border-radius: 10px; padding: 15px; font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700; line-height: 27px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.faq summary::after { content: ''; float: none; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #f2efe9; flex: none; }
.faq details[open] summary { background: #274034; border-radius: 10px 10px 0 0; }
.faq details[open] summary::after { content: ''; border-top: 0; border-bottom: 6px solid #f2efe9; }
.faq details p { background: #f9f9f9; color: #000; font-family: 'Poppins', sans-serif; font-size: 16px; line-height: 24px; padding: 15px; margin: 0; border-radius: 0 0 10px 10px; }
.faq summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 767px) {
  #faq .section-head p:not(.eyebrow) { line-height: 24px; }
  .faq summary { font-size: 15px; line-height: 22px; }
  .faq details p { font-size: 14px; line-height: 21px; }
}

/* ---------- Form pages (remote estimate, client intake, careers) ----------
   Live: a white 140px band with the 100px logo centered, then a light grey
   section holding one white card. No nav, no footer. */
.shell-band { background: #fff; height: 140px; display: flex; justify-content: center; align-items: flex-start; padding-top: 20px; }
.shell-band img { width: 100px; height: 100px; display: block; }
.shell-main { background: #f2f1f1; padding: 60px 0 118px; min-height: calc(100vh - 140px); }
.shell-main .form-card { margin-top: 40px; }
.form-card--compact { max-width: 650px; margin: 20px auto 0; padding: 30px 60px; border-radius: 20px; }
.shell-main .form-card--compact { margin-top: 20px; }
.form-card--compact .form-title { font-family: 'Inter', sans-serif; font-size: 20px; line-height: 30px; font-weight: 700; color: #314b2b; }
.form-card--compact .form-intro { text-align: center; font-family: 'Inter', sans-serif; font-weight: 300; font-size: 14px; line-height: 21px; color: #3f5648; margin-top: 12px; }
.form-card--compact .form-grid { gap: 12px 26px; margin-top: 18px; }
.form-card--compact label, .form-card--compact .fieldset-label { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 25.2px; font-weight: 600; color: #2b1810; }
.form-card--compact input[type=text], .form-card--compact input[type=email], .form-card--compact input[type=tel], .form-card--compact input[type=number], .form-card--compact select, .form-card--compact textarea {
  font-family: 'Inter', sans-serif; font-size: 13px; line-height: 19.5px; color: #274034; min-height: 38px; padding: 8px 15px; border-radius: 5px; margin-top: 8px;
  border: 1px solid rgba(172,172,172,.33); background-color: #fff; width: 100%;
}
.form-card--compact select { min-height: 49px; background-image: linear-gradient(45deg, transparent 50%, #8a8a8a 50%), linear-gradient(135deg, #8a8a8a 50%, transparent 50%); background-size: 5px 5px, 5px 5px; }
.form-card--compact textarea { min-height: 108px; }
.form-card--compact .choice, .form-card--compact .help { font-family: 'Inter', sans-serif; font-size: 14px; }
.form-card--compact .form-subhead { grid-column: 1 / -1; letter-spacing: 0; text-transform: none; font-family: 'Inter', sans-serif; font-size: 18px; line-height: 23.4px; font-weight: 900; color: #314b2b; margin: 18px 0 0; }
.form-card--compact .form-subhead:first-child { margin-top: 10px; }
.form-card--compact .consent { display: flex; gap: 14px; align-items: flex-start; font-style: italic; font-weight: 400; color: #3f4a4f; line-height: 20px; }
.form-card--compact .consent input { margin-top: 3px; flex: none; }
.choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 18px; margin-top: 8px; padding: 10px 12px; border: 1px solid rgba(172,172,172,.33); border-radius: 5px; }
/* Live's form SUBMIT: 485px on the estimate form, 317px on the narrow cards. */
.form-card .btn-row .btn { width: 485px; max-width: 100%; font-size: 15px; font-weight: 700; line-height: 27px; padding: 12px 20px; color: #f2f2f2; background: #9b5236; border: 2px solid #eae8e4; border-radius: 8px; box-shadow: 1px 2px 5px 2px rgba(0,0,0,.21); }
.form-card--compact .btn-row .btn { width: 317px; border-color: #f2f2f2; }
@media (max-width: 767px) {
  .shell-main { padding: 20px 0 118px; }
  .shell-main .form-card { margin-top: 40px; }
  .shell-main .form-card--compact, .form-card--compact { margin: 20px 20px 0; padding: 40px 40px 60px; }
  .form-card--compact .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-card--compact .form-grid > * { grid-column: 1 / -1; }
  .form-card--compact .form-grid > .pair { grid-column: auto; }
  .form-card--compact .form-grid:has(> .pair) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 15px; }
  .form-card--compact .btn-row .btn { width: 100%; }
  .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Thank-you page ----------
   Live: logo over a warm gradient, a two-column hero with the photo on the
   right, then a "WHY DFC?" section with four white cards. */
.ty-hero { background: linear-gradient(135deg, #faf6f0 0, #fffdf9 100%); padding: 30px 24px 60px; }
.ty-logo { display: block; width: 100px; height: 100px; margin: 0 auto; }
.ty-hero-row { max-width: 1160px; margin: 50px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) 431px; gap: 40px; align-items: start; }
.ty-hero h1 { font-family: 'Italiana', serif; font-size: 35px; line-height: 45.5px; font-weight: 600; letter-spacing: 1.68px; text-transform: uppercase; color: #567360; margin-top: -7px; }
.ty-thanks { font-family: 'Inter', sans-serif; font-size: 24px; line-height: 26.4px; font-weight: 600; color: #2b1810; margin-top: 17px; }
.ty-follow { font-family: 'Inter', sans-serif; font-size: 20px; line-height: 30px; color: #36433d; margin-top: 15px; }
.ty-home { display: inline-block; margin-top: 48px; padding: 14px 24px; background: #9b5236; color: #fff; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; text-decoration: none; border-radius: 5px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.ty-home:hover { background: #8a4930; }
.ty-photo { width: 431px; height: 288px; object-fit: cover; border-radius: 5px; display: block; }
.ty-why { background: #faf6ef; padding: 29px 24px 96px; text-align: center; }
.ty-eyebrow { font-family: 'IBM Plex Serif', serif; font-size: 22px; line-height: 28.6px; font-weight: 600; letter-spacing: 1.92px; text-transform: uppercase; color: #274034; }
.ty-why h2 { letter-spacing: 0; text-transform: none; font-family: 'Italiana', serif; font-size: 44px; line-height: 52.8px; font-weight: 700; color: #567360; max-width: 1080px; margin: 13px auto 0; text-wrap: balance; }
.ty-why .ty-sub { font-family: 'Inter', sans-serif; font-size: 18px; line-height: 28.8px; color: #494f49; margin-top: 17px; }
.ty-why .ty-more { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 27.2px; color: #545b55; margin-top: 32px; }
.ty-cards { max-width: 1144px; margin: 60px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 16px; text-align: center; }
.ty-card { background: #fff; border-radius: 15px; padding: 24px; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.ty-card svg { width: 32px; height: 32px; fill: #469e3f; display: block; margin: 0 auto; }
.ty-card h3 { letter-spacing: 0; text-transform: none; font-family: 'Inter', sans-serif; font-size: 18px; line-height: 23.4px; font-weight: 700; color: #1f2a24; margin-top: 24px; }
.ty-card p { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 24px; color: #4e544e; margin-top: 12px; }
@media (max-width: 900px) {
  .ty-hero { padding: 10px 16px 72px; }
  .ty-logo { width: 130px; height: 130px; margin: 30px 0 0 20px; }
  .ty-hero-row { grid-template-columns: minmax(0, 1fr); margin-top: 43px; padding-inline: 10px; gap: 56px; }
  .ty-thanks { font-size: 36px; line-height: 39.6px; margin-top: 12px; }
  .ty-follow { font-size: 16px; line-height: 24px; margin-top: 10px; }
  .ty-home { font-size: 18px; padding: 14px 29px; margin-top: 50px; }
  .ty-photo { width: 100%; max-width: 431px; height: auto; aspect-ratio: 3 / 2; margin-inline: 10px; }
  .ty-why { background: #fff; padding: 64px 16px; }
  .ty-why h2 { font-size: 28px; line-height: 33.6px; margin-top: 9px; }
  .ty-why .ty-sub { font-size: 16px; line-height: 25.6px; padding-inline: 10px; }
  .ty-why .ty-more { font-size: 15px; line-height: 25.5px; margin-top: 16px; padding-inline: 10px; }
  .ty-cards { grid-template-columns: minmax(0, 1fr); gap: 17px; margin-top: 50px; padding-inline: 10px; }
  .ty-card { padding: 20px 16px; }
  .ty-card h3 { margin-top: 24px; }
  .ty-card p { margin-top: 9px; }
}

/* ---------- Linktree (/linktree/sm) ----------
   Live: one 386px column on a light grey page: logo, a two-line title, the
   cities, two orange estimate buttons, then outline and plain buttons. */
.lt-page { background: #eae8e4; min-height: 100vh; padding-top: 20px; }
.lt-col { max-width: 386px; margin: 0 auto; background: #f5f5f5; padding: 15px 10px 24px; text-align: center; min-height: calc(100vh - 20px); }
.lt-logo img { width: 150px; height: 150px; display: block; margin: 0 auto; }
.lt-title { text-transform: none; letter-spacing: 0; font-family: 'Montserrat', sans-serif; font-size: 18px; line-height: 23.4px; font-weight: 700; color: #35584f; max-width: 300px; margin: 11px auto 0; }
.lt-cities { font-family: 'Montserrat', sans-serif; font-size: 17px; line-height: 22.1px; font-weight: 500; color: #375c53; margin-top: 13px; }
.lt-links { display: grid; justify-items: center; gap: 20px; margin-top: 21px; }
.lt-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 290px; min-height: 63px; padding: 15px 20px; border-radius: 10px; border: 3px solid #4a6e63; background: #fcfbfd; color: #4a6e63; font-family: 'Poppins', sans-serif; font-size: 18px; line-height: 27px; text-decoration: none; }
.lt-btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.lt-btn--primary { flex-direction: column; gap: 6px; width: 250px; min-height: 121px; padding: 15px 18px; border-radius: 15px; border-color: #a5532f; background: #c46a39; color: #eae8e4; font-size: 16px; font-weight: 600; line-height: 25px; box-shadow: 2px 2px 5px 1px rgba(112,112,112,.31); }
.lt-btn--plain { border-radius: 15px; border-color: #d9d6d0; background: #fff; color: #2a2a2a; padding: 15px 10px; }
.lt-btn--stack { flex-direction: column; gap: 4px; }
.lt-btn--soft { border-radius: 15px; border-color: #d9d6d0; background: #eae8e4; color: #2a2a2a; padding: 15px 10px; }
.lt-btn:hover { filter: brightness(.97); }
.lt-btn:focus-visible { outline: 3px solid #274034; outline-offset: 3px; }
.lt-social { display: flex; justify-content: center; margin-top: 20px; }
.lt-social a { display: grid; place-items: center; width: 52px; height: 52px; }
.lt-social svg { width: 20px; height: 20px; }
.lt-legal { font-family: 'Poppins', sans-serif; font-size: 15px; line-height: 19.5px; color: #2a2a2a; margin-top: 19px; }
.lt-legal strong { font-weight: 500; display: block; }
@media (max-width: 420px) {
  .lt-page { padding-top: 0; }
  .lt-col { max-width: none; padding: 10px 10px 20px; min-height: 100vh; }
}

/* ---------- Chat bubble (/, /thank-you, /linktree/sm) ----------
   Live: a 58px terracotta bubble bottom right that opens a 340px panel with a
   brown header. Ours has no AI: message, then name and phone, then a lead. */
.chat-bubble { position: fixed; right: 20px; bottom: 20px; z-index: 900; width: 58px; height: 58px; border-radius: 50%; border: 0; background: #9b5236; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.chat-bubble svg { width: 28px; height: 28px; fill: currentColor; }
.chat-bubble:focus-visible, .chat-min:focus-visible, .chat-send:focus-visible { outline: 3px solid #274034; outline-offset: 2px; }
.chat-panel { position: fixed; right: 20px; bottom: 90px; z-index: 900; width: 340px; height: min(625px, calc(100vh - 120px)); display: flex; flex-direction: column; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 34px rgba(0,0,0,.24); font-family: 'Inter', sans-serif; }
.chat-panel[hidden] { display: none; }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 14px; background: linear-gradient(90deg, #7a2f14, #9b5236); color: #fff; font-size: 16px; font-weight: 500; }
.chat-min { width: 32px; height: 32px; border: 0; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; border-radius: 6px; }
.chat-min svg { width: 22px; height: 22px; fill: currentColor; }
.chat-log { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 86%; padding: 10px 14px; border-radius: 10px; font-size: 14px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg--in { align-self: flex-start; background: #f2f4f7; color: #111828; }
.chat-msg--out { align-self: flex-end; background: #2b1810; color: #fff; }
.chat-msg--note { align-self: center; background: none; color: #667085; font-size: 13px; padding: 0; text-align: center; }
.chat-msg--error { background: #fdecea; color: #8a1c12; }
.chat-contact { align-self: stretch; display: grid; gap: 8px; background: #f2f4f7; border-radius: 10px; padding: 12px; }
.chat-contact label { display: grid; gap: 4px; font-size: 13px; font-weight: 500; color: #344054; }
.chat-contact input { font: inherit; font-size: 16px; font-weight: 400; padding: 8px 10px; border: 1px solid #d0d5dd; border-radius: 6px; background: #fff; color: #111828; }
.chat-contact button { margin-top: 2px; padding: 10px; border: 0; border-radius: 8px; background: #c9582d; color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.chat-contact button:disabled { opacity: .6; cursor: wait; }
.chat-error { color: #b42318; font-size: 13px; margin: 0; }
.chat-check:empty { display: none; }
.chat-compose { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid #eaecf0; }
.chat-compose[hidden] { display: none; }
.chat-compose textarea { flex: 1; min-height: 44px; max-height: 120px; resize: none; padding: 11px 12px; border: 1px solid #d0d5dd; border-radius: 8px; font: inherit; font-size: 16px; line-height: 20px; color: #111828; }
.chat-send { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #c9582d; color: #fff; display: grid; place-items: center; cursor: pointer; }
.chat-send svg { width: 20px; height: 20px; fill: currentColor; }
@media (max-width: 480px) {
  .chat-panel { left: 20px; right: 20px; width: auto; height: auto; top: 95px; bottom: 90px; }
}
@media print { .chat { display: none; } }

/* Photo and resume upload box. Measured from the live form: 1px dashed
   #d7d7d7, 12px corners, 20px padding, upload icon centered. */
.file-upload { margin-top: var(--space-2); min-width: 0; }
.form-grid .file-upload { margin-top: 0; }
.file-upload[hidden] { display: none; }
.file-upload .fieldset-label { margin-bottom: 8px; }
.form-card .file-drop { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; padding: 20px; border: 1px dashed #d7d7d7; border-radius: 12px; text-align: center; cursor: pointer; font: 400 13px/20px 'Poppins', sans-serif; color: #6e7d84; }
.form-card .file-drop:hover, .form-card .file-drop.is-over { border-color: var(--terracotta); background: #fbf8f5; }
.file-drop:focus-within { outline: 2px solid var(--terracotta); outline-offset: 1px; }
.file-drop__icon { color: #2b1810; }
.has-files .file-drop { padding: 12px; }
.has-files .file-drop__icon { height: 28px; }
.file-list { list-style: none; margin: 10px 0 0; padding: 0; }
.file-list:empty { display: none; }
.file-upload[data-uploads=photos] .file-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.file-thumb { position: relative; min-width: 0; }
.file-thumb__img { display: block; height: 76px; border-radius: 6px; overflow: hidden; background: var(--cream); }
.file-thumb__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.file-thumb__img.is-doc { display: grid; place-items: center; color: var(--deep-green, #2f4a3a); }
.file-thumb__img.is-doc svg { width: 26px; height: 26px; }
.file-thumb .file-remove { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(17, 23, 32, .75); color: #fff; font-size: 20px; line-height: 32px; cursor: pointer; }
.file-name { display: block; margin-top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 12px/16px 'Poppins', sans-serif; color: #567360; }
.file-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 2px 4px 2px 10px; border: 1px solid rgba(172, 172, 172, .33); border-radius: 6px; }
.file-row svg { flex: none; color: var(--deep-green); }
.file-row .file-name { flex: 1; margin: 0; font-size: 14px; line-height: 20px; color: #2b1810; }
.file-row .file-remove { min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--terracotta); font: 600 14px 'Poppins', sans-serif; cursor: pointer; }
.file-note { margin: 6px 0 0; font-size: 13px; color: var(--terracotta); }
.file-note:empty { display: none; }
.upload-progress { margin-top: var(--space-2); }
.upload-progress__text { margin: 0; font: 600 15px/23px 'Poppins', sans-serif; color: #2b1810; }
.upload-bar { height: 6px; margin-top: 8px; overflow: hidden; border-radius: 3px; background: #eae8e4; }
.upload-bar span { display: block; width: 0; height: 100%; background: var(--deep-green); }
@media (prefers-reduced-motion: no-preference) { .upload-bar span { transition: width .3s; } }
.upload-progress__note { margin: 8px 0 0; font: 400 13px/20px 'Poppins', sans-serif; color: #6e7d84; }
.upload-progress__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
/* The remote, intake and careers forms set their labels in Inter. */
.form-card--compact .file-drop, .form-card--compact .file-name, .form-card--compact .file-row .file-remove,
.form-card--compact .upload-progress__text, .form-card--compact .upload-progress__note { font-family: 'Inter', sans-serif; }

/* Booking page (/calendar-website-onsite-free-estimate): the visit details on
   the left, pick a time then the details form on the right. Approved as a
   redesign of GHL's calendar page on 2026-10-14. */
.bk-main { padding-inline: 16px; }
.bk-card { max-width: 1060px; margin: 0 auto; background: #fff; border-radius: 20px; box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06); display: grid; grid-template-columns: 330px minmax(0, 1fr); overflow: hidden; font-family: 'Inter', sans-serif; color: #101828; }
.bk-info { padding: 36px 32px; border-right: 1px solid #e3e5e8; background: #fbfaf8; display: grid; gap: 22px; align-content: start; }
.bk-eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--terracotta); }
.bk-title { margin: 6px 0 0; text-transform: none; letter-spacing: normal; font-family: 'Inter', sans-serif; font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--deep-green); text-wrap: balance; }
.bk-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bk-meta li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: #5b6472; }
.bk-meta svg { width: 18px; height: 18px; flex: none; color: #3f5648; }
.bk-picked { padding: 12px 14px; border-radius: 10px; background: #edf2ee; color: var(--deep-green); font-weight: 600; font-size: 14px; }
.bk-picked span { display: block; font-weight: 400; color: #3f5648; font-size: 13px; }
.bk-expect h2 { margin: 0 0 10px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #5b6472; }
.bk-expect ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: bk; }
.bk-expect li { counter-increment: bk; display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 14px; }
.bk-expect li::before { content: counter(bk); width: 24px; height: 24px; border-radius: 50%; background: var(--cream); color: var(--terracotta); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.bk-call { margin: 0; font-size: 13px; color: #5b6472; }
.bk-call a { color: #101828; font-weight: 600; white-space: nowrap; text-decoration: none; }
.bk-flow { padding: 32px 36px 36px; min-width: 0; }
.bk-steps[hidden] { display: none; }
.bk-steps { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; font-size: 13px; color: #5b6472; }
.bk-steps > span:not(.bk-steps__rule) { display: inline-flex; gap: 8px; align-items: center; }
.bk-steps i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #e3e5e8; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.bk-steps .is-now { color: #101828; font-weight: 600; }
.bk-steps .is-now i { background: var(--deep-green); border-color: var(--deep-green); color: #fff; }
.bk-steps .is-done i { background: #edf2ee; border-color: #edf2ee; color: var(--deep-green); }
.bk-steps__rule { width: 28px; border-top: 1px solid #e3e5e8; }
.bk-pick { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 22px 32px; align-items: start; }
.bk-pick[hidden] { display: none; }
.bk-month__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.bk-month__head b { font-size: 16px; font-weight: 600; }
.bk-nav { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e3e5e8; background: #fff; color: var(--deep-green); cursor: pointer; font-size: 20px; line-height: 1; }
.bk-nav:disabled { opacity: .35; cursor: default; }
.bk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.bk-grid__head { font-size: 12px; font-weight: 600; color: #5b6472; padding-bottom: 6px; }
.bk-day { aspect-ratio: 1; border-radius: 50%; border: 0; background: none; font: inherit; font-size: 14px; color: #b4b9c1; display: grid; place-items: center; position: relative; padding: 0; }
.bk-day.is-open { background: #edf2ee; color: var(--deep-green); font-weight: 600; cursor: pointer; }
.bk-day.is-open:hover { background: #dce7df; }
.bk-day.is-selected { background: var(--deep-green); color: #fff; }
.bk-day.is-today::after { content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--terracotta); }
.bk-tz { margin: 14px 0 0; font-size: 12px; color: #5b6472; }
.bk-slots h3 { margin: 0 0 4px; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; color: #101828; }
.bk-slots > p { margin: 0 0 14px; font-size: 13px; color: #5b6472; }
.bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.bk-time { font: inherit; font-size: 14px; font-weight: 500; padding: 11px 6px; border-radius: 8px; border: 1px solid #c9d4cc; background: #fff; color: var(--deep-green); cursor: pointer; }
.bk-time:hover { border-color: var(--deep-green); }
.bk-time.is-selected { background: var(--deep-green); border-color: var(--deep-green); color: #fff; }
.bk-empty { margin: 14px 0 0; font-size: 14px; color: var(--terracotta); }
.bk-empty:empty { display: none; }
.bk-go { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.bk-go__when { font-size: 14px; font-weight: 600; color: var(--deep-green); }
.bk-go__when:empty { display: none; }
.bk-go .btn:disabled { background: #d7c4bb; border-color: transparent; cursor: default; }
.bk-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 10px; background: #edf2ee; color: var(--deep-green); font-weight: 600; margin-bottom: 8px; }
.bk-summary button { font: inherit; font-size: 13px; font-weight: 600; background: none; border: 0; color: var(--terracotta); cursor: pointer; text-decoration: underline; padding: 8px 0; }
.bk-form.form-card--compact, .shell-main .bk-form.form-card--compact { max-width: none; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.bk-note { margin: 12px 0 0; font-size: 13px; color: #5b6472; text-align: center; }
.bk-done { text-align: center; padding: 36px 8px 20px; display: grid; gap: 10px; justify-items: center; }
.bk-done[hidden] { display: none; }
.bk-done:focus { outline: none; }
.bk-done__tick { width: 56px; height: 56px; border-radius: 50%; background: #edf2ee; color: var(--deep-green); display: grid; place-items: center; }
.bk-done h2 { margin: 6px 0 0; letter-spacing: normal; text-transform: none; font-family: 'Inter', sans-serif; font-size: 24px; color: var(--deep-green); }
.bk-done__when { font-weight: 600; font-size: 17px; margin: 0; }
.bk-done p { margin: 0; color: #5b6472; max-width: 46ch; }
.bk-done a { color: #101828; font-weight: 600; white-space: nowrap; }
.bk-day:focus-visible, .bk-time:focus-visible, .bk-nav:focus-visible, .bk-summary button:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
@media (max-width: 900px) { .bk-pick { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .bk-main { padding-inline: 12px; }
  .bk-card { grid-template-columns: minmax(0, 1fr); border-radius: 16px; }
  .bk-info { border-right: 0; border-bottom: 1px solid #e3e5e8; padding: 22px 20px; gap: 14px; }
  .bk-title { font-size: 22px; }
  .bk-expect, .bk-picked { display: none; }
  .bk-flow { padding: 20px 18px 24px; }
  .bk-times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-go { position: sticky; bottom: 0; z-index: 2; background: #fff; justify-content: space-between; margin: 0 -18px -24px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #e3e5e8; }
}
@media (prefers-reduced-motion: no-preference) { .bk-time, .bk-day { transition: background .15s, border-color .15s, color .15s; } }

/* SMS consent above SUBMIT on the estimate and booking forms. */
.form-card .sms-consent { display: flex; gap: 12px; align-items: flex-start; margin: 26px 0 0; font-family: 'Inter', sans-serif; font-size: 13px; line-height: 20px; font-weight: 400; color: #3f4a4f; text-align: left; }
.form-card .sms-consent input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--terracotta); }
.form-card .sms-consent a { color: var(--terracotta); text-decoration: underline; }

/* Privacy Policy and SMS Terms. */
.legal-card { max-width: 760px; margin: 0 auto; background: #fff; border-radius: 20px; padding: 40px 48px 44px; font-family: 'Inter', sans-serif; color: #2b1810; }
.legal-card h1 { font-family: 'Inter', sans-serif; font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--deep-green); margin: 0; }
.legal-card .legal-updated { margin-top: 6px; font-size: 13px; line-height: 20px; color: #6e7d84; }
.legal-card h2 { font-family: 'Inter', sans-serif; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #2b1810; margin: 28px 0 6px; }
.legal-card p, .legal-card li { font-size: 15px; line-height: 24px; color: #3f3f3f; }
.legal-card p + p { margin-top: 10px; }
.legal-card ul { margin: 6px 0 0; padding-left: 20px; list-style: disc; }
.legal-card li + li { margin-top: 4px; }
.legal-card a { color: var(--terracotta); }
.legal-card .legal-foot { margin-top: 36px; padding-top: 18px; border-top: 1px solid #e6e3de; font-size: 13px; line-height: 20px; color: #6e7d84; text-align: center; }
@media (max-width: 600px) {
  .legal-card { padding: 28px 20px 32px; border-radius: 14px; }
  .legal-card h1 { font-size: 24px; line-height: 32px; }
}