/* =========================================================
   CF Plumbing & Bathrooms — Stylesheet
   Sections: 1 Reset/base  2 Typography  3 Layout primitives
   4 Buttons  5 Nav  6 Footer  7 Hero  8 Cards  9 Process
   10 Calculator  11 Contact form  12 Gallery/Lightbox
   13 Misc components  14 Responsive notes (inline per block)
   ========================================================= */

/* ---------------------------------------------------------
   1. Reset / base
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure { margin: 0; }

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

::selection { background: var(--color-brass-light); color: var(--color-charcoal); }

/* ---------------------------------------------------------
   2. Typography
   --------------------------------------------------------- */
h1, .h1 { font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: var(--fs-700); line-height: var(--lh-tight); letter-spacing: -0.01em; }
h2, .h2 { font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: var(--fs-600); line-height: var(--lh-tight); letter-spacing: -0.01em; }
h3, .h3 { font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: var(--fs-500); line-height: var(--lh-tight); }
h4, .h4 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-400); line-height: var(--lh-normal); }

@media (min-width: 768px) {
  h1, .h1 { font-size: var(--fs-800); }
  h2, .h2 { font-size: var(--fs-700); }
}
@media (min-width: 1024px) {
  h1, .h1 { font-size: var(--fs-900); }
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: var(--space-2);
}
.eyebrow--inverse { color: var(--accent-light); }

.lede {
  font-size: var(--fs-400);
  line-height: var(--lh-loose);
  color: var(--text-muted);
  max-width: 62ch;
}

.text-muted { color: var(--text-muted); }
.text-inverse { color: var(--text-inverse); }

/* ---------------------------------------------------------
   3. Layout primitives
   --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--space-6); }
.section--alt { background: var(--bg-section-alt); }
.section--dark { background: var(--bg-dark); color: var(--text-inverse); }
.section--tight { padding-block: var(--space-5); }

@media (min-width: 1024px) {
  .section { padding-block: var(--space-7); }
}

.section__head { max-width: 46rem; margin-bottom: var(--space-5); }
.section__head--center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--services { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--services { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--services { grid-template-columns: repeat(3, 1fr); }
}

.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin-block: var(--space-5);
}

/* ---------------------------------------------------------
   4. Buttons
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0.9em 1.8em;
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--color-charcoal);
  color: var(--text-inverse);
  border-color: var(--color-charcoal);
}
.btn--primary:hover { background: var(--color-charcoal-soft); }

.btn--accent {
  background: var(--accent);
  color: var(--color-charcoal);
  border-color: var(--accent);
}
.btn--accent:hover { background: var(--accent-light); }

.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-subtle);
}
.btn--ghost:hover { border-color: var(--text-primary); }

.btn--ghost-inverse {
  background: transparent;
  color: var(--text-inverse);
  border-color: var(--border-subtle-inverse);
}
.btn--ghost-inverse:hover { border-color: var(--text-inverse); }

.btn--full { width: 100%; white-space: normal; text-align: center; }
.btn--sm { padding: 0.6em 1.2em; font-size: var(--fs-100); }

/* ---------------------------------------------------------
   5. Navigation
   --------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.nav.is-scrolled {
  background: rgba(250, 248, 245, 0.92);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom-color: var(--border-subtle);
}

.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
  gap: var(--space-3);
}

.nav__brand { display: flex; align-items: center; gap: var(--space-1); }
.nav__logo {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--color-charcoal);
}
.nav__brand-text {
  font-family: var(--font-serif);
  font-size: var(--fs-400);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
}

.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-4);
}
.nav__link {
  font-size: var(--fs-200);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  padding-block: var(--space-1);
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-base) var(--ease-standard), color var(--dur-base);
}
.nav__link:hover,
.nav__link.is-active { border-bottom-color: var(--accent); }

.nav__cta { display: none; }

.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-base);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--container-pad) var(--space-4);
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-subtle);
}
.nav__mobile.is-open { display: flex; }
.nav__mobile .nav__link { font-size: var(--fs-400); padding-block: var(--space-1); border-bottom: none; }
.nav__mobile .btn { margin-top: var(--space-2); }

@media (min-width: 1024px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .nav__mobile { display: none !important; }
}

/* ---------------------------------------------------------
   6. Footer
   --------------------------------------------------------- */
.footer {
  background: var(--bg-dark);
  color: var(--text-muted-inverse);
  padding-block: var(--space-6);
}
.footer__top {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.footer__brand { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.footer__logo { width: 48px; height: 48px; border-radius: var(--radius-full); object-fit: cover; }
.footer__brand-text { font-family: var(--font-serif); color: var(--text-inverse); font-size: var(--fs-500); }
.footer__col h4 { color: var(--text-inverse); margin-bottom: var(--space-2); font-size: var(--fs-200); letter-spacing: 0.08em; text-transform: uppercase; }
.footer__col a, .footer__col p { display: block; color: var(--text-muted-inverse); margin-bottom: var(--space-1); font-size: var(--fs-200); }
.footer__col a:hover { color: var(--accent-light); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle-inverse);
  font-size: var(--fs-100);
}

@media (min-width: 768px) {
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* ---------------------------------------------------------
   7. Hero (asymmetric split — portrait imagery)
   --------------------------------------------------------- */
.hero {
  display: grid;
  background: var(--bg-page);
}
.hero__content {
  order: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-6) var(--container-pad) var(--space-5);
  gap: var(--space-3);
}
.hero__title { max-width: 14ch; }
.hero__lede { max-width: 42ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }

.hero__media {
  order: 2;
  position: relative;
  height: 55vh;
  min-height: 340px;
  overflow: hidden;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

@media (min-width: 1024px) {
  .hero { grid-template-columns: 1.1fr 1fr; align-items: stretch; min-height: 92vh; }
  .hero__content { order: 1; padding: var(--space-5) var(--space-6); }
  .hero__media { order: 2; height: auto; min-height: 0; }
}

/* ---------------------------------------------------------
   8. Cards (service / project)
   --------------------------------------------------------- */
.card {
  background: var(--bg-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base);
}
.card:hover { box-shadow: var(--shadow-md); }

.card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-concrete-light); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out-expo); }
.card:hover .card__media img { transform: scale(1.045); }

.card__body { padding: var(--space-3); }
.card__eyebrow { font-size: var(--fs-100); font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-dark); }
.card__title { margin-top: var(--space-1); }
.card__desc { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--fs-200); line-height: var(--lh-loose); }
.card__meta { margin-top: var(--space-2); font-size: var(--fs-100); color: var(--text-muted); }

.service-card { padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-page); }
.service-card__image { aspect-ratio: 5 / 4; border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-3); }
.service-card__image img { width: 100%; height: 100%; object-fit: cover; }
.service-card h3 { margin-bottom: var(--space-1); }
.service-card p { color: var(--text-muted); font-size: var(--fs-200); line-height: var(--lh-loose); }

/* Alternating text/image service block (services.html) */
.service-block { display: grid; gap: var(--space-4); align-items: center; padding-block: var(--space-5); }
.service-block:not(:last-child) { border-bottom: 1px solid var(--border-subtle); }
.service-block__media { aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; }
.service-block__media img { width: 100%; height: 100%; object-fit: cover; }
.service-block__text p { margin-top: var(--space-2); color: var(--text-muted); line-height: var(--lh-loose); }

@media (min-width: 768px) {
  .service-block { grid-template-columns: 1fr 1fr; }
  .service-block--reverse .service-block__media { order: 2; }
  .service-block--reverse .service-block__text { order: 1; }
}

/* Strong single-image band (home, replaces before/after) */
.feature-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.feature-band img { width: 100%; height: 62vh; min-height: 380px; object-fit: cover; }
.feature-band__caption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: var(--space-4);
  background: linear-gradient(to top, rgba(23,24,27,0.75), transparent);
  color: var(--text-inverse);
}

/* ---------------------------------------------------------
   9. Process timeline
   --------------------------------------------------------- */
.process-list { display: grid; gap: var(--space-4); counter-reset: step; }
.process-step { display: grid; gap: var(--space-1); padding-block: var(--space-3); border-top: 1px solid var(--border-subtle); }
.process-step__num { font-family: var(--font-serif); font-size: var(--fs-600); color: var(--accent); }
.process-step h3 { margin-top: var(--space-1); }
.process-step p { color: var(--text-muted); }

@media (min-width: 768px) {
  .process-list--grid { grid-template-columns: repeat(4, 1fr); }
  .process-list--grid .process-step { border-top: none; border-left: 1px solid var(--border-subtle); padding-left: var(--space-3); padding-block: 0; }
}

/* ---------------------------------------------------------
   10. Calculator
   --------------------------------------------------------- */
.calculator {
  max-width: 640px;
  margin-inline: auto;
  background: var(--bg-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-md);
}

.calc__progress-track {
  height: 4px;
  background: var(--color-concrete-light);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-2);
}
.calc__progress-bar {
  height: 100%;
  width: 20%;
  background: var(--accent);
  transition: width var(--dur-base) var(--ease-standard);
}
.calc__step-label {
  font-size: var(--fs-100);
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.calc__card { min-height: 260px; }
.calc__question { margin-bottom: var(--space-3); }
.calc__options { display: grid; gap: var(--space-1); }
.calc__option {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--fs-300);
  font-weight: var(--fw-medium);
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast);
}
.calc__option:hover { border-color: var(--accent); background: var(--bg-section-alt); }
.calc__option.is-selected { border-color: var(--accent); background: var(--bg-section-alt); }

.calc__nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-4); }
.calc__back { color: var(--text-muted); font-size: var(--fs-200); font-weight: var(--fw-medium); }
.calc__back:disabled { opacity: 0; pointer-events: none; }

.calc__result { text-align: center; padding-block: var(--space-3); }
.calc__result-label { font-size: var(--fs-100); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-dark); font-weight: var(--fw-semibold); }
.calc__result-range { font-family: var(--font-serif); font-size: var(--fs-700); margin-block: var(--space-2); }
.calc__disclaimer { font-size: var(--fs-100); color: var(--text-muted); line-height: var(--lh-loose); max-width: 48ch; margin-inline: auto; }
.calc__result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }

/* ---------------------------------------------------------
   11. Contact form
   --------------------------------------------------------- */
.form-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--space-3); }
.form-field label { font-size: var(--fs-200); font-weight: var(--fw-medium); }
.form-field input,
.form-field select,
.form-field textarea {
  padding: 0.75em 1em;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-page);
  font-size: var(--fs-300);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--accent); }
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field__error {
  font-size: var(--fs-100);
  color: #a83636;
  display: none;
}
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: #a83636; }
.form-field.has-error .form-field__error { display: block; }

.form-success {
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-section-alt);
  text-align: center;
}

.form-error {
  padding: var(--space-4);
  border: 1px solid #a83636;
  border-radius: var(--radius-lg);
  background: var(--bg-section-alt);
  text-align: center;
  color: #a83636;
  margin-top: var(--space-3);
}

/* Honeypot: kept in the document/tab flow avoidance without display:none
   or visibility:hidden, since some bots skip fields hidden that way. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Single-column form layout (e.g. the Request a Quote form), as opposed
   to contact.html's two-column grid alongside contact details. */
.form--narrow {
  max-width: 560px;
  margin-inline: auto;
}

/* ---------------------------------------------------------
   12. Gallery / Lightbox
   --------------------------------------------------------- */
.gallery-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.gallery-strip figure { aspect-ratio: 4/3; border-radius: var(--radius-md); overflow: hidden; }
.gallery-strip img { width: 100%; height: 100%; object-fit: cover; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(23, 24, 27, 0.92);
  padding: var(--space-3);
}
.lightbox.is-open { display: flex; }
.lightbox__inner { max-width: min(900px, 92vw); max-height: 88vh; text-align: center; }
.lightbox__inner img { max-width: 100%; max-height: 72vh; object-fit: contain; border-radius: var(--radius-md); margin-inline: auto; }
.lightbox__caption { color: var(--text-inverse); margin-top: var(--space-2); font-size: var(--fs-200); }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute;
  color: var(--text-inverse);
  font-size: var(--fs-500);
  padding: var(--space-1) var(--space-2);
}
.lightbox__close { top: var(--space-2); right: var(--space-3); }
.lightbox__prev { left: var(--space-2); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--space-2); top: 50%; transform: translateY(-50%); }

/* ---------------------------------------------------------
   13. Misc components
   --------------------------------------------------------- */
.cta-band {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
  padding-block: var(--space-5);
}
@media (min-width: 768px) {
  .cta-band { flex-direction: row; align-items: center; }
}

.contact-buttons { display: grid; gap: var(--space-2); }
@media (min-width: 640px) { .contact-buttons { grid-template-columns: repeat(3, 1fr); } }

.badge {
  display: inline-block;
  font-size: var(--fs-100);
  padding: 0.3em 0.8em;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-muted);
}

/* Animation base state — always visible by default. GSAP's own .from()/
   .fromTo() tweens set their own inline "from" style the instant they run
   (before first paint, since animations.js executes at the end of body),
   then animate up to this natural CSS state. Content must NEVER be hidden
   by a CSS class ahead of time — if a class-based pre-hide is added here,
   gsap.from() will read the already-hidden computed style as its target
   and the element will incorrectly stay invisible forever. This means a
   JS error, a blocked GSAP CDN load, or reduced-motion never hides content. */
[data-animate] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1 !important; transform: none !important; }
}