/* gm-site.css 2026-11-13. One colour system for every page, matching the header.
   navy  = headings, dark bands, footer (structure)
   blue  = text links, icons, small accents (read more)
   amber = buttons only, navy text (take action)
   CSS only: no client copy is changed. Rollback = remove the <link> to this file. */
:root{--gm-navy:#0c3b60;--gm-navy-d:#0a2f4d;--gm-navy-x:#08263f;--gm-blue:#1b6db0;--gm-blue-d:#155a94;--gm-ink:#142334;--gm-body:#33475b;--gm-stone:#f3f6f9;--gm-mist:#f8fafc;--gm-line:#dde5ee;--gm-amber:#f59e0b;--gm-amber-d:#fbbf24}

/* body text: cool slate instead of neutral grey so it sits with the navy */
body{color:var(--gm-body)}
::selection{background:#cfe0ef;color:var(--gm-ink)}

/* headings: one navy everywhere (was sky #0369a1, #0e4d7e and grey #404040) */
.text-secondary{color:var(--gm-navy)!important}
.content :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):not([class*="text-white"]){color:var(--gm-navy)}
.content .md\:h5:not([class*="text-white"]){color:var(--gm-navy)}
.content .font-heading:not([class*="text-white"]):not(a):not([class*="btn"]){color:var(--gm-navy)}

/* accents: highlighted words, icons, quote marks, area lists = brand blue (was burnt orange) */
.text-primary,.text-accent,.text-primary-400{color:var(--gm-blue)!important}

/* text links inside content: brand blue, underline on hover (was #b45309) */
.content a:not([class*="btn"]):not(.text-white){color:var(--gm-blue);text-decoration-color:rgba(27,109,176,.35);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.content a:not([class*="btn"]):not(.text-white):hover{color:var(--gm-blue-d);text-decoration:underline;text-decoration-color:currentColor}
.content a.text-secondary{color:var(--gm-blue)!important}
.content a.text-secondary:hover{color:var(--gm-blue-d)!important}
.content.bg-secondary-dark a:not([class*="btn"]),.bg-secondary-dark .content a:not([class*="btn"]),footer a{color:#fff}

/* buttons: same amber + navy text as the header Contact Us (was #b45309/#d97706 with white or orange text) */
a.btn,.btn,a.btn-sm,.btn-sm,.content a.btn-sm,.bg-primary[class*="btn"]{background-color:var(--gm-amber)!important;color:var(--gm-navy)!important;border-color:var(--gm-amber)!important}
a.btn,.btn,a.btn-sm,.btn-sm{border-radius:8px!important;font-weight:600;box-shadow:inset 0 -2px 0 rgba(12,59,96,.18),0 6px 16px -8px rgba(12,59,96,.35)!important;transition:background-color .2s,box-shadow .2s}
a.btn:hover,.btn:hover,a.btn-sm:hover,.btn-sm:hover,.hover\:bg-primary-dark[class*="btn"]:hover{background-color:var(--gm-amber-d)!important;color:var(--gm-navy)!important;border-color:var(--gm-amber-d)!important}
.border-primary{border-color:var(--gm-amber)!important}

/* dark bands, form headers, hero tint: navy (was sky-700 / sky-800) */
.bg-secondary,.bg-secondary-dark{background-color:rgb(12 59 96 / var(--tw-bg-opacity,1))!important}
.bg-secondary.bg-opacity-50,.bg-secondary-dark.bg-opacity-50,.bg-primary.bg-opacity-50{background-color:rgb(10 47 77 / var(--tw-bg-opacity,.5))!important}
/* non-button bg-primary (city tiles etc.) = navy, not amber */
.bg-primary:not([class*="btn"]):not(.bg-opacity-50){background-color:var(--gm-navy)!important}

/* light panels: cool stone instead of warm grey */
.bg-gray-50:not(.top-links *){background-color:var(--gm-mist)!important}
.bg-gray-100:not(.top-links *){background-color:var(--gm-stone)!important}
.bg-gray-200:not(.top-links *){background-color:#e6edf4!important}

/* footer: deep navy so it matches the header band (was charcoal #262626) */
footer.bg-gray-800,.bg-gray-800:not(.top-links *){background-color:var(--gm-navy-d)!important}
.bg-gray-900:not(.top-links *){background-color:var(--gm-navy-x)!important}
footer a{transition:color .2s}
footer a:hover{color:var(--gm-amber-d)!important}

/* FAQ and criteria cards with inline colours: map to the same tokens */
[style*="color:#0e4d7e"]{color:var(--gm-navy)!important}
[style*="solid #0e4d7e"]{border-color:var(--gm-navy)!important}
[style*="background:#f4f7fa"]{background:var(--gm-stone)!important}
[style*="solid #dbe2ea"]{border-color:var(--gm-line)!important}

.question-title{color:var(--gm-navy)}
.hover\:border-primary-400:hover{border-color:#cfe0ef!important}
/* blog pagination (was #aaa, too faint) */
ul.pagination li>span,ul.pagination li>a{color:var(--gm-body)!important;border-color:var(--gm-line)!important;border-radius:6px;transition:background-color .2s,color .2s}
ul.pagination li>a:hover{color:var(--gm-blue)!important;background:var(--gm-stone)}
ul.pagination li>span.active{background:var(--gm-navy)!important;color:#fff!important;border-color:var(--gm-navy)!important}

/* keyboard focus: one visible ring everywhere */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--gm-blue)!important;outline-offset:2px;border-radius:4px}
.bg-secondary :focus-visible,.bg-secondary-dark :focus-visible,footer :focus-visible{outline-color:var(--gm-amber-d)!important}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}

/* 2026-11-13 button colour per Vinay: soft gold #f2c14b, white text, darker gold hover.
   A light navy text-shadow keeps the white text readable on the light gold. */
:root{--gm-btn:#f2c14b;--gm-btn-h:#c4891c}
a.btn,.btn,a.btn-sm,.btn-sm,.content a.btn-sm,.bg-primary[class*="btn"],
#navbarSupportedContent>div>a[href="/contact-us"]{background-color:var(--gm-btn)!important;background:var(--gm-btn)!important;color:#fff!important;border-color:var(--gm-btn)!important;text-shadow:0 1px 2px rgba(12,59,96,.55)}
a.btn:hover,.btn:hover,a.btn-sm:hover,.btn-sm:hover,.hover\:bg-primary-dark[class*="btn"]:hover,
#navbarSupportedContent>div>a[href="/contact-us"]:hover{background-color:var(--gm-btn-h)!important;background:var(--gm-btn-h)!important;color:#fff!important;border-color:var(--gm-btn-h)!important}

/* 2026-11-13 no bold in menu or buttons (Vinay). Stolzl only ships 100/300/500, so 600/700
   was a browser-faked bold. Menu, top bar and buttons use the light 300 weight (same as body text);
   Font Awesome icons are excluded because they need weight 900. */
.top-links *:not(i):not([class*="fa-"]),#navbarSupportedContent *:not(i):not([class*="fa-"]),
a.btn,.btn,a.btn-sm,.btn-sm{font-weight:300!important;font-synthesis:none}

/* 2026-11-13 tighter vertical rhythm (Vinay: too much white space). The theme stacked
   96px-144px paddings and margins between sections; scale them to 40-80px. Layout and copy unchanged. */
.bg-white.shadow-lg.rounded.mb-12{margin-bottom:2rem}
@media (max-width:767px){.bg-white.shadow-lg.rounded>.content.p-10{padding:1.5rem}}
@media (min-width:768px){.md\:py-24{padding-top:3.5rem;padding-bottom:3.5rem}.md\:mb-16{margin-bottom:2.5rem}}
@media (min-width:1024px){.lg\:py-24{padding-top:3.5rem;padding-bottom:3.5rem}.lg\:pt-24{padding-top:3.5rem}.lg\:pb-24{padding-bottom:3.5rem}.lg\:mb-24{margin-bottom:3.5rem}.bg-white.shadow-lg.rounded.lg\:mb-24{margin-bottom:2.5rem}}
@media (min-width:1280px){.xl\:py-36{padding-top:5rem;padding-bottom:5rem}.xl\:mb-36{margin-bottom:4rem}}
.shadow-lg.content>svg{margin-bottom:.25rem}
.shadow-lg.content>svg+.font-heading{margin-top:.5rem!important;margin-bottom:.5rem!important}

/* 2026-11-13 home stat row ("We Guarantee Our Tenants" / "Average Days on Market: 32"):
   was two 128px icons floating in a 4-column grid with an empty middle. Now one compact
   stone panel, small icon beside each label, divider between. Copy unchanged. */
.flex.flex-wrap.mx-auto.pt-5:has(>.lg\:w-1\/4){max-width:880px;margin:28px auto 0;padding:20px 16px;background:var(--gm-stone);border:1px solid var(--gm-line);border-radius:14px;row-gap:14px}
.flex.flex-wrap.mx-auto.pt-5:has(>.lg\:w-1\/4)>.lg\:w-1\/4{flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:16px;text-align:left;padding:4px 20px}
.flex.flex-wrap.mx-auto.pt-5:has(>.lg\:w-1\/4)>.lg\:w-1\/4>div:first-child{width:auto!important;margin:0!important;padding:0!important;flex:0 0 auto}
.flex.flex-wrap.mx-auto.pt-5:has(>.lg\:w-1\/4)>.lg\:w-1\/4 svg{width:44px!important;height:44px!important}
.flex.flex-wrap.mx-auto.pt-5:has(>.lg\:w-1\/4)>.lg\:w-1\/4>p{width:auto!important;margin:0!important;text-align:left!important;font-size:1.0625rem;line-height:1.35}
@media (min-width:1024px){
.flex.flex-wrap.mx-auto.pt-5:has(>.lg\:w-1\/4){flex-wrap:nowrap;margin-top:40px;padding:26px 12px}
.flex.flex-wrap.mx-auto.pt-5:has(>.lg\:w-1\/4)>.lg\:w-1\/4{flex:1 1 0;width:50%;justify-content:center;padding:4px 32px}
.flex.flex-wrap.mx-auto.pt-5:has(>.lg\:w-1\/4)>.lg\:w-1\/4+.lg\:w-1\/4{border-left:1px solid var(--gm-line)}
.flex.flex-wrap.mx-auto.pt-5:has(>.lg\:w-1\/4)>.lg\:w-1\/4 svg{width:56px!important;height:56px!important}
.flex.flex-wrap.mx-auto.pt-5:has(>.lg\:w-1\/4)>.lg\:w-1\/4>p{font-size:1.25rem;white-space:nowrap}
.container.mx-auto.pb-8.md\:py-20.lg\:py-24{padding-top:3rem}}

/* 2026-11-13 text format: readable lists, normal-size buttons, calmer area links */
.content ul:not([class]){list-style:none;padding-left:0;margin-bottom:1.5rem}
.content ul:not([class])>li{position:relative;padding-left:1.5rem;margin:0 0 .55rem;line-height:1.6}
.content ul:not([class])>li::before{content:"";position:absolute;left:.25rem;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--gm-blue)}
/* home "Why choose" benefits list: blue check marks */
.lg\:w-3\/5>.content>ul:not([class])>li{padding-left:2rem}
.lg\:w-3\/5>.content>ul:not([class])>li::before{left:0;top:.22em;width:20px;height:20px;border-radius:50%;background:#e3eef8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b6db0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
/* buttons were 24px text (theme default); normal size now */
a.btn,.btn{font-size:1.125rem!important;line-height:1.4!important;padding:.875rem 1.6rem!important}
a.btn-sm,.btn-sm{font-size:1rem!important;line-height:1.4!important;padding:.7rem 1.25rem!important}
/* sidebar "Areas We Serve" city links were 20px, louder than the headings */
.content a.md\:h5.text-secondary{font-size:1.0625rem;line-height:1.5;padding-top:.35rem;padding-bottom:.35rem}

/* 2026-11-13 deep review, site-wide fixes */
/* Stolzl ships 100/300/500 only: every 600-900 (team names, roles, sidebar "Get in touch", table cells,
   footer titles, strong) was a browser-faked smudgy bold. Render the real 500 face instead. */
body,body *{font-synthesis:none}
/* leftover inline colours in page content */
[style*="color:#666"]{color:#5b6b7c!important}
[style*="background:#0e4d7e"]{background:var(--gm-navy)!important}
/* list with inline disc bullets (pet policy) got a double bullet */
.content ul[style*="list-style"]:not([class]){list-style:none!important;padding-left:0!important}
/* content and sidebar columns: less dead space above the footer */
@media (min-width:768px){.py-4.md\:py-12{padding-bottom:1.5rem}}
/* Our Services icon grid: equal icon boxes so the titles line up */
@media (min-width:1024px){.lg\:w-1\/4>.text-5xl{height:3.75rem;display:flex;align-items:center;justify-content:center}}
@media (min-width:1024px){.lg\:w-1\/4.flex-wrap.mt-12{align-content:flex-start}.lg\:w-1\/4.flex-wrap.mt-12>*{margin-bottom:0!important}.lg\:w-1\/4.flex-wrap.mt-12>p{margin-top:.75rem!important}}
/* article images narrower than the column were left-aligned while captions are centred */
.content p>img{margin-left:auto!important;margin-right:auto!important}
/* About Us team cards: 48px gaps between cards and below the last one */
.bg-white.rounded-lg.mb-12.lg\:shadow-lg{margin-bottom:2rem}
.bg-white.rounded-lg.mb-12.lg\:shadow-lg:last-child{margin-bottom:0}
/* mobile overflow: long unbroken text, fixed-width map iframes, wide tables */
.content{overflow-wrap:break-word}
.content iframe{max-width:100%}
@media (max-width:767px){.content table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}}
/* Our Services icon grid: less stacked spacing before and between items */
.flex.flex-wrap.mx-auto.py-8.lg\:py-12:has(>.lg\:w-1\/4.mt-12){padding-top:1rem}
.lg\:w-1\/4.flex-wrap.mt-12{margin-top:1.75rem}
@media (min-width:1024px){.lg\:w-1\/4.flex-wrap.mt-12{margin-top:2.5rem}}

/* 2026-11-13 /design-review fixes */
/* FINDING-001 line length: article + city body ran 76-84 chars/line; 18px on desktop brings it to 68-76 */
@media (min-width:1024px){.main-content .content p,.main-content .content li{font-size:1.125rem;line-height:1.7}}
/* FINDING-002 home intro ran 94 chars/line centred: cap the measure */
.text-center.content.mx-auto.lg\:w-3\/4{max-width:46rem}
/* FINDING-003 service card body text was 14px: body copy minimum 16px */
.bg-white.content.shadow-lg .text-sm,.bg-white.content.shadow-lg .text-sm p{font-size:1rem;line-height:1.65}
/* FINDING-004 card title (30px) outweighed the section heading (28px): step it under the H2 */
@media (min-width:1024px){.bg-white.content.shadow-lg>.font-heading{font-size:1.5rem;line-height:1.3}}
/* FINDING-005 plain content tables had no rules or padding and text butted against them */
.content table{font-variant-numeric:tabular-nums}
.content table:not([style]){width:100%;border-collapse:collapse;margin:1.25rem 0 1.5rem;font-size:.95rem;line-height:1.45}
.content table:not([style]) th,.content table:not([style]) td{padding:.6rem .75rem;border-bottom:1px solid var(--gm-line);text-align:left;vertical-align:top}
.content table:not([style]) tr:first-child th,.content table:not([style]) thead th{background:var(--gm-stone);color:var(--gm-navy);border-bottom:2px solid var(--gm-navy)}
/* FINDING-006 heading orphans ("…Choose get / MULTIfamily"): balance heading lines */
h1,h2,h3,.h1,.h2,.h3,.h4{text-wrap:balance}
.content p{text-wrap:pretty}
/* FINDING-007 visited links had no distinction */
.content a:not([class*="btn"]):not(.text-white):visited{color:var(--gm-navy)}