/* ============================================
   J&J DRYWALL — Premium Website Styles
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600&family=Geist:wght@300;400;500;600;700;800&display=swap');

:root {
  --black:   #0A0A0A;
  --black2:  #111111;
  --black3:  #1A1A1A;
  --black4:  #222222;
  --red:     #C41E3A;
  --red2:    #8B1520;
  --white:   #FFFFFF;
  --w90: rgba(255,255,255,.90);
  --w70: rgba(255,255,255,.70);
  --w50: rgba(255,255,255,.50);
  --w20: rgba(255,255,255,.20);
  --w10: rgba(255,255,255,.10);
  --w05: rgba(255,255,255,.05);
  --fh: 'Cormorant Garamond', 'Garamond', Georgia, serif;
  --fu: 'Geist', system-ui, sans-serif;
  --fb: 'Geist', system-ui, sans-serif;
  --ease: cubic-bezier(.25,.46,.45,.94);
  --t: .35s var(--ease);
  --shadow: 0 24px 64px rgba(0,0,0,.45);
  --sr: 0 8px 32px rgba(196,30,58,.35);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--fb);background:var(--black);color:var(--white);line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit;transition:var(--t)}
ul{list-style:none}
button{cursor:pointer;font-family:inherit}

h1,h2,h3,h4,h5{font-family:var(--fh);line-height:1.1;font-weight:800}

.lbl{display:block;font-family:var(--fu);font-size:.7rem;font-weight:700;letter-spacing:.35em;text-transform:uppercase;color:var(--red);margin-bottom:.9rem}
.ttl{font-size:clamp(2rem,4.5vw,3.75rem);font-weight:900;margin-bottom:1.25rem}
.sub{font-size:1.05rem;color:var(--w70);line-height:1.85;max-width:580px}
.line{width:52px;height:3px;background:var(--red);margin:1.1rem 0}
.line.c{margin:1.1rem auto}

.container{max-width:1300px;margin:0 auto;padding:0 2rem}
.section{padding:7rem 0}
.sec-dark{background:var(--black)}
.sec-dim{background:var(--black2)}
.sec-dim2{background:var(--black3)}
.sec-head{margin-bottom:4rem}
.sec-head.c{text-align:center}
.sec-head.c .sub{margin:0 auto}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.95rem 2.1rem;font-family:var(--fu);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:none;transition:var(--t);white-space:nowrap}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn-red{background:var(--red);color:var(--white)}
.btn-red:hover{background:#e0223f;transform:translateY(-2px);box-shadow:var(--sr)}
.btn-outline{background:transparent;color:var(--white);border:2px solid var(--w50)}
.btn-outline:hover{border-color:var(--white);background:var(--w10)}
.btn-white{background:var(--white);color:var(--red)}
.btn-white:hover{background:var(--black);color:var(--white);transform:translateY(-2px)}
.btn-outline-w{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.4)}
.btn-outline-w:hover{background:rgba(255,255,255,.12);border-color:var(--white)}
.btn-lg{padding:1.2rem 2.75rem;font-size:.85rem}

/* ============================================
   NAVBAR
   ============================================ */
.navbar{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:1.4rem 0;transition:padding .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)}
.navbar.scrolled{background:rgba(10,10,10,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:.85rem 0;border-bottom:1px solid var(--w10);box-shadow:0 4px 40px rgba(0,0,0,.6)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1300px;margin:0 auto;padding:0 2rem}
.nav-logo img{height:58px;width:auto;transition:var(--t)}
.navbar.scrolled .nav-logo img{height:48px}
.nav-links{display:flex;align-items:center;gap:1.8rem}
.nav-links a{font-family:var(--fu);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--w70);position:relative;padding-bottom:4px}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--red);transition:width .3s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--white)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{background:var(--red)!important;color:var(--white)!important;padding:.55rem 1.3rem!important;font-size:.72rem!important}
.nav-cta::after{display:none!important}
.nav-cta:hover{background:#e0223f!important;transform:translateY(-1px)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:5px}
.hamburger span{display:block;width:24px;height:2px;background:var(--white);transition:var(--t)}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob-menu{display:none;position:fixed;inset:0;background:var(--black);z-index:999;flex-direction:column;align-items:center;justify-content:center;gap:1.75rem;opacity:0;transition:opacity .3s}
.mob-menu.open{display:flex;opacity:1}
.mob-menu a{font-family:var(--fh);font-size:2.2rem;font-weight:700;color:var(--white);text-align:center}
.mob-menu a:hover{color:var(--red)}
.mob-close{position:absolute;top:1.75rem;right:2rem;font-size:2.25rem;color:var(--white);background:none;border:none;line-height:1}
.mob-phone{font-family:var(--fu)!important;font-size:1rem!important;color:var(--red)!important;font-weight:700!important;margin-top:1rem;letter-spacing:.05em}

/* ============================================
   HERO
   ============================================ */
.hero{position:relative;height:100vh;min-height:720px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1600607687939-ce8a6d5c5b10?w=1920&q=80') center/cover no-repeat;transform:scale(1.06);transition:transform 7s var(--ease)}
.hero.ready .hero-bg{transform:scale(1)}
.hero-ov{position:absolute;inset:0;background:linear-gradient(120deg,rgba(10,10,10,.95) 0%,rgba(10,10,10,.80) 55%,rgba(139,21,32,.25) 100%)}
.hero-content{position:relative;z-index:2;text-align:center;max-width:920px;padding:0 2rem}
.hero-pill{display:inline-flex;align-items:center;gap:.6rem;background:var(--w05);border:1px solid var(--w20);backdrop-filter:blur(12px);padding:.5rem 1.4rem;border-radius:50px;font-family:var(--fu);font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--w70);margin-bottom:2rem;animation:fadeDown .8s .2s both}
.hero-pill .dot{width:6px;height:6px;background:var(--red);border-radius:50%;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.hero h1{font-size:clamp(2.8rem,6.5vw,5.5rem);font-weight:900;line-height:1.0;margin-bottom:1.5rem;animation:fadeUp .9s .4s both}
.hero h1 em{font-style:normal;color:var(--red)}
.hero-desc{font-size:1.12rem;color:var(--w70);max-width:560px;margin:0 auto 2.5rem;line-height:1.85;animation:fadeUp .9s .55s both}
.hero-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:4.5rem;animation:fadeUp .9s .7s both}
.hero-stats{display:flex;gap:3.5rem;justify-content:center;flex-wrap:wrap;animation:fadeUp .9s .85s both}
.hero-stat .num{font-family:var(--fh);font-size:2.8rem;font-weight:900;color:var(--white);line-height:1}
.hero-stat .num sup{font-size:1.2rem;color:var(--red)}
.hero-stat .lbl{font-family:var(--fu);font-size:.65rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--w50);margin-top:.2rem}
.hero-scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:rgba(255,255,255,.4);font-family:var(--fu);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;animation:bounce 2.5s infinite}
.hero-scroll svg{width:22px;height:22px}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}

/* ============================================
   STRIP
   ============================================ */
.strip{background:var(--red);padding:1.75rem 0}
.strip-inner{display:flex;align-items:center;justify-content:center;gap:3rem;flex-wrap:wrap}
.strip-item{display:flex;align-items:center;gap:.7rem;font-family:var(--fu);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--white)}
.strip-item svg{width:18px;height:18px;flex-shrink:0}

/* ============================================
   SERVICES GRID
   ============================================ */
.srv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.5px;background:var(--black4)}
.srv-card{background:var(--black2);padding:2.5rem;position:relative;overflow:hidden;transition:var(--t)}
.srv-card::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.srv-card:hover::after{transform:scaleX(1)}
.srv-card:hover{background:var(--black3);transform:translateY(-5px)}
.srv-icon{width:54px;height:54px;background:var(--w05);border:1px solid var(--w10);display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;transition:var(--t)}
.srv-card:hover .srv-icon{background:var(--red);border-color:var(--red)}
.srv-icon svg{width:26px;height:26px;color:var(--red);transition:var(--t)}
.srv-card:hover .srv-icon svg{color:var(--white)}
.srv-card h3{font-size:1.1rem;font-weight:700;margin-bottom:.65rem;color:var(--white)}
.srv-card p{font-size:.875rem;color:var(--w70);line-height:1.75}

/* ============================================
   TRUST BADGES
   ============================================ */
.badges-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.badge-card{text-align:center;padding:2.75rem 1.5rem;border:1px solid var(--w10);transition:var(--t)}
.badge-card:hover{border-color:var(--red);transform:translateY(-5px);box-shadow:var(--sr)}
.badge-icon{width:68px;height:68px;background:var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem}
.badge-icon svg{width:30px;height:30px;color:var(--white)}
.badge-card h4{font-family:var(--fu);font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5rem;color:var(--white)}
.badge-card p{font-size:.82rem;color:var(--w50);line-height:1.6}

/* ============================================
   PROJECTS
   ============================================ */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.875rem}
.proj-card{position:relative;overflow:hidden;aspect-ratio:4/3;cursor:pointer}
.proj-card img{width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease)}
.proj-card:hover img{transform:scale(1.09)}
.proj-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.9) 0%,transparent 60%);opacity:0;transition:opacity .4s;display:flex;align-items:flex-end;padding:1.5rem}
.proj-card:hover .proj-ov{opacity:1}
.proj-info h4{font-size:.95rem;color:var(--white);font-weight:700}
.proj-info span{font-family:var(--fu);font-size:.7rem;color:var(--red);font-weight:600;letter-spacing:.12em;text-transform:uppercase}

/* ============================================
   STATS
   ============================================ */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr)}
.stat-item{padding:3.5rem 2rem;text-align:center;border-right:1px solid var(--w10)}
.stat-item:last-child{border-right:none}
.stat-num{font-family:var(--fh);font-size:3.8rem;font-weight:900;color:var(--white);line-height:1;margin-bottom:.6rem}
.stat-num .plus,.stat-num sup{color:var(--red)}
.stat-lbl{font-family:var(--fu);font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--w50)}

/* ============================================
   TESTIMONIALS
   ============================================ */
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.test-card{background:var(--black3);padding:2.5rem;border-left:3px solid var(--red);transition:var(--t);position:relative}
.test-card:hover{background:var(--black4);transform:translateY(-4px)}
.test-stars{display:flex;gap:3px;margin-bottom:1.1rem}
.test-stars svg{width:16px;height:16px;fill:var(--red)}
.test-quote{font-size:.92rem;color:var(--w70);line-height:1.85;margin-bottom:1.5rem;font-style:italic}
.test-quote::before{content:'\201C';font-family:var(--fh);font-size:3.5rem;color:var(--red);line-height:0;vertical-align:-1.3rem;margin-right:4px}
.test-author{display:flex;align-items:center;gap:.875rem}
.test-av{width:46px;height:46px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;font-family:var(--fu);font-size:1rem;font-weight:700;color:var(--white);flex-shrink:0}
.test-name{font-family:var(--fu);font-size:.875rem;font-weight:700;color:var(--white)}
.test-loc{font-size:.78rem;color:var(--w50)}

/* ============================================
   PROCESS
   ============================================ */
.proc-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;position:relative}
.proc-wrap::before{content:'';position:absolute;top:2.2rem;left:12%;width:76%;height:1px;background:var(--w10)}
.proc-step{text-align:center;position:relative;z-index:1}
.proc-num{width:52px;height:52px;border-radius:50%;background:var(--black3);border:2px solid var(--red);display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;font-family:var(--fh);font-size:1.2rem;font-weight:800;color:var(--red);transition:var(--t)}
.proc-step:hover .proc-num{background:var(--red);color:var(--white)}
.proc-step h4{font-size:1rem;color:var(--white);margin-bottom:.5rem}
.proc-step p{font-size:.82rem;color:var(--w50);line-height:1.7}

/* ============================================
   CTA
   ============================================ */
.cta-sec{background:var(--red);padding:5.5rem 0;position:relative;overflow:hidden}
.cta-sec::before{content:'J&J';position:absolute;right:-1rem;top:50%;transform:translateY(-50%);font-family:var(--fh);font-size:18rem;font-weight:900;color:rgba(0,0,0,.12);pointer-events:none;line-height:1}
.cta-inner{text-align:center;position:relative;z-index:1}
.cta-inner h2{font-size:clamp(2rem,4.5vw,3.5rem);color:var(--white);margin-bottom:.875rem}
.cta-inner p{font-size:1.05rem;color:rgba(255,255,255,.8);margin:0 auto 2.5rem;max-width:480px}
.cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ============================================
   FOOTER
   ============================================ */
.footer{background:var(--black2);border-top:1px solid var(--w10);padding:5.5rem 0 2rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.6fr;gap:4rem;margin-bottom:4rem}
.foot-brand img{height:72px;margin-bottom:1.5rem}
.foot-brand p{font-size:.875rem;color:var(--w50);line-height:1.85;margin-bottom:1.5rem}
.foot-social{display:flex;gap:.65rem}
.foot-social a{width:38px;height:38px;background:var(--w10);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--t)}
.foot-social a:hover{background:var(--red)}
.foot-social a svg{width:16px;height:16px;color:var(--white)}
.foot-col h4{font-family:var(--fu);font-size:.68rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--red);margin-bottom:1.5rem}
.foot-col ul{display:flex;flex-direction:column;gap:.7rem}
.foot-col ul li a{font-size:.875rem;color:var(--w50);transition:var(--t)}
.foot-col ul li a:hover{color:var(--white);padding-left:5px}
.foot-ci{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem}
.foot-ci svg{width:17px;height:17px;color:var(--red);flex-shrink:0;margin-top:2px}
.foot-ci span{font-size:.875rem;color:var(--w50);line-height:1.5}
.foot-bot{border-top:1px solid var(--w10);padding-top:2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.foot-bot p{font-size:.78rem;color:rgba(255,255,255,.3)}

/* ============================================
   PAGE HERO
   ============================================ */
.page-hero{padding:10rem 0 5rem;background:var(--black2);position:relative;overflow:hidden}
.page-hero::after{content:'';position:absolute;top:0;right:0;width:50%;height:100%;background:linear-gradient(135deg,transparent,rgba(196,30,58,.08));pointer-events:none}
.ph-dec{position:absolute;right:8%;top:50%;transform:translateY(-50%);font-family:var(--fh);font-size:14rem;font-weight:900;color:var(--w05);pointer-events:none;line-height:1}
.page-hero-c{position:relative;z-index:1}
.page-hero h1{font-size:clamp(2.5rem,5.5vw,4.5rem);margin-bottom:1rem}
.page-hero p{font-size:1.05rem;color:var(--w70);max-width:580px}
.breadcrumb{display:flex;align-items:center;gap:.5rem;margin-bottom:1.5rem;font-family:var(--fu);font-size:.75rem;color:var(--w50)}
.breadcrumb a{color:var(--w50)}
.breadcrumb a:hover{color:var(--red)}
.breadcrumb svg{width:11px;height:11px}

/* ============================================
   SERVICES PAGE
   ============================================ */
.srv-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.srv-item{display:flex;gap:1.5rem;padding:2rem;background:var(--black3);border:1px solid var(--w10);transition:var(--t)}
.srv-item:hover{border-color:var(--red);transform:translateX(5px)}
.srv-item-icon{width:54px;height:54px;background:var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.srv-item-icon svg{width:26px;height:26px;color:var(--white)}
.srv-item-content h3{font-size:1.1rem;margin-bottom:.5rem;color:var(--white)}
.srv-item-content p{font-size:.875rem;color:var(--w70);line-height:1.75}

/* ============================================
   GALLERY PAGE
   ============================================ */
.gal-filters{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:3rem}
.flt-btn{padding:.55rem 1.4rem;font-family:var(--fu);font-size:.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;background:transparent;color:var(--w70);border:1px solid var(--w20);cursor:pointer;transition:var(--t)}
.flt-btn:hover,.flt-btn.active{background:var(--red);color:var(--white);border-color:var(--red)}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.875rem}
.gal-item{position:relative;overflow:hidden;aspect-ratio:4/3;cursor:pointer}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gal-item:hover img{transform:scale(1.09)}
.gal-ov{position:absolute;inset:0;background:rgba(196,30,58,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .4s}
.gal-item:hover .gal-ov{opacity:1}
.gal-ov svg{width:38px;height:38px;color:var(--white);margin-bottom:.65rem}
.gal-ov span{font-family:var(--fu);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--white)}
.gal-ov p{font-size:.82rem;color:rgba(255,255,255,.8);margin-top:.3rem}

.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.96);z-index:9999;align-items:center;justify-content:center}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:90vh;object-fit:contain}
.lb-close{position:absolute;top:1.5rem;right:2rem;color:var(--white);font-size:2.5rem;background:none;border:none;cursor:pointer;line-height:1;transition:color .3s}
.lb-close:hover{color:var(--red)}

/* ============================================
   ABOUT PAGE
   ============================================ */
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center}
.about-img-wrap{position:relative}
.about-img-wrap img{width:100%;height:580px;object-fit:cover}
.about-badge{position:absolute;bottom:-2rem;right:-2rem;background:var(--red);padding:2rem 2.25rem;text-align:center}
.about-badge .yrs{font-family:var(--fh);font-size:3.2rem;font-weight:900;color:var(--white);line-height:1}
.about-badge .yrs-t{font-family:var(--fu);font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.about-vals{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.about-val{padding:1.25rem;background:var(--black3);border-left:3px solid var(--red)}
.about-val h4{font-family:var(--fu);font-size:.82rem;font-weight:700;color:var(--white);margin-bottom:.3rem}
.about-val p{font-size:.78rem;color:var(--w50);line-height:1.6}

/* ============================================
   WHY CHOOSE US
   ============================================ */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.why-card{padding:3rem 2rem;background:var(--black3);text-align:center;border:1px solid var(--w10);position:relative;overflow:hidden;transition:var(--t)}
.why-card::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:var(--red);transform:scaleX(0);transition:transform .4s var(--ease)}
.why-card:hover::after{transform:scaleX(1)}
.why-card:hover{border-color:transparent;transform:translateY(-8px);box-shadow:var(--shadow)}
.why-num{font-family:var(--fh);font-size:5.5rem;font-weight:900;color:var(--w05);position:absolute;top:.75rem;right:1.25rem;line-height:1;pointer-events:none}
.why-icon{width:70px;height:70px;background:var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem}
.why-icon svg{width:32px;height:32px;color:var(--white)}
.why-card h3{font-size:1.25rem;margin-bottom:.875rem;color:var(--white)}
.why-card p{font-size:.875rem;color:var(--w70);line-height:1.8}

/* ============================================
   TESTIMONIALS PAGE
   ============================================ */
.test-all{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}

/* ============================================
   SERVICE AREAS
   ============================================ */
.areas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.area-card{padding:1.5rem;background:var(--black3);border:1px solid var(--w10);text-align:center;transition:var(--t)}
.area-card:hover{border-color:var(--red);background:var(--black4)}
.area-dot{width:7px;height:7px;background:var(--red);border-radius:50%;margin:0 auto .75rem}
.area-card h4{font-family:var(--fu);font-size:.875rem;font-weight:600;color:var(--white)}
.area-card p{font-size:.75rem;color:var(--w50);margin-top:.25rem}
.map-wrap{height:460px;overflow:hidden;border:1px solid var(--w10)}
.map-wrap iframe{width:100%;height:100%;border:none;filter:grayscale(100%) invert(92%) hue-rotate(180deg)}

/* ============================================
   CONTACT PAGE
   ============================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1.55fr;gap:5rem}
.c-info-item{display:flex;align-items:flex-start;gap:1rem;margin-bottom:2rem}
.c-info-icon{width:48px;height:48px;background:var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.c-info-icon svg{width:22px;height:22px;color:var(--white)}
.c-info-item h4{font-family:var(--fu);font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:.3rem}
.c-info-item p{font-size:1rem;color:var(--white);font-weight:500}
.c-info-item a{color:var(--white)}
.c-info-item a:hover{color:var(--red)}
.quote-form{background:var(--black3);padding:3rem;border:1px solid var(--w10)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-group{margin-bottom:1.5rem}
.form-group label{display:block;font-family:var(--fu);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--w70);margin-bottom:.5rem}
.form-group input,.form-group select,.form-group textarea{width:100%;background:var(--black2);border:1px solid var(--w10);color:var(--white);padding:.875rem 1rem;font-family:var(--fb);font-size:.95rem;outline:none;transition:border-color .3s;-webkit-appearance:none;appearance:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--red)}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(255,255,255,.3)}
.form-group select option{background:var(--black2);color:var(--white)}
.form-group textarea{min-height:130px;resize:vertical}
.form-upload{border:2px dashed var(--w20);padding:2rem;text-align:center;cursor:pointer;transition:border-color .3s}
.form-upload:hover{border-color:var(--red)}
.form-upload svg{width:32px;height:32px;color:var(--w50);margin:0 auto .75rem;display:block}
.form-upload p{font-size:.85rem;color:var(--w50)}
.form-upload span{color:var(--red);font-weight:600}
.form-upload input[type="file"]{display:none}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

[data-aos]{opacity:0;transform:translateY(28px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
[data-aos].anim{opacity:1;transform:translateY(0)}
[data-aos="fade-left"]{transform:translateX(-28px)}
[data-aos="fade-left"].anim{transform:translateX(0)}
[data-aos="fade-right"]{transform:translateX(28px)}
[data-aos="fade-right"].anim{transform:translateX(0)}
[data-aos="zoom-in"]{transform:scale(.88)}
[data-aos="zoom-in"].anim{transform:scale(1)}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:1100px){
  .badges-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:2.5rem}
  .about-split{gap:3rem}
  .contact-grid{grid-template-columns:1fr;gap:3rem}
  .proj-grid{grid-template-columns:repeat(2,1fr)}
  .gal-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .stat-item{border-right:none;border-bottom:1px solid var(--w10)}
  .proc-wrap{grid-template-columns:repeat(2,1fr)}
  .proc-wrap::before{display:none}
  .areas-grid{grid-template-columns:repeat(3,1fr)}
  .test-all{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .section{padding:4.5rem 0}
  .about-split{grid-template-columns:1fr}
  .about-img-wrap{display:none}
  .about-vals{grid-template-columns:1fr}
  .srv-list{grid-template-columns:1fr}
  .badges-grid{grid-template-columns:repeat(2,1fr)}
  .test-grid{grid-template-columns:1fr}
  .proj-grid{grid-template-columns:1fr 1fr;gap:.5rem}
  .gal-grid{grid-template-columns:1fr 1fr;gap:.5rem}
  .why-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:2rem}
  .form-row{grid-template-columns:1fr}
  .areas-grid{grid-template-columns:repeat(2,1fr)}
  .quote-form{padding:2rem}
  .ph-dec{display:none}
  .hero-stats{gap:1.5rem}
  .proc-wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .container{padding:0 1.25rem}
  .hero h1{font-size:2.3rem}
  .hero-btns{flex-direction:column;align-items:center}
  .hero-stats{gap:1rem}
  .hero-stat .num{font-size:2rem}
  .proj-grid,.gal-grid{grid-template-columns:1fr}
  .badges-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr}
  .proc-wrap{grid-template-columns:1fr}
  .areas-grid{grid-template-columns:1fr 1fr}
  .cta-btns{flex-direction:column;align-items:center}
  .strip-inner{gap:1.5rem}
  .test-all{grid-template-columns:1fr}
}

/* ============================================
   FLUID CURSOR CANVAS
   ============================================ */
#fluid {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 999;
  pointer-events: none;
  opacity: 0.55;
}

/* ============================================
   VIDEO INTRO OVERLAY
   ============================================ */
.vid-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 1.2s cubic-bezier(.25,.46,.45,.94);
}
.vid-intro video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media(max-width:768px){
  .vid-intro video{object-fit:contain}
  .vid-skip{bottom:1.5rem;right:1.5rem;font-size:.6rem;padding:.45rem 1.2rem}
}
.vid-intro.fade-out {
  opacity: 0;
  pointer-events: none;
}
.vid-skip {
  position: absolute;
  bottom: 2.5rem;
  right: 2.5rem;
  z-index: 2;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.6);
  padding: .55rem 1.6rem;
  font-family: var(--fu);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s;
  backdrop-filter: blur(6px);
}
.vid-skip:hover {
  background: rgba(196,30,58,.25);
  border-color: rgba(196,30,58,.5);
  color: #fff;
}

/* ============================================
   FONT REFINEMENTS — Cormorant Garamond
   ============================================ */
h1,h2{font-weight:600;letter-spacing:-.02em}
h3,h4{font-weight:600}
.ttl{letter-spacing:-.015em;font-weight:600}
.hero h1{font-size:clamp(3rem,7.5vw,6rem);font-weight:500;line-height:1.02;letter-spacing:-.02em}
.hero h1 em{font-style:italic;color:var(--red)}
.lbl{font-family:var(--fu);font-size:.68rem;font-weight:500;letter-spacing:.3em}
.nav-links a{font-family:var(--fu);font-size:.78rem;font-weight:400;letter-spacing:.05em}
.btn{font-family:var(--fu);font-size:.74rem;font-weight:500;letter-spacing:.13em}
.stat-num{font-family:var(--fh);font-style:italic}
.counter{font-style:italic}
.hero-stat .num{font-family:var(--fh);font-style:italic;font-size:3rem;font-weight:500}
.strip-item{font-family:var(--fu);font-size:.78rem;font-weight:500;letter-spacing:.08em}

/* ============================================
   PREMIUM ELEVATION — Grain · Depth · Motion
   ============================================ */

/* ---- Film grain texture on all body sections ---- */
.sec-dark,.sec-dim,.sec-dim2{position:relative;isolation:isolate}
.sec-dark::before,.sec-dim::before,.sec-dim2::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px 256px;opacity:.038
}

/* ---- Ghost section numbers (editorial depth) ---- */
section[data-sn]{overflow:hidden}
section[data-sn]::after{
  content:attr(data-sn);position:absolute;
  right:-1rem;top:50%;transform:translateY(-50%);
  font-family:var(--fh);font-size:clamp(9rem,17vw,17rem);
  font-weight:600;line-height:1;
  color:rgba(255,255,255,.026);
  pointer-events:none;z-index:-1;
  user-select:none;letter-spacing:-.04em
}

/* ---- Directional red glow (add .sec-glow to select sections) ---- */
.sec-glow{
  background-image:radial-gradient(ellipse 50% 70% at 3% 45%,rgba(196,30,58,.09) 0%,transparent 62%)
}

/* ---- Thin crimson gradient divider utility ---- */
.accent-line{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(196,30,58,.4) 30%,rgba(196,30,58,.4) 70%,transparent)
}

/* ---- Upgraded scroll reveal — spring curve replaces generic fade-up ---- */
[data-aos]{opacity:0;transform:translateY(18px) scale(.986);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
[data-aos].anim{opacity:1;transform:translateY(0) scale(1)}
[data-aos="fade-left"]{opacity:0;transform:translateX(30px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
[data-aos="fade-left"].anim{opacity:1;transform:translateX(0)}
[data-aos="fade-right"]{opacity:0;transform:translateX(-30px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
[data-aos="fade-right"].anim{opacity:1;transform:translateX(0)}
[data-aos="zoom-in"]{opacity:0;transform:scale(.88);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
[data-aos="zoom-in"].anim{opacity:1;transform:scale(1)}

/* ---- Nav underline draws from center outward ---- */
.nav-links a::after{left:50%;transform:translateX(-50%);width:0;transition:width .35s cubic-bezier(.16,1,.3,1)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}

/* ---- Enhanced button hover depth ---- */
.btn{will-change:transform;transition:transform .2s cubic-bezier(.23,1,.32,1),background .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.btn-red:hover{background:#d42040;box-shadow:0 18px 52px rgba(196,30,58,.5),0 0 0 1px rgba(196,30,58,.18);transform:translateY(-3px)}
.btn-white:hover{background:var(--black);color:var(--white);transform:translateY(-3px)}

/* ---- 3D card tilt (JS drives transform, CSS handles spring return) ---- */
.srv-card,.why-card,.badge-card{
  transition:transform .45s cubic-bezier(.23,1,.32,1),
             box-shadow .45s cubic-bezier(.23,1,.32,1),
             background .35s var(--ease),
             border-color .35s var(--ease);
  will-change:transform
}

/* ============================================
   INLINE GRID HELPERS (used in HTML where
   inline styles had no responsive hook)
   ============================================ */
.intro-split{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.nat-split{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}

/* ============================================
   MOBILE OVERRIDES
   These come LAST so they override font
   refinements and premium elevation rules
   ============================================ */
@media(max-width:768px){
  /* Collapse the who-we-are and national-reach 2-col grids */
  .intro-split,.nat-split{grid-template-columns:1fr;gap:2.5rem}

  /* Hero: auto height so all content is reachable, not clipped by 100vh */
  .hero{height:auto;min-height:100svh;padding-top:5.5rem;padding-bottom:2.5rem;align-items:flex-start;justify-content:flex-start}
  .hero-content{padding:0 1.25rem}

  /* Ghost section numbers can cause horizontal scroll on narrow screens */
  section[data-sn]::after{display:none}

  /* Strip — reduce gap between items */
  .strip-inner{flex-wrap:wrap;gap:1.25rem 2rem}

  /* Process steps at 768 can go 2-col (already handled) */

  /* CTA buttons: stack and stretch on phone */
  .cta-btns{flex-direction:column;align-items:stretch;gap:1rem}
  .cta-btns .btn{text-align:center}
}

@media(max-width:480px){
  /* Hero title override — clamp(3rem,...) from font refinements = 48px on mobile,
     too wide for 375px screen. Force a smaller size. */
  .hero h1{font-size:1.95rem!important;line-height:1.06;letter-spacing:-.01em}

  /* Lose the hero pill on very small screens to gain vertical space */
  .hero-pill{display:none}

  /* Tighten hero body copy */
  .hero-desc{font-size:.9rem;line-height:1.75;margin-bottom:1.75rem}
  .hero-btns{margin-bottom:2rem}

  /* Hero stat numbers — shrink from 3rem to fit 4 in 2×2 grid */
  .hero-stat .num{font-size:1.7rem!important}
  .hero-stat .lbl{font-size:.5rem;letter-spacing:.07em}
  .hero-stats{gap:.65rem}

  /* Buttons full-width on phone */
  .hero-btns .btn{width:100%;justify-content:center}

  /* Page hero sections — reduce internal padding */
  .page-hero{padding:5rem 0 3rem}
  .page-hero-c h1{font-size:2rem}

  /* Nav spacing */
  .nav-inner{padding:0 1.25rem}

  /* Section padding */
  .section{padding:3.5rem 0}

  /* Testimonials — make quote more readable */
  .test-card{padding:1.75rem 1.5rem}

  /* Footer — tighten spacing */
  .footer{padding:3rem 0 2rem}
  .foot-bot{flex-direction:column;gap:.5rem;text-align:center}

  /* Gallery filters — horizontal scroll on phone */
  .gal-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.5rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .gal-filters::-webkit-scrollbar{display:none}
  .flt-btn{white-space:nowrap;flex-shrink:0}

  /* About page vals grid */
  .about-vals{gap:1rem}

  /* Quote form */
  .quote-form{padding:1.5rem}

  /* Why cards */
  .why-card{padding:1.75rem 1.5rem}

  /* Disable magnetic button effect on touch — JS still fires but reset it */
  @media(pointer:coarse){
    .btn-red,.btn-white,.btn-lg{transform:none!important;transition:background .3s,color .3s,box-shadow .3s!important}
  }
}