/* =========================================================
   McCully Masonry & Renovations — Production Stylesheet
   Design language: earthy, material-inspired, craftsmanship-led.
   No external fonts/scripts — everything self-contained for
   performance, privacy and reliability.
   ========================================================= */

:root{
  /* --- Brand palette (WCAG-AA verified against paired backgrounds) --- */
  --brick:        #8a3324;
  --brick-dark:   #6e2718;
  --brick-light:  #a8492f;
  --charcoal:     #22201d;
  --charcoal-2:   #2c2924;
  --stone:        #6b6963;
  --stone-light:  #9c9a93;
  --cream:        #f5f1ea;
  --cream-2:      #ece5d8;
  --white:        #ffffff;
  --text:         #2b2822;
  --text-muted:   #5b574f;
  --text-on-dark: #f5f1ea;
  --border:       #ddd5c6;
  --border-strong:#7d7869; /* meets 3:1 non-text contrast for form-field boundaries */
  --success:      #3f6b3a;
  --danger:       #9a2e22; /* 7.5:1 on white, 6.7:1 on cream — form validation only, always paired with text/icon */

  /* --- Typography scale (kept consistent across all "label + copy" tiles:
     process steps, feature rows, contact info items) --- */
  --text-xs:   13px;
  --text-sm:   14.5px;
  --text-base: 16px;
  --text-md:   17px;
  --text-lg:   18px;
  --heading-sm: 17px;  /* feature / step / info-item sub-headings */
  --heading-md: 20px;  /* card headings, form-card headings */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-sm: 0 2px 8px rgba(34,32,29,0.08);
  --shadow-md: 0 8px 24px rgba(34,32,29,0.12);
  --shadow-lg: 0 20px 48px rgba(34,32,29,0.18);

  --container: 1180px;
  --gutter: 24px;

  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-display: Georgia, "Times New Roman", Cambria, serif;

  --transition: 220ms cubic-bezier(.4,0,.2,1);
  --transition-fast: 140ms cubic-bezier(.4,0,.2,1);
  --transition-slow: 420ms cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; width: 100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
body{
  margin: 0;
  font-family: var(--font-base);
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  font-size: 17px;
  overflow-x: hidden;
}
img{ max-width: 100%; height: auto; display: block; }
svg{ display: block; }
.icon{ width: 24px; height: 24px; flex-shrink: 0; }
a{ color: var(--brick); text-decoration: none; transition: color var(--transition-fast); }
a:hover{ color: var(--brick-dark); }
a:visited{ color: var(--brick-dark); }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5,h6{ margin: 0 0 .5em; font-weight: 700; line-height: 1.2; color: var(--charcoal); }
p{ margin: 0 0 1em; }
button{ font-family: inherit; }

:focus-visible{
  outline: 3px solid var(--brick-light);
  outline-offset: 2px;
  border-radius: 2px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible){ outline: none; }

.skip-link{
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--charcoal);
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--transition);
  font-weight: 600;
}
.skip-link:focus{ top: 12px; color: var(--white); }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Utility ---------- */
.section{ padding: 88px 0; }
.section--tight{ padding: 56px 0; }
.section--dark{ background: var(--charcoal); color: var(--text-on-dark); }
.section--dark h2, .section--dark h3{ color: var(--white); }
.section--cream{ background: var(--cream); }
.section--stone{ background: var(--cream-2); }
.text-center{ text-align: center; }
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brick);
  margin-bottom: 14px;
}
.eyebrow::before{
  content: "";
  width: 28px;
  height: 2px;
  background: var(--brick);
  display: inline-block;
}
.section--dark .eyebrow{ color: #d98a6f; }
.section--dark .eyebrow::before{ background: #d98a6f; }
.section-head{ max-width: 700px; margin: 0 auto 48px; text-align: center; }
.section-head h2{ font-size: clamp(28px, 3.6vw, 40px); }
.section-head p{ color: var(--text-muted); font-size: 18px; margin-top: 12px; }
.section--dark .section-head p{ color: #cfc9bd; }

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

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 16px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition), border-color var(--transition);
  min-height: 48px;
  line-height: 1.2;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0) scale(.98); transition-duration: var(--transition-fast); }
.btn:disabled{ opacity: .65; cursor: not-allowed; transform: none; }
.btn:disabled:hover{ transform: none; }
.btn svg{ transition: transform var(--transition); }
.btn.is-loading{ position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after{
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  animation: btn-spin 700ms linear infinite;
}
.btn-outline.is-loading::after, .btn-light.is-loading::after{
  border-color: rgba(138,51,36,.25);
  border-top-color: var(--brick);
}
@keyframes btn-spin{ to{ transform: rotate(360deg); } }
.btn-primary{ background: var(--brick); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background: var(--brick-dark); color: var(--white); box-shadow: var(--shadow-md); }
.btn-outline{ background: transparent; border-color: currentColor; color: var(--charcoal); }
.btn-outline:hover{ background: var(--charcoal); color: var(--white); }
.section--dark .btn-outline{ color: var(--white); }
.section--dark .btn-outline:hover{ background: var(--white); color: var(--charcoal); }
.hero .btn-outline{ color: var(--white); border-color: rgba(255,255,255,.55); }
.hero .btn-outline:hover{ background: var(--white); color: var(--charcoal); }
.btn-light{ background: var(--white); color: var(--brick); }
.btn-light:hover{ background: var(--cream); color: var(--brick-dark); }
.btn-block{ width: 100%; }
.btn svg{ width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--transition);
}
.site-header.is-scrolled{ box-shadow: var(--shadow-sm); }
.topbar{
  background: var(--charcoal);
  color: #cfc9bd;
  font-size: 14px;
}
.topbar .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 16px;
}
.topbar a{ color: #f2ece0; font-weight: 600; }
.topbar a:hover{ color: var(--white); }
.topbar-phone{ display: flex; align-items: center; gap: 8px; }
.topbar-area{ display: flex; align-items: center; gap: 8px; }
.topbar svg{ width: 15px; height: 15px; flex-shrink: 0; }

.navbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--charcoal);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.01em;
}
.brand:hover{ color: var(--charcoal); }
.brand-mark{
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: linear-gradient(155deg, var(--brick) 0%, var(--brick-dark) 100%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition);
}
.brand:hover .brand-mark{ transform: rotate(-4deg) scale(1.04); }
.brand-mark svg{ width: 24px; height: 24px; }
.brand-text{ display: flex; flex-direction: column; line-height: 1.1; }
.brand-text small{ font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }

.nav-links{
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a{
  display: block;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: 600;
  font-size: 15.5px;
  transition: background var(--transition), color var(--transition);
}
.nav-links a:hover, .nav-links a:focus-visible{ background: var(--cream); color: var(--brick); }
.nav-links a[aria-current="page"]{ color: var(--brick); }
.nav-cta{ display: flex; align-items: center; gap: 12px; }

.nav-toggle{
  display: none;
  background: transparent;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  width: 48px; height: 48px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle svg{ width: 24px; height: 24px; }
.nav-toggle .icon-close{ display: none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display: none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display: block; }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  color: var(--white);
  background: linear-gradient(160deg, var(--charcoal) 0%, var(--charcoal-2) 55%, var(--brick-dark) 130%);
  overflow: hidden;
}
.hero::before{
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 68px);
  opacity: .5;
  pointer-events: none;
}
.hero::after{
  content:"";
  position: absolute;
  right: -10%; top: -20%;
  width: 60%; height: 140%;
  background: radial-gradient(closest-side, rgba(216,138,111,0.22), transparent 70%);
  pointer-events: none;
}
.hero-inner{
  position: relative;
  padding: 110px 0 96px;
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: 48px;
  align-items: center;
}
/* Hero content is always above the fold, so it animates in on load rather
   than waiting on scroll: text pieces rise in first, in a short stagger,
   then the visual panel wipes in a beat behind them. Pure CSS (no JS
   dependency) so it can never leave real content stuck invisible. */
.hero-copy > *{ opacity: 0; animation: hero-rise 640ms cubic-bezier(.16,1,.3,1) both; }
.hero-copy > *:nth-child(1){ animation-delay: 40ms; }
.hero-copy > *:nth-child(2){ animation-delay: 120ms; }
.hero-copy > *:nth-child(3){ animation-delay: 200ms; }
.hero-copy > *:nth-child(4){ animation-delay: 280ms; }
.hero-copy > *:nth-child(5){ animation-delay: 360ms; }
@keyframes hero-rise{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: none; }
}
.hero-visual{ animation: hero-visual-in 760ms cubic-bezier(.16,1,.3,1) 260ms both; }
@keyframes hero-visual-in{
  from{ opacity: 0; transform: scale(.97); clip-path: inset(0 0 8% 0); }
  to{ opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
.hero--page .hero-inner{ padding: 72px 0; grid-template-columns: 1fr; text-align: center; }
.hero--page .hero-visual{ display: none; }
.hero-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .05em;
  margin-bottom: 24px;
}
.hero-eyebrow svg{ width: 15px; height: 15px; }
.hero h1{
  color: var(--white);
  font-size: clamp(34px, 5vw, 58px);
  letter-spacing: -.01em;
  margin-bottom: 20px;
}
.hero p.lead{
  font-size: clamp(17px, 2vw, 20px);
  color: #d9d3c7;
  max-width: 620px;
  margin: 0 0 32px;
}
.hero--page p.lead{ margin-left: auto; margin-right: auto; }
.hero-actions{ display: flex; flex-wrap: wrap; gap: 16px; }
.hero--page .hero-actions{ justify-content: center; }
.hero-trust{
  display: flex; flex-wrap: wrap; gap: 28px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.16);
}
.hero--page .hero-trust{ justify-content: center; }
.hero-trust-item{ display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: #efe9dd; }
.hero-trust-item svg{ width: 20px; height: 20px; color: #d98a6f; flex-shrink: 0; }

.hero-visual{ position: relative; }
.brick-panel{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5;
  background:
    linear-gradient(155deg, rgba(255,255,255,.08), transparent 40%),
    var(--brick);
  border: 1px solid rgba(255,255,255,0.14);
}
.brick-panel .brick-rows{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
}
.brick-panel .brick-row{ flex: 1; display: flex; }
.brick-panel .brick-row:nth-child(even){ margin-left: -5%; }
.brick-panel .brick{
  flex: 1 0 20%;
  margin: 3px;
  border-radius: 3px;
  background: linear-gradient(155deg, rgba(255,255,255,.16), rgba(0,0,0,.14));
}
.brick-panel-badge{
  position: absolute; left: 20px; bottom: 20px; right: 20px;
  background: rgba(34,32,29,0.82);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex; align-items: center; gap: 14px;
  color: var(--white);
}
.brick-panel-badge svg{ width: 30px; height: 30px; color: #d98a6f; flex-shrink: 0; }
.brick-panel-badge strong{ display: block; font-size: 15px; }
.brick-panel{ transition: transform var(--transition-slow); }
.hero-visual:hover .brick-panel,
.split-visual:hover .brick-panel{ transform: scale(1.015); }
.brick-panel .brick{ transition: transform var(--transition-slow); }
.hero-visual:hover .brick-panel .brick,
.split-visual:hover .brick-panel .brick{ transform: scale(1.04); }
@media (prefers-reduced-motion: reduce){
  .hero-visual:hover .brick-panel,
  .split-visual:hover .brick-panel,
  .hero-visual:hover .brick-panel .brick,
  .split-visual:hover .brick-panel .brick{ transform: none; }
}
.brick-panel-badge span{ font-size: 13px; color: #cfc9bd; }

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  display: flex; align-items: center; gap: 8px;
  justify-content: center;
  font-size: 14px;
  color: #cfc9bd;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.breadcrumb a{ color: #efe9dd; font-weight: 600; }
.breadcrumb a:hover{ color: var(--white); }
.breadcrumb svg{ width: 12px; height: 12px; }

/* ---------- Cards ---------- */
.grid{ display: grid; gap: 32px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

.card{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 36px 30px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--brick-light); }
.card-icon{
  width: 58px; height: 58px;
  border-radius: var(--radius-md);
  background: linear-gradient(155deg, var(--cream-2), var(--cream));
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  color: var(--brick);
  transition: transform var(--transition), border-color var(--transition);
}
.card-icon svg{ width: 28px; height: 28px; }
.card:hover .card-icon{ transform: translateY(-2px) scale(1.05); border-color: var(--brick-light); }
.card h3{ font-size: var(--heading-md); margin-bottom: 10px; }
.card p{ color: var(--text-muted); margin-bottom: 16px; }
.card-link{ font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.card-link svg{ width: 16px; height: 16px; transition: transform var(--transition); }
.card-link:hover svg{ transform: translateX(4px); }

.service-card{ display: flex; flex-direction: column; height: 100%; }
.service-card ul{ margin: 0 0 20px; }
.service-card li{
  display: flex; gap: 10px; align-items: flex-start;
  padding: 6px 0; color: var(--text-muted); font-size: 15.5px;
}
.service-card li svg{ width: 18px; height: 18px; color: var(--success); flex-shrink: 0; margin-top: 3px; }

/* ---------- Icon tiles (why-us, process) ---------- */
.feature{
  display: flex; gap: 18px; align-items: flex-start;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.feature:last-child{ border-bottom: none; }
.feature-icon{
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--charcoal);
  color: #d98a6f;
  display: flex; align-items: center; justify-content: center;
}
.feature-icon svg{ width: 26px; height: 26px; }
.feature h3{ font-size: var(--heading-sm); margin-bottom: 6px; }
.feature p{ color: var(--text-muted); margin: 0; font-size: 15.5px; }

.stat-row{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  text-align: center;
}
.stat{ padding: 18px; }
.stat strong{ display: block; font-size: clamp(26px, 3vw, 36px); color: var(--brick); font-weight: 800; }
.section--dark .stat strong{ color: #d98a6f; }
.stat span{ font-size: 14.5px; color: var(--text-muted); font-weight: 600; }
.section--dark .stat span{ color: #cfc9bd; }

/* ---------- About / split sections ---------- */
.split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split-visual .brick-panel{ aspect-ratio: 4/3.4; }
.badge-pill{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cream-2);
  border: 1px solid var(--border);
  color: var(--charcoal);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px; font-weight: 700;
  margin-bottom: 8px;
}

/* ---------- Steps ---------- */
.steps{ counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.step{
  position: relative;
  padding: 30px 22px 22px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.step:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brick-light); }
.step::before{
  counter-increment: step;
  content: counter(step);
  position: absolute; top: -18px; left: 22px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brick);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px;
  box-shadow: var(--shadow-sm);
}
.step > svg.icon{ width: 32px; height: 32px; color: var(--brick); margin-top: 8px; transition: transform var(--transition); }
.step:hover > svg.icon{ transform: scale(1.08); }
.step h3{ font-size: var(--heading-sm); margin: 14px 0 8px; }
.step p{ color: var(--text-muted); font-size: 15px; margin: 0; }

/* ---------- CTA band ---------- */
.cta-band{
  background: linear-gradient(135deg, var(--brick) 0%, var(--brick-dark) 100%);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-md);
}
.cta-band h2{ color: var(--white); font-size: clamp(24px, 3vw, 32px); margin-bottom: 8px; }
.cta-band p{ color: #f3ded4; margin: 0; font-size: 17px; }
.cta-band p a{ color: var(--white); text-decoration: underline; }
.cta-band p a:hover{ color: var(--cream); }
.cta-band .btn-outline{ color: var(--white); border-color: rgba(255,255,255,.6); }
.cta-band .btn-outline:hover{ background: var(--white); color: var(--brick-dark); }
.cta-band-actions{ display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- FAQ ---------- */
.faq-list{ max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.faq-item:hover{ border-color: var(--brick-light); }
.faq-item[open]{ box-shadow: var(--shadow-sm); }
.faq-item summary{
  cursor: pointer;
  list-style: none;
  padding: 20px 56px 20px 24px;
  font-weight: 700;
  font-size: 17px;
  position: relative;
  color: var(--charcoal);
  transition: background var(--transition-fast);
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: "+";
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-size: 26px; font-weight: 400; color: var(--brick);
  transition: transform var(--transition);
  line-height: 1;
}
.faq-item[open] summary::after{ transform: translateY(-50%) rotate(45deg); }
.faq-item summary:hover{ background: var(--cream); }
.faq-item .faq-body{ padding: 0 24px 22px; color: var(--text-muted); font-size: 15.5px; }
.faq-item .faq-body p{ margin: 0; }
.faq-item[open] .faq-body{ animation: faq-body-in 260ms ease; }
@keyframes faq-body-in{
  from{ opacity: 0; transform: translateY(-4px); }
  to{ opacity: 1; transform: none; }
}

/* ---------- Forms ---------- */
.form-card{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
}
.form-card h3{ font-size: var(--heading-md); margin-bottom: 6px; }
.form-card > p{ color: var(--text-muted); margin-bottom: 22px; }
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field{ margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.form-field.full{ grid-column: 1 / -1; }
.form-field label{ font-weight: 700; font-size: 14.5px; color: var(--charcoal); }
.form-field .req{ color: var(--brick); }
.form-field input,
.form-field select,
.form-field textarea{
  font-family: inherit;
  font-size: 16px;
  padding: 13px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--cream);
  color: var(--text);
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
  min-height: 48px;
}
.form-field textarea{ min-height: 130px; resize: vertical; }
.form-field input::placeholder,
.form-field textarea::placeholder{
  color: var(--text-muted); /* meets 4.5:1 text contrast on the cream field background */
  opacity: 1;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color: var(--brick);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(138,51,36,0.28);
}
.form-field input:hover:not(:focus):not(:disabled):not(.is-touched:invalid),
.form-field select:hover:not(:focus):not(:disabled):not(.is-touched:invalid),
.form-field textarea:hover:not(:focus):not(:disabled):not(.is-touched:invalid){
  border-color: var(--stone);
}
/* Keyboard focus additionally gets the site's standard :focus-visible
   ring (defined globally) — intentionally not suppressed here, so form
   fields match the focus treatment used everywhere else on the site. */
/* Validation styling only applies once a field has been touched (blurred
   or attempted-submitted), so a fresh, untouched form never shows red. */
.form-field input.is-touched:invalid,
.form-field select.is-touched:invalid,
.form-field textarea.is-touched:invalid{
  border-color: var(--danger);
  background: #fbf2f0;
}
.form-field input.is-touched:invalid:focus,
.form-field select.is-touched:invalid:focus,
.form-field textarea.is-touched:invalid:focus{
  box-shadow: 0 0 0 3px rgba(154,46,34,0.22);
}
.form-field input.is-touched:valid,
.form-field select.is-touched:valid,
.form-field textarea.is-touched:valid{
  border-color: var(--border-strong);
}
.form-hint{ font-size: var(--text-xs); color: var(--text-muted); }
.form-status{
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  display: none;
}
.form-status.is-visible{ display: block; animation: form-status-in 420ms cubic-bezier(.16,1,.3,1); }
.form-status.success{ background: #e8f0e6; color: var(--success); border: 1px solid #c3d9be; }
@keyframes form-status-in{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: none; }
}

/* ---------- Contact info blocks ---------- */
.info-list{ display: flex; flex-direction: column; gap: 20px; }
.info-item{ display: flex; gap: 16px; align-items: flex-start; }
.info-item .info-icon{
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--cream-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--brick);
  transition: background var(--transition), border-color var(--transition);
}
.info-item .info-icon svg{ width: 22px; height: 22px; transition: transform var(--transition); }
.info-item:hover .info-icon{ background: var(--cream); border-color: var(--brick-light); }
.info-item:hover .info-icon svg{ transform: scale(1.08); }
.info-item h3{ font-size: var(--heading-sm); margin-bottom: 4px; }
.info-item p{ margin: 0; color: var(--text-muted); }
.info-item a{ font-weight: 700; color: var(--charcoal); font-size: var(--text-md); }
.info-item a:hover{ color: var(--brick); }

.area-list{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
.area-list li{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px dashed var(--border);
  transition: padding-left var(--transition), border-color var(--transition), color var(--transition);
}
.area-list li:hover{ padding-left: 6px; border-color: var(--brick-light); color: var(--brick-dark); }
.area-list li svg{ width: 16px; height: 16px; color: var(--brick); flex-shrink: 0; }

.note-card{
  background: var(--cream-2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brick);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  font-size: 15px;
  color: var(--text-muted);
}

/* ---------- Footer ---------- */
.site-footer{ background: var(--charcoal); color: #cfc9bd; }
.footer-top{ padding: 64px 0 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer-brand .brand{ color: var(--white); }
.footer-brand p{ color: #a49e91; margin: 16px 0 0; max-width: 340px; }
.footer-heading{ color: var(--white); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 18px; }
.footer-links li{ margin-bottom: 12px; }
.footer-links a{ color: #cfc9bd; transition: color var(--transition-fast), padding-left var(--transition-fast); display: inline-block; }
.footer-links a:hover{ color: var(--white); padding-left: 4px; }
.footer-contact li{ display: flex; gap: 10px; margin-bottom: 14px; color: #cfc9bd; }
.footer-contact svg{ width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: #d98a6f; transition: transform var(--transition-fast); }
.footer-contact li:hover svg{ transform: scale(1.12); }
.footer-contact a{ color: #f2ece0; font-weight: 600; }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 22px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 13.5px; color: #8f8a7e;
}

/* ---------- Scroll reveal ----------
   Content is visible by default (.reveal alone has no effect), so it
   never depends on JavaScript to be readable. Only once script.js
   confirms it can animate an element does it add .js-armed, which is
   the only rule allowed to hide content pending .is-visible. */
.reveal.js-armed{ opacity: 0; transform: translateY(24px); transition: opacity 700ms ease, transform 700ms ease; }
.reveal.js-armed.is-visible{ opacity: 1; transform: none; }
/* Cascading stagger for card-style grids: each successive tile reveals a
   beat after the previous one, up to a 5-item cap, for a modern layered
   entrance instead of every tile fading in at once. */
.grid > .reveal.js-armed:nth-child(2),
.steps > .reveal.js-armed:nth-child(2),
.stat-row > .reveal.js-armed:nth-child(2){ transition-delay: 80ms; }
.grid > .reveal.js-armed:nth-child(3),
.steps > .reveal.js-armed:nth-child(3),
.stat-row > .reveal.js-armed:nth-child(3){ transition-delay: 160ms; }
.grid > .reveal.js-armed:nth-child(4),
.steps > .reveal.js-armed:nth-child(4),
.stat-row > .reveal.js-armed:nth-child(4){ transition-delay: 240ms; }
.grid > .reveal.js-armed:nth-child(n+5),
.steps > .reveal.js-armed:nth-child(n+5),
.stat-row > .reveal.js-armed:nth-child(n+5){ transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce){
  .reveal.js-armed{ opacity: 1; transform: none; transition: none; transition-delay: 0s !important; }
}
.no-js .reveal{ opacity: 1 !important; transform: none !important; }

/* Image/graphic panels reveal with a soft wipe instead of a plain rise,
   so photography-style panels read distinctly from text blocks. */
.reveal-media.js-armed{
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: opacity 700ms ease, clip-path 700ms cubic-bezier(.16,1,.3,1);
}
.reveal-media.js-armed.is-visible{ clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce){
  .reveal-media.js-armed{ clip-path: none; transition: none; }
}

/* ---------- Back to top ---------- */
.back-to-top{
  position: fixed;
  right: 20px; bottom: 20px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--brick);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  border: none;
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 400;
}
.back-to-top.is-visible{ opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.back-to-top:active{ transform: translateY(0) scale(.96); }
.back-to-top svg{ width: 22px; height: 22px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .footer-top{ grid-template-columns: 1.2fr 1fr 1fr; gap: 28px; }
  .steps{ grid-template-columns: repeat(2, 1fr); }
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; text-align: center; padding: 64px 0 56px; }
  .hero p.lead{ margin-left: auto; margin-right: auto; }
  .hero-actions{ justify-content: center; }
  .hero-trust{ justify-content: center; }
  .hero-visual{ max-width: 380px; margin: 0 auto; width: 100%; }
  .split{ grid-template-columns: 1fr; gap: 36px; }
  .split-visual{ order: -1; max-width: 460px; margin: 0 auto; width: 100%; }
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
  .cta-band{ flex-direction: column; text-align: center; padding: 40px 28px; }
  .cta-band-actions{ justify-content: center; }
}

@media (max-width: 820px){
  .topbar .container{ font-size: 13px; }
  .topbar-area{ display: none; }
}

/* Nav switches to the mobile/hamburger layout well before the general
   content breakpoint below: the full desktop nav (brand + 6 links +
   phone bar + CTA button) needs roughly 1000px to lay out on one line
   without wrapping, even though the rest of the page layout is fine
   down to 768px. Keeping this as its own breakpoint avoids the 769–989px
   zone where the desktop nav used to wrap onto 3-4 lines. */
@media (max-width: 1000px){
  .nav-toggle{ display: flex; }
  .nav-links{
    position: fixed;
    inset: 0 0 0 auto;
    top: 0;
    height: 100vh;
    width: min(84vw, 360px);
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 90px 24px 24px;
    gap: 2px;
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--transition);
    overflow-y: auto;
  }
  .nav-links.is-open{ transform: translateX(0); }
  .nav-links a{ padding: 16px 14px; font-size: 17px; border-bottom: 1px solid var(--border); }
  .nav-cta{ display: none; }
  .nav-overlay{
    display: none;
    position: fixed; inset: 0; background: rgba(34,32,29,0.5);
    z-index: 490;
  }
  .nav-overlay.is-open{ display: block; }
}

@media (max-width: 768px){
  body{ font-size: 16px; }
  .section{ padding: 64px 0; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr; gap: 36px; padding: 48px 0 32px; }
  .area-list{ grid-template-columns: 1fr; }
  .stat-row{ grid-template-columns: 1fr; gap: 12px; }
  .form-card{ padding: 26px 20px; }
  .cta-band{ padding: 32px 20px; }
}

@media (max-width: 480px){
  .container{ padding: 0 18px; }
  .hero-inner{ padding: 48px 0 44px; }
  .hero-trust{ gap: 18px; }
  .btn{ padding: 14px 22px; font-size: 15px; }
  .section{ padding: 52px 0; }
  .card{ padding: 28px 22px; }
  .brand-text small{ display: none; }
}

@media (max-width: 360px){
  .brand{ font-size: 18px; }
  .brand-mark{ width: 38px; height: 38px; }
  .hero h1{ font-size: 30px; }
}

/* Print */
@media print{
  .site-header, .back-to-top, .nav-toggle, .hero-visual{ display: none; }
  body{ color: #000; }
}