/* ==========================================================================
   IR HOME IMPROVEMENT — Stylesheet
   Organized in sections. Brand tokens live in :root — change colors/fonts
   there and they update everywhere on the site.
   ========================================================================== */

/* ---------- 1. BRAND TOKENS ---------- */
:root{
  --cream:        #F5F0E8;  /* main background */
  --ivory:        #FAF8F4;  /* secondary background */
  --charcoal:     #292725;  /* main text */
  --graphite:     #4A4743;  /* secondary text */
  --taupe:        #8C7B6B;  /* primary accent / CTA */
  --taupe-hover:  #6F6258;  /* CTA hover */
  --taupe-light:  #D8CEC3;  /* borders / soft backgrounds */
  --stone:        #B7AA9D;  /* secondary accent */
  --olive:        #7D806C;  /* optional subtle accent, use sparingly */
  --white:        #FFFFFF;

  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container-w: 1200px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-soft: 0 12px 30px -18px rgba(41,39,37,0.25);

  --header-h: 84px;
}

/* ---------- 2. RESET / BASE ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
input, select, textarea{ font-family: inherit; font-size: 1rem; }
h1,h2,h3,h4{
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.15;
  margin: 0 0 0.6em;
}
h1{ font-size: clamp(2.6rem, 5.5vw, 4.4rem); font-weight: 500; }
h2{ font-size: clamp(1.9rem, 3.2vw, 2.75rem); }
h3{ font-size: 1.3rem; }
p{ margin: 0 0 1em; }

.container{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.container.narrow{ max-width: 780px; }
.section{ padding: 6.5rem 0; }
.center{ text-align: center; }
.light{ color: var(--white) !important; }
.max-w{ max-width: 620px; margin-left:auto; margin-right:auto; }

.eyebrow{
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  margin: 0 0 1rem;
}
.eyebrow.center{ text-align:center; }
.eyebrow-light{ color: var(--taupe-light); }

.lead{
  color: var(--graphite);
  font-size: 1.08rem;
  max-width: 640px;
}
.lead.light{ color: var(--taupe-light); }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--charcoal); color:var(--white);
  padding: .75rem 1.25rem; z-index: 1000;
}
.skip-link:focus{ left: 1rem; top: 1rem; }

/* ---------- 3. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 0.95rem 2.1rem;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary{ background: var(--taupe); color: var(--white); }
.btn-primary:hover, .btn-primary:focus-visible{ background: var(--taupe-hover); }
.btn-outline{ background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.btn-outline:hover, .btn-outline:focus-visible{ background: var(--charcoal); color: var(--white); }
.btn-small{ padding: 0.65rem 1.4rem; font-size: 0.82rem; }
.btn-full{ width:100%; }

/* ---------- 4. IMAGE PLACEHOLDERS ----------
   Swap these <div class="img-placeholder"> elements for real
   <img> tags once you have photography — see DEPLOY.md.
   Intentionally shows no text/filename to visitors — just a soft textured
   block — so nothing technical is ever visible on the public site. */
.img-placeholder{
  width:100%; height:100%; min-height: 220px;
  background:
    linear-gradient(135deg, var(--taupe-light) 0%, var(--stone) 100%);
  position:relative;
}
.img-placeholder::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(45deg, rgba(41,39,37,0.05) 0 2px, transparent 2px 14px);
}

/* ---------- 5. HEADER / NAV ---------- */
.site-header{
  position: sticky; top:0; z-index: 500;
  background: rgba(250,248,244,0.98);
  border-bottom: 1px solid var(--taupe-light);
  /* Note: intentionally no backdrop-filter here — it (like transform/filter/
     perspective) makes this element a containing block for fixed-position
     descendants, which breaks the full-screen mobile nav panel below. */
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: var(--header-h);
}
.logo{
  display:flex; align-items:center; gap:0.65rem;
}
.logo-icon{
  height: 48px; width:auto; display:block;
}
.logo-word{
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.main-nav{ display:flex; align-items:center; gap:2.5rem; }
.main-nav ul{ display:flex; gap:2rem; }
.main-nav a:not(.btn){
  font-size: 0.92rem; font-weight: 500; color: var(--graphite);
  position:relative; padding-bottom: 4px;
}
.main-nav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: var(--taupe); transition: right .2s ease;
}
.main-nav a:not(.btn):hover::after, .main-nav a:not(.btn):focus-visible::after{ right:0; }
.main-nav a:not(.btn):hover{ color: var(--charcoal); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:transparent; border:none; padding:0;
}
.nav-toggle span{ display:block; height:1px; background: var(--charcoal); width:100%; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* ---------- 6. HERO ---------- */
.hero{
  position:relative;
  min-height: 86vh;
  display:flex; align-items:center;
  overflow:hidden;
  color: var(--white);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media .img-placeholder{ min-height: 100%; }
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(41,39,37,0.45) 0%, rgba(41,39,37,0.62) 100%);
}
.hero-content{ position:relative; z-index:2; max-width: 720px; padding-top:3rem; padding-bottom:3rem; }
.hero-content .eyebrow{ color: var(--taupe-light); }
.hero h1{ color: var(--white); margin-bottom: 0.5rem; }
.hero-sub{ font-size: 1.15rem; color: var(--ivory); margin-bottom: 2rem; }
.hero-actions{ margin-bottom: 2.25rem; }
.hero-services{
  font-size: 0.82rem; letter-spacing: 0.04em; color: var(--taupe-light);
  text-transform: uppercase;
}

/* ---------- 7. WHO WE ARE ---------- */
.who-we-are{ background: var(--cream); }

/* ---------- 8. MISSION / VISION ---------- */
.mission-vision{ background: var(--ivory); border-top:1px solid var(--taupe-light); border-bottom:1px solid var(--taupe-light); }
.mv-grid{ display:grid; grid-template-columns: 1fr auto 1fr; gap: 3rem; align-items:start; }
.mv-divider{ width:1px; background: var(--taupe-light); align-self:stretch; }
.mv-text{ color: var(--graphite); font-size: 1.02rem; }

/* ---------- 9. SERVICES ---------- */
.services-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 2.25rem;
  margin-top: 3.5rem;
}
.service-card{
  background: var(--ivory);
  border: 1px solid var(--taupe-light);
  border-radius: var(--radius-md);
  padding: 2.25rem 2rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  border-color: var(--stone);
}
.service-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; margin-bottom:1.25rem;
  color: var(--taupe);
}
.service-icon svg{ width:100%; height:100%; }
.service-card h3{ margin-bottom:0.5rem; }
.service-card p{ color: var(--graphite); font-size: 0.95rem; margin:0; }
.service-card-note{ background: transparent; border-style:dashed; display:flex; flex-direction:column; justify-content:center; }
.service-card-note h3{ color: var(--taupe); }

/* ---------- 10. PROJECTS / BEFORE-AFTER ---------- */
.projects{ background: var(--cream); }
.projects-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem;
  margin-top: 3.5rem;
}
.project-card{ }
.projects-loading{ grid-column: 1 / -1; text-align:center; color: var(--taupe); font-size:0.95rem; padding: 1rem 0; }
.ba-slider{
  position:relative;
  aspect-ratio: 4 / 3;
  overflow:hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--taupe-light);
  user-select:none;
}
.ba-img{ position:absolute; inset:0; }
.ba-img .img-placeholder{ min-height:100%; }
.ba-img img{ width:100%; height:100%; object-fit:cover; display:block; }
/* The "before" photo is the full base layer (renders on the left by
   default). The "after" photo sits on top and is clipped to reveal from
   the right — so at rest, Before shows on the left and After on the
   right. Dragging the handle left reveals more of After. */
.ba-reveal{ clip-path: inset(0 0 0 50%); }
.ba-tag{
  position:absolute; top:0.85rem; z-index:3;
  font-size: 0.68rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:600;
  padding: 0.3rem 0.65rem; border-radius: 999px;
  background: rgba(41,39,37,0.78); color: var(--white);
}
.ba-tag-before{ left:0.85rem; }
.ba-tag-after{ right:0.85rem; }
.ba-range{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; appearance:none; background:transparent; z-index:4; cursor: ew-resize;
}
.ba-range::-webkit-slider-thumb{ appearance:none; width:1px; height:1px; opacity:0; }
.ba-range::-moz-range-thumb{ width:1px; height:1px; opacity:0; border:none; }
.ba-range::-moz-range-track{ background:transparent; }
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; background: var(--white);
  transform: translateX(-50%); z-index:3; pointer-events:none;
  box-shadow: 0 0 0 1px rgba(41,39,37,0.15);
}
.ba-handle::after{
  content:"\2194"; /* left-right arrow */
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%; background: var(--white); color: var(--charcoal);
  display:flex; align-items:center; justify-content:center; font-size:0.95rem;
  box-shadow: var(--shadow-soft);
}
.project-info{ padding-top: 1.25rem; }
.project-info h3{ margin-bottom: 0.35rem; }
.project-info p{ color: var(--graphite); font-size:0.94rem; margin-bottom:0.3rem; }
.project-meta{ font-size:0.8rem !important; letter-spacing:0.02em; color: var(--stone) !important; }

/* ---------- 11. WOMEN-LED BAND ---------- */
.women-led{ position:relative; overflow:hidden; color: var(--white); }
.women-led-media{ position:absolute; inset:0; }
.women-led-media .img-placeholder{ min-height:100%; }
.women-led-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(41,39,37,0.55), rgba(41,39,37,0.72));
}
.women-led-content{ position:relative; padding: 6.5rem 1.5rem; max-width: 680px; }
.women-led h2{ margin-bottom:1rem; }
.women-led-points{
  display:flex; flex-wrap:wrap; gap: 0.6rem 1rem; margin-top: 1.75rem;
}
.women-led-points li{
  font-size: 0.78rem; letter-spacing:0.06em; text-transform:uppercase;
  border: 1px solid rgba(250,248,244,0.4); border-radius: 999px;
  padding: 0.5rem 1rem; color: var(--ivory);
}

/* ---------- 12. WHY CHOOSE US ---------- */
.why-us{ background: var(--ivory); }
.why-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem;
  margin-top: 3.5rem;
}
.why-item{ border-top: 1px solid var(--taupe-light); padding-top: 1.5rem; }
.why-num{
  display:block; font-family: var(--font-heading); font-size:1.6rem; color: var(--taupe);
  margin-bottom: 0.75rem;
}
.why-item h3{ margin-bottom: 0.4rem; font-size:1.1rem; }
.why-item p{ color: var(--graphite); font-size:0.92rem; margin:0; }

/* ---------- 13. QUOTE / CONTACT ---------- */
.quote{ background: var(--cream); }
.quote-grid{
  display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 4rem;
  align-items:start;
}
.quote-info .lead{ margin-bottom: 2rem; }
.contact-list{ display:flex; flex-direction:column; gap: 1.1rem; }
.contact-list li{ display:flex; flex-direction:column; gap:0.15rem; }
.contact-label{ font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--stone); }
.contact-list a{ font-size:1.05rem; color: var(--charcoal); }
.contact-list a:hover{ color: var(--taupe); }

.quote-form{
  background: var(--ivory);
  border: 1px solid var(--taupe-light);
  border-radius: var(--radius-md);
  padding: 2.5rem;
}
.form-row{ margin-bottom: 1.4rem; }
.form-row-split{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form-row label, .form-row legend{
  display:block; font-size:0.8rem; font-weight:600; letter-spacing:0.03em;
  color: var(--charcoal); margin-bottom:0.5rem; padding:0;
}
.quote-form input[type="text"],
.quote-form input[type="tel"],
.quote-form select,
.quote-form textarea{
  width:100%; padding: 0.85rem 1rem;
  background: var(--white);
  border: 1px solid var(--taupe-light);
  border-radius: var(--radius-sm);
  color: var(--charcoal);
  transition: border-color .2s ease;
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus{
  outline:none; border-color: var(--taupe);
}
.quote-form fieldset{ border:none; padding:0; margin:0 0 1.4rem; }
.radio-group{ display:flex; gap:1.5rem; }
.radio-option{ display:flex !important; align-items:center; gap:0.5rem; font-size:0.92rem; font-weight:400 !important; color: var(--graphite); }
.radio-option input{ accent-color: var(--taupe); width:16px; height:16px; }
.form-note{ margin: 0.85rem 0 0; font-size:0.88rem; color: var(--taupe); min-height:1.2em; }
.form-note-error{ color:#a5473a; }

/* ---------- 14. FOOTER ---------- */
.site-footer{ background: var(--charcoal); color: var(--taupe-light); padding-top: 4rem; }
.footer-inner{
  display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem;
  padding-bottom: 3rem; border-bottom: 1px solid rgba(216,206,195,0.18);
}
.footer-brand{ display:flex; flex-wrap:wrap; align-items:center; gap:0.65rem; }
.footer-brand .logo-icon{ height:40px; }
.footer-brand .logo-word{ color: var(--ivory); }
.footer-brand p{ width:100%; margin-top: 0.85rem; font-size:0.88rem; color: var(--stone); }
.footer-nav{ display:flex; flex-direction:column; gap:0.7rem; }
.footer-nav a{ font-size:0.92rem; color: var(--taupe-light); }
.footer-nav a:hover{ color: var(--white); }
.footer-contact{ display:flex; flex-direction:column; gap:0.7rem; align-items:flex-start; }
.footer-contact a, .footer-contact span{ font-size:0.92rem; color: var(--taupe-light); }
.footer-contact a:hover{ color: var(--white); }
.footer-bottom{ padding: 1.5rem; text-align:center; }
.footer-bottom p{ margin:0; font-size:0.78rem; color: var(--stone); }

/* ---------- 15. REVEAL ANIMATION ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- 16. RESPONSIVE ---------- */
@media (max-width: 1024px){
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
  .projects-grid{ grid-template-columns: repeat(2, 1fr); }
  .why-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-inner{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }
}

@media (max-width: 860px){
  .quote-grid{ grid-template-columns: 1fr; gap: 2.5rem; }
  .mv-grid{ grid-template-columns: 1fr; gap: 2rem; }
  .mv-divider{ width:100%; height:1px; }
}

@media (max-width: 760px){
  :root{ --header-h: 68px; }
  .section{ padding: 4.5rem 0; }

  .main-nav{
    position:fixed; top: var(--header-h); left:0; right:0; bottom:0;
    background: var(--ivory);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding: 2rem 1.5rem; gap: 2rem;
    transform: translateX(100%);
    transition: transform .25s ease;
    overflow-y:auto;
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav ul{ flex-direction:column; gap: 1.4rem; }
  .main-nav ul a{ font-size: 1.1rem; }
  .nav-cta{ align-self:flex-start; }
  .nav-toggle{ display:flex; }

  .hero{ min-height: 92vh; }
  .hero-content{ padding-top: 1.5rem; }

  .services-grid, .projects-grid, .why-grid{ grid-template-columns: 1fr; }
  .form-row-split{ grid-template-columns: 1fr; }
  .footer-inner{ grid-template-columns: 1fr; text-align:left; }
  .quote-form{ padding: 1.75rem; }
  .btn-full{ width:100%; }

  .women-led-content{ padding: 4.5rem 1.5rem; }
}

/* ---------- 17. QUICK CONTACT BAR ----------
   Fixed quick-access bar: Text / Email / Instagram.
   Mobile: full-width bar pinned to the bottom of the screen.
   Desktop: compact pill, bottom-right, less intrusive.
   Auto-hides (see js/script.js) whenever the Contact section or footer is
   in view, so it never sits on top of the quote form or its submit button. */
.quick-contact-bar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 600;
  display:flex;
  justify-content: space-around;
  align-items: stretch;
  background: rgba(41,39,37,0.97);
  border-top: 1px solid rgba(216,206,195,0.18);
  padding: 0.45rem 0.5rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
  transition: transform .3s ease, opacity .3s ease;
  transform: translateY(0);
  opacity: 1;
}
.quick-contact-bar.qcb-hidden{
  transform: translateY(115%);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
  .quick-contact-bar{ transition: opacity .2s ease; }
  .quick-contact-bar.qcb-hidden{ transform: translateY(115%); }
}

.qcb-item{ position:relative; display:flex; flex:1; }

.qcb-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 0.22rem;
  flex: 1;
  padding: 0.3rem 0.25rem;
  min-height: 44px;
  color: var(--taupe-light);
  background: transparent;
  border: none;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}
.qcb-btn:hover, .qcb-btn:focus-visible{ color: var(--white); }
.qcb-btn:focus-visible{
  outline: 2px solid var(--taupe-light);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.qcb-btn svg{ width:21px; height:21px; }
.qcb-label{ font-size:0.62rem; letter-spacing:0.03em; text-transform:uppercase; }

.qcb-popover{
  position:absolute;
  bottom: calc(100% + 0.65rem);
  /* Anchored to the left edge of the Text button (the bar's first/leftmost
     item) rather than centered, so it never overflows off the left edge of
     narrow mobile screens. */
  left: 0;
  background: var(--ivory);
  border: 1px solid var(--taupe-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 0.4rem;
  display:flex; flex-direction:column; gap:0.2rem;
  min-width: 195px;
}
.qcb-popover[hidden]{ display:none; }
.qcb-popover a{
  display:block;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--charcoal);
  font-size:0.85rem;
  white-space:nowrap;
}
.qcb-popover a:hover, .qcb-popover a:focus-visible{ background: var(--taupe-light); outline:none; }

@media (min-width: 761px){
  .quick-contact-bar{
    left:auto; right: 1.75rem; bottom: 1.75rem;
    border-radius: 999px;
    border: 1px solid rgba(216,206,195,0.25);
    box-shadow: var(--shadow-soft);
    padding: 0.35rem 0.4rem;
    gap: 0.1rem;
  }
  .quick-contact-bar.qcb-hidden{ transform: translateY(20px); }
  .qcb-label{ display:none; }
  .qcb-btn{ flex:none; padding:0.6rem; min-width:44px; }
}