/* =====================================================================
   KPST PRO  -  shared UI/UX + motion layer
   Link AFTER each page's own <style>.  Safe on every page:
   - homepage-only blocks are scoped to their own classes
   - inner-page rules are scoped under body.kpx-inner (added by kpst-pro.js)
   ===================================================================== */
:root{
  --kpx-navy:#0c2140;
  --kpx-blue:#17365f;
  --kpx-soft:#edf1f8;
  --kpx-gold:#b8923a;
  --kpx-gold-b:#e6c978;
  --kpx-text:#1f2a3c;
  --kpx-muted:#66738a;
  --kpx-border:#dde3ee;
  --kpx-ease:cubic-bezier(.16,1,.3,1);
  --kpx-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- Base polish ---------- */
html{scroll-padding-top:130px}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:var(--kpx-navy);color:#fff}
:focus-visible{outline:3px solid var(--kpx-gold);outline-offset:3px;border-radius:6px}
img{max-width:100%}

/* Skip link (keyboard / screen-reader users) */
.kpx-skip{position:fixed;left:16px;top:-64px;z-index:6000;padding:11px 18px;border-radius:0 0 12px 12px;
  background:var(--kpx-navy);color:#fff;font:600 14px/1 Poppins,system-ui,sans-serif;text-decoration:none;transition:top .25s var(--kpx-ease)}
.kpx-skip:focus{top:0}

/* Scroll progress (inner pages; the homepage has its own) */
.kpx-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:6000;pointer-events:none;
  background:linear-gradient(90deg,var(--kpx-blue),var(--kpx-gold-b),var(--kpx-blue));
  box-shadow:0 0 10px rgba(230,201,120,.65)}

/* ---------- Buttons ---------- */
.kp-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:999px;border:1.5px solid transparent;overflow:hidden;cursor:pointer;
  font:600 14px/1 Poppins,system-ui,sans-serif;letter-spacing:.3px;text-decoration:none;white-space:nowrap;
  transition:transform .35s var(--kpx-ease),box-shadow .35s ease,background .3s ease,color .3s ease,border-color .3s ease}
.kp-btn i{transition:transform .35s var(--kpx-ease)}
.kp-btn:hover i.fa-arrow-right{transform:translateX(5px)}
.kp-btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;pointer-events:none;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg)}
.kp-btn:hover::after{animation:kpxShine .8s ease}
@keyframes kpxShine{to{left:140%}}
.kp-btn:hover{transform:translateY(-3px)}
.kp-btn:active{transform:translateY(0) scale(.97)}
.kp-btn--gold{background:linear-gradient(135deg,var(--kpx-gold-b),var(--kpx-gold));color:var(--kpx-navy);box-shadow:0 12px 30px rgba(184,146,58,.42)}
.kp-btn--gold:hover{box-shadow:0 16px 38px rgba(184,146,58,.55)}
.kp-btn--ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.kp-btn--ghost:hover{background:#fff;color:var(--kpx-navy);border-color:#fff}

/* ---------- Homepage: hero CTAs ---------- */
.hero-cta{position:absolute;left:50%;bottom:112px;transform:translateX(-50%);z-index:7;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;width:min(94%,760px);
  opacity:0;animation:kpxRise .9s var(--kpx-ease) 1.2s forwards}
@keyframes kpxRise{from{opacity:0;transform:translate(-50%,28px)}to{opacity:1;transform:translate(-50%,0)}}

/* Scroll cue */
.scroll-cue{position:absolute;left:50%;bottom:62px;z-index:7;width:24px;height:38px;border:2px solid rgba(255,255,255,.55);
  border-radius:14px;transform:translateX(-50%);opacity:.85}
.scroll-cue::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:3px;
  background:var(--kpx-gold-b);animation:kpxWheel 1.8s ease-in-out infinite}
@keyframes kpxWheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(13px)}}

/* ---------- Homepage: quick services strip ---------- */
.quick-services{position:relative;z-index:12;width:min(1380px,calc(100% - 40px));margin:-58px auto 0}
.qs-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.qs-tile{position:relative;display:flex;align-items:center;gap:13px;padding:16px 16px;overflow:hidden;
  background:#fff;border:1px solid var(--kpx-border);border-radius:16px;color:var(--kpx-text);text-decoration:none;
  box-shadow:0 12px 32px rgba(12,33,64,.13);
  transition:transform .4s var(--kpx-ease),box-shadow .4s ease,border-color .3s ease}
.qs-tile::before{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--kpx-blue),var(--kpx-gold));transition:transform .45s var(--kpx-ease)}
.qs-tile:hover{transform:translateY(-8px);box-shadow:0 22px 50px rgba(12,33,64,.22);border-color:rgba(184,146,58,.55)}
.qs-tile:hover::before{transform:scaleX(1)}
.qs-ico{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;font-size:18px;color:#fff;
  background:linear-gradient(135deg,var(--kpx-blue),var(--kpx-navy));transition:transform .45s var(--kpx-spring),background .3s}
.qs-tile:hover .qs-ico{transform:rotate(-8deg) scale(1.12);background:linear-gradient(135deg,var(--kpx-gold),#8e6c1f)}
.qs-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.qs-txt strong{font-size:14px;font-weight:600;color:var(--kpx-navy)}
.qs-txt small{margin-top:2px;font-size:11.5px;color:var(--kpx-muted)}
.qs-go{margin-left:auto;font-size:12px;color:var(--kpx-gold);opacity:0;transform:translateX(-8px);transition:.35s var(--kpx-ease)}
.qs-tile:hover .qs-go{opacity:1;transform:none}
.quick-services + .three-column-layout{margin-top:44px}

@media (max-width:1180px){.qs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){
  .hero-cta{bottom:92px;gap:10px}
  .hero-cta .kp-btn--ghost:last-child{display:none}
  .kp-btn{padding:12px 18px;font-size:13px}
  .scroll-cue{display:none}
  .quick-services{width:calc(100% - 28px);margin-top:-40px}
  .qs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .qs-tile{padding:13px 12px;gap:10px}
  .qs-ico{width:38px;height:38px;font-size:15px;border-radius:11px}
  .qs-txt strong{font-size:13px}
  .qs-txt small,.qs-go{display:none}
}

/* ---------- Homepage extras ---------- */
/* Keyboard users get the dropdowns too */
.menu-items li:focus-within>.submenu{opacity:1;visibility:visible;transform:none}
.menu-items li:focus-within>.submenu li{opacity:1;transform:none}
/* Pause the news ticker while someone is reading it */
.news-marquee:hover,.news-marquee:focus-within{animation-play-state:paused}
/* Gold hairline on cards for a more "official" finish */
.column-card{position:relative}
.column-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--kpx-gold),transparent);opacity:.0;transition:opacity .4s}
.column-card:hover::before{opacity:1}

/* ---------- Scroll reveal (inner pages & new homepage blocks) ---------- */
.kpx-rv{opacity:0;transform:translateY(34px);
  transition:opacity .75s ease,transform .9s var(--kpx-ease);transition-delay:var(--kd,0s)}
.kpx-rv.kpx-l{transform:translateX(-60px)}
.kpx-rv.kpx-r{transform:translateX(60px)}
.kpx-rv.kpx-z{transform:scale(.92) translateY(20px)}
.kpx-rv.kpx-in{opacity:1;transform:none}

/* ---------- Inner pages (scoped) ---------- */
body.kpx-inner{animation:kpxFade .55s ease both}
@keyframes kpxFade{from{opacity:0}to{opacity:1}}

body.kpx-inner input:not([type=checkbox]):not([type=radio]),
body.kpx-inner select,
body.kpx-inner textarea{transition:border-color .25s ease,box-shadow .25s ease,background .25s ease}
body.kpx-inner input:not([type=checkbox]):not([type=radio]):focus,
body.kpx-inner select:focus,
body.kpx-inner textarea:focus{outline:none;border-color:var(--kpx-gold)!important;box-shadow:0 0 0 4px rgba(184,146,58,.2)!important}

body.kpx-inner button,
body.kpx-inner .btn,
body.kpx-inner input[type=submit],
body.kpx-inner input[type=button]{transition:transform .3s var(--kpx-ease),box-shadow .3s ease,background .3s ease,color .3s ease,filter .3s}
body.kpx-inner button:not(:disabled):active,
body.kpx-inner .btn:active,
body.kpx-inner input[type=submit]:active{transform:scale(.97)}

body.kpx-inner tbody tr{transition:background-color .2s ease}
body.kpx-inner tbody tr:hover{background-color:rgba(23,54,95,.055)}
body.kpx-inner table{border-radius:12px}
body.kpx-inner a{transition:color .2s ease}

/* Cursor-lit images feel alive without changing layout */
body.kpx-inner [class*="card"] img,body.kpx-inner .gallery img{transition:transform .6s var(--kpx-ease)}
body.kpx-inner [class*="card"]:hover img,body.kpx-inner .gallery *:hover>img{transform:scale(1.045)}

/* Back-to-top for inner pages */
.kpx-top{position:fixed;right:20px;bottom:20px;z-index:900;width:46px;height:46px;border:0;border-radius:14px;cursor:pointer;
  display:grid;place-items:center;color:#fff;font-size:16px;background:linear-gradient(135deg,var(--kpx-blue),var(--kpx-navy));
  box-shadow:0 12px 30px rgba(12,33,64,.3);opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .35s,transform .35s var(--kpx-ease),visibility .35s,background .3s}
.kpx-top.on{opacity:1;visibility:visible;transform:none}
.kpx-top:hover{background:linear-gradient(135deg,var(--kpx-gold),#8e6c1f);transform:translateY(-4px)}

/* ---------- Print: hide chrome ---------- */
@media print{
  .kpx-progress,.kpx-top,.kpx-skip,.hero-cta,.scroll-cue{display:none!important}
  .kpx-rv{opacity:1!important;transform:none!important}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .kpx-rv{opacity:1!important;transform:none!important;transition:none!important}
  .hero-cta{opacity:1;animation:none;transform:translateX(-50%)}
  .scroll-cue::after,.kp-btn::after{animation:none!important}
  body.kpx-inner{animation:none}
}