/* Business on a Budget: brand layer over the SEOPP template (main.css).
   Colours come from the logo: deep blue #053AA1, blue #2165B8, sky #5FBDE5, cyan #66E3FF. */

:root {
  --main-h: 213;          /* #2165B8, 5.8:1 against white text */
  --main-s: 70%;
  --main-l: 43%;
  --main-two-h: 191;      /* #66E3FF accent, used with dark text only */
  --main-two-s: 100%;
  --main-two-l: 70%;
  --black: 222 62% 7%;    /* deep navy instead of the template's near-black */
  --brand-deep: #053AA1;
  --brand-sky: #5FBDE5;
  --brand-gradient: linear-gradient(100deg, #053AA1 0%, #2165B8 45%, #5FBDE5 80%, #66E3FF 100%);
}

body { background-color: #fff; }

/* Buttons: the cyan hover fill needs dark text */
.btn-main.hover-style-one:hover,
.btn-outline-main.hover-style-one:hover { color: hsl(var(--black)) !important; }
.btn-white { background-color: #fff !important; color: hsl(var(--black)) !important; }
.btn-outline-main { background-color: transparent !important; color: var(--main-600) !important; border: 1px solid var(--main-600) !important; }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .accordion-button:focus-visible {
  outline: 3px solid var(--brand-deep) !important;
  outline-offset: 3px;
}
.bg-black a:focus-visible, footer a:focus-visible, .on-dark a:focus-visible { outline-color: #66E3FF !important; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: #fff; color: hsl(var(--black)); padding: 12px 20px; border-radius: 0 0 8px 0; font-weight: 700; }
.skip-link:focus { left: 0; }

/* Logo sizes */
.site-logo img { width: 180px; height: auto; }
@media (min-width: 992px) { .header .site-logo { padding-block: 10px; } }
@media (max-width: 575px) { .site-logo img { width: 160px; } }
.footer-logo img { width: 240px; height: auto; }

/* Header call box */
.header-call a { white-space: nowrap; }

/* Text gradient accent for headings */
.text-gradient { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Page banner (breadcrumb) */
.page-banner { padding: 110px 0 100px; background-color: hsl(var(--black)); }
.page-banner__bg { object-fit: cover; opacity: .9; }
.page-banner h1 { color: #fff; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.15; }
.page-banner .lead-text { color: rgba(255,255,255,.82); font-size: 1.15rem; max-width: 720px; margin-inline: auto; }
.page-banner .crumbs a, .page-banner .crumbs span { color: #fff; }
.page-banner .crumbs li[aria-hidden] { color: rgba(255,255,255,.6); }
@media (max-width: 767px) { .page-banner { padding: 70px 0 60px; } }

/* Long-form content */
.prose { color: var(--neutral-700); font-size: 1.075rem; line-height: 1.75; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); margin-top: 3rem; line-height: 1.25; color: hsl(var(--heading-color)); scroll-margin-top: 120px; }
.prose h3 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); margin-top: 2rem; line-height: 1.3; color: hsl(var(--heading-color)); scroll-margin-top: 120px; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose p { color: var(--neutral-700); }
.prose a:not(.btn) { display: inline; color: var(--main-600); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 600; }
.prose a:not(.btn):hover { color: var(--brand-deep); text-decoration-thickness: 2px; }
.prose strong { color: hsl(var(--heading-color)); }
.prose .note { font-size: .95rem; color: var(--neutral-500); }
.prose .note a { font-weight: 500; }
.prose ol.steps-list { counter-reset: step; list-style: none; padding-left: 0; }
.prose ol.steps-list > li { counter-increment: step; position: relative; padding-left: 3.1rem; margin-top: .9rem; }
.prose ol.steps-list > li::before { content: counter(step); position: absolute; left: 0; top: -.1rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--main-50); color: var(--main-600); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .95rem; }

/* Check list (template style) */
.check-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.check-list li { position: relative; padding-left: 2.1rem; }
.check-list li::before { content: "\e182"; font-family: "Phosphor-Bold" !important; position: absolute; left: 0; top: .3rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--main-600); color: #fff; font-size: .7rem; display: flex; align-items: center; justify-content: center; }

/* Highlight box (for "Short answer" and similar lead-ins) */
.highlight-box { background: var(--main-40); border-left: 4px solid var(--main-600); border-radius: 12px; padding: 1.4rem 1.6rem; }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--neutral-200); border-radius: 14px; }
.table-wrap table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 1rem; }
.table-wrap th { background: hsl(var(--black)); color: #fff; font-weight: 600; text-align: left; padding: 14px 18px; }
.table-wrap td { padding: 14px 18px; border-top: 1px solid var(--neutral-200); vertical-align: top; color: var(--neutral-700); }
.table-wrap tbody tr:nth-child(even) td { background: var(--neutral-50); }
.table-wrap .num { text-align: right; white-space: nowrap; }

/* Feature cards built from H3 groups */
.feature-card { border: 1px solid var(--neutral-200); border-radius: 18px; padding: 1.75rem; height: 100%; background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s; }
.feature-card:hover { border-color: var(--main-200); box-shadow: 0 18px 40px -24px rgba(5,58,161,.35); transform: translateY(-3px); }
.feature-card .feature-icon { width: 54px; height: 54px; border-radius: 14px; background: var(--main-50); color: var(--main-600); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.feature-card h3 { font-size: 1.25rem; margin-top: 1.1rem; margin-bottom: .6rem; }
.feature-card p:not(.fw-bold) { font-size: 1rem; line-height: 1.65; color: var(--neutral-600); }
.feature-card p + p { margin-top: .7rem; }

/* Sidebar */
.side-nav-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; color: hsl(var(--heading-color)); }
.side-nav a.is-current { background-color: var(--main-600) !important; color: #fff !important; }
.side-nav a.is-current span { color: var(--main-600) !important; background: #fff !important; }
.toc { border: 1px solid var(--neutral-200); border-radius: 16px; padding: 1.5rem; }
.toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.toc a { color: var(--neutral-700); font-weight: 500; line-height: 1.4; display: block; }
.toc a:hover { color: var(--main-600); }
/* Sticky only when the whole sidebar fits below the fixed header */
@media (min-width: 1200px) and (min-height: 1000px) { .sidebar-sticky-css { position: sticky; top: 120px; } }

.contact-card { background: hsl(var(--black)); border-radius: 20px; overflow: hidden; position: relative; color: #fff; }
.contact-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.contact-card__body { position: relative; padding: 2rem; }
.contact-card a { color: #fff; }
.contact-card a:hover { color: #66E3FF; }

/* FAQ accordion spacing inside content */
.faq-block { margin-top: 1.5rem; }
.faq-block .accordion-button { font-size: 1.15rem !important; line-height: 1.4; }
.faq-block .accordion-body p { color: var(--neutral-600); }
.faq-block .accordion-body p + p { margin-top: .7rem; }

/* CTA band */
.cta-band { background: hsl(var(--black)); border-radius: 28px; overflow: hidden; position: relative; }
.cta-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-band p { color: rgba(255,255,255,.85); }

/* Cards that link (guides, services) */
.link-card { border: 1px solid var(--neutral-200); border-radius: 18px; overflow: hidden; height: 100%; background: #fff; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.link-card:hover { box-shadow: 0 20px 44px -26px rgba(5,58,161,.4); transform: translateY(-3px); }
.link-card__img { aspect-ratio: 16/10; overflow: hidden; }
.link-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.link-card:hover .link-card__img img { transform: scale(1.04); }
.link-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.link-card__body h3 { font-size: 1.2rem; line-height: 1.35; }
.link-card__body h3 a { color: hsl(var(--heading-color)); }
.link-card__body h3 a::after { content: ""; position: absolute; inset: 0; }
.link-card { position: relative; }
.link-card__body p { color: var(--neutral-600); font-size: .98rem; line-height: 1.6; }
.link-card__more { margin-top: auto; color: var(--main-600); font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }

/* Testimonials on blue */
.quote-card { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; padding: 1.75rem; height: 100%; }
.quote-card blockquote { color: #fff; font-size: 1.15rem; line-height: 1.6; margin: 0; }
.quote-card figcaption { margin-top: 1.25rem; color: rgba(255,255,255,.85); }
.quote-card figcaption strong { color: #fff; display: block; }

/* Rotating badge (SVG) */
.rotate-badge { width: 150px; height: 150px; }
.rotate-badge text { font-family: var(--heading-font); font-size: 10.5px; letter-spacing: 3.1px; font-weight: 700; text-transform: uppercase; }

/* Text marquee of tools we work with */
.tool-marquee { overflow: hidden; }
.tool-marquee__track { display: flex; gap: 3rem; width: max-content; animation: tool-scroll 38s linear infinite; }
.tool-marquee__track span { font-family: var(--heading-font); font-weight: 800; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); color: hsl(var(--heading-color)); white-space: nowrap; display: inline-flex; align-items: center; gap: 3rem; }
.tool-marquee__track span::after { content: "\2726"; color: var(--main-600); font-size: .8em; }
.tool-marquee__track span.outline { color: transparent; -webkit-text-stroke: 1px hsl(var(--heading-color)); }
@keyframes tool-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Forms */
.form-control-boab { width: 100%; background: #fff; border: 1px solid #7A8496; border-radius: 12px; padding: 14px 16px; font-size: 1rem; color: hsl(var(--heading-color)); }
.form-control-boab:focus { border-color: var(--main-600); outline: none; box-shadow: 0 0 0 3px var(--main-100); }
.form-label-boab { display: block; font-weight: 600; margin-bottom: .45rem; color: hsl(var(--heading-color)); }
.form-label-boab .opt { font-weight: 400; color: var(--neutral-600); }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-alert { border-radius: 14px; padding: 1.1rem 1.3rem; }
.form-alert--ok { background: #e8f7ee; border: 1px solid #9bd8b2; color: #10512b; }
.form-alert--err { background: #fdecec; border: 1px solid #f2a7a7; color: #7a1717; }

/* WhatsApp floating button */
.wa-float { position: fixed; right: 18px; bottom: 90px; z-index: 98; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 10px 24px -8px rgba(0,0,0,.4); }
.wa-float:hover { color: #fff; transform: translateY(-2px); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; }
  .tool-marquee__track { animation: none; }
}

/* Header: always fixed with the template's spacer below it, so nothing jumps when the
   template's "fixed-header" class arrives on scroll. */
.header { position: fixed; inset-inline: 0; top: 0; z-index: 99; background-color: #fff; transition: box-shadow .25s, background-color .25s; }
.header.fixed-header { animation: none; background-color: hsl(var(--white) / .92); }
.header .nav-menu__link { font-size: 1.05rem; }
.boab-mega .nav-submenu__link { padding-inline: .5rem !important; }
.max-w-820-px { max-width: 820px; }

/* Home banner illustrations: keep them clear of the headline */
.banner-two .banner-image-1 img, .banner-two .banner-image-2 img { width: 100%; height: auto; max-width: 340px; border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(5,58,161,.45); }
.banner-image-1, .banner-image-2 { max-width: 22%; }
@media (min-width: 1400px) { .banner-image-1, .banner-image-2 { max-width: 24%; } }

/* Service card pastels in brand tones (template used mint, lavender, pink and lemon) */
.bg-mint-sky { background-color: #e3f8fc !important; }
.bg-lavender-blue { background-color: #e8eefc !important; }
.bg-soft-pink { background-color: #e2f1fb !important; }
.bg-creamy-lemon { background-color: #e6fbff !important; }
.bg-main-40 { background-color: var(--main-40) !important; }
.max-w-760-px { max-width: 760px; }
.max-w-340-px { max-width: 340px; }
.table-wrap tbody th { background: transparent; color: hsl(var(--heading-color)); font-weight: 600; border-top: 1px solid var(--neutral-200); padding: 14px 18px; vertical-align: top; }
.table-wrap tbody tr:nth-child(even) th { background: var(--neutral-50); }

/* ---- Fixes from the QA review (2026-10-26) ---- */
/* Menus: the mega menu spans the nav (template default); dropdowns also open for keyboard users */
.boab-mega .nav-submenu__link { padding-inline: .5rem !important; }
.header-menu .has-submenu:focus-within .nav-submenu { visibility: visible; opacity: 1; transform: scaleY(1); }
.header-menu .nav-submenu:not(.boab-mega) { width: max-content; max-width: 20rem; }
.nav-menu--mobile .has-submenu > button { position: relative; }
.nav-menu--mobile .has-submenu > button::before { content: "\e136"; font-family: "Phosphor"; position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); transition: transform .2s; color: hsl(var(--heading-color) / .5); }
.nav-menu--mobile .has-submenu.active > button::before { transform: translateY(-50%) rotate(180deg); }
.nav-menu--mobile .nav-submenu { width: 100% !important; }

/* Headings: scale the template's 48px headings on small screens, avoid one-word last lines */
.text-48-px { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem) !important; line-height: 1.18; }
h1, h2 { text-wrap: balance; overflow-wrap: normal; hyphens: manual; }

/* Links inside running text wrap with the sentence (template sets a { display: inline-block }) */
:where(.prose, .feature-card, .cta-band, .faq-block, .highlight-box) :where(p, li) > a:not(.btn), address a { display: inline; }
.on-dark p a:not(.btn), .cta-band p a:not(.btn) { color: #66E3FF; text-decoration: underline; text-underline-offset: 3px; }
.on-dark p a:not(.btn):hover, .cta-band p a:not(.btn):hover { color: #fff; }

/* FAQ accordions inside articles: the article heading margins must not reach the accordion */
.prose .accordion-header { margin-top: 0 !important; font-size: inherit; }
.prose .feature-card h3 { margin-top: 1.1rem; }

/* Buttons: keep the arrow round and let long labels wrap neatly */
.btn > span.rounded-circle { flex-shrink: 0; }
.btn .button__label { text-align: left; line-height: 1.3; }
@media (max-width: 575px) {
  .cta-band { padding-inline: 1.25rem !important; }
  .cta-band .btn { max-width: 100%; }
}

/* Breadcrumb separators drawn with CSS so a wrapped line never ends with a slash */
.crumbs li:not(:last-child)::after { content: "/"; margin-inline-start: .5rem; color: rgba(255,255,255,.6); }

/* Home hero: two decorative shapes collide with the headline on phones */
@media (max-width: 991px) { .banner-two-shape-1, .banner-two-shape-5 { display: none; } }

/* 404 page uses a light section (the template's .error-section is dark) */
.not-found-section { padding: 120px 0; }
/* Back-to-top button in brand colours */
.progress-wrap { background-color: #fff !important; mix-blend-mode: normal !important; box-shadow: 0 6px 18px -6px rgba(5,58,161,.35); }
.progress-wrap::after { color: var(--main-600) !important; }
.form-control-boab[aria-invalid="true"] { border-color: #b42318; box-shadow: 0 0 0 2px rgba(180,35,24,.15); }
.text-danger { color: #b42318 !important; }
.customer-statistics .rotate-badge, .customer-statistics .rotate-badge + span { color: #66E3FF; }

/* Tables on phones: each row becomes a small card, every value labelled with its column */
@media (max-width: 575px) {
  .table-wrap { border: 0; overflow: visible; }
  .table-wrap table { min-width: 0; }
  .table-wrap thead { display: none; }
  .table-wrap tr { display: block; border: 1px solid var(--neutral-200); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
  .table-wrap tbody th, .table-wrap td { display: block; border-top: 0 !important; text-align: left !important; white-space: normal; }
  .table-wrap tbody th { background: var(--main-40) !important; }
  .table-wrap tbody tr:nth-child(even) td { background: transparent; }
  .table-wrap td::before { content: attr(data-label); display: block; font-weight: 600; font-size: .85rem; color: var(--neutral-500); margin-bottom: 2px; }
}

/* Contents list at the top of guides on small screens */
.toc-mobile summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile summary::after { content: "\e136"; font-family: "Phosphor"; transition: transform .2s; }
.toc-mobile[open] summary::after { transform: rotate(180deg); }
.toc-mobile[open] summary { margin-bottom: 1rem; }
.toc-mobile .side-nav-title { margin-bottom: 0; }

/* Inline code in brand colours (Bootstrap default is magenta) */
code { color: var(--main-700); background: var(--main-50); padding: .1em .35em; border-radius: 4px; font-size: .9em; }

/* ---- Accessibility fixes from the review (2026-10-26) ---- */
/* AOS hides elements until it runs; without JavaScript everything stays visible */
html:not(.js) [data-aos] { opacity: 1 !important; transform: none !important; visibility: visible !important; }

/* Keep focused elements and anchor targets clear of the fixed header */
html { scroll-padding-top: 112px; }
@media (max-width: 991px) { html { scroll-padding-top: 88px; } }

/* Focus rings: cyan only where the surface is dark; deep blue on white and pastel cards */
.on-dark .bg-white a:focus-visible, .on-dark .bg-white button:focus-visible,
.on-dark [class*="bg-mint"] a:focus-visible, .on-dark [class*="bg-lavender"] a:focus-visible,
.on-dark [class*="bg-soft"] a:focus-visible, .on-dark [class*="bg-creamy"] a:focus-visible,
.on-dark .btn-white:focus-visible { outline-color: var(--brand-deep) !important; }
.on-dark button:focus-visible, .testimonials-two a:focus-visible, .testimonials-two button:focus-visible { outline-color: #66E3FF !important; }

/* Desktop dropdowns: Escape dismisses them until the pointer or focus leaves */
.header-menu .has-submenu.is-dismissed .nav-submenu { visibility: hidden !important; opacity: 0 !important; }

/* Pause controls for moving content */
.pause-btn { position: absolute; top: 24px; right: 24px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--neutral-300); background: #fff; color: hsl(var(--heading-color)); display: flex; align-items: center; justify-content: center; }
.tool-marquee.is-paused .tool-marquee__track, .tool-marquee:hover .tool-marquee__track { animation-play-state: paused; }