:root { --color-background:#121318; --color-background-dark:#0b0c0f; --color-surface:#1b1d23; --color-surface-raised:#22252c; --color-primary:#ff8a00; --color-primary-light:#ffa733; --color-text:#f2f0eb; --color-muted:#a1a6af; --color-border:#30333b; --color-success:#58a878; --container-width:1180px; --heading:"Barlow Condensed","Arial Narrow",sans-serif; --body:"Barlow",Arial,sans-serif; --angle:14px; --header-height:76px; }
.contact-placeholder { width:max-content; max-width:100%; color:var(--color-primary-light); font:700 clamp(1.55rem,2.7vw,2.1rem) var(--heading); letter-spacing:.03em; word-break:break-word; }
.footer-contact-placeholder { display:block; width:max-content; max-width:100%; margin:7px 0; color:var(--color-muted); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { min-width:320px; margin:0; overflow-x:clip; color:var(--color-text); background:radial-gradient(ellipse 800px 520px at 95% -5%,rgb(255 138 0 / .10),transparent 62%),repeating-linear-gradient(135deg,rgb(255 255 255 / .014) 0 1px,transparent 1px 28px),var(--color-background); font-family:var(--body); line-height:1.6; } body.menu-open { overflow:hidden; } img { display:block; max-width:100%; } a { color:inherit; } button,input,select,textarea { font:inherit; } button { cursor:pointer; } :focus-visible { outline:3px solid var(--color-primary-light); outline-offset:4px; } .container { width:min(calc(100% - 40px),var(--container-width)); margin-inline:auto; } .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .skip-link { position:fixed; top:12px; left:12px; z-index:100; padding:12px 16px; transform:translateY(-160%); background:var(--color-primary); color:var(--color-background-dark); font-weight:700; } .skip-link:focus { transform:translateY(0); }
.site-header { position:sticky; top:0; z-index:30; background:rgb(11 12 15 / .86); border-bottom:1px solid transparent; backdrop-filter:blur(14px); transition:background .2s,border-color .2s,box-shadow .2s; } .site-header.is-scrolled { background:rgb(11 12 15 / .97); border-color:var(--color-border); box-shadow:0 10px 28px rgb(0 0 0 / .18); } .header-inner { min-height:var(--header-height); display:flex; align-items:center; justify-content:space-between; gap:24px; } .brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; min-width:0; } .brand-mark { display:inline-block; padding:3px 10px; transform:skewX(-12deg); background:var(--color-primary); color:var(--color-background-dark); font:800 1rem var(--heading); letter-spacing:.06em; white-space:nowrap; } .brand-name { font:700 clamp(1rem,1.5vw,1.2rem) var(--heading); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; } .main-nav { display:flex; align-items:center; gap:clamp(10px,1.7vw,24px); } .main-nav > a:not(.button) { position:relative; padding:12px 0; color:var(--color-muted); font:700 1rem var(--heading); letter-spacing:.07em; text-decoration:none; text-transform:uppercase; } .main-nav > a:not(.button)::after { position:absolute; right:0; bottom:6px; left:0; height:2px; content:""; transform:scaleX(0); transform-origin:left; background:var(--color-primary); transition:transform .2s; } .main-nav > a:hover,.main-nav > a[aria-current="true"] { color:var(--color-text); } .main-nav > a:hover::after,.main-nav > a[aria-current="true"]::after { transform:scaleX(1); } .menu-toggle { display:none; width:46px; height:46px; padding:10px; border:1px solid var(--color-border); background:var(--color-surface); } .menu-toggle span:not(.visually-hidden) { display:block; height:2px; margin:5px 0; background:var(--color-text); transition:transform .2s,opacity .2s; }
.button { display:inline-block; border:2px solid transparent; padding:12px 24px; transform:skewX(-10deg); font:700 1.08rem var(--heading); letter-spacing:.08em; text-align:center; text-decoration:none; text-transform:uppercase; transition:transform .2s,background .2s,border-color .2s,color .2s; } .button > span { display:inline-block; transform:skewX(10deg); } .button:hover { transform:skewX(-10deg) translateY(-2px); } .button-primary { background:var(--color-primary); border-color:var(--color-primary); color:var(--color-background-dark); } .button-primary:hover { background:var(--color-primary-light); border-color:var(--color-primary-light); } .button-secondary { border-color:#52565f; color:var(--color-text); } .button-secondary:hover { border-color:var(--color-primary); color:var(--color-primary); } .nav-cta { padding:9px 16px; }
.section-anchor { scroll-margin-top:calc(var(--header-height) + 16px); } .hero { padding:clamp(64px,9vw,132px) 0 clamp(54px,7vw,96px); } .hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(400px,.88fr); align-items:center; gap:clamp(40px,7vw,96px); } .eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 18px; color:var(--color-primary); font:700 1rem var(--heading); letter-spacing:.17em; text-transform:uppercase; } .eyebrow span { width:42px; height:9px; background:repeating-linear-gradient(-45deg,var(--color-primary) 0 7px,transparent 7px 14px); } h1,h2,h3 { margin:0; font-family:var(--heading); line-height:.98; text-transform:uppercase; } h1 { max-width:760px; font-size:clamp(3.15rem,6.6vw,6rem); letter-spacing:.005em; } h1 em { color:var(--color-primary); font-style:normal; } .lead { max-width:610px; margin:26px 0 30px; color:var(--color-muted); font-size:clamp(1.05rem,1.8vw,1.22rem); } .button-row { display:flex; flex-wrap:wrap; gap:14px; } .phone-action { display:inline-block; margin-top:22px; color:var(--color-muted); font-weight:600; text-decoration-color:var(--color-primary); text-underline-offset:5px; } .phone-action:hover { color:var(--color-primary); } .trust-points { display:flex; flex-wrap:wrap; gap:10px 20px; padding:0; margin:32px 0 0; list-style:none; color:var(--color-muted); font-size:.9rem; } .trust-points li::before { content:"✓"; margin-right:8px; color:var(--color-primary); font-weight:700; } .hero-media { position:relative; min-width:0; } .media-frame { position:relative; overflow:hidden; border:1px solid #3d4047; clip-path:polygon(0 0,100% 0,100% calc(100% - 36px),calc(100% - 36px) 100%,0 100%); background:var(--color-background-dark); } .hero-frame::after { position:absolute; z-index:-1; top:20px; right:-20px; bottom:-20px; left:20px; border:2px solid var(--color-primary); content:""; clip-path:polygon(0 0,100% 0,100% calc(100% - 36px),calc(100% - 36px) 100%,0 100%); } .media-frame img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; } .media-stripe { position:absolute; top:0; left:0; width:42%; height:9px; background:repeating-linear-gradient(-45deg,var(--color-primary) 0 7px,transparent 7px 14px); } .hero-info { position:absolute; right:-20px; bottom:18px; width:min(260px,70%); padding:18px 20px; border-left:3px solid var(--color-primary); background:var(--color-surface-raised); box-shadow:0 12px 24px rgb(0 0 0 / .2); } .hero-info span,.hero-info small { display:block; color:var(--color-muted); font-size:.88rem; } .hero-info strong { display:block; margin:2px 0; font:700 1.2rem var(--heading); letter-spacing:.06em; text-transform:uppercase; }
.trust-strip { margin:12px 0 clamp(64px,9vw,120px); transform:skewY(-1deg); background:var(--color-primary); color:var(--color-background-dark); } .trust-strip-inner { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:27px 0; transform:skewY(1deg); } .trust-strip p { margin:0; font:700 clamp(1rem,1.7vw,1.18rem) var(--heading); letter-spacing:.07em; text-transform:uppercase; } .trust-strip p + p { padding-left:24px; border-left:2px solid rgb(11 12 15 / .25); }
.section { padding:clamp(66px,9vw,118px) 0; } .section-heading { max-width:690px; margin-bottom:clamp(36px,5vw,62px); } .section-heading h2,.strengths-panel h2,.company-copy h2,.contact-copy h2,.quote-form h2 { font-size:clamp(2.35rem,4.5vw,4rem); letter-spacing:.01em; } .section-heading > p:last-child { max-width:600px; margin:18px 0 0; color:var(--color-muted); } .services-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:16px; } .service-card { display:flex; min-width:0; gap:18px; padding:28px; border:1px solid var(--color-border); border-top:3px solid transparent; background:var(--color-surface); clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%); transition:transform .2s,border-color .2s,background .2s; } .service-card:hover { transform:translateY(-5px); border-top-color:var(--color-primary); background:var(--color-surface-raised); } .service-card-featured { grid-row:span 2; min-height:340px; align-items:flex-end; background:linear-gradient(135deg,rgb(255 138 0 / .08),transparent 60%),var(--color-surface); } .card-number { flex:0 0 auto; color:var(--color-primary); font:800 1.3rem var(--heading); letter-spacing:.08em; } .card-kicker,.card-fit { color:var(--color-muted); font-size:.9rem; } .service-card h3 { margin-bottom:12px; font-size:clamp(1.65rem,2.4vw,2.2rem); } .service-card p { margin:0 0 14px; color:var(--color-muted); } .card-fit { border-left:2px solid var(--color-primary); padding-left:10px; } .text-link { font:700 1rem var(--heading); letter-spacing:.08em; color:var(--color-text); text-decoration:none; text-transform:uppercase; } .text-link span { color:var(--color-primary); transition:transform .2s; } .text-link:hover { color:var(--color-primary); } .text-link:hover span { display:inline-block; transform:translateX(4px); } .section-cta { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:38px; padding-top:28px; border-top:1px solid var(--color-border); } .section-cta p { margin:0; font:700 1.35rem var(--heading); letter-spacing:.05em; text-transform:uppercase; }
.process-section { background:linear-gradient(90deg,rgb(255 255 255 / .02),transparent 40%),var(--color-background-dark); } .process-list { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; padding:0; margin:0; list-style:none; counter-reset:steps; } .process-list li { position:relative; min-width:0; padding-right:12px; } .process-list li:not(:last-child)::after { position:absolute; top:21px; right:-14px; width:24px; height:1px; background:var(--color-border); content:""; } .process-list span { display:inline-grid; width:45px; height:45px; place-items:center; margin-bottom:19px; transform:skewX(-8deg); background:var(--color-primary); color:var(--color-background-dark); font:800 1.15rem var(--heading); } .process-list h3 { margin-bottom:8px; font-size:1.65rem; } .process-list p { margin:0; color:var(--color-muted); } .strengths-panel { display:grid; grid-template-columns:.8fr 1.2fr; gap:50px; margin-top:clamp(54px,8vw,96px); padding:clamp(28px,5vw,52px); border:1px solid var(--color-border); border-left:4px solid var(--color-primary); background:var(--color-surface); } .strengths-list { display:grid; grid-template-columns:1fr 1fr; gap:22px 36px; padding:0; margin:0; list-style:none; } .strengths-list li { position:relative; padding-left:25px; } .strengths-list li::before { position:absolute; top:3px; left:0; color:var(--color-primary); content:"✓"; } .strengths-list strong,.strengths-list span { display:block; } .strengths-list strong { font:700 1.25rem var(--heading); letter-spacing:.05em; text-transform:uppercase; } .strengths-list span { color:var(--color-muted); font-size:.93rem; }
.reference-grid { display:grid; grid-template-columns:1.2fr .8fr; grid-template-rows:repeat(2,minmax(220px,1fr)); gap:18px; } .reference-card { position:relative; min-height:240px; overflow:hidden; background:var(--color-surface); } .reference-large { grid-row:span 2; } .reference-card::after { position:absolute; inset:0; background:linear-gradient(0deg,rgb(11 12 15 / .95),rgb(11 12 15 / .02) 70%); content:""; } .reference-card img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; } .reference-card:hover img { transform:scale(1.045); } .reference-overlay { position:absolute; z-index:1; right:0; bottom:0; left:0; padding:clamp(22px,4vw,34px); } .reference-overlay p,.reference-overlay span { margin:0; color:#c7cad0; font-size:.9rem; } .reference-overlay h3 { margin:4px 0 7px; font-size:clamp(1.65rem,2.6vw,2.35rem); } .reference-overlay .text-link { display:inline-block; margin-top:17px; } .reference-note { max-width:640px; margin:20px 0 0; color:var(--color-muted); }
.company-section { background:var(--color-surface); } .company-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(42px,7vw,92px); } .company-media img { aspect-ratio:4/3; object-fit:cover; } .company-copy > p:not(.eyebrow) { color:var(--color-muted); } .company-copy dl { display:grid; gap:15px; margin:28px 0; } .company-copy dl div { display:grid; grid-template-columns:minmax(125px,.65fr) 1fr; gap:14px; padding-bottom:14px; border-bottom:1px solid var(--color-border); } .company-copy dt { font:700 1rem var(--heading); letter-spacing:.08em; text-transform:uppercase; } .company-copy dd { margin:0; color:var(--color-muted); } .area-tags { display:flex; flex-wrap:wrap; gap:9px; } .area-tags span { padding:4px 10px; border:1px solid var(--color-border); color:var(--color-muted); font-size:.88rem; } .faq-wrap { margin-top:clamp(65px,9vw,120px); } .faq-list { border-top:1px solid var(--color-border); } .faq-item { border-bottom:1px solid var(--color-border); } .faq-item h3 { margin:0; } .faq-item button { position:relative; width:100%; min-height:58px; padding:18px 54px 18px 0; border:0; background:transparent; color:var(--color-text); cursor:pointer; font:700 clamp(1.25rem,2.5vw,1.6rem) var(--heading); letter-spacing:.04em; text-align:left; text-transform:uppercase; } .faq-item button::after { position:absolute; top:50%; right:8px; width:22px; height:2px; background:var(--color-primary); content:""; transform:translateY(-50%); } .faq-item button::before { position:absolute; top:50%; right:18px; width:2px; height:22px; background:var(--color-primary); content:""; transform:translateY(-50%); transition:transform .2s; } .faq-item button[aria-expanded="true"]::before { transform:translateY(-50%) rotate(90deg); } .faq-answer { max-width:760px; padding:0 0 22px; color:var(--color-muted); } .js .faq-answer[hidden] { display:none; } .faq-answer p { margin:0; }
.contact-section { background:linear-gradient(140deg,rgb(255 138 0 / .08),transparent 40%),var(--color-background-dark); } .contact-grid { display:grid; grid-template-columns:.76fr 1.24fr; gap:clamp(42px,8vw,108px); align-items:start; } .contact-copy > p:not(.eyebrow) { color:var(--color-muted); } address { display:grid; gap:8px; margin-top:32px; font-style:normal; } address a { width:max-content; max-width:100%; color:var(--color-primary-light); font:700 clamp(1.55rem,2.7vw,2.1rem) var(--heading); letter-spacing:.03em; word-break:break-word; } address p { margin:13px 0 0; color:var(--color-muted); } .quote-form { padding:clamp(24px,4vw,42px); border:1px solid var(--color-border); border-top:4px solid var(--color-primary); background:var(--color-surface); } .quote-form h2 { font-size:clamp(2rem,3.5vw,2.8rem); } .form-intro { margin:12px 0 27px; color:var(--color-muted); } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .field { min-width:0; } .field-wide { grid-column:1 / -1; } label { display:block; margin-bottom:6px; font-weight:600; } label small { color:var(--color-muted); font-weight:400; } input,select,textarea { width:100%; padding:11px 12px; border:1px solid #4a4e57; border-radius:0; background:#15171c; color:var(--color-text); } input:focus,select:focus,textarea:focus { border-color:var(--color-primary); outline:2px solid rgb(255 138 0 / .25); outline-offset:1px; } textarea { resize:vertical; } .error { min-height:1.25em; margin:4px 0 0; color:#ffb3a7; font-size:.87rem; } input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"] { border-color:#ffb3a7; } .checkbox-field { display:flex; gap:10px; align-items:flex-start; margin-top:18px; } .checkbox-field input { width:20px; height:20px; margin-top:2px; accent-color:var(--color-primary); } .checkbox-field label { margin:0; } .checkbox-field a { color:var(--color-primary-light); } .quote-form .button { margin-top:12px; } .honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.site-footer { position:relative; padding:65px 0 26px; background:#08090b; border-top:1px solid var(--color-border); } .footer-stripe { position:absolute; top:0; right:0; left:0; height:6px; background:repeating-linear-gradient(-45deg,var(--color-primary) 0 7px,transparent 7px 14px); } .footer-grid { display:grid; grid-template-columns:1.45fr repeat(3,1fr); gap:32px; } .footer-grid p { color:var(--color-muted); } .footer-grid .brand + p { max-width:280px; margin-top:16px; } .footer-grid h2 { margin-bottom:14px; font-size:1.3rem; } .footer-grid a:not(.brand) { display:block; width:max-content; max-width:100%; margin:7px 0; color:var(--color-muted); text-decoration:none; } .footer-grid a:hover,.footer-bottom a:hover { color:var(--color-primary); } .footer-bottom { display:flex; justify-content:space-between; gap:18px; margin-top:44px; padding-top:20px; border-top:1px solid var(--color-border); color:var(--color-muted); font-size:.88rem; } .footer-bottom p { margin:0; } .footer-bottom div { display:flex; flex-wrap:wrap; gap:12px 20px; } .footer-bottom a { color:inherit; } .footer-bottom span { color:#70757e; } .mobile-action-bar { display:none; }
.thank-you { display:grid; min-height:100svh; place-items:center; padding:36px 0; } .thank-you > .container { display:grid; gap:clamp(30px,6vw,72px); } .thank-you-card { max-width:760px; padding:clamp(32px,7vw,72px); border:1px solid var(--color-border); border-left:4px solid var(--color-primary); background:linear-gradient(135deg,rgb(255 138 0 / .08),transparent 55%),var(--color-surface); } .thank-you-card h1 { font-size:clamp(3rem,7vw,5.4rem); } .thank-you-card > p:not(.eyebrow) { max-width:560px; margin:24px 0 30px; color:var(--color-muted); font-size:1.1rem; }
.js .reveal { opacity:0; transform:translateY(14px); transition:opacity .55s ease,transform .55s ease; } .js .reveal.is-visible { opacity:1; transform:none; }
@media (max-width:1050px) { .main-nav { gap:14px; } .main-nav > a:not(.button) { font-size:.92rem; } .services-grid { grid-template-columns:1fr 1fr; } .service-card-featured { grid-row:auto; grid-column:span 2; min-height:0; } .footer-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:800px) { :root { --header-height:68px; } .header-inner { min-height:var(--header-height); } .menu-toggle { display:block; position:relative; z-index:2; } .menu-toggle[aria-expanded="true"] span:nth-child(2) { transform:translateY(7px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-child(3) { opacity:0; } .menu-toggle[aria-expanded="true"] span:nth-child(4) { transform:translateY(-7px) rotate(-45deg); } .main-nav { position:fixed; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:86px 20px 28px; background:rgb(11 12 15 / .98); visibility:hidden; opacity:0; transform:translateY(-10px); transition:opacity .2s,transform .2s,visibility .2s; } .main-nav.is-open { visibility:visible; opacity:1; transform:none; } .main-nav > a:not(.button) { padding:10px 0; font-size:1.55rem; } .nav-cta { margin-top:12px; padding:12px 26px; } .hero-grid,.company-grid,.contact-grid,.strengths-panel { grid-template-columns:1fr; } .hero { padding-top:55px; } .hero-media { max-width:620px; } .hero-info { right:-8px; } .trust-strip-inner { grid-template-columns:1fr 1fr; } .trust-strip p + p { border-left:0; padding-left:0; } .trust-strip p:nth-child(even) { border-left:2px solid rgb(11 12 15 / .25); padding-left:18px; } .process-list { grid-template-columns:1fr 1fr; row-gap:35px; } .process-list li:nth-child(2)::after { display:none; } .reference-grid { grid-template-columns:1fr 1fr; grid-template-rows:260px 230px; } .reference-large { grid-column:span 2; grid-row:auto; } .strengths-list { grid-template-columns:1fr 1fr; } }
@media (max-width:580px) { body { padding-bottom:68px; } .container { width:min(calc(100% - 32px),var(--container-width)); } .brand-name { max-width:190px; overflow:hidden; text-overflow:ellipsis; } .hero h1 { font-size:clamp(2.85rem,15vw,4.3rem); } .button-row { display:grid; grid-template-columns:1fr; } .button { width:100%; min-height:48px; padding:12px 15px; } .hero-info { position:relative; right:auto; bottom:auto; width:calc(100% - 18px); margin:16px 0 0 auto; } .hero-frame::after { top:12px; right:-12px; bottom:-12px; left:12px; } .trust-strip { margin-bottom:58px; } .trust-strip-inner { gap:14px; padding:20px 0; } .trust-strip p { font-size:.95rem; } .services-grid,.form-grid { grid-template-columns:1fr; } .service-card-featured { grid-column:auto; } .section-cta { align-items:flex-start; flex-direction:column; } .section-cta .button { width:auto; } .process-list { grid-template-columns:1fr; gap:25px; } .process-list li:not(:last-child)::after { top:55px; left:21px; width:1px; height:23px; } .strengths-list { grid-template-columns:1fr; } .reference-grid { grid-template-columns:1fr; grid-template-rows:auto; } .reference-card,.reference-large { grid-column:auto; min-height:260px; } .company-copy dl div { grid-template-columns:1fr; gap:3px; } .footer-grid { grid-template-columns:1fr; } .footer-bottom { flex-direction:column; margin-top:30px; } .mobile-action-bar { position:fixed; z-index:25; right:0; bottom:0; left:0; display:grid; grid-template-columns:1fr 1.25fr; padding:8px max(12px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); gap:8px; border-top:1px solid var(--color-border); background:rgb(11 12 15 / .96); backdrop-filter:blur(12px); } .mobile-action-bar a { display:grid; min-height:46px; place-items:center; border:1px solid #565b64; color:var(--color-text); font:700 1rem var(--heading); letter-spacing:.06em; text-align:center; text-decoration:none; text-transform:uppercase; } .mobile-action-bar a:last-child { border-color:var(--color-primary); background:var(--color-primary); color:var(--color-background-dark); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } .js .reveal { opacity:1; transform:none; } }