/* ==========================================================================
   Zknect — design tokens
   Palette pulled from the brand flyer: deep navy ground, electric sky-blue
   headline colour, warm gold from the logo mark.
   ========================================================================== */
:root{
  --navy:        #0B1738;
  --navy-2:      #10204A;
  --navy-3:      #16295E;
  --blue:        #4FA8E0;
  --blue-soft:   #9FCFEF;
  --gold:        #D9A441;
  --gold-soft:   #F0CE86;
  --paper:       #F6F4EE;
  --paper-2:     #EDEAE0;
  --ink:         #12141C;
  --muted:       #5B6072;
  --line:        rgba(11,23,56,0.12);
  --line-dark:   rgba(255,255,255,0.14);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Manrope", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --container: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; font-weight:600; letter-spacing:-0.01em; }
p{ margin:0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.wrap{
  width:100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background: var(--gold);
  display:inline-block;
}

/* ---------------------------------- nav ---------------------------------- */
.site-header{
  position: sticky;
  top:0;
  z-index: 50;
  background: rgba(11,23,56,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-dark);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand img{ height:38px; width:auto; border-radius:6px; }
.brand-word{
  font-family: var(--font-display);
  font-size: 20px;
  font-weight:700;
  color: #fff;
  letter-spacing: 0.01em;
}
.brand-word span{ color: var(--blue); }

.nav-links{
  display:flex;
  align-items:center;
  gap: 34px;
}
.nav-links a{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.nav-links a:hover{ color:#fff; }
.nav-links a.active{ color: var(--blue); border-color: var(--blue); }

.nav-cta{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--gold);
  padding: 10px 18px;
  border-radius: 3px;
  transition: transform .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.nav-cta:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(217,164,65,0.35); }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding: 6px;
}
.nav-toggle span{ width:22px; height:2px; background:#fff; display:block; }

/* ------------------------------- buttons --------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn-gold{
  background: var(--gold);
  color: var(--navy);
}
.btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(217,164,65,0.32); }
.btn-outline{
  border-color: rgba(255,255,255,0.4);
  color:#fff;
}
.btn-outline:hover{ border-color:#fff; background: rgba(255,255,255,0.06); }
.btn-outline-dark{
  border-color: rgba(11,23,56,0.3);
  color: var(--navy);
}
.btn-outline-dark:hover{ border-color: var(--navy); background: rgba(11,23,56,0.05); }

/* --------------------------------- hero ---------------------------------- */
.hero{
  position:relative;
  background: radial-gradient(ellipse 120% 90% at 82% -10%, #1A3468 0%, var(--navy) 55%);
  color:#fff;
  overflow:hidden;
  padding: 110px 0 60px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items:center;
}
.hero h1{
  font-size: clamp(38px, 5.4vw, 64px);
  color:#fff;
  line-height: 1.06;
  margin-top: 18px;
}
.hero h1 em{
  font-style: italic;
  color: var(--blue);
}
.hero-sub{
  margin-top: 22px;
  font-size: 17px;
  color: rgba(255,255,255,0.72);
  max-width: 46ch;
}
.hero-ctas{
  margin-top: 36px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.hero-meta{
  margin-top: 46px;
  display:flex;
  gap: 34px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
}
.hero-meta b{ color:#fff; font-size:14px; display:block; font-family: var(--font-body); font-weight:800;}

/* ascent motif — staircase of bars trending up, echoes the logo's peak mark */
.ascent{
  position:relative;
  height: 300px;
  display:flex;
  align-items:flex-end;
  gap: 10px;
  justify-content:flex-end;
  padding-right: 6px;
}
.ascent i{
  display:block;
  width: 30px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  transform-origin: bottom;
  animation: rise 1.1s cubic-bezier(.2,.8,.2,1) both;
}
.ascent i:nth-child(1){ height: 26%; background: linear-gradient(180deg, #6FBBE8, var(--blue)); animation-delay: .05s;}
.ascent i:nth-child(2){ height: 42%; background: linear-gradient(180deg, #6FBBE8, var(--blue)); animation-delay: .15s;}
.ascent i:nth-child(3){ height: 60%; animation-delay: .25s;}
.ascent i:nth-child(4){ height: 78%; animation-delay: .35s;}
.ascent i:nth-child(5){ height: 100%; animation-delay: .45s;}
@keyframes rise{
  from{ transform: scaleY(0); opacity:0; }
  to{ transform: scaleY(1); opacity:1; }
}

/* staircase divider between hero and next section */
.divider{
  height: 64px;
  background: var(--paper);
  clip-path: polygon(0 100%, 0 60%, 14% 60%, 14% 40%, 30% 40%, 30% 22%, 48% 22%, 48% 8%, 68% 8%, 68% 0%, 100% 0%, 100% 100%);
}

/* -------------------------------- sections -------------------------------- */
section{ padding: 100px 0; }
.section-head{
  max-width: 640px;
  margin-bottom: 56px;
}
.section-head h2{
  font-size: clamp(28px, 3.6vw, 40px);
  margin-top: 14px;
  color: var(--navy);
}
.section-head p{
  margin-top: 16px;
  color: var(--muted);
  font-size: 16px;
}
.light-on-dark .section-head h2{ color:#fff; }
.light-on-dark .section-head p{ color: rgba(255,255,255,0.65); }

/* service preview grid (home) */
.grid-4{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.svc-card{
  background: var(--paper);
  padding: 34px 26px;
  transition: background .2s ease;
}
.svc-card:hover{ background: #fff; }
.svc-card .num{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 0.1em;
}
.svc-card h3{
  margin-top: 16px;
  font-size: 19px;
  color: var(--navy);
}
.svc-card p{
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--muted);
}
.see-all{
  margin-top: 40px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom: 1px solid var(--navy);
  padding-bottom: 3px;
}

/* pillars (why zknect) */
.pillars{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.pillar-tag{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}
.pillar h3{
  margin-top: 12px;
  font-size: 21px;
  color: var(--navy);
}
.pillar p{
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
}

/* stat strip */
.stat-strip{
  background: var(--navy);
  color:#fff;
  padding: 54px 0;
}
.stat-strip .wrap{
  display:flex;
  justify-content: space-between;
  flex-wrap:wrap;
  gap: 30px;
}
.stat{ flex:1; min-width:200px; }
.stat b{
  display:block;
  font-family: var(--font-display);
  font-size: 40px;
  color: var(--gold-soft);
}
.stat span{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

/* cta band */
.cta-band{
  background: var(--navy-2);
  color:#fff;
  padding: 90px 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-band h2{
  font-size: clamp(30px, 4.2vw, 46px);
  color:#fff;
  max-width: 720px;
  margin: 0 auto;
}
.cta-band p{
  margin-top: 18px;
  color: rgba(255,255,255,0.65);
}
.cta-band .btn-row{
  margin-top: 34px;
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ------------------------------- services page ---------------------------- */
.services-full{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 10px;
}
.svc-full-card{
  background: var(--paper);
  padding: 42px 40px;
}
.svc-full-card .num{
  font-family: var(--font-mono);
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.1em;
}
.svc-full-card h3{
  margin-top: 14px;
  font-size: 23px;
  color: var(--navy);
}
.svc-full-card p{
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
  max-width: 46ch;
}

.process{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  counter-reset: step;
}
.step{ position:relative; padding-top: 30px; border-top: 2px solid var(--line); }
.step::before{
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--gold);
  position:absolute;
  top:-13px; left:0;
  background: var(--paper);
  padding-right: 10px;
}
.step h4{ font-size: 18px; color: var(--navy); margin-top: 8px; }
.step p{ margin-top: 8px; font-size: 14px; color: var(--muted); }

/* --------------------------------- about ---------------------------------- */
.about-hero{
  display:grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
  align-items:center;
}
.portrait-frame{
  position:relative;
  border: 1px solid var(--line-dark);
  padding: 14px;
}
.portrait-frame img{ width:100%; height:auto; }
.portrait-tag{
  position:absolute;
  bottom: -18px; left: 24px;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
}
.about-copy h1{
  font-size: clamp(32px, 4.6vw, 48px);
  color:#fff;
  margin-top: 16px;
}
.about-copy p{
  margin-top: 18px;
  color: rgba(255,255,255,0.7);
  font-size: 16px;
  max-width: 56ch;
}

.values{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.value h3{
  font-size: 20px;
  color: var(--navy);
  display:flex;
  align-items:baseline;
  gap: 10px;
}
.value h3 i{
  font-style:normal;
  width: 8px; height:8px;
  border-radius: 50%;
  background: var(--gold);
  display:inline-block;
}
.value p{ margin-top:10px; color: var(--muted); font-size: 15px; }

/* -------------------------------- contact ---------------------------------- */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items:start;
}
.contact-list{ margin-top: 30px; display:flex; flex-direction:column; gap: 22px; }
.contact-item{
  display:flex;
  gap: 16px;
  align-items:flex-start;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.contact-item .k{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  width: 110px;
  flex-shrink:0;
  padding-top:3px;
}
.contact-item .v{ font-size: 17px; color: var(--navy); font-weight:600; }
.contact-item .v:hover{ color: var(--blue); }

.form{
  background: var(--navy);
  padding: 44px;
  border-radius: 4px;
}
.form h3{ color:#fff; font-size: 22px; }
.field{ margin-top: 20px; }
.field label{
  display:block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 8px;
}
.field input, .field textarea{
  width:100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px;
  padding: 13px 14px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
}
.field textarea{ min-height: 110px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder{ color: rgba(255,255,255,0.35); }
.form .btn{ margin-top: 26px; width:100%; justify-content:center; }
.form-note{ margin-top:16px; font-size:12.5px; color: rgba(255,255,255,0.45); }

/* --------------------------------- footer ---------------------------------- */
.site-footer{
  background: var(--navy);
  color: rgba(255,255,255,0.6);
  padding: 60px 0 30px;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-dark);
}
.footer-brand{ max-width: 320px; }
.footer-brand .brand{ margin-bottom: 16px; }
.footer-cols{ display:flex; gap: 70px; flex-wrap:wrap; }
.footer-col h4{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.footer-col a{
  display:block;
  padding: 6px 0;
  font-size: 14.5px;
  color: rgba(255,255,255,0.62);
}
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  padding-top: 24px;
  font-size: 12.5px;
  flex-wrap:wrap;
  gap:10px;
}

/* ------------------------------ reveal on scroll ---------------------------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* --------------------------------- responsive -------------------------------- */
@media (max-width: 980px){
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .pillars{ grid-template-columns: 1fr; }
  .services-full{ grid-template-columns: 1fr; }
  .process{ grid-template-columns: repeat(2,1fr); }
  .about-hero{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .hero-grid{ grid-template-columns: 1fr; }
  .ascent{ height: 180px; margin-top: 30px; justify-content:flex-start; }
}
@media (max-width: 720px){
  .nav-links, .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-links.open{
    display:flex;
    flex-direction:column;
    gap: 0;
    position:absolute;
    top: 100%; left:0; right:0;
    background: var(--navy);
    padding: 10px 24px 20px;
    border-bottom: 1px solid var(--line-dark);
  }
  .nav-links.open a{ padding: 12px 0; border-bottom: 1px solid var(--line-dark); width:100%; }
  .grid-4{ grid-template-columns: 1fr; }
  .footer-cols{ gap: 40px; }
  .stat-strip .wrap{ flex-direction:column; }
}

/* ============================================================
   Zknect Connect — service provider marketplace
   ============================================================ */

/* category filter tabs */
.cat-tabs{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 10px;
}
.cat-tab{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line);
  padding: 11px 18px;
  border-radius: 30px;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.cat-tab:hover{ border-color: var(--navy); }
.cat-tab.active{ background: var(--navy); color:#fff; border-color: var(--navy); }
.cat-tab .n{ opacity:.55; margin-left:6px; }

/* provider grid + card */
.provider-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 46px;
}
.provider-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px 24px;
  display:flex;
  flex-direction:column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.provider-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px rgba(11,23,56,0.08); }
.provider-card .cat-pill{
  align-self:flex-start;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--paper-2);
  padding: 5px 10px;
  border-radius: 20px;
}
.provider-card h3{ margin-top: 16px; font-size: 19px; color: var(--navy); }
.provider-card .prov-service{
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin-top: 4px;
  text-transform: uppercase;
}
.provider-card p{ margin-top: 10px; font-size: 14px; color: var(--muted); flex-grow:1; }
.provider-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.provider-meta .price{ color: var(--navy); font-weight:700; font-family: var(--font-body); }
.provider-card .btn{ margin-top: 16px; width:100%; justify-content:center; padding: 12px 20px; font-size:12px; }
.verified-badge{
  display:inline-flex; align-items:center; gap:5px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--blue); margin-top:8px; letter-spacing:.05em; text-transform:uppercase;
}
.verified-badge::before{ content:"✓"; color: var(--blue); font-weight:700; }

.empty-state{
  padding: 60px 20px;
  text-align:center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 13px;
  display:none;
}

/* provider registration: category select cards */
.cat-select-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 10px;
}
.cat-select-card{
  border: 1px solid var(--line-dark);
  background: rgba(255,255,255,0.04);
  border-radius: 5px;
  padding: 18px 16px;
  cursor:pointer;
  transition: all .18s ease;
}
.cat-select-card:hover{ border-color: rgba(255,255,255,0.4); }
.cat-select-card.selected{ border-color: var(--gold); background: rgba(217,164,65,0.1); }
.cat-select-card .cs-name{ color:#fff; font-weight:700; font-size: 14.5px; }
.cat-select-card .cs-eg{ color: rgba(255,255,255,0.5); font-size: 12.5px; margin-top: 4px; }

/* multi-step form indicator */
.reg-steps{
  display:flex;
  gap: 8px;
  margin-bottom: 40px;
  flex-wrap:wrap;
}
.reg-step-tag{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
}
.reg-step-tag.current{ background: var(--navy); color:#fff; border-color: var(--navy); }

/* payment box */
.pay-box{
  background: rgba(217,164,65,0.08);
  border: 1px solid rgba(217,164,65,0.3);
  border-radius: 5px;
  padding: 22px;
  margin-top: 24px;
}
.pay-box .pay-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255,255,255,0.75);
}
.pay-box .pay-total{ font-size: 22px; color: var(--gold-soft); font-family: var(--font-display); font-weight:700; }
.pay-status{
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 4px;
  display:none;
}
.pay-status.show{ display:block; }
.pay-status.pending{ background: rgba(79,168,224,0.15); color: var(--blue-soft); }
.pay-status.success{ background: rgba(90,180,110,0.15); color: #7CD79A; }
.pay-status.error{ background: rgba(220,80,80,0.15); color: #F0A0A0; }

/* booking modal */
.modal-overlay{
  position: fixed; inset:0;
  background: rgba(11,23,56,0.72);
  backdrop-filter: blur(3px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 200;
  padding: 20px;
}
.modal-overlay.open{ display:flex; }
.modal-box{
  background: var(--navy);
  border-radius: 6px;
  max-width: 460px;
  width:100%;
  max-height: 90vh;
  overflow-y:auto;
  padding: 36px;
  position:relative;
}
.modal-close{
  position:absolute; top:18px; right:18px;
  background:none; border:none; color: rgba(255,255,255,0.5);
  font-size: 22px; cursor:pointer; line-height:1;
}
.modal-close:hover{ color:#fff; }
.modal-box h3{ color:#fff; font-size: 21px; padding-right: 20px; }
.modal-box .modal-sub{ color: rgba(255,255,255,0.55); font-size: 13.5px; margin-top: 6px; }

.form-msg{
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 12px 14px;
  border-radius: 4px;
  display:none;
}
.form-msg.show{ display:block; }
.form-msg.success{ background: rgba(90,180,110,0.15); color: #7CD79A; }
.form-msg.error{ background: rgba(220,80,80,0.15); color: #F0A0A0; }

@media (max-width: 980px){
  .provider-grid{ grid-template-columns: repeat(2,1fr); }
  .cat-select-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .provider-grid{ grid-template-columns: 1fr; }
  .cat-tabs{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px; }
}

/* ============================================================
   Zknect Connect — v2 additions (reviews, receipts, chat, popular)
   ============================================================ */

/* job filter select next to category tabs */
.job-filter{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 10px 16px;
  margin-top: 10px;
  display:none;
}

/* ratings + reviews on provider cards */
.prov-rating{
  margin-top: 10px;
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.prov-rating span{ color: var(--muted); font-family: var(--font-mono); font-size: 11.5px; margin-left: 4px; }
.prov-review{
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  border-left: 2px solid var(--line);
  padding-left: 10px;
}
.prov-review span{ display:block; font-style:normal; font-family: var(--font-mono); font-size: 10.5px; margin-top:3px; color: var(--navy); }

/* popular services (home) */
.popular-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.popular-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 24px 20px;
  transition: transform .18s ease, box-shadow .18s ease;
  display:block;
}
.popular-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px rgba(11,23,56,0.08); }
.popular-icon{ font-size: 26px; }
.popular-card h3{ margin-top: 10px; font-size: 16px; color: var(--navy); }
.popular-review{ margin-top: 8px; font-size: 12.5px; color: var(--muted); font-style: italic; }

/* payment instructions inside booking modal */
.pay-instructions{
  background: rgba(217,164,65,0.1);
  border: 1px solid rgba(217,164,65,0.3);
  border-radius: 5px;
  padding: 16px;
  margin: 18px 0;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
}
.pay-instructions b{ color: var(--gold-soft); }

/* receipt */
.receipt{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 24px;
}
.receipt-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px dashed rgba(255,255,255,0.25);
  color:#fff;
  font-family: var(--font-mono);
  font-size: 12px;
}
.receipt-row{
  display:flex;
  justify-content:space-between;
  font-size: 13.5px;
  color: rgba(255,255,255,0.8);
  padding: 6px 0;
}
.receipt-row span:first-child{ color: rgba(255,255,255,0.5); font-family: var(--font-mono); font-size: 11px; text-transform:uppercase; }
.receipt-note{ margin-top: 14px; font-size: 12.5px; color: rgba(255,255,255,0.6); }
.receipt-note a{ color: var(--blue-soft); text-decoration: underline; }
.receipt-actions{ margin-top: 18px; display:flex; gap: 12px; flex-wrap:wrap; }
.receipt-actions .btn{ flex:1; justify-content:center; border-color: rgba(255,255,255,0.3); color:#fff; padding: 12px 16px; font-size:12px; }
.receipt-actions .btn:hover{ border-color:#fff; background: rgba(255,255,255,0.06); }

/* --------------------------------- chat widget ---------------------------------- */
.chat-toggle{
  position: fixed;
  bottom: 24px; right: 24px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(11,23,56,0.35);
  z-index: 150;
  display:flex; align-items:center; justify-content:center;
  transition: transform .18s ease;
}
.chat-toggle:hover{ transform: translateY(-2px) scale(1.04); }

.chat-panel{
  position: fixed;
  bottom: 96px; right: 24px;
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: 60vh;
  background: var(--navy);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(11,23,56,0.4);
  display:flex; flex-direction:column;
  overflow:hidden;
  z-index: 150;
  opacity:0; transform: translateY(14px) scale(0.98);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.chat-panel.open{ opacity:1; transform:none; pointer-events:auto; }
.chat-head{
  background: var(--navy-2);
  color:#fff;
  padding: 14px 16px;
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing:.04em; text-transform:uppercase;
}
.chat-head button{ background:none; border:none; color: rgba(255,255,255,0.6); font-size:18px; cursor:pointer; }
.chat-log{
  flex:1;
  overflow-y:auto;
  padding: 14px 16px;
  display:flex; flex-direction:column; gap: 10px;
}
.chat-bubble{
  font-size: 13.5px;
  line-height:1.45;
  padding: 10px 13px;
  border-radius: 10px;
  max-width: 88%;
}
.chat-bubble a{ color: var(--blue-soft); text-decoration:underline; }
.chat-bubble.bot{ background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.88); align-self:flex-start; border-bottom-left-radius:2px; }
.chat-bubble.user{ background: var(--gold); color: var(--navy); align-self:flex-end; border-bottom-right-radius:2px; }
.chat-form{ display:flex; gap:8px; padding: 12px; border-top: 1px solid rgba(255,255,255,0.12); }
.chat-form input{
  flex:1;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  padding: 10px 14px;
  color:#fff;
  font-size: 13px;
}
.chat-form input::placeholder{ color: rgba(255,255,255,0.4); }
.chat-form button{
  background: var(--gold);
  color: var(--navy);
  border:none;
  border-radius: 20px;
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  cursor:pointer;
}

@media (max-width: 980px){
  .popular-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 720px){
  .popular-grid{ grid-template-columns: 1fr; }
  .chat-panel{ right: 12px; bottom: 88px; }
  .chat-toggle{ right: 16px; bottom: 16px; }
}

@media print{
  .site-header, .site-footer, .chat-toggle, .chat-panel, .modal-close, .cta-band{ display:none !important; }
  .modal-overlay{ position:static; background:none; backdrop-filter:none; padding:0; }
  .modal-box{ box-shadow:none; max-width:100%; }
}