/* Rooftop Reports — cleaned professional styling, Lawson-Taylor inspired */

:root{
  --ink:#17202a;
  --muted:#62707f;
  --bg:#ffffff;
  --soft:#f5f7f8;
  --soft-2:#eef3f4;
  --line:#dde5e8;
  --accent:#1f8f83;
  --accent-2:#166a62;
  --dark:#18222b;
  --maxw:1120px;
  --radius:10px;
  --shadow:0 16px 40px rgba(18,31,41,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{
  max-width:100%;
  height:auto;
}

a{
  color:var(--accent-2);
  text-decoration:none;
}

a:hover{text-decoration:underline}

.wrap{
  width:min(var(--maxw), calc(100% - 40px));
  margin:0 auto;
  padding:0;
}

/* Header / nav */
.header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid rgba(221,229,232,.9);
  backdrop-filter:saturate(150%) blur(10px);
}

.nav{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
}

.nav .logo{
  display:flex;
  align-items:center;
  text-decoration:none;
}

.nav .logo img{
  height:52px;
  width:auto;
  display:block;
  object-fit:contain;
}

.nav .links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:1.15rem;
  flex-wrap:wrap;
}

.nav .links a{
  position:relative;
  color:#2c3742;
  font-size:.82rem;
  font-weight:750;
  letter-spacing:.055em;
  text-transform:uppercase;
  line-height:1;
  padding:.35rem 0;
  text-decoration:none;
}

.nav .links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-.15rem;
  width:100%;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .18s ease;
}

.nav .links a:hover{
  color:var(--accent-2);
}

.nav .links a:hover::after,
.nav .links a.active::after{
  transform:scaleX(1);
  transform-origin:left;
}

.nav .links a:focus-visible{
  outline:3px solid rgba(31,143,131,.25);
  outline-offset:5px;
  border-radius:4px;
}

/* Typography */
.kicker,
.eyebrow{
  color:var(--accent-2);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

h1,h2,h3{
  color:var(--ink);
  line-height:1.08;
  letter-spacing:-.035em;
}

h1{
  font-size:clamp(2.35rem,6vw,4.85rem);
  max-width:920px;
  margin:.7rem 0 1rem;
  font-weight:850;
}

h2{
  font-size:clamp(1.65rem,3vw,2.35rem);
  margin:0 0 .75rem;
  font-weight:820;
}

h3{
  font-size:1.05rem;
  margin:.15rem 0 .45rem;
  font-weight:800;
  letter-spacing:-.02em;
}

.lede,
.sub{
  color:var(--muted);
  font-size:clamp(1.02rem,1.7vw,1.22rem);
  line-height:1.75;
  max-width:760px;
  margin:0;
}

.small{font-size:.92rem}
.muted{color:var(--muted)}

/* Buttons */
.btn,
.btn-primary,
.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:.72rem 1.05rem;
  border-radius:4px;
  border:1px solid var(--accent-2);
  font-weight:800;
  font-size:.86rem;
  letter-spacing:.045em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}

.btn,
.btn-primary{
  background:var(--accent-2);
  color:#fff;
}

.btn:hover,
.btn-primary:hover{
  background:var(--dark);
  border-color:var(--dark);
  text-decoration:none;
  transform:translateY(-1px);
}

.btn-ghost{
  background:transparent;
  color:var(--accent-2);
}

.btn-ghost:hover{
  background:var(--accent-2);
  color:#fff;
  text-decoration:none;
  transform:translateY(-1px);
}

/* Hero */
.hero-min,
.hero{
  padding:clamp(56px,8vw,104px) 0 clamp(34px,5vw,64px);
  background:#fff;
  position:relative;
  overflow:hidden;
}

.hero-min::before,
.hero::before{
  content:none !important;
  display:none !important;
}

.cta-row{
  display:flex;
  align-items:center;
  gap:.8rem 1rem;
  flex-wrap:wrap;
  margin-top:1.6rem;
}

.cta-row .small{
  flex-basis:100%;
  margin:0 0 .15rem;
  color:var(--muted);
}

.hero-visual{
  margin-top:2.1rem;
  border-radius:2px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow);
  border:1px solid rgba(221,229,232,.8);
}

/* IMPORTANT FIX:
   Do not crop the hero image. This keeps the bottom stats/logo visible. */
.hero-visual img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  display:block;
}

/* Sections / cards */
.section{
  padding:clamp(44px,7vw,78px) 0;
  border-top:1px solid var(--line);
}

.grid-3,
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}

.vcard,
.card{
  background:#fff;
  padding:clamp(1.25rem,2.6vw,2rem);
  border:0;
  border-radius:0;
  box-shadow:none;
}

.vcard:hover,
.card:hover{
  background:#fbfcfc;
}

.mini-icon{
  width:20px;
  height:20px;
  vertical-align:-4px;
  margin-right:.45rem;
  color:var(--accent-2);
}

.list-clean{
  margin:.8rem 0 0;
  padding-left:1.1rem;
  color:var(--muted);
}

.list-clean li{
  margin:.3rem 0;
}

.stat{
  font-size:1.9rem;
  font-weight:850;
}

/* One-pager */
.onepager-block{
  padding:clamp(44px,7vw,78px) 0;
  border-top:1px solid var(--line);
}

.onepager-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.25rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}

.onepager-actions{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  align-items:center;
}

.small-muted{
  font-size:.9rem;
  color:var(--muted);
}

.onepager-embed-wrap{
  display:flex;
  justify-content:center;
  margin-top:1.25rem;
}

.onepager-embed{
  width:min(760px,100%);
  border:1px solid var(--line);
  border-radius:2px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow);
}

.onepager-embed object,
.onepager-embed iframe,
.onepager-embed embed{
  width:100%;
  height:440px;
  display:block;
}

/* Footer */
.footer{
  border-top:1px solid var(--line);
  background:var(--dark);
  color:rgba(255,255,255,.7);
  font-size:.92rem;
  padding:1.5rem 0;
}

.footer .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

.footer a{
  color:#fff;
  text-decoration:none;
}

.footer a:hover{
  text-decoration:underline;
}

.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
}

.brand img{
  height:30px;
  width:auto;
  background:#fff;
  border-radius:2px;
  padding:2px;
}

.trackit-footer strong{
  color:#fff;
}

.trackit-footer{
  color:rgba(255,255,255,.78);
}

/* Mobile */
@media (max-width:980px){
  .grid-3,
  .cards{
    grid-template-columns:1fr;
  }

  h1{
    font-size:clamp(2.25rem,11vw,3.4rem);
  }
}

@media (max-width:720px){
  .wrap{
    width:min(100% - 28px,var(--maxw));
  }

  .nav{
    min-height:auto;
    flex-direction:column;
    align-items:flex-start;
    padding:1rem 0;
    gap:.9rem;
  }

  .nav .logo img{
    height:58px;
  }

  .nav .links{
    width:100%;
    justify-content:flex-start;
    gap:.85rem 1rem;
    padding-top:.8rem;
    border-top:1px solid var(--line);
  }

  .nav .links a{
    font-size:.76rem;
  }

  .hero-min,
  .hero{
    padding:42px 0 34px;
  }

  .hero-visual{
    margin-top:1.5rem;
  }

  .cta-row{
    align-items:stretch;
  }

  .btn,
  .btn-primary,
  .btn-ghost{
    width:100%;
  }

  .onepager-header{
    align-items:flex-start;
  }

  .onepager-actions{
    width:100%;
  }

  .onepager-embed object,
  .onepager-embed iframe,
  .onepager-embed embed{
    height:320px;
  }

  .footer .wrap{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media print{
  .header,
  .btn,
  .btn-primary,
  .btn-ghost{
    display:none!important;
  }

  .card,
  .vcard{
    box-shadow:none;
    border:1px solid #ccc;
  }
}

/* Final safeguard: no split/gradient backgrounds in hero areas */
.hero,
.hero-min,
main,
body{
  background-color:#ffffff;
}

.hero::before,
.hero-min::before{
  content:none !important;
  display:none !important;
}