/* ============================================================
   VICTORIA DIRECTORY — Global Stylesheet
   Color: #1a6b5a (Green/Teal) + #181f1e (Dark)
   Font: Outfit + Playfair Display
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:wght@700;800&display=swap');

/* Theme tokens (:root design variables) are now generated from config/theme.php
   and injected via resources/views/partials/theme.blade.php so they can be
   overridden from the admin Appearance page. See App\Support\Theme. */

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--ff); color:var(--td); background:var(--bg); line-height:1.65; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; object-fit:cover; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button,input,select,textarea { font-family:var(--ff); }
button { cursor:pointer; background:none; border:none; }

/* ── Layout ── */
.wrap { width:100%; max-width:1400px; margin:0 auto; padding:0 24px; }
.tc  { text-align:center; }

/* ── Section Labels ── */
.sec-tag {
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--p); background:rgba(26,107,90,.08);
  padding:5px 16px; border-radius:50px; border:1px solid rgba(26,107,90,.2);
  margin-bottom:10px;
}
.sec-tag .dot { width:6px; height:6px; border-radius:50%; background:var(--p); }
.sec-h  { font-family:var(--fh); font-size:clamp(26px,4vw,42px); font-weight:800; color:var(--td); line-height:1.18; margin-bottom:12px; }
.sec-h span { color:var(--p); }
.sec-sub { font-size:15px; color:var(--mu); max-width:530px; line-height:1.85; }
.tc .sec-sub { margin:0 auto; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:700; border-radius:var(--rad-sm); padding:12px 26px; transition:var(--tr); border:none; cursor:pointer; }
.btn-primary  { background:var(--p); color:#fff; }
.btn-primary:hover  { background:var(--pd); transform:translateY(-2px); box-shadow:0 8px 24px rgba(26,107,90,.35); }
.btn-outline  { background:transparent; color:var(--p); border:2px solid var(--p); }
.btn-outline:hover  { background:var(--p); color:#fff; transform:translateY(-2px); }
.btn-dark     { background:var(--blk); color:#fff; }
.btn-dark:hover     { background:#222; transform:translateY(-2px); }
.btn-white    { background:#fff; color:var(--blk); }
.btn-white:hover    { background:var(--bgs); transform:translateY(-2px); }
.btn-success  { background:var(--success); color:#fff; }
.btn-success:hover  { background:#059669; transform:translateY(-2px); }
.btn-sm  { padding:8px 18px; font-size:13px; }
.btn-lg  { padding:15px 34px; font-size:16px; }
.btn-block { width:100%; justify-content:center; }

/* ── Forms ── */
.form-group   { margin-bottom:20px; }
.form-label   { display:block; font-size:14px; font-weight:600; color:var(--td); margin-bottom:7px; }
.form-label span { color:var(--p); }
.form-control {
  width:100%; border:1.5px solid var(--br); border-radius:var(--rad-sm);
  padding:12px 16px; font-size:14.5px; color:var(--td);
  font-family:var(--ff); outline:none; transition:var(--tr); background:var(--bgw);
}
.form-control:hover { border-color:var(--br2); }
.form-control:focus { border-color:var(--p); box-shadow:0 0 0 3px rgba(26,107,90,.10); }
.form-control::placeholder { color:#bbb; }
textarea.form-control { resize:vertical; min-height:120px; }
select.form-control {
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23777' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;
}
.form-hint  { font-size:12.5px; color:var(--mu); margin-top:5px; }
.form-error { font-size:12.5px; color:var(--p); margin-top:5px; }
.input-icon { position:relative; }
.input-icon svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; stroke:var(--mu); stroke-width:2; fill:none; }
.input-icon .form-control { padding-left:42px; }

/* ── Badge ── */
.badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:50px; }
.badge-red    { background:var(--p);       color:#fff; }
.badge-green  { background:var(--success); color:#fff; }
.badge-orange { background:#ff9800;        color:#fff; }
.badge-purple { background:#9c27b0;        color:#fff; }
.badge-blue   { background:var(--info);    color:#fff; }
.badge-gray   { background:#e0e0e0;        color:#555; }

/* ── Stars ── */
.stars { display:flex; align-items:center; gap:2px; color:var(--warning); }
.stars .count { font-size:12px; color:var(--mu); margin-left:4px; }

/* ── Page Hero ── */
.page-hero { position:relative; height:240px; display:flex; align-items:center; overflow:hidden; background:#111; }
.page-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.4; }
.page-hero-ov { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.3) 100%); }
.page-hero-in { position:relative; z-index:2; }
.page-hero h1 { font-family:var(--fh); font-size:clamp(28px,5vw,48px); font-weight:800; color:#fff; margin-bottom:10px; }
.breadcrumb  { display:flex; align-items:center; gap:8px; font-size:14px; color:rgba(255,255,255,.6); flex-wrap:wrap; }
.breadcrumb a { color:rgba(255,255,255,.6); transition:var(--tr); }
.breadcrumb a:hover { color:var(--p); }
.breadcrumb .sep { color:var(--p); }
.breadcrumb .cur { color:#fff; font-weight:500; }

/* ── Scroll Animations ── */
.anim { opacity:0; transform:translateY(28px); transition:opacity .6s ease,transform .6s ease; }
.anim.d1{transition-delay:.08s} .anim.d2{transition-delay:.16s} .anim.d3{transition-delay:.24s}
.anim.d4{transition-delay:.32s} .anim.d5{transition-delay:.40s} .anim.d6{transition-delay:.48s}
.anim.in { opacity:1; transform:none; }
.anim-left  { opacity:0; transform:translateX(-40px); transition:opacity .65s ease,transform .65s ease; }
.anim-left.in  { opacity:1; transform:none; }
.anim-right { opacity:0; transform:translateX(40px);  transition:opacity .65s ease,transform .65s ease; }
.anim-right.in { opacity:1; transform:none; }

/* ══════════ NAVBAR ══════════ */
.nav {
  position:fixed; top:0; left:0; right:0; width:100%; z-index:999; height:76px;
  display:flex; align-items:center;
  background:var(--header-bg);
  border-bottom:1px solid var(--br);
  box-shadow:var(--sh-s); transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.nav { height:86px; }
/* .nav{ */
	/* background:tranparent; */
/* } */
/* ── Initial state (kept solid so the bar is always visible) ── */
.nav.transparent {
  background:var(--header-bg);
  backdrop-filter:blur(14px);
  border-color:transparent;
  box-shadow:0 2px 18px rgba(0,0,0,.18);
}
.nav.transparent .nltxt        { color:#fff; }
.nav.transparent .nltxt em     { color:var(--ac); }
.nav.transparent .nlinks a     { color:rgba(255,255,255,.85); }
.nav.transparent .nlinks a:hover,
.nav.transparent .nlinks a.act { color:#fff; background:rgba(255,255,255,.15); }
.nav.transparent .nsign        { color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.35); }
.nav.transparent .nsign:hover  { background:rgba(255,255,255,.1); color:#fff; }
.nav.transparent .nadd         { background:var(--ac); color:#1f2937; }
.nav.transparent .nadd:hover   { background:#e6c450; color:#1f2937; }
.nav.transparent .hbg span     { background:#fff; }

nav.nav, .nav.dash-nav{
  background:var(--header-bg);
}
.nav.dash-nav{

}
/* ── Scrolled state (dark frosted bar) ── */
.nav.scrolled {
  background:var(--header-bg);
  backdrop-filter:blur(14px);
  border-color:transparent;
  box-shadow:0 2px 24px rgba(0,0,0,.35);
}
.nav.scrolled .nltxt        { color:#fff; }
.nav.scrolled .nltxt em     { color:var(--ac); }
.nav.scrolled .nlinks a     { color:var(--header-link); }
.nav.scrolled .nlinks a:hover,
.nav.scrolled .nlinks a.act { color:var(--header-hover); background:rgba(255,255,255,.1); }
.nav.scrolled .nsign        { color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.25); }
.nav.scrolled .nsign:hover  { background:rgba(255,255,255,.08); color:#fff; }
.nav.scrolled .nadd         { background:var(--ac); color:#1f2937; }
.nav.scrolled .hbg span     { background:#fff; }

.nav .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; }
.nlogo  { display:flex; align-items:center; gap:10px; flex-shrink:0; }
/* Brand logo (image) */
.logo-chip { display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:12px; padding:6px 16px; line-height:0; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.logo-chip img { height:66px; width:auto; display:block; }
.dash-logo-img { height:52px; width:auto; display:block; }
.ft-logo .logo-chip { padding:8px 14px; }
.ft-logo .logo-chip img { height:56px; }
.nlbox  { width:38px; height:38px; border-radius:9px; background:var(--p); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--fh); font-size:19px; font-weight:800; flex-shrink:0; }
.nltxt  { font-family:var(--fh); font-size:19px; font-weight:800; color:var(--bgw); white-space:nowrap; transition:color .3s; }
.nltxt em { color:var(--p); font-style:normal; }
.nlinks { display:flex; gap:2px; flex:1; justify-content:center; }
.nlinks a { font-size:13.5px; font-weight:500; color:var(--header-link); padding:7px 12px; border-radius:var(--rad-sm); transition:var(--tr); white-space:nowrap; }
.nlinks a:hover,.nlinks a.act { color:var(--header-hover); background:rgba(255,255,255,.12); }
.nact   { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nsign  { font-size:13px; font-weight:600; color:#fff; padding:8px 16px; border-radius:var(--rad-sm); border:1.5px solid rgba(255,255,255,.4); transition:var(--tr); display:flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap; }
.nsign:hover { background:rgba(255,255,255,.15); color:#fff; border-color:rgba(255,255,255,.7); }
.nadd   { font-size:13.5px; font-weight:800; background:var(--ac); color:#1f2937; padding:11px 24px; border-radius:var(--rad-sm); transition:var(--tr); display:flex; align-items:center; gap:6px; white-space:nowrap; letter-spacing:.02em; box-shadow:0 4px 14px rgba(212,175,55,.4); }
.nadd:hover { background:#e6c450; color:#1f2937; box-shadow:0 6px 20px rgba(212,175,55,.55); transform:translateY(-1px); }
.hbg    { display:none; flex-direction:column; gap:5px; padding:8px; cursor:pointer; background:none; border:none; flex-shrink:0; }
.hbg span { width:22px; height:2px; background:var(--td); border-radius:2px; display:block; transition:background .3s; }

/* ── Mobile Nav Drawer ── */
.mob { display:none; position:fixed; inset:0; z-index:1100; background:rgba(0,0,0,.55); opacity:0; transition:opacity .28s; }
.mob.op { display:block; opacity:1; }
.mob-panel {
  position:absolute; top:0; left:0; width:290px; height:100%;
  background:#fff; padding:0; overflow-y:auto;
  transform:translateX(-100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.mob.op .mob-panel { transform:none; }
.mob-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--br);
}
.mob-panel a {
  display:flex; align-items:center; gap:10px;
  padding:13px 20px; font-size:15px; font-weight:500; color:var(--tm);
  border-bottom:1px solid var(--br); transition:var(--tr);
}
.mob-panel a:hover { color:var(--p); background:rgba(26,107,90,.05); padding-left:26px; }
.mob-panel .mob-add {
  margin:16px 20px 0; display:flex; align-items:center; justify-content:center;
  background:var(--p); color:#fff; padding:13px; border-radius:var(--rad-sm);
  font-weight:700; border-bottom:none; border-radius:10px;
}
.mob-panel .mob-add:hover { background:var(--pd); padding-left:20px; }
.mob-cls {
  width:34px; height:34px; border-radius:50%; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--mu); cursor:pointer; border:none;
  flex-shrink:0; transition:var(--tr);
}
.mob-cls:hover { background:var(--br); color:var(--td); }

/* ── Ticker ── */
.ticker-wrap { background:var(--p); padding:11px 0; overflow:hidden; white-space:nowrap; }
.ticker-inner { display:inline-flex; animation:ticker 30s linear infinite; }
.ticker-inner:hover { animation-play-state:paused; }
.ti { display:inline-flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.92); padding:0 28px; }
.ti .sep { color:rgba(255,255,255,.4); }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── Listing Card (shared) ── */
.lcard { background:var(--bgw); border-radius:var(--rad); overflow:hidden; border:1px solid var(--br); transition:var(--tr); display:flex; flex-direction:column; position:relative; }
.lcard:hover { transform:translateY(-5px); box-shadow:var(--sh-l); border-color:transparent; }
.lcard-img  { position:relative; height:200px; overflow:hidden; background:#eee; flex-shrink:0; }
.lcard-img img { width:100%; height:100%; transition:transform .5s ease; }
.lcard:hover .lcard-img img { transform:scale(1.06); }
.lcard-avatar { position:absolute; bottom:-18px; left:16px; width:36px; height:36px; border-radius:50%; border:3px solid #fff; overflow:hidden; background:#ddd; box-shadow:0 2px 8px rgba(0,0,0,.15); z-index:2; }
.lcard-avatar img { width:100%; height:100%; }
.lcard-body  { padding:28px 16px 16px; flex:1; display:flex; flex-direction:column; }
.lcard-title { font-size:15.5px; font-weight:700; color:var(--td); line-height:1.35; margin-bottom:10px; transition:var(--tr); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lcard:hover .lcard-title { color:var(--p); }
.lcard-meta  { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.lmeta-item  { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--mu); }
.lmeta-item svg { width:14px; height:14px; stroke:var(--mu); stroke-width:2; fill:none; flex-shrink:0; }
.lcard-price { font-size:16px; font-weight:800; color:var(--td); margin-top:auto; border-top:1px solid var(--br); padding-top:12px; }
.lfav-btn    { position:absolute; bottom:14px; right:14px; width:32px; height:32px; border-radius:50%; background:var(--bg); border:1.5px solid var(--br); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--tr); }
.lfav-btn:hover { background:var(--p); border-color:var(--p); }
.lfav-btn svg { width:14px; height:14px; stroke:#aaa; fill:none; stroke-width:2; transition:var(--tr); }
.lfav-btn:hover svg { stroke:#fff; }
.lfav-btn.active { background:rgba(26,107,90,.08); border-color:var(--p); }
.lfav-btn.active svg { stroke:var(--p); fill:var(--p); }

/* ── Filter Sidebar (shared) ── */
.filter-box { background:var(--bgw); border:1px solid var(--br); border-radius:var(--rad); overflow:hidden; }
.filter-hd  { padding:16px 20px; border-bottom:1px solid var(--br); display:flex; align-items:center; justify-content:space-between; }
.filter-hd h3 { font-size:16px; font-weight:800; color:var(--td); }
.filter-hd .reset-btn { font-size:12px; font-weight:600; color:var(--p); cursor:pointer; display:flex; align-items:center; gap:4px; }
.filter-body { padding:18px 20px; display:flex; flex-direction:column; gap:16px; }
.f-label { font-size:13px; font-weight:700; color:var(--td); margin-bottom:6px; display:flex; align-items:center; justify-content:space-between; }
.f-label .f-reset { font-size:11px; font-weight:600; color:var(--p); cursor:pointer; }
.f-search { display:flex; align-items:center; gap:10px; border:1.5px solid var(--br); border-radius:var(--rad-sm); padding:10px 14px; transition:var(--tr); background:var(--bg); }
.f-search:focus-within { border-color:var(--p); background:#fff; }
.f-search svg { width:16px; height:16px; stroke:var(--mu); stroke-width:2; fill:none; flex-shrink:0; }
.f-search input { border:none; outline:none; font-size:14px; color:var(--td); background:transparent; width:100%; font-family:var(--ff); }
.f-search input::placeholder { color:#bbb; }
.f-select {
  width:100%; border:1.5px solid var(--br); border-radius:var(--rad-sm);
  padding:11px 36px 11px 14px; font-size:14px; color:var(--tm);
  outline:none; appearance:none; font-family:var(--ff); cursor:pointer; transition:var(--tr);
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23777' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.f-select:hover,.f-select:focus { border-color:var(--p); background-color:#fff; }
.range-slider { -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:2px; background:linear-gradient(to right,var(--p) 0%,var(--p) 30%,#e0e0e0 30%); outline:none; cursor:pointer; }
.range-slider::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--p); cursor:pointer; border:3px solid #fff; box-shadow:0 2px 6px rgba(26,107,90,.4); }
.range-values { display:flex; justify-content:space-between; font-size:12px; color:var(--mu); margin-top:6px; }
.f-checks { display:flex; flex-direction:column; gap:10px; }
.f-check  { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; color:var(--tm); }
.f-check input[type=checkbox] { width:17px; height:17px; border-radius:4px; cursor:pointer; accent-color:var(--p); flex-shrink:0; }
.f-apply  { width:100%; padding:13px; background:var(--p); color:#fff; font-size:15px; font-weight:700; border-radius:var(--rad-sm); border:none; cursor:pointer; transition:var(--tr); font-family:var(--ff); }
.f-apply:hover { background:var(--pd); box-shadow:0 6px 20px rgba(26,107,90,.35); }

/* ── Pagination ── */
.pagination { display:flex; align-items:center; gap:6px; margin-top:30px; justify-content:center; }
.ppage { width:38px; height:38px; border-radius:var(--rad-sm); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; cursor:pointer; transition:var(--tr); border:1.5px solid var(--br); color:var(--tm); background:var(--bgw); }
.ppage:hover { border-color:var(--p); color:var(--p); }
.ppage.act   { background:var(--p); color:#fff; border-color:var(--p); box-shadow:0 4px 14px rgba(26,107,90,.3); }
.ppage.arrow { font-size:18px; }
.ppage.disabled { opacity:.4; cursor:default; pointer-events:none; }
.ppage.disabled:hover { border-color:var(--br); color:var(--tm); }
.ppage.gap   { border:none; background:transparent; cursor:default; pointer-events:none; width:auto; min-width:24px; color:var(--mu); }
.ppage.gap:hover { color:var(--mu); }
@media(max-width:480px){ .pagination { flex-wrap:wrap; } .ppage { width:34px; height:34px; font-size:13px; } }

/* ── Tag Pills ── */
.tag-cloud { display:flex; flex-wrap:wrap; gap:7px; }
.tag-pill  { font-size:12.5px; color:var(--tm); background:var(--bg); border:1.5px solid var(--br); padding:5px 13px; border-radius:50px; cursor:pointer; transition:var(--tr); }
.tag-pill:hover { border-color:var(--p); color:var(--p); background:rgba(26,107,90,.04); }

/* ── Alert ── */
.alert { padding:14px 18px; border-radius:var(--rad-sm); font-size:14px; font-weight:500; display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.alert-success { background:rgba(16,185,129,.1); color:#059669; border:1px solid rgba(16,185,129,.25); }
.alert-error   { background:rgba(26,107,90,.1);   color:var(--pd); border:1px solid rgba(26,107,90,.25); }
.alert-info    { background:rgba(59,130,246,.1);   color:#2563eb;  border:1px solid rgba(59,130,246,.25); }

/* ══════════ FOOTER ══════════ */
footer { position:relative; background:linear-gradient(180deg,#10201d 0%,var(--blk) 55%,#0d1413 100%); color:rgba(255,255,255,.65); }
footer::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--p) 0%,var(--ac) 55%,transparent 100%); }
footer::after { content:''; position:absolute; top:0; right:8%; width:480px; height:300px; background:radial-gradient(closest-side,rgba(15,118,110,.18),transparent 70%); pointer-events:none; }
.ft-top  { position:relative; z-index:1; padding:72px 0 48px; }
.ft-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:50px; }
.ft-logo { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.ft-lb   { width:38px; height:38px; border-radius:9px; background:var(--p); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--fh); font-size:19px; font-weight:800; }
.ft-ltxt { font-family:var(--fh); font-size:19px; font-weight:800; color:#fff; }
.ft-desc { font-size:13.5px; line-height:1.85; max-width:280px; margin-bottom:22px; color:rgba(255,255,255,.55); }
.soc     { display:flex; gap:9px; margin-top:22px; }
.soc a   { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); transition:var(--tr); }
.soc a:hover { background:var(--p); border-color:var(--p); color:#fff; transform:translateY(-3px); box-shadow:0 8px 18px rgba(15,118,110,.35); }
.ft-col h4 { font-size:12px; font-weight:700; color:#fff; margin-bottom:18px; text-transform:uppercase; letter-spacing:.1em; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.08); position:relative; }
.ft-col h4::after { content:''; position:absolute; bottom:-1px; left:0; width:34px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--p),var(--ac)); }
.ft-col ul li { margin-bottom:10px; }
.ft-col ul li a { font-size:13.5px; color:rgba(255,255,255,.5); transition:var(--tr); display:flex; align-items:center; gap:7px; }
.ft-col ul li a::before { content:'›'; color:var(--ac); font-size:15px; transition:var(--tr); }
.ft-col ul li a:hover { color:#fff; padding-left:4px; }
.ft-col ul li a:hover::before { color:var(--p); }
.ft-nl   { display:flex; border-radius:var(--rad-sm); overflow:hidden; margin-top:8px; border:1px solid rgba(255,255,255,.12); transition:var(--tr); }
.ft-nl:focus-within { border-color:var(--p); box-shadow:0 0 0 3px rgba(15,118,110,.2); }
.ft-nl input { flex:1; background:rgba(255,255,255,.05); border:none; padding:12px 14px; font-size:13.5px; color:#fff; outline:none; font-family:var(--ff); }
.ft-nl input::placeholder { color:rgba(255,255,255,.3); }
.ft-nl button { background:var(--p); color:#fff; border:none; padding:0 20px; font-size:13px; font-weight:700; cursor:pointer; font-family:var(--ff); white-space:nowrap; transition:var(--tr); }
.ft-nl button:hover { background:var(--pd); }
.ft-cats { position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.08); padding:22px 0; }
.ft-cats .wrap { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ft-cats-lbl   { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:rgba(255,255,255,.35); white-space:nowrap; }
.ft-cats-pills { display:flex; gap:8px; flex-wrap:wrap; }
.ft-cats-pills a { font-size:12px; color:rgba(255,255,255,.5); background:rgba(255,255,255,.05); padding:6px 15px; border-radius:50px; border:1px solid rgba(255,255,255,.1); transition:var(--tr); }
.ft-cats-pills a:hover { color:#fff; background:var(--p); border-color:var(--p); transform:translateY(-2px); }
.ft-bot  { position:relative; z-index:1; background:rgba(0,0,0,.35); border-top:1px solid rgba(255,255,255,.06); padding:18px 0; }
.ft-bot .wrap { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.ft-bot p { font-size:13px; color:rgba(255,255,255,.4); }
.fbl     { display:flex; gap:22px; }
.fbl a   { font-size:13px; color:rgba(255,255,255,.4); transition:var(--tr); }
.fbl a:hover { color:var(--ac); }

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:1100px) { .ft-grid { grid-template-columns:1fr 1fr; gap:36px; } }
@media(max-width:768px)  {
  .nlinks,.nadd,.nsign { display:none; }
  .hbg { display:flex; }
  .nav .wrap { gap:10px; }
  .ft-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .ft-cats .wrap { flex-direction:column; align-items:flex-start; }
  .ft-bot .wrap  { flex-direction:column; text-align:center; }
}
@media(max-width:480px)  {
  .wrap { padding:0 16px; }
  .ft-grid { grid-template-columns:1fr; }
  .fbl { flex-direction:column; gap:10px; }
}

/* ══════════ HERO SECTION ══════════ */
.hero {
  position:relative; min-height:580px; display:flex; align-items:center;
  background:#0d2b24; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  animation:heroZoom 18s ease-in-out infinite alternate;
}
@keyframes heroZoom { from{transform:scale(1)} to{transform:scale(1.06)} }
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(10,40,30,.85) 0%,rgba(15,50,38,.6) 60%,rgba(26,107,90,.15) 100%);
}
.hero-inner {
  position:relative; z-index:2; padding:100px 0 70px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.1); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2); border-radius:50px;
  padding:7px 18px; font-size:13px; font-weight:600; color:rgba(255,255,255,.9);
  margin-bottom:26px; letter-spacing:.04em;
}
.hero-badge .hb-dot {
  width:8px; height:8px; border-radius:50%; background:#4ade80;
  box-shadow:0 0 0 2px rgba(74,222,128,.3); animation:pulse 2s infinite;
}
@keyframes pulse { 0%,100%{box-shadow:0 0 0 2px rgba(74,222,128,.3)} 50%{box-shadow:0 0 0 6px rgba(74,222,128,.1)} }
.hero-inner h1 {
  font-family:var(--fh); font-size:clamp(30px,5.5vw,60px); font-weight:800;
  color:#fff; line-height:1.12; margin-bottom:18px; max-width:820px;
}
.hero-inner h1 em { color:var(--ac); font-style:normal; }
.hero-inner p {
  font-size:clamp(15px,2vw,18px); color:rgba(255,255,255,.75);
  max-width:520px; line-height:1.85; margin-bottom:36px;
}
.hero-srch {
  display:flex; align-items:center; gap:0;
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.25); width:100%; max-width:700px;
  border:2px solid rgba(255,255,255,.2);
}
.hs-grp {
  display:flex; align-items:center; gap:10px; flex:1;
  padding:14px 18px; border-right:1px solid var(--br);
}
.hs-grp svg { width:18px; height:18px; stroke:var(--mu); stroke-width:2; fill:none; flex-shrink:0; }
.hs-grp input {
  border:none; outline:none; font-size:15px; color:var(--td);
  background:transparent; width:100%; font-family:var(--ff);
}
.hs-grp input::placeholder { color:#bbb; }
.hs-btn {
  background:var(--p); color:#fff; border:none; padding:0 28px;
  font-size:15px; font-weight:700; cursor:pointer; font-family:var(--ff);
  height:56px; white-space:nowrap; transition:var(--tr); display:flex; align-items:center; gap:8px;
}
.hs-btn:hover { background:var(--pd); }
.hero-pop {
  display:flex; align-items:center; gap:10px; margin-top:22px; flex-wrap:wrap; justify-content:center;
}
.hero-pop span { font-size:13px; color:rgba(255,255,255,.5); }
.hero-pop a {
  font-size:13px; color:rgba(255,255,255,.8); background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2); padding:5px 14px; border-radius:50px;
  transition:var(--tr); backdrop-filter:blur(4px);
}
.hero-pop a:hover { background:var(--p); border-color:var(--p); color:#fff; }
.hero-stats-bar {
  display:flex; align-items:stretch; justify-content:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
  border-radius:14px;
  max-width:760px; margin:40px auto 0;
  overflow:hidden;
}
.hstat { flex:1; padding:22px 24px; text-align:center; border-right:1px solid rgba(255,255,255,.12); }
.hstat:last-child { border-right:none; }
.hstat strong { display:block; font-family:var(--fh); font-size:32px; font-weight:700; color:#fff; }
.hstat span { font-size:12px; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.07em; }

/* ── Sub-page Hero (compact) ── */
.hero.compact { min-height:380px; }
.hero.compact .hero-inner { padding:80px 0 50px; }
.hero.compact h1 { font-size:clamp(26px,4vw,46px); }

/* ══════════ GHOST TEXT / SECTION LABELS ══════════ */
.ghost-label {
  position:relative; display:inline-block; margin-bottom:8px;
}
.ghost-txt {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-52%);
  font-size:clamp(52px,7vw,90px); font-weight:700;
  color:rgba(26,107,90,.06); white-space:nowrap; pointer-events:none;
  font-family:var(--fh); line-height:1; z-index:0; user-select:none;
}
.real-tag {
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--p); background:rgba(26,107,90,.10);
  padding:5px 16px; border-radius:40px; border:1px solid rgba(26,107,90,.18);
}
.real-tag .dot { width:6px; height:6px; border-radius:50%; background:var(--p); }

/* ── Hero responsive ── */
@media(max-width:768px) {
  .hero { min-height:520px; }
  .hero-srch { flex-direction:column; border-radius:10px; max-width:100%; }
  .hs-grp { border-right:none; border-bottom:1px solid var(--br); }
  .hs-btn { width:100%; justify-content:center; padding:16px; height:auto; }
  .hero-stats-bar { flex-direction:column; border-radius:10px; }
  .hstat { border-right:none; border-bottom:1px solid rgba(255,255,255,.12); }
  .hstat:last-child { border-bottom:none; }
}
@media(max-width:480px) {
  .hero-inner h1 { font-size:26px; }
  .hstat strong { font-size:24px; }
}

/* ══════════════════════════════════════
   INDEX.HTML — FULL-PAGE HERO
══════════════════════════════════════ */
.hero-ov {
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.45) 30%,rgba(0,0,0,.70) 65%,rgba(0,0,0,.92) 100%);
}
.hero-badge .pulse {
  width:7px; height:7px; border-radius:50%; background:var(--p); flex-shrink:0;
  animation:heroPulse 1.8s ease-out infinite;
}
@keyframes heroPulse { 0%{box-shadow:0 0 0 0 rgba(26,107,90,.7)} 70%{box-shadow:0 0 0 10px rgba(26,107,90,0)} 100%{box-shadow:0 0 0 0 rgba(26,107,90,0)} }
.hero h1 .tw-wrap { color:var(--ac); display:inline-block; min-width:4ch; border-right:3px solid var(--ac); padding-right:4px; animation:blink .8s step-end infinite; }
@keyframes blink { 0%,100%{border-color:var(--ac)} 50%{border-color:transparent} }
.hero-lead { font-size:17px; color:rgba(255,255,255,.7); max-width:540px; margin:0 auto 36px; font-weight:300; line-height:1.8; }
.hero-tags { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:50px; }
.hero-tags .lbl { font-size:13px; color:rgba(255,255,255,.5); }
.htag { font-size:13px; color:rgba(255,255,255,.8); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); padding:5px 15px; border-radius:50px; cursor:pointer; transition:var(--tr); }
.htag:hover { background:var(--p); border-color:var(--p); color:#fff; }
.hero-search { width:100%; background:rgba(0,0,0,.6); backdrop-filter:blur(16px); border-top:1px solid rgba(255,255,255,.08); padding:24px 0 0; margin-top:auto; }
.srch-tabs { display:flex; gap:0; border-bottom:2px solid rgba(255,255,255,.1); margin-bottom:18px; overflow-x:auto; padding:0 4px; }
.stab { font-size:14px; font-weight:600; color:rgba(255,255,255,.45); padding:10px 24px; cursor:pointer; transition:var(--tr); border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap; }
.stab.act { color:#fff; border-bottom-color:var(--p); }
.stab:hover { color:rgba(255,255,255,.85); }
.sbox { background:#fff; border-radius:8px; display:flex; align-items:stretch; overflow:visible; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.sf { border-radius:8px 0 0 8px; }
.sbtn { border-radius:0 8px 8px 0; }
.sf { display:flex; align-items:center; gap:10px; flex:1; padding:0 22px; min-width:0; }
.sf svg { flex-shrink:0; color:#aaa; }
.sf input { border:none; outline:none; font-size:15px; color:#111; width:100%; padding:20px 0; font-family:var(--ff); }
.sf input::placeholder { color:#bbb; }
.sdv { width:1px; align-self:stretch; background:#eee; margin:12px 0; flex-shrink:0; }
.ss { display:flex; align-items:center; gap:8px; padding:0 18px; flex-shrink:0; transition:var(--tr); }
.ss svg { color:#aaa; flex-shrink:0; transition:var(--tr); }
.ss:hover svg { color:var(--p); }
.ss select { border:none; outline:none; font-size:14.5px; font-weight:600; color:#444; background:transparent; cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none; font-family:var(--ff); padding:20px 30px 20px 0; min-width:160px; max-width:210px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 4px center; background-size:15px; transition:var(--tr); }
.ss select:hover, .ss select:focus { color:var(--p); }
.ss select option { color:#333; font-weight:500; background:#fff; padding:10px 14px; }
.ss select option:first-child { color:#888; }
.ss select option:checked { color:var(--p); font-weight:600; }
/* custom dropdown (padded option list) */
.cdd { position:relative; }
.cdd-btn { display:flex; align-items:center; justify-content:space-between; gap:10px; border:none; background:transparent; cursor:pointer; font-family:var(--ff); font-size:14.5px; font-weight:600; color:#444; padding:20px 30px 20px 0; min-width:160px; max-width:210px; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 4px center; background-size:15px; transition:var(--tr); }
.cdd-btn .cdd-lbl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cdd-btn:hover, .cdd.open .cdd-btn { color:var(--p); }
.cdd.open .cdd-btn { background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f57c00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E"); }
.cdd-menu { position:absolute; top:calc(100% + 12px); left:-14px; min-width:240px; max-height:330px; overflow-y:auto; list-style:none; margin:0; padding:8px; background:#fff; border:1px solid #eef0f3; border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.16); z-index:60; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .18s ease, transform .18s ease, visibility .18s; }
.cdd.open .cdd-menu { opacity:1; visibility:visible; transform:translateY(0); }
.cdd-opt { padding:11px 16px; margin:1px 0; border-radius:8px; font-size:14px; font-weight:500; color:#444; cursor:pointer; white-space:nowrap; transition:background .12s ease, color .12s ease; }
.cdd-opt:hover { background:#f4f6f9; color:var(--p); }
.cdd-opt.sel { background:var(--p); color:#fff; font-weight:600; }
.cdd-menu::-webkit-scrollbar { width:8px; }
.cdd-menu::-webkit-scrollbar-thumb { background:#d8dde3; border-radius:8px; }
.sbtn { background:var(--p); color:#fff; padding:0 40px; font-size:15px; font-weight:800; display:flex; align-items:center; gap:9px; transition:var(--tr); border:none; cursor:pointer; letter-spacing:.02em; flex-shrink:0; min-height:64px; }
.sbtn:hover { background:var(--pd); }
.hero-stats { display:flex; margin-top:20px; border-top:1px solid rgba(255,255,255,.08); }
.hst { flex:1; text-align:center; padding:14px 10px; border-right:1px solid rgba(255,255,255,.08); }
.hst:last-child { border-right:none; }
.hst strong { display:block; font-family:var(--fh); font-size:26px; font-weight:800; color:#fff; }
.hst span { font-size:11px; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.09em; }

/* ══════════════════════════════════════
   SECTION HEADERS (index.html names)
══════════════════════════════════════ */
.sec-head { margin-bottom:60px; }
.stag { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--p); background:rgba(26,107,90,.08); padding:5px 16px; border-radius:50px; border:1px solid rgba(26,107,90,.20); }
.stag .dot { width:6px; height:6px; border-radius:50%; background:var(--p); flex-shrink:0; }
.sh { font-family:var(--fh); font-size:clamp(28px,4vw,44px); font-weight:800; color:var(--td); line-height:1.18; margin-bottom:12px; }
.sh span { color:var(--p); }
.sh-line { display:inline-block; position:relative; }
.sh-line::after { content:''; position:absolute; bottom:-9px; left:0; width:52px; height:3px; background:var(--p); border-radius:2px; }
.tc .sh-line::after { left:50%; transform:translateX(-50%); }
.ssub { font-size:15px; color:var(--mu); max-width:530px; line-height:1.85; }
.tc .ssub { margin:0 auto; }
.btnp { background:var(--p); color:#fff; }
.btnp:hover { background:var(--pd); transform:translateY(-2px); box-shadow:0 8px 24px rgba(26,107,90,.4); }
.btno { background:transparent; color:var(--p); border:2px solid var(--p); }
.btno:hover { background:var(--p); color:#fff; transform:translateY(-2px); }
.btnw { background:#fff; color:var(--blk); font-weight:700; }
.btnw:hover { background:var(--bgs); transform:translateY(-2px); }
.btnblk { background:var(--blk); color:#fff; }
.btnblk:hover { background:#333; transform:translateY(-2px); }

/* ══════════════════════════════════════
   CATEGORIES SECTION
══════════════════════════════════════ */
.cat-sec { padding:96px 0; background:var(--bgw); }
.cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:48px; }
.ccard { display:flex; align-items:center; gap:16px; background:#fff; border:1.5px solid var(--br); border-radius:12px; padding:20px 22px; cursor:pointer; transition:var(--tr); position:relative; overflow:hidden; }
.ccard::before { content:""; position:absolute; inset:0; background:var(--p); opacity:0; transition:var(--tr); }
.ccard:hover { border-color:var(--p); transform:translateY(-4px); box-shadow:0 12px 32px rgba(26,107,90,.18); }
.ccard:hover::before { opacity:1; }
.ccard:hover .cname,.ccard:hover .ccnt { color:#fff; }
.ci-wrap { width:54px; height:54px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; transition:var(--tr); }
.cname { font-size:15px; font-weight:700; color:var(--td); transition:var(--tr); position:relative; z-index:1; }
.ccnt { font-size:12px; color:var(--mu); transition:var(--tr); position:relative; z-index:1; margin-top:2px; }
.cat-ft { text-align:center; }
.ci-1{background:#fff3e0} .ci-2{background:#e3f2fd} .ci-3{background:#fce4ec}
.ci-4{background:#e8f5e9} .ci-5{background:#ede7f6} .ci-6{background:#e0f7fa}
.ci-7{background:#fff8e1} .ci-8{background:#fbe9e7}

/* ══════════════════════════════════════
   LISTINGS SECTION (index.html)
══════════════════════════════════════ */
.lst-sec { padding:96px 0; background:var(--bgs); }
.ftabs { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:44px; }
.ftab { font-size:13.5px; font-weight:600; color:var(--tm); background:#fff; border:1.5px solid var(--br); padding:9px 22px; border-radius:50px; cursor:pointer; transition:var(--tr); }
.ftab:hover,.ftab.act { background:var(--p); color:#fff; border-color:var(--p); box-shadow:0 4px 16px rgba(26,107,90,.3); }
.lst-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.limg { position:relative; height:196px; overflow:hidden; background:var(--bgs); flex-shrink:0; }
.limg img { width:100%; height:100%; transition:transform .5s ease; }
.lcard:hover .limg img { transform:scale(1.07); }
.lbadge { position:absolute; top:12px; left:12px; background:var(--p); color:#fff; font-size:11px; font-weight:700; padding:4px 12px; border-radius:50px; }
.lbadge-verified { display:inline-flex; align-items:center; gap:4px; background:var(--ac); color:#1f2937; text-transform:uppercase; letter-spacing:.04em; font-weight:800; box-shadow:0 2px 8px rgba(212,175,55,.35); }
.lbadge-verified svg { stroke:#1f2937; }
.limg-link { display:block; width:100%; height:100%; }
.lfav { position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--tr); box-shadow:0 2px 8px rgba(0,0,0,.1); }
.lfav:hover { background:#fff; transform:scale(1.1); }
.lfav svg { width:15px; height:15px; stroke:#e05252; fill:none; }
.lstatus { position:absolute; bottom:12px; left:12px; font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:50px; }
.sopen { background:rgba(16,185,129,.9); color:#fff; }
.sclosed { background:rgba(239,68,68,.85); color:#fff; }
.lbody { padding:18px; flex:1; display:flex; flex-direction:column; }
.lname { display:block; font-size:17.5px; font-weight:700; color:var(--td); margin-bottom:6px; text-decoration:none; transition:var(--tr); }
.lcard:hover .lname { color:var(--p); }
.ltags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px; }
.ltag { font-size:11px; font-weight:600; color:var(--p); background:rgba(26,107,90,.07); padding:3px 10px; border-radius:50px; }
.ldesc { font-size:13px; color:var(--mu); line-height:1.65; flex:1; margin-bottom:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lfoot { display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid var(--br); }
.rc { color:var(--mu); font-size:13px; margin-left:4px; }
.lnew { font-size:12.5px; }
.lloc { font-size:12px; color:var(--mu); display:flex; align-items:center; gap:3px; }
.lst-ft { text-align:center; margin-top:44px; }

/* ══════════════════════════════════════
   SMART WAY SECTION
══════════════════════════════════════ */
.smart-sec { padding:96px 0; background:#fff; }
.smart-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.smart-img-side { position:relative; }
.simg-main { border-radius:16px; overflow:hidden; height:500px; position:relative; }
.simg-main img { width:100%; height:100%; }
.simg-badge { position:absolute; top:-20px; left:-20px; background:var(--p); color:#fff; border-radius:14px; padding:18px 22px; text-align:center; box-shadow:0 12px 36px rgba(26,107,90,.45); }
.simg-badge strong { display:block; font-family:var(--fh); font-size:30px; font-weight:800; }
.simg-badge span { font-size:12px; opacity:.88; }
.simg-float { position:absolute; bottom:-20px; right:-20px; background:#fff; border-radius:14px; padding:16px 22px; box-shadow:0 20px 55px rgba(0,0,0,.16); border:1px solid var(--br); display:flex; align-items:center; gap:14px; }
.sif-ico { width:46px; height:46px; border-radius:12px; background:rgba(26,107,90,.08); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sif-ico svg { stroke:var(--p); }
.sif-num { font-family:var(--fh); font-size:22px; font-weight:800; color:var(--td); }
.sif-lbl { font-size:12px; color:var(--mu); }
.feat-list { display:flex; flex-direction:column; gap:24px; margin-top:30px; }
.fi { display:flex; gap:16px; align-items:flex-start; }
.fi-ico { width:48px; height:48px; border-radius:12px; background:rgba(26,107,90,.07); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:var(--tr); }
.fi-ico svg { stroke:var(--p); transition:var(--tr); }
.fi:hover .fi-ico { background:var(--p); }
.fi:hover .fi-ico svg { stroke:#fff; }
.fi h4 { font-size:15.5px; font-weight:700; color:var(--td); margin-bottom:5px; }
.fi p { font-size:13.5px; color:var(--mu); line-height:1.72; }

/* ══════════════════════════════════════
   MUNICIPALITIES / MAP SECTION
══════════════════════════════════════ */
.muni-sec { padding:96px 0; background:linear-gradient(180deg, var(--bg), var(--bgs)); }
.muni-layout { display:grid; grid-template-columns:.92fr 1.08fr; gap:60px; align-items:center; }
.muni-text-col { max-width:480px; }
.muni-stats { display:flex; gap:36px; margin:28px 0 26px; }
.muni-stat { display:flex; flex-direction:column; }
.muni-stat-num { font-family:var(--fh); font-size:36px; font-weight:800; color:var(--p); line-height:1; }
.muni-stat-lbl { font-size:12px; color:var(--mu); font-weight:700; margin-top:7px; text-transform:uppercase; letter-spacing:.06em; }
.muni-cta { text-decoration:none; }
.muni-map-card { background:linear-gradient(155deg,#ffffff 0%, var(--bgs) 100%); border-radius:22px; padding:30px 36px; box-shadow:var(--sh-m); border:1px solid var(--br); position:relative; overflow:hidden; }
.muni-map-card::before { content:''; position:absolute; top:-70px; right:-70px; width:220px; height:220px; background:radial-gradient(circle, rgba(29,141,224,.14), transparent 70%); border-radius:50%; pointer-events:none; }
.muni-map-card::after { content:''; position:absolute; bottom:-60px; left:-60px; width:180px; height:180px; background:radial-gradient(circle, rgba(255,192,0,.12), transparent 70%); border-radius:50%; pointer-events:none; }
.muni-map-card .muni-map { position:relative; z-index:1; }
@media(max-width:900px) {
  .muni-layout { grid-template-columns:1fr; gap:30px; }
  .muni-map-card { padding:22px; }
}
.map-container { background:#fff; border-radius:16px; padding:40px; box-shadow:var(--sh-s); border:1px solid var(--br); position:relative; max-width:900px; margin:0 auto; }
.map-svg { width:100%; height:auto; }
.map-pin { cursor:pointer; transition:var(--tr); }
.map-pin:hover .pin-circle { fill:var(--p); transform:scale(1.3); transform-origin:center; }
.map-pin:hover .pin-label { font-weight:700; fill:var(--p); }
.pin-circle { fill:#1a6b5a; transition:var(--tr); }
.pin-ring { fill:rgba(26,107,90,.22); }
.pin-label { font-family:'Outfit',sans-serif; font-size:12px; fill:#333; font-weight:500; }
.city-pills { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:32px; }
.cpill { display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--br); border-radius:50px; padding:8px 18px; cursor:pointer; transition:var(--tr); font-size:13.5px; font-weight:600; color:var(--tm); }
.cpill:hover { border-color:var(--p); color:var(--p); background:rgba(26,107,90,.04); transform:translateY(-2px); }
.cpill .cpill-dot { width:8px; height:8px; border-radius:50%; background:var(--p); flex-shrink:0; }
.cpill .cpill-cnt { font-size:11px; font-weight:500; color:var(--mu); }

/* ══════════════════════════════════════
   CTA BANNER
══════════════════════════════════════ */
.cta-sec { background:linear-gradient(135deg,rgba(12,95,87,.92) 0%,rgba(15,118,110,.86) 50%,rgba(17,94,89,.92) 100%),url("/images/hero-banner.png") center/cover no-repeat; padding:96px 0; text-align:center; position:relative; overflow:hidden; }
.cta-sec::before { content:""; position:absolute; top:-120px; right:-100px; width:420px; height:420px; background:rgba(212,175,55,.13); border-radius:50%; }
.cta-sec::after  { content:""; position:absolute; bottom:-90px; left:6%; width:320px; height:320px; background:rgba(255,255,255,.06); border-radius:50%; }
.cta-inner { position:relative; z-index:2; max-width:760px; margin:0 auto; }
.cta-ico { display:inline-flex; align-items:center; justify-content:center; width:68px; height:68px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); margin-bottom:22px; }
.cta-ico svg { width:31px; height:31px; color:var(--ac); }
.cta-inner .eyebrow { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ac); margin-bottom:14px; }
.cta-inner h2 { font-family:var(--fh); font-size:clamp(30px,5vw,52px); color:#fff; font-weight:800; line-height:1.15; margin-bottom:16px; }
.cta-sub { font-size:16.5px; line-height:1.7; color:rgba(255,255,255,.85); max-width:600px; margin:0 auto 34px; }
.cta-btns { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.cta-g { background:var(--ac); color:#1f2937; font-weight:800; padding:14px 34px; box-shadow:0 8px 24px rgba(212,175,55,.4); }
.cta-g:hover { background:#e6c450; color:#1f2937; transform:translateY(-2px); box-shadow:0 12px 30px rgba(212,175,55,.5); }
.cta-o { background:transparent; color:#fff; font-weight:700; padding:14px 34px; border:2px solid rgba(255,255,255,.55); }
.cta-o:hover { background:#fff; color:var(--p); border-color:#fff; transform:translateY(-2px); }

/* ══════════════════════════════════════
   HOW IT WORKS
══════════════════════════════════════ */
.how-sec { padding:100px 0; background:#fff; }
.how-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.how-left { position:sticky; top:100px; }
.how-left-img { border-radius:16px; overflow:hidden; height:320px; margin-top:32px; position:relative; }
.how-left-img img { width:100%; height:100%; object-fit:cover; }
.how-left-img::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(26,107,90,.35),transparent); border-radius:16px; }
.how-cta { display:flex; align-items:center; gap:14px; margin-top:10px; }
.how-cards { display:flex; flex-direction:column; gap:20px; padding-top:10px; }
.hcard { background:#fff; border:1.5px solid var(--br); border-radius:14px; padding:28px 28px 24px; position:relative; overflow:hidden; opacity:0; transform:translateX(40px); transition:opacity .6s ease,transform .6s ease,box-shadow .27s ease,border-color .27s ease; }
.hcard.in { opacity:1; transform:none; }
.hcard.d1{transition-delay:.1s} .hcard.d2{transition-delay:.22s} .hcard.d3{transition-delay:.34s} .hcard.d4{transition-delay:.46s}
.hcard:hover { border-color:var(--p); box-shadow:0 12px 36px rgba(26,107,90,.14); transform:translateX(-4px); }
.hcard-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; }
.hcard-ico { width:54px; height:54px; border-radius:14px; background:rgba(26,107,90,.09); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:var(--tr); }
.hcard:hover .hcard-ico { background:var(--p); }
.hcard:hover .hcard-ico svg { stroke:#fff; }
.hcard-ico svg { stroke:var(--p); width:26px; height:26px; stroke-width:1.8; transition:var(--tr); }
.hcard-num { font-family:var(--fh); font-size:52px; font-weight:800; color:rgba(0,0,0,.05); line-height:1; }
.hcard-line { width:40px; height:3px; background:var(--p); border-radius:2px; margin-bottom:12px; }
.hcard h4 { font-size:17px; font-weight:700; color:var(--td); margin-bottom:8px; }
.hcard p { font-size:13.5px; color:var(--mu); line-height:1.72; }

/* ══════════════════════════════════════
   ARTICLES / BLOG SECTION
══════════════════════════════════════ */
.art-sec { padding:96px 0; background:var(--bgs); }
.art-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.acard { background:#fff; border-radius:14px; overflow:hidden; border:1px solid var(--br); transition:var(--tr); cursor:pointer; }
.acard:hover { transform:translateY(-6px); box-shadow:var(--sh-l); border-color:transparent; }
.acard-img { height:200px; overflow:hidden; position:relative; background:var(--bgs); }
.acard-img img { width:100%; height:100%; transition:transform .5s ease; }
.acard:hover .acard-img img { transform:scale(1.06); }
.acat-badge { position:absolute; top:14px; left:14px; background:var(--p); color:#fff; font-size:11px; font-weight:700; padding:4px 12px; border-radius:50px; letter-spacing:.04em; text-transform:uppercase; }
.acard-body { padding:22px; }
.acard-meta { display:flex; gap:14px; margin-bottom:10px; color:var(--mu); font-size:12px; }
.acard-title { font-size:16px; font-weight:700; color:var(--td); line-height:1.42; margin-bottom:10px; transition:var(--tr); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.acard:hover .acard-title { color:var(--p); }
.acard-exc { font-size:13px; color:var(--mu); line-height:1.65; margin-bottom:16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.acard-read { font-size:13px; font-weight:700; color:var(--p); display:inline-flex; align-items:center; gap:5px; }
.art-ft { text-align:center; margin-top:50px; }
.ft-arts li { display:flex; gap:12px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.06); cursor:pointer; }
.ft-arts li:last-child { border-bottom:none; margin:0; padding:0; }
.ft-aimg { width:52px; height:52px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.ft-aimg img { width:100%; height:100%; object-fit:cover; transition:var(--tr); }
.ft-arts li:hover .ft-aimg img { transform:scale(1.08); }
.ft-atitle { font-size:13px; color:rgba(255,255,255,.65); line-height:1.5; margin-bottom:3px; transition:var(--tr); }
.ft-arts li:hover .ft-atitle { color:var(--p); }
.ft-adate { font-size:11px; color:rgba(255,255,255,.32); }
.ft-form { display:flex; flex-direction:column; gap:9px; }
.ft-form input,.ft-form textarea { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:var(--rad-sm); padding:11px 14px; font-size:13.5px; color:#fff; outline:none; transition:var(--tr); resize:none; font-family:var(--ff); }
.ft-form input::placeholder,.ft-form textarea::placeholder { color:rgba(255,255,255,.26); }
.ft-form input:focus,.ft-form textarea:focus { border-color:var(--p); background:rgba(255,255,255,.09); }
.ft-form button { background:var(--p); color:#fff; border:none; padding:12px; border-radius:var(--rad-sm); font-size:14px; font-weight:700; cursor:pointer; transition:var(--tr); font-family:var(--ff); }
.ft-form button:hover { background:var(--pd); }

/* ══════════════════════════════════════
   RESPONSIVE — Index sections
══════════════════════════════════════ */
@media(max-width:1100px) {
  .cat-grid  { grid-template-columns:repeat(2,1fr); }
  .lst-grid  { grid-template-columns:repeat(2,1fr); }
  .smart-grid{ grid-template-columns:1fr; gap:60px; }
  .simg-main { height:380px; }
  .simg-badge{ left:0; top:-14px; }
  .simg-float{ right:0; bottom:-14px; }
  .how-grid  { grid-template-columns:1fr; gap:50px; }
  .how-left  { position:static; }
  .art-grid  { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px) {
  .hero h1 { font-size:34px; }
  .sbox { flex-direction:column; border-radius:8px; }
  .sf { width:100%; border-bottom:1px solid #eee; padding:0 18px; border-radius:8px 8px 0 0; }
  .sf input { padding:16px 0; }
  .sdv { display:none; }
  .ss { width:100%; border-bottom:1px solid #eee; padding:0 18px; }
  .ss select { padding:14px 30px 14px 0; min-width:0; max-width:none; flex:1; background-position:right 0 center; }
  .cdd { flex:1; }
  .cdd-btn { padding:14px 30px 14px 0; min-width:0; max-width:none; width:100%; background-position:right 0 center; }
  .cdd-menu { left:0; right:0; min-width:0; }
  .sbtn { width:100%; justify-content:center; min-height:54px; border-radius:0 0 8px 8px; }
  .hero-stats { flex-direction:column; }
  .hst { border-right:none; border-bottom:1px solid rgba(255,255,255,.08); }
  .cat-grid  { grid-template-columns:repeat(2,1fr); }
  .lst-grid  { grid-template-columns:1fr; }
  .art-grid  { grid-template-columns:1fr; }
  .how-grid  { grid-template-columns:1fr; gap:40px; }
}
@media(max-width:480px) {
  .cat-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .city-pills{ gap:8px; }
}

/* ══════════════════════════════════════════════════════════════
   TOP MUNICIPALITIES — "Communities We Serve" layout
   (map on the RIGHT, heading + clickable municipality tags on the LEFT)
   Uses existing theme variables so it inherits current colours + fonts.
══════════════════════════════════════════════════════════════ */
.comm-layout { display:grid; grid-template-columns:1fr 1.05fr; gap:40px; align-items:start; }
.comm-cats   { display:flex; flex-direction:column; gap:20px; }

.comm-card {
  background:var(--bgw, #fff);
  border:1px solid var(--br);
  border-radius:18px;
  padding:24px 26px;
  box-shadow:var(--sh-m);
}
.comm-card h3 {
  display:flex; align-items:center; gap:12px;
  font-family:var(--fh);
  font-size:18px; font-weight:700;
  color:var(--td);
  margin:0 0 18px;
}
.comm-card h3 svg { color:var(--p); flex-shrink:0; }

.comm-taglist { display:flex; flex-wrap:wrap; gap:10px; }
.comm-tag {
  display:inline-flex; align-items:center; gap:7px;
  background:transparent;
  border:1.5px solid var(--br);
  color:var(--p);
  font-weight:600; font-size:13px;
  padding:8px 15px;
  border-radius:30px;
  text-decoration:none;
  transition:var(--tr);
}
.comm-tag:hover {
  background:var(--p);
  border-color:var(--p);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(26,107,90,.25);
}
.comm-tag .comm-tag-dot {
  width:7px; height:7px; border-radius:50%;
  background:currentColor; flex-shrink:0;
}

.comm-cta { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; margin-top:4px; }

.comm-map {
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(155deg, #fff 0%, var(--bgs) 100%);
  border:1px solid var(--br);
  box-shadow:var(--sh-m);
  padding:22px;
}
.comm-map .muni-map { max-width:none; margin:0; }

@media (max-width:992px){
  .comm-layout { grid-template-columns:1fr; gap:28px; }
}

/* ── Home listing cards: phone + address contact rows ── */
.lcontact { display:flex; flex-direction:column; gap:9px; flex:1; margin-bottom:14px; }
.lci { font-size:14px; color:var(--tm); display:flex; align-items:center; gap:8px; line-height:1.5; }
.lci svg { color:var(--p); flex-shrink:0; width:16px; height:16px; }
a.lci-link { text-decoration:none; transition:var(--tr); }
a.lci-link span { transition:var(--tr); }
a.lci-link:hover { color:var(--p); }
a.lci-link:hover span { text-decoration:underline; }
.lnew { font-size:12px; font-weight:700; color:var(--p); background:rgba(26,107,90,.10); padding:3px 10px; border-radius:30px; }
.lprice-badge { font-size:13px; font-weight:800; color:var(--td); }

/* ══════════════════════════════════════════════════════════════
   TIGHTER SECTION SPACING + RESPONSIVE WHITESPACE REDUCTION
   Reduces oversized vertical padding across the main sections so
   pages feel more compact, especially on tablet and mobile.
══════════════════════════════════════════════════════════════ */
.cat-sec,.lst-sec,.smart-sec,.muni-sec,.cta-sec,.how-sec,.art-sec { padding-top:72px; padding-bottom:72px; }
.sec-head { margin-bottom:38px; }

@media(max-width:900px){
  .cat-sec,.lst-sec,.smart-sec,.muni-sec,.cta-sec,.how-sec,.art-sec { padding-top:52px; padding-bottom:52px; }
  .sec-head { margin-bottom:28px; }
  .smart-grid { gap:36px; }
  .how-grid { gap:34px; }
  .hero.compact { min-height:0; }
  .hero.compact .hero-inner { padding:110px 0 34px; }
  .contact-grid { grid-template-columns:1fr !important; gap:34px !important; }
}

@media(max-width:560px){
  .cat-sec,.lst-sec,.smart-sec,.muni-sec,.cta-sec,.how-sec,.art-sec { padding-top:40px; padding-bottom:40px; }
  .sec-head { margin-bottom:22px; }
  .wrap { padding:0 16px; }
  .sh, .sec-h { font-size:clamp(22px,6vw,30px); }
  .hero.compact .hero-inner { padding:106px 0 28px; }
  .comm-card { padding:18px 18px; }
  .price-card, .contact-grid > div { }
}