/* ============================================================
   SKES ENERGY — public site
   Palette drawn from the brand mark: dusk-blue sky, sun gold,
   gecko green. Fraunces carries the warmth of the sun in
   headlines; Manrope keeps the interface legible and calm.
   ============================================================ */

:root{
  --frame:min(1320px,94%);   /* v97f: ONE frame for header, search bar, sections and footer — edges line up */
  --dusk:#0A2E4B;       /* deep tropical sky, used for header/footer/dark sections */
  --dusk-2:#0F3E66;     /* lighter dusk for gradients */
  --sun:#F5A825;        /* solar gold, primary accent */
  --sun-soft:#FFD98A;   /* pale gold for glows/highlights */
  --gecko:#2E9E52;      /* leaf green, secondary accent */
  --gecko-deep:#1F7A3E;
  --sky:#EEF5FB;        /* pale sky, alternating section background */
  --paper:#FCFEFF;      /* base page background */
  --ink:#12232F;        /* body text */
  --ink-soft:#4B6072;   /* secondary text */
  --line:#D9E4EC;       /* hairlines */
  --coral:#E4572E;      /* rare accent, used only for the gecko's eye motif */
  --white:#FFFFFF;
  --radius:10px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Manrope',Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.6;
}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:600;margin:0;letter-spacing:-0.01em}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:var(--frame);margin:auto}
/* Wider than the standard marketing-page container — used for the Shop page's hero and product
   grid, which were sitting inside the same 1180px container as the rest of the site and leaving
   large unused margins on wide screens instead of showing more of the catalogue. */
.container-wide{width:var(--frame);margin:auto}
::selection{background:var(--sun-soft);color:var(--dusk)}

:focus-visible{outline:3px solid var(--sun);outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
}

/* ---------- Buttons ---------- */
.btn{
  border:0;border-radius:999px;padding:13px 26px;font-weight:700;font-size:15px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Manrope',sans-serif;transition:transform .18s ease, box-shadow .18s ease;
}
.btn-primary{background:var(--sun);color:var(--dusk)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(245,168,37,.35)}
.btn-outline{background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#fff}
.btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-dark{background:var(--dusk);color:#fff}
.btn-dark:hover{background:var(--dusk-2)}
.btn-ghost{background:transparent;color:var(--dusk);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--dusk)}

/* ---------- Top notice + header ---------- */
.topbar{background:var(--dusk);color:#a9c3d8;padding:8px 4%;font-size:12.5px;text-align:center;letter-spacing:.02em}
.site-header{position:sticky;top:0;z-index:40;background:rgba(10,46,75,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;gap:22px;padding:10px 0}
.logo{width:220px;height:auto;display:block}
.nav-links{display:flex;gap:18px;margin:0 auto;align-items:center}
/* Bigger logo: keep the 12-item menu on one line on mid-size screens. */
.nav>a:first-child{flex:none}
/* The header gets a wider row than the page content so the bigger logo + full menu fit. */
.site-header .nav.container{width:var(--frame)}
.nav-links>a,.nav-links .dropdown-toggle,.nav-links .btn,.account-nav,.account-nav a{white-space:nowrap}
body{overflow-x:clip}
html.nav-compact .nav-links:not(.open){display:none}
html.nav-compact .mobile-menu{display:block}
html.nav-compact .nav-quick{display:flex}
html.nav-compact .nav-links.open{display:flex;position:absolute;left:0;right:0;top:100%;background:var(--dusk);padding:18px 6%;flex-direction:column;align-items:flex-start;gap:16px;max-height:calc(100vh - 70px);overflow-y:auto}
html.nav-compact .nav-extra{display:revert!important}
@media(max-width:1500px){.logo{width:190px}.nav-links{gap:13px}.nav-links a,.nav-links .dropdown-toggle{font-size:13.5px}.nav-links .btn{padding:8px 14px!important}}
@media(max-width:980px){.logo{width:175px}}
@media(max-width:640px){.logo{width:150px}}
.nav-links a{color:#dce8f2;font-weight:600;font-size:14.5px}
.nav-links a:hover{color:var(--sun)}

/* ---------- Nav category dropdown (Shop) ---------- */
.nav-links .has-dropdown{position:relative}
.nav-links .dropdown-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;background:none;border:none;font:inherit;color:#dce8f2;font-weight:600;font-size:14.5px;padding:0}
.nav-links .dropdown-toggle:hover{color:var(--sun)}
.dropdown-toggle .chev{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s ease;margin-top:-4px;flex:none}
.has-dropdown:hover .chev,.has-dropdown.open .chev{transform:rotate(225deg);margin-top:2px}
.nav-dropdown-menu{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(6px);min-width:220px;background:var(--white);border-radius:14px;box-shadow:0 18px 40px rgba(10,20,35,.22);padding:10px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:60}
.has-dropdown:hover .nav-dropdown-menu,.has-dropdown.open .nav-dropdown-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-dropdown-menu::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.nav-dropdown-menu a{display:block;color:var(--ink)!important;font-weight:600;font-size:13.5px;padding:9px 12px;border-radius:9px;white-space:nowrap}
.nav-dropdown-menu a:hover{background:var(--sky);color:var(--gecko-deep)!important}
.nav-dropdown-menu .nav-dropdown-all{color:var(--ink-soft)!important;border-bottom:1px solid var(--line);border-radius:0;margin-bottom:2px;padding-bottom:11px}
.nav-dropdown-menu .nav-dropdown-label{display:block;color:var(--ink-soft)!important;font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:12px 12px 4px;border-top:1px solid var(--line);margin-top:6px}
@media(max-width:1280px){
  .nav-links .has-dropdown{display:flex;flex-direction:column;align-items:flex-start;width:100%}
  .nav-links .dropdown-toggle{color:#dce8f2;width:100%;justify-content:space-between;padding:2px 0}
  .nav-dropdown-menu{position:static;transform:none;box-shadow:none;background:transparent;padding:6px 0 2px 12px;display:none;opacity:1;visibility:visible;pointer-events:auto;min-width:0}
  /* The desktop open-state rule above (.has-dropdown.open .nav-dropdown-menu — two classes) is
     more specific than the plain .nav-dropdown-menu reset just above, so its
     transform:translateX(-50%) was still winning here and shoving the whole submenu ~half its
     width off the left edge of the screen — every label showed with its first few letters cut
     off. Matching that same two-class selector to reset the transform again fixes it. */
  .has-dropdown.open .nav-dropdown-menu{display:block;transform:none}
  .nav-dropdown-menu a{color:#b9cadb!important;padding:8px 0}
  .nav-dropdown-menu a:hover{background:none;color:var(--sun)!important}
  .nav-dropdown-menu .nav-dropdown-all{border-bottom:1px solid rgba(255,255,255,.15)}
  .nav-dropdown-menu .nav-dropdown-label{color:#7f97ac!important;border-top:1px solid rgba(255,255,255,.15)}
}
.mobile-menu{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:24px}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:radial-gradient(1100px 700px at 50% -10%, #14507f 0%, transparent 60%), linear-gradient(190deg,var(--dusk) 0%,#082238 100%);
  padding:96px 0 0;text-align:center;
}
.hero-bg-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.14;pointer-events:none}
.hero-bg-art svg{width:900px;max-width:140%;animation:spin 120s linear infinite}
.hero-badge{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:9px 20px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#dce8f2}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--gecko);box-shadow:0 0 0 4px rgba(46,158,82,.25)}
.hero-copy{position:relative;z-index:1;max-width:800px;margin:26px auto 0;padding-bottom:64px}
.hero h1{font-size:clamp(36px,5.4vw,60px);color:#fff;line-height:1.1;font-weight:600}
.hero h1 .accent-gold{color:var(--sun)}
.hero h1 .accent-gradient{background:linear-gradient(90deg,var(--sun),var(--gecko));-webkit-background-clip:text;background-clip:text;color:transparent}
.accent-gold-inline{color:var(--sun)}
.accent-gradient-inline{background:linear-gradient(90deg,var(--sun),var(--gecko));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:#c3d6e5;font-size:18px;line-height:1.75;max-width:52ch;margin:22px auto 0}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;justify-content:center}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Hero variant: full-bleed photo ----------
   The photo itself lives on ::before (not the section's own background) so it can be scaled by a
   slow, continuous "Ken Burns" zoom without also zooming the headline/buttons sitting on top of
   it — those stay on their own layer (.container, z-index:2). --hero-bg is set inline in the HTML
   on the section itself, e.g. style="--hero-bg:url('...')". */
.hero-photo{min-height:620px;display:flex;align-items:flex-end;padding:0;text-align:left}
.hero-photo::before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--hero-bg);background-size:cover;background-position:center;animation:kenBurns 22s ease-in-out infinite alternate}
.hero-photo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(8,25,40,.25) 0%, rgba(7,22,36,.55) 45%, rgba(6,19,31,.94) 100%)}
.hero-photo .container{position:relative;z-index:2;padding:120px 0 60px}
/* Hero/CTA can instead play a looping background video (real footage) via a <video class="hero-media|
   cta-media"> placed as the section's first child — it sits at the same z-index:0 layer the ::before
   photo would otherwise occupy, under the same gradient ::after overlay, so both markup styles compose
   with the rest of this file unchanged. */
.hero-media,.cta-media{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;background:#0a1e30;animation:kenBurns 22s ease-in-out infinite alternate}
@keyframes kenBurns{0%{transform:scale(1)}100%{transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){.hero-photo::before,.cta-banner::before,.hero-media,.cta-media{animation:none}}
.hero-photo .hero-badge{margin:0}
.hero-photo h1{margin-top:20px;max-width:14ch}
.hero-photo p{margin-left:0}
.hero-stats-row{display:flex;gap:34px;flex-wrap:wrap;margin-top:36px;padding-top:24px;border-top:1px solid rgba(255,255,255,.2)}
.hero-stats-row div{color:#c3d6e5;font-size:12.5px}
.hero-stats-row b{color:var(--sun);font-family:'Fraunces',serif;font-size:21px;font-weight:600;display:block;margin-bottom:2px;font-variant-numeric:tabular-nums}

/* ---------- Hero energy motion: glowing solar orbs + spinning rays behind the photo hero ----------
   Sit above the Ken Burns photo layer (z-index:0) and its dark gradient (z-index:1), same level as
   that gradient so they read as part of the atmosphere rather than floating over the headline. */
.hero-photo{position:relative}
.hero-glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:1}
.hero-glow.g1{width:520px;height:520px;background:radial-gradient(circle,var(--sun) 0%,transparent 70%);top:-180px;right:-140px;opacity:.55;animation:heroPulse 7s ease-in-out infinite}
.hero-glow.g2{width:420px;height:420px;background:radial-gradient(circle,var(--gecko) 0%,transparent 70%);bottom:-160px;left:-120px;opacity:.4;animation:heroPulse 9s ease-in-out infinite 1.4s}
@keyframes heroPulse{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.18);opacity:.6}}
.hero-rays{position:absolute;top:-240px;right:-180px;width:560px;height:560px;opacity:.16;pointer-events:none;z-index:1;animation:spin 100s linear infinite}
.hero-badge .dot{animation:dotPulse 2.2s ease-in-out infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 4px rgba(46,158,82,.25)}50%{box-shadow:0 0 0 9px rgba(46,158,82,.1)}}
.scroll-cue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:2;width:28px;height:28px;border:1.5px solid rgba(255,255,255,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;animation:scrollCue 2.2s ease-in-out infinite}
.scroll-cue svg{width:12px;height:12px;stroke:#fff}
@keyframes scrollCue{0%,100%{transform:translate(-50%,0);opacity:.7}50%{transform:translate(-50%,7px);opacity:1}}

/* ---------- Site-wide scroll reveal (see motion.js) ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.reveal.in-view{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-glow,.hero-rays,.hero-badge .dot,.scroll-cue,.hero-bg-art svg{animation:none}
}

/* ---------- Why Solar: stat cards ---------- */
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat-card{background:#0f3a5c;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:26px}
.stat-card svg{width:26px;height:26px;margin-bottom:14px}
.stat-card b{display:block;font-family:'Fraunces',serif;font-size:30px;font-weight:600;margin-bottom:6px}
.stat-card b.gold{color:var(--sun)}
.stat-card b.green{color:var(--gecko)}
.stat-card .label{display:block;color:#fff;font-weight:700;font-size:14px;margin-bottom:8px}
.stat-card p{color:#a9c3d8;font-size:13.5px;line-height:1.7;margin:0}

/* ---------- Services teaser: asymmetric feature + stack ---------- */
.service-teaser{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.teaser-feature{position:relative;background:#0f3a5c;border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.teaser-feature img{width:100%;height:280px;object-fit:cover;transition:transform .55s ease,filter .55s ease;transform:translateY(var(--py,0px)) scale(1.001)}
.teaser-feature:hover img{transform:translateY(var(--py,0px)) scale(1.07);filter:saturate(1.12) brightness(1.03)}
.teaser-feature .chip{position:absolute;top:16px;left:16px;background:rgba(10,46,75,.85);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.25);color:var(--sun-soft);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.teaser-feature-body{padding:26px}
.teaser-feature-body h3{color:#fff;font-size:22px;margin-bottom:10px}
.teaser-feature-body p{color:#a9c3d8;font-size:14.5px;line-height:1.7;margin-bottom:16px}
.teaser-stack{display:grid;gap:22px}
.teaser-card{background:#0f3a5c;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:24px;flex:1;display:flex;flex-direction:column;justify-content:center}
.teaser-card.with-media{flex-direction:row;padding:0;align-items:stretch;overflow:hidden}
.teaser-card.with-media img{width:38%;object-fit:cover;transition:transform .55s ease,filter .55s ease;transform:translateY(var(--py,0px)) scale(1.001)}
.teaser-card.with-media:hover img{transform:translateY(var(--py,0px)) scale(1.09);filter:saturate(1.12) brightness(1.03)}
.teaser-card.with-media > div{padding:22px;flex:1}
.teaser-card h3{color:#fff;font-size:18px;margin-bottom:8px}
.teaser-card p{color:#a9c3d8;font-size:13.5px;line-height:1.7;margin-bottom:12px}
.chip.small{position:static;display:inline-block;margin-bottom:10px;background:rgba(245,168,37,.15);border:1px solid rgba(245,168,37,.3);color:var(--sun);font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.cta{color:var(--sun);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.cta svg{width:14px;height:14px;transition:transform .2s ease}
.cta:hover svg{transform:translateX(3px)}

/* ---------- Testimonials carousel ---------- */
.testimonial-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:36px}
.carousel-nav{display:flex;gap:10px}
.carousel-nav button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.carousel-nav button:hover{border-color:var(--sun);color:var(--sun)}
.testimonial-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}
.testimonial-track::-webkit-scrollbar{display:none}
.testimonial-card{scroll-snap-align:start;flex:0 0 340px;background:#0f3a5c;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:26px;display:flex;flex-direction:column}
.testimonial-card .result-chip{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;background:rgba(245,168,37,.15);border:1px solid rgba(245,168,37,.3);color:var(--sun);font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;margin-bottom:16px}
.testimonial-card blockquote{margin:0 0 20px;color:#dce8f2;font-size:14.5px;line-height:1.75;font-style:italic}
.testimonial-card .person{display:flex;align-items:center;gap:12px;margin-top:auto}
.testimonial-card .avatar{width:42px;height:42px;border-radius:50%;background:var(--sun);color:var(--dusk);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;font-family:'Fraunces',serif;flex:none}
.testimonial-card .avatar-photo{object-fit:cover;background:none}
.testimonial-card .person b{display:block;color:#fff;font-size:14px}
.testimonial-card .person span{display:block;color:#a9c3d8;font-size:12.5px}

/* ---------- About / story image tag ---------- */
.about-media .tag-crew{position:absolute;left:24px;bottom:24px;background:rgba(10,46,75,.85);color:#fff;padding:12px 18px;border-radius:10px;font-size:13px;backdrop-filter:blur(6px);font-weight:700}

/* ---------- Leadership ---------- */
.leadership-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.leader-card{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.leader-card .photo{height:230px;overflow:hidden;background:var(--sky)}
.leader-card .photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .5s ease;transform:translateY(var(--py,0px)) scale(1.001)}
.leader-card:hover .photo img{transform:translateY(var(--py,0px)) scale(1.08);filter:saturate(1.12) brightness(1.03)}
.leader-card .initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:44px;font-weight:600;color:var(--dusk);background:linear-gradient(160deg,var(--sky),#dcebf7)}
.leader-card .info{padding:22px}
.leader-card h3{font-size:18px;margin-bottom:2px}
.leader-card .role{color:var(--gecko-deep);font-weight:700;font-size:13px;margin-bottom:10px;display:block}
.leader-card p{color:var(--ink-soft);font-size:13.5px;line-height:1.7;margin-bottom:14px}
.leader-card .creds{display:flex;gap:8px;flex-wrap:wrap}
.leader-card .creds span{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:700;color:var(--dusk)}
.leader-card.placeholder{border:1.5px dashed var(--line);display:flex;align-items:center;justify-content:center;min-height:340px}
.leader-card.placeholder .info{text-align:center;padding:30px}
.leader-card.placeholder .plus{width:52px;height:52px;border-radius:50%;border:1.5px dashed var(--ink-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--ink-soft);font-size:24px}
.leader-card.placeholder p{color:var(--ink-soft);font-size:13.5px}

/* ---------- Final CTA banner ----------
   Same layered approach as the hero: --cta-bg (set inline on the element) paints on ::before with
   its own slow Ken Burns zoom, the dark gradient moves to ::after, and two glow orbs (reusing the
   hero's .hero-glow) sit between them so the closing banner feels as alive as the top of the page. */
.cta-banner-wrap{padding:0 0 100px}
.cta-banner{position:relative;border-radius:24px;overflow:hidden;padding:70px 60px}
.cta-banner::before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--cta-bg);background-size:cover;background-position:center;animation:kenBurns 24s ease-in-out infinite alternate}
.cta-banner .cta-media{animation-duration:24s}
.cta-banner::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg, rgba(6,19,31,.92) 20%, rgba(6,19,31,.55) 60%, rgba(6,19,31,.25) 100%)}
.cta-banner .hero-glow{z-index:1}
.cta-banner-content{position:relative;z-index:2;max-width:560px}
.cta-banner .hero-badge{margin:0 0 20px}
.cta-banner h2{color:#fff;font-size:clamp(28px,3.6vw,40px);line-height:1.15}
.cta-banner p{color:#c3d6e5;font-size:16px;line-height:1.7;margin:18px 0 30px}
.cta-banner .actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.cta-banner .actions .cta{color:#fff;font-weight:700}

/* stat strip, inline within dusk hero — not a floating card */
.stats{background:transparent;border-top:1px solid rgba(255,255,255,.12);position:relative;z-index:1}
.stats .container{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:26px 8px;border-right:1px solid rgba(255,255,255,.12);text-align:left}
.stat:last-child{border-right:0}
.stat b{font-family:'Fraunces',serif;font-size:32px;color:var(--sun);display:block;font-weight:600}
.stat span{display:block;color:#a9c3d8;font-size:13px;margin-top:4px}

/* ---------- generic section rhythm ---------- */
section{padding:100px 0}
.section-head{max-width:640px;margin-bottom:48px}
.section-head .kicker{color:var(--gecko-deep);font-weight:700;font-size:14px;margin-bottom:10px;display:block}
.section-head h2{font-size:clamp(30px,3.6vw,44px);line-height:1.15}
.section-head p{color:var(--ink-soft);margin-top:16px;font-size:16.5px;line-height:1.75;max-width:56ch}
.on-sky{background:var(--sky)}
.on-white{background:var(--white)}
.on-dusk{background:var(--dusk)}
.on-dusk .section-head h2{color:#fff}
.on-dusk .section-head p{color:#a9c3d8}
.on-dusk .section-head .kicker{color:var(--sun-soft)}

/* ---------- Services: dark photo cards with a badge chip and checklist ---------- */
.service-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service-card{background:#0f3a5c;border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease, box-shadow .25s ease}
.service-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.28)}
.service-card .media{position:relative;height:190px;overflow:hidden}
.service-card .media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .5s ease;transform:translateY(var(--py,0px)) scale(1.001)}
.service-card:hover .media img{transform:translateY(var(--py,0px)) scale(1.08);filter:saturate(1.12) brightness(1.03)}
.service-card .chip{position:absolute;top:14px;left:14px;background:rgba(10,46,75,.85);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.25);color:var(--sun-soft);font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.service-card .body{padding:24px;display:flex;flex-direction:column;flex:1}
.service-card h3{color:#fff;font-size:20px;margin-bottom:8px;font-weight:600}
.service-card p{color:#a9c3d8;font-size:14px;line-height:1.7;margin-bottom:16px}
.service-card ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px}
.service-card li{display:flex;gap:8px;align-items:flex-start;color:#c3d6e5;font-size:13.5px;line-height:1.4}
.service-card li svg{flex:none;margin-top:2px;width:15px;height:15px}
.service-card .cta{margin-top:auto;color:var(--sun);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.service-card .cta svg{width:14px;height:14px;transition:transform .2s ease}
.service-card .cta:hover svg{transform:translateX(3px)}

/* ---------- Products ---------- */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.product{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}
.product:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(10,46,75,.14)}
.product .thumb{height:230px;background:var(--sky);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:6px}
.product .thumb img{width:100%;height:100%;object-fit:contain;transition:transform .4s ease}
.product:hover .thumb img{transform:scale(1.05)}
.product-body{padding:22px}
.badge{display:inline-block;background:var(--sky);color:var(--dusk);padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:700}
.product-body h3{font-size:19px;margin:12px 0 4px}
.price{font-family:'Fraunces',serif;font-weight:600;font-size:24px;color:var(--dusk);margin-top:10px}
.muted{color:var(--ink-soft);font-size:13.5px}
.product-actions{margin-top:16px}

/* ---------- Pricing: three tiers, dark cards, one highlighted ---------- */
.pricing-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.price-card{background:#0f3a5c;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:32px;position:relative;display:flex;flex-direction:column}
.price-card.featured{border:1px solid var(--sun);box-shadow:0 30px 60px rgba(245,168,37,.15);transform:translateY(-10px)}
.price-card .badge-top{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--sun);color:var(--dusk);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:6px 16px;border-radius:999px;white-space:nowrap}
.price-card .tier-badge{display:inline-block;color:var(--sun-soft);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px}
.price-card h3{color:#fff;font-size:20px;margin-bottom:14px;font-weight:600}
.price-card .amount{font-family:'Fraunces',serif;font-size:30px;color:var(--sun);font-weight:600;line-height:1.1}
.price-card .amount.custom{color:#fff;font-size:26px}
.price-card .per{color:#a9c3d8;font-size:12.5px;margin-top:4px}
.price-card .desc{color:#a9c3d8;font-size:14px;line-height:1.7;margin:16px 0}
.price-card ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.price-card li{display:flex;gap:8px;align-items:flex-start;color:#c3d6e5;font-size:13.5px;line-height:1.4}
.price-card li svg{flex:none;margin-top:2px;width:15px;height:15px}
.price-card .btn{width:100%;margin-top:auto}
.pricing-note{text-align:center;color:var(--ink-soft);font-size:13px;margin-top:28px}

/* System sizer: 24V/48V tier tabs + automatic panel-count calculator */
.system-sizer{margin-top:64px;padding-top:56px;border-top:1px solid var(--line)}
.tier-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;max-width:920px;margin:0 auto 28px}
.tier-tab{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:16px 10px;text-align:center;cursor:pointer;transition:border-color .15s ease, box-shadow .15s ease}
.tier-tab b{display:block;font-family:'Fraunces',serif;font-size:19px;color:var(--dusk);font-weight:600}
.tier-tab span{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:3px;font-weight:700;letter-spacing:.02em}
.tier-tab.active{border-color:var(--sun);box-shadow:0 8px 20px rgba(245,168,37,.2);background:#fffaf0}
.sizer-panel{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px;display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:center}
.sizer-controls .field{margin:0}
.sizer-result{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.sizer-result .big{font-family:'Fraunces',serif;font-size:38px;font-weight:600;color:var(--dusk);line-height:1}
.sizer-result .big span{display:block;font-family:'Manrope',sans-serif;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-top:6px;letter-spacing:.02em}
.sizer-meta{display:grid;gap:6px;font-size:13.5px;color:var(--ink-soft)}
.sizer-meta b{color:var(--ink)}

/* ---------- Process: icon step cards with a time estimate ---------- */
.step-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.step-card{background:#0f3a5c;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:28px;display:flex;gap:20px}
.step-card .icon-circle{width:52px;height:52px;border-radius:50%;background:rgba(245,168,37,.15);display:flex;align-items:center;justify-content:center;flex:none}
.step-card .icon-circle svg{width:24px;height:24px}
.step-card .meta{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.step-card .num{color:var(--sun);font-weight:800;font-size:13px;letter-spacing:.03em}
.step-card .time{background:rgba(255,255,255,.08);color:#c3d6e5;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}
.step-card h3{color:#fff;font-size:18px;margin-bottom:6px;font-weight:600}
.step-card p{color:#a9c3d8;font-size:14px;line-height:1.7}

/* ---------- FAQ accordion ---------- */
.faq-list{max-width:820px;margin:0 auto;display:grid;gap:14px}
.faq-item{background:#0f3a5c;border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:0;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;color:#fff;font-weight:700;font-size:15px;cursor:pointer;gap:16px;font-family:'Manrope',sans-serif}
.faq-q svg{flex:none;transition:transform .2s ease;color:#a9c3d8}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.open .faq-a{max-height:260px}
.faq-a p{padding:0 24px 20px;color:#a9c3d8;font-size:14px;line-height:1.75;margin:0}

/* ---------- Portfolio ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.filter{padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:13.5px;cursor:pointer;color:var(--ink-soft)}
.filter.active{background:var(--dusk);color:#fff;border-color:var(--dusk)}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.project{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer}
.project-media{position:relative;overflow:hidden;height:210px;background:var(--sky)}
.project-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .5s ease;transform:translateY(var(--py,0px)) scale(1.001)}
.project:hover .project-media img{transform:translateY(var(--py,0px)) scale(1.09);filter:saturate(1.12) brightness(1.03)}
.project-body{padding:18px 20px}
.project-body h3{font-size:18px;margin:10px 0 4px}
.project-body small{color:var(--ink-soft)}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.about-media{position:relative;border-radius:16px;overflow:hidden;height:480px;background:linear-gradient(160deg,var(--dusk),#0d456f)}
.about-media img{width:100%;height:100%;object-fit:cover;opacity:.85;mix-blend-mode:luminosity;transition:transform .6s ease,filter .6s ease;transform:translateY(var(--py,0px)) scale(1.001)}
.about-media:hover img{transform:translateY(var(--py,0px)) scale(1.07);filter:saturate(1.15)}
.about-media .tag{position:absolute;left:24px;bottom:24px;background:rgba(10,46,75,.85);color:#fff;padding:12px 16px;border-radius:10px;font-size:13.5px;backdrop-filter:blur(6px)}
.about h2{margin-bottom:18px}
.about p{color:var(--ink-soft);line-height:1.8;margin-bottom:16px;font-size:16px}
.cert-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.cert{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:700;color:var(--dusk)}

/* ---------- Calculator ---------- */
.calculator{background:linear-gradient(160deg,var(--dusk),#0d3f66)}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.panel{background:var(--white);color:var(--ink);padding:32px;border-radius:16px}
label{display:block;font-size:13px;font-weight:700;color:var(--ink-soft);margin-bottom:8px}
.field{margin-bottom:18px}
input:not([type="checkbox"]):not([type="radio"]),select,textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fbfdff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sun);border-color:transparent}
/* Without this exclusion, checkboxes and radios inherit width:100% from the rule above and
   render as full-width bars instead of normal-sized controls — this hit every checkbox/radio
   sitewide (the saved-address picker on checkout, "Set as default" checkboxes, filters, etc.),
   most visibly on the checkout address picker where the radio stretched the full row width
   while its label text sat off to the right, disconnected from it. */
input[type="checkbox"],input[type="radio"]{width:16px;height:16px;flex:none;accent-color:var(--dusk);cursor:pointer}
.result{font-family:'Fraunces',serif;font-weight:600;font-size:42px;color:var(--dusk);margin-top:6px}
.calc-note{margin-top:14px;color:var(--ink-soft);font-size:13.5px}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px}
#contact.contact-highlight{animation:contactPulse 1.3s ease 2}
@keyframes contactPulse{0%{background:rgba(46,158,82,.14)}100%{background:transparent}}
.contact-item{padding:18px 0;border-bottom:1px solid var(--line)}
.contact-item b{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--gecko-deep);margin-bottom:5px}
.contact-item a,.contact-item span{font-size:16px}

/* ---------- Footer ---------- */
footer{background:var(--dusk);color:#a9c3d8;padding:60px 0 22px}
.footer-grid{display:grid;grid-template-columns:1.3fr .85fr .85fr;gap:50px}
.footer-logo{width:220px;max-width:100%;margin-bottom:14px}
.footer-tagline{font-size:13.5px;letter-spacing:.03em;color:#7d9bb2}
.footer-grid h3{font-family:'Manrope',sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:#fff;margin-bottom:14px}
.footer-grid a,.footer-grid span{display:block;margin:9px 0;color:#a9c3d8;font-size:14.5px}
.footer-grid a:hover{color:var(--sun)}
.copy{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:18px;font-size:12.5px;color:#7d9bb2}

/* ---------- Toast + Modal ---------- */
.toast{position:fixed;right:20px;bottom:20px;z-index:99;background:var(--dusk);color:#fff;padding:15px 20px;border-radius:10px;display:none;box-shadow:0 15px 40px rgba(0,0,0,.3)}
.modal{position:fixed;inset:0;background:rgba(6,20,32,.72);display:none;place-items:center;z-index:100;padding:20px}
.modal.open{display:grid}
.modal-box{width:min(720px,94%);max-height:90vh;overflow:auto;background:#fff;padding:30px;border-radius:16px;position:relative}
.modal-close{position:absolute;right:16px;top:12px;border:0;background:none;font-size:28px;cursor:pointer;color:var(--ink-soft)}
.image-viewer,.portfolio-viewer{text-align:center;max-width:1000px}
.image-viewer img,.portfolio-viewer img{max-width:100%;max-height:72vh;object-fit:contain;margin:0 auto;border-radius:10px}
.image-viewer h2,.portfolio-viewer h2{margin-top:16px;font-size:22px}

/* ---------- Payment page ---------- */
.payment-hero{background:linear-gradient(180deg,var(--dusk),#0d3f66);color:#fff;padding:70px 0 50px;text-align:left}
.payment-hero h1{color:#fff;font-size:clamp(30px,4vw,44px);max-width:16ch}
.payment-hero p{color:#c3d6e5;max-width:52ch;margin-top:16px;font-size:16.5px}
.payment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-30px;position:relative;z-index:2}
.payment-card{border:1px solid var(--line);border-radius:14px;padding:24px;background:#fff;display:flex;gap:14px;align-items:flex-start;cursor:pointer;transition:box-shadow .2s ease, transform .2s ease}
.payment-card:hover{box-shadow:0 16px 34px rgba(10,46,75,.14);transform:translateY(-3px)}
.payment-card h3{margin:0 0 6px;font-size:18px}
.payment-card p{margin:0;font-size:13px;color:var(--ink-soft)}
.pay-icon{width:44px;height:44px;min-width:44px;border-radius:11px;display:grid;place-items:center;font-family:'Fraunces',serif;font-weight:600;font-size:19px;color:#fff}
.pay-icon.gcash{background:#0e7cff}
.pay-icon.maya{background:var(--gecko)}
.pay-icon.card{background:var(--dusk)}
.pay-icon.debit{background:var(--sun);color:var(--dusk)}
.qr-payment{margin-top:22px;border:1px solid var(--line);border-radius:16px;padding:30px;display:grid;grid-template-columns:1fr 220px;align-items:center;gap:34px;background:var(--sky)}
.qr-frame{width:200px;height:200px;background:#fff;border-radius:14px;padding:12px;box-shadow:0 12px 30px rgba(10,46,75,.15);display:flex;align-items:center;justify-content:center}
.qr-frame img{width:100%;height:100%;object-fit:contain}
.payment-methods{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px 0}
.method{background:#fff;border:1px solid var(--line);padding:14px 16px;text-align:left;cursor:pointer;border-radius:10px}
.method.active{border:2px solid var(--sun);background:#fffaf0}
.method b,.method span{display:block}
.method span{font-size:11.5px;color:var(--ink-soft);margin-top:4px}
.checkout-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.note{font-size:12px;color:var(--ink-soft);margin-top:14px;line-height:1.6}

/* ============================================================
   SHOP — Wix-Stores-style catalogue, cart drawer, checkout
   ============================================================ */

/* Cart icon in nav */
.cart-icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;cursor:pointer}
.cart-icon-btn svg{width:19px;height:19px}
.cart-badge{position:absolute;top:-6px;right:-6px;background:var(--sun);color:var(--dusk);font-size:11px;font-weight:800;min-width:18px;height:18px;border-radius:999px;display:none;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--dusk)}

/* Shop header banner */
.shop-hero{background:linear-gradient(180deg,var(--dusk),#0d3f66);padding:64px 0 40px;text-align:center}
.shop-hero h1{color:#fff;font-size:clamp(30px,4vw,44px)}
.shop-hero p{color:#c3d6e5;max-width:56ch;margin:14px auto 0}

/* Toolbar: category pills + sort */
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:26px 0;border-bottom:1px solid var(--line)}
.shop-filters{display:flex;gap:8px;flex-wrap:wrap}
.shop-sort{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-soft)}
.shop-sort select{padding:9px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
.shop-count{color:var(--ink-soft);font-size:13.5px}

/* Sidebar filter panel */
.shop-layout{display:grid;grid-template-columns:272px 1fr;gap:30px;align-items:start;padding-top:30px}
.shop-sidebar{background:var(--sky);border:1px solid var(--line);border-radius:18px;padding:24px;position:sticky;top:96px}
.shop-sidebar .filters-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.shop-sidebar .filters-head h3{font-size:19px;margin:0;color:var(--ink)}
.shop-sidebar .clear-all{background:none;border:none;font:inherit;font-size:13px;font-weight:700;color:var(--sun);cursor:pointer;padding:0}
.shop-sidebar .clear-all:hover{color:var(--gecko-deep)}
.filter-group{margin-bottom:20px}
.filter-group:last-of-type{margin-bottom:18px}
.filter-group>label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:9px}
.filter-group input[type="text"],.filter-group select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:13.5px;background:#fff;color:var(--ink);appearance:none;-webkit-appearance:none}
.filter-group select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234B6072' stroke-width='2'><path d='M5 8l5 5 5-5' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 12px center;background-size:14px;padding-right:34px}
.filter-group input[type="text"]:focus,.filter-group select:focus{outline:none;border-color:var(--sun)}
.filter-group input[type="text"]::placeholder{color:#9ab0c2}
.price-range-label{color:var(--sun);font-weight:800}
.filter-group input[type="range"]{width:100%;accent-color:var(--dusk);margin-top:2px;cursor:pointer}
.instock-check{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-weight:700;font-size:13.5px;color:var(--ink);cursor:pointer}
.instock-check input{width:16px;height:16px;accent-color:var(--dusk);cursor:pointer}
@media(max-width:900px){
  .shop-layout{grid-template-columns:1fr}
  .shop-sidebar{position:static}
}

/* Product grid */
/* auto-fill instead of a fixed 4 columns — on a wide monitor the extra container width now
   fills with more (larger) cards instead of stopping at 4 and leaving the row half-empty-looking
   relative to the page. Tablet/mobile breakpoints below still pin it to 2/1 columns. */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:26px;padding:34px 0 20px}
.shop-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s ease, transform .2s ease}
.shop-card:hover{box-shadow:0 20px 40px rgba(10,46,75,.14);transform:translateY(-4px)}
/* Was aspect-ratio:1/1 with object-fit:contain + padding — that shrank landscape photos down to a
   small centered thumbnail with a big empty margin around it (the "broken/dull" look). Cover fill,
   no padding, and a taller frame makes the photo fill the whole card face like a normal storefront. */
/* v98a.1: show the whole product photo (square frame, white) — product photos often have text near the edges */
.shop-card .media{position:relative;aspect-ratio:1/1;background:#fff;overflow:hidden;border-bottom:1px solid var(--line)}
.shop-card .media img{width:100%;height:100%;object-fit:contain;transition:transform .4s ease,filter .4s ease}
.shop-card:hover .media img{transform:scale(1.08);filter:saturate(1.1) brightness(1.02)}
.shop-card .badge-sale{position:absolute;top:14px;left:14px;background:var(--coral);color:#fff;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:6px 12px;border-radius:999px;box-shadow:0 4px 10px rgba(192,57,43,.35)}
.shop-card .stock-pill{position:absolute;top:14px;right:14px;font-size:11px;font-weight:700;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink-soft)}
.shop-card .stock-pill.low{color:#9a5b00;background:#fff3e0}
.shop-card .stock-pill.out{color:#9e2330;background:#fde0e3}
.quick-add{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(10,46,75,.92),rgba(10,46,75,.78) 70%,rgba(10,46,75,0));color:#fff;border:0;padding:28px 14px 14px;font-weight:700;font-size:13.5px;cursor:pointer;opacity:0;transform:translateY(8px);transition:opacity .18s ease, transform .18s ease;text-align:center}
.shop-card:hover .quick-add{opacity:1;transform:translateY(0)}
.shop-card .body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.shop-card .cat{color:var(--gecko-deep);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px}
.shop-card h3{font-size:16.5px;line-height:1.35;margin-bottom:11px;font-family:'Manrope',sans-serif;font-weight:700;color:var(--ink)}
.shop-card .price-row{margin-top:auto;display:flex;align-items:baseline;gap:9px}
.shop-card .price{font-family:'Fraunces',serif;font-weight:600;font-size:19.5px;color:var(--dusk)}
.shop-card .compare{color:var(--ink-soft);font-size:13.5px;text-decoration:line-through}

/* Cart drawer */
.cart-overlay{position:fixed;inset:0;background:rgba(6,20,32,.5);display:none;z-index:120}
.cart-overlay.open{display:block}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:92vw;background:#fff;z-index:121;transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(0,0,0,.2)}
.cart-drawer.open{transform:translateX(0)}
.cart-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}
.cart-drawer-head h3{font-size:19px}
.cart-drawer-head button{background:none;border:0;font-size:24px;cursor:pointer;color:var(--ink-soft)}
.cart-drawer-body{flex:1;overflow-y:auto;padding:18px 22px}
.cart-line{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.cart-line img{width:64px;height:64px;object-fit:contain;background:var(--sky);border-radius:8px;padding:4px;flex:none}
.cart-line .info{flex:1;min-width:0}
.cart-line h4{font-size:13.5px;font-weight:700;margin-bottom:4px;line-height:1.35}
.cart-line .unit-price{color:var(--ink-soft);font-size:12px}
.qty-stepper{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:8px;width:fit-content}
.qty-stepper button{width:26px;height:26px;background:#fff;border:0;cursor:pointer;font-size:14px;color:var(--dusk)}
.qty-stepper span{width:28px;text-align:center;font-size:13px;font-weight:700}
.cart-line .remove{color:var(--ink-soft);font-size:12px;text-decoration:underline;cursor:pointer;background:none;border:0;padding:0;margin-top:6px}
.cart-line .line-total{font-weight:700;font-size:13.5px;color:var(--dusk);white-space:nowrap}
.cart-empty{text-align:center;padding:60px 20px;color:var(--ink-soft)}
.cart-drawer-foot{padding:20px 22px;border-top:1px solid var(--line)}
.cart-subtotal-row{display:flex;justify-content:space-between;font-size:15px;font-weight:700;margin-bottom:14px}
.cart-drawer-foot .btn{width:100%}

/* Checkout page */
.checkout-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}
.checkout-summary{background:var(--sky);border-radius:16px;padding:28px;position:sticky;top:100px}
.checkout-line{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.checkout-line .name{color:var(--ink)}
.checkout-line .qty{color:var(--ink-soft)}
.totals-row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;color:var(--ink-soft)}
.totals-row.grand{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-size:18px;font-weight:700;color:var(--dusk)}
.totals-row .neg{color:var(--gecko-deep)}
.promo-row{display:flex;gap:8px;margin:16px 0}
.promo-row input{flex:1}


/* ---------- Responsive ---------- */
@media(max-width:980px){
  .service-cards{grid-template-columns:1fr 1fr}
  .stat-cards{grid-template-columns:1fr 1fr}
  .service-teaser{grid-template-columns:1fr}
  .leadership-grid{grid-template-columns:1fr 1fr}
  .cta-banner{padding:50px 30px}
  .product-grid,.project-grid,.shop-grid{grid-template-columns:1fr 1fr}
  .about-grid,.calc-grid,.contact-grid{grid-template-columns:1fr}
  .about-media{height:320px}
  .pricing-cards{grid-template-columns:1fr}
  .price-card.featured{transform:none}
  .tier-tabs{grid-template-columns:repeat(3,1fr)}
  .sizer-panel{grid-template-columns:1fr}
  .payment-grid{grid-template-columns:1fr 1fr}
  .qr-payment{grid-template-columns:1fr}
  .qr-frame{margin:auto}
  .nav-links{display:none}
  .mobile-menu{display:block}
  .nav-links.open{display:flex;position:absolute;left:0;right:0;top:100%;background:var(--dusk);padding:18px 6%;flex-direction:column;align-items:flex-start;gap:16px;max-height:calc(100vh - 70px);overflow-y:auto}
}
@media(max-width:640px){
  .stats .container{grid-template-columns:1fr 1fr}
  .stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
  .service-cards,.product-grid,.project-grid,.payment-grid,.payment-methods,.checkout-fields,.footer-grid,.step-cards{grid-template-columns:1fr}
  .stat-cards,.leadership-grid{grid-template-columns:1fr}
  .teaser-card.with-media{flex-direction:column}
  .teaser-card.with-media img{width:100%;height:160px}
  .testimonial-card{flex:0 0 82%}
  .hero-stats-row{gap:20px}
  .cta-banner .actions{flex-direction:column;align-items:flex-start}
  section{padding:70px 0}
  .shop-grid{grid-template-columns:1fr 1fr}
  .cart-drawer{width:100%}
  .tier-tabs{grid-template-columns:1fr 1fr}
}


/* Bigger logo + 12-item menu no longer fit on one line below ~1240px, so the hamburger menu takes
   over from there (was 980px). */
@media(max-width:1280px){
  .nav-links{display:none}
  .mobile-menu{display:block}
  .nav-links.open{display:flex;position:absolute;left:0;right:0;top:100%;background:var(--dusk);padding:18px 6%;flex-direction:column;align-items:flex-start;gap:16px;max-height:calc(100vh - 70px);overflow-y:auto}
  .logo{width:190px}
}
@media(max-width:640px){.logo{width:150px}}

/* Phones: compact header, and it slides out of the way while scrolling down (comes back as soon as
   you scroll up), so it never covers the page content. */
@media(max-width:760px), (max-height:500px) and (pointer:coarse){
  .site-header{transition:transform .25s ease}
  .site-header.header-hidden{transform:translateY(-100%)}
  .nav{padding:6px 0;gap:12px}
  .logo{width:120px}
  .topbar{font-size:11.5px;padding:6px 4%}
}

/* v76: account + cart always in the header on phones and tablets (same options as on a PC) */
.nav-quick{display:none;align-items:center;gap:10px;margin-left:auto}
.nav-quick a,.nav-quick button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;position:relative;cursor:pointer}
.nav-quick svg{width:21px;height:21px}
.nav-quick .cart-badge{position:absolute;top:-4px;right:-4px}
@media(max-width:1280px){ .nav-quick{display:flex} .mobile-menu{margin-left:6px} }
/* My purchases tabs (My Account) — identical on phone, tablet and PC */
.buy-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px;-webkit-overflow-scrolling:touch}
.buy-tabs button{flex:none;border:1px solid var(--line);background:#fff;border-radius:20px;padding:8px 14px;font-weight:700;font-size:13.5px;cursor:pointer;white-space:nowrap}
.buy-tabs button.on{background:var(--ink,#0a2e4b);color:#fff;border-color:transparent}
.buy-tabs button b{display:inline-block;min-width:18px;margin-left:4px;padding:0 5px;border-radius:9px;background:#f2b705;color:#0a2e4b;font-size:11.5px}
.cart-line{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.cart-line img{width:56px;height:56px;object-fit:cover;border-radius:8px;background:#f1f5f9}
@media(min-width:1281px){ .nav-extra{display:none!important} }

/* ===== v92: language switch, website chat, serial numbers in Track Order ===== */
.v92-lang{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:700;white-space:nowrap}
.v92-lang button{background:none;border:0;padding:4px 5px;color:inherit;opacity:.65;cursor:pointer;font:inherit;border-radius:6px}
.v92-lang button.on{opacity:1;color:var(--sun);text-decoration:underline;text-underline-offset:3px}
.v92-lang button:hover{opacity:1}
.v92-lang span{opacity:.4}
.v92-lang select{margin-left:4px;padding:2px 2px;border:1px solid rgba(127,127,127,.35);border-radius:6px;background:transparent;color:inherit;font-size:13px;max-width:52px;cursor:pointer}
.v92-lang select option,.v92-lang select optgroup{color:#12232F}
.v92-lang-float{position:fixed;left:14px;bottom:18px;z-index:95;background:rgba(255,255,255,.96);color:var(--ink);padding:5px 9px;border-radius:999px;box-shadow:0 8px 22px rgba(0,0,0,.2);border:1px solid var(--line)}
.v92-lang-float button.on{color:#b3700a}
@media (max-width:640px){.v92-lang-float{left:10px;bottom:14px;padding:3px 7px}}
#v92Chat{position:fixed;right:18px;bottom:18px;z-index:110;font-size:14px}
.v92-chat-fab{display:flex;align-items:center;gap:8px;background:var(--sun);color:var(--dusk);border:0;border-radius:999px;padding:12px 18px;font-weight:800;box-shadow:0 12px 30px rgba(0,0,0,.25);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.v92-chat-fab:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.3)}
.v92-chat-fab svg{width:20px;height:20px}
.v92-chat-badge{background:#d62d2d;color:#fff;border-radius:999px;font-size:11px;min-width:18px;height:18px;display:inline-grid;place-items:center;padding:0 5px}
.v92-chat-box{display:none;position:absolute;right:0;bottom:0;width:360px;max-width:calc(100vw - 24px);height:520px;max-height:calc(100vh - 40px);background:#fff;color:var(--ink);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:hidden;flex-direction:column}
#v92Chat.open .v92-chat-box{display:flex}
#v92Chat.open .v92-chat-fab{display:none}
.v92-chat-head{background:var(--dusk);color:#fff;padding:12px 14px;display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.v92-chat-head small{display:block;opacity:.8;font-size:11.5px;line-height:1.35;margin-top:2px}
.v92-chat-head button{background:none;border:0;color:#fff;font-size:24px;line-height:1;cursor:pointer;padding:0 4px}
.v92-chat-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:12px;overflow:auto}
.v92-chat-body input,.v92-chat-body textarea{width:100%;border:1px solid #cfd8e2;border-radius:10px;padding:9px 10px;font:inherit;box-sizing:border-box}
.v92-chat-hi{margin:0;color:var(--ink-soft)}
.v92-chat-note{font-size:11.5px;color:var(--ink-soft);margin:0}
.v92-chat-err{color:#b3261e;font-size:13px;margin:0}
.v92-chat-msgs{flex:1;overflow:auto;display:flex;flex-direction:column;gap:8px;min-height:120px}
.v92-m{max-width:82%;padding:8px 11px;border-radius:14px;line-height:1.4;word-wrap:break-word}
.v92-m small{display:block;font-size:11px;font-weight:700;opacity:.7}
.v92-m time{display:block;font-size:10.5px;opacity:.55;margin-top:2px;text-align:right}
.v92-m-customer{align-self:flex-end;background:var(--sun-soft);border-bottom-right-radius:4px}
.v92-m-staff{align-self:flex-start;background:#eef2f6;border-bottom-left-radius:4px}
.v92-m-system{align-self:center;background:none;color:var(--ink-soft);font-size:12px;text-align:center}
.v92-chat-send{display:flex;gap:6px;align-items:flex-end}
.v92-chat-send textarea{resize:none}
.v92-chat-send .btn{padding:9px 14px}
.v92-chat-new{background:none;border:0;color:var(--ink-soft);font-size:12px;text-decoration:underline;cursor:pointer;align-self:center}
.v92-serials{margin:18px auto 4px;max-width:520px;text-align:left;border:1px solid var(--line,#e3e6ea);border-radius:12px;padding:14px 16px}
.v92-serials h4{margin:0 0 8px}
.v92-serials table{width:100%;border-collapse:collapse;font-size:13.5px}
.v92-serials th,.v92-serials td{padding:6px 4px;border-bottom:1px solid var(--line,#e3e6ea);text-align:left}
.v92-serials p{font-size:12px;color:var(--ink-soft);margin:8px 0 0}
@media (max-width:640px){
  #v92Chat{right:12px;bottom:12px}
  .v92-chat-fab span{display:none}
  .v92-chat-fab{padding:13px}
  .v92-chat-box{position:fixed;right:8px;left:8px;bottom:8px;width:auto;max-width:none;height:min(560px,calc(100vh - 16px))}
}
@media print{#v92Chat,.v92-lang{display:none!important}}
.v92-chat-closed{margin:6px 10px;padding:8px 10px;border-radius:8px;background:#FFF6E0;color:#6d5200;font-size:12.5px;text-align:center}

/* v97e: a disabled button looks disabled (grey) */
.btn:disabled,.btn[disabled]{background:#c9d1d9!important;color:#6b7785!important;border-color:transparent!important;cursor:not-allowed;box-shadow:none!important;transform:none!important;opacity:1}
/* v97e: outline buttons on white panels were white-on-white (My Account: Edit, Change password …) */
.panel .btn-outline,#content .btn-outline{color:var(--dusk,#0a2e4b);border-color:var(--line,#d6dee6)}
.panel .btn-outline:hover,#content .btn-outline:hover{border-color:var(--dusk,#0a2e4b);background:var(--sky,#eef5fb);color:var(--dusk,#0a2e4b)}
/* v97e: messages appear above the "Chat with us" button */
.toast{z-index:10060;bottom:84px;max-width:min(520px,calc(100vw - 40px))}
.ma-jump{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.ma-jump a{border:1px solid var(--line,#d6dee6);background:#fff;color:var(--dusk,#0a2e4b);border-radius:20px;padding:7px 14px;font-weight:700;font-size:13.5px}
.ma-jump a:hover{border-color:var(--dusk,#0a2e4b);background:var(--sky,#eef5fb)}
#profilePanel,#addressesPanel,#govIdPanel,#maPurchases{scroll-margin-top:90px}
.pay-chips{display:flex!important;flex-wrap:wrap;gap:5px;margin:6px 0 4px}
.pay-chips i{font-style:normal;font-size:12px;font-weight:700;padding:3px 9px;border-radius:12px;background:#eef5fb;color:#0a2e4b;border:1px solid #d6dee6}

/* v97e: 1,281–1,480 px screens (laptops, 125% zoom) keep the full menu, just tighter; if it still does not fit,
   the page switches to the ☰ menu by itself (html.nav-compact) */
@media(min-width:1281px){
  .logo{width:150px}
  .nav{gap:14px}
  .nav-links{gap:10px}
  .nav-links a,.nav-links .dropdown-toggle{font-size:13px}
  .nav-links .btn{padding:7px 12px!important;font-size:12.5px!important}
  .account-nav{gap:8px!important}
}

/* v97f: big screens — a little more room inside the shared 1,320 px frame; the menu ends at the frame's right edge */
@media(min-width:1481px){
  .logo{width:165px}
  .nav-links{gap:12px}
  .nav-links a,.nav-links .dropdown-toggle{font-size:13.5px}
}
@media(min-width:1281px){ .site-header .nav-links{margin:0 0 0 auto} }

/* v97g: homepage section titles centred (full-width sections), single product centred, FAQ uses the full frame */
#projects .section-head,#products .section-head,#services .section-head{max-width:none!important;margin-left:auto;margin-right:auto;text-align:center;flex-direction:column!important;align-items:center!important;justify-content:center!important}
#projects .section-head p,#products .section-head p,#services .section-head p{margin-left:auto;margin-right:auto}
#projects .filters{justify-content:center}
#productGrid{display:flex!important;flex-wrap:wrap;justify-content:center}
#productGrid>*{flex:1 1 260px;max-width:320px;min-width:0}
@media(max-width:640px){#productGrid>*{flex:1 1 calc(50% - 13px);max-width:calc(50% - 13px)}}
@media(max-width:400px){#productGrid>*{flex-basis:100%;max-width:100%}}
#faq .faq-list{max-width:none}
@media(min-width:981px){#faq .faq-list{grid-template-columns:1fr 1fr;align-items:start}}
#productGrid>p.note{flex:1 1 100%;max-width:none;text-align:center}
/* v97h: anchor jumps land below the sticky header (height measured by supabase-client.js) */
html{scroll-padding-top:var(--hdr-h,170px)}
/* v97l.7: client stories share the full width — 3 per row on PC, 2 on tablet, 1 (with a peek) on phone */
.testimonial-card{flex:0 0 calc((100% - 40px) / 3);min-width:0}
@media (max-width:980px){ .testimonial-card{flex-basis:calc((100% - 20px) / 2)} }
@media (max-width:640px){ .testimonial-card{flex-basis:88%} }
.testimonial-card blockquote{font-size:15px}
.testimonial-card .person span.avatar{display:flex;color:var(--dusk);font-size:16px}
/* v99c: sign-in — remember me, fingerprint / face, saved-password help */
.v99-remember{display:flex;gap:8px;align-items:center;font-size:14px;margin:2px 0 12px;cursor:pointer}
.v99-remember input{width:auto;margin:0}
.v99-pk{width:100%;margin-top:10px}
.v99-pwhelp{margin-top:12px;font-size:12.5px;color:var(--ink-soft)}
.v99-pwhelp summary{cursor:pointer;font-weight:600}
.v99-pwhelp p{margin:6px 0 0;line-height:1.55}
/* v99c.1: big fingerprint button on the phone that enabled it; request timer */
.v99-pk.v99-pk-big{font-size:17px;padding:16px;border-width:2px;border-color:#F5A825;background:#fff8e8;color:#0A2E4B}
#loginTmr .txt{font-size:13px}