:root{--navy:#1E2A5A;--navy2:#141E44;--coral:#FF5A3C;--sky:#7AB8E8;--cream:#FDF6E9;--cream2:#FFFDF6;--ink:#1F2430;--muted:#5A6070;--line:#E8DDC4;--white:#fff}
*{box-sizing:border-box}html{overflow-x:clip}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--cream2);line-height:1.6}
a{color:var(--navy)}a:hover{color:var(--coral)}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.topbar{color:#fff;font-size:14px}.topbar-inner{display:flex;justify-content:space-between;gap:16px;padding:8px 20px;flex-wrap:wrap}.topbar a{color:#fff;text-decoration:none;white-space:nowrap}.topbar a:hover{text-decoration:underline}
.site-header{position:sticky;top:0;z-index:20}.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}.brand-name{font-size:26px;font-weight:800;color:var(--navy);letter-spacing:-.5px}
.main-nav{display:flex;align-items:center;gap:8px}.main-nav a{text-decoration:none;font-weight:600;color:var(--ink)}.menu-btn{display:none;background:var(--navy);color:#fff;border:0;border-radius:8px;padding:10px 14px;font-weight:700}
.btn{display:inline-block;background:var(--coral);color:#fff!important;text-decoration:none;font-weight:700;border-radius:999px;padding:13px 24px;border:0;cursor:pointer;white-space:nowrap}.btn:hover{background:var(--navy);color:#fff!important;box-shadow:0 8px 20px rgba(30,42,90,.25)}.btn-small{padding:10px 18px}.btn-light{background:#fff;color:var(--navy)!important}.btn-light:hover{background:var(--navy);color:#fff!important}.btn-outline{background:transparent;color:var(--navy)!important;border:2px solid var(--navy)}.btn-outline:hover{background:var(--navy);color:#fff!important;border-color:var(--navy)}
/* Button hover on dark backgrounds: a navy hover on navy is invisible, so on
   navy sections, navy-gradient banners and mega-promo panels, light buttons
   hover to coral and coral buttons hover to white with navy text. */
.section-navy .btn:hover{background:#fff;color:var(--navy)!important}
.section-navy .btn-light:hover{background:var(--coral);color:#fff!important}
.cta-banner .btn-light:hover,.mega-promo .btn-light:hover{background:var(--coral);color:#fff!important}
.cta-banner .btn:hover{background:#fff;color:var(--navy)!important}
/* Footer buttons sit on navy: on hover they go white with navy text, never navy-on-navy */
.site-footer .btn:hover{background:#fff;color:var(--navy)!important}.site-footer .btn-outline{color:#fff!important;border-color:#fff}.site-footer .btn-outline:hover{background:#fff;color:var(--navy)!important;border-color:#fff}
.hero{padding:56px 0 40px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}.eyebrow{font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--coral);font-size:13px}
h1{font-size:52px;line-height:1.05;color:var(--navy);margin:10px 0 16px;letter-spacing:-1px}h2{font-size:34px;line-height:1.15;color:var(--navy);margin:0 0 12px}h3{font-size:20px;color:var(--navy)}p.lead{font-size:19px;color:var(--muted)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.search-mock{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 18px 40px rgba(30,42,90,.12)}
.search-box{border:1px solid var(--line);border-radius:12px;padding:13px 16px;font-size:16px;min-height:52px;background:#FFFDF6}.search-box .caret{display:inline-block;width:2px;height:1em;background:var(--coral);animation:blink 1s steps(1) infinite;vertical-align:middle}
@keyframes blink{50%{opacity:0}}
.result-card{border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:16px;background:var(--cream);transition:transform .6s ease, box-shadow .6s ease}.result-card.top{transform:translateY(-4px);box-shadow:0 10px 24px rgba(30,42,90,.12);border-color:var(--coral)}
.result-card .badge{display:inline-block;background:var(--coral);color:#fff;font-size:12px;font-weight:800;border-radius:999px;padding:3px 10px}
.float-cards{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}.float-card{background:var(--navy);color:#fff;border-radius:12px;padding:10px 14px;font-weight:700;font-size:14px;animation:float 4s ease-in-out infinite}.float-card:nth-child(2){animation-delay:1.2s;background:var(--sky);color:var(--navy)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.growth-svg{width:100%;height:auto;margin-top:14px}.growth-line{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 2.4s ease forwards .3s}
@keyframes draw{to{stroke-dashoffset:0}}
.trust{display:flex;gap:10px;flex-wrap:wrap;padding:10px 0 30px}.trust span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:700;font-size:14px}
.section{padding:52px 0}.section-navy{background:var(--navy);color:#fff}.section-navy h2,.section-navy h3{color:#fff}.section-navy p{color:#DDE3FF}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:24px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}.card h3{margin-top:0}.card p{color:var(--muted)}
.service-card{text-decoration:none;color:inherit;display:block}.service-card:hover{border-color:var(--coral);box-shadow:0 12px 28px rgba(30,42,90,.10)}
.icon{line-height:0}.icon svg{width:44px;height:44px;display:block}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}.step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}.step-num{font-size:40px;font-weight:800;color:var(--coral)}
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:24px}.work-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.work-card img{width:100%;height:auto;display:block;aspect-ratio:625/798;object-fit:cover;object-position:top}.work-body{padding:20px}.work-body h3{margin:0 0 6px}.tag{display:inline-block;background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:13px;font-weight:700}
.page-hero{padding:44px 0 10px}.page-hero h1{font-size:44px}
.article{max-width:760px;margin:0 auto;padding:20px 20px 50px}.article p{font-size:18px}
.faq{border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:12px;overflow:hidden}.faq summary{cursor:pointer;padding:18px;font-weight:700;color:var(--navy);list-style:none}.faq summary::-webkit-details-marker{display:none}.faq p{padding:0 18px 18px;margin:0;color:var(--muted)}
.form-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:0 16px 36px rgba(30,42,90,.10)}
label{font-weight:700;display:block;margin:14px 0 6px}input,select,textarea{width:100%;padding:13px 14px;border:1px solid #CBD0DC;border-radius:10px;font:inherit}input:focus,select:focus,textarea:focus{outline:3px solid rgba(122,184,232,.5);border-color:var(--navy)}
.form-note{color:var(--muted);font-size:15px}.form-note a{white-space:nowrap}
.alert{background:#EAF7EC;border:1px solid #9ED6A6;border-radius:12px;padding:16px;margin-bottom:16px}.alert-error{background:#FDECEA;border-color:#F0A49E}
.errors{color:#B42318}
.cta-band{background:var(--coral);color:#fff;padding:44px 0;margin-top:40px}.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:24px}.cta-inner h2{color:#fff}.cta-inner p{color:#FFF0EC}
.site-footer{background:var(--navy2);color:#CBD2F0;padding:44px 0 20px;margin-top:0}.site-footer h3{color:#fff}.site-footer a{color:#CBD2F0;text-decoration:none}.site-footer a:hover{color:#fff}.site-footer ul{list-style:none;padding:0}.site-footer li{margin:8px 0}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.2);padding-top:16px;margin-top:28px;font-size:14px}
.audit-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}.checklist{list-style:none;padding:0}.checklist li{padding:10px 0 10px 30px;border-bottom:1px solid var(--line);position:relative}.checklist li:before{content:"";position:absolute;left:0;top:13px;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF5A3C' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center/contain}
.gauge{height:18px;background:#EDE6D3;border-radius:999px;overflow:hidden}.gauge-bar{height:100%;width:0;background:linear-gradient(90deg,var(--sky),var(--coral));border-radius:999px;transition:width 1.6s ease}
/* Awards: transparent PNGs, white cards so they read on cream, navy and white */
.award-strip{margin:28px 0}.award-heading{font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--coral);font-size:13px;margin:0 0 12px}
.award-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}.award-row img{height:86px;width:auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 8px 20px rgba(30,42,90,.08)}
/* Footer logo: white tile + white wordmark, so the navy logo tile is never lost on navy */
.site-footer .brand-name{color:#fff}.footer-logo-tile{background:#fff;border-radius:14px;padding:8px;display:inline-flex;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.footer-awards{background:transparent;border-top:1px solid rgba(255,255,255,.25);border-radius:0;padding:28px 0 0;margin-top:32px}.footer-awards .award-heading{color:#fff}
.footer-awards .award-row img{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.35);box-shadow:0 14px 30px rgba(0,0,0,.45);padding:10px}
.footer-awards .award-row img:hover{border-color:#fff;box-shadow:0 18px 36px rgba(0,0,0,.55);transform:translateY(-2px)}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:28px}
/* Cookie banner */
.cookie-banner{position:fixed;left:16px;right:auto;bottom:16px;z-index:100;width:360px;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(30,42,90,.25);padding:16px;display:none}
.cookie-banner.show{display:block}.cookie-banner-inner{max-width:none;margin:0;display:block}
.cookie-banner h3{font-size:16px}.cookie-banner p{margin:0 0 12px;color:var(--muted);max-width:none;font-size:14px;line-height:1.5}.cookie-banner .cookie-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:560px){.cookie-banner{bottom:76px}}
.cookie-modal{position:fixed;inset:0;z-index:101;background:rgba(20,30,68,.6);display:none;align-items:center;justify-content:center;padding:20px}
.cookie-modal.show{display:flex}.cookie-modal-box{background:#fff;border-radius:18px;padding:28px;max-width:560px;width:100%;max-height:90vh;overflow:auto}
.cookie-toggle{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.cookie-toggle p{color:var(--muted);margin:4px 0 0;font-size:15px}
@media(max-width:900px){.award-row img{height:72px}}
@media(max-width:900px){.hero-grid,.grid3,.grid2,.steps,.work-grid,.audit-grid{grid-template-columns:1fr}.grid4{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}h1{font-size:38px}.menu-btn{display:block}.main-nav{display:none;flex-direction:column;align-items:flex-start;position:absolute;left:0;right:0;top:100%;background:#fff;padding:20px;border-bottom:1px solid var(--line)}.site-header{position:relative}.main-nav.open{display:flex}.cta-inner{flex-direction:column;align-items:flex-start}}
@media(max-width:560px){.grid4,.footer-grid{grid-template-columns:1fr}h1{font-size:32px}h2{font-size:28px}.form-card{padding:20px}}
@media(prefers-reduced-motion:reduce){.float-card,.growth-line,.gauge-bar{animation:none;transition:none}.growth-line{stroke-dashoffset:0}.gauge-bar{width:88%!important}}

/* ---- New navy header with dropdown menus (2026-11-02) ---- */
.topbar{background:#0B1230}
.site-header{background:var(--navy);border-bottom:0;box-shadow:0 10px 30px rgba(20,30,68,.35)}
.site-header .brand-name{color:#fff}
.main-nav .nav-link{color:#fff;padding:12px 14px;border-radius:10px}
.main-nav .nav-link:hover{color:#fff;background:rgba(255,255,255,.12);text-decoration:none}
.btn-outline-light{background:transparent;color:#fff!important;border:2px solid rgba(255,255,255,.7);border-radius:999px;padding:11px 20px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;white-space:nowrap}
/* Menu button on the navy header: navy-on-navy was invisible, so it is coral here. */
.site-header .menu-btn{background:var(--coral)}
.site-header .menu-btn:hover{background:#fff;color:var(--navy)}
.btn-outline-light:hover{background:#fff;color:var(--navy)!important;border-color:#fff}
.nav-item{position:relative}
/* Header dropdown centring (2026-11-02): every panel is centred on its own menu
   item (left:50% + translateX(-50%)), so it opens balanced left and right instead of
   running off to the far right from a left-edge anchor. JavaScript in public/js/app.js
   then clamps that centred position inside the viewport (20px margin), so wide panels
   on edge items never drift off either side. Mobile panels are static, so the
   centring transform is switched off there. All selectors below are scoped to the
   header nav only; nothing here touches the footer. */
.main-nav{flex-wrap:nowrap}
.main-nav .nav-link{white-space:nowrap;padding:12px 8px;font-size:14px}
/* Header is wider than the page wrap, so the extra Industries item fits
   without squeezing the logo, the centred nav, or Get a Quote. */
.site-header .wrap{max-width:1240px}
/* Header nav centred (2026-11-02): menu links sit in the centre of the header,
   while Get a Quote stays pinned to the right edge, exactly where it was.
   The nav takes the space between logo and button (reserving the button's width
   on the right), so its links centre without the button moving. */
.header-inner{position:relative}
.site-header .main-nav{flex:1;justify-content:center;padding-right:170px}
.site-header .main-nav .quote-open{position:absolute;right:20px;top:50%;transform:translateY(-50%)}
.main-nav .btn{white-space:nowrap;padding:11px 18px}
.nav-dropdown{display:none;position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);max-width:calc(100vw - 40px);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(20,30,68,.28);padding:20px;z-index:50;text-align:left}
/* Services fallback (2026-11-02): the Services panel is the widest (1020px) and its
   trigger is furthest left, so plain CSS centring would push it off the left edge
   if JavaScript is stale or off. Without JS it anchors to its item's left edge and
   stays fully visible, as it did before; with fresh JS the centring + clamping
   script overrides this inline on hover. */
.nav-item:first-child .nav-dropdown{left:0;transform:none}
.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{display:block}
.nav-sub{display:block;font-weight:400;color:var(--muted);font-size:14px;margin-top:2px}
.nav-mega{width:min(1020px,94vw);display:none;grid-template-columns:1fr 280px}
.nav-item:hover .nav-mega,.nav-item:focus-within .nav-mega{display:grid}
.mega-main{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:4px 20px 4px 0}
.mega-area-title{font-weight:800;color:var(--navy);text-decoration:none;display:block;margin-bottom:6px}
.mega-area-title:hover{color:var(--coral)}
.mega-area ul{list-style:none;padding:0;margin:0}
.mega-area li{margin:6px 0}
.mega-area li a{color:var(--muted);text-decoration:none;font-size:15px}
.mega-area li a:hover{color:var(--navy);text-decoration:underline}
.mega-promo{background:linear-gradient(160deg,#2B5CB8,#141E44);border-radius:14px;padding:22px}
.mega-promo p{margin:0 0 14px}
.mega-footer{grid-column:1 / -1;border-top:1px solid var(--line);margin-top:16px;padding-top:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.nav-mega-tools{width:min(760px,94vw)}
.nav-mega-tools .mega-main{grid-template-columns:repeat(2,1fr)}
.mega-tool-grid .mega-area p{margin:0}
.mega-footer a{color:var(--navy);font-weight:700;text-decoration:none}
.mega-footer a:hover{color:var(--coral)}
/* Get a Quote pop-up + confirmation toast */
.quote-modal{position:fixed;inset:0;z-index:102;background:rgba(20,30,68,.65);display:none;align-items:center;justify-content:center;padding:20px}
.quote-modal.show{display:flex}
.quote-modal-box{background:#fff;border-radius:18px;padding:28px;max-width:560px;width:100%;max-height:90vh;overflow:auto;position:relative}
.quote-modal-close{position:absolute;top:12px;right:16px;background:none;border:0;font-size:28px;cursor:pointer;color:var(--muted)}
.quote-modal-box label{display:block;font-weight:700;margin-top:14px}
.quote-modal-box input,.quote-modal-box textarea{width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;margin-top:6px;box-sizing:border-box;font:inherit}
.quote-toast{position:fixed;left:16px;right:16px;bottom:16px;z-index:103;background:var(--navy);color:#fff;border-radius:14px;padding:16px 20px;box-shadow:0 20px 50px rgba(20,30,68,.4);max-width:680px;margin:0 auto}
.quote-toast a{color:#fff}
#quote-toast-close{background:none;border:0;color:#fff;font-size:22px;cursor:pointer;float:right}
@media(max-width:900px){
  .site-header{position:sticky}
  .main-nav{background:var(--navy);border-bottom:0}
  .main-nav .nav-link{color:#fff}
  .nav-item{width:100%}
  .nav-dropdown,.nav-mega{position:static;transform:none;width:100%;box-shadow:none;border:0;border-radius:12px;margin-top:8px}
  .nav-item:hover .nav-mega,.nav-item:focus-within .nav-mega{display:block}
  .mega-main{grid-template-columns:1fr;padding:0}
  .mega-promo{margin-top:16px}
  .mega-footer{grid-column:auto}
  .btn-outline-light{margin-top:8px}
}
.nav-item.open .nav-dropdown{display:block}
.nav-item.open .nav-mega{display:grid}
/* Medium desktop (901–1150px): the full nav no longer fits beside the logo in one row,
   so collapse to the menu button here instead of letting links wrap and break the header.
   Header-only: the page grids and the footer keep their existing 900px breakpoint. */
@media(max-width:1150px){
  .site-header .menu-btn{display:block}
  .site-header .main-nav{display:none;flex-direction:column;align-items:flex-start;position:absolute;left:0;right:0;top:100%;background:var(--navy);padding:20px;border-bottom:1px solid var(--line);z-index:60}
  .site-header{position:relative}
  .site-header .main-nav.open{display:flex}
  .site-header .nav-item{width:100%}
  .site-header .nav-dropdown,.site-header .nav-mega{position:static;transform:none;width:100%;max-width:none;box-shadow:none;border:0;border-radius:12px;margin-top:8px}
  .site-header .nav-item:hover .nav-mega,.site-header .nav-item:focus-within .nav-mega{display:block}
  .site-header .mega-main{grid-template-columns:1fr;padding:0}
  .site-header .mega-promo{margin-top:16px}
  .site-header .mega-footer{grid-column:auto}
  .site-header .main-nav .btn{margin-top:8px}
  .site-header .main-nav{justify-content:flex-start}
  .site-header .main-nav .quote-open{position:static;transform:none}
}
@media(max-width:900px){.nav-item.open .nav-mega{display:block}}

/* Blog featured images: site-colour SVG illustrations, same rule everywhere they appear */
.blog-img{width:100%;height:180px;object-fit:cover;border-radius:12px;margin-bottom:14px;display:block}
/* Second footer row (2026-11-02): more service/development sections, footer only */
.footer-grid2{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;border-top:1px solid rgba(255,255,255,.2);margin-top:28px;padding-top:24px}
@media(max-width:900px){.footer-grid2{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid2{grid-template-columns:1fr}}
/* Footer tools band (2026-11-02): two tool groups below the main footer columns, footer only */
.footer-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-top:8px}
.footer-tools>div{min-width:0}
/* Bottom footer row: SEO Tools, contact/Follow, Quick Links, Dev Tools — always 4 in one line, no wrapping to a second row (2026-11-02, user request) */
/* Row below the tools: Recognition awards and consultation + Follow in the SAME line (footer only, user drawn-line instruction 2026-11-02 — no second row, no extra space below the logos) */
.footer-below{display:flex;gap:28px;justify-content:space-between;align-items:flex-start;border-top:1px solid rgba(255,255,255,.25);margin-top:32px;padding-top:28px}
.footer-below .footer-awards{border-top:0;margin-top:0;padding-top:0;flex:1;min-width:0}
.footer-below .award-strip{margin:0}
.footer-follow{flex:none;width:280px;margin-top:0}
@media(max-width:560px){.footer-below{flex-direction:column}.footer-follow{width:auto}}
/* Unique footer separator above the tools band: gradient lines with a coral diamond in the centre */
.footer-separator{display:flex;align-items:center;gap:18px;margin:28px 0 8px}
.footer-separator::before,.footer-separator::after{content:"";height:2px;flex:1;background:linear-gradient(90deg,transparent,#FF5A3C,#7AB8E8,transparent)}
.footer-separator::after{background:linear-gradient(90deg,transparent,#7AB8E8,#FF5A3C,transparent)}
.footer-separator span{display:block;width:14px;height:14px;background:#FF5A3C;border:2px solid #fff;transform:rotate(45deg);flex:none;box-shadow:0 0 0 4px rgba(255,90,60,.25)}
/* Blog archive + article design (2026-11-02): scoped to blog classes only */
.breadcrumbs{max-width:1140px;margin:0 auto;padding:18px 20px 0;font-size:14px;color:var(--muted)}
.breadcrumbs a{color:var(--navy);text-decoration:none}.breadcrumbs a:hover{text-decoration:underline}.breadcrumbs span{margin:0 6px}
.chip-row{display:flex;gap:10px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:12px;margin-bottom:24px}
.chip{white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:8px 16px;color:var(--navy);text-decoration:none;font-weight:700;background:#fff}
.chip:hover,.chip.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.blog-featured{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;margin-bottom:32px;text-decoration:none;color:var(--ink)}
.blog-featured img{width:100%;height:280px;object-fit:cover;border-radius:14px}
.blog-featured h2{color:var(--navy)}
.pagination{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.pagination a{border:1px solid var(--line);border-radius:10px;padding:9px 15px;color:var(--navy);text-decoration:none;font-weight:700;background:#fff}
.pagination a.active,.pagination a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.blog-layout{display:grid;grid-template-columns:1fr 320px;gap:36px;align-items:start}
.blog-main{min-width:0}
@media(max-width:560px){.btn,.btn-outline-light{padding:11px 16px;font-size:15px}}
.blog-sidebar{position:sticky;top:90px}
.toc-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;margin-bottom:28px}
.toc-box ol{margin:0;padding-left:22px}.toc-box li{margin:8px 0}.toc-box a{color:var(--navy);text-decoration:none}.toc-box a:hover{text-decoration:underline}
.cta-banner{background:linear-gradient(160deg,#2B5CB8,#141E44);border-radius:16px;padding:28px;margin:32px 0}
@media(max-width:900px){.blog-layout{grid-template-columns:1fr}.blog-sidebar{position:static}.blog-featured{grid-template-columns:1fr}.blog-featured img{height:200px}}
/* Team photo: caption laid over the image, so the orange image never sits bare */
.team-photo{position:relative}
.team-photo-caption{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;font-size:clamp(20px,3vw,32px);font-weight:800;line-height:1.3;padding:24px 32px;text-shadow:0 4px 18px rgba(20,30,68,.65)}

.inline-icon{display:inline-block;vertical-align:-3px}
.social-row{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.social-row a{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;text-decoration:none}
.social-row a:hover{background:var(--coral);border-color:var(--coral)}
.search-box .inline-icon{vertical-align:-4px}
.float-card .inline-icon{vertical-align:-2px}

/* Work With Us redesign (2026-11-02): choice cards, service picker, tabs */
.wwu-choice{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
.wwu-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;text-decoration:none;color:inherit;box-shadow:0 16px 36px rgba(30,42,90,.10);transition:transform .15s,box-shadow .15s}
.wwu-card:hover{transform:translateY(-3px);box-shadow:0 22px 44px rgba(30,42,90,.16)}
.wwu-card svg{width:48px;height:48px}
.wwu-card h3{margin:14px 0 6px;color:var(--navy)}
.wwu-card p{color:var(--muted)}
.wwu-link{color:var(--coral);font-weight:700}
.pick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0 6px}
.pick-card{border:1px solid #CBD0DC;border-radius:12px;padding:14px;cursor:pointer;background:#fff}
.pick-card input{width:auto;accent-color:var(--coral);margin:0 0 8px}
.pick-card strong{display:block;color:var(--navy)}
.pick-card span{display:block;color:var(--muted);font-size:14px;margin-top:4px}
.pick-card.is-picked{border-color:var(--coral);background:#FFF4F0;box-shadow:0 0 0 1px var(--coral)}
.wwu-tabs{display:flex;gap:10px;flex-wrap:wrap}
.wwu-tab{border:1px solid var(--navy);background:#fff;color:var(--navy);border-radius:999px;padding:10px 20px;font:inherit;font-weight:700;cursor:pointer}
.wwu-tab.active{background:var(--navy);color:#fff}
@media(max-width:900px){.wwu-choice{grid-template-columns:1fr}.pick-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pick-grid{grid-template-columns:1fr}}

/* Work With Us fix (2026-11-02): white cards inside a navy section must keep navy headings and muted body text, not the navy's white text */
.section-navy .card h3{color:var(--navy)}
.section-navy .card p{color:var(--muted)}
.section-navy .card strong{color:var(--navy)}
/* Case study fix (2026-11-02): tags inside white cards on a navy section
   inherit the section's white text, so they vanished on their cream pill.
   Force navy tag text so result labels stay readable. */
.section-navy .card .tag{color:var(--navy)}
/* Case study results (2026-11-02): result stat cards are orange, not white.
   Text and labels are re-coloured to stay readable on the orange. */
.section-navy .card.stat-card{background:var(--coral);border-color:var(--coral)}
.section-navy .card.stat-card h3{color:#fff}
.section-navy .card.stat-card p{color:#FFE9E3}
.section-navy .card.stat-card .tag{background:#fff;color:var(--navy);border-color:#fff}

/* Mega work cards (2026-11-02): thumbnail cards in the Our Work dropdown */
.mega-work-grid{grid-template-columns:repeat(3,1fr)}
.mega-work-card{display:block;text-decoration:none;border-radius:12px;padding:10px}
.mega-work-card:hover{background:#EEF1FB}
.mega-work-card img{width:100%;height:100px;object-fit:cover;object-position:top;border-radius:10px;display:block;margin-bottom:10px}
.mega-work-card strong{display:block;color:var(--navy);font-size:15px;line-height:1.3}
.mega-work-card .nav-sub{margin-top:2px}
@media(max-width:1150px){.site-header .nav-dropdown{left:auto!important;transform:none!important}}

/* Full-site audit fixes (2026-11-02) */
/* 1. Header "Get a Quote" is a coral .btn on the navy header: generic navy hover
   would blend into the header, so it hovers to white with navy text instead. */
.site-header .btn:not(.btn-light):hover{background:#fff;color:var(--navy)!important}
/* 2. Blog sidebar consultation card is a navy gradient, not a scoped navy section,
   so its white button hovered to generic navy and blended in: coral instead. */
.blog-sidebar .btn-light:hover{background:var(--coral);color:#fff!important}
/* 3. Dropdown hover gap: panels sit 10px below their menu item, and that gap is a
   dead zone where the menu vanished mid-move. This invisible bridge is part of
   the panel, so moving down through it keeps the menu open. */
.nav-dropdown::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
@media(max-width:1150px){.nav-dropdown::before{display:none}}

/* Homepage "One window" section restyle (2026-11-02): white raised cards on the
   navy section, so the boxes stand out instead of blending into the background,
   with a lift-on-hover animation on every card, tag, and tool pill. Scoped to
   .one-window only, so other navy sections are untouched. */
.one-window{background:linear-gradient(160deg,#22336E,#141E44 55%,#1E2A5A);border-top:4px solid var(--coral);border-bottom:4px solid var(--coral)}
.one-window h2::after{content:"";display:block;width:72px;height:5px;background:var(--coral);border-radius:99px;margin-top:14px}
.one-window-card{background:#fff;border:1px solid #fff;box-shadow:0 20px 44px rgba(0,0,0,.38);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.one-window-card h3{color:var(--navy)}
.one-window-card p{color:var(--muted)}
.one-window-card ul{list-style:none;padding:0;margin:0}
.one-window-card li{margin:8px 0}
.one-window-card li a{color:var(--navy);text-decoration:none;font-weight:600}
.one-window-card li a:hover{color:var(--coral);text-decoration:underline}
.one-window-card:hover{transform:translateY(-8px);box-shadow:0 30px 56px rgba(0,0,0,.48);border-color:var(--coral)}
.one-window-tags{display:flex;flex-wrap:wrap;gap:10px}
.one-window-tags .tag{background:#fff;color:var(--navy);border:1px solid #fff;box-shadow:0 12px 26px rgba(0,0,0,.30);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease, color .25s ease;padding:9px 16px;font-weight:700}
.one-window-tags .tag:hover{transform:translateY(-5px);box-shadow:0 20px 34px rgba(0,0,0,.42);border-color:var(--coral);color:var(--coral)}
.one-window-tools{display:flex;flex-wrap:wrap;gap:12px}
.one-window-tools a{display:inline-block;background:#fff;color:var(--navy);font-weight:700;text-decoration:none;border-radius:999px;padding:12px 22px;box-shadow:0 14px 30px rgba(0,0,0,.32);transition:transform .25s ease,box-shadow .25s ease,color .25s ease}
.one-window-tools a:hover{transform:translateY(-5px);box-shadow:0 22px 38px rgba(0,0,0,.44);color:var(--coral)}
@media(prefers-reduced-motion:reduce){.one-window-card,.one-window-tags .tag,.one-window-tools a{transition:none}}

/* One Window hover-blend fix (2026-11-02): buttons inside the white cards must
   NOT use the navy-section white hover (white on white). On a white card they
   hover to navy instead. Buttons directly on the navy section (e.g. Development
   hub) are untouched and keep their white hover, which is correct there. */
.one-window-card .btn:hover{background:var(--navy)!important;color:#fff!important;box-shadow:0 8px 20px rgba(30,42,90,.25)}

/* Floating WhatsApp chat button (2026-11-02): fixed bottom-right on every page,
   green so visitors recognise it instantly, lifts on hover like the other cards. */
.whatsapp-float{position:fixed;right:20px;bottom:20px;z-index:9999;width:60px;height:60px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(0,0,0,.35);transition:transform .25s ease,box-shadow .25s ease}
.whatsapp-float:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 18px 36px rgba(0,0,0,.4)}
.whatsapp-float svg{width:32px;height:32px;fill:#fff}
@media(max-width:560px){.whatsapp-float{right:16px;bottom:16px;width:54px;height:54px}}
@media(prefers-reduced-motion:reduce){.whatsapp-float{transition:none}}