/* ============================================================
   AJ DYNAMIC ENGINEERING — Signature Design
   ============================================================ */

:root {
    --navy:        #0b1d33;
    --navy-2:      #12305a;
    --navy-3:      #16375e;
    --footer-navy: #081426;
    --gold:        #f2b705;
    --gold-hover:  #ffd043;
    --btn-form:       #f2b705;
    --btn-form-hover: #ffd043;
    --bg-light:    #f4f6f9;
    --bg-white:    #ffffff;
    --border:      #e2e8f1;
    --text-navy:   #0b1d33;
    --text-body:   #4a5a70;
    --text-eyebrow:#3d6cb4;
    --tag-bg:      #eef3fa;
    --light-blue:  #cfe0f5;
    --muted-blue:  #8fa6c4;
    --muted-blue-2:#9fb3cd;
    --font-display: 'Space Grotesk', sans-serif;
    --font-body:    'IBM Plex Sans', sans-serif;
    --nav-h:       72px;
    --ease:        cubic-bezier(.2,.8,.2,1);
    --radius-sm:   4px;
    --radius:      8px;
    --radius-lg:   10px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { background: var(--bg-white); color: var(--text-body); font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; }
a { color: var(--gold); text-decoration: none; transition: color .2s; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: var(--font-body); }

.aj-home-page .site-header, .aj-home-page .site-footer, .aj-home-page #masthead,
.aj-home-page .ast-above-header, .aj-home-page .ast-below-header,
.aj-home-page .footer-widget-area, .aj-home-page .site-below-footer-wrap,
.aj-home-page #colophon { display: none !important; }
.aj-home-page .site-content, .aj-home-page .ast-container,
.aj-home-page .entry-content, .aj-home-page .ast-article-single { padding: 0 !important; margin: 0 !important; }

.section-container { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.aj-section { padding: 100px 0; }
.aj-section-light { background: var(--bg-light); }
.aj-section-white { background: var(--bg-white); border-top: 1px solid var(--border); }
.aj-section-dark { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-3) 100%); }

.section-eyebrow { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--text-eyebrow); font-weight: 600; }
.section-eyebrow-gold { color: var(--gold); }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-top: 12px; }
.section-title { font-family: var(--font-display); font-weight: 700; font-size: 46px; letter-spacing: -1px; color: var(--text-navy); margin: 12px 0 0; }
.section-head-row .section-title { margin: 0; }
.section-title-light { color: #fff; }
.section-desc { font-size: 16px; line-height: 1.6; color: var(--text-body); max-width: 520px; margin: 0; }

/* ── Intro splash ───────────────────────────────────────────── */
.aj-intro {
    position: fixed; inset: 0; z-index: 500;
    background: linear-gradient(180deg, #0a1c33 0%, #16375e 60%, #2b4f7d 100%);
    display: flex; align-items: center; justify-content: center;
    animation: aj-overlay-out .8s ease 2.9s forwards;
}
.aj-intro-inner { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.aj-intro-ring-wrap { position: relative; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; }
.aj-intro-ring circle { animation: aj-ring 1.4s cubic-bezier(.6,0,.2,1) .5s forwards; }
.aj-intro-letters {
    position: absolute; font-family: var(--font-display); font-weight: 700; font-size: 100px; letter-spacing: -4px; color: #fff;
    animation: aj-letter-in .9s var(--ease) both, aj-flicker .7s steps(1) 1s;
}
.aj-intro-line { width: 200px; height: 3px; background: var(--gold); transform-origin: left; animation: aj-line .6s ease 1.6s both; }
.aj-intro-sub { font-family: var(--font-display); font-size: 18px; letter-spacing: 5px; text-transform: uppercase; color: var(--light-blue); animation: aj-fade-up .7s ease 1.9s both; }

@keyframes aj-letter-in { 0% { opacity: 0; transform: translateY(30px) scale(1.15); filter: blur(10px); } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes aj-flicker { 0%, 100% { opacity: 1; } 8% { opacity: .3; } 12% { opacity: 1; } 18% { opacity: .5; } 22% { opacity: 1; } }
@keyframes aj-ring { from { stroke-dashoffset: 628; } to { stroke-dashoffset: 0; } }
@keyframes aj-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes aj-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes aj-overlay-out { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes aj-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes aj-spark-ring { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes aj-spark-tick { 0% { transform: rotate(var(--a)) translateY(-6px) scaleY(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-20px) scaleY(.3); opacity: 0; } }
@keyframes aj-ken { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes aj-photo-sweep { from { clip-path: polygon(24% 0, 24% 0, 0 100%, 0 100%); } to { clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes aj-slash-cut { from { clip-path: polygon(24% 0, 27.5% 0, 27.5% 0, 24% 0); } to { clip-path: polygon(24% 0, 27.5% 0, 3.5% 100%, 0 100%); } }
@keyframes aj-slash-line { from { clip-path: polygon(29.5% 0, 30.5% 0, 30.5% 0, 29.5% 0); } to { clip-path: polygon(29.5% 0, 30.5% 0, 6.5% 100%, 5.5% 100%); } }

/* ── Page wipe transition (Home ↔ Products ↔ ChargePro) ─────────
   Leaving a page: .aj-wipe-overlay is created fresh by JS and wipes
   IN over the current (already-rendered) page — no timing issue there.
   Arriving on a page: #aj-wipe-cover is a REAL element already present
   in the server-rendered HTML (see the early inline <script>+<style>
   in each template's <head>), pre-covering the page from the very
   first frame — otherwise the destination page flashes fully visible
   for an instant before JS gets a chance to cover→reveal it. */
.aj-wipe-overlay { position: fixed; top: -10%; bottom: -10%; left: -20%; right: -20%; z-index: 500; background: var(--navy); pointer-events: none; }
.aj-wipe-overlay.aj-wipe-in  { border-right: 12px solid var(--gold); animation: aj-wipe-in .45s cubic-bezier(.6,0,.3,1) forwards; }
.aj-wipe-cover {
    display: none; position: fixed; top: -10%; bottom: -10%; left: -20%; right: -20%; z-index: 500;
    background: var(--navy); border-left: 12px solid var(--gold); pointer-events: none;
    transform: translateX(0) skewX(-14deg);
}
html.wipe-pending .aj-wipe-cover { display: block; }
.aj-wipe-cover.aj-wipe-reveal { animation: aj-wipe-out .5s cubic-bezier(.6,0,.3,1) .08s forwards; }
@keyframes aj-wipe-in  { from { transform: translateX(-130%) skewX(-14deg); } to { transform: translateX(0) skewX(-14deg); } }
@keyframes aj-wipe-out { from { transform: translateX(0) skewX(-14deg); } to { transform: translateX(130%) skewX(-14deg); } }

/* ── Scroll progress bar ─────────────────────────────────────── */
.aj-scroll-progress {
    position: fixed; top: 0; left: 0; right: 0; z-index: 110; height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-hover));
    transform-origin: left; transform: scaleX(0);
}

/* ── Floating contact buttons ─────────────────────────────────────
   Stacked bottom-right, tallest/widest one at the bottom of the
   stack (closest to Astra's own built-in "Scroll to Top" button,
   #ast-scroll-top, which by default sits at right:30px/bottom:30px —
   these all sit above it with clearance instead of covering it):
     Astra scroll-to-top → Emergency (pill) → WhatsApp → Email → Locate Us
*/
/* Every one of these is a <button> (not a direct link) that opens a
   small popup showing the actual contact detail + a CTA link —
   tel:/mailto:/wa.me links don't reliably do anything on desktop (no
   default app registered to handle them), so this way the detail is
   always readable even when there's nothing for the browser to hand
   off to. .contact-fab-wrap holds the fixed position + base z-index;
   JS adds .is-open to whichever wrap currently has its popup open, so
   THAT one renders above its neighbours instead of being visually cut
   off by them (they all share z-index normally, and DOM order alone
   isn't enough to guarantee the open one wins). */
.contact-fab-wrap { position: fixed; right: 28px; z-index: 120; }
.contact-fab-wrap.is-open { z-index: 200; }
.emergency-wrap { bottom: 78px; }
.whatsapp-wrap   { bottom: 144px; }
.email-wrap      { bottom: 216px; }
.locate-wrap     { bottom: 288px; }

.emergency-btn, .whatsapp-btn, .email-btn, .locate-btn {
    border: none; cursor: pointer; font-family: var(--font-body);
    box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .2s ease, box-shadow .2s ease;
}
.emergency-btn:hover, .whatsapp-btn:hover, .email-btn:hover, .locate-btn:hover { box-shadow: 0 14px 36px rgba(0,0,0,.45); }
@media (prefers-reduced-motion: reduce) {
    .emergency-btn:hover, .whatsapp-btn:hover, .email-btn:hover, .locate-btn:hover { transform: none; }
}
/* These are real <button> elements now (were plain <a> links before),
   and Astra (parent theme) applies its own reset/icon styling to
   buttons — which was overriding these SVGs' own fill/stroke colors
   and making the icons disappear. Forced back with !important since
   we don't control what Astra's rule looks like or how specific it is. */
.emergency-btn svg, .whatsapp-btn svg, .email-btn svg, .locate-btn svg {
    display: block !important; flex-shrink: 0; opacity: 1 !important; pointer-events: none;
}
.emergency-btn svg { width: 22px !important; height: 22px !important; stroke: #fff !important; fill: none !important; }
.whatsapp-btn svg { width: 28px !important; height: 28px !important; fill: #fff !important; }
.email-btn svg { width: 24px !important; height: 24px !important; stroke: var(--navy) !important; fill: none !important; }
.locate-btn svg { width: 24px !important; height: 24px !important; stroke: var(--gold) !important; fill: none !important; }

.emergency-btn {
    height: 50px; border-radius: 999px; background: #e6483a;
    display: flex; align-items: center; gap: 8px; padding: 0 18px 0 15px;
}
.emergency-btn span { color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .3px; white-space: nowrap; }
.emergency-btn:hover { transform: scale(1.05); }

.whatsapp-btn { width: 58px; height: 58px; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; }
.whatsapp-btn:hover { transform: scale(1.1); }

.email-btn { width: 58px; height: 58px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; }
.email-btn:hover { transform: scale(1.1); background: var(--gold-hover); }

.locate-btn { width: 58px; height: 58px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; border: 1px solid rgba(242,183,5,.4); }
.locate-btn:hover { transform: scale(1.1); }

/* Shared popup card look for all four */
.contact-popup {
    position: absolute; right: 0; bottom: calc(100% + 14px); width: 240px;
    background: #fff; border-radius: var(--radius); padding: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.35);
    animation: aj-fade-up .25s ease both;
}
.contact-popup::after {
    content: ''; position: absolute; right: 22px; top: 100%; width: 14px; height: 14px;
    background: #fff; transform: rotate(45deg) translateY(-9px); border-radius: 0 0 3px 0;
}
.contact-popup-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted-blue); }
.contact-popup-label em { font-style: normal; text-transform: none; letter-spacing: 0; color: #c0392b; }
.contact-popup-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text-navy); margin-top: 6px; }
.contact-popup-number { font-size: 15px; color: var(--text-body); margin-top: 2px; word-break: break-word; }
.contact-popup-cta {
    display: block; text-align: center; margin-top: 14px; color: #fff !important;
    font-weight: 600; font-size: 14px; padding: 11px !important; border-radius: 6px !important;
}
.contact-popup-cta.cta-emergency { background: #e6483a !important; }
.contact-popup-cta.cta-emergency:hover { background: #d33a2c !important; }
.contact-popup-cta.cta-whatsapp { background: #25d366 !important; }
.contact-popup-cta.cta-whatsapp:hover { background: #1ebd5a !important; }
.contact-popup-cta.cta-email { background: var(--gold) !important; color: var(--navy) !important; }
.contact-popup-cta.cta-email:hover { background: var(--gold-hover) !important; }
.contact-popup-cta.cta-locate { background: var(--navy) !important; }
.contact-popup-cta.cta-locate:hover { background: var(--navy-2) !important; }
.contact-popup-note { font-size: 12px; color: var(--muted-blue); line-height: 1.5; margin-top: 10px; text-align: center; }

@media (max-width: 480px) {
    /* Four stacked buttons is a lot on a small phone screen — tuck them
       closer together and closer to the corner. */
    .emergency-wrap { right: 18px; bottom: 70px; }
    .whatsapp-wrap { right: 18px; bottom: 132px; }
    .email-wrap { right: 18px; bottom: 194px; }
    .locate-wrap { right: 18px; bottom: 256px; }
    .whatsapp-btn, .email-btn, .locate-btn { width: 52px; height: 52px; }
    .contact-popup { right: -10px; width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
    .aj-intro { animation: aj-overlay-out .3s ease .3s forwards; }
    .aj-intro-letters, .aj-intro-line, .aj-intro-sub, .aj-intro-ring circle { animation: none !important; opacity: 1; transform: none; stroke-dashoffset: 0; }
}

/* ── Navigation ─────────────────────────────────────────────── */
.aj-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h);
    display: flex; align-items: center;
    background: rgba(10,26,47,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(242,183,5,.18);
}
.nav-container { max-width: 1200px; margin: 0 auto; padding: 0 48px; width: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: flex; align-items: center; gap: 12px; }
.nav-logo-img { width: 42px; height: 42px; object-fit: contain; }
.nav-logo span { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: #fff; letter-spacing: .3px; }
.nav-right { display: flex; align-items: center; gap: 32px; }
.nav-links, .nav-links li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { color: var(--light-blue); font-size: 15px; }
.nav-links a:hover { color: var(--gold); }
.nav-cta { background: var(--gold); color: var(--navy) !important; font-weight: 600; font-size: 15px; padding: 10px 22px; border-radius: var(--radius-sm); transition: background .2s; }
.nav-cta:hover { background: var(--gold-hover) !important; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none !important; border: none !important; padding: 4px !important; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 1px; }

/* ── Hero ────────────────────────────────────────────────────── */
/* The diagonal photo panel is absolutely positioned (clip-path, not a
   box with its own width/height) and hero-scroll/hero-stats are pinned
   to the bottom of #hero the same way — nothing here stacks in normal
   flow, so a tall photo or long headline can never push the stats bar
   below the fold the way earlier layouts did; #hero simply grows past
   100vh on the rare screen where text alone needs more room. */
#hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,20,38,.55) 0%, rgba(8,20,38,.25) 50%, rgba(8,20,38,.75) 100%); }
.hero-watermark {
    position: absolute; left: -60px; bottom: -140px; font-family: var(--font-display); font-weight: 700;
    font-size: clamp(220px, 34vw, 480px); line-height: 1; letter-spacing: -20px; color: rgba(255,255,255,.045);
    user-select: none; pointer-events: none;
}
.hero-inner {
    position: relative; z-index: 3; max-width: 1200px; margin: 0 auto; padding: 140px 48px 130px; width: 100%;
}
.hero-copy { max-width: 600px; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(242,183,5,.5); color: var(--gold);
    font-size: 13px; letter-spacing: 3px; text-transform: uppercase; padding: 8px 16px; border-radius: 999px;
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.hero-title {
    font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 6vw, 80px); line-height: 1.03;
    letter-spacing: -2px; color: #fff; margin: 26px 0 0; max-width: 720px; text-wrap: balance;
    text-shadow: 0 2px 16px rgba(8,20,38,.85);
}
.hero-tagline {
    font-family: var(--font-display); font-size: clamp(19px, 2.4vw, 25px); color: var(--gold); margin: 16px 0 0;
    text-shadow: 0 1px 3px rgba(8,20,38,.9), 0 2px 14px rgba(8,20,38,.75);
}
.hero-desc {
    font-size: 18px; line-height: 1.65; color: var(--light-blue); max-width: 540px; margin: 16px 0 0;
    text-shadow: 0 1px 3px rgba(8,20,38,.9), 0 2px 12px rgba(8,20,38,.7);
}
.hero-btns { display: flex; gap: 16px; margin-top: 38px; flex-wrap: wrap; }

/* These entrance delays are ONLY meant for the homepage hero (#hero),
   timed to sync with its intro splash — scoped by ID so reusing these
   same class names on other pages (ChargePro, Products) doesn't
   accidentally inherit a multi-second invisible delay with no intro
   overlay there to justify it. */
#hero .hero-badge  { animation: aj-fade-up .8s ease 3.1s both; }
#hero .hero-title   { animation: aj-fade-up .8s ease 3.25s both; }
#hero .hero-tagline { animation: aj-fade-up .8s ease 3.4s both; }
#hero .hero-desc    { animation: aj-fade-up .8s ease 3.5s both; }
#hero .hero-btns    { animation: aj-fade-up .8s ease 3.65s both; }
.btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; padding: 16px 32px; border-radius: var(--radius-sm); transition: all .2s var(--ease); border: 1px solid transparent; }
.btn-primary { background: var(--gold); color: var(--navy) !important; }
.btn-primary:hover { background: var(--gold-hover) !important; transform: translateY(-2px); }
.btn-outline { border-color: rgba(255,255,255,.4); color: #fff !important; }
.btn-outline:hover { border-color: var(--gold); color: var(--gold) !important; }

/* Diagonal photo panel — clipped to a slanted right-side wedge instead
   of a boxed rectangle, with a gold accent stripe + bright hairline cut
   sweeping in on first load. */
.hero-slider {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 1;
    width: min(52%, calc(100% - 620px)); min-width: 340px;
    clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
    animation: aj-photo-sweep 1s cubic-bezier(.2,.7,.2,1) 3.9s both;
}
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.hero-slide.active { opacity: 1; z-index: 2; }
.hero-slide-ken { position: absolute; inset: 0; animation: aj-ken 12s ease-in-out infinite alternate; }
.hero-slide-ken img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.5); font-size: 14px; text-align: center; padding: 20px; background: rgba(255,255,255,.06);
}
.hero-slide-shade {
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(100deg, rgba(8,20,38,.72) 0%, rgba(8,20,38,.15) 45%, rgba(8,20,38,0) 70%),
                linear-gradient(180deg, rgba(8,20,38,.3) 0%, rgba(8,20,38,0) 30%, rgba(8,20,38,.55) 100%);
}
.hero-dots { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 5; display: flex; justify-content: center; gap: 8px; }
.hero-dot { width: 26px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.35); cursor: pointer; transition: background .2s; }
.hero-dot.active { background: var(--gold); }

.hero-slash-fill {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(52%, calc(100% - 620px)); min-width: 340px; z-index: 2;
    clip-path: polygon(24% 0, 27.5% 0, 3.5% 100%, 0 100%);
    background: linear-gradient(180deg, var(--gold-hover), var(--gold)); pointer-events: none;
    animation: aj-slash-cut .55s cubic-bezier(.6,0,.3,1) 3.35s both;
}
.hero-slash-line {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(52%, calc(100% - 620px)); min-width: 340px; z-index: 2;
    clip-path: polygon(29.5% 0, 30.5% 0, 6.5% 100%, 5.5% 100%);
    background: rgba(255,255,255,.35); pointer-events: none;
    animation: aj-slash-line .55s cubic-bezier(.6,0,.3,1) 3.55s both;
}

/* Belt-and-suspenders copy of the inline critical-CSS rule in
   front-page.php's <head> — hides the intro splash instantly on a
   repeat visit rather than waiting for the later DOMContentLoaded JS,
   which was just slow enough to let a frame or two of its ring/dot
   animation show through first. */
html.intro-skip #aj-intro { display: none !important; }

/* Repeat visit this tab session — intro overlay is skipped, so the hero
   text (and photo reveal) shouldn't wait out the delay that was timed
   to match it. */
.no-intro .hero-badge,
.no-intro .hero-title,
.no-intro .hero-tagline,
.no-intro .hero-desc,
.no-intro .hero-btns,
.no-intro .hero-slider,
.no-intro .hero-slash-fill,
.no-intro .hero-slash-line {
    animation: none !important; opacity: 1 !important; transform: none !important;
}

/* Arriving via the page-wipe transition (e.g. clicked "Home" from
   Products) this tab session — the splash still shouldn't replay, but
   the hero entrance should, quickly, right as the wipe reveals the
   page, rather than waiting out delays timed for a splash that isn't
   playing (which just looked like nothing was happening at all). */
.wipe-arrival #hero .hero-badge   { animation: aj-fade-up .5s ease .1s both; }
.wipe-arrival #hero .hero-title    { animation: aj-fade-up .5s ease .18s both; }
.wipe-arrival #hero .hero-tagline  { animation: aj-fade-up .5s ease .26s both; }
.wipe-arrival #hero .hero-desc     { animation: aj-fade-up .5s ease .34s both; }
.wipe-arrival #hero .hero-btns     { animation: aj-fade-up .5s ease .42s both; }
.wipe-arrival .hero-slider   { animation: aj-photo-sweep .8s cubic-bezier(.2,.7,.2,1) .2s both; }
.wipe-arrival .hero-slash-fill { animation: aj-slash-cut .5s cubic-bezier(.6,0,.3,1) .05s both; }
.wipe-arrival .hero-slash-line { animation: aj-slash-line .5s cubic-bezier(.6,0,.3,1) .2s both; }

.hero-scroll {
    position: absolute; right: 48px; bottom: 110px; z-index: 4;
    color: var(--muted-blue); font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
    animation: aj-bob 2.4s ease-in-out infinite;
}
.hero-stats {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
    background: rgba(8,20,38,.78); border-top: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px);
}
.hero-stats-inner { max-width: 1200px; margin: 0 auto; padding: 22px 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; }
.hero-stat { display: flex; align-items: baseline; gap: 10px; }
.hs-val { font-family: var(--font-display); font-weight: 700; font-size: 34px; color: var(--gold); font-variant-numeric: tabular-nums; }
.hs-lbl { font-size: 14px; color: var(--light-blue); }

/* Transitional chevron strip between the hero and Services — a navy
   slash over a gold sliver, echoing the hero's own diagonal cut. */
.hero-divider { position: relative; height: 84px; background: var(--bg-light); overflow: hidden; }
.hero-divider .hd-navy { position: absolute; inset: 0; background: var(--navy); clip-path: polygon(0 0, 100% 0, 100% 8%, 0 92%); }
.hero-divider .hd-gold { position: absolute; inset: 0; background: var(--gold); clip-path: polygon(0 92%, 100% 8%, 100% 16%, 0 100%); opacity: .9; }

/* ── Services — master list + sticky preview panel ─────────────
   Clicking a row in the left index swaps the photo/title/desc/tags
   in the right panel via JS (animations.js) — no page reload, no
   server round-trip. "View details" always opens the currently
   selected service's full modal. */
.services-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(28px, 4vw, 56px); margin-top: 48px; align-items: start; }

.services-index { display: flex; flex-direction: column; border-top: 2px solid var(--navy); }
.svc-row {
    display: flex; align-items: center; gap: 16px; padding: 22px 18px; border-bottom: 1px solid var(--border);
    cursor: pointer; background: transparent; transition: background .3s ease, padding-left .3s ease;
}
.svc-row:hover { padding-left: 26px; }
.svc-row.is-selected { background: var(--navy); }
.svc-row-num { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text-eyebrow); width: 30px; flex-shrink: 0; transition: color .3s ease; }
.svc-row.is-selected .svc-row-num, .svc-row.is-selected .svc-row-arrow { color: var(--gold); }
.svc-row-tick { width: 18px; height: 4px; background: var(--gold); transform: skewX(-25deg); flex-shrink: 0; opacity: 0; transition: opacity .3s ease; }
.svc-row.is-selected .svc-row-tick { opacity: 1; }
.svc-row-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 2vw, 20px); color: var(--text-navy); flex: 1; line-height: 1.3; transition: color .3s ease; }
.svc-row.is-selected .svc-row-title { color: #fff; }
.svc-row-arrow { color: var(--text-eyebrow); font-weight: 600; }

.services-preview { position: sticky; top: 90px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.services-preview-photo { position: relative; height: 260px; background: var(--bg-light); }
.svc-preview-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.svc-preview-slide.is-active { opacity: 1; z-index: 1; }
.svc-preview-slide img { width: 100%; height: 100%; object-fit: cover; }
.service-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted-blue); font-size: 13px; }
.services-preview-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--gold), var(--gold-hover)); z-index: 3; }
.services-preview-body { padding: 28px 30px 30px; display: flex; flex-direction: column; gap: 14px; }
.svc-preview-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--text-navy); line-height: 1.3; }
.svc-preview-desc { font-size: 15px; line-height: 1.65; color: var(--text-body); }
.svc-preview-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 12px; font-weight: 600; color: var(--text-eyebrow); background: var(--tag-bg); border-radius: 999px; padding: 4px 12px; }
.svc-preview-actions { display: flex; gap: 20px; align-items: center; margin-top: 4px; }
.btn-details { background: var(--navy) !important; border: none !important; color: #fff !important; font-weight: 600; font-size: 14px; cursor: pointer; padding: 12px 22px !important; border-radius: 5px !important; transition: background .2s; }
.btn-details:hover { background: var(--gold) !important; color: var(--navy) !important; }
.enquire-link { color: var(--text-eyebrow); font-weight: 600; font-size: 14px; }
.enquire-link:hover { color: var(--gold); }

@media (max-width: 900px) {
    .services-preview { position: static; }
}

.finder-panel { background: var(--navy); border-radius: var(--radius-lg); padding: 40px; margin-top: 40px; }
.finder-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.finder-head h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: #fff; }
.finder-alt { font-size: 14px; color: var(--muted-blue); }
.finder-alt a { color: var(--gold); font-weight: 600; }
.finder-search input {
    width: 100%; box-sizing: border-box; margin-top: 24px; background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius); padding: 16px 20px;
    color: #fff; font-size: 16px; font-family: var(--font-body); outline: none; transition: border-color .2s;
}
.finder-search input:focus { border-color: var(--gold); }
.finder-search input::placeholder { color: var(--muted-blue-2); }

.finder-results { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.finder-eq-block { background: rgba(242,183,5,.08); border: 1px solid var(--gold); border-radius: var(--radius-lg); padding: 24px; }
.finder-eq-title { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: #fff; }
.finder-intents { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.finder-intent-btn {
    background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.25) !important; color: #fff !important;
    font-size: 14px; cursor: pointer; padding: 12px 18px !important; border-radius: 6px !important; text-align: left;
    transition: border-color .2s, color .2s;
}
.finder-intent-btn:hover { border-color: var(--gold) !important; color: var(--gold) !important; }
.finder-intent-btn b { font-weight: 600; }
.finder-intent-btn .hint { color: var(--muted-blue-2); }
.finder-svc-results { display: flex; flex-wrap: wrap; gap: 10px; }
.finder-svc-btn { background: var(--gold) !important; border: none !important; color: var(--navy) !important; font-weight: 600; font-size: 14px; cursor: pointer; padding: 12px 20px !important; border-radius: 6px !important; }
.finder-svc-btn:hover { background: var(--gold-hover) !important; }
.finder-no-results { font-size: 14px; color: var(--muted-blue-2); padding: 12px 0; }
.finder-no-results a { color: var(--gold); font-weight: 600; }

.equipment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 28px; }
.equipment-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 20px; cursor: pointer; transition: border-color .2s; }
.equipment-card:hover { border-color: var(--gold); }
.equipment-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: #fff; }
.equipment-desc { font-size: 13px; line-height: 1.55; color: var(--muted-blue-2); margin-top: 8px; }
.equipment-link { font-size: 12px; font-weight: 600; color: var(--gold); margin-top: 10px; }

/* ── Modal ───────────────────────────────────────────────────── */
body.modal-open { overflow: hidden; }
.aj-modal { position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center; padding: 40px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
.aj-modal.open { opacity: 1; visibility: visible; transition: opacity .3s; }
.aj-modal-backdrop { position: absolute; inset: 0; background: rgba(8,20,38,.72); backdrop-filter: blur(4px); }
.aj-modal-panel {
    position: relative; background: #fff; border-radius: 12px; max-width: 880px; width: 100%; max-height: 86vh;
    overflow-y: auto; padding: 40px; box-shadow: 0 40px 100px rgba(0,0,0,.5);
    transform: translateY(20px) scale(.98); opacity: 0; transition: transform .3s var(--ease), opacity .25s;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.aj-modal-panel::-webkit-scrollbar { width: 8px; }
.aj-modal-panel::-webkit-scrollbar-track { background: transparent; }
.aj-modal-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9999px; }
.aj-modal-panel::-webkit-scrollbar-thumb:hover { background: var(--muted-blue); }
.aj-modal.open .aj-modal-panel { transform: translateY(0) scale(1); opacity: 1; }
.aj-modal-close {
    position: absolute; top: 24px; right: 24px; width: 40px !important; height: 40px !important; border-radius: 50% !important;
    background: var(--tag-bg) !important; border: none !important; color: var(--text-navy) !important; font-size: 18px; font-weight: 600;
    padding: 0 !important; line-height: 1 !important; min-width: 0 !important;
    cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background .2s;
}
.aj-modal-close:hover { background: var(--gold) !important; }
.amodal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-right: 50px; }
.amodal-head-left { display: flex; align-items: center; gap: 16px; }
.amodal-num { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--gold); background: var(--navy); width: 48px; height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.amodal-title { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--text-navy); line-height: 1.2; }
.amodal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.amodal-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.amodal-photo { height: 210px; border-radius: 8px; overflow: hidden; background: var(--bg-light); display: flex; align-items: center; justify-content: center; }
.amodal-photo img { width: 100%; height: 100%; object-fit: cover; }
.amodal-photo-placeholder { font-size: 13px; color: var(--muted-blue); text-align: center; padding: 16px; }
.amodal-body { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; margin-top: 28px; }
.amodal-label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-navy); font-weight: 700; }
.amodal-scope { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.amodal-scope-item { display: flex; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--text-body); }
.amodal-scope-item .check { color: var(--gold); font-weight: 700; flex-shrink: 0; }
.amodal-right { display: flex; flex-direction: column; gap: 20px; }
.amodal-how p { font-size: 15px; line-height: 1.6; color: var(--text-body); margin-top: 8px; }
.amodal-why { background: #fff8e3; border-left: 3px solid var(--gold); border-radius: 4px; padding: 14px 18px; }
.amodal-why p { font-size: 15px; line-height: 1.6; color: var(--text-body); margin-top: 8px; }
.amodal-related { margin-top: 28px; border-top: 1px solid var(--border); padding-top: 20px; }
.amodal-related-label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #9aa8ba; font-weight: 700; }
.amodal-related-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.amodal-related-link { background: var(--tag-bg) !important; border: 1px solid #dbe4f0 !important; color: var(--text-navy) !important; font-weight: 600; font-size: 14px; cursor: pointer; padding: 10px 18px !important; border-radius: 999px !important; transition: border-color .2s, background .2s; }
.amodal-related-link:hover { border-color: var(--gold) !important; background: #fff8e3 !important; }
.amodal-cta { display: flex; gap: 16px; margin-top: 32px; border-top: 1px solid var(--border); padding-top: 24px; }
.amodal-cta .btn-primary { padding: 14px 30px; font-size: 15px; }

/* ── On Site ─────────────────────────────────────────────────── */
/* Scattered "polaroid" photos that fly into place as you scroll to
   them (Chrome/Edge, via animation-timeline: view()) — on browsers
   without scroll-driven animation support the 0s fallback duration
   just settles them straight into their resting tilt, no motion lost,
   just the entrance flourish. */
.field-grid { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 52px; align-items: flex-start; }
.field-photo-slot {
    flex: 1 1 300px; min-width: min(100%, 280px); max-width: 460px; height: 340px;
    animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: view(); animation-range: entry 0% entry 55%;
}
.field-photo {
    width: 100%; height: 100%; background: #fff; padding: 10px 10px 4px; box-shadow: 0 18px 44px rgba(11,29,51,.18);
    transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; display: flex; flex-direction: column;
}
.field-photo:hover { transform: rotate(0deg) scale(1.05) !important; box-shadow: 0 30px 64px rgba(11,29,51,.3); z-index: 5; position: relative; }
.field-photo-img { flex: 1; position: relative; overflow: hidden; background: var(--bg-light); }
.field-photo-img img { width: 100%; height: 100%; object-fit: cover; }
.field-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted-blue); font-size: 13px; text-align: center; padding: 16px; background: repeating-linear-gradient(135deg, var(--bg-light), var(--bg-light) 10px, #eceff4 10px, #eceff4 20px); }
.field-photo-caption { display: flex; align-items: center; gap: 10px; padding: 12px 6px; }
.field-photo-tick { width: 18px; height: 3px; background: var(--gold); transform: skewX(-25deg); flex-shrink: 0; }
.field-photo-caption span:last-child { color: var(--text-navy); font-size: 12.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
@keyframes aj-fly-a { from { transform: translate(-45vw, 24vh) rotate(-26deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aj-fly-b { from { transform: translate(30vw, 30vh) rotate(18deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aj-fly-c { from { transform: translate(-20vw, 38vh) rotate(14deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aj-fly-d { from { transform: translate(40vw, 20vh) rotate(-16deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aj-fly-e { from { transform: translate(-32vw, 16vh) rotate(22deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── About ───────────────────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 72px; align-items: center; }
.about-text { font-size: 17px; line-height: 1.7; color: var(--light-blue); margin-top: 20px; }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin-top: 30px; }
.trust-point { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 15px; }
.trust-point .check { color: var(--gold); font-weight: 700; }
.about-visual { position: relative; display: flex; align-items: center; justify-content: center; }
.about-watermark { position: absolute; font-family: var(--font-display); font-weight: 700; font-size: clamp(160px, 22vw, 300px); letter-spacing: -14px; color: rgba(242,183,5,.06); user-select: none; }
.about-stats { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; width: 100%; }
.about-stat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 28px 24px; }
.as-val { font-family: var(--font-display); font-weight: 700; font-size: 44px; color: var(--gold); font-variant-numeric: tabular-nums; }
.as-lbl { font-size: 14px; color: var(--light-blue); margin-top: 4px; }

/* ── Industries ──────────────────────────────────────────────── */
.industries-list { margin-top: 44px; border-top: 2px solid var(--navy); }
.industry-row {
    display: flex; align-items: center; gap: clamp(16px, 3vw, 36px); flex-wrap: wrap; row-gap: 4px;
    padding: clamp(18px, 3vw, 26px) clamp(8px, 2vw, 20px); border-bottom: 1px solid var(--border);
    background: linear-gradient(105deg, var(--gold), var(--gold-hover)) no-repeat left center / 0% 100%;
    transition: background-size .45s cubic-bezier(.2,.7,.2,1), padding-left .45s cubic-bezier(.2,.7,.2,1);
}
.industry-row:hover { background-size: 100% 100%; padding-left: clamp(20px, 3vw, 36px); }
.industry-num { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text-eyebrow); width: 34px; flex-shrink: 0; }
.industry-tick { width: 20px; height: 4px; background: var(--gold); transform: skewX(-25deg); flex-shrink: 0; }
.industry-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 4vw, 34px); letter-spacing: -.5px; color: var(--text-navy); flex: 1 1 260px; line-height: 1.15; }
.industry-note { font-size: 15px; color: var(--text-body); max-width: 420px; line-height: 1.5; }

/* ── Why Choose Us ───────────────────────────────────────────── */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 40px; margin-top: 48px; }
.why-card { border-top: 3px solid var(--gold); padding-top: 24px; }
.why-num { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #9aa8ba; }
.why-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--text-navy); margin-top: 10px; }
.why-card p { font-size: 15px; line-height: 1.65; color: var(--text-body); margin-top: 12px; }

/* ── Contact ─────────────────────────────────────────────────── */
/* align-items:start (not the grid default of stretch) — the left
   column got much taller once WhatsApp/Emergency/Location/map were
   added, and letting the form card stretch to match left a large
   empty box below the form instead of it just sitting at its own
   natural height. */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; }
.contact-info-list { display: flex; flex-direction: column; gap: 22px; margin-top: 40px; }
.contact-info-item { display: flex; flex-direction: column; gap: 4px; }
.ci-label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-blue); }
.ci-label em { font-style: normal; text-transform: none; letter-spacing: 0; color: #e6837a; font-size: 12px; }
.contact-info-item a, .ci-static { font-size: 17px; color: #fff; line-height: 1.5; }
.contact-info-item a:hover { color: var(--gold); }
.ci-company { display: block; font-family: var(--font-display); font-weight: 600; }
.ci-note { font-size: 13px; color: var(--muted-blue); line-height: 1.5; }
.contact-map {
    margin-top: 32px; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,.12);
    line-height: 0;
}
.contact-map iframe { display: block; filter: grayscale(.15) contrast(1.05); }
.contact-form-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: 40px; }
#aj-contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
#aj-contact-form .span-2 { grid-column: span 2; }
#aj-contact-form input, #aj-contact-form select, #aj-contact-form textarea {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 6px;
    padding: 14px 16px; color: #fff; font-size: 15px; font-family: var(--font-body); outline: none; transition: border-color .2s; width: 100%; box-sizing: border-box;
}
#aj-contact-form select {
    color: var(--light-blue);
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    height: 48px; padding: 0 40px 0 16px; line-height: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23cfe0f5' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
}
#aj-contact-form select option { background: var(--navy); color: #fff; }
#aj-contact-form input:focus, #aj-contact-form select:focus, #aj-contact-form textarea:focus { border-color: var(--gold); }
#aj-contact-form textarea { resize: vertical; }
.btn-send {
    background: var(--btn-form) !important; color: var(--navy) !important; font-weight: 600; font-size: 16px; padding: 16px !important;
    border: none !important; border-radius: 6px !important; cursor: pointer; font-family: var(--font-display); transition: background .2s;
}
.btn-send:hover { background: var(--btn-form-hover) !important; }
.form-sent-state { flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 420px; text-align: center; }
.form-sent-check { width: 64px; height: 64px; border-radius: 50%; background: var(--gold); color: var(--navy); font-size: 30px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.form-sent-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: #fff; }
.form-sent-sub { font-size: 15px; color: var(--light-blue); }

/* ── Footer ──────────────────────────────────────────────────── */
.aj-footer { background: var(--footer-navy); padding: 56px 0 32px; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; flex-wrap: wrap; }
.footer-brand { max-width: 340px; }
.footer-logo { display: flex; align-items: center; gap: 12px; }
.footer-logo img { width: 40px; height: 40px; object-fit: contain; }
.footer-logo span { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: #fff; }
.footer-brand p { font-size: 14px; line-height: 1.6; color: var(--muted-blue); margin-top: 16px; }
.footer-cols { display: flex; gap: 72px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col-title { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-blue); margin-bottom: 4px; }
.footer-col a, .footer-static { font-size: 14px; color: var(--light-blue); }
.footer-col a:hover { color: var(--gold); }
.footer-static { max-width: 260px; line-height: 1.5; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 44px; padding-top: 24px; font-size: 13px; color: var(--muted-blue); }

/* ── Reveal on scroll ────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 48px; }
    .why-grid { grid-template-columns: 1fr; gap: 28px; }
    .amodal-body { grid-template-columns: 1fr; }
    .amodal-photos { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .section-container { padding: 0 24px; }
    .aj-section { padding: 72px 0; }
    .nav-right { display: none; }
    .nav-toggle { display: flex; margin-left: auto; }
    .nav-right.open {
        display: flex; flex-direction: column; align-items: flex-start; position: fixed; top: var(--nav-h); left: 0; right: 0;
        background: var(--navy); border-bottom: 1px solid rgba(242,183,5,.18); padding: 24px; gap: 18px; z-index: 99;
    }
    .nav-right.open .nav-links { flex-direction: column; align-items: flex-start; gap: 18px; }
    /* The diagonal cut only makes sense with real side-by-side space for
       text — on narrow screens the photo becomes a plain full-bleed
       backdrop behind the text instead (still the real uploaded photos,
       just without the angled reveal, which would otherwise force an
       awkwardly wide panel over the text). */
    .hero-slider { width: 100%; left: 0; clip-path: none; }
    .hero-slash-fill, .hero-slash-line { display: none; }
    .hero-slide-shade { background: linear-gradient(180deg, rgba(8,20,38,.5) 0%, rgba(8,20,38,.35) 35%, rgba(8,20,38,.88) 100%); }
    .hero-dots { bottom: auto; top: 16px; }
    .hero-inner { padding: 130px 24px 150px; }
    .hero-copy { max-width: none; }
    .hero-scroll { display: none; }
    .hero-stats-inner { grid-template-columns: repeat(2, 1fr); padding: 22px 24px; }
    .trust-grid { grid-template-columns: 1fr; }
    #aj-contact-form { grid-template-columns: 1fr; }
    #aj-contact-form .span-2 { grid-column: span 1; }
    .footer-cols { gap: 40px; }

    /* The modal's 40px outer + 40px inner padding (built for desktop)
       eats up to 160px combined on a phone screen, squeezing the title
       next to the num badge and close button into almost no room —
       exactly what looked "covered/missing". */
    .aj-modal { padding: 12px; }
    .aj-modal-panel { padding: 24px 20px; max-height: 90vh; }
    .amodal-head { padding-right: 40px; }
    .amodal-num { width: 40px; height: 40px; font-size: 14px; }
    .amodal-title { font-size: 20px; }
    .aj-modal-close { top: 14px !important; right: 14px !important; width: 36px !important; height: 36px !important; }
}

/* ============================================================
   CHARGEPRO PRODUCT PAGE
   ============================================================ */
.cp-hero { position: relative; min-height: 92vh; display: flex; align-items: center; background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); overflow: hidden; }
.cp-hero-watermark {
    position: absolute; right: -60px; bottom: -140px; font-family: var(--font-display); font-weight: 700;
    font-size: clamp(200px, 30vw, 480px); line-height: 1; letter-spacing: -20px; color: rgba(255,255,255,.04);
    user-select: none; pointer-events: none;
}
.cp-hero-inner {
    position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 150px 48px 70px; width: 100%;
    display: flex; flex-wrap: wrap; gap: 56px; align-items: center;
}
.cp-hero-copy { flex: 1 1 460px; min-width: 0; }
.cp-hero-title {
    font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 6.5vw, 64px); line-height: 1.08;
    letter-spacing: -1.5px; color: #fff; margin: 22px 0 0; text-wrap: balance;
}
.cp-hero-chips { display: flex; gap: 26px; margin-top: 36px; flex-wrap: wrap; }
.cp-chip { display: flex; flex-direction: column; gap: 2px; }
.cp-chip-val { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--gold); }
.cp-chip-lbl { font-size: 12.5px; color: var(--muted-blue); }
.cp-hero-media { flex: 0 1 400px; min-width: 300px; }
.cp-hero-photo {
    position: relative; height: 400px; border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid rgba(255,255,255,.2); box-shadow: 0 30px 70px rgba(0,0,0,.45); background: rgba(255,255,255,.06);
}
.cp-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.cp-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted-blue); font-size: 13px; text-align: center; padding: 20px; }
.cp-hero-corner { position: absolute; left: -14px; top: -14px; width: 80px; height: 80px; border-top: 3px solid var(--gold); border-left: 3px solid var(--gold); pointer-events: none; }
.cp-angles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 12px; }
.cp-angle-photo { height: 96px; border-radius: var(--radius); overflow: hidden; background: var(--bg-light); }
.cp-angle-photo img { width: 100%; height: 100%; object-fit: cover; }

.cp-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px; align-items: center; }
.about-text-dark { font-size: 16px; line-height: 1.7; color: var(--text-body); margin-top: 18px; }
.cp-risk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.cp-risk-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 20px; transition: border-color .2s; }
.cp-risk-card:hover { border-color: var(--gold); }
.cp-risk-icon { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--gold); background: var(--navy); width: 38px; height: 38px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.cp-risk-title { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--text-navy); margin-top: 12px; }
.cp-risk-card p { font-size: 13.5px; line-height: 1.55; color: var(--text-body); margin-top: 8px; }

.cp-features-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.cp-spec-box {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 48px; margin-top: 40px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: 16px 40px;
}
.cp-spec-row { display: flex; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.cp-spec-k { font-size: 14px; color: var(--muted-blue); }
.cp-spec-v { font-size: 14px; font-weight: 600; color: #fff; text-align: right; }

.cp-battery-box { margin-top: 32px; background: rgba(242,183,5,.06); border: 1px solid rgba(242,183,5,.35); border-radius: var(--radius-lg); padding: 28px 40px; }
.cp-battery-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cp-battery-head h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: #fff; }
.cp-battery-head span { font-size: 13px; color: var(--muted-blue); }
.cp-battery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 20px 32px; margin-top: 22px; }
.cp-battery-item { display: flex; flex-direction: column; gap: 3px; }
.cp-battery-k { font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-blue); }
.cp-battery-v { font-size: 14.5px; font-weight: 600; color: #fff; }

@media (max-width: 768px) {
    .cp-hero-inner { padding: 130px 24px 40px; }
    .cp-angles { grid-template-columns: 1fr 1fr 1fr; }
    .cp-spec-box, .cp-battery-box { padding: 20px 24px; }
}

/* ============================================================
   PRODUCTS HUB
   ============================================================ */
.products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 28px; }
.product-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
    display: flex; flex-direction: column; transition: box-shadow .25s, border-color .25s;
}
.product-card:hover { box-shadow: 0 16px 40px rgba(11,29,51,.12); border-color: var(--gold); }
.product-photo { position: relative; height: 220px; flex-shrink: 0; background: var(--bg-light); overflow: hidden; }
.product-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.product-card:hover .product-photo img { transform: scale(1.05); }
.product-badge {
    position: absolute; left: 16px; top: 16px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--gold); background: var(--navy); border-radius: 999px; padding: 6px 14px;
}
.product-badge.is-available { color: var(--navy); background: var(--gold); }
.product-body { padding: 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.product-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--text-navy); line-height: 1.25; }
.product-body p { font-size: 14.5px; line-height: 1.6; color: var(--text-body); flex: 1; }
.product-btn {
    display: inline-block; margin-top: 8px; background: var(--navy); color: #fff !important; font-weight: 600; font-size: 14px;
    padding: 12px 22px; border-radius: 6px; text-align: center; border: 1px solid var(--navy); transition: background .2s, color .2s, border-color .2s;
}
.product-btn:hover { background: var(--gold); color: var(--navy) !important; border-color: var(--gold); }
.product-btn.is-primary { background: #fff; color: var(--text-navy) !important; border-color: #c4d0e0; }
.product-btn.is-primary:hover { background: var(--gold); color: var(--navy) !important; border-color: var(--gold); }

.products-cta-banner {
    background: var(--navy); border-radius: var(--radius-lg); padding: clamp(28px, 5vw, 40px); margin-top: 40px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.products-cta-banner h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: #fff; }
.products-cta-banner p { font-size: 15px; color: var(--muted-blue); margin-top: 8px; max-width: 520px; }