/* Premier v6 — Corporate. Proof-led hero, restrained typography, navy/slate palette. */
:root{
  --ink:#0f2438; --ink-2:#16324f; --muted:#5b6b80;
  --paper:#ffffff; --wash:#f7f9fc; --line:#e2e8f0;
  --blue:#1f4e79; --blue-deep:#16395b; --accent:#2b6cb0; --accent-soft:#eef4fa;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r:10px; --nav-h:80px;
  --sh:0 1px 2px rgba(15,36,56,.04),0 8px 24px rgba(15,36,56,.06);
  --fs-h1:clamp(2rem,4vw,3rem);
  --fs-h2:clamp(1.6rem,2.8vw,2.15rem);
  accent-color:var(--blue);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* overflow-x is NOT hidden here on purpose: masking it silently clips any
   element that genuinely overflows. The layout below is fluid enough not to
   need it, and a real overflow now stays visible instead of disappearing. */
body{font-family:var(--sans);color:#334155;background:var(--paper);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.02em;line-height:1.2;font-weight:600}
.container{max-width:1120px;margin:0 auto;padding:0 28px}
.material-icons{font-family:'Material Icons';font-weight:normal;font-style:normal;line-height:1;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* FOCUS — every interactive element gets a visible ring on keyboard focus.
   Previously nothing outside the form inputs had one, so keyboard and
   switch-device users had zero focus feedback. :focus-visible keeps the ring
   off for mouse clicks, which is what people expect. */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
a:focus-visible,button:focus-visible,summary:focus-visible,.contact-method:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* On dark backgrounds the blue ring has too little contrast — use the light blue. */
.hero :focus-visible,.results :focus-visible,.cta-band :focus-visible,.contact-info-card :focus-visible,.integration-bar :focus-visible,.footer :focus-visible{outline-color:#9dc1ec}
/* Skip link — first tab stop on every page, visually hidden until focused. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:99999;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:600;font-size:.9rem;text-decoration:none}
.skip-link:focus{left:0}
/* Screen-reader-only text (labels for icon-only fields, etc.) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Single global live region for status/announcements. Kept in the DOM from
   page load so assistive tech has a stable node to watch. */
.live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* NAV — white, hairline rule */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);min-height:var(--nav-h);transition:box-shadow .25s}
/* Shadow only once scrolled, so the hero keeps its clean flat edge. */
.navbar.is-scrolled{box-shadow:0 1px 2px rgba(15,36,56,.05),0 6px 20px rgba(15,36,56,.08)}
/* Logo is ~150px wide at 52px tall; the old 280px cap left dead space in the
   nav between the logo and the links. */
.logo-svg{height:52px;width:auto;max-width:170px;object-fit:contain}
.nav-container{max-width:1120px;margin:0 auto;padding:8px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--nav-h)}
.logo{cursor:pointer;display:flex;align-items:center;text-decoration:none}
.logo-svg{}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-toggle{display:none;background:transparent;border:1px solid var(--line);border-radius:8px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.nav-toggle .material-icons{font-size:24px;color:var(--ink)}
.nav-toggle:hover{background:var(--wash)}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-menu{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:inline-block}
.nav-btn{background:transparent;border:0;font-size:.875rem;font-weight:500;letter-spacing:.01em;color:#3b4c5f;cursor:pointer;padding:10px 14px;border-radius:8px;transition:.2s;text-decoration:none}
.nav-btn:hover{color:var(--blue);background:var(--wash)}
.cta-nav{background:var(--blue);color:#fff;border:0;font-weight:600;font-size:.875rem;padding:11px 20px;border-radius:8px;cursor:pointer;margin-left:8px;transition:.2s;text-decoration:none;display:inline-flex;align-items:center}
.cta-nav:hover{background:var(--blue-deep)}

/* HERO — centered, proof-led */
.hero{margin-top:var(--nav-h);color:#fff;padding:96px 0 72px;background:linear-gradient(180deg,#0f2438 0%,#16324f 100%)}
.hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.badge{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);border-radius:6px;padding:7px 14px;font-size:.74rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#cbd8e6}
.badge .dot{width:7px;height:7px;background:var(--accent);border-radius:50%}
.hero h1{font-size:var(--fs-h1);color:#fff;margin:24px 0 16px;max-width:900px}
.hero h1 .hl{color:#9dc1ec}
.hero-sub{font-size:1.05rem;color:#b9c8d9;max-width:660px;margin-bottom:30px}
.cta-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.cta-primary{background:#fff;color:var(--ink);border:0;font-weight:600;font-size:.95rem;padding:14px 26px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.2s;text-decoration:none}
.cta-primary:hover{background:#eef2f7}
.cta-secondary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);font-weight:500;font-size:.95rem;padding:13px 26px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.2s;text-decoration:none}
.cta-secondary:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.hero-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;width:100%;max-width:780px;margin:48px 0 0;padding-top:30px;border-top:1px solid rgba(255,255,255,.14);text-align:center}
.hero-proof dt{font-size:1.5rem;font-weight:600;color:#fff;letter-spacing:-.02em}
.hero-proof dd{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:#94a7bb;margin-top:4px}

/* CREDIBILITY BAR */
.integration-bar{background:#0b1d2e;padding:22px 0;border-top:1px solid rgba(255,255,255,.06)}
.integration-inner{display:flex;align-items:center;gap:32px;flex-wrap:wrap;justify-content:center}
.integration-label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#7d8fa3;font-weight:600}
.integration-logos{display:flex;gap:30px;flex-wrap:wrap;justify-content:center}
.integration-logos span{font-size:1rem;font-weight:600;color:#c3d2e6;letter-spacing:.01em}

section{padding:96px 0}
section[id]{scroll-margin-top:var(--nav-h)}
.section-kicker{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);background:var(--accent-soft);border:1px solid #d5e3f2;padding:5px 12px;border-radius:6px;margin-bottom:14px}
.section-header{text-align:center;max-width:680px;margin:0 auto 56px}
.section-header h2{font-size:var(--fs-h2);margin-bottom:12px}
.section-header p{color:#5b6b80;font-size:1.04rem}
.services{background:var(--wash)}
#process{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.service-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.service-card:hover{box-shadow:var(--sh);border-color:#cbd5e1}
.service-card.featured{border-color:var(--blue)}
.service-top{padding:30px 30px 10px}
.service-flag{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);background:var(--accent-soft);border:1px solid #d5e3f2;padding:4px 9px;border-radius:4px;margin-bottom:14px}
.service-icon{width:44px;height:44px;border-radius:9px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.service-icon .material-icons{font-size:24px}
.service-card h3{font-size:1.25rem;margin-bottom:6px}
.service-card .for{font-size:.85rem;font-weight:500;color:var(--blue);margin-bottom:10px}
.service-description{color:#475569;margin-bottom:14px;font-size:.96rem}
.outcome-list{list-style:none}
.outcome-list li{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:.92rem;color:#334155}
.outcome-list li .material-icons{color:var(--accent);font-size:19px;flex-shrink:0;margin-top:2px}
.service-meta{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.pill{background:var(--wash);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.78rem;font-weight:500;color:#3b4c5f}
.price-row{border-top:1px solid var(--line);margin-top:6px;padding-top:16px;display:flex;justify-content:space-between;align-items:flex-end}
.price{font-size:1.6rem;font-weight:600;color:var(--ink)}
.price-note{font-size:.8rem;color:#5b6b80}
.service-actions{padding:18px 30px 30px;margin-top:auto}
.quote-btn{width:100%;padding:13px;font-size:.88rem;font-weight:600;letter-spacing:.02em;background:var(--ink);color:#fff;border:0;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.2s}
.quote-btn:hover{background:var(--ink-2)}
.quote-btn.alt{background:var(--blue)}
.quote-btn.alt:hover{background:var(--blue-deep)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.split-h2{font-size:1.55rem;margin-bottom:10px}
.split-lead{color:#5b6b80;margin-bottom:18px}
.steps{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.step{padding:18px 20px;display:flex;gap:16px;background:#fff;border-bottom:1px solid var(--line);transition:.2s}
.step:hover{background:var(--wash)}
.step:last-child{border:0;background:var(--wash)}
.step-num{background:var(--ink);color:#fff;font-weight:600;font-size:.9rem;width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.step h4{color:var(--ink);font-size:.95rem;margin-bottom:2px}
.step p{color:#5b6b80;font-size:.9rem}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.check-card{background:var(--wash);border:1px solid var(--line);border-radius:var(--r);padding:18px;transition:.2s}
.check-card:hover{border-color:#c3d7ea;transform:translateY(-2px);box-shadow:var(--sh)}
.check-card .material-icons{color:var(--blue);font-size:22px}
.check-card h4{font-size:.9rem;margin:10px 0 4px;color:var(--ink)}
.check-card p{font-size:.86rem;color:#5b6b80}

.results{background:linear-gradient(180deg,#0f2438,#16324f);color:#c3d2e6}
.results h2{color:#fff}
.results .section-header p{color:#94a7bb}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.result-card{border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:26px;background:rgba(255,255,255,.04);transition:.2s}
.result-card:hover{border-color:rgba(157,193,236,.45);background:rgba(255,255,255,.07);transform:translateY(-3px)}
.result-card h3{color:#fff;margin:10px 0;font-size:1.15rem}
.result-card p{font-size:.92rem;color:#c3d2e6}
.result-card .tag{color:#9dc1ec;font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}

.faq-wrap{max-width:760px;margin:0 auto;display:grid;gap:10px}
details{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:17px 20px;transition:.2s}
details:hover{border-color:#cbd5e1}
details[open]{border-color:var(--blue);box-shadow:var(--sh)}
/* Native marker removed in favour of a rotating chevron so the open/closed
   state is visible without relying on the platform default. */
summary{cursor:pointer;font-weight:600;color:var(--ink);font-size:.98rem;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:"expand_more";font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:22px;color:#5b6b80;transition:transform .2s;flex-shrink:0}
details[open] summary::after{transform:rotate(180deg)}
details p{color:#475569;margin-top:8px;font-size:.93rem}

.cta-band{background:linear-gradient(135deg,#1f4e79 0%,#16395b 100%);border-radius:var(--r);color:#fff;padding:44px;display:grid;grid-template-columns:1.4fr .6fr;gap:32px;align-items:center;margin-top:36px}
.cta-band h2{color:#fff;font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:8px}
.cta-band p{color:#c3d2e6;margin-bottom:20px}
.cta-band .ghost{color:#cfe0f5;font-weight:600}
.cta-band-aside{text-align:right}
.muted-note{font-size:.9rem;color:#b9c8d9;margin-top:10px}

.contact-section{background:linear-gradient(180deg,#fff,var(--wash))}
.contact-wrapper{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;align-items:start}
/* Sticky offset was 96px against an 80px nav plus no gap; 108px keeps the card
   clear of the fixed nav with breathing room and matches the enlarged mobile nav. */
.contact-info-card{background:var(--ink);color:#c3d2e6;border-radius:var(--r);padding:28px;position:sticky;top:108px}
.contact-info-card h3{color:#fff;font-size:1.2rem;margin-bottom:16px}
.contact-methods{display:flex;flex-direction:column;gap:10px}
/* Secondary details sit behind a compact, borderless disclosure so the card
   stays short. These dark-card overrides beat the light default
   `details`/`summary` styling above (mine come later in the file). */
.contact-more{background:none;border:0;border-radius:0;margin:10px 0 14px;padding:0}
.contact-more[open]{box-shadow:none}
.contact-more summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0;font-size:.84rem;font-weight:600;color:#9dc1ec}
.contact-more summary::-webkit-details-marker{display:none}
.contact-more summary::after{content:"expand_more";font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:18px;line-height:1;color:#9dc1ec;transition:transform .2s}
.contact-more[open] summary::after{transform:rotate(180deg)}
.contact-more p{margin:6px 0 0;padding:0;font-size:.85rem;color:#9fb0c3}
/* [hidden] must win over the layout display values below — without this a
   .contact-method with the hidden attribute still renders as display:flex. */
[hidden]{display:none!important}
.contact-method{display:flex;gap:12px;padding:13px;border:1px solid rgba(255,255,255,.12);border-radius:8px;margin-bottom:12px;background:rgba(255,255,255,.04);align-items:center;color:inherit;text-decoration:none;transition:.2s}
a.contact-method:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.26)}
.contact-method .method-chevron{margin-left:auto;color:#9dc1ec;font-size:20px}
.method-icon{width:40px;height:40px;border-radius:8px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.method-icon .material-icons{color:#9dc1ec;font-size:20px}
.method-content h4{color:#fff;font-size:.9rem;margin-bottom:2px}
.method-content span,.contact-link{color:#c3d2e6;font-size:.88rem;text-decoration:none}
.guarantee{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:11px 14px;font-size:.82rem;color:#cbd8e6;margin-top:8px}
.contact-form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.form-header{padding:24px 24px 0}
.form-header h3{font-size:1.2rem;margin-bottom:2px}
.form-header p{color:#5b6b80;font-size:.92rem}
.stunning-form{padding:22px 28px 28px}
.honeypot-field{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-field-group{margin-bottom:14px}
.form-field-group label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.02em;margin-bottom:6px;color:#3b4c5f}
.input-wrapper{position:relative;display:flex;align-items:center}
/* #94a3b8 on white was 2.56:1 — a WCAG AA failure on every form field.
   #64748b lands at 4.76:1. */
.input-icon{position:absolute;left:12px;color:#64748b;font-size:19px;pointer-events:none}
.input-wrapper input,.input-wrapper select,.input-wrapper textarea{width:100%;padding:12px 12px 12px 40px;border:1px solid var(--line);border-radius:8px;font-size:.95rem;color:var(--ink);background:#fff;font-family:inherit}
.input-wrapper textarea{min-height:130px;resize:vertical}
/* Room at the bottom for the character counter that floats there. */
.message-field textarea{padding-bottom:30px}
.input-wrapper select option{color:var(--ink);background:#fff}
.select-wrapper select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:38px;color:var(--ink)}

/* Service field — a native dropdown at every width. The `.service-field`
   prefix outranks the generic form label rule. */
.service-field{border:0;padding:0;margin:0 0 14px;min-width:0}
.service-field legend{padding:0;margin-bottom:6px;font-size:.8rem;font-weight:600;letter-spacing:.02em;color:#3b4c5f}
/* Built to sit in the same column as the inputs above: the icon gives it the
   same 40px text inset, and the 38px right pad clears the chevron. 1rem keeps
   iOS from zooming the page when the select takes focus, matching every other
   control. No `background` here — the chevron lives there, via
   `.select-wrapper select`. */
.service-select{position:relative;margin:0}
.service-select .input-icon{top:50%;transform:translateY(-50%)}
.service-select select{width:100%;padding:12px 38px 12px 40px;border:1px solid var(--line);border-radius:8px;font-size:1rem;line-height:1.2;color:var(--ink);font-family:inherit;cursor:pointer}
/* An empty required select is :invalid, which is precisely the "nothing chosen
   yet" state — render it in the muted grey of the other fields' placeholder
   text so the prompt does not read as a real answer. */
.service-select select:invalid{color:#64748b}
/* The invalid rules below only match controls inside .input-wrapper, and this
   select sits in .select-wrapper — without its own rule the error text would
   have no visual counterpart. background-color (not background) keeps the
   chevron image. */
.service-select select[aria-invalid="true"]{border-color:#b3261e;background-color:#fffafa}
.service-select select[aria-invalid="true"]:focus-visible{outline-color:#b3261e}
.input-wrapper input:focus-visible,.input-wrapper select:focus-visible,.input-wrapper textarea:focus-visible{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,78,121,.14)}
.input-wrapper input:focus,.input-wrapper select:focus,.input-wrapper textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,78,121,.14)}
/* Invalid state — driven by aria-invalid from JS so the visual and the
   announced state can never disagree. */
.input-wrapper input[aria-invalid="true"],.input-wrapper select[aria-invalid="true"],.input-wrapper textarea[aria-invalid="true"]{border-color:#b3261e;background:#fffafa}
.input-wrapper input[aria-invalid="true"]:focus-visible,.input-wrapper select[aria-invalid="true"]:focus-visible,.input-wrapper textarea[aria-invalid="true"]:focus-visible{outline-color:#b3261e}
.field-error{color:#b3261e;font-size:.8rem;display:block;margin-top:5px;font-weight:500}
/* The counter only appears while the field is active or near/over the limit,
   so the idle form stays calm. It floats in the textarea's bottom-right corner
   rather than taking a line of its own: as a block it appeared and vanished
   with focus, and that shift moved every field below it by a line — enough to
   pull the consent checkbox out from under the visitor's cursor and swallow
   their first click. */
.message-field{position:relative}
.char-counter{position:absolute;right:12px;bottom:8px;padding:1px 6px;border-radius:5px;background:rgba(255,255,255,.92);text-align:right;font-size:.74rem;color:#5b6b80;display:none;pointer-events:none}
.message-field:focus-within .char-counter,.char-counter.is-near,.char-counter.is-over{display:block}
.char-counter.is-near{color:#8a5a00;font-weight:600}
.char-counter.is-over{color:#b3261e;font-weight:600}
.submit-hint{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.8rem;color:#5b6b80;margin:0 0 10px}
.submit-hint .material-icons{font-size:16px;color:#8a5a00}
.error-message{color:#b3261e;font-size:.8rem}.error-message:empty{display:none}
/* Verification is part of the form, not a card nested inside it — a hairline
   divider replaces the tinted, bordered box. */
.security-section{border-top:1px solid var(--line);padding:16px 0 0;margin:6px 0 16px}
/* flex-wrap so the answer box drops below the question rather than squeezing
   the question into a narrow column on small screens. */
.captcha-container{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
/* min-width:0 lets the label shrink and wrap inside its flex item instead of
   being squeezed or clipped, while the icon stays inline with the first line. */
.captcha-question{font-size:.9rem;color:#334155;display:flex;align-items:flex-start;gap:8px;min-width:0}
.captcha-question .material-icons{margin-top:2px}
.captcha-field input{width:110px;padding:10px;border:1px solid var(--line);border-radius:8px;text-align:center}
.consent-checkbox{display:flex;gap:10px;font-size:.86rem;color:#475569}
.submit-button{width:100%;padding:15px;border:0;border-radius:8px;background:var(--blue);color:#fff;font-weight:600;font-size:.92rem;letter-spacing:.02em;cursor:pointer;transition:.2s}
.submit-button:disabled{opacity:.6;cursor:not-allowed}
.submit-button:not(:disabled):hover{background:var(--blue-deep)}
.rate-limit-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px;text-align:center;grid-column:1/-1}
.rate-limit-card .material-icons{font-size:34px;color:#8a5a00;margin-bottom:6px}
.rate-limit-card button{margin-top:14px;background:none;border:1px solid var(--line);border-radius:8px;padding:9px 16px;font-weight:600;cursor:pointer;color:#3b4c5f;font-family:inherit;font-size:.88rem}
.rate-limit-card button:hover{background:var(--wash)}
#countdownTimer{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.footer{background:#0b1d2e;color:#94a7bb;padding:56px 0 24px;border-top:1px solid rgba(255,255,255,.08)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:32px}
.footer-logo{height:48px;width:auto;background:#fff;border-radius:8px;padding:6px 12px;margin-bottom:14px}
.footer h4{color:#fff;margin-bottom:12px;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.footer a{color:#94a7bb;text-decoration:none;font-size:.9rem;display:block;padding:5px 0;transition:.15s;border-radius:4px}
.footer a:hover{color:#cfe0f5;transform:translateX(3px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;text-align:center;font-size:.84rem}
.footer-bottom a{color:#cfe0f5;text-decoration:underline;text-underline-offset:2px}
.footer-bottom a:hover{color:#fff}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:1200;background:#25d366;color:#fff;border:0;border-radius:8px;padding:13px 18px;font-weight:600;cursor:pointer;box-shadow:0 6px 18px rgba(15,36,56,.25);display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:.2s}
.wa-float:hover{background:#1eb955;transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,36,56,.32)}
.wa-float .material-icons{font-size:20px}
@media(max-width:980px){.navbar{position:sticky}.hero{margin-top:0}.nav-container{flex-wrap:wrap;justify-content:center;padding:8px 16px;gap:8px}.nav-links{flex-wrap:wrap;justify-content:center;gap:2px}.nav-btn{font-size:.82rem;padding:8px 11px}.cta-nav{margin-left:0}.services-grid{grid-template-columns:1fr}.split,.cta-band,.contact-wrapper,.footer-grid{grid-template-columns:1fr}.contact-form-card{order:1}.contact-info-card{order:2}.result-grid{grid-template-columns:1fr}.contact-info-card{position:static}.contact-wrapper{gap:0;border-radius:var(--r);box-shadow:var(--sh)}.contact-form-card{border-radius:var(--r) var(--r) 0 0;box-shadow:none}.contact-info-card{border-radius:0 0 var(--r) var(--r)}.rate-limit-card{border-radius:var(--r) var(--r) 0 0}.cta-band{padding:32px}.cta-band-aside{text-align:left}section{padding:70px 0}section[id]{scroll-margin-top:0}}
@media(max-width:760px){.hero-proof{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:560px){.container{padding:0 16px}.form-row{grid-template-columns:1fr}.logo-svg{height:40px;max-width:210px}.cta-nav{padding:10px 14px;font-size:.82rem}.check-grid{grid-template-columns:1fr}.hero{padding:64px 0 52px}.integration-logos{gap:18px}.item-row{flex-wrap:wrap}.item-row .input-wrapper{width:100%!important;flex:1 1 100%;min-width:0}.remove-btn{width:100%;height:44px}.invoice-document{padding:16px}.wa-float{right:12px;bottom:12px;padding:11px 14px;font-size:.85rem}.input-wrapper input,.input-wrapper select,.input-wrapper textarea,.captcha-field input,.password-card input[type=password],.item-row input{font-size:16px}.captcha-container{flex-direction:column;align-items:stretch;gap:10px}.form-actions{flex-direction:column}.invoice-details{text-align:left}.invoice-header{gap:14px}.total-row{min-width:0;width:100%}}
.invoicing-section{margin-top:var(--nav-h);padding:5rem 0;background:var(--wash)}
.invoicing-section .container{max-width:1100px;margin:0 auto;padding:0 24px}
.password-overlay{display:flex;justify-content:center;align-items:center;min-height:50vh}
.password-card{width:100%;max-width:400px;background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;border:1px solid var(--line)}
.password-card .card-header{background:var(--ink);color:#fff;padding:1.5rem;text-align:center}
.password-card .card-content{padding:1.5rem;display:flex;flex-direction:column;gap:1rem}
.password-card input[type=password]{width:100%;padding:.875rem .875rem .875rem 2.5rem;border:1px solid var(--line);border-radius:8px}
.password-card .submit-btn{background:var(--blue);color:#fff;border:0;padding:.875rem;border-radius:8px;font-weight:600;cursor:pointer}
.invoice-form-container{display:flex;flex-direction:column;gap:24px}
.invoice-form-card,.preview-card{background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;border:1px solid var(--line)}
.invoice-form-card .card-header,.preview-card .card-header{background:var(--ink);color:#fff;padding:1.4rem;text-align:center}
.card-content{padding:1.5rem}
.items-section{background:var(--wash);padding:1.25rem;border-radius:8px;border:1px solid var(--line)}
.item-row{display:flex;gap:12px;margin-bottom:12px}
.item-row input{width:100%;padding:.65rem;border:1px solid var(--line);border-radius:8px;color:var(--ink)}
.form-actions{display:flex;gap:10px}
.primary-btn{flex:1;background:var(--blue);color:#fff;border:0;padding:.875rem;border-radius:8px;font-weight:600;cursor:pointer}
.secondary-btn{flex:1;background:#e9eef5;color:var(--ink);border:0;padding:.875rem;border-radius:8px;font-weight:600;cursor:pointer}
.invoice-document{background:#fff;padding:32px;border:1px solid var(--line);border-radius:8px;overflow-x:auto}
.header-icon{font-size:30px;color:var(--blue);display:block;margin:0 auto 6px}
.invoice-form label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.02em;margin-bottom:6px;color:#3b4c5f}
.remove-btn{width:46px;flex-shrink:0;background:#fdecea;color:#b3261e;border:1px solid #f5c6c2;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.remove-btn .material-icons{font-size:20px}
.remove-btn:disabled{opacity:.35;cursor:not-allowed}
.add-btn{background:var(--accent-soft);color:var(--blue-deep);border:1px dashed #c3d7ea;border-radius:8px;padding:9px 15px;font-weight:600;font-size:.88rem;cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin-top:6px}
.add-btn .material-icons{font-size:18px}
.add-btn:hover{background:#e0ebf6}
.primary-btn,.secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.primary-btn .material-icons,.secondary-btn .material-icons{font-size:19px}
.invoice-header{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.company-logo{height:48px;width:auto;object-fit:contain;margin-bottom:8px}
.banking-details p{font-size:.82rem;color:#475569;line-height:1.5}
.invoice-details h1{font-size:1.7rem;color:var(--ink);margin-bottom:8px}
.invoice-details{text-align:right}
.detail-row{display:flex;gap:8px;justify-content:flex-end;font-size:.86rem}
.customer-info{margin-bottom:20px}
.customer-info h3{font-size:1rem;margin-bottom:4px;color:var(--ink)}
.customer-info p{font-size:.9rem;color:#334155}
/* Customer addresses are typed with line breaks; without pre-line the browser
   collapses them and "12 Ocean RoadDurban" runs together. */
.customer-info p.address,.invoice-document .address{white-space:pre-line}
.invoice-table{width:100%;border-collapse:collapse;margin-bottom:20px}
.invoice-table th,.invoice-table td{padding:9px 10px;border:1px solid var(--line);font-size:.88rem;text-align:left;word-break:break-word}
.invoice-table th{background:var(--wash);color:var(--ink)}
.invoice-table .text-right{text-align:right}
.invoice-total{display:flex;justify-content:flex-end}
.total-row{display:flex;gap:20px;align-items:center;justify-content:space-between;border-top:2px solid var(--ink);padding-top:10px;min-width:220px}
.total-label{font-weight:600;color:var(--ink)}
.total-amount{font-weight:700;color:var(--blue);font-size:1.2rem}

/* INVOICE EXTRAS — currency selector, VAT line, due date, due-date highlight */
.currency-switch{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.currency-switch button{border:0;background:#fff;padding:8px 14px;font-weight:600;font-size:.82rem;cursor:pointer;color:#3b4c5f;font-family:inherit;min-height:36px}
.currency-switch button + button{border-left:1px solid var(--line)}
.currency-switch button[aria-pressed="true"]{background:var(--blue);color:#fff}
.vat-row td{font-weight:600;background:#fbfcfe}
.invoice-total .total-row.overdue{color:#b3261e}
.due-badge{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:4px;background:#fdecea;color:#b3261e;border:1px solid #f5c6c2;margin-left:8px;vertical-align:middle}
.invoice-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.invoice-meta-grid > div{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:#fbfcfe}
.invoice-meta-grid label{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#5b6b80;font-weight:600;margin-bottom:4px}
.invoice-meta-grid .value{font-size:.95rem;color:var(--ink);font-weight:600}
.invoice-meta-grid input,.invoice-meta-grid select{width:100%;border:1px solid var(--line);border-radius:6px;padding:7px 9px;font-size:.95rem;font-family:inherit;color:var(--ink);background:#fff}

/* 404 + legal pages */
.error-page-section{padding:120px 0 96px;text-align:center;background:var(--wash);min-height:60vh;display:flex;align-items:center}
.error-code{font-size:clamp(4rem,14vw,7rem);font-weight:800;color:var(--ink);letter-spacing:-.04em;line-height:1}
.error-page-section h1{font-size:var(--fs-h2);margin:12px 0 10px}
.error-page-section p{color:#5b6b80;max-width:520px;margin:0 auto 26px}
.error-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.error-actions a{padding:14px 26px;border-radius:8px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.error-actions .primary{background:var(--blue);color:#fff}
.error-actions .primary:hover{background:var(--blue-deep)}
.error-actions .secondary{background:#fff;color:var(--ink);border:1px solid var(--line)}
.error-actions .secondary:hover{background:var(--wash)}
.legal{padding-top:calc(var(--nav-h) + 56px);padding-bottom:80px;background:var(--paper)}
.legal h1{font-size:var(--fs-h1);margin-bottom:10px}
.legal .updated{color:#5b6b80;font-size:.9rem;margin-bottom:34px}
.legal h2{font-size:1.3rem;margin:34px 0 10px;padding-top:6px}
.legal p{color:#475569;margin-bottom:14px;max-width:72ch}
.legal ul{color:#475569;margin:0 0 16px 20px;max-width:68ch}
.legal li{margin-bottom:8px}
.legal table{width:100%;border-collapse:collapse;margin:18px 0 22px;max-width:760px}
.legal th,.legal td{border:1px solid var(--line);padding:10px 12px;font-size:.9rem;text-align:left}
.legal th{background:var(--wash);color:var(--ink)}
.legal a{color:var(--blue);text-underline-offset:2px}
.legal .callout{background:var(--accent-soft);border:1px solid #d5e3f2;border-radius:var(--r);padding:18px 20px;margin:20px 0}
.legal .callout p{margin:0}
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:1300;max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 10px 40px rgba(15,36,56,.18);padding:18px 20px;display:none}
/* The floating CTA sits bottom-right too and would cover the banner's
   buttons. Hide it while the banner is up, and bring it back on dismiss. */
body.consent-open .wa-float{display:none}
.cookie-banner.is-open{display:block}
.cookie-banner p{font-size:.88rem;color:#475569;margin-bottom:12px}
.cookie-banner .row{display:flex;gap:8px;flex-wrap:wrap}
.cookie-banner button{border:0;border-radius:8px;padding:10px 18px;font-weight:600;cursor:pointer;font-family:inherit;font-size:.88rem}
.cookie-banner .accept{background:var(--blue);color:#fff}
.cookie-banner .decline{background:var(--wash);color:#3b4c5f}
@media(max-width:980px){.invoicing-section{margin-top:0}}
.notification{position:fixed;top:100px;right:20px;max-width:calc(100vw - 40px);z-index:9999;padding:1rem 1.5rem;border-radius:10px;color:#fff;font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,.2);animation:slideIn .3s ease-out;display:flex;align-items:flex-start;gap:.75rem}
.notification .notification-content{flex:1;align-items:flex-start}
.notification .material-icons{flex-shrink:0}
.notification-close{flex-shrink:0;margin-left:0}
.notification.success{background:#1f7a4d}
.notification.error{background:#b3261e}
.notification-content{display:flex;align-items:center;gap:.75rem}
.notification-close{background:none;border:0;color:#fff;cursor:pointer;padding:.25rem;margin-left:1rem;opacity:.8}
.notification-close:hover{opacity:1}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* SCROLL REVEAL — subtle fade-up on section entry. The hidden state is scoped
   to .js-reveal, which main.js adds to <html> only once it has confirmed
   IntersectionObserver exists. If JS never runs, .reveal stays visible. */
.js-reveal .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js-reveal .reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js-reveal .reveal{opacity:1;transform:none;transition:none}}

/* MOBILE — iOS zoom, nav, tap targets, overflow */
img{max-width:100%;height:auto}
html{-webkit-text-size-adjust:100%}
.input-wrapper input,.input-wrapper select,.input-wrapper textarea,.captcha-field input,.password-card input[type=password],.item-row input,.add-btn,.primary-btn,.secondary-btn,.submit-btn{font-size:16px}
.consent-checkbox input[type=checkbox]{width:20px;height:20px;flex-shrink:0;margin-top:2px}
.footer a,.contact-link,.method-content span,.cta-band,.cta-band .ghost{overflow-wrap:anywhere}
.footer a{padding:10px 0}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(max-width:760px){
  /* MOBILE NAV — the drawer. Previously every .nav-btn was display:none here
     with no hamburger to replace it, so Services/Process/Results/FAQ/Contact
     were completely unreachable on a phone. */
  .nav-toggle{display:inline-flex}
  .nav-container{flex-wrap:wrap;justify-content:space-between;gap:0}
  .nav-links{display:none;width:100%;flex-direction:column;align-items:stretch;gap:2px;padding:8px 0 4px}
  .nav-links.is-open{display:flex}
  .nav-btn{width:100%;display:flex;align-items:center;text-align:left;font-size:.95rem;padding:13px 12px;min-height:44px}
  .cta-nav{margin:6px 0 0;justify-content:center;min-height:46px;width:100%}
  .footer{padding-bottom:88px}
  .cta-buttons{width:100%}
  .cta-buttons a{flex:1 1 100%;justify-content:center;min-height:48px}
  .cta-band{padding:24px 20px}
  .cta-band p{margin-bottom:16px}
  /* CONTACT — form first, condensed "talk to us" card below it, tighter chrome. */
  .contact-section .section-header{margin-bottom:32px}
  .form-header{padding:20px 20px 0}
  .stunning-form{padding:18px 20px 22px}
  .contact-info-card{padding:22px}
  .contact-info-card h3{margin-bottom:12px}
  .contact-method{padding:11px 12px}
  .method-icon{width:36px;height:36px}
}
.wa-float{right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px))}
@media(max-width:560px){
  .wa-float{right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .notification{top:16px;right:12px;left:12px;max-width:none}
}