:root{ --ink:#14181F; --ink-2:#1E242E; /* Brand red. The logo ships pure #FF0000, which vibrates as a large solid field, so the UI red is deepened. --red-ink is the same hue darkened to clear WCAG AA (4.5:1) for small text on the bone/white sections. */ --red:#D8231C; --red-ink:#B81A14; --signal:#FFB000; --bone:#F2EEE9; --steel:#5A6472; --line:#D6DAE0; --display:"Anton",Impact,"Arial Narrow Bold",sans-serif; --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --wrap:1080px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}} body{font-family:var(--body);color:#E8ECF1;background:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} img{max-width:100%;display:block} /* ---------- hazard stripe: borrowed from equipment safety marking ---------- */ .stripe{height:14px;background-color:var(--red); background-image:repeating-linear-gradient(-45deg, var(--red) 0 18px, var(--ink) 18px 36px)} /* ---------- header ---------- */ header{background:var(--ink);position:sticky;top:0;z-index:50} .bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:10px 0} .hdr-left{display:flex;align-items:center;justify-self:start} .hdr-right{display:flex;align-items:center;gap:14px;justify-self:end} /* the button has 10px internal padding; a negative margin here pushed it past the viewport edge and caused horizontal overflow. Keep it inside the wrap. */ .hdr-right .navtoggle{margin-right:0} .bar .mark{justify-self:center} /* three bars -> menu. Needed now that Services and About exist. */ .navtoggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px; width:44px;height:44px;padding:0 10px;background:transparent;border:0;cursor:pointer} .navtoggle span{display:block;height:3px;background:#fff;border-radius:2px; transition:transform .18s ease,opacity .18s ease} .navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)} .navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0} .navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} .navtoggle:focus-visible{outline:3px solid var(--signal);outline-offset:2px} .sitenav{display:none;border-top:1px solid #2A313C;background:var(--ink)} .sitenav.open{display:block} .sitenav a{display:block;padding:15px 24px;color:#fff;text-decoration:none; font-weight:800;font-size:16px;letter-spacing:.3px;border-bottom:1px solid #232A34} .sitenav a:hover,.sitenav a:focus-visible{background:var(--red);color:#fff} .mark{font-family:var(--display);font-size:23px;letter-spacing:1.5px;color:#fff;text-decoration:none;line-height:1} .mark img{height:86px;width:auto;display:block} .mark span{color:var(--red)} .hdr-right{display:flex;align-items:center;gap:14px} .callnum{color:#fff;text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap} .callnum:hover{color:var(--signal)} /* the language switch — the most prominent control on the page, on purpose */ .lang{display:inline-flex;border:2px solid var(--red);border-radius:2px;overflow:hidden;flex:none} .lang button{padding:7px 10px;background:transparent;border:0;cursor:pointer;line-height:0; display:inline-flex;align-items:center;justify-content:center} /* flags beat EN/ES letters for Spanish-speaking visitors scanning the page. Inline SVG, not emoji: country-flag emoji render as the letters "US"/"MX" on Windows, which would look broken for a big share of visitors. */ .lang button svg{display:block;width:26px;height:15px;border-radius:1px; box-shadow:0 0 0 1px rgba(255,255,255,.35)} .lang button[aria-pressed="false"]{opacity:1;filter:saturate(.55) brightness(.92)} .lang button[aria-pressed="false"]:hover{filter:none} .lang button[aria-pressed="false"] svg{box-shadow:0 0 0 1px rgba(255,255,255,.25)} .lang button[aria-pressed="true"]{background:var(--red);color:#fff} .lang button:focus-visible{outline:3px solid var(--signal);outline-offset:-3px} /* ---------- hero ---------- */ .hero{background:var(--ink);color:#fff;padding:52px 0 60px} .hero h1{font-family:var(--display);font-size:clamp(44px,11vw,92px);line-height:.92; letter-spacing:-.5px;text-transform:uppercase;max-width:14ch} .hero h1 em{font-style:normal;color:#F0362C;display:block} .hero p.lede{margin-top:22px;font-size:clamp(17px,2.4vw,21px);color:#D5DAE1;max-width:44ch} .hero .who{margin-top:14px;font-size:15px;color:#8E97A4} .cta-row{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px} .btn{display:inline-block;font-weight:800;font-size:16px;letter-spacing:.4px;text-decoration:none; padding:16px 26px;border-radius:2px;border:2px solid transparent;cursor:pointer;font-family:var(--body)} .btn-primary{background:var(--red);color:#fff} .btn-primary:hover{background:#B01A15} .btn-ghost{border-color:#3B434F;color:#fff} .btn-ghost:hover{border-color:var(--signal);color:var(--signal)} .btn:focus-visible{outline:3px solid var(--signal);outline-offset:3px} /* ---------- price band ---------- */ .price{background:var(--red);color:#fff;padding:20px 0} .price .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 26px} .price .fig{font-family:var(--display);font-size:38px;line-height:1} .price .lbl{font-size:15px;font-weight:700} .price .sep{opacity:.55} /* ---------- generic section ---------- */ .sec{padding:56px 0;background:var(--ink);color:#fff} .sec--alt{background:#1E242E} .eyebrow{font-size:12px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:var(--red-ink)} .sec .intro,.form-sec .intro{margin-top:14px;font-size:17px;color:#D5DAE1;max-width:56ch} /* what you get */ .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2px;margin-top:30px; background:var(--line)} .cell{background:var(--bone);padding:22px 20px} .sec--alt .cell{background:#232A35} .cell h3{font-size:16px;font-weight:800;letter-spacing:.2px} .cell p{margin-top:6px;font-size:14.5px;color:#4A5361} /* how it works — a real 4-step sequence, so the numbers carry information */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px;margin-top:32px} .step .n{font-family:var(--display);font-size:46px;line-height:.8;color:var(--red)} .step h3{margin-top:10px;font-size:16px;font-weight:800} .step p{margin-top:6px;font-size:14.5px;color:#4A5361} /* about */ /* form */ .form-sec{background:var(--ink);color:#fff;padding:56px 0 64px} .form-sec h2{color:#fff} .form-sec .intro{color:#B9C1CB} form.demo{margin-top:28px;max-width:620px} .field{margin-top:16px} .field label{display:block;font-size:13px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:#9AA3AF} .field input,.field textarea{width:100%;margin-top:7px;padding:14px 14px;font-family:var(--body);font-size:16px; color:#fff;background:#232A35;border:2px solid #333C49;border-radius:2px} .field input:focus,.field textarea:focus{outline:0;border-color:var(--red)} .field textarea{min-height:96px;resize:vertical} .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .note{margin-top:14px;font-size:14px;color:#8E97A4} .flash{margin-top:22px;padding:18px 20px;border-left:5px solid var(--signal);background:#232A35;font-size:16px} .flash strong{display:block;font-size:19px;margin-bottom:5px;color:var(--signal)} .err{border-left-color:#E5533D;color:#FFD9D2} /* footer */ footer{background:#0E1117;color:#8E97A4;padding:30px 0 86px;font-size:14px} footer .wrap{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between} footer a{color:#C8CDD6;text-decoration:none;font-weight:700} footer a:hover{color:#FF5A4F} /* Astra and Fluent Forms both ship placeholder greys that fail AA. */ ::placeholder{color:#5A6472;opacity:1} .fluentform .ff-el-form-control::placeholder{color:#8A94A3;opacity:1} footer a:hover{color:var(--red)} footer .mark img{height:44px;opacity:.92} /* sticky mobile call bar */ /* The two-button call bar stays pinned at the bottom on every screen size - it is the site's primary conversion path, and hiding it on desktop meant most visitors never saw it. */ .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60} .callbar a{flex:1;text-align:center;padding:16px 8px;font-weight:800;font-size:16px; text-decoration:none} .callbar .c1{background:var(--red);color:#fff} .callbar .c2{background:var(--signal);color:var(--ink)} .callbar a:hover{filter:brightness(1.08)} @media(max-width:640px){ .row2{grid-template-columns:1fr} .hdr-right .callnum{display:none} .bar{grid-template-columns:1fr auto 1fr} .mark img{height:60px} .hero{padding:40px 0 46px} .sec{padding:44px 0} body{padding-bottom:62px} } /* bilingual: show one language at a time */ /* ---------- soccer ball ---------- Sits on the footer and only moves when you actually hit it. It is the one element on the page with pointer-events enabled on purpose, so it needs to stay clear of the footer links - hence the small size and the low z-index. */ .santi-ball{position:absolute;left:0;bottom:100%;width:34px;height:34px;z-index:1; cursor:pointer;touch-action:manipulation;will-change:transform; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))} @media (prefers-reduced-motion:reduce){.santi-ball{display:none}} .santi-ball img{width:100%;height:100%;display:block;border-radius:50%;pointer-events:none} @media (prefers-reduced-motion:reduce){.santi-ball{display:none}} /* ---------- dark theme (2026-08-12) ---------- Light sections were hard to read, so the whole site is now dark with white type. Every pairing below was checked: #fff on #14181F is 16.1:1, the body grey #D5DAE1 is 12.66:1, and the red was brightened to #F0362C (4.6:1) because plain #D8231C only reaches 3.54:1 on this background. */ .sec h2, .sec h3, .cell h3, .step h3, .svc-card h3 { color:#fff !important; } .sec p, .cell p, .step p, .svc-card p { color:#C7CEDA !important; } .grid, .svc-grid { background:#2A313C; } .cell { background:var(--ink); } .svc-card { background:#1E242E; } .sec--alt .svc-card { background:#232A35; } .svc-icon { color:#F0362C; } .eyebrow { color:#F0362C !important; } .step .n, .steps .n { color:#F0362C !important; } hr, .wrap hr { border-color:#2A313C; } .about-cap { color:#F0362C !important; } .svc-card h3 { color:#fff !important; } /* ---------- sticky header ---------- Two things were stopping it: Astra out-specifies a bare `header` selector so position:sticky never applied, and `overflow-x:hidden` on body silently kills sticky positioning entirely. `overflow-x:clip` gives the same horizontal-overflow protection WITHOUT creating a scroll container. */ html,body{background:var(--ink)!important} body { overflow-x: clip !important; } body header, .entry-content header { position: sticky !important; top: 0; z-index: 999; } /* Astra gives every button its blue global background; the menu toggle must stay transparent with plain white bars. */ .navtoggle, .navtoggle:hover, .navtoggle:focus, .navtoggle:active, body .navtoggle, .entry-content .navtoggle { background:transparent !important; background-color:transparent !important; border:0 !important; box-shadow:none !important; color:#fff !important; } .navtoggle span { background:#fff !important; } .navtoggle:hover span { background:#F0362C !important; } .cell .svc-icon,.svc-card .svc-icon{display:block;margin:0 auto 10px} .cell .svc-icon svg,.svc-card .svc-icon svg{width:34px;height:34px;display:block;margin:0 auto} .cell .svc-icon{color:#F0362C} .sec-icon{display:block;color:#F0362C;margin:0 auto 12px} .sec-icon svg{width:32px;height:32px;display:block;margin:0 auto} [data-es]{display:none} html[lang="es"] [data-en]{display:none} html[lang="es"] [data-es]{display:revert} /* ---------- centred layout (2026-08-11) ---------- Everything is centred except the form's own labels and inputs, which stay left-aligned: centred field labels above left-aligned text boxes read as broken, and centred input text is genuinely harder to fill in. The form BLOCK is centred on the page; its contents are not. */ .hero, .sec, .form-sec, .price{text-align:center} .hero h1, .hero p.lede, .sec .intro, .form-sec .intro{ margin-left:auto; margin-right:auto} .sec .cell{text-align:center} .hero .eyebrow, .sec .eyebrow, .form-sec .eyebrow{text-align:center} .hero .cta-row, .price .wrap{justify-content:center} form.demo{margin-left:auto; margin-right:auto; text-align:left} form.demo .cta-row{justify-content:center} .form-sec .note{text-align:center} .grid--addons .cell p{max-width:34ch; margin-left:auto; margin-right:auto} footer .wrap{justify-content:center; text-align:center} /* "How it works" has 4 steps; auto-fit dropped 04 onto a row alone. */ @media(min-width:900px){ .steps{grid-template-columns:repeat(4,1fr)!important} } @media(min-width:641px) and (max-width:899px){ .steps{grid-template-columns:repeat(2,1fr)!important} } @media(max-width:640px){ .hero h1{max-width:none} } .lang a{padding:7px 10px;background:transparent;border:0;cursor:pointer; line-height:0;display:inline-flex;align-items:center;justify-content:center; text-decoration:none} .lang a svg{display:block;width:26px;height:15px;border-radius:1px; box-shadow:0 0 0 1px rgba(255,255,255,.35)} .lang a:not([aria-current]){opacity:1;filter:saturate(.55) brightness(.92)} .lang a:not([aria-current]):hover{filter:none} .lang a:not([aria-current]) svg{box-shadow:0 0 0 1px rgba(255,255,255,.25)} .lang a[aria-current]{background:var(--red);color:#fff} .lang a:focus-visible{outline:3px solid var(--signal);outline-offset:-3px} /* ---------- video tiles ---------- Added 2026-09-23. WordPress writes an INLINE aspect-ratio on the