/* ==========================================================================
   gh-extra.css — loaded AFTER the exact design.css. Adds: hero carousel,
   animated footer heart, mobile nav, and component classes used by the
   interior page templates (service/blog/about/contact/gallery). Does NOT
   redefine any class already defined in design.css.
   ========================================================================== */

/* Hero image carousel (design used a single image-slot; we make it a slider) */
.gh-carousel{position:relative;width:100%;height:100%;}
.gh-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease-out);}
.gh-slide.active{opacity:1;}
.gh-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.gh-ribbon{position:absolute;top:18px;left:-46px;transform:rotate(-45deg);background:var(--grad-brand);color:#fff;font-family:var(--font-body);font-weight:800;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:7px 60px;box-shadow:var(--shadow-md);z-index:3;}
.gh-dots{position:absolute;bottom:14px;right:16px;display:flex;gap:8px;z-index:4;}
.gh-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer;padding:0;transition:.2s;}
.gh-dots button.active{background:#fff;width:22px;border-radius:5px;}

/* Animated footer heart */
.gh-heart{display:inline-block;animation:ghBeat 1.1s ease-in-out infinite;}
@keyframes ghBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.3)}30%{transform:scale(1)}45%{transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){.gh-heart{animation:none}}

/* Mobile nav toggle (design hides nav <980 and shows burger) */
@media (max-width:980px){
  .gh-show-md{display:inline-flex !important;}
  nav.gh-hide-md.open{display:flex !important;position:absolute;top:120px;left:0;right:0;flex-direction:column;gap:0 !important;background:#fff;border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-lg);padding:8px 0;z-index:60;}
  nav.gh-hide-md.open a{padding:13px var(--gutter);}
}

/* ---------- Interior page components ---------- */
.gh-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:700;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-600);}
.gh-eyebrow::before{content:"";width:22px;height:2px;background:var(--green-500);border-radius:2px;}
.gh-lead{font-size:var(--fs-lead);line-height:1.7;color:var(--text-muted);}
.gh-head{max-width:720px;margin:0 auto clamp(36px,4vw,54px);}
.gh-center{text-align:center;}
.gh-muted{color:var(--text-muted);}
.gh-head h2{margin:14px 0 12px;font-family:var(--font-display);font-weight:800;font-size:var(--fs-h2);line-height:1.22;letter-spacing:-.02em;color:var(--text-strong);}

.gh-btn-primary{background:var(--grad-brand);color:#fff;box-shadow:var(--shadow-brand);border:1px solid transparent;}
.gh-btn-primary:hover{transform:translateY(-2px);}
.gh-btn-ghost{background:#fff;color:var(--navy-700);box-shadow:var(--shadow-md);border:1px solid var(--slate-100);}
.gh-btn-sm{padding:11px 20px;font-size:.9rem;}
.gh-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-display);font-weight:700;line-height:1;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;padding:15px 28px;font-size:1rem;transition:transform .14s var(--ease-out),box-shadow .24s;}

/* Page banner */
.gh-banner{background:var(--grad-navy);color:#fff;position:relative;overflow:hidden;}
.gh-banner .gh-container{padding-block:clamp(46px,6vw,82px);position:relative;}
.gh-banner h1{color:#fff;font-family:var(--font-display);font-weight:800;font-size:var(--fs-h1);letter-spacing:-.02em;}
.gh-crumb{display:flex;gap:8px;align-items:center;color:rgba(255,255,255,.7);font-size:.88rem;margin-bottom:14px;}
.gh-crumb a{color:inherit;text-decoration:none;} .gh-crumb a:hover{color:#fff;}

/* Hero trust + badges (service hero) */
.gh-hero-media{position:relative;}
.gh-trust-item{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--navy-700);}
.gh-trust-item .gh-check{width:22px;height:22px;border-radius:999px;background:var(--green-100);color:var(--green-700);display:inline-flex;align-items:center;justify-content:center;}
.gh-hero-trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;}
.gh-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}
.gh-badge-float{position:absolute;display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;}
.gh-badge-float.tr{right:-14px;top:30px;background:var(--navy-800);color:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-navy);padding:13px 18px;font-size:14.5px;}

/* Rich imported content */
.gh-rich{font-size:1.02rem;color:var(--text-body);line-height:1.7;}
.gh-rich h2{font-family:var(--font-display);font-size:1.55rem;color:var(--text-strong);margin:1.6em 0 .5em;}
.gh-rich h3{font-family:var(--font-display);font-size:1.2rem;color:var(--text-strong);margin:1.4em 0 .4em;}
.gh-rich h4{font-family:var(--font-display);font-size:1.05rem;color:var(--text-strong);margin:1.2em 0 .4em;}
.gh-rich a{color:var(--green-700);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.gh-rich ul,.gh-rich ol{padding-left:1.3em;margin:0 0 1.1em;} .gh-rich li{margin-bottom:.5em;}
.gh-rich img{border-radius:var(--radius-md);margin:1.2em 0;box-shadow:var(--shadow-sm);max-width:100%;height:auto;}
.gh-rich strong{color:var(--navy-800);}
.gh-rich p{margin:0 0 1.05em;}

/* Service detail layout */
.gh-svc-hero .gh-container{padding-block:clamp(40px,5vw,72px);}
.gh-svc-layout{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start;}
.gh-svc-cta{background:var(--surface-inset);border:1px solid var(--green-200);border-radius:var(--radius-lg);padding:26px;position:sticky;top:96px;}

/* Process steps */
.gh-steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.gh-step{position:relative;background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:28px 24px;box-shadow:var(--shadow-sm);}
.gh-step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--green-500);}
.gh-step h3{font-family:var(--font-display);font-size:1.1rem;margin:10px 0 8px;color:var(--text-strong);}
.gh-step p{font-size:.92rem;color:var(--text-muted);margin:0;}

/* Gallery */
.gh-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.gh-gallery .gh-zoom{display:block;}
.gh-gallery figure{position:relative;margin:0;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:16/10;background:#e7ece9;cursor:zoom-in;}
.gh-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease-out);}
.gh-gallery figure:hover img{transform:scale(1.06);}
.gh-zoom-ic{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:rgba(14,27,51,.32);opacity:0;transition:opacity .25s;}
.gh-gallery figure:hover .gh-zoom-ic{opacity:1;}

/* Lightbox */
.gh-lb{position:fixed;inset:0;z-index:200;background:rgba(8,16,30,.92);display:flex;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(4px);animation:ghFade .25s ease;}
.gh-lb[hidden]{display:none;}
@keyframes ghFade{from{opacity:0}to{opacity:1}}
.gh-lb-img{max-width:92vw;max-height:86vh;border-radius:var(--radius-lg);box-shadow:0 30px 80px rgba(0,0,0,.5);}
.gh-lb-close{position:absolute;top:18px;right:24px;background:none;border:0;color:#fff;font-size:38px;line-height:1;cursor:pointer;opacity:.85;}
.gh-lb-close:hover{opacity:1;}
.gh-lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:0;color:#fff;width:52px;height:52px;border-radius:50%;font-size:30px;cursor:pointer;transition:background .2s;}
.gh-lb-nav:hover{background:rgba(255,255,255,.24);}
.gh-lb-prev{left:18px;} .gh-lb-next{right:18px;}
@media (max-width:640px){.gh-lb-nav{width:42px;height:42px;font-size:24px;}}

/* Blog cards */
.gh-post{background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .24s,box-shadow .24s;text-decoration:none;color:inherit;}
.gh-post:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}
.gh-post .gh-thumb{aspect-ratio:16/9;background:#e7ece9;overflow:hidden;}
.gh-post .gh-thumb img{width:100%;height:100%;object-fit:cover;}
.gh-post-body{padding:22px;display:flex;flex-direction:column;flex:1;}
.gh-post-body h3{font-family:var(--font-display);font-size:1.12rem;margin-bottom:8px;color:var(--text-strong);}
.gh-post-body p{font-size:.92rem;color:var(--text-muted);}

.gh-flash{background:var(--green-50);border:1px solid var(--green-200);color:var(--green-800);padding:14px 18px;border-radius:var(--radius-md);margin-bottom:18px;font-weight:600;}

/* FAQ accordion (zero-JS <details>) */
.gh-faq-item{background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-xs);overflow:hidden;}
.gh-faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--text-strong);}
.gh-faq-item summary::-webkit-details-marker{display:none;}
.gh-faq-plus{flex:0 0 auto;color:var(--cyan-600);transition:transform .25s var(--ease-out);display:inline-flex;}
.gh-faq-item[open] .gh-faq-plus{transform:rotate(45deg);}
.gh-faq-a{padding:0 22px 20px;font-size:15px;line-height:1.65;color:var(--text-muted);}

/* Stats band (navy) — used on About + interior pages */
.gh-statband{background:var(--grad-navy);color:#fff;position:relative;overflow:hidden;}
.gh-statband .gh-container{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-block:42px;position:relative;}
.gh-statband .glow{position:absolute;top:-120px;right:-80px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(111,177,62,.25),transparent 65%);}
.gh-bigstat{text-align:center;border-right:1px solid rgba(255,255,255,.12);}
.gh-bigstat:last-child{border-right:0;}
.gh-bigstat b{display:block;font-family:var(--font-display);font-weight:800;font-size:2.6rem;line-height:1;background:linear-gradient(120deg,#fff,var(--green-300));-webkit-background-clip:text;background-clip:text;color:transparent;}
.gh-bigstat span{display:block;margin-top:8px;color:rgba(255,255,255,.78);font-weight:600;font-size:.92rem;}
@media (max-width:980px){.gh-statband .gh-container{grid-template-columns:repeat(2,1fr);} .gh-bigstat:nth-child(2n){border-right:0;}}

/* Services index — big icon cards */
.gh-svccard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:32px 28px;text-decoration:none;color:inherit;transition:transform .24s var(--ease-out),box-shadow .24s,border-color .24s;overflow:hidden;}
.gh-svccard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--green-200);}
.gh-svccard-ic{width:72px;height:72px;border-radius:var(--radius-lg);display:inline-flex;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:var(--shadow-xs);}
.gh-svccard h3{font-family:var(--font-display);font-weight:700;font-size:1.18rem;color:var(--text-strong);margin:0 0 8px;letter-spacing:-.01em;}
.gh-svccard p{font-size:.93rem;color:var(--text-muted);line-height:1.6;margin:0 0 16px;}
.gh-svccard .gh-more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;color:var(--green-700);font-weight:700;font-size:.92rem;font-family:var(--font-display);transition:gap .2s var(--ease-out);}
.gh-svccard:hover .gh-more{gap:11px;}

@media (max-width:980px){
  .gh-svc-layout{grid-template-columns:1fr;} .gh-svc-cta{position:static;}
  .gh-steps{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:980px){
  .gh-contact-grid{grid-template-columns:1fr !important;}
}
@media (max-width:640px){
  .gh-steps,.gh-gallery{grid-template-columns:1fr;}
}