/*
Theme Name: Findpk Yellow Pages
Theme URI: https://findpk.qzz.io
Author: Findpk Team
Author URI: https://findpk.qzz.io
Description: Custom WordPress business directory theme for Findpk Yellow Pages — Pakistan's business directory. Built to replicate the Findpk design system with custom post types for business listings, categories and cities.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: findpk
Tags: directory, business, custom-colors, custom-menu, full-width-template, responsive-layout, blog, one-column, two-columns
*/

/* =========================================================
   0. ROOT VARIABLES / DESIGN TOKENS
   ========================================================= */
:root{
  --fp-navy: #1a1c2b;
  --fp-navy-light: #262940;
  --fp-navy-lighter: #333653;
  --fp-yellow: #f5c518;
  --fp-yellow-dark: #dba90f;
  --fp-white: #ffffff;
  --fp-offwhite: #f7f7f9;
  --fp-gray-50: #f8f9fb;
  --fp-gray-100: #eef0f4;
  --fp-gray-200: #dde1e8;
  --fp-gray-400: #9aa0b0;
  --fp-gray-600: #666b7a;
  --fp-gray-800: #33364a;
  --fp-text: #1a1c2b;
  --fp-muted: #666b7a;
  --fp-border: #e6e8ee;
  --fp-radius-sm: 6px;
  --fp-radius: 12px;
  --fp-radius-lg: 20px;
  --fp-shadow: 0 2px 10px rgba(26,28,43,0.06);
  --fp-shadow-md: 0 8px 24px rgba(26,28,43,0.10);
  --fp-shadow-lg: 0 20px 48px rgba(26,28,43,0.14);
  --fp-container: 1200px;
  --fp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================================
   1. RESET & BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--fp-font);
  color: var(--fp-text);
  background: var(--fp-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
input, select, textarea{ font-family: inherit; font-size:1rem; }
h1,h2,h3,h4,h5,h6{ margin:0 0 .5em; font-weight:700; line-height:1.2; }
p{ margin:0 0 1em; }
.screen-reader-text{
  position:absolute !important; clip:rect(1px,1px,1px,1px);
  width:1px; height:1px; overflow:hidden; word-wrap:normal !important;
}

.fp-container{
  max-width: var(--fp-container);
  margin: 0 auto;
  padding: 0 24px;
}

/* =========================================================
   2. BUTTONS
   ========================================================= */
.fp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid transparent;
  transition: all .2s ease;
  white-space: nowrap;
}
.fp-btn-primary{ background: var(--fp-yellow); color: var(--fp-navy); }
.fp-btn-primary:hover{ background: var(--fp-yellow-dark); transform: translateY(-1px); }
.fp-btn-outline{ background: transparent; border-color: rgba(255,255,255,.35); color: var(--fp-white); }
.fp-btn-outline:hover{ background: rgba(255,255,255,.1); }
.fp-btn-dark{ background: var(--fp-navy); color:#fff; }
.fp-btn-dark:hover{ background: var(--fp-navy-light); }
.fp-btn-block{ width:100%; }

/* =========================================================
   3. HEADER
   ========================================================= */
.fp-header{
  position: sticky; top:0; z-index: 100;
  background: var(--fp-navy);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.fp-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px; padding: 16px 24px;
}
.fp-logo{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.25rem; color:#fff; flex-shrink:0; }
.fp-logo-mark{
  width:36px; height:36px; border-radius:8px;
  background: var(--fp-yellow); color: var(--fp-navy);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:1.1rem;
}
.fp-logo-text small{ display:block; font-weight:500; font-size:.68rem; color: var(--fp-gray-400); }

.fp-primary-nav{ display:flex; }
.fp-primary-nav ul{ display:flex; gap: 28px; align-items:center; }
.fp-primary-nav a{
  color: rgba(255,255,255,.85); font-weight:500; font-size:.95rem;
  transition: color .2s;
}
.fp-primary-nav a:hover, .fp-primary-nav .current-menu-item > a{ color: var(--fp-yellow); }

.fp-header-actions{ display:flex; align-items:center; gap: 12px; flex-shrink:0; }
.fp-icon-btn{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.08); color:#fff;
  transition: background .2s;
}
.fp-icon-btn:hover{ background: rgba(255,255,255,.18); }

.fp-menu-toggle{
  display:none; background:none; border:none; color:#fff;
  width:40px; height:40px; align-items:center; justify-content:center;
}
.fp-menu-toggle span, .fp-menu-toggle span::before, .fp-menu-toggle span::after{
  content:""; display:block; width:22px; height:2px; background:#fff;
  position:relative; transition: all .2s;
}
.fp-menu-toggle span::before{ position:absolute; top:-7px; }
.fp-menu-toggle span::after{ position:absolute; top:7px; }

/* =========================================================
   4. HERO / SEARCH
   ========================================================= */
.fp-hero{
  background: linear-gradient(160deg, var(--fp-navy) 0%, var(--fp-navy-light) 100%);
  color:#fff;
  padding: 72px 24px 90px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.fp-hero::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 300px at 80% 0%, rgba(245,197,24,.12), transparent 60%);
  pointer-events:none;
}
.fp-hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(245,197,24,.12); color: var(--fp-yellow);
  padding: 6px 16px; border-radius: 999px; font-size:.82rem; font-weight:600;
  margin-bottom: 20px;
}
.fp-hero h1{
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  max-width: 820px; margin: 0 auto 18px;
  color: #fff;
}
.fp-hero-sub{
  max-width: 620px; margin: 0 auto 36px;
  color: rgba(255,255,255,.72); font-size: 1.05rem;
}

.fp-search-form{
  max-width: 720px; margin: 0 auto;
  background:#fff; border-radius: 16px; padding: 8px;
  display:flex; gap:8px; box-shadow: var(--fp-shadow-lg);
  position:relative; z-index:2;
}
.fp-search-form input[type="search"], .fp-search-form input[type="text"]{
  flex:1; border:none; outline:none; padding: 14px 18px;
  font-size:1rem; color: var(--fp-text); background:transparent; border-radius: 10px;
}
.fp-search-form button{
  background: var(--fp-navy); color:#fff; border:none; border-radius: 10px;
  padding: 0 28px; font-weight:600; display:flex; align-items:center; gap:8px;
  transition: background .2s;
}
.fp-search-form button:hover{ background: var(--fp-navy-light); }

.fp-popular-tags{
  margin-top: 22px; display:flex; align-items:center; justify-content:center;
  gap: 10px; flex-wrap:wrap; font-size:.9rem; color: rgba(255,255,255,.6);
  position:relative; z-index:2;
}
.fp-popular-tags a{
  color: rgba(255,255,255,.85); background: rgba(255,255,255,.08);
  padding: 5px 14px; border-radius: 999px; transition: background .2s;
}
.fp-popular-tags a:hover{ background: rgba(255,255,255,.18); color: var(--fp-yellow); }

/* Stats strip */
.fp-stats{
  background: #fff; margin: -46px auto 0; max-width: 1040px;
  position:relative; z-index:3; border-radius: var(--fp-radius-lg);
  box-shadow: var(--fp-shadow-lg);
  display:grid; grid-template-columns: repeat(4, 1fr);
}
.fp-stat{ text-align:center; padding: 28px 16px; border-right: 1px solid var(--fp-border); }
.fp-stat:last-child{ border-right:none; }
.fp-stat .num{ font-size: 1.9rem; font-weight:800; color: var(--fp-navy); }
.fp-stat .label{ color: var(--fp-muted); font-size:.88rem; margin-top:4px; }

/* =========================================================
   5. SECTIONS COMMON
   ========================================================= */
.fp-section{ padding: 90px 24px 70px; }
.fp-section-tight{ padding: 60px 24px; }
.fp-section-head{ text-align:center; max-width: 640px; margin: 0 auto 44px; }
.fp-eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:.08em;
  font-size:.78rem; font-weight:700; color: var(--fp-yellow-dark);
  background: rgba(245,197,24,.14); padding: 5px 14px; border-radius:999px;
  margin-bottom: 14px;
}
.fp-section-head h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); }
.fp-section-head p{ color: var(--fp-muted); }
.fp-section-foot{ text-align:center; margin-top: 40px; }

/* =========================================================
   6. CATEGORY GRID
   ========================================================= */
.fp-cat-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:18px;
}
.fp-cat-card{
  background: var(--fp-gray-50); border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius); padding: 22px;
  transition: all .2s ease; display:flex; flex-direction:column; gap:6px;
}
.fp-cat-card:hover{ border-color: var(--fp-yellow); box-shadow: var(--fp-shadow-md); transform: translateY(-3px); background:#fff; }
.fp-cat-icon{
  width:44px; height:44px; border-radius:10px; background: var(--fp-navy);
  color: var(--fp-yellow); display:flex; align-items:center; justify-content:center;
  font-weight:800; margin-bottom: 6px;
}
.fp-cat-card h3{ font-size: 1rem; margin-bottom: 2px; }
.fp-cat-card span{ color: var(--fp-muted); font-size:.85rem; }

/* =========================================================
   7. LISTING CARDS
   ========================================================= */
.fp-listing-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.fp-listing-card{
  background:#fff; border: 1px solid var(--fp-border); border-radius: var(--fp-radius);
  overflow:hidden; transition: all .2s ease; display:flex; flex-direction:column;
}
.fp-listing-card:hover{ box-shadow: var(--fp-shadow-md); transform: translateY(-3px); }
.fp-listing-media{ position:relative; height:170px; background: var(--fp-gray-100); }
.fp-listing-media img{ width:100%; height:100%; object-fit:cover; }
.fp-badge-verified{
  position:absolute; top:12px; left:12px; background: var(--fp-navy); color:#fff;
  font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:999px;
  display:flex; align-items:center; gap:4px;
}
.fp-rating{
  position:absolute; top:12px; right:12px; background:#fff; color:var(--fp-text);
  font-size:.78rem; font-weight:700; padding:4px 9px; border-radius:999px;
  display:flex; align-items:center; gap:4px; box-shadow: var(--fp-shadow);
}
.fp-rating .star{ color: var(--fp-yellow-dark); }
.fp-listing-body{ padding: 18px 20px 20px; flex:1; display:flex; flex-direction:column; gap:8px; }
.fp-listing-cat{ font-size:.78rem; color: var(--fp-yellow-dark); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.fp-listing-card h3{ font-size: 1.08rem; }
.fp-listing-tags{ display:flex; gap:6px; flex-wrap:wrap; }
.fp-listing-tags span{
  background: var(--fp-gray-100); color: var(--fp-gray-800); font-size:.76rem;
  padding: 3px 10px; border-radius:999px;
}
.fp-listing-meta{ color: var(--fp-muted); font-size:.86rem; display:flex; flex-direction:column; gap:3px; margin-top:2px; }
.fp-listing-meta span{ display:flex; align-items:center; gap:6px; }
.fp-listing-footer{ padding: 14px 20px; border-top:1px solid var(--fp-border); }
.fp-listing-footer a{ font-weight:600; color: var(--fp-navy); font-size:.92rem; display:flex; align-items:center; gap:6px; }
.fp-listing-footer a:hover{ color: var(--fp-yellow-dark); }

/* =========================================================
   8. CITY GRID
   ========================================================= */
.fp-city-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fp-city-card{
  position:relative; border-radius: var(--fp-radius); overflow:hidden; height: 130px;
  background: linear-gradient(140deg, var(--fp-navy), var(--fp-navy-light));
  display:flex; align-items:flex-end; padding: 16px 18px; color:#fff;
  transition: transform .2s ease;
}
.fp-city-card:hover{ transform: translateY(-3px); }
.fp-city-card::after{ content:""; position:absolute; inset:0; background: radial-gradient(220px 120px at 90% 0%, rgba(245,197,24,.25), transparent 70%); }
.fp-city-card .fp-city-inner{ position:relative; z-index:1; }
.fp-city-card h3{ font-size: 1.05rem; margin-bottom:2px; }
.fp-city-card span{ font-size:.82rem; color: rgba(255,255,255,.7); }

/* =========================================================
   9. CTA
   ========================================================= */
.fp-cta{
  background: var(--fp-navy); color:#fff; border-radius: var(--fp-radius-lg);
  margin: 0 24px; padding: 56px 48px;
  display:grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items:center;
}
.fp-cta h2{ color:#fff; font-size: clamp(1.5rem, 3vw, 2rem); }
.fp-cta p{ color: rgba(255,255,255,.7); }
.fp-cta-actions{ display:flex; gap:14px; margin-top:20px; }
.fp-cta-list{ display:flex; flex-direction:column; gap: 14px; }
.fp-cta-list li{ display:flex; align-items:flex-start; gap:10px; color: rgba(255,255,255,.85); font-size:.94rem; }
.fp-cta-list .check{
  width:22px; height:22px; border-radius:50%; background: var(--fp-yellow); color: var(--fp-navy);
  display:flex; align-items:center; justify-content:center; font-size:.75rem; flex-shrink:0; font-weight:900;
}

/* =========================================================
   10. FOOTER
   ========================================================= */
.fp-footer{ background: var(--fp-navy); color: rgba(255,255,255,.72); margin-top: 90px; }
.fp-footer-top{
  padding: 64px 24px 40px;
  display:grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px;
}
.fp-footer-about .fp-logo{ margin-bottom: 14px; }
.fp-footer-about p{ font-size:.92rem; max-width: 320px; }
.fp-footer-contact{ margin-top: 16px; display:flex; flex-direction:column; gap:8px; font-size:.9rem; }
.fp-footer-contact li{ display:flex; align-items:center; gap:8px; }
.fp-footer h4{ color:#fff; font-size:.95rem; margin-bottom: 16px; }
.fp-footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.fp-footer-col a{ font-size:.9rem; transition: color .2s; }
.fp-footer-col a:hover{ color: var(--fp-yellow); }

.fp-footer-cats{ padding: 24px 24px; border-top:1px solid rgba(255,255,255,.08); }
.fp-footer-cats-label{ font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color: rgba(255,255,255,.45); margin-bottom:12px; }
.fp-footer-cats-list{ display:flex; flex-wrap:wrap; gap:10px; }
.fp-footer-cats-list a{
  font-size:.82rem; background: rgba(255,255,255,.06); padding:6px 14px; border-radius:999px;
}
.fp-footer-cats-list a:hover{ background: rgba(255,255,255,.14); color: var(--fp-yellow); }

.fp-footer-bottom{
  border-top:1px solid rgba(255,255,255,.08); padding: 20px 24px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.85rem; color: rgba(255,255,255,.5);
}
.fp-footer-bottom-links{ display:flex; gap: 18px; }
.fp-footer-bottom-links a:hover{ color: var(--fp-yellow); }

/* =========================================================
   11. BLOG / SINGLE / PAGE / ARCHIVE
   ========================================================= */
.fp-page-header{
  background: var(--fp-navy); color:#fff; padding: 54px 24px; text-align:center;
}
.fp-page-header h1{ color:#fff; font-size: clamp(1.8rem,3.4vw,2.6rem); }
.fp-page-header p{ color: rgba(255,255,255,.7); max-width:640px; margin: 10px auto 0; }
.fp-breadcrumbs{ font-size:.85rem; color: rgba(255,255,255,.5); margin-bottom:14px; }
.fp-breadcrumbs a{ color: rgba(255,255,255,.75); }
.fp-breadcrumbs a:hover{ color: var(--fp-yellow); }

.fp-content-wrap{
  max-width: var(--fp-container); margin: 56px auto; padding: 0 24px;
  display:grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items:start;
}
.fp-content-wrap.no-sidebar{ grid-template-columns: 1fr; max-width: 820px; }

.fp-blog-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 28px; }
.fp-blog-card{ border:1px solid var(--fp-border); border-radius: var(--fp-radius); overflow:hidden; transition: box-shadow .2s, transform .2s; }
.fp-blog-card:hover{ box-shadow: var(--fp-shadow-md); transform: translateY(-3px); }
.fp-blog-card .thumb{ height:180px; background: var(--fp-gray-100); overflow:hidden; }
.fp-blog-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.fp-blog-card .body{ padding: 18px 20px; }
.fp-blog-card .meta{ font-size:.8rem; color: var(--fp-muted); margin-bottom:8px; }
.fp-blog-card h3{ font-size: 1.08rem; margin-bottom:8px; }
.fp-blog-card h3 a:hover{ color: var(--fp-yellow-dark); }
.fp-blog-card p{ font-size:.9rem; color: var(--fp-muted); }

.fp-single-article header.entry-header{ margin-bottom: 24px; }
.fp-single-article .entry-title{ font-size: clamp(1.6rem,3vw,2.3rem); }
.fp-single-article .entry-meta{ color: var(--fp-muted); font-size:.9rem; margin-bottom: 20px; }
.fp-single-article .entry-thumb{ border-radius: var(--fp-radius); overflow:hidden; margin-bottom: 30px; }
.fp-single-article .entry-content{ font-size: 1.02rem; line-height:1.8; }
.fp-single-article .entry-content h2{ margin-top: 1.6em; font-size:1.4rem; }
.fp-single-article .entry-content h3{ margin-top: 1.4em; font-size:1.2rem; }
.fp-single-article .entry-content img{ border-radius: var(--fp-radius); margin: 20px 0; }
.fp-single-article .entry-content a{ color: var(--fp-navy); text-decoration: underline; text-decoration-color: var(--fp-yellow); }
.fp-single-article .entry-content blockquote{
  border-left: 4px solid var(--fp-yellow); margin: 20px 0; padding: 4px 20px; color: var(--fp-muted); font-style:italic;
}
.fp-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.fp-tags a{ background: var(--fp-gray-100); padding:6px 14px; border-radius:999px; font-size:.85rem; }

/* Sidebar */
.fp-widget{ border:1px solid var(--fp-border); border-radius: var(--fp-radius); padding: 22px; margin-bottom: 24px; }
.fp-widget h3, .fp-widget .widget-title{ font-size:1rem; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--fp-border); }
.fp-widget ul li{ padding: 8px 0; border-bottom:1px dashed var(--fp-border); font-size:.92rem; }
.fp-widget ul li:last-child{ border-bottom:none; }
.fp-widget ul li a:hover{ color: var(--fp-yellow-dark); }

/* Pagination */
.fp-pagination{ display:flex; justify-content:center; gap:8px; margin-top: 44px; flex-wrap:wrap; }
.fp-pagination a, .fp-pagination span{
  min-width:40px; height:40px; padding:0 10px; border-radius:8px; border:1px solid var(--fp-border);
  display:flex; align-items:center; justify-content:center; font-size:.9rem; color: var(--fp-text);
}
.fp-pagination a:hover{ border-color: var(--fp-navy); }
.fp-pagination .current{ background: var(--fp-navy); color:#fff; border-color: var(--fp-navy); }

/* Forms (contact / add business) */
.fp-form{ border:1px solid var(--fp-border); border-radius: var(--fp-radius); padding: 32px; }
.fp-form-row{ margin-bottom: 18px; }
.fp-form-row label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; }
.fp-form-row input, .fp-form-row select, .fp-form-row textarea{
  width:100%; border:1px solid var(--fp-border); border-radius:8px; padding: 11px 14px; outline:none;
  transition: border-color .2s;
}
.fp-form-row input:focus, .fp-form-row select:focus, .fp-form-row textarea:focus{ border-color: var(--fp-navy); }
.fp-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

/* Comments */
.fp-comments{ margin-top: 50px; }
.fp-comments .comment-list{ display:flex; flex-direction:column; gap:20px; }
.fp-comments .comment-body{ border:1px solid var(--fp-border); border-radius: var(--fp-radius); padding:18px 20px; }
.fp-comments .comment-author{ font-weight:700; font-size:.92rem; }
.fp-comments .comment-meta{ font-size:.78rem; color:var(--fp-muted); margin-bottom:8px; }

/* 404 */
.fp-404{ text-align:center; padding: 100px 24px; }
.fp-404 h1{ font-size: 6rem; color: var(--fp-navy); margin-bottom:0; }

/* =========================================================
   12. RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .fp-cat-grid{ grid-template-columns: repeat(3,1fr); }
  .fp-listing-grid{ grid-template-columns: repeat(2,1fr); }
  .fp-city-grid{ grid-template-columns: repeat(3,1fr); }
  .fp-content-wrap{ grid-template-columns: 1fr; }
  .fp-cta{ grid-template-columns: 1fr; }
  .fp-footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 782px){
  .fp-primary-nav{
    position:fixed; top:70px; left:0; right:0; bottom:0;
    background: var(--fp-navy); flex-direction:column; padding: 24px;
    transform: translateX(-100%); transition: transform .25s ease; overflow-y:auto;
  }
  .fp-primary-nav.is-open{ transform: translateX(0); }
  .fp-primary-nav ul{ flex-direction:column; align-items:flex-start; gap:0; width:100%; }
  .fp-primary-nav ul li{ width:100%; border-bottom:1px solid rgba(255,255,255,.08); }
  .fp-primary-nav ul li a{ display:block; padding: 16px 4px; }
  .fp-menu-toggle{ display:flex; }
  .fp-header-actions .fp-btn-dark{ display:none; }
  .fp-stats{ grid-template-columns: repeat(2,1fr); margin-left:24px; margin-right:24px; }
  .fp-stat{ border-bottom:1px solid var(--fp-border); }
  .fp-cat-grid, .fp-listing-grid, .fp-city-grid, .fp-blog-grid{ grid-template-columns: 1fr 1fr; }
  .fp-footer-top{ grid-template-columns: 1fr; padding-bottom: 10px; }
  .fp-form-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .fp-hero{ padding: 56px 18px 80px; }
  .fp-search-form{ flex-direction:column; }
  .fp-search-form button{ padding: 14px; }
  .fp-cat-grid, .fp-listing-grid, .fp-city-grid, .fp-blog-grid{ grid-template-columns: 1fr; }
  .fp-cta{ padding: 34px 24px; margin: 0 12px; }
  .fp-stats{ grid-template-columns: 1fr 1fr; }
}