/* ============================================================
   PaMarket — Shared Design System  (single source of truth)
   Brand: navy + gold + warm neutrals.
   Token values are the ACTUAL shipped values used across the
   site (do not diverge — pages inherit these).
   ------------------------------------------------------------
   Consolidation note (2026-07): header, footer, top-bar, search
   and button styles were previously duplicated inline in every
   page's <style> block and had drifted. They now live here so
   there is one source. Page-specific styles stay in each page.
   ============================================================ */

:root{
  /* Brand */
  --navy:#003820; --navy-deep:#002111; --navy-mid:#0f5132;
  --gold:#904d00; --gold-dark:#663500;
  /* Ink & neutrals */
  --ink:#151A2E; --sub:#5B6478; --mute:#646A78;
  --line:#E6DFD1; --paper:#F7F4EE; --white:#FFFFFF;
  /* Semantic */
  --green:#1F7A4D; --red:#DC2626;
  /* Tints (kept for shared components) */
  --navy-tint:#EEF2FF; --gold-tint:#FBF4E6;
}

/* ── Reset & base ─────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Hanken Grotesk',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:#fff;font-size:15px;line-height:1.6}
h1,h2,.hero h1,.cat-hero h1,.j-hero h1,.p-hero h1,.pa-hero h1,.sec-h,.sec-title,.logo,.auth-brand{font-family:'Manrope',system-ui,sans-serif;font-weight:700;letter-spacing:-.02em}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
/* Broken/undecodable listing photo (see js/marketplace-data.js image fallback) —
   show a plain neutral tile instead of the browser's broken-image glyph. */
img.img-broken{font-size:0;color:transparent;min-height:60px;background:var(--paper,#F7F4EE);object-fit:contain}
button{font-family:inherit;cursor:pointer}
.hidden{display:none!important}
/* .hidden above is !important, which beats Tailwind's non-important
   responsive reveals (hidden lg:block etc.) and silently hid the header
   search, ribbon links and button labels on every page loading this
   file. Re-assert the reveals at equal strength, after .hidden. */
@media(min-width:640px){.sm\:block{display:block!important}.sm\:flex{display:flex!important}.sm\:inline{display:inline!important}.sm\:inline-flex{display:inline-flex!important}}
@media(min-width:768px){.md\:flex{display:flex!important}.md\:inline{display:inline!important}}
@media(min-width:1024px){.lg\:block{display:block!important}.lg\:flex{display:flex!important}.lg\:grid{display:grid!important}}
@media(min-width:1280px){.xl\:flex{display:flex!important}}
/* Shared page container */
.w{max-width:1200px;margin:0 auto;padding:0 32px}

/* Small-screen containment: nothing forces horizontal scroll at the edges.
   Long unbreakable strings (emails, URLs) wrap instead of widening layout. */
@media(max-width:400px){
  h1,h2,h3{overflow-wrap:break-word}
  a[href^="mailto:"],a[href^="tel:"]{overflow-wrap:anywhere}
}

/* ── Top bar ──────────────────────────────────────────────── */
.top-bar{background:var(--navy-deep);padding:8px 0;font-size:12.5px;color:#94B4E8}
.top-bar-w{max-width:1200px;margin:0 auto;padding:0 32px;display:flex;justify-content:space-between;align-items:center}
.top-bar a{color:#94B4E8;transition:color .15s}.top-bar a:hover{color:#fff}
.top-bar-links{display:flex;gap:24px}
.zw-flag-row{display:inline-flex;align-items:center;gap:7px}
.zw-flag{border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.2);flex-shrink:0;display:block;object-fit:cover}

/* Public, dismissible site announcement */
.site-announcement{background:linear-gradient(90deg,var(--navy-deep),var(--navy));color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.site-announcement[hidden]{display:none}
.site-announcement-w{max-width:1200px;margin:0 auto;padding:10px 32px;display:flex;align-items:center;justify-content:center;gap:12px;position:relative;min-height:42px}
.site-announcement-message{font-size:13px;line-height:1.45;font-weight:600;text-align:center}
.site-announcement-link{color:var(--gold);font-size:13px;font-weight:800;white-space:nowrap}
.site-announcement-link:hover{color:#fff;text-decoration:underline}
.site-announcement-close{position:absolute;right:24px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:21px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.site-announcement-close:hover{background:rgba(255,255,255,.2)}
@media(max-width:700px){.site-announcement-w{padding:10px 48px 10px 18px;justify-content:flex-start;flex-wrap:wrap;gap:5px 9px}.site-announcement-message{text-align:left;font-size:12px}.site-announcement-link{font-size:12px}.site-announcement-close{right:10px}}

/* ── Header ───────────────────────────────────────────────── */
#hdr{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:300;box-shadow:0 1px 12px rgba(15,36,96,.07)}
.hdr-w{max-width:1200px;margin:0 auto;padding:0 32px;height:66px;display:flex;align-items:center;gap:18px}
.logo{font-size:23px;font-weight:700;color:var(--navy);flex-shrink:0;letter-spacing:-.02em;cursor:pointer;transition:opacity .15s}
.logo:hover{opacity:.8}
.logo em{color:var(--gold);font-style:normal}

/* Header search (unified across all pages) */
.search-bar{flex:1;min-width:0;max-width:560px;display:flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper);transition:border-color .2s,box-shadow .2s}
.search-bar:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(26,58,143,.1)}
.search-cat{border:none;background:none;border-right:1px solid var(--line);padding:0 12px 0 14px;height:44px;font-size:13px;color:var(--sub);font-family:inherit;outline:none;cursor:pointer}
.search-inp{flex:1;min-width:0;border:none;background:none;padding:0 14px;height:44px;font-size:14px;font-family:inherit;color:var(--ink);outline:none}
.search-inp::placeholder{color:var(--mute)}
.search-btn{background:var(--navy);color:#fff;border:none;height:44px;padding:0 22px;font-weight:700;font-size:13px;display:flex;align-items:center;gap:7px;transition:background .15s;flex-shrink:0}
.search-btn:hover{background:var(--navy-deep)}

/* Utility icons — icon-only so the unified header fits every width */
.hdr-util{display:flex;align-items:center;gap:2px;flex-shrink:0}
.util-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-radius:9px;color:var(--sub);transition:all .15s;font-size:13px;font-weight:600}
.util-btn:hover{background:var(--paper);color:var(--navy)}
.util-lbl{display:none}

.hdr-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}
.btn-sign{border:1.5px solid var(--line);border-radius:9px;padding:8px 16px;font-size:13px;font-weight:600;color:var(--ink);background:#fff;transition:border-color .15s}
.btn-sign:hover{border-color:var(--navy);color:var(--navy)}
.btn-post{background:var(--gold);color:#fff;border:none;border-radius:9px;padding:9px 18px;font-size:13px;font-weight:700;transition:background .15s}
.btn-post:hover{background:var(--gold-dark)}
.ham{display:none;background:none;border:none;color:var(--ink);padding:4px}

/* Mobile nav (slide-down) */
.mob-nav{display:none;flex-direction:column;background:#fff;border-top:1px solid var(--line);padding:12px 28px 20px}
.mob-nav a{padding:12px 0;color:var(--ink);font-weight:500;border-bottom:1px solid var(--line);font-size:14.5px}
.mob-nav a:last-child{border-bottom:none;color:var(--gold);font-weight:700}
.mob-nav.open{display:flex}

/* ── Category nav strip ───────────────────────────────────── */
.cat-nav{background:#fff;border-bottom:1px solid var(--line)}
.cat-nav-w{max-width:1200px;margin:0 auto;padding:0 32px;display:flex;overflow-x:auto;scrollbar-width:none;gap:2px}
.cat-nav-w::-webkit-scrollbar{display:none}
.cnav{flex-shrink:0;padding:10px 16px;font-size:13px;font-weight:500;color:var(--sub);border-bottom:2.5px solid transparent;white-space:nowrap;transition:all .15s}
.cnav:hover,.cnav.on{color:var(--navy);border-bottom-color:var(--navy);font-weight:600}

/* ── Footer ───────────────────────────────────────────────── */
footer{background:var(--navy-deep);color:#6A8AC8}
.foot-main{max-width:1200px;margin:0 auto;padding:56px 32px 40px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.foot-logo{font-size:24px;font-weight:900;color:#fff;letter-spacing:-.02em}
.foot-logo em{color:var(--gold);font-style:normal}
.foot-tagline{font-size:13.5px;color:#6A8AC8;margin-top:12px;max-width:240px;line-height:1.7}
.foot-contact{margin-top:20px;font-size:13px;display:flex;flex-direction:column;gap:8px}
.foot-contact a{color:#6A8AC8;transition:color .15s}
.foot-contact a:hover{color:#fff}
.foot-store{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap;align-items:center}
.foot-store-btn{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:8px 14px;color:#fff;font-size:12px;font-weight:600;transition:background .15s;text-decoration:none}
.foot-store-btn:hover{background:rgba(255,255,255,.14)}
.foot-col h5{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.foot-col a{display:block;font-size:13.5px;color:#6A8AC8;margin-bottom:10px;transition:color .15s}
.foot-col a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding:18px 32px;max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:#4A6490}
.foot-bottom-links{display:flex;gap:20px}
.foot-bottom-links a{color:#4A6490;transition:color .15s}.foot-bottom-links a:hover{color:#fff}
.play-badge{height:54px;display:block;transition:opacity .15s}
.play-badge:hover{opacity:.85}
.play-badge-sm,.appstore-badge-sm{height:40px;width:auto;display:block;transition:opacity .15s}
.play-badge-sm:hover,.appstore-badge-sm:hover{opacity:.85}

/* ── WhatsApp float ───────────────────────────────────────── */
.wa{position:fixed;right:22px;bottom:22px;z-index:99}
.wa-btn{width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(37,211,102,.5);transition:transform .2s}
.wa-btn:hover{transform:scale(1.08)}

/* ── Shared responsive rules (header/footer/nav) ──────────── */
@media(max-width:1024px){
  .foot-main{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:768px){
  .top-bar{display:none}
  .hdr-util{display:none}
  .hdr-right .btn-sign{display:none}
  /* .acct-wrap is injected by js/session.js (replaces .btn-sign when signed
     in) and didn't exist as a selector when this breakpoint was written, so
     it was never hidden here — it stayed visible/clickable on mobile with
     its desktop-oriented right:0 dropdown positioning, which overflows off
     the left edge of narrow viewports. The hamburger menu (#mobNav) is the
     intended mobile nav surface (see js/session.js's own comment on this),
     so hide the desktop account chip/dropdown here to match. */
  .acct-wrap{display:none}
  .search-cat{display:none}
  .ham{display:block}
  .cat-nav{display:none}
  /* Two-row mobile header: logo + actions on top, full-width search below */
  .hdr-w{flex-wrap:wrap;height:auto;padding:10px 14px;gap:10px}
  .logo{order:1}
  .hdr-right{order:2;margin-left:auto}
  .search-bar{order:3;flex-basis:100%;max-width:none}
  .sbtn-lbl{display:none}
  .foot-main{grid-template-columns:1fr;padding:36px 24px}
  .foot-bottom{flex-direction:column;gap:12px;text-align:center;padding:16px 24px}
}

/* ============================================================
   Generic shared components (available site-wide for the
   remaining pages as they migrate onto this system).
   ============================================================ */

/* Breadcrumb / back bar */
.breadcrumb-bar{background:#fff;border-bottom:1px solid var(--line)}
.bc-wrap{max-width:1200px;margin:0 auto;padding:0 32px;height:42px;display:flex;align-items:center;gap:8px;font-size:13px}
.bc-back{display:inline-flex;align-items:center;gap:5px;color:var(--navy);font-weight:600;background:none;border:0;font-family:inherit;font-size:13px;cursor:pointer;padding:0;transition:opacity .15s;flex-shrink:0}
.bc-back:hover{opacity:.7}
.bc-div{width:1px;height:16px;background:var(--line);margin:0 6px;flex-shrink:0}
.bc-crumb{display:flex;align-items:center;gap:6px;color:var(--sub)}
.bc-crumb a{color:var(--sub);transition:color .15s}.bc-crumb a:hover{color:var(--navy)}
.bc-sep{color:var(--mute);font-size:12px}
.bc-cur{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}

/* Back-to-top */
#btt{position:fixed;right:22px;bottom:86px;z-index:98;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;border:0;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(26,58,143,.35);transition:opacity .2s}
#btt.show{display:flex}
#btt:hover{background:var(--navy-deep)}

/* Toast */
#toast-container{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--ink);color:#fff;font-size:13.5px;font-weight:500;padding:11px 20px;border-radius:22px;opacity:0;transform:translateY(8px);transition:all .3s}
.toast.show{opacity:1;transform:none}
.toast.success{background:var(--green)}

/* ── Button system ────────────────────────────────────────────
   One CTA system. Variants (colours preserve the brand):
     .btn-primary  gold  (PaMarket's main CTA)   · alias .btn-accent
     .btn-navy     navy
     .btn-secondary  soft navy
     .btn-outline  navy outline (light bg)        · alias .btn-ghost
     .btn-outline-white  white outline (dark bg)
     .btn-whatsapp green (contact)
     .btn-danger   red (destructive)
   Sizes .btn-sm / (default) / .btn-lg · .btn-block full width.
   States :disabled/.btn-disabled · .btn-loading (spinner).
   Consistent height, hover, focus ring; 44px mobile touch target. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;line-height:1;border-radius:10px;padding:0 18px;min-height:42px;border:1.5px solid transparent;cursor:pointer;font-family:inherit;white-space:nowrap;transition:transform .12s,box-shadow .15s,background .15s,border-color .15s,color .15s;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.btn-sm{min-height:36px;padding:0 14px;font-size:13px;border-radius:9px}
.btn-lg{min-height:50px;padding:0 26px;font-size:15px}
.btn-block{width:100%}
.btn-primary,.btn-accent{background:var(--gold);color:#fff}.btn-primary:hover,.btn-accent:hover{background:var(--gold-dark)}
.btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:var(--navy-deep)}
.btn-secondary{background:var(--navy-tint);color:var(--navy)}.btn-secondary:hover{background:#E2E9FB}
.btn-outline,.btn-ghost{background:#fff;color:var(--navy);border-color:var(--line)}.btn-outline:hover,.btn-ghost:hover{border-color:var(--navy)}
.btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}.btn-outline-white:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-whatsapp{background:#25D366;color:#fff}.btn-whatsapp:hover{background:#1fb857}
.btn-danger{background:var(--red);color:#fff}.btn-danger:hover{background:#b91c1c}
.btn:disabled,.btn[disabled],.btn.is-disabled,.btn.btn-disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.btn.is-loading,.btn.btn-loading{color:transparent!important;pointer-events:none;position:relative}
.btn.is-loading::after,.btn.btn-loading::after{content:"";position:absolute;width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;color:#fff;animation:btnspin .6s linear infinite}
.btn-outline.is-loading::after,.btn-outline-white.is-loading::after,.btn-secondary.is-loading::after,.btn-outline.btn-loading::after{color:var(--navy)}
@keyframes btnspin{to{transform:rotate(360deg)}}
@media(max-width:768px){.btn{min-height:44px}}
@media(prefers-reduced-motion:reduce){.btn.is-loading::after,.btn.btn-loading::after{animation:none}}

/* ============================================================
   PHASE 3 — Shared Component Library
   One definition per component; the historical per-page class
   names (.lcard on the homepage scroller, .gcard on the browse
   grid, .shopcard for businesses) are aliased to the same rules
   so every page renders an identical component. New markup should
   use the .pm-* names.
   ============================================================ */

/* ── Listing card ─────────────────────────────────────────── */
.pm-card,.lcard,.gcard{background:#fff;border-radius:14px;border:1px solid var(--line);overflow:hidden;transition:box-shadow .2s,transform .2s,border-color .2s;cursor:pointer;display:block;box-shadow:0 1px 3px rgba(15,36,96,.04)}
.pm-card:hover,.lcard:hover,.gcard:hover{box-shadow:0 14px 34px rgba(26,58,143,.15);transform:translateY(-3px);border-color:rgba(26,58,143,.2)}
.pm-card-img,.lcard-img,.gcard-img{width:100%;aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--paper)}
.pm-card-img img,.lcard-img-inner,.gcard-img img{width:100%;height:100%;object-fit:cover;display:flex;align-items:center;justify-content:center;text-align:center;transition:transform .35s}
.pm-card:hover .pm-card-img img,.lcard:hover .lcard-img-inner,.gcard:hover .gcard-img img{transform:scale(1.05)}
.pm-card-ph,.gcard-img-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;text-align:center;padding:12px;line-height:1.4}
.pm-card-badge,.lcard-badge,.gcard-badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;z-index:1;background:var(--navy);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.badge-new{background:var(--navy);color:#fff}
.badge-hot{background:var(--red);color:#fff}
.badge-feat{background:var(--gold);color:#fff}
.pm-card-body,.lcard-body,.gcard-body{padding:12px 14px 14px}
.pm-card-price,.lcard-price,.gcard-price{font-size:17px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.pm-card-title,.lcard-title,.gcard-title{font-size:13px;color:var(--ink);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.pm-card-loc,.lcard-loc,.gcard-loc{font-size:11.5px;color:var(--mute);margin-top:7px;display:flex;align-items:center;gap:4px}
/* Homepage horizontal scroller uses fixed-width cards */
.hscroll>.pm-card,.hscroll>.lcard{flex:0 0 168px}
@media(max-width:700px){.hscroll>.pm-card,.hscroll>.lcard{flex-basis:150px}}

/* ── Business / shop card ─────────────────────────────────── */
.pm-biz,.shopcard{background:#fff;border-radius:14px;border:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:16px;transition:box-shadow .2s,transform .2s,border-color .2s;cursor:pointer}
.pm-biz:hover,.shopcard:hover{box-shadow:0 10px 26px rgba(26,58,143,.12);transform:translateY(-2px);border-color:rgba(26,58,143,.2)}
.pm-biz-logo,.shopcard-logo{width:56px;height:56px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--paper)}
.pm-biz-logo img,.shopcard-logo img{width:100%;height:100%;object-fit:cover}
.pm-biz-body,.shopcard-body{min-width:0}
.pm-biz-name,.shopcard-name{font-size:14.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:6px;line-height:1.35}
.pm-biz-verified,.shopcard-verified{width:16px;height:16px;border-radius:50%;background:var(--green);color:#fff;font-size:10px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.pm-biz-loc,.shopcard-loc{font-size:12px;color:var(--mute);margin-top:5px;display:flex;align-items:center;gap:4px}

/* ── States: skeleton / empty ─────────────────────────────── */
.skeleton{background:linear-gradient(90deg,#EEF1F6 25%,#F6F8FB 50%,#EEF1F6 75%);background-size:200% 100%;animation:sk 1.3s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.empty-state{background:#fff;border:1px solid var(--line);border-radius:14px;padding:60px 30px;text-align:center;color:var(--sub)}
.empty-state a{color:var(--navy);font-weight:700}

/* ── Filter chips ─────────────────────────────────────────── */
.pm-chip,.ind-chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:13px;font-weight:600;color:var(--ink);text-align:center;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.pm-chip:hover,.ind-chip:hover{border-color:var(--navy);color:var(--navy)}
.pm-chip.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
/* Horizontal, edge-to-edge scroll on mobile (nowrap only here) */
.pm-chip-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pm-chip-row::-webkit-scrollbar{display:none}
.pm-chip-row>.pm-chip{flex:0 0 auto;white-space:nowrap}

/* ── Load-more / pagination ───────────────────────────────── */
.load-more{display:block;margin:26px auto 0;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:12px 30px;font-weight:700;font-size:13.5px;color:var(--navy);transition:border-color .15s,background .15s}
.load-more:hover{border-color:var(--navy);background:var(--paper)}
@media(prefers-reduced-motion:reduce){.skeleton{animation:none}.pm-card,.lcard,.gcard,.pm-biz,.shopcard{transition:none}}
/* Category photo heroes (browse category pages + jobs). */
.cat-hero{position:relative;min-height:340px;display:flex;align-items:center;overflow:hidden;background:#0b1c4d}
.cat-hero[hidden]{display:none}
.cat-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat-hero::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(11,28,77,.94) 0%,rgba(11,28,77,.82) 38%,rgba(11,28,77,.42) 68%,rgba(11,28,77,.15) 100%)}
.cat-hero-w{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:48px 28px;width:100%}
.cat-hero-eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:16px;min-height:18px}
.cat-hero h1{font-size:44px;line-height:1.08;letter-spacing:-.025em;color:#fff;margin:0 0 14px;max-width:640px}
.cat-hero p{font-size:15.5px;color:#D7DEF3;max-width:540px;margin:0 0 24px;line-height:1.6}
.cat-hero-search{display:flex;align-items:center;background:#fff;border-radius:999px;max-width:560px;height:56px;padding:0 6px 0 22px;box-shadow:0 20px 40px -12px rgba(11,28,77,.5)}
.cat-hero-search input{flex:1;min-width:0;border:none;outline:none;font-size:14.5px;font-family:inherit;color:var(--ink);background:transparent}
.cat-hero-search button{background:var(--navy);color:#fff;border:none;border-radius:999px;height:44px;padding:0 24px;font-family:inherit;font-weight:700;font-size:13.5px;white-space:nowrap}
.cat-hero-chips{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.cat-hero-chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .15s,border-color .15s}
.cat-hero-chip:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.42)}
@media(max-width:980px){.cat-hero h1{font-size:32px}}

@media(max-width:620px){.cat-hero{min-height:310px}.cat-hero-w{padding:38px 20px}.cat-hero h1{font-size:29px}.cat-hero p{font-size:14px;margin-bottom:20px}.cat-hero-search{height:50px;padding-left:17px}.cat-hero-search button{height:40px;padding:0 17px}.cat-hero-chips{gap:8px}.cat-hero-chip{font-size:11.5px;padding:6px 11px}}