/* FirstIdeaWeb — shell.css * Semantic + accessibility layer on top of the preserved theme CSS (site.css). * Includes design tokens so the shell is self-contained. Loaded after site.css. */ :root { --brand-blue: #3183d7; --brand-blue-dark: #1f6bb8; --brand-green: #86c724; --dark-slate: #2a363f; --dark-body: #393939; --gray-text: #999; --gray-line: #e3e3e3; --gray-bg: #f7f7f7; --white: #fff; --focus-ring: 0 0 0 3px rgba(49, 131, 215, 0.45); --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 0.18s; } /* Skip link — first focusable element on every page */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; background: var(--brand-blue, #3183d7); color: #fff; padding: 0.75rem 1.25rem; font-size: 0.95rem; border-radius: 0 0 0.375rem 0; text-decoration: none; } .skip-link:focus { left: 0; color: #fff; outline: 3px solid rgba(255, 255, 255, 0.6); outline-offset: 0; } /* Visible keyboard focus */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--brand-blue, #3183d7); outline-offset: 2px; border-radius: 2px; } /* Hide focus ring for pointer users after interaction */ html:not(.js) a:focus { outline: 3px solid var(--brand-blue, #3183d7); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Responsive images: avoid layout shift from unset dimensions */ img { max-width: 100%; height: auto; } img[width][height] { height: auto; } /* Accessible toggle affordances */ .vc_toggle_title { cursor: pointer; } .wpb_accordion_header { cursor: pointer; } .vc_toggle_content { display: none; } .vc_toggle_active .vc_toggle_content { display: block; } /* Small semantic shell polish */ main#main { display: block; } /* Static form system (Phase 10) */ .static-form .form-status { margin: 0.75rem 0 0; font-weight: 600; } .static-form .form-status.success { color: var(--brand-green, #86c724); } .static-form .form-status.error { color: #c0392b; } .static-form .form-status.sending { color: var(--gray-text, #999); } .static-form input[aria-invalid="true"] { border-color: #c0392b; } /* Removed the old `:invalid:not(:placeholder-shown)` fallback (checkpoint-25): fields * without a placeholder never match :placeholder-shown, so required inputs showed a red * "invalid" border immediately on page load, before the visitor had typed anything. */ .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .wpb-contact-form { padding: 1.25rem; background: var(--gray-bg, #f7f7f7); border: 1px solid var(--gray-line, #e3e3e3); border-radius: var(--radius, 0.375rem); } .wpb-contact-form label { display: block; margin: 0 0 0.25rem; font-weight: 600; } .wpb-contact-form .row { margin-bottom: 1rem; } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ===================================================================== * Phase 25 — whole-site UI correction pass (checkpoint-25) * Additive, cascade-order overrides only. Loaded after site.css on every * page, so equal-specificity rules here win without needing !important. * No HTML/content changes implied by this file — CSS only. * ===================================================================== */ /* --- 25.1 Layout: consistent container system ---------------------- */ .container { width: auto; max-width: 1280px; padding-left: 1rem; padding-right: 1rem; margin-left: auto; margin-right: auto; box-sizing: border-box; } @media (min-width: 768px) { .container { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1200px) { .container { padding-left: 2rem; padding-right: 2rem; } } /* Nested containers fill their parent rather than re-capping width */ .container .container { max-width: 100%; padding-left: 0; padding-right: 0; } * { box-sizing: border-box; } html, body { max-width: 100%; overflow-x: hidden; } /* --- 25.2 Contact CTA rebuild: legacy WPBakery "cta3" pattern ------- */ /* Structural classes only (not the many vc_cta3-style-*/-color-* modifiers), * so this applies uniformly across every variant used site-wide (53 pages). */ .vc_cta3 { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; padding: 1.75rem; max-width: 100%; } .vc_cta3-icons { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; } .vc_cta3_content-container { display: block; flex: 1 1 320px; min-width: 0; padding: 0 !important; } .vc_cta3-content { text-align: left; } .vc_cta3-content-header h2, .vc_cta3-content-header h4 { margin: 0 0 0.35rem; } .vc_cta3-content-header h4 { font-weight: 500; } .vc_cta3-actions { flex: 0 0 auto; white-space: normal; margin-left: auto; } @media (max-width: 767px) { .vc_cta3 { flex-direction: column; align-items: stretch; text-align: center; padding: 1.5rem; } .vc_cta3-icons { justify-content: center; } .vc_cta3-content { text-align: center; } .vc_cta3-actions { margin-left: 0; width: 100%; } .vc_cta3-actions .vc_btn3-container { display: block; } } /* --- 25.3 Contact CTA rebuild: modern "fiwd-final-cta" block -------- */ /* This block ships with no matching CSS at all in the migrated theme — * written fresh here, matching the existing design tokens/palette. */ .fiwd-final-cta { position: relative; padding: var(--sp-8, 3rem) 0; background: var(--dark-slate, #2a363f); color: #fff; overflow: hidden; } .fiwd-final-cta .cta-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(49,131,215,.25), rgba(42,54,63,0)); pointer-events: none; } .fiwd-final-cta .cta-content { position: relative; max-width: 780px; margin: 0 auto; text-align: center; } .fiwd-final-cta .cta-badge { display: inline-block; padding: 0.4rem 1rem; border-radius: 999px; background: rgba(255,255,255,0.12); font-size: var(--fs-sm, 0.875rem); font-weight: 600; margin-bottom: 1rem; } .fiwd-final-cta h2 { color: #fff; margin: 0 0 1rem; line-height: 1.25; } .fiwd-final-cta p { color: #d7dde1; max-width: 65ch; margin: 0 auto 1.5rem; } .fiwd-final-cta .trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.5rem; margin-bottom: 1.75rem; list-style: none; padding: 0; } .fiwd-final-cta .trust-item { font-size: var(--fs-sm, 0.875rem); color: #e7ebee; } .fiwd-final-cta .cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 1.75rem; } .fiwd-final-cta .quick-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; margin-bottom: 2rem; } .fiwd-final-cta .quick-links a { color: #b9c6cf; font-size: var(--fs-sm, 0.875rem); text-decoration: underline; } .fiwd-final-cta .quick-links a:hover { color: #fff; } .fiwd-final-cta .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 640px; margin: 0 auto; } .fiwd-final-cta .stat-card h3 { color: var(--brand-green, #86c724); margin: 0; font-size: var(--fs-xl, 1.5rem); } .fiwd-final-cta .stat-card p { color: #c6ced3; margin: 0.15rem 0 0; font-size: var(--fs-xs, 0.8125rem); max-width: none; } @media (max-width: 600px) { .fiwd-final-cta .stats-grid { grid-template-columns: repeat(2, 1fr); } } /* --- 25.9a Fix: malformed print-only rule leaking onto screen -------- * site.css has `@media print a,a:visited{...}` — missing the opening * brace after `print`, so the CSS parser discards that malformed at-rule * but then parses the *next* rule, `a[href]:after{content:" (" attr(href)")"}`, * as a normal unconditional (non-print-scoped) rule. Net effect: every * link on every page shows its raw destination URL as visible text, * on screen, always — not just when printing as originally intended. * Neutralized here rather than hand-editing the purged theme file. */ a[href]:after { content: none !important; } /* --- 25.9 Horizontal-overflow safety net ----------------------------- */ img, video, iframe, table { max-width: 100%; } pre, code { overflow-x: auto; } /* ===================================================================== * checkpoint-cursor-02 — restore two rules dropped by the Phase 12 CSS * purge. Confirmed present in source-audit/css/site-original-backup.css * (the pre-purge combined stylesheet) and absent from the purged * site.css shipped in the build; the purge tool's "in-use rule" detector * evidently didn't recognize #navbar-collapse-1 as in-use since it's only * ever un-collapsed via this desktop media query, never by a class the * detector could see in static markup. Net effect: the main nav menu * (#navbar-collapse-1) rendered at zero height on every viewport, and the * mobile hamburger toggle stayed visible on desktop too. Restored verbatim * from the backup, same breakpoint (matches live). ===================== */ @media (min-width: 1000px) { .navbar-collapse { width: auto; border-top: 0; box-shadow: none; } .navbar-collapse.collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; } .navbar-collapse.in { overflow-y: auto; } .navbar-collapse .navbar-nav.navbar-left:first-child { margin-left: -15px; } .navbar-collapse .navbar-nav.navbar-right:last-child { margin-right: -15px; } .navbar-collapse .navbar-text:last-child { margin-right: 0; } .navbar-toggle { display: none; } } /* --- checkpoint-cursor-03: owner asked to remove the sticky header --- * site.css has two `.header{position:fixed;...}` rules (default + `.compact .header` scrolled state). * `.header .container` already carries its own `position:relative` (independent of `.header`), so * `.menu_main`'s `position:absolute` children stay correctly anchored with `.header` taken out of the * fixed-positioning scheme — verified no layout shift after this change. */ .header, .compact .header { position: static; } /* The 110px margin-bottom on the clearfix right after existed to push page content out * from under the (formerly fixed) header; with .header back in normal flow the browser already * reserves that space, so the old spacer just adds a redundant gap. Neutralize only that specific * element (shared header template, same on every page) — leave the margin utility classes themselves * untouched for any other use. */ .header + .clearfix.margin_bottom11 { margin-bottom: 0; } /* Accessibility contrast overrides — darken low-contrast #999-family text on light backgrounds. * Small, documented improvement; preserves overall visual identity (Phase 13). */ html { color: #333; } body { color: #454545; } .dropdown-menu > li > a, .nav > li > a, .navbar-nav > li > a { color: #333; } .top_nav { color: #555; } .one_half, .copyrights, .copyrights a { color: #555; } .footer .widget, .footer p, .footer li a, .footer .textwidget { color: #ddd; } .footer a { color: #7cb0e8; } .wpb_text_column { color: #454545; } .postmeta, .meta, .post-date, .entry-meta, time, .the-date { color: #666; } a { color: #2366a8; } /* --- checkpoint-cursor-04: footer restored (background, headings, icon colors, columns) --- * Found a second, much larger instance of the same rule-misattribution bug class checkpoint-02 fixed * for @media brace structure: an entire ~100KB run of unrelated, otherwise-unconditional rules * (confirmed via brace-depth walk) is sitting inside one `@media(min-width:480px) and (max-width:767px)` * block from the *original* pre-checkpoint-02 purge pass — so those rules only ever apply in a 480–767px * tablet band, never at normal desktop or mobile widths. All of the footer's own styling (dark * background, white widget-title headings, per-platform social icon colors, address link colors, the * `.one_fourth` 22%-column float rule) happens to live inside that trapped run. Confirmed these are * legitimate site rules (not invented) by extracting the trapped block directly; the accessibility pass * already assumed a dark footer background (`.footer .widget, .footer p, .footer li a { color: #ddd }` * above, Phase 13), consistent with this being the real intended design, not a guess. * This ~100KB trapped run likely affects more than just the footer — flagged for a future, dedicated * pass — but restoring everything footer-specific found inside it directly here, unconditionally, is the * safe, scoped fix for the footer itself without touching the other ~99% of that block sight-unseen. */ .footer .ftop { float: left; width: 100%; height: 130px; background: #fff url(/assets/css-assets/themes/arkahost/assets/images/footer-img1.png) no-repeat center top; background-size: 1920px 130px; box-sizing: border-box; } /* checkpoint-cursor-06: the .ftop rules above only had the background image, missing the height/float * that constrain it to the image's actual 130px design — without it, .ftop grew to fit its unstyled * child content, stretching the fixed-size background image across a much taller box and leaving a * jagged, mismatched edge where the image's diagonal graphic met plain white overflow beneath it. All * .ftop child layout was also missing entirely (newsletter input/button rendered as unstyled default * form controls) — found by re-extracting the same ~100KB trapped media block from checkpoint-04 more * thoroughly; these are confirmed real site rules, not invented. */ .ftop .left { float: left; width: 33.1%; margin-top: 32px; text-align: right; } .ftop .left h4 { margin-bottom: 5px; } .ftop .left h1 { color: #3183d7; font-size: 45px; font-weight: 900; letter-spacing: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ftop .right { float: right; width: 50%; margin-top: 50px; } .ftop .right p { color: #fff; font-size: 13px; line-height: 18px; margin-bottom: 11px; } .ftop .right .newsle_eminput { float: left; padding: 3px 0 4px 20px; height: 50px; width: 78.4%; background: #fff; border-radius: 3px; border: none; color: #727272; font-size: 14px; box-sizing: border-box; } .ftop .right .input_submit { float: left; padding: 13px 30px 14px; background-color: #7f868c; border: 0; font-size: 14px; font-weight: 500; color: #fff; text-transform: uppercase; transition: all .3s ease; border-radius: 3px; margin-left: 12px; cursor: pointer; } .ftop .right .input_submit:hover { color: #86c724; background-color: #fff; } .secarea, footer.footer { background-color: #2a363f; } .secarea h3.widget-title { color: #fff; } .footer ul.foolist, .footer ul.foosocial { float: left; width: 100%; } .foolist li a { color: #aaa; } .foolist li a:hover { color: #fff; } .foosocial li { float: left; margin: 0 7px 0 0; padding: 0; } .foosocial li i { color: #fff; width: 34px; height: 34px; text-align: center; vertical-align: middle; line-height: 34px; border-radius: 100%; background-color: #555; } .foosocial li.faceboox i { background-color: #2b87c7; } .foosocial li.twitter i { background-color: #38c0dd; } .foosocial li.gplus i { background-color: #dc6218; } .foosocial li.youtube i { background-color: #b34300; } .foosocial li.linkdin i { background-color: #2862d8; } .foosocial li.flickr i { background-color: #ff0b81; } .secarea .address { color: #aaa; } .secarea .address b, .secarea .address a { color: #fff; } .secarea .address a:hover { color: #86c724; } @media (max-width: 767px) { /* Specificity must match (or beat) the base rules above (.footer .ftop / .ftop .left / .ftop .right) * — a media query alone doesn't add specificity, so a same-or-lower-specificity override here was * silently losing to the unconditional 130px-tall base rule at every width, leaving .ftop's real * (much taller, stacked) mobile content clipped to 130px and overflowing over the next section. */ .footer .ftop { height: auto; padding: 1.5rem 0; background-size: cover; } .ftop .left, .ftop .right { float: none; width: 100%; text-align: center; margin-top: 1rem; } } .secarea .address a.smbut { color: #999; } .secarea .address a.smbut:hover { color: #fff; } /* Column layout: rebuilt with flexbox rather than un-trapping the original float rule, since flex * doesn't depend on the same media-query context and is more robust to this class of bug recurring. */ .secarea .container { display: flex; flex-wrap: wrap; gap: 2rem 1.5rem; } .secarea .container > .one_fourth { float: none; width: auto; margin-right: 0; flex: 1 1 200px; } @media (max-width: 767px) { .secarea .container { flex-direction: column; gap: 1.75rem; } } /* --- checkpoint-cursor-05: style brand-new homepage sections that never had any CSS --- * `.fiwd-faq-section` (native
/ FAQ) and `.results-section`/`.benefits-grid` (the * "Why Businesses Trust FIWD" stats + benefit-icon section) use classes that don't exist anywhere in * site.css, the pre-purge backup, or the original theme — unlike checkpoint-04's footer bug, this isn't * a mis-scoped rule to recover, it's genuinely new content (added alongside .fiwd-final-cta, which * checkpoint-01 already styled) that was never designed. Written fresh here, matching the existing * design tokens (tokens.css) rather than guessing at "original" styling that never existed. */ .fiwd-faq-section, .results-section { padding: var(--sp-8, 3rem) 0; } .faq-badge, .section-badge { display: inline-block; padding: 0.4rem 1rem; border-radius: 999px; background: var(--gray-bg-2, #eee); color: var(--brand-blue, #3183d7); font-size: var(--fs-xs, 0.8125rem); font-weight: 700; letter-spacing: 0.04em; margin-bottom: 0.75rem; } .faq-header, .results-header { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; } .faq-header h2, .results-header h2 { margin: 0 0 1rem; } .faq-header p, .results-header p { color: var(--gray-text, #999); } .faq-wrapper { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; } .faq-wrapper details { border: 1px solid var(--gray-line, #e3e3e3); border-radius: var(--radius, 0.375rem); padding: 1rem 1.25rem; } .faq-wrapper summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .faq-wrapper summary::-webkit-details-marker { display: none; } .faq-wrapper summary::after { content: "+"; flex-shrink: 0; font-size: 1.25rem; color: var(--brand-blue, #3183d7); } .faq-wrapper details[open] summary::after { content: "\2212"; } .faq-content { margin-top: 0.75rem; color: var(--gray-text, #999); } .faq-content p { margin: 0; } .results-grid, .benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 2.5rem; } .result-card { text-align: center; padding: 1.5rem 1rem; border-radius: var(--radius-lg, 0.625rem); background: var(--gray-bg, #f7f7f7); } .result-number { font-size: var(--fs-2xl, 2rem); font-weight: 700; color: var(--brand-blue, #3183d7); margin-bottom: 0.35rem; } .result-card h3 { font-size: var(--fs-base, 1rem); margin: 0 0 0.5rem; } .result-card p { font-size: var(--fs-sm, 0.875rem); color: var(--gray-text, #999); margin: 0; } .benefit-box { text-align: center; padding: 1.5rem 1rem; border: 1px solid var(--gray-line, #e3e3e3); border-radius: var(--radius-lg, 0.625rem); } .benefit-icon { font-size: 2.25rem; margin-bottom: 0.75rem; } .benefit-box h3 { font-size: var(--fs-base, 1rem); margin: 0 0 0.5rem; } .benefit-box p { font-size: var(--fs-sm, 0.875rem); color: var(--gray-text, #999); margin: 0; } @media (max-width: 991px) { .results-grid, .benefits-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 479px) { .results-grid, .benefits-grid { grid-template-columns: 1fr; } } /* --- checkpoint-cursor-05/07: floating WhatsApp/call buttons + copyright bar background --- * `.copyrights{background:#1c2329}` from site.css was itself sitting in the same ~100KB trapped media * block as the rest of the footer (checkpoint-04/06) — never restored until now, so the padding-bottom * added below was extending a *transparent* box, revealing the page's plain light-gray background * instead of dark footer color ("white background at the end of footer"). * Separately: `.wp-call-button` and `.ccw_plugin.chatbot` (the floating action buttons) turned out to be * trapped in two *different* small media queries of their own (`max-width:650px` / * `max-width:400px` respectively) — correctly re-braced by checkpoint-02's fix, but that means they were * *never* actually `position:fixed` above those widths. On desktop this reproducibly renders both as * ordinary static, in-flow elements dumped after `.copyrights` (`.chatbot` full-width, `.wp-call-button` * collapsed to 0×0) — the "overlapping" + stray content the owner is seeing on desktop is this, not the * mobile overlap fixed in checkpoint-05. Given both carry deliberately enormous z-index values * (99999999 / 9999999999), "always-on-top floating widget at every width" is clearly the intended * behavior, not "mobile only" — restored unconditionally here instead of leaving the width cap. */ /* checkpoint-cursor-09: owner wants the copyright bar's own content to be the true end of the page, * no added clearance — removed the artificial padding-bottom entirely (was 50px desktop / 150px * mobile). `.copyrights` keeps its original site.css padding (35px top, 30px bottom) only. The floating * WhatsApp/call buttons may now sit over the very end of the copyright bar at absolute max-scroll — * accepted trade-off per explicit request; this is standard behavior for fixed action buttons on most * sites and only affects the last ~1-2 lines of content, not general browsing. */ .copyrights { background-color: #1c2329; } .ccw_plugin.chatbot { position: fixed !important; } /* .chatbot's trapped rule was just position+z-index (its size comes from child content), so the * one-line override above is enough. .wp-call-button's trapped rule also carries width/height/ * background (a base64-embedded SVG icon) that a bare `position:fixed` override wouldn't restore, * leaving the button `fixed` but 0×0 — copied verbatim from site.css rather than retyped, to avoid any * risk of corrupting the embedded data URI. */ .wp-call-button{display:block;position:fixed;text-decoration:none;z-index:9999999999;width:60px;height:60px;border-radius:50%;right:20px;bottom:20px;background:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDU5cHgiIGhlaWdodD0iNDU5cHgiIHZpZXdCb3g9IjAgMCA0NTkgNDU5IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NTkgNDU5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PGcgaWQ9ImNhbGwiPjxwYXRoIHN0eWxlPSJmaWxsOiB3aGl0ZTsiIGQ9Ik05MS44LDE5OC45YzM1LjcsNzEuNCw5Ni45LDEzMC4wNSwxNjguMywxNjguM0wzMTYuMiwzMTEuMWM3LjY0OS03LjY0OSwxNy44NS0xMC4xOTksMjUuNS01LjFjMjguMDUsMTAuMiw1OC42NDksMTUuMyw5MS44LDE1LjNjMTUuMywwLDI1LjUsMTAuMiwyNS41LDI1LjV2ODYuN2MwLDE1LjMtMTAuMiwyNS41LTI1LjUsMjUuNUMxOTMuOCw0NTksMCwyNjUuMiwwLDI1LjVDMCwxMC4yLDEwLjIsMCwyNS41LDBoODkuMjVjMTUuMywwLDI1LjUsMTAuMiwyNS41LDI1LjVjMCwzMC42LDUuMSw2MS4yLDE1LjMsOTEuOGMyLjU1LDcuNjUsMCwxNy44NS01LjEsMjUuNUw5MS44LDE5OC45eiIvPjwvZz48L2c+PC9zdmc+) center/30px 30px no-repeat #269041 !important} /* A second, separate "click to call" plugin widget (#callnowbutton, "cnb-*" classes) exists alongside * .wp-call-button — redundant duplicate functionality (both are floating tel: buttons), and its own * `display:none` default rule is trapped in yet another instance of the same broken media block, so it * was falling back to browser-default `display:inline` and rendering as a small stray text/icon * fragment near the bottom of the page instead of being hidden. Since .wp-call-button already covers * phone contact, hiding this duplicate outright rather than also restoring a second floating button. */ #callnowbutton { display: none !important; } /* ===================================================================== * SERVICE PAGES REFINEMENT PHASE — every rule below is scoped to * `body.service-page` (see scripts/tag-service-pages.js), applied only to * the 38 pages under the homepage's "Services" menu. Homepage and all * other page types are untouched by design — same shared WPBakery * component classes (.king-elements, .vc_toggle, .vc_cta3, .slidesec) * appear elsewhere on the site and must keep their current appearance. * Presentation-only: no HTML content, order, or SEO markup changed. * ===================================================================== */ /* --- "Why Choose Us" feature grid (plain .king-elements only) -------- * `.king-elements` is reused for at least 3 different structural patterns across service pages, found * by spot-checking beyond the pilot page — every rule below excludes the other two so it only touches * the one it was designed for (icon + short heading + one paragraph, e.g. web-development/'s "Why * Choose First Idea Web?"): * - `.king-elements.box`: direct sibling divs laid out purely via float:left/width:25% from * site.css (no wrapper row), used for full-bleed dark "services offered" sections — already had a * working float-based layout (confirmed on digital-marketing/, which broke — stacked into a single * narrow column — the first time this was scoped too broadly). * - `.king-elements` containing a nested `