/* Mobile responsive overlay for legacy Foundation layout (added 2026-07-06).
Loads last so it overrides. Desktop (>640px) untouched. */
@media only screen and (max-width: 640px) {
html { overflow-x: hidden !important; }
body { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; position: relative; }
body * { max-width: 100% !important; box-sizing: border-box !important; }
img { height: auto !important; }
/* Foundation grid: stack + full width */
.row { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; }
[class*="columns"], [class*="column"] { width: 100% !important; float: none !important; margin: 0 !important; padding: 0 12px !important; }
/* Header wrapper */
.header { position: static !important; height: auto !important; width: 100% !important; padding: 6px 0 !important; }
.logo { float: none !important; text-align: center !important; margin: 6px auto !important; }
.logo a, .logo img { display: inline-block !important; }
/* Phone + social row: center, inline-wrap, no fixed heights */
.header-info { float: none !important; text-align: center !important; margin: 8px 0 !important; padding: 0 !important; height: auto !important; }
.header-info li { display: inline-block !important; float: none !important; width: auto !important; height: auto !important; border: none !important; margin: 2px 6px !important; vertical-align: middle; }
/* Main nav: kill fixed heights/bg-image replacement, make clean stacked text links */
.navigation { float: none !important; width: 100% !important; margin: 8px 0 0 0 !important; height: auto !important; }
.navigation li { display: block !important; float: none !important; width: 100% !important; height: auto !important; margin: 0 !important; }
.navigation a { display: block !important; height: auto !important; min-height: 0 !important; width: 100% !important;
line-height: 1.3 !important; padding: 13px 10px !important; background-image: none !important; background-color: #f4f7f9 !important;
text-indent: 0 !important; white-space: normal !important; overflow: visible !important; color: #17607e !important;
font-size: 17px !important; font-weight: 600 !important; text-align: center !important; border-bottom: 1px solid #e2e8ec !important; }
.navigation a.on { background-color: #1c7fa5 !important; color: #fff !important; }
/* Absolutely-positioned hero "Get Started" form -> static, full width, below hero */
.getstarted, .getstartedinside { position: static !important; width: 100% !important; left: auto !important; right: auto !important;
top: auto !important; bottom: auto !important; margin: 0 0 20px 0 !important; float: none !important; }
#getstarted_form input, #getstarted_form select, #getstarted_form textarea, #getstarted_form button {
width: 100% !important; box-sizing: border-box !important; margin: 6px 0 !important; }
/* Hero / banner sections: no fixed widths, contain */
.banner, .hero, .slideshow, [class*="slide"], [class*="hero"], [class*="banner"] { width: 100% !important; height: auto !important; position: relative !important; }
/* Homepage tabs -> stack */
.hptabs, .tabs, .section-container { width: 100% !important; }
.tabs dd, .tabs .tab-title, .section-container > section { display: block !important; width: 100% !important; float: none !important; }
h1, h2, h3, p { word-wrap: break-word !important; overflow-wrap: break-word !important; }
.morecontainer, .footer, .footercontainer, table { width: 100% !important; }
/* Hero promo area: stack text + form full width */
.promoarea { height: auto !important; min-height: 0 !important; padding: 22px 0 !important; }
.promotext { position: static !important; width: 100% !important; float: none !important; padding: 0 14px !important; margin: 0 0 16px 0 !important; }
.promotext h1, .promotext h2, .promotext p { width: 100% !important; }
.getstarted { padding: 0 14px !important; }
/* 'Our Work' Foundation tabs: Foundation absolutely-positions the SEO/SOCIAL/PPC
titles at top:0, overlapping the Our Work
. Stack everything vertically. */
.hptabs, .section-container.tabs { position: static !important; height: auto !important; }
.hptabs h3 { position: static !important; display: block !important; width: 100% !important; float: none !important;
clear: both !important; text-align: center !important; margin: 0 0 12px 0 !important; }
.hptabs > section, .section-container.tabs > section, .hptabs > .section { display: block !important;
position: static !important; width: 100% !important; height: auto !important; margin: 0 0 8px 0 !important; }
.hptabs .title, .section-container.tabs .title { position: static !important; display: block !important; width: 100% !important;
float: none !important; height: auto !important; margin: 0 !important; border: 1px solid #d7e2e8 !important;
background: #eef4f7 !important; }
.hptabs .title a { display: block !important; padding: 12px 14px !important; font-weight: 600 !important; color: #17607e !important; }
.hptabs .content, .section-container.tabs .content { position: static !important; display: block !important; width: 100% !important;
height: auto !important; left: auto !important; top: auto !important; padding: 12px !important;
border: 1px solid #e2e8ec !important; border-top: none !important; }
.portfolio-block-l, .portfolio-block-2 { display: block !important; width: 100% !important; float: none !important; margin: 0 0 12px 0 !important; }
/* Secondary tools icon bar (SEO/PPC/PR/Google + social, all dead href="#" decorative
links). Desktop hides the text with text-indent and shows a background-image sprite;
on mobile those sprites render as faded desktop-sized blobs. Kill the sprite/indent
so the plain text labels show as clean centered links. */
.homepage-tools { text-align: center !important; padding: 10px 0 !important; height: auto !important; }
.homepage-tools .row { text-align: center !important; }
.homepage-tools .homepage-social { display: inline-block !important; float: none !important; width: auto !important; margin: 4px 0 !important; }
.homepage-tools a { display: inline-block !important; float: none !important; position: static !important;
width: auto !important; height: auto !important; margin: 4px 9px !important; padding: 4px 2px !important;
background-image: none !important; text-indent: 0 !important; overflow: visible !important;
white-space: nowrap !important; line-height: 1.3 !important; font-size: 15px !important;
font-weight: 600 !important; color: #17607e !important; }
/* Read More button: center it, natural width (was floated/oversized). */
.morecontainer, .readmore, a.readmore, .more { text-align: center !important; }
a.readmore, .readmore a, .morecontainer a { display: inline-block !important; float: none !important; width: auto !important; margin: 8px auto !important; }
/* Testimonials Foundation Orbit slider (): Orbit absolutely-stacks the
- slides and gives the container a fixed pixel height, showing one slide at a time
(and nothing on mobile when JS doesn't init) -> empty box + tall white gap above the
footer. Force all three testimonials to render as a static stacked list. */
.quotes { height: auto !important; }
.quotes h4 { margin: 0 0 12px 0 !important; }
ul[data-orbit], .orbit-container, .orbit-container .orbit-slides-container {
position: static !important; height: auto !important; width: 100% !important;
list-style: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
ul[data-orbit] > li, .orbit-container .orbit-slides-container > * {
position: static !important; display: block !important; width: 100% !important; height: auto !important;
opacity: 1 !important; margin: 0 0 18px 0 !important; float: none !important; }
.quotes .quote { padding: 0 4px !important; }
.quotes .quote img { display: block !important; margin: 0 auto 8px auto !important; height: auto !important; }
/* hide Orbit chrome (timer, arrows, bullets, slide counter) */
.orbit-timer, .orbit-next, .orbit-prev, .orbit-bullets, .orbit-slide-number, .orbit-progress { display: none !important; }
/* .pagecontent (every interior page: services/about/seo/casestudies/contact) has a
decorative vertical rail graphic tiled down the left edge (contentbg.png, repeat-y
top left) plus padding-left:3em to clear it. On mobile the rail stays but padding
shrinks, so body text jams against / clips over that left bar. Kill the rail and
use clean symmetric padding. */
.pagecontent { background: none !important; background-image: none !important;
padding-left: 14px !important; padding-right: 14px !important; padding-top: 16px !important; }
/* .servicelinks a (Services page): desktop renders big low-contrast grey boxes
(#b8b8b8 text on #f5f5f5, 38px) that look empty/broken on mobile. Make them
readable full-width link buttons. */
.servicelinks { overflow: visible !important; }
.servicelinks a { display: block !important; width: 100% !important; box-sizing: border-box !important;
font-family: inherit !important; font-size: 18px !important; font-weight: 600 !important;
color: #17607e !important; background: #eef4f7 !important; border: 1px solid #cdd8de !important;
text-align: center !important; padding: 15px 10px !important; margin: 0 0 10px 0 !important; }
/* Recovered blog posts (added 2026-07-07 review). WordPress caption blocks carry
inline fixed widths (style="width: 610px|530px…") that overflow a phone viewport;
images/tables/iframes can also exceed it. Contain everything to the column. */
.blogpost { overflow-wrap: break-word !important; word-wrap: break-word !important; }
.blogpost .wp-caption, .blogpost figure { width: auto !important; max-width: 100% !important; }
.blogpost img, .blogpost table, .blogpost iframe, .blogpost pre, .blogpost embed, .blogpost object {
max-width: 100% !important; height: auto !important; }
}