/* ========================================================================== Design tokens — industrial, high-contrast: charcoal ground, safety-orange and hazard-yellow accents. One committed theme, no light/dark switch. ========================================================================== */ :root { color-scheme: dark; --color-bg: #161310; --color-bg-alt: #1c1712; --color-surface: #241d16; --color-border: #3a3226; --color-text: #f4ede1; --color-text-muted: #b3a790; --color-accent: #ff8c1a; --color-accent-dim: #c96e12; --color-accent-2: #ffd23f; --color-ink: #14110d; --font-display: ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-body: var(--font-display); --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, Consolas, monospace; --rule: 1px solid var(--color-border); --page-width: 72rem; --gutter: 1.5rem; --radius: 14px; --hazard-stripe: repeating-linear-gradient( 135deg, var(--color-ink) 0 16px, var(--color-accent-2) 16px 32px ); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; padding: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* Subtle grain over everything, fixed so it never taxes scrolling. */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: 0.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } a { color: var(--color-accent); } h1, h2, h3, p, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; top: 0; left: var(--gutter); translate: 0 -200%; padding: 0.5rem 0.75rem; border: var(--rule); background: var(--color-bg); font-size: 0.875rem; font-weight: 600; text-decoration: none; z-index: 20; } .skip-link:focus-visible { translate: 0 0; } .sprite { position: absolute; width: 0; height: 0; } .icon { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .hazard-bar { height: 10px; background: var(--hazard-stripe); } .section-heading { font-family: var(--font-display); font-size: clamp(1.6rem, 3.2vw, 2.1rem); font-weight: 900; letter-spacing: -0.01em; text-transform: uppercase; } /* ========================================================================== Scroll reveal ========================================================================== */ /* Hidden pre-scroll only once we know JS is running (class set synchronously in ); without JS, or before it runs, content stays fully visible. */ .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease var(--delay, 0s), transform 0.7s ease var(--delay, 0s); } .js .reveal.is-visible { opacity: 1; transform: none; } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.4rem; border-radius: 999px; border: 2px solid transparent; font-family: var(--font-mono); font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .btn--primary { background: var(--color-accent); color: var(--color-ink); } .btn--primary:hover { background: var(--color-accent-2); transform: translateY(-2px); } .btn--secondary { border-color: var(--color-accent); color: var(--color-text); background: transparent; } .btn--secondary:hover { border-color: var(--color-accent-2); color: var(--color-accent-2); transform: translateY(-2px); } .btn--header { padding: 0.55rem 1.1rem; font-size: 0.875rem; background: var(--color-accent); color: var(--color-ink); } .btn--header:hover { background: var(--color-accent-2); } /* ========================================================================== Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 10; background: rgba(22, 19, 16, 0.9); backdrop-filter: blur(8px); border-bottom: var(--rule); } .site-header__inner { max-width: var(--page-width); margin-inline: auto; padding: 0.9rem var(--gutter); display: flex; align-items: center; gap: 1.5rem; } .brand { display: flex; align-items: center; gap: 0.75rem; color: inherit; text-decoration: none; } .brand__mark { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 8px; background: var(--color-accent); color: var(--color-ink); font-family: var(--font-display); font-weight: 900; font-size: 0.9375rem; } .brand__name { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 800; font-size: 1rem; line-height: 1.15; letter-spacing: -0.01em; } .brand__name-sub { font-weight: 500; font-size: 0.75rem; color: var(--color-text-muted); letter-spacing: 0.06em; text-transform: uppercase; } .site-nav { display: flex; gap: 1.5rem; margin-left: auto; font-size: 0.9375rem; } .site-nav a { color: var(--color-text-muted); text-decoration: none; } .site-nav a:hover { color: var(--color-text); } @media (max-width: 42rem) { .site-nav { display: none; } } /* ========================================================================== Hero ========================================================================== */ .hero { max-width: var(--page-width); margin-inline: auto; padding: clamp(2.5rem, 8vh, 5rem) var(--gutter) 3rem; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 2rem; } .hero__eyebrow { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); } .hero__title { margin-top: 0.9rem; font-family: var(--font-display); font-size: clamp(2.25rem, 5.5vw, 3.5rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; } .hero__subtitle { max-width: 30rem; margin-top: 1rem; font-size: 1.1875rem; color: var(--color-text-muted); text-wrap: pretty; } .hero__rate { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-top: 1.75rem; padding: 1rem 1.5rem; background: var(--color-surface); border: 2px solid var(--color-accent); border-radius: var(--radius); rotate: -1.2deg; } .hero__rate-amount { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-accent-2); } .hero__rate-unit { font-family: var(--font-mono); font-size: 1rem; color: var(--color-text-muted); } .hero__rate-note { flex-basis: 100%; font-size: 0.875rem; color: var(--color-text-muted); } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 2rem; } .hero__visual { position: relative; display: grid; place-items: center; padding: 2rem; } .hero__visual::before { content: ''; position: absolute; inset: 8% 4%; background: var(--hazard-stripe); border-radius: var(--radius); opacity: 0.16; z-index: 0; } .hero__visual img { position: relative; z-index: 1; width: 100%; max-width: 26rem; height: auto; } @media (max-width: 56rem) { .hero { grid-template-columns: 1fr; } .hero__visual { order: -1; padding: 0.5rem; } .hero__visual img { max-width: 20rem; } } /* ========================================================================== Trust strip ========================================================================== */ .trust-strip { border-top: var(--rule); border-bottom: var(--rule); background: var(--color-bg-alt); } .trust-strip ul { max-width: var(--page-width); margin-inline: auto; padding: 1.25rem var(--gutter); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: center; } .trust-strip li { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.875rem; color: var(--color-text-muted); } .trust-strip .icon { color: var(--color-accent); } /* ========================================================================== Services ========================================================================== */ .services { max-width: var(--page-width); margin-inline: auto; padding: clamp(3.5rem, 8vh, 6rem) var(--gutter) 1rem; } .services__grid { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: 'lg lg b' 'lg lg c' 'd d d'; gap: 1.25rem; } .service-card { padding: 1.75rem; background: var(--color-surface); border: var(--rule); border-radius: var(--radius); } .service-card:nth-of-type(2) { grid-area: b; } .service-card:nth-of-type(3) { grid-area: c; } .service-card--lg { grid-area: lg; display: flex; flex-direction: column; border-color: var(--color-accent); background: linear-gradient(155deg, var(--color-surface), var(--color-bg-alt)); } .service-card__list { margin-top: 1.5rem; padding-top: 1.5rem; border-top: var(--rule); display: flex; flex-direction: column; gap: 0.75rem; } .service-card__list li { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--color-text-muted); font-size: 0.9375rem; } .service-card__list .icon { margin-top: 0.15rem; color: var(--color-accent-2); } .service-card--rate { grid-area: d; display: flex; align-items: center; gap: 1.5rem; border-style: dashed; border-color: var(--color-accent-2); } .service-card--rate h3 { color: var(--color-accent-2); } .service-card--rate p { margin-top: 0; } .service-card__icon { display: block; font-size: 2rem; line-height: 1; } .service-card--rate .service-card__icon { flex: none; } .service-card h3 { margin-top: 0.9rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; } .service-card--lg h3 { font-size: 1.5rem; } .service-card p { margin-top: 0.5rem; color: var(--color-text-muted); font-size: 0.9375rem; } @media (max-width: 56rem) { .services__grid { grid-template-columns: 1fr; grid-template-areas: 'lg' 'b' 'c' 'd'; } .service-card--rate { flex-direction: column; align-items: flex-start; } } /* ========================================================================== How it works ========================================================================== */ .how { max-width: var(--page-width); margin-inline: auto; padding: clamp(3.5rem, 8vh, 6rem) var(--gutter) 1rem; } .how__steps { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .how__steps li { position: relative; padding-top: 1.5rem; border-top: 2px solid var(--color-border); } .how__steps li:nth-child(1) { border-top-color: var(--color-accent); } .how__steps li:nth-child(2) { border-top-color: var(--color-accent-dim); } .how__steps li:nth-child(3) { border-top-color: var(--color-accent-2); } .how__step-number { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-text-muted); } .how__steps h3 { margin-top: 0.5rem; font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem; } .how__steps p { margin-top: 0.4rem; color: var(--color-text-muted); font-size: 0.9375rem; } @media (max-width: 56rem) { .how__steps { grid-template-columns: 1fr; gap: 1.75rem; } } /* ========================================================================== Service areas ========================================================================== */ .areas { max-width: var(--page-width); margin-inline: auto; padding: clamp(3.5rem, 8vh, 6rem) var(--gutter); } .areas__list { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; } .areas__list li { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.1rem; background: var(--color-surface); border: var(--rule); border-radius: 999px; font-family: var(--font-mono); font-size: 0.9375rem; } .areas__list li:nth-child(odd) { rotate: -0.8deg; } .areas__list li:nth-child(even) { rotate: 0.8deg; } .areas__list .icon { width: 0.9375rem; height: 0.9375rem; color: var(--color-accent); } .areas__list li:last-child { border-color: var(--color-accent); color: var(--color-accent-2); } /* ========================================================================== Contact CTA ========================================================================== */ .contact-cta { margin-top: 2rem; background: var(--color-bg-alt); } .contact-cta__inner { max-width: 40rem; margin-inline: auto; padding: clamp(3rem, 8vh, 5rem) var(--gutter); text-align: center; } .contact-cta h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 900; letter-spacing: -0.01em; text-wrap: balance; } .contact-cta p { margin-top: 1rem; color: var(--color-text-muted); font-size: 1.0625rem; text-wrap: pretty; } .contact-cta__numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; } /* ========================================================================== Footer ========================================================================== */ .site-footer { padding: 2.5rem var(--gutter) 3rem; text-align: center; } .footer__available { font-family: var(--font-mono); font-weight: 700; font-size: 1.0625rem; color: var(--color-accent-2); } .footer__meta { margin-top: 0.5rem; color: var(--color-text-muted); font-size: 0.8125rem; }