/* WisBrokers.com design preview: Map First
   Design tokens. Change these first when adjusting the look. */
:root{
  --ink:#102A33;        /* headings, body text, footer ground */
  --muted:#4B6570;      /* secondary text */
  --teal:#0E7C7B;       /* primary accent, buttons */
  --teal-dark:#0B6665;  /* links, eyebrows on light grounds */
  --teal-deep:#084C4B;  /* text on teal tint */
  --teal-tint:#D9EFEE;  /* tinted sections, tags */
  --teal-light:#8FE0DC; /* accent on dark grounds */
  --coral:#D9481F;      /* selected map pin only */
  --bg:#F4F7F8;         /* page ground */
  --white:#FFFFFF;
  --line:#D3DEE2;       /* borders, dividers */
  --input:#9FB3BB;      /* form field borders */
  --map:#CFE3E6;        /* map and image placeholders */
  --ph:#D3DEE2;
  --ph-text:#2F4852;
  --font:'Manrope','Segoe UI',Helvetica,Arial,sans-serif;
  --content:1296px;     /* content width */
  --pad:72px;           /* section side padding */
  --sec:72px;           /* section top and bottom padding */
  --r-sm:10px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-dark)}a:hover{color:var(--teal-deep)}
h1,h2,h3,p,figure,blockquote,ul,ol{margin:0}
h1{font-size:clamp(36px,3.6vw,52px);font-weight:800;line-height:1.05;letter-spacing:-.035em}
h2{font-size:40px;font-weight:800;line-height:1.1;letter-spacing:-.03em}
h3{font-size:21px;font-weight:800;line-height:1.25}
input,select,textarea,button{font:inherit;color:inherit}
.site{display:flex;flex-direction:column;min-height:100vh}
.wrap{max-width:var(--content);margin:0 auto}
.muted{color:var(--muted)}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-dark)}
.more{font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:6px}

/* Links to pages that are not in this preview */
a.off{pointer-events:none;cursor:default}
.main-nav a.off,.foot a.off,.topbar a.off,a.off.txt,.pager a.off,.crumbs a.off{opacity:.38}
.main-nav a.off.btn{opacity:1}

/* Preview bar (not part of the design) */
.pv-bar{position:sticky;top:0;z-index:50;background:#0B1420;color:#FFFFFF;font-size:15px;line-height:1.4;padding:10px 24px;border-bottom:1px solid #26374A}
.pv-in{max-width:var(--content);margin:0 auto;display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between}
.pv-btns{display:flex;flex-wrap:wrap;gap:10px}
a.pv-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 18px;border-radius:999px;border:1.5px solid #FFFFFF;color:#FFFFFF;text-decoration:none;font-weight:600}
a.pv-btn:hover{background:#FFFFFF;color:#0B1420}
a.pv-btn.pv-on,a.pv-btn.pv-on:hover{background:var(--teal-light);border-color:var(--teal-light);color:#0B1420}
.pv-here{font-size:12px;font-weight:600;background:#0B1420;color:#FFFFFF;border-radius:999px;padding:3px 9px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:11px 22px;border-radius:var(--r-sm);border:1px solid transparent;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer}
.btn-teal{background:var(--teal);color:#FFFFFF}.btn-teal:hover{background:var(--teal-dark);color:#FFFFFF}
.btn-white{background:#FFFFFF;color:var(--teal-deep);font-weight:800}.btn-white:hover{background:var(--teal-tint);color:var(--teal-deep)}
.btn-line{background:#FFFFFF;border-color:var(--teal);color:var(--teal-dark)}
.btn-block{width:100%}

/* Top bar and header */
.topbar{background:var(--ink);color:#C5D3D8;font-size:14px;padding:0 40px}
.topbar-in{min-height:40px;padding:6px 0;display:flex;flex-wrap:wrap;gap:6px 28px;justify-content:space-between;align-items:center}
.topbar-right{display:flex;flex-wrap:wrap;gap:6px 28px}
.topbar a{color:var(--teal-light);text-decoration:none;font-weight:700}
.topbar-phone{color:#FFFFFF;font-weight:700}
.site-header{background:#FFFFFF;padding:0 40px;border-bottom:1px solid var(--line)}
.header-in{min-height:76px;padding:10px 0;display:flex;flex-wrap:wrap;gap:10px 32px;justify-content:space-between;align-items:center}
.logo img{height:46px;width:auto}
.main-nav{display:flex;flex-wrap:wrap;gap:4px 26px;align-items:center;font-size:16px;font-weight:600}
.main-nav a{color:var(--ink);text-decoration:none;padding:10px 0}
.main-nav a[aria-current="page"]{color:var(--teal-dark);box-shadow:inset 0 -2px 0 var(--teal)}
.main-nav a.btn{color:#FFFFFF;padding:11px 20px}

/* Placeholders */
.ph{background:var(--ph);color:var(--ph-text);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;border-radius:var(--r-sm)}
.ph-sq{width:56px;height:56px;font-size:11px;flex-shrink:0;padding:0}
.ph-round{width:72px;height:72px;border-radius:999px;font-size:11px;flex-shrink:0;padding:0}
.ph-blog{width:120px;height:100px;font-size:12px;flex-shrink:0}
.ph-thumb{width:72px;height:60px;font-size:11px;flex-shrink:0;padding:0}
.ph-card{height:200px;border-radius:var(--r-md) var(--r-md) 0 0}
.ph-work{height:220px}
.ph-feature{height:400px;border-radius:var(--r-lg)}
.ph-inline{height:320px}
.ph-avatar{width:36px;height:36px;border-radius:999px;padding:0}

/* Sections */
.sec{padding:var(--sec) var(--pad)}
.sec-white{background:#FFFFFF;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-tint{background:var(--teal-tint)}
.sec-tint .eyebrow{color:var(--teal-deep)}
.sec-teal{background:var(--teal);color:#FFFFFF}
.sec-teal .eyebrow{color:#C9F2EF}
.sec-head{margin-bottom:28px}
.sec-head h2{margin-top:6px}
.sec-head.split{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:flex-end}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.card{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.card p{color:var(--muted);margin-top:6px}
.tag{font-size:13px;font-weight:700;background:var(--teal-tint);color:var(--teal-deep);border-radius:999px;padding:4px 10px;white-space:nowrap}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.panel{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-xl);padding:48px}

/* Forms */
.form label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:700}
.form input,.form select,.form textarea{width:100%;min-height:48px;border:1px solid var(--input);border-radius:var(--r-sm);padding:10px 12px;font-size:16px;font-weight:500;background:#FFFFFF;color:var(--ink)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid .full{grid-column:1/-1}
.form-grid .btn{justify-self:start}

/* Home: hero with search panel and map */
.hero{display:flex;flex-wrap:wrap;background:#FFFFFF;border-bottom:1px solid var(--line)}
.hero-panel{flex:1 1 460px;min-width:0;padding:40px;display:flex;flex-direction:column;gap:18px}
.hero-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.hero-form .grow2{flex:2 1 200px}.hero-form .grow1{flex:1 1 150px}
.result-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
.result-head strong{color:var(--ink)}
.results{display:flex;flex-direction:column;gap:10px}
.result{border:1px solid var(--line);border-radius:var(--r-md);padding:12px;display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--ink)}
.result-on{border:2px solid var(--teal)}
.result-t{flex:1;min-width:0;display:flex;flex-direction:column}
.result-t span{font-size:14px;color:var(--muted)}
.hero-map{flex:2 1 560px;position:relative;min-height:640px;background:var(--map);overflow:hidden}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(#BCD5D9 1px,transparent 1px),linear-gradient(90deg,#BCD5D9 1px,transparent 1px);background-size:80px 80px}
.map-label{position:absolute;left:24px;top:24px;background:#FFFFFF;border-radius:var(--r-sm);padding:10px 14px;font-size:14px;font-weight:700;color:var(--ph-text)}
.pin{position:absolute}
.pin-1{left:22%;top:30%}.pin-2{left:68%;top:22%}.pin-3{left:40%;top:62%}.pin-4{left:80%;top:74%}.pin-on{left:54%;top:40%}
.map-pop{position:absolute;left:calc(54% + 64px);top:36%;width:240px;max-width:40%;background:#FFFFFF;border-radius:14px;padding:16px;box-shadow:0 16px 40px rgba(16,42,51,.2);display:flex;flex-direction:column;font-size:14px;color:var(--muted)}
.map-pop strong{font-size:17px;font-weight:800;color:var(--ink)}
.map-pop .more{margin-top:8px}

/* Home: cities, specialties, brokers */
.city-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.city{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink)}
.city svg{flex-shrink:0}.city strong{flex:1;font-weight:700}.city span{font-size:14px;color:var(--muted);text-align:right}
.two-col{display:flex;flex-wrap:wrap;gap:32px 64px}
.two-col-a{flex:1 1 300px}.two-col-a h2{margin-top:6px}
.two-col-b{flex:2 1 560px;min-width:0}
.spec{border-bottom:1px solid var(--line);padding:16px 0;display:flex;flex-wrap:wrap;gap:4px 24px;align-items:baseline;text-decoration:none;color:var(--ink)}
.spec:last-child{border-bottom:0}
.spec strong{flex:0 0 260px;font-size:21px;font-weight:800}
.spec span{flex:1 1 260px;color:var(--muted)}
.spec em{font-style:normal;font-weight:700;color:var(--teal-dark)}
.broker{display:flex;flex-direction:column;gap:14px;padding:20px}
.broker-top{display:flex;gap:14px;align-items:center}
.broker-name{font-size:19px;font-weight:800}
.broker .muted{font-size:15px}
.step h3{font-size:23px;margin-top:8px}

/* Broker website offer */
.offer{display:flex;flex-wrap:wrap;gap:40px 64px;align-items:center}
.browser{flex:1 1 420px;min-width:0;background:#FFFFFF;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(4,40,40,.3)}
.browser-flat{box-shadow:none;border:1px solid var(--line)}
.browser-bar{height:36px;background:#E6EDEF;display:flex;gap:7px;align-items:center;padding:0 14px}
.browser-bar span{width:10px;height:10px;border-radius:999px;background:var(--input)}
.browser-body{min-height:320px;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;color:var(--ph-text);font-weight:700}
.offer-text{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.service-pills{display:flex;flex-wrap:wrap;gap:8px}
.service-pills span{background:#0A5F5E;border-radius:999px;padding:7px 14px;font-size:15px;font-weight:700}
.offer-cta{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}

/* Blog rows and cards */
.post-row{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;text-decoration:none;color:var(--ink);display:flex;gap:16px;align-items:center;background:#FFFFFF}
.post-row-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.post-row-t strong{font-size:19px;font-weight:800;line-height:1.25}
.meta{font-size:13px;color:var(--muted);font-weight:500}
.post-card{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;overflow:hidden}
.post-card .ph-card{border-radius:0}
.post-card-b{padding:20px;display:flex;flex-direction:column;gap:8px}
.post-card-b strong{font-size:22px;font-weight:800;line-height:1.2}
.post-card-b .excerpt{color:var(--muted)}
.post-card-b .more{color:var(--teal-dark);margin-top:4px}
.pager{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.pager a{min-width:48px;min-height:48px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:var(--r-sm);background:#FFFFFF;color:var(--ink);font-weight:700;text-decoration:none}
.pager a[aria-current="page"]{background:var(--teal);border-color:var(--teal);color:#FFFFFF}

/* Contact */
.contact{display:flex;flex-wrap:wrap;gap:40px 64px}
.contact-text{flex:1 1 340px;display:flex;flex-direction:column;gap:16px}
.contact-form{flex:1 1 520px;min-width:0}
.contact-lines{display:flex;flex-direction:column;gap:6px}

/* Footer and chat */
.foot{background:var(--ink);color:#C5D3D8;padding:56px var(--pad) 28px;font-size:15px;margin-top:auto}
.foot-cols{display:flex;flex-wrap:wrap;gap:32px 64px;justify-content:space-between}
.foot-brand{flex:1 1 280px;display:flex;flex-direction:column;gap:12px}
.foot-brand img{height:42px;width:auto;align-self:flex-start}
.foot-col{display:flex;flex-direction:column;gap:8px}
.foot-h{color:#FFFFFF;font-weight:800}
.foot a{color:#C5D3D8;text-decoration:none}.foot a:hover{color:#FFFFFF}
.foot-base{border-top:1px solid #2B4650;margin-top:32px;padding-top:20px;display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;font-size:14px}
.ghl-chat{position:fixed;right:22px;bottom:22px;z-index:40;height:60px;padding:0 22px 0 18px;border:0;border-radius:999px;background:var(--teal);color:#FFFFFF;font-weight:700;font-size:16px;display:flex;align-items:center;gap:10px;box-shadow:0 14px 34px rgba(16,42,51,.28);cursor:pointer}

/* Internal pages: page header, sidebar layout */
.page-head{background:var(--teal-tint);padding:56px var(--pad)}
.page-head h1{max-width:900px;margin-top:10px}
.page-head .lead{max-width:760px;margin-top:14px;font-size:19px;color:#24454E}
.crumbs{font-size:14px;font-weight:600;color:var(--teal-deep)}
.crumbs a{color:var(--teal-deep)}.crumbs span{opacity:.6;margin:0 4px}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin-top:18px;font-size:15px;color:#24454E}
.with-side{display:flex;flex-wrap:wrap;gap:56px}
.main{flex:999 1 560px;min-width:0}
.side{flex:1 1 300px;max-width:360px;display:flex;flex-direction:column;gap:20px}
.side-box{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:14px}
.side-h{font-size:19px;font-weight:800}
.side-box p{color:var(--muted);font-size:15px}
.side-search label{font-size:13px;font-weight:700;display:block;margin-bottom:5px}
.side-search-row{display:flex;gap:8px}
.side-search-row input{flex:1;min-width:0;min-height:48px;border:1px solid var(--input);border-radius:var(--r-sm);padding:0 12px;background:#FFFFFF}
.side-search-row button{width:48px;height:48px;border:0;border-radius:var(--r-sm);background:var(--teal);color:#FFFFFF;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{font-size:14px;font-weight:700;background:var(--teal-tint);color:var(--teal-deep);border-radius:999px;padding:8px 14px;text-decoration:none}
.side-posts{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.side-post{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink)}
.side-post-t{font-weight:700;line-height:1.3}
.side-news .form{display:flex;flex-direction:column;gap:10px}
.side-cta{background:var(--teal);border-color:var(--teal);color:#FFFFFF}
.side-cta p{color:#E3F5F4}
.side-phone{font-size:24px;font-weight:800;letter-spacing:-.01em}

/* Body typography for internal pages and blog posts */
.prose{display:flex;flex-direction:column;gap:20px}
.prose>h2{font-size:32px;margin-top:20px}
.prose>h3{font-size:23px;margin-top:8px}
.prose .intro{font-size:21px;line-height:1.5;font-weight:500}
.prose>p{color:#24454E}
.prose>ul{padding-left:22px;display:flex;flex-direction:column;gap:8px;color:#24454E}
.prose>ul li::marker{color:var(--teal)}
.prose blockquote{background:var(--teal-tint);border-radius:var(--r-lg);padding:28px 32px}
.prose blockquote p{font-size:24px;font-weight:700;line-height:1.35;letter-spacing:-.01em;color:var(--teal-deep)}
.prose cite{display:block;margin-top:12px;font-style:normal;font-size:15px;font-weight:700;color:var(--muted)}
.prose figcaption{font-size:14px;color:var(--muted);margin-top:8px}
.svc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.svc{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.svc p{color:var(--muted);margin-top:6px}
.proj-steps{list-style:none;padding:0;display:flex;flex-direction:column;gap:14px}
.proj-steps li{display:flex;gap:16px;align-items:flex-start}
.proj-steps p{color:var(--muted)}
.num{width:40px;height:40px;border-radius:999px;background:var(--teal);color:#FFFFFF;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.faqs{display:flex;flex-direction:column;gap:10px}
.faq{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-md);padding:0 20px}
.faq summary{min-height:56px;padding:14px 0;font-weight:800;cursor:pointer;display:flex;align-items:center}
.faq p{color:var(--muted);padding-bottom:18px}
.panel-teal{background:var(--teal);border-color:var(--teal);color:#FFFFFF;display:flex;flex-direction:column;gap:14px;margin-top:20px;padding:40px}
.panel-teal .eyebrow{color:#C9F2EF}
.quote-form{background:#FFFFFF;color:var(--ink);border-radius:var(--r-lg);padding:24px;margin-top:6px}
.post-tags,.share{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-weight:700}
.post-tags{border-top:1px solid var(--line);padding-top:20px;margin-top:8px}
.author{display:flex;gap:18px;align-items:flex-start}
.author h3{margin-top:4px}
.prevnext{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.prevnext a{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink)}
.prevnext a.next{text-align:right}
.prevnext strong{font-weight:800}
.prose>h2.related-h{font-size:28px}

/* Tablet */
@media (max-width:1024px){
  .grid-4,.city-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-map{min-height:480px}
}
/* Phone */
@media (max-width:760px){
  :root{--pad:20px;--sec:56px}
  h2{font-size:32px}
  .topbar,.site-header{padding-left:20px;padding-right:20px}
  .hero-panel{padding:32px 20px}
  .hero-map{min-height:380px}
  .map-pop{left:auto;right:16px;top:56%;max-width:60%}
  .grid-4,.grid-3,.grid-2,.city-grid,.svc-list,.form-grid,.prevnext{grid-template-columns:minmax(0,1fr)}
  .spec strong{flex-basis:100%}
  .panel,.panel-teal{padding:24px 20px}
  .page-head{padding-top:40px;padding-bottom:40px}
  .with-side{gap:40px}
  .side{max-width:none}
  .ph-feature{height:240px}.ph-inline{height:220px}
  .prevnext a.next{text-align:left}
  .pv-bar{padding:10px 16px}
}
