/* ========================================================================
   HEAVEN CLEANING SERVICES — Design Tokens & Base
   Navy/Ivory do the work. Gold is a restrained signature accent.
   ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@500;600&family=Montserrat:wght@500;600;700&family=Source+Sans+3:wght@400;500;600&display=swap');

:root{
  /* color */
  --navy: #0D1B2A;
  --navy-deep: #030E1D;
  --steel: #1E2E44;
  --gold: #DAAF37;
  --gold-soft: rgba(218,175,55,.35);
  --ivory: #F4F2ED;
  --ivory-dim: #EAE7DD;
  --stone: #8C9096;
  --white: #FFFFFF;

  /* type */
  --f-serif: 'Source Serif 4', Georgia, serif;
  --f-head: 'Montserrat', Arial, sans-serif;
  --f-body: 'Source Sans 3', Arial, sans-serif;

  /* rhythm */
  --rail-gap: 6px;
  --max: 1180px;
  --edge: clamp(24px, 5vw, 72px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--navy);
  font-family:var(--f-body);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

h1,h2,h3,h4{
  font-family:var(--f-head);
  font-weight:600;
  margin:0;
  letter-spacing:-.01em;
  text-wrap:balance;
}

p{margin:0}

.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--edge)}

.eyebrow{
  font-family:var(--f-head);
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{
  content:"";
  width:28px;
  height:1px;
  background:var(--gold);
  display:inline-block;
}
.eyebrow.on-dark{color:var(--gold)}

/* ---------- Rail motif — the recurring architectural device ---------- */
.rails{
  display:inline-flex;
  gap:var(--rail-gap);
  height:1em;
  vertical-align:middle;
}
.rails span{width:2px; background:currentColor; display:block}

.rail-reveal{
  position:relative;
  padding-top:34px;
}
.rail-reveal::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:1px; height:0;
  background:var(--gold);
  transition:height .9s cubic-bezier(.16,.8,.24,1);
}
.rail-reveal.in-view::before{height:26px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-head);
  font-weight:600;
  font-size:15.5px;
  letter-spacing:.02em;
  padding:15px 28px;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:var(--gold); color:var(--navy-deep)}
.btn-gold:hover{background:#E8C15A}
.btn-outline-light{border-color:rgba(244,242,237,.4); color:var(--ivory)}
.btn-outline-light:hover{border-color:var(--gold); color:var(--gold)}
.btn-outline-dark{border-color:rgba(13,27,42,.3); color:var(--navy)}
.btn-outline-dark:hover{border-color:var(--navy); background:var(--navy); color:var(--ivory)}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(13,27,42,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(218,175,55,.18);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px var(--edge);
  max-width:var(--max);
  margin:0 auto;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--ivory);
}
.brand svg, .brand img{width:34px; height:auto}
.brand-word{
  font-family:var(--f-serif);
  font-weight:600;
  font-size:19px;
  letter-spacing:.03em;
  color:var(--ivory);
}
.brand-sub{
  display:block;
  font-family:var(--f-head);
  font-size:9px;
  letter-spacing:.2em;
  color:var(--gold);
  margin-top:1px;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:34px;
  list-style:none;
  margin:0; padding:0;
}
.nav-links a{
  font-family:var(--f-head);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.03em;
  color:rgba(244,242,237,.78);
  transition:color .2s ease;
  position:relative;
  padding:4px 0;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--ivory)}
.nav-links a[aria-current="page"]::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-4px;
  height:1px; background:var(--gold);
}
.nav-cta{display:flex; align-items:center; gap:22px}
.nav-toggle{
  display:none;
  background:none; border:0; color:var(--ivory);
  font-size:24px; cursor:pointer;
}

@media (max-width:920px){
  .nav-links{
    position:fixed; inset:64px 0 0 0;
    background:var(--navy-deep);
    flex-direction:column;
    padding:36px var(--edge);
    gap:26px;
    transform:translateY(-8px);
    opacity:0; visibility:hidden;
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav-links.open{opacity:1; visibility:visible; transform:translateY(0)}
  .nav-toggle{display:block}
  .nav-cta .btn-outline-light{display:none}
}

/* ---------- Sections ---------- */
section{padding:96px 0}
@media (max-width:720px){ section{padding:64px 0} }

.section-dark{background:var(--navy); color:var(--ivory)}
.section-deep{background:var(--navy-deep); color:var(--ivory)}
.section-ivory{background:var(--ivory); color:var(--navy)}
.section-ivory-dim{background:var(--ivory-dim); color:var(--navy)}

.section-head{max-width:640px; margin-bottom:52px}
.section-head h2{font-size:clamp(28px,3.4vw,40px); margin-top:14px}
.section-dark .stone, .section-deep .stone{color:rgba(244,242,237,.62)}
.stone{color:var(--stone)}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-deep); color:rgba(244,242,237,.7); padding:64px 0 28px}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:44px;
  border-bottom:1px solid rgba(244,242,237,.12);
}
.footer-grid h4{
  font-family:var(--f-head); font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin-bottom:16px;
}
.footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.footer-grid a{font-size:15.5px; color:rgba(244,242,237,.72); transition:color .2s}
.footer-grid a:hover{color:var(--gold)}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:26px; font-size:14px; flex-wrap:wrap; gap:12px;
}
.footer-tagline{
  font-family:var(--f-head); font-size:11px; letter-spacing:.18em;
  color:rgba(244,242,237,.5);
}
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr; row-gap:32px} }

/* ---------- Utility grids/cards reused across pages ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(140,144,150,.25)}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:rgba(140,144,150,.25)}
@media (max-width:820px){ .grid-3{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr} }

.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.reveal.in-view{opacity:1; transform:none}