/* ==========================================================================
   v2 design layer — loaded LAST, restyles the existing component classes.
   Palette comes from :root (--brand/--gray/--cyan rewritten by brand_css()).
   Nothing here changes markup, so every page keeps working.
   ========================================================================== */

/* ---------- utility bar (new markup in header) ---------- */
.v2-util{background:#374151;color:#D1D5DB;font-size:13px}
.v2-util .wrap{display:flex;align-items:center;gap:18px;min-height:38px;flex-wrap:wrap}
.v2-util a{display:inline-flex;align-items:center;gap:6px;color:#D1D5DB;text-decoration:none}
.v2-util a:hover{color:#fff}
.v2-util .v2-ur{margin-left:auto;display:flex;align-items:center;gap:16px}
.v2-util .v2-flag{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:2px 10px}
.v2-util .ic{width:14px;height:14px}
@media (max-width:900px){ .v2-util .v2-hide{display:none} .v2-util .wrap{min-height:34px;font-size:12px;gap:12px} }

/* ---------- header: white, sticky, hairline ---------- */
.site-header{background:#fff;border-bottom:1px solid #E5E7EB;box-shadow:none}
.site-header .head-row{min-height:74px}
.brand-text strong{font-size:17px;letter-spacing:-.02em;color:#374151}
.brand-text small{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:#6B7280;font-weight:600}
.brand-mark{background:linear-gradient(135deg,#1E3A8A,#16296B);border-radius:11px;color:#fff;font-weight:800;
  position:relative;overflow:visible}
.brand-mark::after{content:"";position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border-radius:5px;background:#06B6D4}
.head-nav>a{color:#4B5563;font-weight:500;border-radius:9px;padding:9px 12px}
.head-nav>a:hover,.head-nav>a.is-active{background:#F4F6F9;color:#1E3A8A}
.head-search input{border-radius:10px;border:1px solid #E5E7EB;background:#F6F7F9}
.head-search input:focus{border-color:#1E3A8A;background:#fff}
.cart-btn{border-radius:10px;border:1px solid #E5E7EB;color:#374151}
.cur-switch select{border-radius:9px;border:1px solid #E5E7EB;color:#4B5563}

/* ---------- buttons ---------- */
.btn{border-radius:10px;font-weight:600;letter-spacing:-.01em;border:1px solid transparent;
  background:#1E3A8A;color:#fff;padding:11px 20px}
.btn:hover{background:#16296B}
.btn.ghost{background:#fff;color:#374151;border-color:#E5E7EB}
.btn.ghost:hover{border-color:#1E3A8A;color:#1E3A8A;background:#F6F7F9}
.btn.lg{padding:14px 26px;font-size:15.5px}
.btn.on-dark{background:#fff;color:#1E3A8A}

/* ---------- section furniture ---------- */
.blk{padding:72px 0}
.blk-head h2,.center-head h2{font-size:clamp(22px,3vw,33px);font-weight:800;text-transform:uppercase;
  letter-spacing:-.01em;color:#374151}
.blk-head p,.center-head p{color:#6B7280}
.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.2em;color:#06B6D4}
.chip{border-radius:999px;border:1px solid #E5E7EB;background:#fff;color:#4B5563;font-weight:500}
.chip:hover{border-color:#1E3A8A;color:#1E3A8A}
.chip.on{background:#1E3A8A;border-color:#1E3A8A;color:#fff}
.pill{border-radius:999px;background:#E8EDF8;color:#1E3A8A;font-weight:600}
.link{color:#1E3A8A;font-weight:600}

/* ---------- cards: radius, hairline, lift, accent ---------- */
.card,.blk .card,.pcard,.mini-p,.bc-card{background:#fff;border:1px solid #E5E7EB;border-radius:14px;
  box-shadow:none;transition:transform .18s,box-shadow .18s,border-color .18s;position:relative;overflow:hidden}
.card:hover,.pcard:hover,.mini-p:hover{transform:translateY(-4px);border-color:#D5DAE3;
  box-shadow:0 1px 3px rgba(55,65,81,.06),0 14px 30px -16px rgba(55,65,81,.22)}
.card::after,.pcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:#1E3A8A}
.card:nth-child(even)::after,.pcard:nth-child(even)::after{background:#06B6D4}
.card-ic{border-radius:10px;background:#E8EDF8;color:#1E3A8A}
.card h3,.card h4,.pcard h3{color:#374151;font-weight:700}
.card p,.mini-p p{color:#6B7280}

/* ---------- hero: split blue / amber ---------- */
.hero{padding:0;background:#1E3A8A;color:#fff;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:0;right:0;width:34%;height:100%;background:#06B6D4;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.10) 0 14px,transparent 14px 28px)}
.hero .wrap{position:relative;z-index:1;padding-top:64px;padding-bottom:64px;max-width:760px}
.hero h1{color:#fff;font-size:clamp(29px,4vw,45px);font-weight:800;letter-spacing:-.025em;max-width:17em}
.hero .lead{color:#E9EEF8;font-size:16.5px}
.hero .pill{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3)}
.hero .cta-row .btn{background:#fff;color:#1E3A8A}
.hero .cta-row .btn:hover{background:#E8EDF8}
.hero .cta-row .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.hero .cta-row .btn.ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.hero .cta-small{color:#E5E7EB}
@media (max-width:900px){ .hero::before{display:none} .hero .wrap{padding-top:44px;padding-bottom:44px} }

/* ---------- stat / trust strip ---------- */
.stats,.stat-row{border-radius:14px;background:#F4F6F9;border:1px solid #E5E7EB}
.stats b,.stat-row b{color:#1E3A8A;font-weight:800}
.stat-row span,.stats span{color:#6B7280}

/* ---------- blue band (client stories / CTA) ---------- */
.cta-band{background:#1E3A8A;color:#fff;border-radius:14px}
.cta-band h2,.cta-band h3{color:#fff;text-transform:uppercase;font-weight:800}
.cta-band p{color:#E8EDF8}
.cta-band .btn{background:#fff;color:#1E3A8A}
.cta-band .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}

/* ---------- forms ---------- */
.fld input,.fld select,.fld textarea,input[type=text],input[type=email],input[type=search],
input[type=number],input[type=password],select,textarea{
  border:1px solid #E5E7EB;border-radius:10px;background:#fff;color:#374151}
.fld input:focus,.fld select:focus,.fld textarea:focus,input:focus,select:focus,textarea:focus{
  border-color:#1E3A8A;box-shadow:0 0 0 3px rgba(30,58,138,.14);outline:none}
.fld label{color:#374151;font-weight:600}

/* ---------- tables / lists ---------- */
table th{color:#374151;background:#F4F6F9;font-weight:700}
table td,table th{border-color:#E5E7EB}
table tr:hover td{background:#F8F9FB}

/* ---------- footer: dark navy ---------- */
.site-footer{background:#1F2937;color:#9CA3AF;border-top:0}
.site-footer h3,.site-footer h4,.site-footer strong{color:#fff}
.site-footer .eyebrow{color:#06B6D4;font-weight:800}
.site-footer a{color:#D1D5DB}
.site-footer a:hover{color:#fff}

/* ---------- promo / flash ---------- */
.promo{background:#374151;color:#fff}
.promo a{color:#67E8F9}
.flash{background:#1E3A8A;color:#fff}

/* ---------- app-mode (mobile) keeps its own layer, palette only ---------- */
@media (max-width:900px){
  .app-tabbar{background:#fff;border-top:1px solid #E5E7EB}
  .app-tabbar a.is-active{color:#1E3A8A}
}

/* ---------- footer fixes ---------- */
/* the header's tagline is clipped at 190px on purpose; in the footer it just
   looked broken, so let it wrap in full */
.site-footer .brand-text small{max-width:none;overflow:visible;text-overflow:clip;
  white-space:normal;color:rgba(255,255,255,.6);letter-spacing:.14em}
.site-footer .brand-text{max-width:34ch}
/* the floating chat button was covering the legal line at the bottom right */
.site-footer .foot-bar{padding-right:96px}
@media (max-width:900px){ .site-footer .foot-bar{padding-right:0;padding-bottom:78px} }
.site-footer .foot-bar .muted{color:rgba(255,255,255,.55)}

/* ---------- mobile: the fixed app bar is the header there ----------
   The utility bar sits in normal flow, so the fixed app bar was overlapping
   its first row by ~17px and doubling the top chrome on a small screen.
   Everything it offers (currency, account) is already in the drawer. */
@media (max-width:900px){
  .v2-util{ display:none; }
  /* app-mode.css compensates for a 58px bar (body padding-top). The desktop
     min-height was winning here and making the bar 75px, so the first element
     slid 17px under it. Restore the compact bar on mobile. */
  /* pin the bar so it is exactly the 58px (2px accent + 56px row) that
     app-mode.css compensates for with body padding-top */
  .site-header .head-row{ min-height:56px; height:56px; padding-block:0; align-items:center; }
  .site-header .brand-mark{ width:34px; height:34px; border-radius:10px; font-size:.82rem; }
  .site-header .brand-mark::after{ width:11px; height:11px; border-radius:4px; right:-2px; bottom:-2px; }
}

/* ==========================================================================
   DRAWER ROW OVERRIDES — cascade guard.
   v2-theme.css loads last and its `.head-nav>a.is-active{background:#F4F6F9}`
   matches the drawer rows (they carry BOTH is-active and is-current). The
   body.nav-open prefix carries enough specificity to win on its own — no
   !important needed.
   ========================================================================== */
@media (max-width:900px){

  body.nav-open .head-nav > a,
  body.nav-open .head-nav > a.is-active,
  body.nav-open .head-nav > a:hover{
    justify-content:flex-start;
    gap:.75rem;
    min-height:56px;
    padding:0 .75rem 0 .6rem;
    border-radius:15px;
    background:transparent;
    color:#374151;
    font-size:.97rem;
    font-weight:650;
  }

  /* the current page: solid brand pill, white label, cyan edge bar */
  body.nav-open .head-nav > a.is-current,
  body.nav-open .head-nav > a.is-current.is-active,
  body.nav-open .head-nav > a.is-current:hover{
    background:#1E3A8A;
    color:#fff;
    font-weight:700;
    box-shadow:0 18px 34px -20px rgba(30,58,138,.85);
  }
  body.nav-open .head-nav > a.is-current .ndl > .ic{
    background:rgba(255,255,255,.18);
    color:#fff;
  }
}

/* ==========================================================================
   DESKTOP HEADER FINISHING
   The header row sits inside ~100px of side padding, so at 1440 it only had
   1240px to hold the brand, search, seven nav links and five action controls —
   the trailing CTA was clipped. Reclaim the gutters on desktop instead of
   squeezing the type, which collided the nav labels.
   ========================================================================== */
@media (min-width:1101px){
  .site-header{ padding-left:0; padding-right:0; }
  .site-header .wrap,
  .site-header .head-in{ padding-left:34px; padding-right:34px; max-width:none; }
  .site-header .head-row{ gap:14px; }
  .site-header .head-nav{ flex-wrap:nowrap; min-width:0; }
  .site-header .head-nav > a{ padding-left:9px; padding-right:9px; white-space:nowrap; }
  .site-header .head-actions{ margin-left:auto; flex:0 0 auto; gap:8px; }
  .site-header .head-search{ flex:0 1 auto; min-width:0; }
}
@media (min-width:1101px) and (max-width:1599px){
  .site-header .head-brand small,
  .site-header .head-brand .tag,
  .site-header .brand small,
  .site-header .brand .tagline{ display:none; }
}