/* RestoreAndRepairPros — site stylesheet. Theme: rrp.47 "24/7 Dispatch" (see the :root block and the rrp.47 section at the end). */
/* Self-hosted fonts (rrp.47): Archivo (variable: weight 100–900, width 62–125)
   for headings and labels, Source Sans 3 for body text. Latin subsets, OFL —
   licences in /assets/fonts/OFL-LICENSES.txt. */
@font-face{font-family:'Archivo';src:url('/assets/fonts/Archivo-Variable.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap;}
@font-face{font-family:'Source Sans 3';src:url('/assets/fonts/SourceSans3-400.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Source Sans 3';src:url('/assets/fonts/SourceSans3-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Source Sans 3';src:url('/assets/fonts/SourceSans3-600.woff2') format('woff2');font-weight:500 600;font-display:swap;}
@font-face{font-family:'Source Sans 3';src:url('/assets/fonts/SourceSans3-700.woff2') format('woff2');font-weight:700 900;font-display:swap;}

:root{
  /* ==========================================================
     THEME COLORS — change the site's look by editing ONLY this
     block. Every rule elsewhere references these variables (or
     the matching -rgb variable for box-shadows), so there's
     nothing else to touch to reskin the whole site.

     Current palette: RestoreAndRepairPros.com's brand color (#5B4FE9,
     a confident indigo/violet) as the primary interactive color, with a
     warm urgency-orange as a genuine secondary accent used deliberately
     on 24/7-emergency CTAs, bullets, and decorative badges — not hidden
     away. Gold is reserved for "verified/premium" signals specifically,
     kept distinct from the orange accent so a badge's color alone never
     gets confused with an urgent-action button.

     --navy          headings, body text, logo wordmark
     --violet        primary interactive color — buttons, links,
                      badges, active nav, focus rings, positive/
                      success states (approve, verified) — "Restoration
                      Blue"
     --violet-dark   hover/pressed state of the above
     --violet-light  light tint of the above, for text/links on
                      dark backgrounds (footer, hero overlays)
     --violet-rgb    same color as --violet, as an "R,G,B" triple
                      (no rgb() wrapper) so box-shadow rules can do
                      rgba(var(--violet-rgb), 0.2) and stay in sync
                      automatically — never hardcode a shadow color
                      separately from --violet.
     --coral         "Emergency Orange" — used deliberately as a real
                      accent (checkmark bullets, decorative step
                      numbers, guide-card icons, "get help now"
                      emphasis) AND for reject/delete/logout buttons
                      and error states. Kept as one color rather than
                      two so admin never has to guess which shade means
                      what from color alone — button/badge TEXT always
                      disambiguates "reject" vs a decorative bullet.
     --coral-rgb     same color as --coral, as an "R,G,B" triple,
                      same rgba(var(...)) pattern as --violet-rgb.
     --gold          accent for "verified/premium" badges, stats
  ========================================================== */
  /* rrp.47 — "24/7 Dispatch" palette: charcoal + safety orange.
     The variable NAMES are kept from the earlier palette so every existing
     rule keeps working: --violet is now the primary action colour (safety
     orange, dark enough for white text at 5.2:1), --navy the charcoal used
     for headings, the header, heroes and the footer. */
  --navy:#15181D;
  --indigo:#C2410C;
  --violet:#C2410C;
  --violet-dark:#9A3412;
  --violet-light:#FF8A3D;
  --violet-rgb:194,65,12;
  --charcoal:#15181D;
  --charcoal-2:#1E2228;
  --charcoal-3:#262A31;
  --charcoal-line:#3A3F47;
  --on-dark:#C8CCD2;
  --orange-bright:#FF8A3D;
  --footer-bg:#0D0F12;
  --gold:#F2A93B;
  --coral:#B42318;
  --coral-rgb:180,35,24;
  --bg:#F5F5F2;
  --text:#22262D;
  --muted:#5A606B;
  --border:#E2E3E6;
  --font-display:'Archivo', 'Arial Narrow', Arial, sans-serif;
  --font-body:'Source Sans 3', Arial, sans-serif;
  --shadow-sm:0 2px 8px rgba(21,24,29,0.06);
  --shadow-md:0 10px 30px rgba(21,24,29,0.10);
  --shadow-lift:0 14px 34px rgba(var(--violet-rgb),0.16);
}

*{box-sizing:border-box;}
img{max-width:100%; height:auto;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  margin:0;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:700; color:var(--navy); line-height:1.25; margin:0 0 12px;}
h1{font-size:38px; font-weight:800; letter-spacing:-0.6px; line-height:1.18;}
h2{font-size:30px; font-weight:800; letter-spacing:-0.4px; line-height:1.2;}
h3{font-size:20px; font-weight:700; letter-spacing:-0.2px;}
p{margin:0 0 12px;}
a{color:var(--indigo); text-decoration:none; transition:color .15s ease;}
.muted{color:var(--muted); font-size:14px;}

.container{max-width:1160px; margin:0 auto; padding:0 20px;}
.section{padding:52px 20px;}
.section h2{position:relative; padding-bottom:14px; margin-bottom:26px;}
.section h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:4px;border-radius:2px;background:var(--violet);}

/* ---- Buttons ---- */
.btn:disabled, .btn.is-disabled{opacity:0.45; cursor:not-allowed; pointer-events:none;}
.btn{
  display:inline-block;
  padding:11px 20px;
  border-radius:9px;
  font-weight:500;
  font-size:14px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--navy);
  cursor:pointer;
  transition:all .15s ease;
}
.btn:hover{border-color:var(--violet); color:var(--violet); transform:translateY(-1px);}
.btn-primary{background:var(--violet); color:#fff; border-color:transparent; box-shadow:0 6px 16px rgba(var(--violet-rgb),0.28);}
.btn-primary:hover{color:#fff; opacity:0.94; transform:translateY(-1px);}
.btn-lg{padding:15px 30px; font-size:16px;}
.btn-block{width:100%; text-align:center;}
.btn-mini{padding:5px 10px; font-size:12px; border-radius:6px; border:1px solid var(--border); background:#fff; cursor:pointer; margin:2px;}
.btn-approve{background:var(--violet); color:#fff; border-color:var(--violet); font-weight:700;}
.btn-reject{background:var(--coral); color:#fff; border-color:var(--coral);}

/* ---- Header ---- */
.site-header{background:#ffffff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50;}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:13px 20px; flex-wrap:wrap; gap:10px;}
.logo{display:flex; align-items:center; gap:10px; color:var(--navy); text-decoration:none;}
.logo img{width:38px; height:38px; display:block;}
.logo .hl{color:var(--violet);}
.logo.light{color:#fff;}
.logo.light .hl{color:var(--violet-light);}
.logo-wordmark{display:flex; flex-direction:column; line-height:1.12;}
.logo-name{font-weight:700; font-size:18px; white-space:nowrap;}
.logo-tagline{font-size:10.5px; font-weight:500; color:var(--muted); letter-spacing:0.2px; margin-top:1px;}
.logo-short{display:none;}
.main-nav{display:flex; align-items:center; flex-wrap:wrap; row-gap:8px;}
.main-nav a{margin-left:18px; font-size:15.5px; color:var(--text); font-weight:600;}
.main-nav a:hover{color:var(--violet);}
/* Buttons inside the nav must keep their own text colour — .main-nav a would
   otherwise override .btn-primary's white via specificity, giving dark text. */
.main-nav a.btn-primary,
.main-nav a.btn-primary:hover{color:#fff !important;}
.main-nav a.nav-highlight{color:var(--violet); font-weight:600; position:relative;}
.main-nav a.nav-highlight::before{content:"✦"; font-size:10px; margin-right:5px; color:var(--gold); vertical-align:middle;}
.main-nav a.nav-highlight:hover{color:var(--violet-dark);}

/* Hamburger toggle — hidden on desktop, shown when the nav would overflow */
.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:40px; padding:0 10px; background:none; border:1.5px solid var(--border); border-radius:10px; cursor:pointer;}
.nav-toggle span{display:block; height:2.5px; width:22px; background:var(--navy); border-radius:2px; transition:transform .2s ease, opacity .2s ease;}
.nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
.logout-btn{background:var(--coral); color:#fff !important; padding:7px 16px; border-radius:8px; font-weight:600;}
.logout-btn:hover{opacity:0.88; color:#fff !important;}

/* ---- Hero (with layered texture, not flat) ---- */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--violet);
  color:#fff;
  padding:76px 20px 84px;
  text-align:center;
}
/* Decorative teal/gold blobs removed — flat violet hero only, no colour blending. */
.hero .container{position:relative; z-index:2;}
.hero-eyebrow{display:inline-block;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.3);padding:5px 14px;border-radius:20px;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:20px;}
.hero h1{color:#fff; font-size:48px; font-weight:800; letter-spacing:-0.8px; line-height:1.15; max-width:780px; margin:0 auto 16px;}
.hero-sub{color:rgba(255,255,255,0.85); max-width:560px; margin:0 auto 30px; font-size:16px;}

.search-bar{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  background:#fff; padding:10px; border-radius:14px; max-width:780px; margin:0 auto;
  box-shadow:var(--shadow-md);
}
.search-bar select, .search-bar input[type=text]{
  flex:1; min-width:140px; padding:7px 11px; line-height:19px; border-radius:7px; border:1.3px solid #8A9099; font-family:inherit; font-size:13.5px; color:#1F2233; background:#fff;
}
.search-bar .btn-primary{white-space:nowrap;}

/* ---- Trust / stats strip ---- */
.stats-strip{background:#fff; border-bottom:1px solid var(--border);}
.stats-strip .container{display:flex; justify-content:center; gap:56px; padding:22px 20px; flex-wrap:wrap;}
.stats-strip .stat{display:flex; flex-direction:column; align-items:center; text-align:center; min-width:100px;}
.stats-strip .stat-num{display:block; font-size:24px; font-weight:700; color:var(--violet);}
.stats-strip .stat-label{display:block; font-size:12.5px; color:var(--muted); margin-top:2px;}

/* Leads badge — attention-grabbing pill for pages aimed at prospective
   listers. Gold background matches the site's existing "trust/verified"
   accent color, so it reads as a positive trust signal rather than a
   generic promo banner. A slow, subtle pulse on the icon draws the eye
   without being obnoxious or distracting from surrounding content. */
.leads-badge{
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(135deg, #FFF3DC, #FFE8BD);
  border:1.5px solid #F2A93B; border-radius:999px;
  padding:10px 20px; margin:0 0 20px;
  font-size:14px; font-weight:600; color:#5A3B00;
  box-shadow:0 4px 14px rgba(242,169,59,0.18);
}
.leads-badge__icon{font-size:17px; animation:leadsBadgePulse 2.4s ease-in-out infinite;}
.leads-badge__text strong{color:#3D2900;}
.leads-badge--early{background:linear-gradient(135deg, #EAF0FA, #DCE8F7); border-color:var(--violet); color:var(--violet-dark);}
.leads-badge--early .leads-badge__text strong{color:var(--violet);}
@keyframes leadsBadgePulse{0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(1.18); opacity:0.75;}}
@media (max-width:560px){
  .leads-badge{font-size:13px; padding:9px 16px;}
}

/* ---- Category grid (flexbox — reliable across all browsers) ---- */
.category-grid{display:flex; flex-wrap:wrap; gap:14px;}
.location-category-links{list-style:none; padding:0; margin:12px 0 0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px 20px;}
.location-category-links li{padding:0;}
.location-category-links a{display:block; padding:10px 14px; border:1.5px solid var(--border); border-radius:8px; color:var(--violet); font-weight:600; font-size:14px; text-decoration:none; transition:border-color .15s ease, background .15s ease;}
.location-category-links a:hover{border-color:var(--violet); background:#F5F8FC;}
.category-card{
  flex:1 1 170px; max-width:220px;
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:22px 16px;
  text-align:center; font-weight:500; color:var(--navy);
  box-shadow:var(--shadow-sm);
  transition:all .15s ease;
}
.category-card:hover{border-color:var(--violet); box-shadow:var(--shadow-lift); transform:translateY(-3px); color:var(--navy);}
.category-card .cat-icon{
  width:44px; height:44px; margin:0 auto 12px; border-radius:12px;
  background:var(--violet);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.category-card .cat-icon svg{width:22px; height:22px;}
.category-card .cat-count{display:block; font-size:11.5px; color:var(--muted); font-weight:400; margin-top:4px;}

/* Umbrella category header on categories.php — wider, left-aligned "section
   header" treatment rather than a small grid tile, since it's now a group
   heading for its promoted children below it, not one tile among many. */
.umbrella-group{margin-bottom:8px;}
.category-card--umbrella{
  display:flex; align-items:center; gap:14px; text-align:left;
  max-width:none; flex:none; width:100%; padding:18px 20px;
}
.category-card--umbrella .cat-icon{margin:0; flex-shrink:0;}
.category-card--umbrella .cat-count{display:inline; margin:0 0 0 8px;}

/* ---- Location index page (/locations/) and country/state "browse by" rows ---- */
.location-index-grid{display:flex; flex-wrap:wrap; gap:14px;}
.location-index-card{
  flex:1 1 170px; max-width:220px;
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:20px 16px;
  text-align:center; box-shadow:var(--shadow-sm); transition:all .15s ease;
}
.location-index-card:hover{border-color:var(--violet); box-shadow:var(--shadow-lift); transform:translateY(-3px);}
.location-index-card__name{display:block; font-weight:700; color:var(--navy); margin-bottom:4px;}
.location-index-card__count{display:block; font-size:11.5px; color:var(--muted);}
.location-links-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border);
  font-size:13.5px;
}
.location-links-row strong{color:var(--navy); margin-right:2px;}
.location-links-row a{
  color:var(--muted); background:var(--bg); border:1px solid var(--border);
  border-radius:999px; padding:4px 12px; text-decoration:none;
}
.location-links-row a:hover{color:var(--violet); border-color:var(--violet);}

/* ---- Listing cards ---- */
.listing-grid{display:flex; flex-wrap:wrap; gap:20px;}
.listing-card{
  flex:1 1 270px; max-width:360px;
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px; position:relative; display:block;
  box-shadow:var(--shadow-sm);
  transition:all .18s ease;
}
.listing-card:hover{box-shadow:var(--shadow-lift); transform:translateY(-3px); border-color:var(--violet);}
.listing-card.featured{border-color:var(--gold);}
.listing-card-img{
  height:150px; border-radius:10px; background-color:#eee; background-size:cover; background-position:center; margin-bottom:12px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.listing-card-img.placeholder{background:#EDEDE9; color:var(--violet); font-weight:700; font-size:26px;}
/* Only used as a fallback when a listing has no cover photo yet and we're
   showing its logo instead — a logo must never be cropped, unlike a cover
   photo, which is designed to be. */
.listing-card-img--contain{background-size:contain; background-repeat:no-repeat; background-origin:content-box; padding:14px; box-sizing:border-box;}
.badge{position:absolute; top:12px; right:12px; font-size:10px; font-weight:700; padding:4px 10px; border-radius:20px; color:#fff; box-shadow:0 3px 8px rgba(242,169,59,0.35);}
.badge + .badge{top:44px;} /* stack the second badge below the first when a card has both Featured and Top */
.badge + .badge + .badge{top:76px;} /* third badge (e.g. Exclusive + Featured + Top all at once) stacks below both */
.badge-top{background:var(--violet); box-shadow:0 3px 8px rgba(var(--violet-rgb),0.35);}
.h-card__badge--top{background:var(--violet); color:#fff;}

.cat-tier-label{
  font-size:19px; font-weight:800; line-height:1.3;
  margin:30px 0 14px; padding:0 0 0 15px;
  border-left:4px solid var(--border);
  color:var(--navy);
}
.cat-tier-label:first-child{margin-top:0;}
.cat-tier-label--combo{border-left-color:var(--gold);}
.cat-tier-label--featured{border-left-color:var(--gold);}
.cat-tier-label--top{border-left-color:var(--violet);}

/* ---- Featured / Top / Combo listing cards — genuinely different from a
   regular card, not just a small badge next to the name. Solid colors and
   borders only, no gradients (matches the site's flat design direction),
   so the visual weight itself signals "this is a paid placement" the way
   the tier label above it already does. ---- */
/* Chained .h-card.h-card--X (not just .h-card--X) so these reliably beat
   the later plain .h-card{background:#fff...} base rule regardless of file
   order — two classes chained is higher specificity than one class alone. */
.h-card.h-card--featured{background:#FFFBF2; border-color:#F2D8A0; box-shadow:0 3px 14px rgba(242,169,59,0.14);}
.h-card.h-card--featured:hover{border-color:var(--gold); box-shadow:0 10px 26px rgba(242,169,59,0.24);}
.h-card.h-card--top{background:#F5F8FC; border-color:#E8C8B4; box-shadow:0 3px 14px rgba(var(--violet-rgb),0.10);}
.h-card.h-card--top:hover{border-color:var(--violet); box-shadow:0 10px 26px rgba(var(--violet-rgb),0.20);}
.h-card.h-card--combo{background:#FFFBF2; border:1.5px solid var(--gold); box-shadow:0 4px 16px rgba(242,169,59,0.20);}
.h-card.h-card--combo:hover{box-shadow:0 12px 28px rgba(242,169,59,0.30);}
.h-card.h-card--exclusive{background:#FDF2EF; border:1.5px solid var(--coral); box-shadow:0 4px 16px rgba(var(--coral-rgb),0.20);}
.h-card.h-card--exclusive:hover{box-shadow:0 12px 28px rgba(var(--coral-rgb),0.30);}

.cat-pagination{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:28px;}

.pricing-card--soldout{opacity:0.7;}
.badge-featured{background:var(--gold); color:#5A3B00;}
.badge-exclusive{background:var(--coral); color:#fff;}
.badge-featured--inline{display:inline-block; font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px; vertical-align:middle; margin-left:4px;}
.badge-verified{background:var(--violet); font-size:11px; padding:2px 8px; border-radius:10px; margin-left:8px; color:#fff; font-weight:700;}
.listing-card h3{margin-bottom:2px;}

/* ---- Listing detail ---- */
.listing-detail{display:flex; gap:30px; align-items:flex-start; flex-wrap:wrap;}
.listing-main{flex:2; min-width:300px;}
.listing-sidebar{flex:1; min-width:260px;}
.listing-title-row{padding-left:2px; margin-bottom:6px;}
.listing-title-row h1{margin-bottom:2px;}
.about-business-card{margin-bottom:18px;}
.info-list{list-style:none; padding:0; margin:0;}
.info-list li{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:13.5px;}
.info-list li:last-child{border-bottom:none;}
.phone-reveal-btn{border:none; background:none; color:var(--violet); font-weight:700; font-size:12px; cursor:pointer; padding:0; margin-left:2px; text-decoration:underline;}
.info-icon{font-size:15px; flex-shrink:0; width:20px; text-align:center;}
.breadcrumb{font-size:12.5px; color:var(--muted); margin-bottom:14px;}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--violet);}
/* The breadcrumb also renders inside the violet .page-hero banner (location,
   state, country pages) — the default muted gray is calibrated for a white
   background and is nearly invisible against the violet (contrast ~1.2:1,
   far below WCAG AA's 4.5:1 minimum for this text size), so it needs a
   solid light color there instead of inheriting the white-background one.
   Full white clears AA comfortably (5.6:1); rgba(255,255,255,0.75), matching
   .hero-sub elsewhere, was tried first but only reaches 3.9:1 — not enough
   for text this small. */
.page-hero .breadcrumb, .page-hero .breadcrumb a{color:#fff;}
.page-hero .breadcrumb a:hover{color:#D0F0EB;}
.gallery-grid{display:flex; flex-wrap:wrap; gap:10px;}
.gallery-item{width:calc(33.333% - 7px); aspect-ratio:4/3; border-radius:10px; overflow:hidden; cursor:pointer; position:relative; transition:box-shadow .25s ease;}
.gallery-item:hover{box-shadow:0 10px 24px rgba(43,45,90,0.22);}
.gallery-item::after{
  content:'🔍'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:22px; background:rgba(30,26,74,0.0); color:#fff; opacity:0; transition:opacity .2s ease, background .2s ease;
  pointer-events:none; /* let clicks pass through to the <img> underneath — this was blocking the lightbox from opening */
}
.gallery-item:hover::after{opacity:1; background:rgba(30,26,74,0.35);}
.custom-fields-list{list-style:none; padding:0; margin:8px 0 20px;}
.custom-fields-list li{display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--border); font-size:15px; line-height:1.5;}
.custom-fields-list li .cf-label{color:var(--navy); font-weight:700;}
.custom-fields-list li .cf-value{color:var(--text); font-weight:400; text-align:right; word-break:break-word; min-width:0;}
@media (max-width:600px){
  .custom-fields-list li{flex-direction:column; align-items:flex-start; gap:2px;}
  .custom-fields-list li .cf-value{text-align:left;}
}

.card{background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px; box-shadow:var(--shadow-sm);}
.card form input[type=text], .card form input[type=email], .card form input[type=tel], .card form input[type=url], .card form input[type=password], .card form select, .card form textarea{
  width:100%; margin-bottom:12px; padding:7px 11px; line-height:19px; border-radius:7px; border:1.3px solid #8A9099; font-family:inherit; font-size:13.5px; color:#1F2233; background:#fff;
}
.card form input::placeholder, .card form textarea::placeholder{color:var(--muted);}

/* Sitewide fallback: any .app-card form field not already styled by a more specific rule
   (dashboard/profile.php, dashboard/leads.php, and any future dashboard forms) gets the same
   canonical field look as every other form on the site. */
.app-card input[type=text], .app-card input[type=email], .app-card input[type=tel], .app-card input[type=url],
.app-card input[type=password], .app-card input[type=number], .app-card input[type=date], .app-card select, .app-card textarea{
  width:100%; margin-bottom:0; padding:7px 11px; line-height:19px; border-radius:7px; border:1.3px solid #8A9099; font-family:inherit; font-size:13.5px; color:#1F2233; background:#fff;
}
.app-card input::placeholder, .app-card textarea::placeholder{color:var(--muted);}
.app-card input:focus, .app-card select:focus, .app-card textarea:focus{outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(var(--violet-rgb),0.12);}
.card form input:focus, .card form textarea:focus, #listingForm input:focus, #listingForm select:focus, #listingForm textarea:focus{
  outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(var(--violet-rgb),0.12);
}
.consent-label.legacy{font-size:12px;}

/* ---- Password show/hide toggle (applied automatically via JS) ---- */
.password-field-wrap{position:relative;}
.password-field-wrap input{padding-right:42px !important;}
.password-toggle-btn{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; padding:5px;
  color:var(--muted); display:flex; align-items:center; justify-content:center;
  border-radius:6px;
}
.password-toggle-btn:hover{color:var(--violet); background:rgba(var(--violet-rgb),0.08);}
.password-toggle-btn svg{width:18px; height:18px;}

/* ---- Submission form ---- */
#listingForm input[type=text], #listingForm input[type=email], #listingForm input[type=url],
#listingForm input[type=number], #listingForm input[type=tel], #listingForm select, #listingForm textarea{
  width:100%; margin-bottom:12px; padding:7px 11px; line-height:19px; border-radius:7px; border:1.3px solid #8A9099; font-family:inherit; font-size:13.5px; color:#1F2233; background:#fff;
}
#listingForm input::placeholder, #listingForm textarea::placeholder{color:var(--muted);}
#listingForm input[type=file]{width:100%; margin-bottom:12px; padding:7px 11px; line-height:19px; border-radius:7px; border:1.3px dashed #8A9099; background:#FAFBFF; font-family:inherit; font-size:13.5px; color:#5A6072; cursor:pointer;}
/* Edit-listing: clear spacing between sections so the form isn't congested */
#listingForm.app-card > h3{margin-top:30px; margin-bottom:14px; padding-top:22px; border-top:1px solid var(--border);}
#listingForm.app-card > h3:first-of-type{margin-top:0; padding-top:0; border-top:none;}
.two-field-row{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
.two-field-row input{flex:1; min-width:180px; margin-bottom:0 !important;}
/* Checkboxes/radios must never be stretched by the flex-input rule above —
   keep them at their natural tick-box size and vertically centered with the label text. */
.two-field-row input[type=checkbox],
.two-field-row input[type=radio]{
  flex:0 0 auto; min-width:0; width:16px; height:16px; margin:0; accent-color:var(--violet);
}
.location-selects{display:flex; gap:12px; margin-bottom:12px; flex-wrap:wrap;}
.location-selects select,
.location-selects input[type=text]{flex:1; min-width:150px; margin-bottom:0 !important;}
.location-selects input:disabled{background:#f4f4f8; cursor:not-allowed;}
.city-typeahead{position:relative; flex:1; min-width:150px;}
.city-typeahead input[type=text]{width:100%;}
.city-suggestions{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:40;
  background:#fff; border:1px solid var(--border); border-radius:8px;
  box-shadow:0 8px 20px rgba(20,16,60,0.12); max-height:240px; overflow-y:auto;
  color:var(--navy); text-align:left;
}
.city-suggestion-item{padding:9px 12px; font-size:14px; cursor:pointer; border-bottom:1px solid var(--border); color:inherit;}
.city-suggestion-item:last-child{border-bottom:none;}
.city-suggestion-item:hover, .city-suggestion-item.is-active{background:var(--violet); color:#fff;}
/* Shown in place of suggestions when a real search comes back with no
   matches, on forms where typing a new city and continuing still works
   (see assets/js/main.js's supportsNewCity) — reassuring, not styled like
   an error, since nothing has actually gone wrong. */
.city-suggestion-hint{padding:10px 12px; font-size:13px; line-height:1.4; color:var(--muted); background:#FAFAFD; cursor:default;}
.city-suggestion-item--empty{color:var(--muted); cursor:default;}
.city-suggestion-item--empty:hover{background:none; color:var(--muted);}
.field-hint{font-size:12.5px; color:var(--muted); margin:-4px 0 14px; line-height:1.5;}
.package-choice-grid{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px;}
.package-choice{
  flex:1 1 150px;
  border:1.5px solid var(--border); border-radius:11px; padding:14px; text-align:center; cursor:pointer; display:flex; flex-direction:column; gap:4px;
  transition:all .15s ease;
}
.package-choice:has(input:checked){border-color:var(--violet); background:#EEF3FA; box-shadow:0 0 0 3px rgba(var(--violet-rgb),0.10);}
.package-choice input{width:auto; margin:0 auto 6px;}

/* Additional-categories picker on submit-listing.php — grouped by umbrella
   category so 25 options read as 5 manageable clusters, not a flat wall of
   checkboxes. See assets/js/main.js's "Additional categories" module for
   the live price total + primary-category exclusion logic. */
.extra-categories-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin-top:10px;}
.extra-categories-group{border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:#FAFAFD;}
.extra-cat-checkbox{display:flex; align-items:center; gap:8px; font-size:13.5px; padding:5px 0; cursor:pointer;}
.extra-cat-checkbox input{width:auto; margin:0;}
.extra-cat-checkbox--umbrella{font-weight:700; border-bottom:1px solid var(--border); margin-bottom:4px; padding-bottom:8px;}
.extra-cat-checkbox.is-disabled{opacity:0.45; cursor:not-allowed;}
#extraCategoriesPriceHint{font-weight:400; color:var(--muted); font-size:12.5px;}

.service-row{display:flex; gap:10px; margin-bottom:12px; align-items:center;}
.service-row input{flex:1; min-width:0;}
.row-remove{flex:0 0 auto; width:34px; height:34px; border:1.5px solid #E7C3CB; background:#FDEEF1; color:#D33B54; border-radius:8px; font-size:17px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:background .15s;}
.row-remove:hover{background:#F8D7DE; border-color:#DDA0AC;}
#addServiceBtn{margin-bottom:20px;}
.custom-field-block label{display:block; font-size:13.5px; font-weight:700; color:var(--navy); margin-bottom:6px;}
.custom-field-block{margin-bottom:14px;}

/* ---- "What We Offer" category service checklist ---- */
.service-checklist{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:8px 16px;}
.service-check{display:flex; gap:8px; align-items:flex-start; font-size:13.5px; color:var(--navy); cursor:pointer; line-height:1.4;}
.service-check input{width:auto; margin-top:3px; accent-color:var(--violet);}

/* ---- Currency toggle (pricing / promote / checkout) ---- */
.currency-toggle{display:inline-flex; border:1.5px solid var(--border); border-radius:999px; padding:3px; gap:2px; margin:0 0 20px;}
.currency-toggle button, .currency-toggle a{border:0; background:transparent; padding:8px 20px; border-radius:999px; font-weight:700; font-size:13.5px; color:var(--muted); cursor:pointer; transition:all .15s ease;}
.currency-toggle button.is-active, .currency-toggle a.is-active{background:var(--violet); color:#fff;}
.price-usd{display:inline;}

/* ---- CTA ---- */
.cta-section{text-align:center; background:#F1F1EE; border:1px solid var(--border); border-radius:18px; margin:20px auto; max-width:900px; box-shadow:var(--shadow-sm);}

/* ---- Contact page ---- */
.contact-grid{display:flex; gap:30px; flex-wrap:wrap;}
.contact-grid .card{flex:2; min-width:300px;}
.contact-info-card{flex:1; min-width:220px;}
.contact-info-card .info-row{display:flex; gap:10px; margin-bottom:14px; font-size:14px;}

/* ---- Dashboard ---- */
.dash-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:10px;}
.listing-owner-card{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; margin-bottom:14px;}
.listing-owner-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.callout-inline{padding:10px 14px; border-radius:8px; margin-bottom:16px; font-size:13px;}
.callout-inline.success{background:#EAF0FA; color:var(--violet-dark); border-left:4px solid var(--violet);}
.callout-inline.warning{background:#FEF4E4; color:#8A5B0B; border-left:4px solid #E5A93C; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.callout-inline.warning a{color:#8A5B0B; font-weight:600; text-decoration:underline; white-space:nowrap;}
.gallery-grid img{border-radius:8px; margin-bottom:6px;}

.my-listings-grid{display:flex; flex-direction:column; gap:16px;}
.my-listing-card{display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap;}
.my-listing-card .listing-card-img{width:120px; height:90px; flex-shrink:0; margin-bottom:0;}
.my-listing-body{flex:1; min-width:220px;}
.my-listing-card .listing-owner-actions{width:100%; margin-top:10px; padding-top:10px; border-top:1px solid var(--border);}
@media (max-width:640px){
  .my-listing-card{flex-direction:column;}
  .my-listing-card .listing-card-img{width:100%; height:140px;}
}

/* ---- Pricing page ---- */
.pricing-grid{display:flex; flex-wrap:wrap; gap:18px;}

/* Promotion groups (promote.php, dashboard/promote.php) — each add-on TYPE
   (Featured, Category Top, Exclusive) gets its own heading + one clear
   explanation of where it makes a listing show up, before its duration/
   price options — replacing a flat, unexplained list of similarly-named
   cards that was a real source of confusion. */
.promo-group{margin-bottom:8px;}
.promo-group h2{font-size:19px; margin-bottom:4px;}

/* Promote pages ONLY (promote.php, dashboard/promote.php) — exactly 2
   cards per row at 50% width each, regardless of how many cards are in a
   given group (Category Top only ever has 1, Featured has 2, etc.).
   Deliberately a SEPARATE class from .pricing-grid/.pricing-card (used on
   pricing.php) — sharing one class between both pages meant a fix aimed
   at one page's layout silently changed the other's too, which is
   exactly what happened here. */
.promo-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.promo-grid .pricing-card{flex:none; max-width:none; width:auto;}
@media (max-width:560px){ .promo-grid{grid-template-columns:1fr;} }
.pricing-card{flex:1 1 220px; background:#fff; border:1px solid var(--border); border-radius:16px; padding:24px; box-shadow:var(--shadow-sm); transition:all .15s ease;}
.pricing-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift);}
.pricing-card.highlight{border-color:var(--violet); box-shadow:0 10px 28px rgba(var(--violet-rgb),0.16); position:relative;}
.pricing-card.highlight::before{content:"Most Popular";position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--violet);color:#fff;font-size:10px;font-weight:700;padding:4px 12px;border-radius:20px;}
.pricing-card .price{font-size:28px; font-weight:700; color:var(--navy); margin:10px 0 18px;}

/* Duration toggle (pricing.php) — lets a visitor pick 30/90/180/360 days
   within a single tier card and see the real price update instantly. Each
   button carries the specific package row's id/price/days as data
   attributes; the tiny inline script in pricing.php just swaps text and the
   "Get Started" link target, it never invents a price of its own. */
.duration-toggle{display:flex; gap:4px; background:#F3F3F8; border-radius:9px; padding:3px; margin:12px 0 4px;}
.duration-toggle__btn{
  flex:1; border:none; background:transparent; padding:6px 4px; font-size:12.5px; font-weight:600;
  color:var(--muted); border-radius:6px; cursor:pointer; transition:all .12s ease;
}
.duration-toggle__btn.is-active{background:#fff; color:var(--violet); box-shadow:0 1px 3px rgba(0,0,0,0.12);}
.duration-toggle__btn:hover:not(.is-active){color:var(--navy);}

ul.check{list-style:none; padding:0; margin:0 0 12px;}
ul.check li{position:relative; padding-left:24px; margin-bottom:8px; font-size:13.5px;}
ul.check li::before{content:"✓";position:absolute;left:0;top:0;color:#fff;background:#2FA84F;width:16px;height:16px;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;line-height:1;}
/* Use class="x" on any <li> describing something a plan does NOT include —
   a red circle with the same checkmark shape read as "included" even in
   red, which confused people into thinking every line was crossed out.
   Green ✓ = included, red ✕ = not included on this plan; never mix the two
   meanings into one color again. */
ul.check li.x::before{content:"✕";background:var(--coral);}

/* ---- Footer ---- */
.site-footer{background:var(--footer-bg); color:rgba(255,255,255,0.75); margin-top:50px;}
.footer-grid{display:flex; flex-wrap:wrap; gap:30px; padding:44px 20px 30px;}
.footer-grid > div{flex:1; min-width:170px;}
.footer-grid > div:first-child{flex:1.4; min-width:220px;}
/* The footer wordmark is a flex row of text pieces; without wrapping + a smaller
   size it overflowed into the Categories column. Constrain it here. */
.site-footer .logo{font-size:16px; flex-wrap:wrap; row-gap:0; line-height:1.25;}
.site-footer .logo img{width:30px; height:30px;}
.site-footer .logo-name{font-size:15px; white-space:normal;}
.footer-grid a{color:rgba(255,255,255,0.7); font-size:13px; line-height:2.1; display:inline-block;}
.footer-grid a:hover{color:var(--violet-light);}
.footer-grid h3{color:#fff; font-size:14px; margin-bottom:12px;}
.footer-bottom{padding:16px 20px; border-top:1px solid rgba(255,255,255,0.1); font-size:12px; text-align:center;}

/* ---- Tables (admin) ---- */
table.admin-table{width:100%; border-collapse:collapse; background:#fff; border-radius:10px; overflow:hidden;}

/* ---- Desktop: bigger logo mark + wordmark ---- */
@media (min-width: 961px){
  .logo-name{font-size:19px;}
  .logo img{width:42px; height:42px;}
}

/* ---- Tablet & below: collapse the nav into a hamburger menu ---- */
@media (max-width: 1024px){
  .header-inner{flex-wrap:wrap; padding:12px 16px;}
  /* Compact brand: logo art + "WDC" so the hamburger always fits inline.
     Sized to match the desktop logo (see the v1.6.9 "Bigger desktop logo"
     rule further down) — that update only touched the ≥961px rule, so
     mobile/tablet stayed at the old smaller size and looked mismatched
     next to it. Bumped here to the same visual weight. */
  .logo-full{display:none;}
  .logo-short{display:inline; font-size:22px; letter-spacing:0.5px;}
  .logo-name{font-size:22px;}
  .logo img{width:48px; height:48px;}
  .logo-tagline{font-size:11px;}
  .nav-toggle{display:flex; margin-left:auto;}
  .main-nav{display:none; flex-basis:100%; flex-direction:column; align-items:stretch; row-gap:0; margin-top:8px; padding-top:6px; border-top:1px solid var(--border);}
  .main-nav.open{display:flex;}
  .main-nav a{margin:0 !important; padding:14px 4px; font-size:16px; border-bottom:1px solid var(--border);}
  .main-nav a.btn-primary{margin-top:14px !important; padding:14px; text-align:center; border-bottom:none; font-size:16px;}
  .main-nav a.logout-btn{border-bottom:none;}
}

/* ---- Mobile: larger, higher-contrast type so it's comfortable to read ---- */
@media (max-width: 720px){
  body{font-size:16.5px; color:#1F2233;}
  h1{font-size:27px;}
  h2{font-size:22px;}
  .hero h1{font-size:32px; letter-spacing:-0.4px;}
  .muted{color:#5A6072;}                         /* darker than desktop muted for readability */
  input, select, textarea{font-size:16px !important;}   /* 16px also stops iOS zoom-on-focus */
  input::placeholder, textarea::placeholder{color:#7A8095;}
  .listing-detail{flex-direction:column;}
  .stats-strip .container{gap:30px;}
  /* Package price on submit-listing was unreadably small on phones (13px) — this is
     what the customer is actually paying, it needs to be legible at a glance. */
  .package-choice__price{font-size:17.5px;}
  .package-choice{flex-basis:calc(50% - 5px);}
  .gallery-grid img, .gallery-grid > div{width:calc(50% - 5px);}
  .category-grid{justify-content:center;}
  .category-card, .listing-card{max-width:none; flex-basis:100%;}
  .search-bar{flex-direction:column;}
  .search-bar select, .search-bar input[type=text]{min-width:0; width:100%;}
  .two-field-row, .location-selects, .service-row{flex-direction:column;}
  .two-field-row input, .location-selects select, .location-selects input[type=text], .service-row input{min-width:0; width:100%;}
  .service-row .row-remove{align-self:flex-end;}
  .footer-grid > div{flex-basis:100%;}
}

/* ==========================================================
   Homepage SEO content sections — how-it-works, editorial
   prose, hiring guide, and FAQ. Styled to match the site's
   card/gradient system; readable long-form typography.
   ========================================================== */

/* Subtle alternating band so the content zone reads as its own area */
.section--tint{background:#F1F1EE; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.section-intro{max-width:720px; margin:0 0 30px;}
.section-intro .eyebrow{display:inline-block; font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--violet); margin-bottom:10px;}
.section-intro p{color:var(--muted); font-size:15.5px; margin:0;}

/* How it works — 3 steps */
.how-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:820px){ .how-steps{grid-template-columns:1fr;} }
.how-step{position:relative; background:#fff; border:1px solid var(--border); border-radius:16px; padding:26px 24px; box-shadow:var(--shadow-sm);}
.how-step__num{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; font-weight:700; font-size:18px; color:#fff; background:var(--violet); margin-bottom:16px; box-shadow:0 6px 16px rgba(var(--violet-rgb),0.28);}
.how-step:nth-child(2) .how-step__num{background:var(--coral); box-shadow:0 6px 16px rgba(var(--coral-rgb),0.28);}
.how-step:nth-child(3) .how-step__num{background:var(--gold); box-shadow:0 6px 16px rgba(242,169,59,0.28);}
.how-step h3{font-size:17px; margin-bottom:8px;}
.how-step p{color:var(--muted); font-size:14px; margin:0;}

/* Editorial prose block */
.prose{max-width:820px;}
.prose h2{font-size:26px; margin-bottom:16px;}
.prose h3{font-size:19px; margin:26px 0 8px;}
.prose p{color:var(--text); font-size:15.5px; line-height:1.75; margin:0 0 16px;}
.prose p:last-child{margin-bottom:0;}
.prose a{color:var(--violet); font-weight:500;}
.prose a:hover{text-decoration:underline;}
.prose strong{color:var(--navy); font-weight:600;}

/* Two-column hiring-guide cards */
.guide-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:8px;}
@media (max-width:720px){ .guide-grid{grid-template-columns:1fr;} }

/* Cross-links between an umbrella category and its promoted, keyword-
   researched specific-service children (see category.php's $childCategories
   / $parentCategory) — a compact tile grid, distinct from the heavier
   guide-card style above so it reads as navigation, not editorial content. */
.child-cat-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; margin-top:14px;}
.child-cat-card{
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  border:1px solid var(--border); border-radius:12px; background:#fff;
  text-decoration:none; color:var(--navy); font-weight:600; font-size:14.5px;
  transition:border-color .15s, box-shadow .15s;
}
.child-cat-card:hover{border-color:var(--violet); box-shadow:0 6px 18px rgba(var(--violet-rgb),0.12);}
.child-cat-card img{width:26px; height:26px; flex-shrink:0;}
.guide-card{background:#fff; border:1px solid var(--border); border-radius:14px; padding:22px 22px; box-shadow:var(--shadow-sm);}
.guide-card h3{display:flex; align-items:center; gap:10px; font-size:16px; margin-bottom:8px;}
.guide-card h3 .tick{flex-shrink:0; width:26px; height:26px; border-radius:8px; background:#FBEAEC; color:var(--coral); display:inline-flex; align-items:center; justify-content:center; font-size:14px;}
.guide-card p{color:var(--muted); font-size:14px; line-height:1.65; margin:0;}

/* FAQ accordion (native <details>, no JS, SEO-friendly) */
.faq-list{max-width:820px; display:flex; flex-direction:column; gap:12px;}
.faq-item{background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; transition:box-shadow .15s ease, border-color .15s ease;}
.faq-item[open]{border-color:#E8C8B4; box-shadow:0 8px 22px rgba(var(--violet-rgb),0.10);}
.faq-item summary{list-style:none; cursor:pointer; padding:18px 20px; font-weight:600; font-size:15.5px; color:var(--navy); display:flex; align-items:center; justify-content:space-between; gap:14px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:22px; font-weight:400; color:var(--violet); line-height:1; flex-shrink:0; transition:transform .2s ease;}
.faq-item[open] summary::after{content:"−";}
.faq-item .faq-body{padding:0 20px 20px; color:var(--muted); font-size:14.5px; line-height:1.7;}
.faq-item .faq-body p{margin:0 0 10px;}
.faq-item .faq-body p:last-child{margin-bottom:0;}

/* Centered CTA heading shouldn't carry the left-aligned underline bar */
.cta-section h2::after{left:50%; transform:translateX(-50%);}

/* ==========================================================
   Get Matched — project brief intake page
   ========================================================== */
.gm-hero{
  background:var(--violet);
  color:#fff; padding:56px 20px 44px; text-align:center; position:relative; overflow:hidden;
}
/* Decorative blob removed — flat violet hero only. */

.gm-hero .container{position:relative; z-index:2;}
.gm-hero h1{color:#fff; font-size:36px; max-width:720px; margin:0 auto 12px;}
.gm-hero .hero-sub{color:rgba(255,255,255,0.88); max-width:600px; margin:0 auto; font-size:16px;}

.gm-layout{display:grid; grid-template-columns:0.85fr 1.15fr; gap:34px; align-items:start;}
@media (max-width:900px){ .gm-layout{grid-template-columns:1fr; gap:24px;} }

.gm-side h2{font-size:20px; margin-bottom:16px;}
.gm-steps{list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:18px;}
.gm-steps li{display:flex; gap:14px; align-items:flex-start;}
.gm-steps__n{flex-shrink:0; width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:#fff; background:var(--violet); box-shadow:0 5px 14px rgba(var(--violet-rgb),0.28);}
.gm-steps li:nth-child(2) .gm-steps__n{background:var(--coral);}
.gm-steps li:nth-child(3) .gm-steps__n{background:var(--gold);}
.gm-steps strong{display:block; color:var(--navy); font-size:15px; margin-bottom:2px;}
.gm-steps p{margin:0; color:var(--muted); font-size:13.5px; line-height:1.55;}
.gm-trust{background:#F1F1EE; border:1px solid var(--border); border-radius:14px; padding:18px 20px;}
.gm-trust__row{font-size:13.5px; color:var(--navy); font-weight:500; padding:5px 0;}

.gm-card{padding:28px 28px;}
.gm-card__title{font-size:22px; margin-bottom:4px;}
.gm-field-label{display:block; font-size:13.5px; font-weight:600; color:var(--navy); margin:6px 0 6px;}
.gm-formwrap .two-field-row{gap:14px; margin-bottom:0;}
#briefForm select, #briefForm input[type=text], #briefForm input[type=email], #briefForm input[type=tel], #briefForm textarea{
  width:100%; margin-bottom:12px; padding:7px 11px; line-height:19px; border-radius:7px; border:1.3px solid #8A9099; font-family:inherit; font-size:13.5px; color:#1F2233; background:#fff;
}
#briefForm input::placeholder, #briefForm textarea::placeholder{color:var(--muted);}
#briefForm select:focus, #briefForm input:focus, #briefForm textarea:focus{
  outline:none; border-color:var(--violet); background:#fff; box-shadow:0 0 0 3px rgba(var(--violet-rgb),0.12);
}
/* Phone: country code + number */
.phone-group{display:flex; gap:8px; min-width:0;}
.phone-group .country-code-input{flex:0 0 58px !important; width:58px !important; min-width:58px !important; text-align:center;}
.phone-group input:not(.country-code-input){flex:1 1 0; min-width:0; width:auto !important;}
.phone-group input{margin-bottom:12px;}
/* Local / Remote choice as selectable cards */
.gm-radio-group{display:flex; gap:12px; margin-bottom:14px;}
.gm-radio{flex:1 1 0; min-width:0; display:flex; align-items:center; gap:10px; padding:14px; border:1.5px solid #D9DCE6; border-radius:11px; cursor:pointer; transition:all .15s ease; background:#fff;}
.gm-radio:hover{border-color:var(--violet);}
.gm-radio input[type=radio]{width:18px !important; height:18px; flex:0 0 auto; margin:0; accent-color:var(--violet);}
.gm-radio .gm-radio__text{display:flex; flex-direction:column; line-height:1.3; min-width:0;}
.gm-radio strong{font-size:14px; color:var(--navy);}
.gm-radio small{font-size:12px; color:var(--muted);}
.gm-radio:has(input:checked){border-color:var(--violet); background:#F1F1EE; box-shadow:0 0 0 3px rgba(var(--violet-rgb),0.1);}
@media (max-width:520px){ .gm-radio-group{flex-direction:column;} }

.gm-success{text-align:center; padding:20px 10px;}
.gm-success__icon{width:64px; height:64px; margin:0 auto 16px; border-radius:50%; background:var(--violet); color:#fff; font-size:32px; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(var(--violet-rgb),0.35);}
.gm-success h2{font-size:22px; margin-bottom:8px;}
.gm-success p{color:var(--muted); font-size:14.5px; max-width:420px; margin:0 auto;}

/* Homepage hero: secondary "get matched" prompt under the search bar */
.hero-alt{margin:18px auto 0; font-size:14px; color:rgba(255,255,255,0.9); max-width:560px;}
.hero-alt a{color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:2px;}
.hero-alt a:hover{color:var(--gold-light, #FFD23D);}

/* ==========================================================
   Category page — header band + elegant empty state
   ========================================================== */
.cat-header{background:#E9EFF8; border-bottom:1px solid var(--border); padding:38px 20px;}
.cat-header .container{display:flex; align-items:center; gap:22px;}
.cat-header__icon{flex-shrink:0; width:66px; height:66px; border-radius:18px; background:var(--violet); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(var(--violet-rgb),0.28);}
.cat-header__icon img{width:32px; height:32px; filter:brightness(0) invert(1);}
.cat-header h1{margin:0 0 5px; font-size:28px;}
.cat-header p{margin:0 0 10px; color:var(--muted); font-size:15px; max-width:640px; line-height:1.6;}
.cat-header__count{display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.3px; color:var(--violet); background:#fff; border:1px solid var(--border); border-radius:999px; padding:5px 13px;}
@media (max-width:600px){ .cat-header .container{flex-direction:column; text-align:center; align-items:center;} }

.empty-state{text-align:center; max-width:560px; margin:20px auto; padding:44px 30px; background:#fff; border:1.5px dashed var(--border); border-radius:20px;}
.empty-state__icon{width:76px; height:76px; margin:0 auto 20px; border-radius:20px; background:#EEF0FF; display:flex; align-items:center; justify-content:center;}
.empty-state__icon img{width:36px; height:36px; opacity:0.85;}
.empty-state h2{font-size:21px; margin-bottom:10px;}
.empty-state p{color:var(--muted); font-size:14.5px; line-height:1.65; margin:0 auto 22px; max-width:440px;}
.empty-state__actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

/* ==========================================================
   Submit-listing form — sectioned, labeled, high-contrast
   ========================================================== */
.submit-hero{background:var(--violet); color:#fff; padding:44px 20px 38px; text-align:center;}
.submit-hero h1{color:#fff; font-size:36px; font-weight:800; letter-spacing:-0.6px; line-height:1.18; margin:0 0 8px;}
.submit-hero p{color:rgba(255,255,255,0.9); max-width:560px; margin:0 auto; font-size:15.5px;}

.listing-form{margin:0 auto;}
.form-errors{background:#FDEBEE; border-left:4px solid #F2617A; color:#9C2438; border-radius:10px; padding:14px 18px; margin-bottom:20px;}
.form-errors ul{margin:8px 0 0; padding-left:20px;}
.form-errors li{margin:3px 0;}

.form-section{background:#fff; border:1px solid var(--border); border-radius:16px; padding:24px 26px; margin-bottom:20px; box-shadow:0 4px 16px rgba(43,45,90,0.05);}
.form-section__head{display:flex; align-items:center; gap:12px; margin-bottom:5px;}
.form-section__num{flex-shrink:0; width:30px; height:30px; border-radius:9px; background:var(--violet); color:#fff; font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; box-shadow:0 5px 12px rgba(var(--violet-rgb),0.28);}
.form-section__head h3{margin:0; font-size:18px; color:var(--navy);}
.form-section__desc{color:#5A6072; font-size:13.5px; line-height:1.6; margin:0 0 18px; padding-left:42px;}
.form-section__desc em{color:var(--navy); font-style:normal; font-weight:500;}

.form-field{margin-bottom:16px;}
.form-field:last-child{margin-bottom:0;}
.form-field > label{display:block; font-size:13.5px; font-weight:700; color:var(--navy); margin-bottom:6px;}
.form-field .req{color:#F2617A;}
.form-row{display:flex; gap:16px; flex-wrap:wrap;}
.form-row .form-field{flex:1; min-width:200px;}
/* Short-value fields (phone, years, price, a small select) shouldn't stretch to
   fill a whole flex column just because the global admin input rule is width:100% —
   cap the input itself so a 3-digit number doesn't sprawl across 400px. */
.form-field--sm input, .form-field--sm select{max-width:180px;}
.form-field--md input, .form-field--md select{max-width:320px;}
@media (max-width:600px){ .form-field--sm input, .form-field--sm select, .form-field--md input, .form-field--md select{max-width:100%;} }

/* Field styling for this page now lives entirely under #listingForm (see above) — removed the
   duplicate/overridden .listing-form input rules that were silently dead due to ID specificity. */
.listing-form .location-selects input:disabled{background:#F1F2F7; cursor:not-allowed;}

.btn-add{background:#F1F1EE; color:var(--violet); border:1.5px solid #C3D3E8; font-weight:600; padding:9px 16px; font-size:13.5px; margin-top:10px;}
.btn-add:hover{background:#ECEAFD; color:var(--violet-dark);}
#featuresWrap{display:flex; flex-wrap:wrap; gap:10px;}
.feature-row{display:flex; gap:6px; align-items:center; margin-bottom:0; flex:0 1 260px;}
.feature-row input{flex:1; min-width:0; max-width:230px;}
.service-row{margin-bottom:8px;}
@media (max-width:480px){ .feature-row{flex-basis:100%;} .feature-row input{max-width:none;} }
.package-choice__price{display:block; font-weight:700; color:var(--violet); font-size:15.5px; margin-top:3px;}
.package-choice__price small{color:var(--muted); font-weight:400;}
.seo-locked-note{background:#FFF7E8; border:1px solid #F5D98B; color:#8A5B0B; border-radius:8px; padding:10px 14px; font-size:13px; margin:4px 0 0;}
.form-section.is-locked{opacity:0.55;}
.form-section.is-locked input{pointer-events:none; background:#F4F4F8;}

@media (max-width:600px){
  .form-section__desc{padding-left:0;}
  .form-row{flex-direction:column; gap:0;}
  .submit-hero h1{font-size:27px;}
}

/* Features tick-list on the listing detail page */
.features-list{list-style:none; padding:0; margin:8px 0 20px; display:grid; grid-template-columns:repeat(2,1fr); gap:6px 24px;}
@media (max-width:600px){ .features-list{grid-template-columns:1fr;} }
.features-list li{position:relative; padding:6px 0 6px 28px; font-size:15px; color:var(--text); line-height:1.5;}
.features-list li::before{content:"✓"; position:absolute; left:0; top:8px; width:18px; height:18px; background:#2FA84F; color:#fff; border-radius:50%; font-size:10px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center;}

/* ==========================================================
   Gallery lightbox, admin preview banner, report listing
   ========================================================== */
.gallery-thumb{width:100%; height:100%; display:block; object-fit:cover; transition:transform .25s ease;}
.gallery-item:hover .gallery-thumb{transform:scale(1.06);}

.lightbox{display:none; position:fixed; inset:0; z-index:2000; background:rgba(12,14,34,0.92); align-items:center; justify-content:center;}
.lightbox.open{display:flex;}
.lightbox__img{max-width:88vw; max-height:82vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.lightbox__close{position:absolute; top:18px; right:24px; background:none; border:none; color:#fff; font-size:38px; line-height:1; cursor:pointer;}
.lightbox__nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.12); border:none; color:#fff; width:52px; height:52px; border-radius:50%; font-size:34px; line-height:1; cursor:pointer;}
.lightbox__nav:hover{background:rgba(255,255,255,0.24);}
.lightbox__prev{left:20px;} .lightbox__next{right:20px;}
.lightbox__count{position:absolute; bottom:22px; left:0; right:0; text-align:center; color:rgba(255,255,255,0.85); font-size:14px;}
@media (max-width:600px){ .lightbox__nav{width:42px; height:42px; font-size:26px;} }

.preview-banner{background:#FFF7E8; border-bottom:1px solid #F5D98B; color:#8A5B0B; font-size:14px; padding:12px 20px; text-align:center;}
.preview-banner a{color:#7A4E08; font-weight:600; text-decoration:underline;}
.report-thanks{background:#E7FBF8; border:1px solid #9FE8DD; color:#0B6E63; border-radius:10px; padding:12px 16px; font-size:14px;}

.report-listing{margin-top:18px; border-top:1px solid var(--border); padding-top:14px;}
.report-listing summary{cursor:pointer; font-size:13.5px; color:#C0273A; font-weight:700; list-style:none;}
.report-listing summary::-webkit-details-marker{display:none;}
.report-listing summary:hover{color:#9C2438;}
.report-listing select, .report-listing textarea, .report-listing input{width:100%; padding:7px 11px; line-height:19px; margin-bottom:8px; border:1.5px solid var(--border); border-radius:8px; font-size:13.5px; font-family:inherit;}

/* ==========================================================
   Consistent page hero (pricing, categories, contact, promote…)
   ========================================================== */
.page-hero{background:var(--violet); color:#fff; padding:46px 20px 40px; text-align:center; position:relative; overflow:hidden;}
/* Decorative blob removed — flat violet hero only. */
.page-hero .container{position:relative; z-index:2;}
.page-hero h1{color:#fff; font-size:36px; font-weight:800; letter-spacing:-0.6px; line-height:1.18; margin:0 auto 10px; max-width:740px;}
.page-hero .hero-sub{color:rgba(255,255,255,0.9); max-width:600px; margin:0 auto; font-size:15.5px;}
.page-hero .hero-eyebrow{display:inline-block; font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:#B9E9E2; margin-bottom:10px;}
@media (max-width:600px){ .page-hero{padding:34px 18px 30px;} .page-hero h1{font-size:26px;} }

/* ==========================================================
   Categories dropdown in the main nav
   ========================================================== */
.nav-dropdown{position:relative; display:inline-block;}
.nav-dropdown__toggle{display:inline-flex; align-items:center; gap:4px;}
.nav-dropdown .caret{font-size:10px; transition:transform .18s ease;}
.nav-dropdown__menu{
  position:absolute; top:calc(100% + 10px); left:0; z-index:60;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  box-shadow:0 14px 40px rgba(30,32,68,0.16);
  padding:8px; min-width:250px;
  display:grid; grid-template-columns:1fr 1fr; gap:1px 4px;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .16s ease;
}
/* little hover bridge so the menu doesn't vanish when moving the cursor down */
.nav-dropdown::after{content:""; position:absolute; top:100%; left:0; right:0; height:12px;}
.nav-dropdown:hover .nav-dropdown__menu{opacity:1; visibility:visible; transform:translateY(0);}
.nav-dropdown:hover .caret{transform:rotate(180deg);}
.nav-dropdown__menu a{
  margin:0 !important; padding:9px 12px; border-radius:8px; font-size:13.5px;
  color:var(--text); white-space:nowrap; font-weight:500;
}
.nav-dropdown__menu a:hover{background:#F1F1EE; color:var(--violet);}
.nav-dropdown__all{grid-column:1 / -1; border-top:1px solid var(--border); margin-top:4px !important; color:var(--violet) !important; font-weight:600 !important;}

/* Grouped category dropdown (2 nav groups, each its own column) — the
   grouping is a display-layer convenience only; every category link still
   points at its own independent root-level URL (see category & site spec,
   Section 2). */
.nav-dropdown__menu--grouped{min-width:420px;}
.nav-dropdown__group{display:flex; flex-direction:column;}
.nav-dropdown__group-label{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--muted); padding:8px 12px 4px;
}

/* Mobile (inside the hamburger): render as an inline accordion */
@media (max-width:1024px){
  .nav-dropdown{display:block; width:100%; border-bottom:1px solid var(--border);}
  .nav-dropdown__toggle{justify-content:space-between; padding:14px 4px; font-size:16px; width:100%;}
  .nav-dropdown__menu{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:none; border-radius:0; padding:0 0 8px 12px; min-width:0;
    grid-template-columns:1fr; display:none; margin:0;
  }
  .nav-dropdown.open .nav-dropdown__menu{display:grid;}
  .nav-dropdown.open .caret{transform:rotate(180deg);}
  .nav-dropdown__menu a{padding:11px 6px; font-size:15px; border-bottom:1px solid #F0F1F6;}
  .nav-dropdown__all{border-top:none;}
  .nav-dropdown__menu--grouped{min-width:0;}
  .nav-dropdown__group-label{padding:10px 6px 2px;}
}

/* ==========================================================
   v1.6.9 refinements — logo, listing detail, enquiry form
   ========================================================== */
/* 1. Bigger desktop logo (more room now Contact moved to footer) */
@media (min-width: 961px){
  .logo img{width:50px; height:50px;}
  .logo-name{font-size:23px;}
  .logo-tagline{font-size:11.5px;}
}

/* 2 & 3. Listing detail: stylish title, smaller/cleaner sub-headings */
.listing-title-row h1{
  font-size:23px; font-weight:800; letter-spacing:-0.3px; line-height:1.25;
  color:var(--navy);
}
@media (max-width:600px){ .listing-title-row h1{font-size:19px;} }
.listing-detail h2{
  font-size:17px; font-weight:700; color:var(--navy); margin:26px 0 12px;
  padding-bottom:8px; position:relative;
}
.listing-detail h2::after{content:""; position:absolute; left:0; bottom:0; width:34px; height:3px; border-radius:2px; background:var(--violet);}
.listing-sidebar h3{font-size:15.5px;}

/* 4. What We Offer: plain check list (matches pricing table style, no card boxes) */
.services-list{list-style:none; padding:0; margin:8px 0 20px;}
.services-list li{position:relative; padding:6px 0 6px 28px; border:none; background:none; line-height:1.5; font-size:15px; color:var(--text);}
.services-list li::before{
  content:"✓"; position:absolute; left:0; top:8px; width:18px; height:18px; border-radius:50%;
  background:#2FA84F; color:#fff; font-size:10px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.services-list li strong{color:var(--navy); font-weight:600;}

/* 5. Enquiry form — prominent, clearly labelled, mobile-friendly */
.enquiry-card{background:#fff; border:1px solid var(--border); border-radius:16px; padding:0; overflow:hidden; box-shadow:0 6px 20px rgba(43,45,90,0.07);}
.enquiry-card__head{background:var(--violet); color:#fff; padding:18px 22px;}
.enquiry-card__head h3{color:#fff; margin:0; font-size:18px;}
.enquiry-card__head p{color:rgba(255,255,255,0.85); margin:4px 0 0; font-size:13px;}
.enquiry-card__body{padding:20px 22px;}
#leadForm .fld{margin-bottom:13px;}

/* Unclaimed listing: blurred mock of the enquiry form behind a claim CTA overlay.
   The mock uses placeholder/fake values only — never real listing data — since
   a CSS blur can always be undone via view-source or devtools. */
.claim-teaser{position:relative; border-radius:16px; overflow:hidden;}
.claim-teaser__mock{filter:blur(5px); opacity:0.55; pointer-events:none; user-select:none;}
.claim-teaser__mock .fld{margin-bottom:13px;}
.claim-teaser__mock .fld-label{display:block; font-size:13.5px; font-weight:700; color:var(--navy); margin-bottom:6px;}
.claim-teaser__mock input, .claim-teaser__mock textarea{width:100%; padding:9px 12px; border:1.3px solid var(--border); border-radius:8px; font-size:13.5px; font-family:inherit; background:#fff; color:var(--text);}
.claim-teaser__overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:26px 22px; background:rgba(255,255,255,0.86); backdrop-filter:blur(3px);
}
.claim-teaser__overlay h3, .claim-teaser__overlay p{max-width:280px;}
.claim-teaser__overlay .btn{max-width:260px;}
@media (max-width:520px){ .claim-teaser__overlay{padding:18px 14px;} }
#leadForm label.fld-label{display:block; font-size:13.5px; font-weight:700; color:var(--navy); margin-bottom:6px;}
#leadForm input[type=text], #leadForm input[type=email], #leadForm input[type=tel], #leadForm textarea{
  width:100%; padding:7px 11px; line-height:19px; border:1.3px solid #8A9099; border-radius:7px;
  font-size:13.5px; font-family:inherit; background:#fff; color:#1F2233; margin-bottom:0;
}
#leadForm input::placeholder, #leadForm textarea::placeholder{color:var(--muted);}
#leadForm input:focus, #leadForm textarea:focus{outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(var(--violet-rgb),0.12);}
.consent-label{display:block; position:relative; padding-left:28px; width:100%; text-align:left; font-size:13px; color:var(--text); margin:8px 0 14px; line-height:1.5; cursor:pointer;}
.consent-label input[type=checkbox]{position:absolute; left:0; top:2px; width:18px; height:18px; margin:0; accent-color:var(--violet);}
.consent-label > span{display:inline;}

/* Category hero (flat violet banner with icon) + listing cover as a hero */
.cat-header.page-hero{text-align:left;}
.cat-header__inner{display:flex; align-items:center; gap:20px;}
.cat-header.page-hero h1{margin:0 0 6px; text-align:left; max-width:none;}
.cat-header.page-hero .hero-sub{margin:0 0 8px; text-align:left;}
.cat-header__icon{flex-shrink:0; width:72px; height:72px; border-radius:18px; background:rgba(255,255,255,0.14); display:flex; align-items:center; justify-content:center;}
.cat-header__icon img{width:38px; height:38px; filter:brightness(0) invert(1);}
.cat-header__count{display:inline-block; font-size:13px; font-weight:700; color:#fff; background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.32); border-radius:999px; padding:5px 14px;}
@media (max-width:600px){ .cat-header__inner{flex-direction:column; text-align:center;} .cat-header.page-hero h1, .cat-header.page-hero .hero-sub{text-align:center;} }

/* Give every listing a proper banner: style the cover placeholder as a flat violet hero */
.listing-cover-placeholder{background:var(--violet) !important;}

/* ==========================================================
   Account / profile forms (register + dashboard profile)
   ========================================================== */
.account-form .fld{margin-bottom:14px;}
.account-form .fld-label{display:block; font-size:13.5px; font-weight:700; color:var(--navy); margin-bottom:6px;}
.account-form .req{color:#F2617A;}
.account-form input{width:100%; padding:7px 11px; line-height:19px; border:1.3px solid #8A9099; border-radius:7px; font-size:13.5px; font-family:inherit; background:#fff; color:#1F2233;}
/* Business login card + links */
.login-box{max-width:440px; margin:0 auto; background:#fff; border:1px solid var(--border); border-radius:16px; padding:28px 26px; box-shadow:0 6px 22px rgba(43,45,90,0.08);}
.form-alert{background:#FDEBEE; color:#9C2438; border-left:4px solid #F2617A; padding:11px 14px; border-radius:9px; font-size:13.5px; margin-bottom:16px;}
.login-links{margin-top:20px; padding-top:18px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:16px; text-align:center;}
/* Forgot-password is a rare, secondary action — kept small and muted so it
   doesn't visually compete with the signup link below, which is what
   actually matters for this business (every new listing starts here). */
.login-links__forgot{font-size:13px; font-weight:400; color:var(--muted);}
.login-links__forgot:hover{color:var(--violet); text-decoration:underline;}
/* Signup — deliberately the most visually prominent thing on this page
   after the Log In button itself. A plain small text link here was easy
   to miss entirely; this reads as a real, inviting call to action instead. */
.login-links__signup{background:#EEF3FA; border:1.5px solid var(--violet-light); border-radius:12px; padding:14px 16px;}
.login-links__signup span{display:block; font-size:13px; color:var(--muted); margin-bottom:4px;}
.login-links__signup a{font-size:17px; font-weight:800; color:var(--violet);}
.login-links__signup a:hover{text-decoration:underline;}
.login-signup-top{background:#EEF3FA; border:1.5px solid var(--violet-light); border-radius:12px; padding:16px; text-align:center; margin-bottom:6px;}
.login-signup-top strong{display:block; font-size:18px; margin-bottom:2px;}
.login-signup-top span{display:block; font-size:13.5px; color:var(--muted); margin-bottom:12px;}
.login-divider{display:flex; align-items:center; gap:10px; margin:18px 0 14px; font-size:13px; color:var(--muted);}
.login-divider::before,.login-divider::after{content:""; flex:1; height:1px; background:var(--border);}
.account-form input::placeholder{color:var(--muted);}
.account-form input:focus{outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(var(--violet-rgb),0.12);}
.account-form__row{display:flex; gap:14px;}
.account-form__row .fld{flex:1; min-width:0;}
.form-divider{margin:18px 0 14px; padding-top:16px; border-top:1px solid var(--border); font-size:13px; font-weight:700; color:var(--navy); text-transform:uppercase; letter-spacing:0.5px;}
@media (max-width:520px){ .account-form__row{flex-direction:column; gap:0;} }

/* ==========================================================
   Listing hero banner — cover image with logo, title sits below
   (reverted to this simpler layout per feedback — the "profile
   header" row-beside-cover variant is gone). Logo frame still
   auto-shapes to the actual uploaded image via .listing-logo-avatar--wide
   in listing.php, so wide/wordmark logos aren't squeezed into a square.
   ========================================================== */
.listing-hero-wrap{position:relative; border-radius:20px; margin:10px 0 34px;}
.listing-cover{height:230px; border-radius:20px; background-size:cover; background-position:top center; background-color:#EDEDE9; border:5px solid #fff; box-shadow:0 10px 26px rgba(19,26,58,0.16);}
.listing-logo-avatar{
  position:absolute; bottom:-26px; right:24px;
  width:100px; height:100px; border-radius:16px;
  background-size:contain; background-repeat:no-repeat; background-position:center; background-color:#fff;
  background-origin:content-box; padding:10px; box-sizing:border-box;
  border:4px solid #fff; box-shadow:0 8px 20px rgba(19,26,58,0.18);
}
.listing-logo-avatar-placeholder{
  display:flex; align-items:center; justify-content:center;
  background:var(--violet); color:#fff;
  font-weight:700; font-size:26px;
}
.listing-logo-avatar--wide{width:180px; height:72px;}

.listing-lead{margin-top:2px; font-size:15.5px; color:var(--text); line-height:1.7;}
.listing-lead--rich p{margin:0 0 14px;}
.listing-lead--rich p:last-child{margin-bottom:0;}
.listing-lead--rich h2{font-size:21px; font-weight:800; letter-spacing:-0.2px; line-height:1.3; margin:22px 0 10px;}
.listing-lead--rich h3{font-size:17px; font-weight:700; letter-spacing:0; line-height:1.3; margin:18px 0 8px;}
.listing-lead--rich h4{font-size:15.5px; font-weight:700; line-height:1.3; margin:16px 0 6px;}
.listing-lead--rich h2:first-child, .listing-lead--rich h3:first-child, .listing-lead--rich h4:first-child{margin-top:0;}
.listing-lead--rich strong{font-weight:700; color:var(--navy);}

.share-row{display:flex; align-items:center; gap:10px; margin:0 0 22px; padding-left:2px; flex-wrap:wrap;}
.share-row__label{font-size:12.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.4px;}
.share-btn{display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; color:#fff; box-shadow:0 3px 8px rgba(43,45,90,0.14); transition:transform 0.15s, box-shadow 0.15s; flex-shrink:0;}
.share-btn svg{width:19px; height:19px;}
.share-btn:hover{transform:translateY(-2px); box-shadow:0 6px 14px rgba(43,45,90,0.22);}
.share-btn--fb{background:#1877F2;}
.share-btn--x{background:#000;}
.share-btn--pin{background:#E60023;}
.share-btn--wa{background:#25D366;}
@media (max-width:520px){ .share-btn{width:38px; height:38px;} .share-btn svg{width:18px; height:18px;} }

/* Image preview + remove on file inputs */
.img-preview{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;}
.img-preview__item{position:relative; width:92px; height:92px; border-radius:10px; overflow:hidden; border:1px solid var(--border); background:#f4f4f8;}
.img-preview__item img{width:100%; height:100%; object-fit:cover; display:block;}
.img-preview__remove{position:absolute; top:4px; right:4px; width:22px; height:22px; border:none; border-radius:50%; background:rgba(20,22,40,0.72); color:#fff; font-size:15px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.img-preview__remove:hover{background:#F2617A;}

/* ==========================================================
   Category page: sidebar + horizontal listing cards
   ========================================================== */
.cat-layout{display:grid; grid-template-columns:250px 1fr; gap:30px; align-items:start;}
.cat-sidebar{
  position:sticky; top:90px;
  background:#fff; border-radius:12px; padding:16px;
  box-shadow:0 8px 20px rgba(20,16,60,0.16);
}
.cat-sidebar__title{
  font-size:19px; font-weight:700; margin:0 0 12px; color:var(--navy);
  display:inline-block; padding-bottom:8px; border-bottom:3px solid var(--violet);
}
.cat-sidebar__list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px;}
.cat-sidebar__list a{display:block; padding:10px 14px; border-radius:9px; color:var(--text); font-size:14px; font-weight:500; text-decoration:none; transition:background .15s ease, color .15s ease;}
.cat-sidebar__list a:hover{background:#F1F1EE; color:var(--violet);}
.cat-sidebar__list a.active{background:var(--violet); color:#fff; font-weight:600;}

/* Gap between the filter bar and the results */
.cat-main .search-bar{margin-bottom:0;}
.cat-listing-list{display:flex; flex-direction:column; gap:14px; margin-top:22px;}

/* Horizontal card */
.h-card{display:flex; align-items:center; gap:18px; padding:16px 18px; background:#fff; border:1px solid var(--border); border-radius:14px; text-decoration:none; color:inherit; box-shadow:0 2px 10px rgba(43,45,90,0.05); transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;}
.h-card:hover{border-color:var(--violet); box-shadow:0 10px 26px rgba(var(--violet-rgb),0.13); transform:translateY(-1px);}
.h-card__logo{width:78px; height:78px; flex-shrink:0; border-radius:12px; background-size:cover; background-position:center; background-color:#EEF0Fb;}
/* Fallback-to-logo case only (see cardImage() / .listing-card-img--contain
   above for the same reasoning) — a logo must not be cropped like a cover
   photo can be. */
.h-card__logo--contain{background-size:contain; background-repeat:no-repeat; background-origin:content-box; padding:6px; box-sizing:border-box;}
.h-card__logo--ph{display:flex; align-items:center; justify-content:center; font-weight:800; font-size:24px; color:var(--violet); background:#EEF0FB;}
.h-card__body{flex:1; min-width:0;}
.h-card__body h3{margin:0 0 4px; font-size:17px; color:var(--navy); display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.h-card__badge{font-size:11.5px; font-weight:700; color:#5A3B00; background:var(--gold); padding:3px 9px; border-radius:20px;}
.h-card__meta{margin:0 0 5px; font-size:13px; color:var(--muted);}
.h-card__desc{margin:0; font-size:13.5px; color:var(--text); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.h-card__cta{flex-shrink:0; font-size:13.5px; font-weight:600; color:var(--violet); white-space:nowrap;}
@media (max-width:820px){
  .cat-layout{grid-template-columns:1fr; gap:18px;}
  .cat-sidebar{position:static;}
  .cat-sidebar__list{flex-direction:row; flex-wrap:wrap; gap:8px;}
  .cat-sidebar__list a{padding:7px 12px; font-size:13px; background:#F1F1EE;}
}
@media (max-width:520px){
  .h-card{flex-wrap:wrap; gap:12px;}
  .h-card__logo{width:56px; height:56px;}
  .h-card__cta{width:100%; text-align:right;}
}

/* Rich-text "Full Description" editor (assets/js/main.js) — deliberately
   plain, self-contained styling that doesn't depend on which page's
   textarea rules would otherwise apply, since this replaces
   textarea.rich-editor-source on four different pages with different
   surrounding form styles. */
.rich-editor{border:1.5px solid var(--border); border-radius:10px; overflow:hidden; background:#fff;}
.rich-editor__toolbar{display:flex; gap:4px; padding:6px; background:#FAFAFD; border-bottom:1px solid var(--border);}
.rich-editor__btn{border:1px solid var(--border); background:#fff; border-radius:6px; padding:5px 10px; font-size:13px; cursor:pointer; color:var(--navy); transition:all .12s ease;}
.rich-editor__btn:hover{background:#EEF3FA; border-color:var(--violet);}
.rich-editor__area{min-height:110px; padding:12px 14px; font-size:14px; line-height:1.55; outline:none;}
.rich-editor__area:focus{box-shadow:inset 0 0 0 2px rgba(var(--violet-rgb),0.15);}
.rich-editor__area h2{font-size:18px; margin:6px 0 4px;}
.rich-editor__area h3{font-size:16px; margin:6px 0 4px;}
.rich-editor__area p{margin:0 0 8px;}
.rich-editor__area ul, .rich-editor__area ol{margin:0 0 8px; padding-left:22px;}
.rich-editor__area:empty::before{content:attr(data-placeholder); color:var(--muted);}

/* "Check your inbox / spam" notice — renderEmailSentNotice() (rrp.43) */
.email-sent-notice{display:flex; gap:14px; align-items:flex-start; text-align:left;
  background:#FFF8E6; border:1px solid #F2D58A; border-left:5px solid #E0A400; border-radius:12px;
  padding:16px 18px; margin:0 0 18px; color:var(--navy);}
.email-sent-notice__icon{font-size:26px; line-height:1; flex-shrink:0; margin-top:2px;}
.email-sent-notice__body p{margin:0 0 8px; font-size:15px; line-height:1.55;}
.email-sent-notice__body p:last-child{margin-bottom:0;}
.email-sent-notice__title{font-weight:700; font-size:16px !important;}
.email-sent-notice__from{font-size:13px !important; opacity:.85; word-break:break-word;}
.email-spam-hint{display:block; margin-top:6px; font-size:13px;}

/* Claim page (rrp.46): waiting enquiries + "keep these ready" checklist */
.claim-waiting{background:#EAF5EE; color:#1E5E37; border-radius:8px; padding:10px 12px; font-size:14px; margin:12px 0;}
.claim-checklist{background:#F4F5FB; border-radius:10px; padding:12px 14px; margin:12px 0 16px; font-size:14px; line-height:1.6;}
.claim-checklist ul{margin:6px 0 0 18px; padding:0;}

/* ==========================================================================
   rrp.47 — "24/7 Dispatch" theme
   Charcoal + safety orange, Archivo (condensed, bold) headings, Source Sans 3
   body. Header, emergency strip, heroes, footer and shared components for
   every page; homepage-only blocks are the .hp-* classes further down.
   ========================================================================== */
body{font-size:17px; line-height:1.55;}
button, input, select, textarea{font-family:inherit;}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--navy);}
h1,h2{font-stretch:85%; font-weight:850; letter-spacing:-.2px;}
h3{font-weight:750; letter-spacing:0;}
.muted{color:var(--muted);}
a:hover{color:var(--violet-dark);}
.section h2::after{border-radius:0; height:4px; width:48px; background:var(--violet);}
.btn{border-radius:8px; font-weight:700; font-size:15px;}
.btn-primary{box-shadow:0 6px 16px rgba(var(--violet-rgb),.22);}
.btn-primary:hover{background:var(--violet-dark); opacity:1;}
:focus-visible{outline:3px solid var(--orange-bright); outline-offset:2px;}

/* ---- Emergency strip (above the header, every public page) ---- */
.emergency-strip{background:var(--violet); color:#fff; font-size:15px; font-weight:700;}
.emergency-strip .container{display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:8px; padding-bottom:8px; flex-wrap:wrap;}
.emergency-strip a{color:#fff; text-decoration:underline; text-underline-offset:3px; white-space:nowrap;}
.emergency-strip a:hover{color:#fff; text-decoration-thickness:2px;}

/* ---- Header: charcoal bar ---- */
.site-header{background:var(--charcoal); border-bottom:1px solid #000;}
.logo{color:#fff;}
.logo:hover{color:#fff;}
.logo-name{font-family:var(--font-display); font-stretch:85%; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color:#fff;}
.logo-name .hl{color:var(--orange-bright);}
.logo-tagline{display:none;}
.main-nav a{color:#E9EAEC; font-weight:600; font-size:16px;}
.main-nav a:hover{color:#fff;}
.main-nav a.nav-highlight{color:var(--orange-bright);}
.main-nav a.nav-highlight::before{content:none;}
.main-nav a.nav-highlight:hover{color:#FFB37D;}
.main-nav a.btn-primary{background:transparent; border:2px solid var(--orange-bright); box-shadow:none; padding:8px 16px; border-radius:6px;}
.main-nav a.btn-primary:hover{background:var(--violet); border-color:var(--violet);}
.nav-toggle span{background:#fff;}
.nav-dropdown__menu{background:#fff;}
.nav-dropdown__menu a{color:var(--text);}
.nav-dropdown__menu a:hover{background:#F1F1EE; color:var(--violet-dark);}
@media (max-width:1024px){
  .main-nav{border-top-color:var(--charcoal-line);}
  .main-nav a{border-bottom-color:var(--charcoal-line); color:#fff;}
  .nav-dropdown{border-bottom-color:var(--charcoal-line);}
  .nav-dropdown__menu{background:var(--charcoal-2); border:none; box-shadow:none;}
  .nav-dropdown__menu a{color:#E9EAEC; border-bottom-color:var(--charcoal-line);}
  .nav-dropdown__menu a:hover{background:var(--charcoal-3); color:#fff;}
  .nav-dropdown__group-label{color:var(--orange-bright);}
  .main-nav a.btn-primary{background:var(--violet); border-color:var(--violet);}
  .logo-short{font-family:var(--font-display);}
}

/* ---- Heroes: charcoal everywhere (category, pricing, contact … pages) ---- */
.hero, .page-hero{background:var(--charcoal);}
.hero h1, .page-hero h1{font-family:var(--font-display); font-stretch:80%; font-weight:900; text-transform:uppercase; letter-spacing:-.2px; line-height:1.02;}
.page-hero .hero-eyebrow, .hero-eyebrow{color:var(--orange-bright); background:none; border:none; padding:0; letter-spacing:.14em; font-weight:700;}
.page-hero .hero-sub, .hero-sub{color:var(--on-dark);}
.cat-header__icon{background:var(--charcoal-3); border:1px solid var(--charcoal-line);}
.cat-header__count{background:var(--charcoal-3); border-color:var(--charcoal-line);}
.search-bar select, .search-bar input[type=text]{font-size:16px;}

/* ---- Shared components ---- */
.section-intro .eyebrow{color:var(--violet);}
.section--tint{background:#ECECE8; border-color:#E2E3E6;}
.listing-card, .guide-card, .faq-item, .how-step{border-radius:12px;}
.listing-card:hover{border-color:var(--violet);}
.listing-card p, .listing-card .listing-card-desc{color:var(--text);}
.faq-item summary{font-family:var(--font-display); font-weight:700; font-size:17px;}
.guide-card h3 .tick{background:#FFEDE3; color:var(--violet);}
.how-step__num{background:var(--charcoal); box-shadow:none; font-family:var(--font-display);}
.how-step:nth-child(2) .how-step__num, .how-step:nth-child(3) .how-step__num{background:var(--charcoal); box-shadow:none;}

/* ---- Footer: near-black, orange column headings ---- */
.site-footer{background:var(--footer-bg); color:#B3B8C0; margin-top:56px;}
.footer-grid h3{font-family:var(--font-display); color:var(--orange-bright); font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:800;}
.footer-grid a{color:#C8CCD2; font-size:15px; line-height:2;}
.footer-grid a:hover{color:#fff;}
.site-footer .muted{color:#B3B8C0; font-size:15px;}
.footer-bottom{color:#8D939C; font-size:13.5px; border-top-color:#262A31;}

/* ==========================================================================
   Homepage (.hp-*)
   ========================================================================== */
.hp-hero{background:var(--charcoal); color:#fff; padding:56px 0 64px;}
.hp-hero__grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:48px; align-items:start;}
.hp-hero__eyebrow{display:block; font-weight:700; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-bright); margin-bottom:16px;}
.hp-hero h1{color:#fff; font-family:var(--font-display); font-stretch:78%; font-weight:900; font-size:68px; line-height:1; text-transform:uppercase; letter-spacing:-.3px; margin:0 0 18px;}
.hp-hero__sub{color:var(--on-dark); font-size:20px; max-width:620px; margin:0 0 22px;}
.hp-hero .leads-badge{margin-bottom:18px;}
.hp-triage__label{font-weight:700; font-size:15px; margin:0 0 10px; color:#fff;}
.hp-triage{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 20px;}
.hp-triage a{display:inline-flex; align-items:center; min-height:46px; padding:10px 16px; background:var(--charcoal-3); border:1px solid var(--charcoal-line); border-radius:8px; color:#fff; font-weight:700; font-size:16px;}
.hp-triage a:hover{border-color:var(--orange-bright); color:#fff; background:#2E333B;}
.hp-search{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; background:#fff; border-radius:10px; overflow:visible; position:relative;}
.hp-search__field{display:flex; flex-direction:column; padding:10px 16px; border-right:1px solid #E2E3E6; min-width:0; position:relative;}
.hp-search__field:nth-child(2){border-right:none;}
.hp-search__label{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#5A606B;}
.hp-search select, .hp-search input[type=text]{border:none; padding:4px 0; font-size:17px; font-weight:700; color:var(--charcoal); background:transparent; width:100%; min-width:0; outline:none;}
.hp-search__field:focus-within{box-shadow:inset 0 -3px 0 var(--violet);}
.hp-search button{border:none; background:var(--violet); color:#fff; font-family:var(--font-display); font-weight:800; font-size:18px; letter-spacing:.04em; text-transform:uppercase; padding:0 30px; min-height:62px; cursor:pointer; border-radius:0 10px 10px 0;}
.hp-search button:hover{background:var(--violet-dark);}
.hp-search .city-suggestions{top:100%; left:0; right:0; z-index:30;}
.hp-hero__alt{margin:16px 0 0; color:var(--on-dark);}
.hp-hero__alt a{color:var(--orange-bright); font-weight:700; text-decoration:underline; text-underline-offset:2px;}
.hp-hero__alt a:hover{color:#FFB37D;}
.hp-first48{background:var(--charcoal-2); border:1px solid #333840; border-radius:14px; padding:24px;}
.hp-first48__kicker{margin:0 0 2px; font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-bright);}
.hp-first48__sub{margin:0 0 16px; color:var(--on-dark); font-size:15px;}
.hp-first48 ol{list-style:none; margin:0; padding:0;}
.hp-first48 li{position:relative; padding:0 0 16px 30px;}
.hp-first48 li:last-child{padding-bottom:0;}
.hp-first48 li::before{content:""; position:absolute; left:0; top:6px; width:14px; height:14px; border-radius:50%; background:var(--orange-bright);}
.hp-first48 li:not(:last-child)::after{content:""; position:absolute; left:6px; top:22px; bottom:0; width:2px; background:var(--charcoal-line);}
.hp-first48 strong{display:block; color:#fff;}
.hp-first48 span{color:var(--on-dark); font-size:15px;}
.hp-first48 a{display:inline-block; margin-top:16px; color:var(--orange-bright); font-weight:700;}

.hp-trust{background:#fff; border-radius:0 0 14px 14px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); box-shadow:0 10px 30px rgba(21,24,29,.08);}
.hp-trust > div{padding:20px 24px; border-right:1px solid #E2E3E6;}
.hp-trust > div:last-child{border-right:none;}
.hp-trust strong{display:block; font-family:var(--font-display); font-size:19px; font-weight:800; color:var(--charcoal);}
.hp-trust span{color:#4A505A; font-size:16px;}

.hp-h2{font-family:var(--font-display); font-stretch:85%; font-weight:900; font-size:40px; text-transform:uppercase; line-height:1.05; margin:0 0 10px;}
.hp-section{padding-top:64px;}
.hp-section__lead{color:#4A505A; max-width:760px; margin:0 0 24px;}
.hp-cats{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px;}
.hp-cat{display:flex; flex-direction:column; justify-content:space-between; gap:18px; min-height:170px; padding:20px; background:var(--charcoal); border-radius:12px; color:#fff; transition:transform .12s ease, box-shadow .15s ease;}
.hp-cat:hover{color:#fff; transform:translateY(-3px); box-shadow:0 14px 30px rgba(21,24,29,.25);}
.hp-cat__top{display:flex; justify-content:space-between; align-items:center;}
.hp-cat__code{font-family:var(--font-display); font-weight:800; font-size:13px; letter-spacing:.14em; color:var(--orange-bright);}
.hp-cat__icon{width:40px; height:40px; border-radius:10px; background:var(--charcoal-3); display:flex; align-items:center; justify-content:center;}
.hp-cat__icon img{width:22px; height:22px; filter:brightness(0) invert(1);}
.hp-cat strong{font-family:var(--font-display); font-size:20px; line-height:1.15; font-weight:800;}
.hp-cat small{display:block; color:var(--on-dark); font-size:14px; margin-top:4px; font-weight:400;}
.hp-also{margin:16px 0 0; color:#4A505A; font-size:16px;}
.hp-also a{color:var(--text); font-weight:600;}
.hp-also a:hover{color:var(--violet);}
.hp-cities{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; align-items:center;}
.hp-cities span{font-weight:700; margin-right:4px;}
.hp-cities a{background:#fff; border:1px solid #D7D8DB; border-radius:999px; padding:7px 14px; color:var(--text); font-weight:600; font-size:15px;}
.hp-cities a:hover{border-color:var(--violet); color:var(--violet-dark);}

.hp-steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;}
.hp-step{border-top:4px solid var(--violet); padding-top:14px;}
.hp-step__num{display:block; font-family:var(--font-display); font-weight:900; font-size:44px; line-height:1.1; color:#C9CBCF;}
.hp-step h3{font-size:20px; margin:4px 0 6px;}
.hp-step p{color:#4A505A; margin:0;}
.hp-steps__cta{margin-top:26px;}

.hp-section .listing-grid{margin-top:4px;}
.hp-cta{margin:64px auto 0; background:var(--charcoal); color:#fff; border-radius:14px; padding:40px 44px; display:flex; justify-content:space-between; align-items:center; gap:24px; border-left:10px solid var(--violet);}
.hp-cta h2{color:#fff; font-family:var(--font-display); font-stretch:85%; font-weight:900; font-size:34px; text-transform:uppercase; margin:0 0 6px; padding:0;}
.hp-cta h2::after{content:none;}
.hp-cta p{margin:0; color:var(--on-dark);}
.hp-cta .btn{white-space:nowrap; text-transform:uppercase; letter-spacing:.04em; font-family:var(--font-display); font-weight:800; font-size:16px; padding:16px 26px;}
.hp-cta__links{display:flex; gap:10px; flex-wrap:wrap; flex-shrink:0;}
.hp-cta__links .btn:not(.btn-primary){background:transparent; color:#fff; border:2px solid var(--charcoal-line);}
.hp-cta__links .btn:not(.btn-primary):hover{border-color:#fff; color:#fff;}

@media (max-width:1100px){
  .hp-cats{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:900px){
  .hp-hero{padding:32px 0 40px;}
  .hp-hero__grid{grid-template-columns:1fr; gap:28px;}
  .hp-hero h1{font-size:44px;}
  .hp-hero__sub{font-size:18px;}
  .hp-trust{grid-template-columns:1fr;}
  .hp-trust > div{border-right:none; border-bottom:1px solid #E2E3E6;}
  .hp-trust > div:last-child{border-bottom:none;}
  .hp-steps{grid-template-columns:1fr; gap:18px;}
  .hp-cta{flex-direction:column; align-items:flex-start; padding:30px 24px;}
  .hp-h2, .hp-cta h2{font-size:30px;}
}
@media (max-width:640px){
  .emergency-strip{font-size:14px;}
  .hp-hero h1{font-size:38px;}
  .hp-search{grid-template-columns:1fr;}
  .hp-search__field{border-right:none; border-bottom:1px solid #E2E3E6;}
  .hp-search button{border-radius:0 0 10px 10px; min-height:56px;}
  .hp-cats{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
  .hp-cat{min-height:120px; padding:16px;}
  .hp-cat strong{font-size:17px;}
  .hp-cat small{display:none;}
  .hp-cta__links, .hp-cta__links .btn{width:100%; text-align:center;}
}
@media (prefers-reduced-motion:reduce){ .hp-cat{transition:none;} .hp-cat:hover{transform:none;} }
@media (max-width:1024px){
  /* The condensed wordmark fits on phones, so show the full name instead of initials */
  .logo-full{display:inline; font-size:18px;}
  .logo-short{display:none;}
  .logo img{width:38px; height:38px;}
}
@media (max-width:360px){ .logo-full{font-size:15px;} }
/* Leads badge on the dark homepage hero */
.hp-hero .leads-badge, .hp-hero .leads-badge--early{background:var(--charcoal-3); border:1px solid var(--orange-bright); color:#E9EAEC; box-shadow:none;}
.hp-hero .leads-badge strong, .hp-hero .leads-badge--early .leads-badge__text strong{color:var(--orange-bright);}
/* Section headings site-wide: uppercase condensed, like the homepage (not body copy inside listings) */
.section > h2, .section-intro h2, .cta-section h2{font-stretch:85%; font-weight:900; text-transform:uppercase; letter-spacing:0;}
/* Big filled areas are charcoal, not orange — orange stays for actions and accents */
.gm-hero, .submit-hero{background:var(--charcoal);}
.gm-hero h1, .submit-hero h1{color:#fff; font-stretch:80%; font-weight:900; text-transform:uppercase;}
.listing-cover-placeholder{background:var(--charcoal) !important;}
.enquiry-card__head{background:var(--charcoal);}
.category-card .cat-icon{background:var(--charcoal);}
.badge-verified{background:#1D7A4E;}
/* Emergency strip: shorter wording on phones */
.emergency-strip__short{display:none;}
@media (max-width:640px){
  .emergency-strip__long{display:none;}
  .emergency-strip__short{display:inline;}
}
/* "Early" leads badge (shown before there are enough enquiries) — light orange, readable */
.leads-badge--early{background:#FFF1E8; border-color:var(--violet); color:#7C2D12;}
.leads-badge--early .leads-badge__text strong{color:var(--violet-dark);}
@media (max-width:640px){ .emergency-strip .container{flex-wrap:nowrap;} }

/* rrp.48: main category cards list their specialist categories */
.hp-cats{align-items:stretch;}
.hp-cat{justify-content:flex-start; gap:0; padding:0; min-height:0; overflow:hidden;}
.hp-cat:hover{transform:none; box-shadow:none;}
.hp-cat__main{display:flex; flex-direction:column; gap:18px; padding:20px 20px 16px; color:#fff; min-height:150px; justify-content:space-between;}
.hp-cat__main:hover{color:#fff; background:#1E2228;}
.hp-cat__main:hover strong{text-decoration:underline; text-decoration-color:var(--orange-bright); text-underline-offset:4px;}
.hp-cat__subs{list-style:none; margin:0; padding:4px 0 10px; border-top:1px solid var(--charcoal-line);}
.hp-cat__subs a{display:flex; align-items:center; gap:8px; min-height:40px; padding:8px 20px; color:#E9EAEC; font-size:15px; font-weight:600; line-height:1.3;}
.hp-cat__subs a::before{content:""; width:6px; height:6px; flex-shrink:0; background:var(--orange-bright); border-radius:1px;}
.hp-cat__subs a:hover{color:#fff; background:var(--charcoal-2);}
@media (max-width:640px){
  .hp-cats{grid-template-columns:1fr;}
  .hp-cat__main{min-height:0;}
  .hp-cat small{display:block;}
}
.hp-cities{margin-top:22px;}