/* Margaux Homes - one-pager
   Generated from website/build/design-source.dc.html.
   The design's styling lives in inline style attributes; this file carries only
   what an inline attribute cannot express: base rules, hover/focus states,
   state classes, reduced motion and the few responsive corrections. */

/* ---- base (verbatim from the design's <helmet>) ---- */
body{margin:0;background:#FAF7F5;color:#2A2223;font-family:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,figure,blockquote,ul{margin:0}
ul{padding:0}
button,input,textarea{font:inherit}
a{color:#724444;text-decoration:none}
a:hover{color:#5E383B}
::selection{background:#E3BCB4;color:#2A2223}
:focus-visible{outline:3px solid #E3BCB4;outline-offset:3px}

/* ---- hidden state must beat inline display values ---- */
[hidden]{display:none !important}

/* ---- hover states (translated from the design's style-hover attributes) ---- */
.hv-1:hover,.hv-1:focus-visible{color:#724444 !important}
.hv-2:hover,.hv-2:focus-visible{background:#5E383B !important;color:#fff !important}
.hv-3:hover,.hv-3:focus-visible{background:#ECCEC4 !important;color:#3F2727 !important}
.hv-4:hover,.hv-4:focus-visible{background:rgba(255,255,255,.12) !important;color:#fff !important}
.hv-5:hover,.hv-5:focus-visible{background:#5E383B !important}
.hv-6:hover,.hv-6:focus-visible{background:rgba(63,39,39,.42) !important}
.hv-7:hover,.hv-7:focus-visible{border-color:#724444 !important;background:#FAF3F0 !important}
.hv-8:hover,.hv-8:focus-visible{border-color:#724444 !important;color:#724444 !important}
.hv-9:hover,.hv-9:focus-visible{background:#FAF3F0 !important}
.hv-10:hover,.hv-10:focus-visible{border-color:#fff !important;background:#724444 !important}

/* ---- component state classes ---- */
.tab-btn.is-active,.tab-btn.is-active:hover,.tab-btn.is-active:focus-visible{background:#3F2727 !important;color:#fff !important}
.pg-btn.is-current,.pg-btn.is-current:hover,.pg-btn.is-current:focus-visible{border-color:transparent !important;background:#3F2727 !important;color:#fff !important}
.faq-btn[aria-expanded="true"] .faq-chev{transform:rotate(180deg)}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---- responsive corrections -------------------------------------------
   The design has no @media rules: it relies on clamp() and minmax() grids.
   Below ~900px several of those grids have intrinsic minimums wider than the
   viewport, so these are the minimum corrections needed to stop the page
   scrolling horizontally at 375px and 320px. */
/* WCAG 2.5.5 target size. The header nav already carries min-height:2.75rem
   inline from the design; the footer nav links do not and land at 27px. Grow
   the hit area only, leaving the type size and the footer's look untouched. */
.footer-grid nav a{display:inline-flex;align-items:center;min-height:44px}

@media (max-width: 900px){
  .split{grid-template-columns:minmax(0,1fr) !important}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .flex-split{flex-wrap:wrap !important}
  .footer-grid{grid-template-columns:minmax(0,1fr) !important}
  .tall-44{min-height:0 !important}
  .tall-38{min-height:0 !important}
}
@media (max-width: 860px){
  .nav-grid{grid-template-columns:auto auto !important;gap:12px !important}
  .nav-logo{grid-area:1 / 1 / 2 / 2 !important}
  .nav-cta{grid-area:1 / 2 / 2 / 3 !important}
  .nav-links{grid-area:2 / 1 / 3 / 3 !important;flex-wrap:wrap !important;justify-content:flex-start !important}
}
@media (max-width: 640px){
  .g3,.g2{grid-template-columns:minmax(0,1fr) !important}
  .tabs-grid{grid-template-columns:minmax(0,1fr) !important}
}

/* ---- lead form status (Netlify Forms submit handler) ---- */
.form-success{display:none;margin-top:1.5rem;padding:1rem;border-left:3px solid #3F6B4D;background:#f3f8f4;color:#294b34;font-size:.9375rem;line-height:1.5}
.form-success.is-visible{display:block}
.form-success.is-error{border-left-color:#A8323F;background:#fff3f4;color:#72222c}