/* ==========================================================================
   KARIGAR JUNCTION — Design System — "Vintage & Cool" palette
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
  /* ---- Color tokens (Vintage & Cool) --------------------------------- */
  --ink:        #1C1F4C;   /* deep navy — headings, dark sections, text   */
  --ink-soft:   #5B5E86;   /* muted navy-grey — secondary text            */
  --teal:       #00848C;   /* primary teal — links, primary buttons       */
  --teal-dark:  #037272;   /* deep teal — hover states, dark alt section  */
  --amber:      #FCCF17;   /* bright yellow — accents, badges, highlights */
  --amber-dark: #FEC20F;   /* gold — hover on amber elements              */
  --cream:      #EDEBD9;   /* warm cream — page background                */
  --cream-2:    #E3DFC4;   /* deeper cream — section bands                */
  --line:       #DCD6B8;   /* hairline borders on cream                   */
  --line-soft:  #E6E1C9;
  --white:      #FFFFFF;
  --success:    #2E8B57;

  /* ---- Type ------------------------------------------------------------ */
  --f-display: 'Playfair Display', Georgia, serif;
  --f-body: 'Poppins', 'Segoe UI', sans-serif;

  /* ---- Scale ------------------------------------------------------------ */
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-pill: 999px;
  --container: 1200px;

  --shadow-card: 0 14px 34px -18px rgba(28,31,76,.28);
  --shadow-float: 0 16px 44px -14px rgba(28,31,76,.24);
}

/* ---------------------------------------------------------------------- */
/* Reset                                                                  */
/* ---------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--f-body);
  color: #2f5454;
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input, select, textarea{ font-family:inherit; font-size:1rem; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; line-height:1.18; margin:0; letter-spacing:.1px; }
p{ margin:0; }
svg{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

:focus-visible{ outline:2.5px solid var(--teal); outline-offset:2px; }

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

.icon{ width:1em; height:1em; display:inline-block; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.flash-banner{
  border-radius: var(--radius-sm); padding:14px 18px; font-size:.9rem; font-weight:500;
  border:1px solid transparent;
}
.flash-success{ background:#E1F1E7; color:#1E6B3E; border-color:#BFE3CC; }
.flash-error{ background:#FBE7E2; color:#A3341C; border-color:#F3C7BA; }

/* ---------------------------------------------------------------------- */
/* Layout helpers                                                         */
/* ---------------------------------------------------------------------- */
.wrap{ max-width: var(--container); margin:0 auto; padding:0 24px; }
.section{ padding: 80px 0; }
.section--tight{ padding: 54px 0; }
.section--paper2{ background: var(--cream-2); }
.section--ink{ background: #2f5454; color: var(--cream); }

.section-head{ max-width: 640px; margin-bottom: 40px; }
.section-head h2{ font-size: clamp(1.8rem, 2.6vw, 2.5rem); }
.section-head p{ margin-top:12px; color: var(--ink-soft); font-size:1.05rem; }
.section--ink .section-head p{ color:#C7C9E6; }

.section-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }

.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--f-body); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.6px;
  color: var(--teal-dark); margin-bottom: 10px;
}
.kicker::before{ content:""; width:18px; height:3px; border-radius:2px; background: var(--amber); display:inline-block; }
.section--ink .kicker{ color: var(--amber); }

/* ---------------------------------------------------------------------- */
/* Buttons — pill-shaped, "vintage & cool"                                */
/* ---------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 26px; font-weight:600; font-size:.96rem;
  border-radius: var(--radius-pill); border:1.5px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn-lg{ padding:16px 32px; font-size:1.02rem; }
.btn-sm{ padding:10px 18px; font-size:.88rem; }
.btn-block{ width:100%; }

.btn-primary{ background: var(--teal); color: var(--white); }
.btn-primary:hover{ background: var(--teal-dark); }

.btn-dark{ background: #2f5454; color: var(--white); }
.btn-dark:hover{ background: #14173a; }

.btn-outline{ background:transparent; border-color: #2f5454; color: #2f5454; }
.btn-outline:hover{ background: #2f5454; color: var(--white); }

.btn-outline-light{ background:transparent; border-color: rgba(237,235,217,.55); color: var(--cream); }
.btn-outline-light:hover{ background: rgba(237,235,217,.14); border-color:var(--cream); }

.btn-ghost{ background: transparent; color: var(--teal-dark); padding:10px 4px; font-weight:600; }
.btn-ghost .icon{ transition: transform .15s ease; }
.btn-ghost:hover .icon{ transform: translateX(3px); }

.btn-call{ background: var(--success); color:#fff; }
.btn-call:hover{ filter:brightness(1.08); }
.btn-whatsapp{ background:#1F9D6E; color:#fff; }
.btn-whatsapp:hover{ filter:brightness(1.08); }

/* ---------------------------------------------------------------------- */
/* Rounded shadow card (quote box on homepage)                           */
/* ---------------------------------------------------------------------- */
.crop-card{
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  border: 1px solid rgba(28,31,76,.05);
}

/* ---------------------------------------------------------------------- */
/* Top utility bar (kept for pages that opt in)                          */
/* ---------------------------------------------------------------------- */
.topbar{ background: #2f5454; color:#C7C9E6; font-size:.8rem; }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:34px; }
.topbar-stats{ display:flex; gap:22px; }
.topbar-stats span{ display:inline-flex; align-items:center; gap:6px; }
.topbar-links{ display:flex; gap:18px; }
.topbar-links a:hover{ color:var(--white); }

/* ---------------------------------------------------------------------- */
/* Floating header + nav                                                 */
/* ---------------------------------------------------------------------- */
.site-header{
  background: var(--white);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-float);
  border: 1px solid rgba(28,31,76,.06);
  max-width: 1240px;
  margin: 18px auto 0;
  position: sticky; top:16px; z-index:80;
}
.site-header .wrap{ display:flex; align-items:center; gap:8px; height:74px; padding:0 10px 0 22px; max-width:none; }

.logo{ display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-size:1.2rem; font-weight:700; letter-spacing:.2px; flex-shrink:0; color:#2f5454; }
.logo-mark{
  width:38px; height:38px; border:2px solid #2f5454; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:800; font-size:.92rem;
  transform:rotate(-3deg); color:#2f5454; flex-shrink:0;
}
.logo small{ display:block; font-family:var(--f-body); font-weight:600; font-size:.58rem; letter-spacing:.5px; color:var(--ink-soft); text-transform:uppercase; }

.main-nav{ display:flex; align-items:center; gap:2px; flex:1; justify-content:center; padding:0 12px; }
.main-nav > a, .main-nav .dd-trigger{
  font-size:.9rem; font-weight:500; color:#2f5454; padding:9px 12px; border-radius:var(--radius-pill);
  white-space:nowrap;
}
.main-nav > a:hover, .main-nav .dd-trigger:hover{ background: var(--cream); color:var(--teal-dark); }
.main-nav .dd-trigger{ display:inline-flex; align-items:center; gap:4px; background:none; border:none; font:inherit; cursor:pointer; }
.main-nav .dd-trigger .icon{ width:.62em; height:.62em; transition:transform .18s ease; flex-shrink:0; }

.header-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.header-icon-btn{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%; color:#2f5454; flex-shrink:0;
}
.header-icon-btn .icon{ width:17px; height:17px; }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); width:40px; height:40px; border-radius:50%; align-items:center; justify-content:center; flex-shrink:0; }
.nav-toggle .icon{ width:19px; height:19px; }

.header-deal-badge{
  display:flex; align-items:center; gap:6px; background:var(--amber); color:#2f5454;
  font-size:.82rem; font-weight:700; padding:8px 14px; border-radius:var(--radius-pill); flex-shrink:0; white-space:nowrap;
}
.header-deal-badge .icon{ width:14px; height:14px; }
.header-deal-badge:hover{ background:var(--amber-dark); }

.header-login{ display:flex; align-items:center; gap:6px; font-size:.88rem; font-weight:600; color:#2f5454; padding:8px 6px; white-space:nowrap; flex-shrink:0; }
.header-login .icon{ width:16px; height:16px; }
.header-login:hover{ color:var(--teal); }

/* ---------------------------------------------------------------------- */
/* Nav dropdown (mega-menu) — stable on hover, no dead gap                */
/* ---------------------------------------------------------------------- */
.nav-dropdown{ position:relative; }
.nav-dropdown-panel{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  padding-top:14px; /* invisible hover bridge — keeps :hover unbroken between trigger and card */
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .15s ease, visibility .15s ease;
  z-index:90;
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown.open .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel{
  opacity:1; visibility:visible; pointer-events:auto;
}
.nav-dropdown.open > .dd-trigger .icon,
.nav-dropdown:hover > .dd-trigger .icon{ transform:rotate(180deg); }

.nav-dropdown-panel-inner{
  width:380px; background:var(--white); border-radius:var(--radius-md); box-shadow:var(--shadow-float);
  border:1px solid rgba(28,31,76,.06); padding:20px;
}

.nav-dropdown-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.nav-dropdown-grid a{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px; font-size:.85rem; font-weight:500; color:#2f5454; }
.nav-dropdown-grid a:hover{ background:var(--cream); color:var(--teal-dark); }
.nav-dropdown-grid .icon{ width:16px; height:16px; color:var(--teal); flex-shrink:0; }

.nav-dropdown-viewall{
  display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:14px;
  border-top:1px solid var(--line-soft); font-size:.83rem; font-weight:700; color:var(--teal-dark);
}
.nav-dropdown-viewall .icon{ width:14px; height:14px; }

/* ---------------------------------------------------------------------- */
/* Breadcrumb                                                             */
/* ---------------------------------------------------------------------- */
.breadcrumb{ padding:22px 0 16px; font-size:.85rem; color:var(--ink-soft); }
.breadcrumb a:hover{ color:var(--teal-dark); text-decoration:underline; }
.breadcrumb span{ margin:0 6px; opacity:.6; }
.breadcrumb .current{ color:#2f5454; font-weight:500; }

/* ---------------------------------------------------------------------- */
/* HERO (home)                                                            */
/* ---------------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  background: #2f5454; color: var(--cream);
  padding: 60px 0 0; margin-top:-1px;
}
.hero::after{
  content:""; position:absolute; right:0; top:0; width:46%; height:110%;
  background: var(--amber);
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%);
  opacity:.94;
}
.hero .wrap{ position:relative; z-index:1; display:grid; grid-template-columns: 1.05fr .95fr; gap:40px; align-items:center; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.85rem; color:#C7C9E6; margin-bottom:18px; }
.hero-eyebrow .icon{ width:14px; height:14px; color:var(--amber); }
.hero h1{ font-size: clamp(2.4rem, 4vw, 3.5rem); color:var(--white); }
.hero h1 em{ font-style:italic; color: var(--amber-dark); }
.hero-sub{ margin-top:18px; font-size:1.08rem; color:#C7C9E6; max-width:460px; }
.hero-cta-row{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }

.hero-stats{ display:flex; gap:28px; margin-top:44px; padding-top:24px; border-top:1px solid rgba(237,235,217,.18); }
.hero-stats div b{ display:block; font-family:var(--f-display); font-size:1.5rem; color:var(--amber); }
.hero-stats div span{ font-size:.8rem; color:#B7BADC; }

.hero-visual{ position:relative; padding-bottom:40px; z-index:1; }
.hero-map{
  position:relative; background: rgba(237,235,217,.05);
  border:1px solid rgba(237,235,217,.25); border-radius: var(--radius-md); padding:26px;
  min-height: 380px; overflow:hidden;
}
.hero-slider-track{ position:absolute; inset:0; }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity .9s ease; }
.hero-slide.active{ opacity:1; z-index:1; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.img-fade{ position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, rgba(28,31,76,0) 45%, rgba(28,31,76,.62)); }

.hero-slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.85); color:#2f5454;
  display:flex; align-items:center; justify-content:center; border:none; box-shadow:0 6px 16px -6px rgba(28,31,76,.5);
  transition:background-color .15s ease, transform .15s ease;
}
.hero-slider-arrow:hover{ background:var(--white); transform:translateY(-50%) scale(1.06); }
.hero-slider-arrow .icon{ width:16px; height:16px; }
.hero-slider-arrow.prev{ left:14px; }
.hero-slider-arrow.prev .icon{ transform:rotate(180deg); }
.hero-slider-arrow.next{ right:14px; }

.hero-slider-dots{ position:absolute; top:16px; right:16px; z-index:3; display:flex; gap:6px; }
.hero-slider-dot{
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.5); border:none; padding:0;
  transition:background-color .2s ease, width .2s ease;
}
.hero-slider-dot.active{ background:var(--amber); width:20px; border-radius:5px; }

.hero-map-pin{
  position:absolute; display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:.72rem; color:var(--white); text-align:center; width:88px; z-index:2;
}
.hero-map-pin .pin-dot{
  width:38px; height:38px; border-radius:50%; background:var(--amber); color:#2f5454;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 6px rgba(252,207,23,.2);
}
.hero-map-pin .pin-dot .icon{ width:18px; height:18px; }
.hero-map-pin.p1{ top:6%; left:8%; } .hero-map-pin.p2{ top:2%; left:52%; } .hero-map-pin.p3{ top:34%; left:74%; }
.hero-map-pin.p4{ top:56%; left:20%; } .hero-map-pin.p5{ top:64%; left:60%; } .hero-map-pin.p6{ top:20%; left:32%; }
.hero-map-note{
  position:absolute; bottom:20px; left:24px; right:24px; z-index:3;
  background: var(--white); color: #2f5454; border-radius: var(--radius-sm); padding:16px 18px;
  display:flex; align-items:center; gap:14px;
}
.hero-map-note .icon{ width:26px; height:26px; color:var(--teal); flex-shrink:0; }
.hero-map-note b{ display:block; font-size:.92rem; }
.hero-map-note span{ font-size:.78rem; color:var(--ink-soft); }

.quote-box{ position:relative; margin-top:-58px; z-index:5; }
.quote-box .crop-card{ padding:26px; display:grid; grid-template-columns: repeat(4, 1fr) auto; gap:16px; align-items:end; }
.qb-field label{ display:block; font-size:.76rem; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
.qb-field select, .qb-field input{
  width:100%; border:1px solid var(--line); border-radius: var(--radius-sm); padding:11px 12px; background:var(--cream); color:#2f5454;
}

/* ---------------------------------------------------------------------- */
/* Trust strip                                                            */
/* ---------------------------------------------------------------------- */
.trust-strip{ padding:32px 0 8px; }
.trust-strip ul{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.trust-strip li{ display:flex; align-items:center; gap:10px; font-size:.88rem; font-weight:500; color:var(--ink-soft); }
.trust-strip .icon{ width:20px; height:20px; color:var(--teal-dark); flex-shrink:0; }

/* ---------------------------------------------------------------------- */
/* Category grid                                                         */
/* ---------------------------------------------------------------------- */
.cat-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:14px; }
.cat-card{
  background:var(--white); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding:24px 16px; text-align:center; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cat-card:hover{ border-color:var(--teal); transform: translateY(-4px); box-shadow: var(--shadow-card); }
.cat-card .cat-icon{
  width:54px; height:54px; margin:0 auto 14px; border-radius:50%;
  background:var(--cream); color:var(--teal-dark); display:flex; align-items:center; justify-content:center;
}
.cat-card .cat-icon .icon{ width:24px; height:24px; }
.cat-card b{ display:block; font-size:.92rem; font-weight:600; }
.cat-card span{ display:block; font-size:.76rem; color:var(--ink-soft); margin-top:3px; }

/* ---------------------------------------------------------------------- */
/* How it works                                                          */
/* ---------------------------------------------------------------------- */
.steps{ display:grid; grid-template-columns: repeat(4, 1fr); gap:0; position:relative; }
.step{ position:relative; padding:0 18px 0 0; }
.step-num{
  font-family:var(--f-display); font-size:.9rem; color:#2f5454;
  background: var(--amber); width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-weight:700;
}
.step h3{ font-size:1.1rem; color:var(--white); margin-bottom:8px; }
.step p{ font-size:.88rem; color:#C7C9E6; }
.step-line{ position:absolute; top:18px; left:100%; width:100%; height:1px; background:repeating-linear-gradient(90deg, rgba(252,207,23,.6) 0 6px, transparent 6px 12px); }
.step:last-child .step-line{ display:none; }

/* ---------------------------------------------------------------------- */
/* Split CTA — consumer vs professional                                   */
/* ---------------------------------------------------------------------- */
.split-cta{ display:grid; grid-template-columns:1fr 1fr; gap:2px; /* background:var(--line);  */}
.split-cta > div{ background:var(--white); padding:46px; }
.split-cta > div.alt{ background:#2f5454; color:var(--cream); }
.split-cta h3{ font-size:1.55rem; margin-bottom:10px; }
.split-cta p{ color:var(--ink-soft); margin-bottom:22px; max-width:420px; }
.split-cta > div.alt p{ color:#C7C9E6; }
.split-cta ul{ margin-bottom:24px; }
.split-cta li{ display:flex; gap:10px; align-items:flex-start; font-size:.9rem; margin-bottom:9px; }
.split-cta li .icon{ width:16px; height:16px; color:var(--success); margin-top:2px; flex-shrink:0; }
.split-cta > div.alt li .icon{ color:var(--amber); }

/* ---------------------------------------------------------------------- */
/* Professional cards                                                    */
/* ---------------------------------------------------------------------- */
.pro-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
.pro-card{ background:var(--white); border:1px solid var(--line); border-radius: var(--radius-sm); overflow:hidden; transition: box-shadow .15s ease, transform .15s ease; }
.pro-card:hover{ box-shadow:var(--shadow-card); transform:translateY(-3px); }
.pro-card-media{ position:relative; aspect-ratio: 4/3; overflow:hidden; background: var(--cream-2); }
.pro-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.pro-badge{
  position:absolute; top:10px; left:10px; background:var(--white); color:#2f5454;
  font-size:.7rem; font-weight:600; padding:5px 10px; border-radius:var(--radius-pill); display:flex; align-items:center; gap:4px;
}
.pro-badge .icon{ width:12px; height:12px; color:var(--success); }
.pro-card-body{ padding:16px; }
.pro-card-body h4{ font-size:1.02rem; margin-bottom:4px; }
.pro-meta{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ink-soft); margin-bottom:8px; }
.pro-rating{ display:flex; align-items:center; gap:4px; color:var(--amber-dark); font-weight:700; }
.pro-rating .icon{ width:13px; height:13px; color:#E0A800; }
.pro-loc{ display:flex; align-items:center; gap:5px; font-size:.82rem; color:var(--ink-soft); margin-bottom:14px; }
.pro-loc .icon{ width:14px; height:14px; }

/* ---------------------------------------------------------------------- */
/* Testimonials                                                          */
/* ---------------------------------------------------------------------- */
.testi-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.testi-card{ background:var(--white); border:1px solid var(--line); border-radius: var(--radius-sm); padding:28px; }
.testi-card .icon-quote{ width:26px; height:26px; color:var(--amber-dark); margin-bottom:14px; }
.testi-card p{ font-size:.95rem; color:#2f5454; margin-bottom:18px; }
.testi-who{ display:flex; align-items:center; gap:12px; }
.testi-who b{ display:block; font-size:.88rem; }
.testi-who span{ font-size:.78rem; color:var(--ink-soft); }

/* ---------------------------------------------------------------------- */
/* City chips                                                            */
/* ---------------------------------------------------------------------- */
.city-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.city-chips a{ padding:10px 18px; border:1px solid var(--line); border-radius:var(--radius-pill); font-size:.85rem; background:var(--white); }
.city-chips a:hover{ border-color:var(--teal); color:var(--teal-dark); }

/* ---------------------------------------------------------------------- */
/* City icon grid (Delhi, Gurugram, Noida, Faridabad, Chandigarh, Jaipur) */
/* ---------------------------------------------------------------------- */
.city-icon-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.city-icon-card{
  background:var(--white); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding:26px 12px; text-align:center; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.city-icon-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:var(--teal); }
.city-icon-badge{
  width:64px; height:64px; margin:0 auto 14px; border-radius:50%;
  background:var(--cream); color:var(--teal-dark); display:flex; align-items:center; justify-content:center;
}
.city-icon-badge .icon{ width:30px; height:30px; }
.city-icon-card b{ display:block; font-size:.94rem; margin-bottom:3px; }
.city-icon-card span{ font-size:.76rem; color:var(--ink-soft); }

/* ---------------------------------------------------------------------- */
/* FAQ                                                                    */
/* ---------------------------------------------------------------------- */
.faq{ max-width:760px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 4px; font-weight:600; font-size:1rem; background:none; border:none; width:100%; text-align:left; color:#2f5454;
}
.faq-q .icon{ width:18px; height:18px; flex-shrink:0; transition: transform .2s ease; color:var(--teal-dark); }
.faq-item[aria-expanded="true"] .faq-q .icon{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.faq-item[aria-expanded="true"] .faq-a{ max-height:220px; }
.faq-a p{ padding:0 4px 20px; color:var(--ink-soft); font-size:.92rem; max-width:640px; }

/* ---------------------------------------------------------------------- */
/* Footer                                                                 */
/* ---------------------------------------------------------------------- */
.site-footer{ background: #2f5454; color:#C7C9E6; padding-top:60px; }
.footer-top{ display:grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap:30px; padding-bottom:44px; border-bottom:1px solid rgba(237,235,217,.14); }
.footer-brand p{ font-size:.88rem; margin:16px 0 20px; max-width:280px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:36px; height:36px; border:1px solid rgba(237,235,217,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ background:rgba(237,235,217,.1); }
.footer-social .icon{ width:15px; height:15px; }
.site-footer h5{ font-family:var(--f-body); font-size:.82rem; font-weight:700; color:var(--white); margin-bottom:16px; letter-spacing:.3px; }
.site-footer li{ margin-bottom:10px; font-size:.86rem; }
.site-footer a:hover{ color:var(--amber); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-size:.78rem; color:#9EA1C7; flex-wrap:wrap; gap:10px; }
.footer-bottom a:hover{ color:var(--cream); }
.footer-legal{ display:flex; gap:18px; }

/* ==========================================================================
   CATEGORY / SEARCH RESULTS PAGE
   ========================================================================== */
.results-head{ padding: 30px 0 18px; }
.results-head h1{ font-size:2rem; }
.results-head .count{ color:var(--ink-soft); font-size:.92rem; margin-top:6px; }

.results-filters-bar{ display:flex; gap:10px; flex-wrap:wrap; padding-bottom:22px; }
.pill-select{
  display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--white);
  padding:10px 16px; border-radius:var(--radius-pill); font-size:.86rem; font-weight:500;
}
.pill-select .icon{ width:14px; height:14px; color:var(--ink-soft); }

.results-layout{ display:grid; grid-template-columns: 260px 1fr; gap:32px; padding-bottom:70px; }

.filter-panel{ border:1px solid var(--line); background:var(--white); border-radius: var(--radius-sm); padding:22px; align-self:start; position:sticky; top:110px; }
.filter-panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.filter-panel-head h4{ font-family:var(--f-body); font-size:.95rem; font-weight:700; }
.filter-panel-head button{ background:none; border:none; font-size:.78rem; color:var(--teal-dark); font-weight:600; }
.filter-group{ padding:18px 0; border-bottom:1px solid var(--line-soft); }
.filter-group:last-child{ border-bottom:none; }
.filter-group h5{ font-family:var(--f-body); font-size:.84rem; font-weight:700; margin-bottom:12px; }
.filter-check{ display:flex; align-items:center; gap:9px; font-size:.87rem; margin-bottom:10px; color:var(--ink-soft); }
.filter-check input{ width:16px; height:16px; accent-color:var(--teal); }
.filter-range{ width:100%; accent-color:var(--teal); }
.filter-range-vals{ display:flex; justify-content:space-between; font-size:.78rem; color:var(--ink-soft); margin-top:6px; }

.result-list{ display:flex; flex-direction:column; gap:16px; }
.result-card{ display:grid; grid-template-columns: 190px 1fr auto; gap:20px; border:1px solid var(--line); background:var(--white); border-radius: var(--radius-sm); padding:16px; }
.result-media{ aspect-ratio:4/3; border-radius: var(--radius-sm); overflow:hidden; background: var(--cream-2); position:relative; }
.result-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.result-info h3{ font-size:1.08rem; margin-bottom:6px; }
.result-info h3 a:hover{ color:var(--teal-dark); }
.result-tags{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.tag{ font-size:.72rem; font-weight:600; padding:5px 11px; border-radius:var(--radius-pill); background:var(--cream); color:var(--ink-soft); }
.tag.verified{ background:#E1F1E7; color:var(--success); display:inline-flex; align-items:center; gap:4px; }
.tag.verified .icon{ width:11px; height:11px; }
.result-desc{ font-size:.88rem; color:var(--ink-soft); max-width:520px; }
.result-actions{ display:flex; flex-direction:column; gap:10px; justify-content:center; min-width:150px; }

.pagination{ display:flex; justify-content:center; gap:8px; margin-top:36px; }
.pagination a, .pagination span{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); font-size:.85rem; font-weight:600; color:var(--ink-soft); border-radius:50%;
}
.pagination a:hover{ border-color:var(--teal); color:var(--teal-dark); }
.pagination .current{ background:#2f5454; color:var(--cream); border-color:#2f5454; }

/* ==========================================================================
   PROFILE PAGE
   ========================================================================== */
.profile-hero{ background:var(--white); border-bottom:1px solid var(--line); padding:34px 0; }
.profile-hero .wrap{ display:flex; gap:24px; align-items:flex-start; }
.profile-avatar{ width:108px; height:108px; border-radius: var(--radius-sm); overflow:hidden; background:#2f5454; flex-shrink:0; }
.profile-avatar img{ width:100%; height:100%; object-fit:cover; }
.profile-head-main{ flex:1; }
.profile-head-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.profile-head-top h1{ font-size:1.75rem; display:flex; align-items:center; gap:10px; }
.profile-head-top h1 .icon{ width:20px; height:20px; color:var(--success); }
.profile-trade{ color:var(--ink-soft); font-size:.95rem; margin-top:6px; }
.profile-meta-row{ display:flex; gap:22px; margin-top:14px; flex-wrap:wrap; }
.profile-meta-row span{ display:flex; align-items:center; gap:6px; font-size:.86rem; color:var(--ink-soft); }
.profile-meta-row .icon{ width:15px; height:15px; }
.profile-meta-row .stars{ color:var(--amber-dark); font-weight:700; }
.profile-actions{ display:flex; gap:10px; flex-shrink:0; }

.profile-tabs{ background:var(--cream); border-bottom:1px solid var(--line); position:sticky; top:108px; z-index:20; }
.profile-tabs ul{ display:flex; gap:30px; overflow-x:auto; }
.profile-tabs a{ display:inline-block; padding:16px 0; font-size:.9rem; font-weight:600; color:var(--ink-soft); border-bottom:2.5px solid transparent; white-space:nowrap; }
.profile-tabs a.active, .profile-tabs a:hover{ color:#2f5454; border-color:var(--amber); }

.profile-layout{ display:grid; grid-template-columns: 1fr 320px; gap:36px; padding:44px 0 70px; }
.profile-block{ margin-bottom:44px; }
.profile-block h2{ font-size:1.35rem; margin-bottom:16px; }
.profile-block p{ color:var(--ink-soft); font-size:.94rem; max-width:640px; }

.stat-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }
.stat-box{ border:1px solid var(--line); border-radius: var(--radius-sm); padding:16px; text-align:center; background:var(--white); }
.stat-box b{ display:block; font-family:var(--f-display); font-size:1.4rem; color:var(--teal-dark); }
.stat-box span{ font-size:.76rem; color:var(--ink-soft); }

.service-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.service-item{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius: var(--radius-sm); background:var(--white); padding:12px 14px; font-size:.86rem; font-weight:500; }
.service-item .icon{ width:18px; height:18px; color:var(--teal-dark); flex-shrink:0; }

.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.gallery-item{ aspect-ratio:4/3; border-radius: var(--radius-sm); overflow:hidden; background: var(--cream-2); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; }
.gallery-item.more{ background:#2f5454; color:var(--cream); font-family:var(--f-display); font-size:1.1rem; }

.review-card{ border-bottom:1px solid var(--line-soft); padding:20px 0; }
.review-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.review-top .stars{ color:var(--amber-dark); display:flex; gap:2px; }
.review-top .stars .icon{ width:13px; height:13px; }
.review-card p{ font-size:.9rem; }
.review-meta{ font-size:.78rem; color:var(--ink-soft); margin-top:8px; }

.sidebar-card{ border:1px solid var(--line); border-radius: var(--radius-sm); background:var(--white); padding:22px; margin-bottom:20px; }
.sidebar-card h4{ font-family:var(--f-body); font-size:.95rem; font-weight:700; margin-bottom:14px; }
.sidebar-card .field{ margin-bottom:12px; }
.sidebar-card label{ display:block; font-size:.78rem; font-weight:600; color:var(--ink-soft); margin-bottom:5px; }
.sidebar-card input, .sidebar-card select, .sidebar-card textarea{
  width:100%; border:1px solid var(--line); border-radius: var(--radius-sm); padding:10px 12px; background:var(--cream);
}
.sidebar-trust{ display:flex; flex-direction:column; gap:10px; }
.sidebar-trust li{ display:flex; gap:8px; font-size:.82rem; color:var(--ink-soft); align-items:flex-start; }
.sidebar-trust .icon{ width:15px; height:15px; color:var(--success); flex-shrink:0; margin-top:1px; }

/* ==========================================================================
   QUOTE (multi-step form) PAGE
   ========================================================================== */
.quote-page-head{ text-align:center; max-width:600px; margin:0 auto 40px; }
.quote-page-head h1{ font-size:2.1rem; }
.quote-page-head p{ color:var(--ink-soft); margin-top:10px; }

.quote-progress{ display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:44px; flex-wrap:wrap; row-gap:10px; }
.qp-dot{
  width:36px; height:36px; border-radius:50%; border:1.5px solid var(--line); background:var(--white);
  display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-size:.85rem; color:var(--ink-soft);
}
.qp-step.done .qp-dot, .qp-step.active .qp-dot{ border-color:#2f5454; background:#2f5454; color:var(--amber); }
.qp-label{ font-size:.78rem; margin-left:9px; color:var(--ink-soft); font-weight:600; }
.qp-step.active .qp-label, .qp-step.done .qp-label{ color:#2f5454; }
.qp-connector{ width:60px; height:1.5px; background:var(--line); margin:0 14px; }

.quote-layout{ display:grid; grid-template-columns: 1fr 320px; gap:36px; padding-bottom:80px; }
.quote-form-card{ border:1px solid var(--line); border-radius: var(--radius-md); background:var(--white); padding:42px; }
.quote-form-card h2{ font-size:1.35rem; margin-bottom:6px; }
.quote-form-card > p{ color:var(--ink-soft); font-size:.9rem; margin-bottom:28px; }

.option-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
.option-card{
  border:1.5px solid var(--line); border-radius: var(--radius-sm); padding:18px 14px; text-align:center; cursor:pointer; background:var(--cream);
}
.option-card input{ display:none; }
.option-card .icon{ width:26px; height:26px; color:var(--teal-dark); margin-bottom:10px; }
.option-card span{ display:block; font-size:.84rem; font-weight:600; }
.option-card:has(input:checked){ border-color:var(--teal); background:var(--white); box-shadow: inset 0 0 0 1.5px var(--teal); }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px; }
.field label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:7px; }
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--line); border-radius: var(--radius-sm); padding:12px 14px; background:var(--cream);
}
.field textarea{ resize:vertical; min-height:100px; }
.form-actions{ display:flex; justify-content:space-between; margin-top:10px; }

.quote-sidebar .sidebar-card p{ font-size:.85rem; color:var(--ink-soft); }
.quote-sidebar-pro{ display:flex; gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--line-soft); }
.quote-sidebar-pro img{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.quote-sidebar-pro b{ display:block; font-size:.82rem; }
.quote-sidebar-pro span{ font-size:.74rem; color:var(--ink-soft); }

/* ==========================================================================
   CITY LANDING PAGE
   ========================================================================== */
.city-hero{ position:relative; overflow:hidden; background: #2f5454; color:var(--cream); padding:56px 0 46px; }
.city-hero-media{ position:absolute; inset:0; z-index:0; }
.city-hero-media img{ width:100%; height:100%; object-fit:cover; }
.city-hero .wrap{ position:relative; z-index:1; }
.city-hero .breadcrumb{ color:#C7C9E6; padding-bottom:22px; }
.city-hero .breadcrumb a:hover{ color:var(--white); }
.city-hero h1{ font-size:clamp(2rem,3.4vw,2.8rem); color:var(--white); max-width:640px; }
.city-hero p{ margin-top:14px; color:#C7C9E6; max-width:560px; }
.city-stats{ display:flex; gap:0; margin-top:32px; border:1px solid rgba(237,235,217,.22); border-radius: var(--radius-md); overflow:hidden; }
.city-stats div{ flex:1; padding:18px 20px; border-right:1px solid rgba(237,235,217,.22); }
.city-stats div:last-child{ border-right:none; }
.city-stats b{ display:block; font-family:var(--f-display); font-size:1.4rem; color:var(--amber); }
.city-stats span{ font-size:.78rem; color:#B7BADC; }

.area-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.area-chip{ border:1px solid var(--line); border-radius: var(--radius-sm); background:var(--white); padding:13px 16px; font-size:.87rem; font-weight:500; display:flex; justify-content:space-between; }
.area-chip span{ color:var(--ink-soft); font-size:.78rem; }
.area-chip:hover{ border-color:var(--teal); }

.trend-list{ display:flex; flex-wrap:wrap; gap:10px; }
.trend-list a{ font-size:.85rem; padding:9px 16px; border:1px dashed var(--line); border-radius: var(--radius-pill); color:var(--ink-soft); }
.trend-list a:hover{ border-style:solid; border-color:var(--teal); color:var(--teal-dark); }

/* ==========================================================================
   Misc shared
   ========================================================================== */
.cta-banner{ background: var(--teal-dark); color:var(--white); padding:54px 0; text-align:center; }
.cta-banner h2{ color:var(--white); font-size:1.9rem; margin-bottom:14px; }
.cta-banner p{ color:#CDEDEE; margin-bottom:26px; }
.cta-banner .btn-outline-light{ border-color:rgba(255,255,255,.6); }

.mobile-nav{
  position:fixed; inset:0; background:#2f5454; color:var(--cream); z-index:100;
  transform:translateX(100%); transition:transform .25s ease; padding:26px 24px; overflow-y:auto;
}
.mobile-nav.open{ transform:translateX(0); }
.mobile-nav-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }
.mobile-nav a{ display:block; padding:14px 0; font-size:1.05rem; border-bottom:1px solid rgba(237,235,217,.14); }
.mobile-nav .btn{ margin-top:20px; }

/* ==========================================================================
   Photo media (real <img> support inside placeholder boxes)
   ========================================================================== */
.avatar-photo{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.testi-who .avatar-photo{ width:44px; height:44px; }

/* ==========================================================================
   AUTH PAGES (Login / Sign Up)
   ========================================================================== */
.auth-shell{ display:grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 76px - 36px); }
.auth-visual{ position:relative; background:#2f5454; }
.auth-visual img{ width:100%; height:100%; object-fit:cover; }
.auth-visual .img-fade{ background:linear-gradient(180deg, rgba(28,31,76,.15), rgba(28,31,76,.94)); }
.auth-visual-copy{ position:absolute; left:0; right:0; bottom:0; padding:50px; color:var(--cream); z-index:2; }
.auth-visual-copy .kicker{ color:var(--amber); }
.auth-visual-copy h2{ font-size:1.75rem; color:var(--white); margin-bottom:12px; max-width:420px; }
.auth-visual-copy p{ color:#C7C9E6; max-width:400px; font-size:.92rem; }
.auth-visual-stats{ display:flex; gap:28px; margin-top:26px; }
.auth-visual-stats b{ display:block; font-family:var(--f-display); font-size:1.3rem; color:var(--amber); }
.auth-visual-stats span{ font-size:.75rem; color:#B7BADC; }

.auth-panel{ display:flex; align-items:center; justify-content:center; padding:50px 24px; }
.auth-card{ width:100%; max-width:420px; }
.auth-card > a.logo{ margin-bottom:30px; }
.auth-card h1{ font-size:1.6rem; margin-bottom:8px; }
.auth-card > p{ color:var(--ink-soft); font-size:.9rem; margin-bottom:26px; }

.role-toggle{ display:flex; border:1px solid var(--line); border-radius: var(--radius-pill); overflow:hidden; margin-bottom:24px; }
.role-toggle button{ flex:1; padding:12px; background:var(--white); border:none; font-weight:600; font-size:.85rem; color:var(--ink-soft); border-right:1px solid var(--line); }
.role-toggle button:last-child{ border-right:none; }
.role-toggle button.active{ background:#2f5454; color:var(--amber); }
.role-toggle-btn{
  display:flex; align-items:center; justify-content:center; padding:12px; cursor:pointer;
  background:var(--white); font-weight:600; font-size:.85rem; color:var(--ink-soft); border-right:1px solid var(--line);
}
label:last-child .role-toggle-btn{ border-right:none; }
.role-toggle-btn.active{ background:#2f5454; color:var(--amber); }

.auth-tabs{ display:flex; gap:26px; border-bottom:1px solid var(--line); margin-bottom:26px; }
.auth-tabs button{ background:none; border:none; padding:0 0 14px; font-weight:600; font-size:.95rem; color:var(--ink-soft); border-bottom:2.5px solid transparent; margin-bottom:-1px; }
.auth-tabs button.active{ color:#2f5454; border-color:var(--amber); }

.auth-form{ display:none; }
.auth-form.active{ display:block; }
.input-icon{ position:relative; }
.input-icon .icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--ink-soft); }
.input-icon input{ padding-left:40px; }
.input-icon .toggle-pw{ position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; font-size:.72rem; font-weight:700; color:var(--teal-dark); }

.form-meta-row{ display:flex; justify-content:space-between; align-items:center; margin:4px 0 20px; font-size:.83rem; }
.form-meta-row a{ color:var(--teal-dark); font-weight:600; }
.check-inline{ display:flex; align-items:center; gap:8px; color:var(--ink-soft); }
.check-inline input{ width:15px; height:15px; accent-color:var(--teal); }

.auth-divider{ display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--ink-soft); font-size:.78rem; }
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background:var(--line); }
.auth-social{ display:flex; gap:10px; }
.auth-social .btn{ flex:1; }

.auth-foot{ margin-top:22px; text-align:center; font-size:.87rem; color:var(--ink-soft); }
.auth-foot a{ color:var(--teal-dark); font-weight:600; }
.auth-foot-alt{ margin-top:14px; padding:14px; background:var(--cream); border-radius: var(--radius-sm); text-align:center; font-size:.83rem; border:1px solid var(--line); }
.auth-foot-alt a{ color:var(--teal-dark); font-weight:700; }

/* ==========================================================================
   List Your Business — file upload
   ========================================================================== */
.upload-box{
  border:1.5px dashed var(--line); border-radius: var(--radius-sm); padding:26px; text-align:center; color:var(--ink-soft);
  background:var(--cream); cursor:pointer; font-size:.85rem;
}
.upload-box .icon{ width:24px; height:24px; color:var(--teal-dark); margin-bottom:8px; }
.upload-box b{ display:block; color:#2f5454; font-size:.88rem; margin-bottom:3px; }
.upload-box input[type="file"]{ display:none; }
.upload-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.doc-note{ font-size:.78rem; color:var(--ink-soft); margin-top:16px; display:flex; gap:8px; align-items:flex-start; }
.doc-note .icon{ width:15px; height:15px; color:var(--teal-dark); flex-shrink:0; margin-top:1px; }

.benefit-list{ display:flex; flex-direction:column; gap:14px; }
.benefit-list li{ display:flex; gap:12px; align-items:flex-start; font-size:.87rem; }
.benefit-list .icon{ width:20px; height:20px; color:var(--teal-dark); flex-shrink:0; }
.benefit-list b{ display:block; font-size:.88rem; }
.benefit-list span{ color:var(--ink-soft); font-size:.82rem; }

/* ==========================================================================
   Suppliers hub page
   ========================================================================== */
.supplier-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.supplier-card{ background:var(--white); border:1px solid var(--line); border-radius: var(--radius-sm); overflow:hidden; }
.supplier-card-media{ aspect-ratio:4/3; overflow:hidden; }
.supplier-card-media img{ width:100%; height:100%; object-fit:cover; }
.supplier-card-body{ padding:16px; }
.supplier-card-body b{ display:block; font-size:.94rem; margin-bottom:4px; }
.supplier-card-body span{ display:block; font-size:.78rem; color:var(--ink-soft); margin-bottom:10px; }

.b2b-strip ul{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.b2b-strip li{ display:flex; align-items:center; gap:10px; font-size:.88rem; font-weight:500; }

/* ==========================================================================
   Blog page
   ========================================================================== */
.blog-featured{ display:grid; grid-template-columns:1.1fr 1fr; gap:32px; align-items:center; background:var(--white); border:1px solid var(--line); border-radius: var(--radius-md); overflow:hidden; }
.blog-featured-media{ aspect-ratio:16/11; overflow:hidden; }
.blog-featured-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-featured-body{ padding:32px 36px 32px 0; }
.blog-featured-body .tag{ margin-bottom:14px; display:inline-block; }
.blog-featured-body h2{ font-size:1.6rem; margin-bottom:12px; }
.blog-featured-body p{ color:var(--ink-soft); font-size:.95rem; margin-bottom:18px; }
.blog-meta{ display:flex; align-items:center; gap:14px; font-size:.8rem; color:var(--ink-soft); margin-bottom:16px; }
.blog-meta span{ display:flex; align-items:center; gap:6px; }
.blog-meta .icon{ width:14px; height:14px; }

.blog-filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.blog-filter-row a{ padding:9px 18px; border:1px solid var(--line); border-radius:var(--radius-pill); font-size:.85rem; font-weight:500; background:var(--white); }
.blog-filter-row a.active, .blog-filter-row a:hover{ background:#2f5454; color:var(--cream); border-color:#2f5454; }

.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.blog-card{ background:var(--white); border:1px solid var(--line); border-radius: var(--radius-sm); overflow:hidden; transition: box-shadow .15s ease, transform .15s ease; }
.blog-card:hover{ box-shadow:var(--shadow-card); transform:translateY(-3px); }
.blog-card-media{ aspect-ratio:16/10; overflow:hidden; }
.blog-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-card-body{ padding:18px; }
.blog-card-body .tag{ margin-bottom:10px; }
.blog-card-body h3{ font-size:1.05rem; margin-bottom:8px; }
.blog-card-body p{ font-size:.85rem; color:var(--ink-soft); margin-bottom:14px; }

.newsletter-box{ background:#2f5454; color:var(--cream); border-radius: var(--radius-md); padding:44px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.newsletter-box h3{ color:var(--white); font-size:1.4rem; margin-bottom:8px; }
.newsletter-box p{ color:#C7C9E6; font-size:.9rem; }
.newsletter-form{ display:flex; gap:10px; flex-wrap:wrap; }
.newsletter-form input{ border:none; border-radius:var(--radius-pill); padding:13px 18px; min-width:240px; font-size:.9rem; }

/* ==========================================================================
   Deals page
   ========================================================================== */
.deal-hero-banner{
  background: linear-gradient(120deg, var(--teal-dark), var(--teal));
  color:var(--white); border-radius: var(--radius-md); padding:40px 44px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.deal-hero-banner h1{ color:var(--white); font-size:1.7rem; margin-bottom:8px; font-family:var(--f-display); font-weight:700; }
.deal-hero-banner p{ color:#CDEDEE; max-width:460px; }
.deal-hero-badge{ font-family:var(--f-display); font-size:2.6rem; color:var(--amber); background:rgba(255,255,255,.1); border-radius:var(--radius-md); padding:14px 30px; text-align:center; }
.deal-hero-badge span{ display:block; font-family:var(--f-body); font-size:.72rem; color:var(--white); font-weight:600; }

.deal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.deal-card{ position:relative; background:var(--white); border:1px solid var(--line); border-radius: var(--radius-sm); overflow:hidden; transition: box-shadow .15s ease, transform .15s ease; }
.deal-card:hover{ box-shadow:var(--shadow-card); transform:translateY(-3px); }
.deal-card-media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.deal-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.deal-badge{
  position:absolute; top:12px; left:12px; background:var(--amber); color:#2f5454;
  font-family:var(--f-display); font-weight:700; font-size:.95rem; padding:6px 14px; border-radius:var(--radius-pill);
}
.deal-card-body{ padding:18px; }
.deal-card-body .tag{ margin-bottom:10px; }
.deal-card-body h3{ font-size:1.05rem; margin-bottom:6px; }
.deal-card-body p{ font-size:.85rem; color:var(--ink-soft); margin-bottom:14px; }
.deal-validity{ display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--ink-soft); margin-bottom:14px; }
.deal-validity .icon{ width:14px; height:14px; color:var(--teal-dark); }

/* ==========================================================================
   Reels / Influencers / Promotions page
   ========================================================================== */
.reel-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.reel-card{ position:relative; aspect-ratio:9/16; border-radius: var(--radius-sm); overflow:hidden; background:#2f5454; }
.reel-card img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.92; }
.reel-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--white);
  background:linear-gradient(180deg, rgba(28,31,76,0) 55%, rgba(28,31,76,.75));
}
.reel-play .icon{ width:38px; height:38px; }
.reel-info{ position:absolute; left:12px; right:12px; bottom:12px; color:var(--white); }
.reel-info b{ display:block; font-size:.82rem; margin-bottom:3px; }
.reel-info span{ font-size:.72rem; display:flex; align-items:center; gap:5px; color:#E4E6F5; }
.reel-info .icon{ width:12px; height:12px; }

.influencer-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.influencer-card{ background:var(--white); border:1px solid var(--line); border-radius: var(--radius-sm); padding:24px; text-align:center; }
.influencer-avatar{ width:76px; height:76px; border-radius:50%; margin:0 auto 14px; overflow:hidden; }
.influencer-avatar img{ width:100%; height:100%; object-fit:cover; }
.influencer-card b{ display:block; font-size:.98rem; }
.influencer-card .handle{ font-size:.8rem; color:var(--teal-dark); margin-top:2px; }
.influencer-stats{ display:flex; justify-content:center; gap:18px; margin:14px 0; }
.influencer-stats div b{ display:block; font-family:var(--f-display); font-size:1.1rem; }
.influencer-stats div span{ font-size:.72rem; color:var(--ink-soft); }
.influencer-card .tag{ margin-top:4px; }

.promo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.promo-card{ position:relative; border-radius: var(--radius-sm); overflow:hidden; aspect-ratio:4/3; }
.promo-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.promo-card-copy{
  position:absolute; left:0; right:0; bottom:0; padding:22px;
  background:linear-gradient(180deg, rgba(28,31,76,0) 40%, rgba(28,31,76,.88)); color:var(--white);
}
.promo-card-copy .tag{ background:var(--amber); color:#2f5454; margin-bottom:10px; }
.promo-card-copy h3{ color:var(--white); font-size:1.15rem; }

/* ==========================================================================
   Ad slots — Google AdSense / banner advertisement placements
   Drop your real <ins class="adsbygoogle"> unit inside .ad-unit-mount;
   the dashed placeholder below is only shown until a real ad renders.
   ========================================================================== */
.ad-section{ padding:30px 0; }
.ad-section--tight{ padding:18px 0; }
.ad-section .wrap{ display:flex; justify-content:center; }
.ad-slot-native{ width:100%; }

.ad-unit{
  position:relative; width:100%;
  border:1.5px dashed var(--line); border-radius: var(--radius-sm);
  background: repeating-linear-gradient(135deg, var(--cream) 0 12px, var(--cream-2) 12px 24px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  text-align:center; color:var(--ink-soft); padding:22px 16px;
}
.ad-unit-label{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--white); padding:3px 12px; border-radius:var(--radius-pill);
  border:1px solid var(--line);
}
.ad-unit .icon{ width:24px; height:24px; color:var(--teal); opacity:.75; margin-bottom:4px; }
.ad-unit b{ font-size:.86rem; color:#2f5454; font-weight:600; }
.ad-unit .ad-dims{ font-size:.72rem; }
.ad-unit-mount{ width:100%; display:flex; justify-content:center; }

.ad-leaderboard{ max-width:728px; min-height:90px; }
.ad-rectangle{ max-width:300px; min-height:250px; margin:0 auto; }
.ad-native{ max-width:100%; min-height:100px; }

/* In-feed native ad card, styled to sit inline within listing/grid components */
.ad-infeed{
  border:1.5px dashed var(--line); border-radius: var(--radius-sm);
  background: repeating-linear-gradient(135deg, var(--cream) 0 12px, var(--cream-2) 12px 24px);
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:18px; text-align:center; color:var(--ink-soft); position:relative;
}
.ad-infeed .ad-unit-label{ position:static; transform:none; margin-right:6px; }
.ad-infeed .icon{ width:18px; height:18px; color:var(--teal); flex-shrink:0; }

/* ==========================================================================
   Portfolio image lightbox (click-to-enlarge popup)
   ========================================================================== */
.gallery-item{ cursor:pointer; position:relative; }
.gallery-item:not(.more)::after{
  content:""; position:absolute; inset:0; background:rgba(28,31,76,0); transition:background-color .2s ease;
}
.gallery-item:not(.more):hover::after{ background:rgba(28,31,76,.18); }
.gallery-item .zoom-hint{
  position:absolute; bottom:8px; right:8px; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.92); color:#2f5454; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(4px); transition:opacity .2s ease, transform .2s ease; z-index:1;
}
.gallery-item:hover .zoom-hint{ opacity:1; transform:translateY(0); }
.gallery-item .zoom-hint .icon{ width:14px; height:14px; }

.lightbox-overlay{
  position:fixed; inset:0; z-index:300; background:rgba(28,31,76,.95);
  display:flex; align-items:center; justify-content:center; padding:60px 30px;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.lightbox-overlay.open{ opacity:1; visibility:visible; }
.lightbox-figure{ max-width:min(1100px,92vw); text-align:center; }
.lightbox-figure img{
  display:block; max-width:100%; max-height:80vh; margin:0 auto; border-radius: var(--radius-sm);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
}
.lightbox-caption{ color:var(--cream); font-size:.86rem; margin-top:16px; }

.lightbox-close{
  position:fixed; top:22px; right:26px; z-index:310;
  width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.12); color:var(--white);
  border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover{ background:rgba(255,255,255,.22); }
.lightbox-close .icon{ width:18px; height:18px; }

.lightbox-arrow{
  position:fixed; top:50%; transform:translateY(-50%); z-index:310;
  width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.12); color:var(--white);
  border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center;
}
.lightbox-arrow:hover{ background:rgba(255,255,255,.22); }
.lightbox-arrow .icon{ width:18px; height:18px; }
.lightbox-arrow.prev{ left:22px; }
.lightbox-arrow.prev .icon{ transform:rotate(180deg); }
.lightbox-arrow.next{ right:22px; }

.lightbox-counter{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:310;
  color:var(--cream); font-size:.8rem; background:rgba(255,255,255,.12); padding:6px 16px; border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.2);
}

/* Video modal — used by the reels grid on social.php */
.video-modal-overlay{
  position:fixed; inset:0; z-index:300; background:rgba(28,31,76,.95);
  display:flex; align-items:center; justify-content:center; padding:40px 20px;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.video-modal-overlay.open{ opacity:1; visibility:visible; }
.video-modal-box{ width:100%; max-width:420px; aspect-ratio:9/16; border-radius: var(--radius-sm); overflow:hidden; background:#000; box-shadow:0 30px 70px -20px rgba(0,0,0,.6); }
.video-modal-box iframe, .video-modal-box video{ width:100%; height:100%; border:none; display:block; }
.reel-card{ cursor:pointer; }


@media (max-width: 1080px){
  .cat-grid{ grid-template-columns:repeat(4,1fr); }
  .pro-grid{ grid-template-columns:repeat(2,1fr); }
  .results-layout{ grid-template-columns:1fr; }
  .filter-panel{ position:static; }
  .profile-layout{ grid-template-columns:1fr; }
  .quote-layout{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:repeat(3,1fr); }
  .auth-shell{ grid-template-columns:1fr; }
  .auth-visual{ display:none; }
  .city-icon-grid{ grid-template-columns:repeat(3,1fr); }
  .reel-grid{ grid-template-columns:repeat(4,1fr); }
  .supplier-grid{ grid-template-columns:repeat(3,1fr); }
  .service-list{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid{ grid-template-columns:repeat(3,1fr); }
  .ad-leaderboard{ max-width:468px; min-height:60px; }
}

@media (max-width: 860px){
  .topbar{ display:none; }
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .site-header{ border-radius: var(--radius-md); margin:14px 16px 0; }
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .hero::after{ width:60%; }
  .quote-box .crop-card{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr 1fr; row-gap:30px; }
  .step-line{ display:none; }
  .split-cta{ grid-template-columns:1fr; }
  .testi-grid{ grid-template-columns:1fr; }
  .cat-grid{ grid-template-columns:repeat(3,1fr); }
  .result-card{ grid-template-columns:1fr; }
  .result-actions{ flex-direction:row; }
  .area-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:repeat(2,1fr); }
  .profile-hero .wrap{ flex-direction:column; }
  .profile-actions{ width:100%; }
  .profile-actions .btn{ flex:1; }
  .option-grid{ grid-template-columns:repeat(2,1fr); }
  .form-row{ grid-template-columns:1fr; }
  .service-list{ grid-template-columns:1fr 1fr; }
  .city-stats{ flex-wrap:wrap; }
  .city-stats div{ flex: 1 1 50%; border-bottom:1px solid rgba(237,235,217,.22); }
  .supplier-grid{ grid-template-columns:repeat(2,1fr); }
  .upload-grid{ grid-template-columns:1fr; }
  .b2b-strip ul{ justify-content:flex-start; }
  .city-icon-grid{ grid-template-columns:repeat(3,1fr); }
  .blog-featured{ grid-template-columns:1fr; }
  .blog-featured-body{ padding:24px; }
  .blog-grid{ grid-template-columns:repeat(2,1fr); }
  .deal-grid{ grid-template-columns:repeat(2,1fr); }
  .reel-grid{ grid-template-columns:repeat(3,1fr); }
  .influencer-grid{ grid-template-columns:repeat(2,1fr); }
  .promo-grid{ grid-template-columns:1fr 1fr; }
  .ad-leaderboard{ max-width:100%; min-height:90px; }
  .ad-rectangle{ max-width:300px; }
  .lightbox-arrow{ width:38px; height:38px; }
  .lightbox-close{ top:14px; right:14px; }
}

@media (max-width: 560px){
  .section{ padding:56px 0; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .pro-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .quote-box .crop-card{ grid-template-columns:1fr; }
  .hero-stats{ flex-wrap:wrap; row-gap:14px; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .stat-strip{ grid-template-columns:1fr; }
  .option-grid{ grid-template-columns:1fr; }
  .quote-form-card{ padding:26px; }
  .qp-connector{ width:24px; }
  .area-grid{ grid-template-columns:1fr; }
  .supplier-grid{ grid-template-columns:1fr 1fr; }
  .b2b-strip ul{ flex-direction:column; align-items:flex-start; gap:12px; }
  .city-icon-grid{ grid-template-columns:repeat(2,1fr); }
  .blog-grid{ grid-template-columns:1fr; }
  .deal-grid{ grid-template-columns:1fr; }
  .reel-grid{ grid-template-columns:repeat(2,1fr); }
  .influencer-grid{ grid-template-columns:1fr; }
  .promo-grid{ grid-template-columns:1fr; }
  .deal-hero-banner{ padding:28px; }
  .newsletter-box{ padding:28px; }
  .ad-unit{ padding:16px 12px; min-height:80px; }
  .ad-leaderboard, .ad-rectangle, .ad-native{ max-width:100%; }
  .ad-infeed{ flex-direction:column; padding:16px; }
  .lightbox-arrow{ width:34px; height:34px; }
  .lightbox-arrow.prev{ left:6px; } .lightbox-arrow.next{ right:6px; }
  .lightbox-close{ top:10px; right:10px; width:34px; height:34px; }
  .lightbox-counter{ bottom:10px; }
}