/*
Theme Name: Rich Heights
Theme URI: https://richheights.com
Author: Rich Heights Construction Pvt. Ltd.
Description: Clean, lightweight custom theme for Rich Heights Construction Private Limited — building construction, waterproofing, retrofitting, plaster, painting and repair & maintenance works.
Version: 1.1
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: richheights
*/

/* Rich Heights Construction — design draft v1 (lightweight, no frameworks) */
:root{
  --olive:#B7AC29;
  --olive-bright:#D0C643;
  --olive-dark:#8A811D;
  --char:#1D2023;
  --char-2:#26292D;
  --ink:#2E3236;
  --muted:#5C6266;
  --grey-bg:#F4F4F0;
  --line:#E4E4DB;
  --white:#fff;
  --radius:10px;
  --shadow:0 6px 24px rgba(29,32,35,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);line-height:1.6;background:var(--white)}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.2;color:var(--char);font-weight:700}
h2{font-size:2rem}
.section{padding:76px 0}
.section-grey{background:var(--grey-bg)}

/* ── Preloader ─────────────────────────── */
#preloader{position:fixed;inset:0;z-index:999;background:var(--char);display:flex;align-items:center;justify-content:center;transition:opacity .45s ease,visibility .45s}
#preloader.done{opacity:0;visibility:hidden}
.pre-inner{text-align:center;animation:preIn .6s ease both}
.pre-inner img{width:86px;height:86px;object-fit:contain;background:#fff;border-radius:12px;padding:8px;margin:0 auto 14px}
.pre-name{color:#fff;font-weight:800;letter-spacing:3px;font-size:1.05rem}
.pre-sub{color:var(--olive-bright);letter-spacing:4px;font-size:.68rem;margin-top:4px}
@keyframes preIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}

/* ── Top bar ───────────────────────────── */
.topbar{background:var(--char);color:#C9CCCE;font-size:.82rem}
.topbar-in{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
.topbar a{color:var(--olive-bright)}
.topbar a:hover{text-decoration:underline}
.tb-sep{margin:0 8px;color:#555}

/* ── Header ────────────────────────────── */
.site-header{position:sticky;top:0;z-index:200;background:#fff;border-bottom:3px solid var(--olive);box-shadow:0 2px 10px rgba(0,0,0,.05)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:52px;height:52px;object-fit:contain}
.brand-name{display:block;font-weight:800;font-size:1.18rem;letter-spacing:1.5px;color:var(--char);line-height:1.1}
.brand-sub{display:block;font-size:.66rem;letter-spacing:3.2px;color:var(--olive-dark);font-weight:700}
.main-nav{display:flex;align-items:center;gap:4px}
.main-nav a{padding:8px 10px;font-size:.92rem;font-weight:600;color:var(--ink);border-radius:6px;white-space:nowrap}
.main-nav a:hover{color:var(--olive-dark);background:var(--grey-bg)}
.main-nav a.nav-cta{background:var(--olive);color:#fff;margin-left:6px}
.main-nav a.nav-cta:hover{background:var(--olive-dark)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:26px;height:3px;background:var(--char);margin:5px 0;border-radius:2px}

/* ── Hero ──────────────────────────────── */
.hero{position:relative;height:78vh;min-height:520px;max-height:720px;background:var(--char);overflow:hidden}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;background-color:var(--char-2);opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.hero-slide.is-active{opacity:1;pointer-events:auto}
.hero-slide.is-active .hero-content>*{animation:heroUp .8s ease both}
.hero-slide.is-active .hero-content>*:nth-child(2){animation-delay:.12s}
.hero-slide.is-active .hero-content>*:nth-child(3){animation-delay:.24s}
.hero-slide.is-active .hero-content>*:nth-child(4){animation-delay:.36s}
@keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.hero-slide::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;background-image:inherit;animation:kenburns 7s ease both;opacity:.9}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,22,24,.82) 0%,rgba(20,22,24,.55) 55%,rgba(20,22,24,.25) 100%)}
.hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;max-width:1180px}
.hero-content>*{max-width:640px}
.hero-kicker{color:var(--olive-bright);font-weight:700;letter-spacing:2.5px;text-transform:uppercase;font-size:.8rem;margin-bottom:14px}
.hero h1{color:#fff;font-size:2.9rem;margin-bottom:16px}
.hero-sub{color:#E8E9E4;font-size:1.12rem;margin-bottom:28px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 26px;border-radius:6px;font-weight:700;font-size:.95rem;transition:background .25s,transform .25s}
.btn:hover{transform:translateY(-2px)}
.btn-olive{background:var(--olive);color:#fff}
.btn-olive:hover{background:var(--olive-dark)}
.btn-ghost{border:2px solid #fff;color:#fff;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-dark{background:var(--char);color:#fff}
.btn-dark:hover{background:var(--olive-dark)}
.hero-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;z-index:5;display:flex;gap:8px}
.hero-dots .dot{width:30px;height:5px;border:0;border-radius:3px;background:rgba(255,255,255,.4);cursor:pointer;padding:0}
.hero-dots .dot.is-active{background:var(--olive-bright)}

/* ── Hero skyline (line-drawn buildings, draw once on load) ── */
.hero-sky{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;opacity:.5;overflow:hidden}
.hero-sky svg{display:block;width:100%;height:200px}
.hero-sky path{fill:none;stroke:var(--olive-bright);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:skyDraw 1.4s ease-out forwards;animation-delay:var(--d,0s)}
@keyframes skyDraw{to{stroke-dashoffset:0}}

/* ── Stats ─────────────────────────────── */
.stats{background:var(--olive)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:48px 20px}
.stat{text-align:center}
.stat-num{font-size:2.9rem;font-weight:800;color:var(--char);line-height:1}
.stat-label{color:rgba(29,32,35,.78);font-size:.92rem;font-weight:600;margin-top:8px}

/* ── Section heads ─────────────────────── */
.sec-kicker{color:var(--olive-dark);font-weight:700;letter-spacing:2.5px;text-transform:uppercase;font-size:.78rem;margin-bottom:8px}
.sec-head{max-width:720px;margin-bottom:42px}
.sec-head h2{margin-bottom:8px}
.sec-sub{color:var(--muted)}
.sec-head.light h2{color:#fff}
.sec-head.light .sec-kicker{color:var(--olive-bright)}

/* ── About ─────────────────────────────── */
.about-grid{display:grid;grid-template-columns:1.25fr .85fr;gap:48px;align-items:start}
.about-text p{color:var(--muted);margin:14px 0}
.about-text .btn{margin-top:10px}
.about-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px}
.about-card img{max-height:190px;width:auto;margin:0 auto 18px;object-fit:contain}
.about-points{list-style:none}
.about-points li{padding:9px 0 9px 20px;border-top:1px solid var(--line);position:relative;color:var(--muted);font-size:.95rem}
.about-points li::before{content:"";position:absolute;left:0;top:17px;width:9px;height:9px;background:var(--olive);border-radius:2px}
.about-points strong{color:var(--char)}

/* ── Cards ─────────────────────────────── */
.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service-card,.why-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--olive);border-radius:var(--radius);padding:28px 24px;transition:transform .25s,box-shadow .25s}
.service-card:hover,.why-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.svc-icon{font-size:1.9rem;color:var(--olive-dark);margin-bottom:12px}
.service-card h3,.why-card h3{font-size:1.08rem;margin-bottom:10px}
.service-card p,.why-card p{color:var(--muted);font-size:.94rem}

/* ── Profile strip ─────────────────────── */
.profile-strip{background:var(--char-2);padding:76px 0}
.profile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.profile-item{border:1px solid #3A3E42;border-left:4px solid var(--olive);border-radius:8px;padding:24px;background:rgba(255,255,255,.03)}
.profile-item h3{color:#fff;font-size:1.05rem;margin-bottom:8px}
.profile-item p{color:#B9BDC0;font-size:.93rem}

/* ── Project ───────────────────────────── */
.project-card{display:grid;grid-template-columns:1.5fr .7fr;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#fff}
.project-body{padding:38px}
.status-pill{display:inline-block;background:#EEF3D9;color:var(--olive-dark);font-weight:700;font-size:.8rem;padding:5px 12px;border-radius:20px;margin-bottom:14px}
.project-body h3{font-size:1.5rem;margin-bottom:10px}
.project-body>p{color:var(--muted);margin-bottom:22px}
.project-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px}
.project-meta dt{font-size:.76rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--olive-dark);font-weight:700}
.project-meta dd{font-weight:600;color:var(--char)}
.project-side{background:var(--grey-bg);border-left:1px solid var(--line);padding:38px 30px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.project-side-title{font-weight:700;color:var(--char)}
.project-side p{color:var(--muted);font-size:.94rem}
.project-side .btn{align-self:flex-start}

/* ── Completed projects grid ───────────── */
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.work-card{border:1px solid var(--line);border-top:4px solid var(--olive);border-radius:var(--radius);background:#fff;padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.work-dept{font-size:1.04rem;margin-bottom:8px}
.work-name{color:var(--muted);font-size:.94rem;flex:1}
.work-meta{display:flex;gap:12px 26px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px;margin-top:18px}
.work-meta span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:1.6px;color:var(--olive-dark);font-weight:700}
.work-meta strong{font-weight:600;color:var(--char);font-size:.93rem}

/* ── Company details strip ─────────────── */
.company-details{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:22px}
.detail-box{background:#fff;border-top:4px solid var(--olive);border-radius:8px;padding:20px 22px}
.detail-label{font-size:.74rem;text-transform:uppercase;letter-spacing:1.8px;color:var(--olive-dark);font-weight:700;margin-bottom:6px}
.detail-value{font-weight:700;color:var(--char);font-size:1rem}

/* ── Clients — big slow carousel ───────── */
.marquee{overflow:hidden;padding:16px 0 10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee-track{display:flex;gap:26px;width:max-content;animation:marquee 58s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.client-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);width:320px;height:190px;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:22px;text-align:center;box-shadow:0 4px 18px rgba(0,0,0,.05)}
.client-card img{max-height:96px;max-width:220px;object-fit:contain}
.client-card span{font-size:.95rem;font-weight:600;color:var(--ink);line-height:1.3}
.client-card.name-only span{font-size:1.18rem;font-weight:700;color:var(--char);line-height:1.45}

/* ── Careers note ──────────────────────── */
.careers-note{margin-top:30px;color:var(--muted);text-align:center}
.careers-note a{color:var(--olive-dark);font-weight:600}

/* ── CTA band ──────────────────────────── */
.cta-band{background:var(--olive-dark);padding:56px 0}
.cta-in{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.cta-band h2{color:#fff;margin-bottom:6px}
.cta-band p{color:#F0EFD8}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.cta-band .btn-olive{background:var(--char)}
.cta-band .btn-olive:hover{background:#000}

/* ── Footer ────────────────────────────── */
.site-footer{background:var(--char);color:#B9BDC0}
.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr 1.1fr;gap:36px;padding:58px 20px 40px}
.footer-brand{display:flex;gap:12px;align-items:center;color:#fff;font-weight:800;letter-spacing:1.5px;line-height:1.25;margin-bottom:14px}
.footer-brand img{width:46px;height:46px;object-fit:contain;background:#fff;border-radius:8px;padding:4px}
.footer-brand small{color:var(--olive-bright);font-size:.62rem;letter-spacing:2.6px}
.footer-col h4{color:#fff;font-size:1rem;margin-bottom:14px}
.footer-col a{display:block;padding:4px 0;font-size:.94rem}
.footer-col a:hover{color:var(--olive-bright)}
.footer-col p{font-size:.94rem;margin-bottom:10px}
.footer-legal{border-top:1px solid #33373B;padding:18px 0;font-size:.84rem}
.legal-in{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ── Scroll reveal ─────────────────────── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ── Responsive ────────────────────────── */
@media (max-width:1020px){
  .cards-4,.cards-3,.profile-grid,.works-grid,.company-details{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero h1{font-size:2.3rem}
}
@media (max-width:820px){
  .nav-toggle{display:block}
  .main-nav{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:12px 16px 18px;box-shadow:0 14px 24px rgba(0,0,0,.12);display:none}
  .main-nav.open{display:flex}
  .main-nav a{padding:11px 10px;border-bottom:1px solid var(--line)}
  .main-nav a.nav-cta{margin:10px 0 0;text-align:center;border-bottom:0}
  .site-header{position:sticky}
  .header-in{position:relative}
  .about-grid{grid-template-columns:1fr}
  .project-card{grid-template-columns:1fr}
  .project-side{border-left:0;border-top:1px solid var(--line)}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:32px 16px}
  .hero{height:auto;min-height:580px}
  .hero-sky svg{height:110px}
  .hero h1{font-size:1.9rem}
  .hero-sub{font-size:1rem}
  .section{padding:56px 0}
  .topbar-in{justify-content:center;text-align:center}
  .tb-left{display:none}
}
@media (max-width:520px){
  .cards-4,.cards-3,.profile-grid,.works-grid,.company-details{grid-template-columns:1fr}
  .project-meta{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .client-card{width:252px;height:158px;padding:16px}
  .client-card img{max-height:76px;max-width:180px}
  h2{font-size:1.6rem}
  .cta-in{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track,.hero-slide::before{animation:none}
  .hero-sky path{animation:none;stroke-dashoffset:0}
  .reveal{opacity:1;transform:none;transition:none}
}