:root{
    --ink:#221f1a;
    --cream:#f6f2e8;
    --cream-dim:#eef0e4;
    --pine:#1e2b23;
    --pine-light:#2e4234;
    --sage:#8a9a72;
    --ochre:#c89a3e;
    --slate:#4c6072;
    --brique:#9b5a3c;
    --line: rgba(34,31,26,0.12);
    --radius: 14px;
    --maxw: 1120px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'Inter', -apple-system, sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}
  h1,h2,h3{
    font-family:'Fraunces', Georgia, serif;
    font-weight:600;
    line-height:1.08;
    margin:0 0 .5em;
    letter-spacing:-0.01em;
  }
  .eyebrow{
    font-family:'Space Mono', monospace;
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ochre);
    display:flex;
    align-items:center;
    gap:.6em;
    margin-bottom:1em;
  }
  .eyebrow::before{
    content:"";
    width:22px;height:2px;
    background:var(--ochre);
    display:inline-block;
  }
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
  section{scroll-margin-top:88px;}
  .btn{
    display:inline-flex;
    align-items:center;
    gap:.55em;
    font-family:'Space Mono', monospace;
    font-size:.82rem;
    letter-spacing:.04em;
    text-transform:uppercase;
    text-decoration:none;
    padding:.95em 1.5em;
    border-radius:999px;
    border:1px solid transparent;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    cursor:pointer;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--ochre); color:var(--pine);}
  .btn-primary:hover{box-shadow:0 10px 24px rgba(200,154,62,.35);}
  .btn-ghost{background:transparent; border-color:rgba(246,242,232,.4); color:var(--cream);}
  .btn-ghost:hover{background:rgba(246,242,232,.08);}
  .btn-dark{background:var(--pine); color:var(--cream);}
  .btn-dark:hover{box-shadow:0 10px 24px rgba(30,43,35,.25);}

  :focus-visible{outline:2px solid var(--ochre); outline-offset:3px;}

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:var(--cream);
    border-bottom:1px solid var(--line);
    box-shadow:0 1px 0 rgba(34,31,26,.02);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px;
    max-width:var(--maxw); margin:0 auto;
  }
  .brand{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:1.05rem;
    text-decoration:none;
    line-height:1.15;
  }
  .brand small{
    display:block;
    font-family:'Space Mono', monospace;
    font-size:.62rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--slate);
    font-weight:400;
  }
  .nav-links{
    display:flex; gap:2rem; list-style:none; margin:0; padding:0;
    font-size:.92rem;
  }
  .nav-links a{text-decoration:none; opacity:.8; transition:opacity .15s;}
  .nav-links a:hover{opacity:1;}
  .nav-cta{display:flex; align-items:center; gap:1rem;}
  .nav-phone{
    font-family:'Space Mono', monospace;
    font-size:.85rem;
    text-decoration:none;
    display:none;
  }
  .burger{
    display:none;
    background:none; border:none; cursor:pointer;
    flex-direction:column; gap:5px; padding:6px;
  }
  .burger span{width:22px; height:2px; background:var(--ink); display:block;}

  .mobile-menu{
    display:none;
    position:fixed; inset:0; z-index:60;
    background:var(--pine); color:var(--cream);
    padding:24px;
    flex-direction:column;
  }
  .mobile-menu.open{display:flex;}
  .mobile-menu .top{display:flex; justify-content:space-between; align-items:center;}
  .mobile-menu .close{background:none; border:none; color:var(--cream); font-size:1.6rem; cursor:pointer;}
  .mobile-menu ul{list-style:none; padding:0; margin:3rem 0 0; display:flex; flex-direction:column; gap:1.6rem;}
  .mobile-menu a{color:var(--cream); text-decoration:none; font-family:'Fraunces',serif; font-size:1.6rem;}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    background:radial-gradient(120% 140% at 15% 0%, var(--pine-light) 0%, var(--pine) 55%);
    color:var(--cream);
    overflow:hidden;
    padding:88px 0 72px;
  }
  .hero-stroke{
    position:absolute; right:-8%; top:-10%;
    width:620px; max-width:60vw;
    opacity:.35;
    pointer-events:none;
  }
  .hero-inner{
    max-width:var(--maxw); margin:0 auto; padding:0 24px;
    position:relative; z-index:2;
  }
  .hero h1{
    font-size:clamp(2.3rem, 4.4vw + 1rem, 4rem);
    font-style:italic;
    font-weight:500;
    max-width:14ch;
  }
  .hero p.lead{
    font-size:clamp(1.05rem, .4vw + 1rem, 1.25rem);
    max-width:46ch;
    color:rgba(246,242,232,.86);
    margin:0 0 2.2rem;
  }
  .hero-ctas{display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:3rem;}
  .facts{
    display:flex; flex-wrap:wrap; gap:.5rem 1.6rem;
    font-family:'Space Mono', monospace;
    font-size:.78rem;
    letter-spacing:.03em;
    color:rgba(246,242,232,.72);
    padding-top:1.8rem;
    border-top:1px solid rgba(246,242,232,.16);
  }
  .facts span{display:flex; align-items:center; gap:.5em;}
  .facts span::before{content:"●"; color:var(--ochre); font-size:.6rem;}

  /* ---------- generic section spacing ---------- */
  .section{padding:88px 0;}
  .section-cream-dim{background:var(--cream-dim);}
  .section-head{max-width:640px; margin-bottom:3rem;}
  .section-head h2{font-size:clamp(1.7rem, 2vw + 1rem, 2.5rem);}
  .section-head p{color:rgba(34,31,26,.72); font-size:1.05rem; margin:0;}

  /* ---------- nuancier / services ---------- */
  .swatches{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:22px;
  }
  .swatch{
    background:#fff;
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--line);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .swatch:hover{transform:translateY(-6px); box-shadow:0 18px 30px rgba(34,31,26,.12);}
  .swatch-top{
    height:128px;
    display:flex; align-items:center; justify-content:center;
  }
  .swatch-icon-badge{
    width:66px; height:66px;
    border-radius:18px;
    background:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 18px rgba(34,31,26,.16);
  }
  .swatch-icon-badge img{width:40px; height:40px; object-fit:contain; display:block;}
  .swatch-body{padding:22px 20px 26px;}
  .swatch-code{
    font-family:'Space Mono', monospace;
    font-size:.72rem;
    letter-spacing:.08em;
    color:rgba(34,31,26,.5);
    display:block;
    margin-bottom:.6em;
  }
  .swatch-body h3{font-size:1.15rem; margin-bottom:.4em;}
  .swatch-body p{margin:0; font-size:.92rem; color:rgba(34,31,26,.72);}
  .s-01 .swatch-top{background:var(--sage);}
  .s-02 .swatch-top{background:var(--ochre);}
  .s-03 .swatch-top{background:var(--slate);}
  .s-04 .swatch-top{background:var(--brique);}

  /* ---------- process ---------- */
  .steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    position:relative;
  }
  .step{padding-right:24px; position:relative;}
  .step:not(:last-child)::after{
    content:"";
    position:absolute; top:14px; right:-2px; left:calc(2.6rem + 12px);
    border-top:1px dashed var(--line);
  }
  .step-num{
    font-family:'Space Mono', monospace;
    font-size:1.5rem;
    color:var(--ochre);
    display:block;
    margin-bottom:.5em;
  }
  .step h3{font-size:1.05rem; margin-bottom:.4em;}
  .step p{margin:0; font-size:.9rem; color:rgba(34,31,26,.7);}

  /* ---------- about ---------- */
  .about-photo{
    margin:2.6rem 0 3rem;
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:0 24px 48px rgba(34,31,26,.16);
    border:1px solid var(--line);
  }
  .about-photo img{width:100%; height:auto; display:block;}
  .about-points{
    list-style:none; padding:0; margin:0;
    display:grid; grid-template-columns:repeat(2,1fr);
    gap:1rem 2.4rem;
    max-width:760px;
  }
  .about-points li{
    display:flex; gap:.8em; align-items:flex-start;
    font-size:.96rem;
  }
  .about-points li::before{
    content:"";
    width:6px; height:6px; border-radius:50%;
    background:var(--ochre);
    margin-top:.55em; flex:none;
  }

  /* ---------- zones ---------- */
  .zones-wrap{display:flex; flex-wrap:wrap; gap:.7rem;}
  .zone{
    font-family:'Space Mono', monospace;
    font-size:.82rem;
    padding:.6em 1.1em;
    border-radius:999px;
    border:1px solid var(--line);
    background:#fff;
  }

  /* ---------- contact ---------- */
  .contact{
    background:var(--pine);
    color:var(--cream);
  }
  .contact .section-head p{color:rgba(246,242,232,.75);}
  .contact .eyebrow{color:var(--ochre);}
  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
  }
  .contact-info dl{margin:0; display:grid; gap:1.4rem;}
  .contact-info dt{
    font-family:'Space Mono', monospace;
    font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
    color:rgba(246,242,232,.55); margin-bottom:.35em;
  }
  .contact-info dd{margin:0; font-size:1.05rem;}
  .contact-info a{text-decoration:none;}
  .contact-info a:hover{text-decoration:underline;}
  .big-phone{
    font-family:'Fraunces', serif; font-style:italic;
    font-size:clamp(1.6rem, 2vw + 1rem, 2.2rem);
    text-decoration:none;
    display:inline-block;
    margin:.2em 0 .1em;
  }

  form.contact-form{display:grid; gap:14px;}
  .contact-form label{
    font-family:'Space Mono', monospace;
    font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
    color:rgba(246,242,232,.6);
    display:block; margin-bottom:.4em;
  }
  .contact-form input, .contact-form textarea{
    width:100%;
    background:rgba(246,242,232,.06);
    border:1px solid rgba(246,242,232,.24);
    border-radius:8px;
    padding:.85em 1em;
    color:var(--cream);
    font-family:'Inter', sans-serif;
    font-size:.95rem;
  }
  .contact-form input::placeholder, .contact-form textarea::placeholder{color:rgba(246,242,232,.4);}
  .contact-form textarea{resize:vertical; min-height:110px;}

  /* ---------- sister brand (roofing) ---------- */
  #autre-metier .section-head{max-width:720px;}
  #autre-metier .section-head p{color:rgba(34,31,26,.75); font-size:1.02rem;}

  .roof-gallery{
    display:flex;
    gap:14px;
    margin:2.4rem 0 2rem;
    align-items:flex-start;
  }
  .roof-col{
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .roof-gallery img{
    width:100%; height:auto; display:block;
    border-radius:calc(var(--radius) - 4px);
    border:1px solid var(--line);
  }

  /* ---------- footer ---------- */
  footer{
    background:var(--pine); color:rgba(246,242,232,.6);
    border-top:1px solid rgba(246,242,232,.14);
    padding:28px 0 100px;
  }
  .footer-inner{
    display:flex; flex-wrap:wrap; gap:1rem;
    justify-content:space-between; align-items:center;
    font-size:.82rem;
  }
  footer a{color:rgba(246,242,232,.75); text-decoration:none;}
  footer a:hover{text-decoration:underline;}

  /* ---------- mobile call bar ---------- */
  .call-bar{
    display:none;
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:var(--pine);
    color:var(--cream);
    padding:14px 20px;
    text-decoration:none;
    align-items:center; justify-content:center; gap:.6em;
    font-family:'Space Mono', monospace;
    font-size:.85rem; letter-spacing:.03em; text-transform:uppercase;
    border-top:1px solid rgba(246,242,232,.15);
  }

  [data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
  [data-reveal].is-visible{opacity:1; transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    [data-reveal]{opacity:1; transform:none; transition:none;}
    .btn:hover{transform:none;}
    .swatch:hover{transform:none;}
  }

  @media (max-width:980px){
    .about-points{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr; gap:40px;}
    .swatches{grid-template-columns:repeat(2,1fr);}
    .steps{grid-template-columns:repeat(2,1fr); row-gap:32px;}
    .step:nth-child(2)::after{display:none;}
    .step:not(:last-child)::after{display:none;}
  }

  @media (max-width:720px){
    .nav-links{display:none;}
    .nav-phone{display:none;}
    .burger{display:flex;}
    .call-bar{display:flex;}
    footer{padding-bottom:110px;}
    .swatches{grid-template-columns:1fr;}
    .steps{grid-template-columns:1fr;}
    .section{padding:64px 0;}
    .hero{padding:64px 0 48px;}
  }

/* ---------- FAQ ---------- */
.faq-list{
  display:grid;
  gap:12px;
  max-width:820px;
}
.faq-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.faq-item summary{
  padding:1.1em 1.4em;
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.05rem;
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1em;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";
  font-family:'Space Mono', monospace;
  font-size:1.2rem;
  color:var(--ochre);
  flex:none;
  transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{
  margin:0;
  padding:0 1.4em 1.3em;
  color:rgba(34,31,26,.75);
  font-size:.98rem;
  line-height:1.6;
}

/* ---------- zone links ---------- */
.zone{
  text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
a.zone:hover{background:var(--pine); color:var(--cream); border-color:var(--pine);}

/* ---------- city landing pages ---------- */
.breadcrumb{
  font-family:'Space Mono', monospace;
  font-size:.75rem;
  letter-spacing:.03em;
  color:rgba(246,242,232,.6);
  margin-bottom:1.4rem;
}
.breadcrumb a{color:rgba(246,242,232,.75); text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}
.pagehero{
  background:radial-gradient(120% 140% at 15% 0%, var(--pine-light) 0%, var(--pine) 55%);
  color:var(--cream);
  padding:56px 0 64px;
}
.pagehero h1{
  font-size:clamp(2rem, 3.4vw + 1rem, 3.2rem);
  font-style:italic;
  font-weight:500;
  max-width:16ch;
}
.pagehero p{
  font-size:1.1rem;
  max-width:60ch;
  color:rgba(246,242,232,.86);
  margin:0;
}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 24px;}
.wrap-narrow p{font-size:1.03rem; color:rgba(34,31,26,.78); margin-bottom:1.2em;}
.wrap-narrow h2{margin-top:0;}
.citylink-grid{
  display:flex; flex-wrap:wrap; gap:.7rem;
  margin-top:1rem;
}
.citylink-grid a{
  font-family:'Space Mono', monospace;
  font-size:.82rem;
  padding:.6em 1.1em;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  text-decoration:none;
  color:var(--ink);
  transition:background .15s ease, color .15s ease;
}
.citylink-grid a:hover{background:var(--pine); color:var(--cream); border-color:var(--pine);}
.citylink-grid a.current{background:var(--ochre); color:var(--pine); border-color:var(--ochre); font-weight:700;}