/* ==========================================================================
Service subpages — the ONLY stylesheet a subpage links
The design system is COPIED IN below rather than @imported, so the whole
sheet arrives in one request with no second round trip.
GENERATED, IN PART. Everything from here down to the SUBPAGE STYLES marker
is a copy of tokens.css, base.css, components.css and sections.css. If any
of those change, this file must be rebuilt or the subpages will quietly
drift away from the homepage. Rules below that marker are hand-authored
and are preserved when it is rebuilt.
========================================================================== */
/* Hoisted from base.css: @import is only valid before any other rule, so
it cannot stay where it was once that file is pasted mid-sheet. */
@import url("https://api.fontshare.com/v2/css?f[]=clash-display@600,700&f[]=satoshi@400,500,700&display=swap");
/* =====.field input=====================================================================
TOKENS — copied from assets/css/tokens.css
========================================================================== */
/* ==========================================================================
Living Fresh Cleaning — Design Tokens
Concept: "Light Enters Clean Space"
Palette anchored on the logo blue (#1F6FC4).
========================================================================== */
:root {
/* ---- Ink (cinematic dark base) ------------------------------------- */
--ink-900: #04101c;
--ink-800: #071a2c;
--ink-700: #0c2740;
--ink-600: #12364f;
/* ---- Brand blue ramp ----------------------------------------------- */
--blue-700: #0f4380;
--blue-600: #1554a0;
--blue-500: #1f6fc4; /* logo blue — primary */
--blue-400: #3d8fe0;
--blue-300: #6fb0ee;
/* ---- Light accents (the "light source") ---------------------------- */
--cyan-400: #4fc3f7;
--cyan-300: #7dd9ff;
--mint-400: #3fd9a8;
/* ---- Paper (light bands) ------------------------------------------- */
--paper-50: #ffffff;
--paper-100: #f4f8fc;
--paper-200: #e4edf6;
--paper-300: #cfdeed;
/* ---- Text ----------------------------------------------------------- */
--slate-700: #22394c; /* headings on light — 10.9:1 on paper-100 */
--slate-500: #4a6579; /* body on light — 6.1:1 on paper-100 */
--slate-400: #6d879b; /* muted on light — 3.6:1 — large text only */
--on-dark: #eef5fb; /* body on ink — 15.2:1 on ink-800 */
--on-dark-muted: #9db4c7; /* muted on ink — 7.1:1 on ink-800 */
/* ---- RGB channels for alpha compositing ---------------------------- */
--rgb-cyan: 79, 195, 247;
--rgb-blue: 31, 111, 196;
--rgb-mint: 63, 217, 168;
--rgb-ink: 4, 16, 28;
--rgb-white: 255, 255, 255;
/* ---- Signature gradients -------------------------------------------- */
--grad-hero: radial-gradient(120% 90% at 50% 0%, #1f6fc4 0%, #071a2c 55%, #04101c 100%);
--grad-glow: radial-gradient(closest-side, rgba(var(--rgb-cyan), 0.55), transparent 70%);
--grad-text: linear-gradient(105deg, #ffffff 0%, #7dd9ff 45%, #3d8fe0 100%);
--grad-surface: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
--grad-fresh: linear-gradient(135deg, #4fc3f7, #3fd9a8);
--grad-cta: linear-gradient(140deg, #1554a0 0%, #1f6fc4 45%, #0c2740 100%);
/* ---- Typography ------------------------------------------------------ */
--font-display: "Clash Display", "Outfit", "Segoe UI", system-ui, sans-serif;
--font-body: "Satoshi", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
--fs-display-xl: clamp(2.75rem, 8.2vw, 8rem);
--fs-display-lg: clamp(2.25rem, 4.2vw, 3.5rem);
--fs-display-md: clamp(1.85rem, 3.6vw, 3.15rem);
--fs-heading-md: clamp(1.5rem, 2.6vw, 2.25rem);
--fs-heading-sm: clamp(1.15rem, 1.7vw, 1.4rem);
--fs-body-lg: clamp(1.05rem, 1.3vw, 1.2rem);
--fs-body: 1rem;
--fs-caption: 0.8125rem;
--fs-eyebrow: 0.75rem;
--lh-tight: 0.94;
--lh-snug: 1.12;
--lh-body: 1.7;
--ls-display: -0.03em;
--ls-eyebrow: 0.18em;
/* ---- Spacing scale --------------------------------------------------- */
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-5: 1.5rem;
--sp-6: 2rem;
--sp-7: 3rem;
--sp-8: 4rem;
--sp-9: 6rem;
--sp-10: 8rem;
--section-y: clamp(4.5rem, 9vw, 6rem);
/* ---- Layout ---------------------------------------------------------- */
--container: 1280px;
--container-wide: 1560px;
--gutter: clamp(1.25rem, 4vw, 3rem);
--measure: 68ch;
--nav-h: 84px;
/* ---- Radii ----------------------------------------------------------- */
--r-sm: 8px;
--r-md: 14px;
--r-lg: 22px;
--r-xl: 32px;
--r-pill: 999px;
/* ---- Elevation & glow ------------------------------------------------ */
--shadow-sm: 0 2px 8px rgba(var(--rgb-ink), 0.08);
--shadow-md: 0 18px 40px -18px rgba(var(--rgb-ink), 0.28);
--shadow-lg: 0 40px 90px -30px rgba(var(--rgb-ink), 0.45);
--glow-cyan: 0 0 0 1px rgba(var(--rgb-cyan), 0.35), 0 12px 44px -8px rgba(var(--rgb-cyan), 0.45);
--glow-soft: 0 18px 60px -20px rgba(var(--rgb-cyan), 0.35);
/* ---- Easing & duration ----------------------------------------------- */
--e-out: cubic-bezier(0.22, 1, 0.36, 1); /* settle, slight authority */
--e-inout: cubic-bezier(0.65, 0, 0.35, 1);
--e-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot — "has weight" */
--d-fast: 0.24s;
--d-mid: 0.5s;
--d-slow: 0.9s;
/* ---- Z-index ---------------------------------------------------------- */
--z-grain: 5;
--z-nav: 100;
--z-menu: 95;
--z-progress: 110;
--z-cursor: 200;
}
/* Reduced motion: collapse durations globally so any transition that slips
through the JS gate is still near-instant. */
@media (prefers-reduced-motion: reduce) {
:root {
--d-fast: 0.01s;
--d-mid: 0.15s;
--d-slow: 0.2s;
}
}
/* ==========================================================================
BASE — copied from assets/css/base.css
========================================================================== */
/* ==========================================================================
Base — reset, typography, layout primitives, utilities
========================================================================== */
/* ---- Fonts (Fontshare CDN; swap to self-hosted woff2 in assets/fonts) ---- */
/* ---- Reset --------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
/* Lenis drives scrolling; native smooth-scroll would fight it. */
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--slate-500);
background: var(--ink-900);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
img {
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
background: none;
border: 0;
cursor: pointer;
}
ul,
ol {
list-style: none;
padding: 0;
}
a {
color: inherit;
text-decoration: none;
}
/* ---- Typography ---------------------------------------------------------- */
h1,
h2,
h3,
h4 {
font-family: var(--font-display);
font-weight: 600;
line-height: var(--lh-snug);
letter-spacing: var(--ls-display);
text-wrap: balance;
}
p {
text-wrap: pretty;
}
.display-xl {
font-size: var(--fs-display-xl);
line-height: var(--lh-tight);
font-weight: 600;
}
.display-lg {
font-size: var(--fs-display-lg);
line-height: 0.98;
}
.display-md {
font-size: var(--fs-display-md);
}
.heading-md {
font-size: var(--fs-heading-md);
}
.heading-sm {
font-size: var(--fs-heading-sm);
font-family: var(--font-display);
font-weight: 600;
}
.body-lg {
font-size: var(--fs-body-lg);
line-height: 1.65;
}
.measure {
max-width: var(--measure);
}
/* Eyebrow — small caps label above every section title */
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--blue-500);
}
.eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: currentColor;
opacity: 0.6;
}
/* Gradient text — used only on hero and section titles over ink */
.grad-text {
background: var(--grad-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ---- Layout -------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container-wide {
width: 100%;
max-width: var(--container-wide);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section {
position: relative;
padding-block: var(--section-y);
overflow: clip;
}
/* Band colours — the dark/light rhythm */
.band-ink {
background: var(--ink-900);
color: var(--on-dark);
}
.band-ink-800 {
background: var(--ink-800);
color: var(--on-dark);
}
.band-paper {
background: var(--paper-50);
color: var(--slate-500);
}
.band-paper-100 {
background: var(--paper-100);
color: var(--slate-500);
}
.band-ink h1,
.band-ink h2,
.band-ink h3,
.band-ink-800 h1,
.band-ink-800 h2,
.band-ink-800 h3 {
color: var(--paper-50);
}
.band-paper h1,
.band-paper h2,
.band-paper h3,
.band-paper-100 h1,
.band-paper-100 h2,
.band-paper-100 h3 {
color: var(--slate-700);
}
.section-head {
display: flex;
flex-direction: column;
gap: var(--sp-4);
max-width: 780px;
margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
/* ---- Ambience: grain + glow orbs ---------------------------------------- */
/* Grain is the single largest contributor to the filmic feel. */
.grain::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: var(--z-grain);
opacity: 0.045;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.orb {
position: absolute;
border-radius: 50%;
background: var(--grad-glow);
filter: blur(28px);
pointer-events: none;
will-change: transform;
}
/* ---- Diagonal light-sweep band transition -------------------------------- */
/* Sits at the top of a band and cuts a soft diagonal into the band above. */
.sweep {
position: absolute;
inset-inline: -5%;
top: -1px;
height: clamp(60px, 7vw, 130px);
pointer-events: none;
background: inherit;
clip-path: polygon(0 0, 100% 55%, 100% 100%, 0 100%);
}
.sweep::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 0%, rgba(var(--rgb-cyan), 0.5) 50%, transparent 100%);
clip-path: polygon(0 0, 100% 55%, 100% calc(55% + 2px), 0 2px);
opacity: 0.7;
}
/* ---- Accessibility ------------------------------------------------------- */
.skip-link {
position: absolute;
left: var(--sp-4);
top: -100px;
z-index: 999;
padding: var(--sp-3) var(--sp-5);
border-radius: var(--r-pill);
background: var(--paper-50);
color: var(--ink-900);
font-weight: 700;
transition: top var(--d-fast) var(--e-out);
}
.skip-link:focus-visible {
top: var(--sp-4);
}
:focus-visible {
outline: 2px solid var(--cyan-300);
outline-offset: 3px;
border-radius: var(--r-sm);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* ---- Reveal primitives ---------------------------------------------------
Rest state IS the final state. JS adds .is-armed to hide elements before
animating them in, so a JS failure or no-JS visit leaves the page readable.
-------------------------------------------------------------------------- */
[data-reveal].is-armed {
opacity: 0;
transform: translateY(40px);
filter: blur(8px);
}
[data-parallax] {
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
[data-reveal].is-armed {
opacity: 1;
transform: none;
filter: none;
}
.orb {
animation: none !important;
}
}
/* ==========================================================================
COMPONENTS — copied from assets/css/components.css
========================================================================== */
/* ==========================================================================
Components — buttons, logo, nav, cards, form, footer, chrome
========================================================================== */
/* --------------------------------------------------------------------------
Buttons
-------------------------------------------------------------------------- */
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-3);
padding: 0.95rem 1.75rem;
border-radius: var(--r-pill);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.01em;
white-space: nowrap;
cursor: pointer;
overflow: hidden;
transition: transform var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-out),
background-color var(--d-mid) var(--e-out), color var(--d-mid) var(--e-out),
border-color var(--d-mid) var(--e-out);
}
.btn:hover {
transform: translateY(-3px);
}
.btn:active {
transform: translateY(-1px);
}
.btn svg {
flex: none;
width: 18px;
height: 18px;
}
/* Primary — the light source made into a control */
.btn-primary {
background: var(--grad-fresh);
color: var(--ink-900);
box-shadow: var(--glow-soft);
}
.btn-primary:hover {
box-shadow: var(--glow-cyan);
}
/* Sheen sweep on hover */
.btn-primary::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
transform: translateX(-120%);
transition: transform 0.7s var(--e-out);
}
.btn-primary:hover::after {
transform: translateX(120%);
}
/* Ghost — on ink */
.btn-ghost {
border: 1px solid rgba(var(--rgb-white), 0.22);
color: var(--paper-50);
background: rgba(var(--rgb-white), 0.04);
backdrop-filter: blur(8px);
}
.btn-ghost:hover {
border-color: rgba(var(--rgb-cyan), 0.6);
background: rgba(var(--rgb-cyan), 0.1);
color: var(--cyan-300);
}
/* Solid blue — on paper */
.btn-blue {
background: var(--blue-500);
color: var(--paper-50);
box-shadow: 0 14px 34px -14px rgba(var(--rgb-blue), 0.75);
}
.btn-blue:hover {
background: var(--blue-600);
box-shadow: 0 20px 44px -14px rgba(var(--rgb-blue), 0.85);
}
/* Testimonials tail: the carousel shows four quotes, this is the way out to
the rest of them on Google. */
.quotes__more {
margin-top: var(--sp-7);
text-align: center;
}
/* Text link with travelling underline */
.link-arrow {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-weight: 700;
font-size: 0.9rem;
color: var(--cyan-300);
}
.link-arrow span {
position: relative;
}
.link-arrow span::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 100%;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform var(--d-mid) var(--e-out);
}
.link-arrow:hover span::after {
transform: scaleX(1);
transform-origin: left;
}
.link-arrow svg {
width: 16px;
height: 16px;
transition: transform var(--d-mid) var(--e-out);
}
.link-arrow:hover svg {
transform: translateX(5px);
}
/* --------------------------------------------------------------------------
Logo
-------------------------------------------------------------------------- */
.logo {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
}
.logo__mark {
width: 52px;
height: 52px;
flex: none;
/* The roundel is cut to a transparent circle, so nothing needs clipping
here; object-fit only guards against a future re-export at another
aspect ratio squashing it. */
object-fit: contain;
transition: transform var(--d-mid) var(--e-spring);
}
.logo:hover .logo__mark {
transform: rotate(-8deg) scale(1.05);
}
.logo__text {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.logo__text b {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--paper-50);
}
.logo__text span {
/* was 0.62rem = 9.92px, below the 12px floor for legible label text */
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--on-dark-muted);
}
/* --------------------------------------------------------------------------
Navigation
-------------------------------------------------------------------------- */
.nav {
position: fixed;
inset-inline: 0;
top: 0;
z-index: var(--z-nav);
transition: background-color var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-out),
backdrop-filter var(--d-mid) var(--e-out);
}
.nav__inner {
display: flex;
align-items: center;
gap: var(--sp-5);
height: var(--nav-h);
transition: height var(--d-mid) var(--e-out);
}
.nav.is-stuck {
background: rgba(4, 16, 28, 0.78);
backdrop-filter: blur(18px) saturate(140%);
box-shadow: 0 1px 0 rgba(var(--rgb-cyan), 0.28), 0 18px 40px -30px rgba(0, 0, 0, 0.9);
}
.nav.is-stuck .nav__inner {
height: 68px;
}
.nav__links {
display: flex;
align-items: center;
gap: clamp(0.5rem, 1.6vw, 1.6rem);
margin-inline: auto;
}
.nav__link {
position: relative;
display: inline-flex;
white-space: nowrap;
align-items: center;
gap: 6px;
padding: 0.5rem 0.25rem;
font-size: 0.9rem;
font-weight: 500;
color: var(--on-dark);
transition: color var(--d-fast) var(--e-out);
}
.nav__link:hover,
.nav__link[aria-expanded="true"] {
color: var(--cyan-300);
}
.nav__link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: var(--cyan-300);
transform: scaleX(0);
transform-origin: right;
transition: transform var(--d-mid) var(--e-out);
}
.nav__link:hover::after,
.nav__link[aria-expanded="true"]::after {
transform: scaleX(1);
transform-origin: left;
}
.nav__link .chev {
width: 12px;
height: 12px;
transition: transform var(--d-fast) var(--e-out);
}
.nav__link[aria-expanded="true"] .chev {
transform: rotate(180deg);
}
.nav__actions {
display: flex;
align-items: center;
gap: var(--sp-4);
}
.nav__phone {
display: inline-flex;
white-space: nowrap;
align-items: center;
gap: var(--sp-2);
font-weight: 700;
font-size: 0.9rem;
color: var(--paper-50);
transition: color var(--d-fast) var(--e-out);
}
.nav__phone:hover {
color: var(--cyan-300);
}
.nav__phone svg {
width: 16px;
height: 16px;
color: var(--cyan-400);
}
.nav__toggle {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
border-radius: var(--r-sm);
color: var(--paper-50);
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
content: "";
display: block;
width: 22px;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform var(--d-mid) var(--e-out), opacity var(--d-fast) linear;
}
.nav__toggle span::before {
transform: translateY(-7px);
}
.nav__toggle span::after {
transform: translateY(5px);
}
.nav__toggle[aria-expanded="true"] span {
background: transparent;
}
.nav__toggle[aria-expanded="true"] span::before {
transform: rotate(45deg);
}
.nav__toggle[aria-expanded="true"] span::after {
transform: rotate(-45deg) translateY(-1px);
}
/* ---- Mega dropdown ------------------------------------------------------- */
.mega {
position: absolute;
inset-inline: 0;
top: 100%;
z-index: var(--z-menu);
background: rgba(7, 26, 44, 0.96);
backdrop-filter: blur(20px);
border-top: 1px solid rgba(var(--rgb-cyan), 0.18);
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(-12px);
transition: opacity var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out),
visibility var(--d-mid);
}
.mega.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mega__grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 0.9fr;
gap: var(--sp-6);
padding-block: var(--sp-6) var(--sp-7);
}
.mega__title {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--cyan-400);
margin-bottom: var(--sp-4);
}
.mega__item {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: 0.6rem 0.75rem;
border-radius: var(--r-md);
font-size: 0.92rem;
color: var(--on-dark);
transition: background-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out),
transform var(--d-fast) var(--e-out);
}
.mega__item:hover {
background: rgba(var(--rgb-cyan), 0.1);
color: var(--cyan-300);
transform: translateX(4px);
}
.mega__item svg {
width: 16px;
height: 16px;
flex: none;
color: var(--blue-400);
}
.mega__promo {
position: relative;
border-radius: var(--r-lg);
overflow: hidden;
min-height: 220px;
display: flex;
align-items: flex-end;
padding: var(--sp-5);
color: var(--paper-50);
}
.mega__promo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.85) brightness(0.62) contrast(1.06);
}
.mega__promo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(var(--rgb-blue), 0.15), rgba(var(--rgb-ink), 0.9));
}
.mega__promo > div {
position: relative;
z-index: 1;
}
.mega__promo strong {
font-family: var(--font-display);
font-size: 1.2rem;
display: block;
}
.mega__promo p {
font-size: 0.85rem;
color: var(--on-dark-muted);
margin-top: var(--sp-2);
}
/* --------------------------------------------------------------------------
Chrome — scroll progress, cursor, scroll cue
-------------------------------------------------------------------------- */
.progress {
position: fixed;
top: 0;
left: 0;
height: 2px;
width: 100%;
transform: scaleX(0);
transform-origin: left;
background: var(--grad-fresh);
z-index: var(--z-progress);
pointer-events: none;
}
.cursor {
position: fixed;
top: 0;
left: 0;
z-index: var(--z-cursor);
pointer-events: none;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--cyan-400);
mix-blend-mode: difference;
opacity: 0;
transition: width 0.3s var(--e-out), height 0.3s var(--e-out), background-color 0.3s var(--e-out),
border-color 0.3s var(--e-out), opacity 0.3s linear;
}
.cursor.is-active {
opacity: 1;
}
.cursor.is-hover {
width: 46px;
height: 46px;
background: transparent;
border: 1px solid var(--cyan-300);
}
.scroll-cue {
position: absolute;
left: 50%;
bottom: clamp(1.5rem, 4vh, 3rem);
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-3);
font-size: 0.7rem;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--on-dark-muted);
z-index: 3;
}
.scroll-cue__rail {
position: relative;
width: 1px;
height: 60px;
background: rgba(var(--rgb-white), 0.18);
overflow: hidden;
}
.scroll-cue__rail::after {
content: "";
position: absolute;
inset-inline: 0;
top: -40%;
height: 40%;
background: linear-gradient(180deg, transparent, var(--cyan-300));
animation: cue 2.4s var(--e-inout) infinite;
}
@keyframes cue {
0% {
transform: translateY(0);
}
100% {
transform: translateY(350%);
}
}
/* --------------------------------------------------------------------------
Cards
-------------------------------------------------------------------------- */
/* Service card — photo panel, floating icon badge, body beneath.
Sits on a light band, so every colour here is the light-band half of the
palette: white surface, slate text, blue-600 link. cyan-400 is 2.0:1 on
white and blue-400 is 3.39:1 — neither can carry this link. */
.svc-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--paper-50);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: transform var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-out);
}
.svc-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
}
.svc-card__media {
position: relative;
margin: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.svc-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.9s var(--e-out);
}
.svc-card:hover .svc-card__media img {
transform: scale(1.07);
}
/* Grounds the badge and keeps the photo from running bright into the body. */
.svc-card__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(var(--rgb-ink), 0.45), transparent 52%);
}
/* The badge straddles the seam between photo and body — that overlap is what
gives the card its depth. It is anchored to the TOP of the body rather than
the bottom of the media on purpose: .svc-card__media is overflow:hidden so
the hover zoom stays in its frame, and that clip would slice the overhang
off. The body clips nothing, so the badge hangs up into the photo intact. */
.svc-card__icon {
position: absolute;
left: var(--sp-5);
top: -26px;
z-index: 2;
display: grid;
place-items: center;
width: 54px;
height: 54px;
border-radius: var(--r-md);
background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
border: 3px solid var(--paper-50);
box-shadow: 0 12px 26px -8px rgba(var(--rgb-blue), 0.55);
color: var(--paper-50);
transition: transform var(--d-mid) var(--e-out);
}
.svc-card:hover .svc-card__icon {
transform: rotate(-8deg) scale(1.07);
}
.svc-card__icon svg {
width: 24px;
height: 24px;
}
.svc-card__body {
position: relative; /* the badge above is positioned against this */
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sp-3);
padding: calc(var(--sp-6) + 8px) var(--sp-5) var(--sp-5);
}
.svc-card h3 {
font-size: 1.15rem;
color: var(--slate-700);
}
.svc-card p {
font-size: 0.92rem;
color: var(--slate-500);
margin: 0;
}
/* The shared .link-arrow is cyan-300 for dark bands; on white it needs the
deep blue instead. */
.svc-card .link-arrow {
margin-top: var(--sp-2);
color: var(--blue-600);
}
/* Glow tile — Why Choose Us; cyan follows the pointer */
.glow-tile {
position: relative;
padding: clamp(1.75rem, 3vw, 2.75rem);
border-radius: var(--r-lg);
background: var(--grad-surface);
border: 1px solid rgba(var(--rgb-white), 0.09);
overflow: hidden;
transition: border-color var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out);
}
.glow-tile::before {
content: "";
position: absolute;
width: 340px;
height: 340px;
border-radius: 50%;
background: var(--grad-glow);
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%);
left: var(--mx, 50%);
top: var(--my, 50%);
transition: opacity var(--d-mid) linear;
}
.glow-tile:hover {
border-color: rgba(var(--rgb-cyan), 0.32);
transform: translateY(-4px);
}
.glow-tile:hover::before {
opacity: 0.28;
}
.glow-tile > * {
position: relative;
}
.glow-tile__icon {
display: grid;
place-items: center;
width: 56px;
height: 56px;
margin-bottom: var(--sp-5);
border-radius: var(--r-md);
background: rgba(var(--rgb-cyan), 0.12);
border: 1px solid rgba(var(--rgb-cyan), 0.28);
color: var(--cyan-300);
}
.glow-tile__icon svg {
width: 26px;
height: 26px;
}
.glow-tile h3 {
font-size: var(--fs-heading-sm);
margin-bottom: var(--sp-3);
}
.glow-tile p {
color: var(--on-dark-muted);
font-size: 0.95rem;
}
/* --------------------------------------------------------------------------
Quote form
-------------------------------------------------------------------------- */
.form {
display: grid;
gap: var(--sp-4);
padding: clamp(1.5rem, 3vw, 2.5rem);
border-radius: var(--r-lg);
background: rgba(var(--rgb-ink), 0.42);
border: 1px solid rgba(var(--rgb-white), 0.14);
backdrop-filter: blur(16px);
}
.form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-4);
}
.field {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.field label {
font-size: var(--fs-caption);
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(var(--rgb-white), 0.72);
}
.field input,
.field select,
.field textarea {
width: 100%;
min-width: 0; /* form controls carry an intrinsic min-width; drop it */
padding: 0.55rem 1rem;
border-radius: var(--r-md);
border: 1px solid rgba(var(--rgb-white), 0.18);
background: rgba(var(--rgb-ink), 0.45);
color: var(--paper-50);
transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}
.field textarea {
resize: vertical;
min-height: 110px;
}
.field input::placeholder,
.field textarea::placeholder {
color: rgba(var(--rgb-white), 0.42);
}
/* A select has no ::placeholder — its empty first option stands in for one.
`required` keeps the control :invalid until a real choice is made, which is
the only hook for showing that stand-in at placeholder weight rather than
as though a service had already been picked. */
.field select:invalid {
color: rgba(var(--rgb-white), 0.42);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--cyan-400);
box-shadow: 0 0 0 3px rgba(var(--rgb-cyan), 0.2);
}
.field select option {
color: var(--slate-700);
}
.field__error {
font-size: var(--fs-caption);
color: #ffb4b4;
min-height: 1.1em;
}
.form__note {
font-size: var(--fs-caption);
color: rgba(var(--rgb-white), 0.6);
}
.form__status {
font-size: 0.9rem;
color: var(--mint-400);
min-height: 1.4em;
}
/* --------------------------------------------------------------------------
Footer
-------------------------------------------------------------------------- */
.footer {
position: relative;
background: var(--ink-900);
color: var(--on-dark-muted);
padding-top: var(--sp-9);
overflow: clip;
}
.footer__grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: var(--sp-6);
padding-bottom: var(--sp-8);
}
.footer__grid > * {
min-width: 0;
}
.footer a {
overflow-wrap: anywhere; /* the email address must be allowed to break */
}
.footer h3 {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--cyan-400);
margin-bottom: var(--sp-4);
}
.footer li + li {
margin-top: var(--sp-2);
}
/* Menu rows: chevron bullet, then the label. align-items:flex-start keeps the
chevron on the first line when a label wraps to two. The hover shift is a
transform, not padding, so it never reflows the column. */
.footer__link {
display: inline-flex;
align-items: flex-start;
gap: var(--sp-2);
font-size: 0.92rem;
transition: color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.footer__link svg {
width: 12px;
height: 12px;
flex: none;
margin-top: 0.44em; /* optical centring against the first line of text */
color: var(--blue-400);
transition: color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.footer__link:hover {
color: var(--cyan-300);
transform: translateX(4px);
}
.footer__link:hover svg {
color: var(--cyan-300);
transform: translateX(2px);
}
/* Contact rows: real icons rather than a generic bullet. The last row is a
, not a link, so the class carries the layout instead of `a`. */
.footer__contact {
display: inline-flex;
align-items: flex-start;
gap: var(--sp-3);
font-size: 0.92rem;
transition: color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.footer__contact svg {
width: 15px;
height: 15px;
flex: none;
margin-top: 0.24em;
color: var(--cyan-400);
transition: color var(--d-fast) var(--e-out);
}
a.footer__contact:hover {
color: var(--cyan-300);
transform: translateX(3px);
}
a.footer__contact:hover svg {
color: var(--cyan-300);
}
/* Any footer link not covered above (e.g. legal rows added later). */
.footer a:not(.logo):not(.social__link):not(.footer__link):not(.footer__contact) {
font-size: 0.92rem;
transition: color var(--d-fast) var(--e-out);
}
.footer a:not(.logo):not(.social__link):not(.footer__link):not(.footer__contact):hover {
color: var(--cyan-300);
}
.footer__blurb {
margin-top: var(--sp-4);
font-size: 0.92rem;
max-width: 34ch;
}
.social {
display: flex;
gap: var(--sp-3);
margin-top: var(--sp-5);
}
/* The client's review poster in the footer's brand column, with a vector QR
laid over its printed one. The artwork is a 200px JPEG, so its own code is
too soft to decode at any display size, while an SVG of the same 41 modules
stays sharp at every device pixel ratio - both encode the identical review
URL. The percentages below are measured from the source file: the printed
code occupies x 51-148, y 149-246 of a 200x283 image, and the overlay adds
2.5 modules of quiet zone so its white ground covers the original cleanly.
Re-measure them if the artwork is ever re-exported. */
.review-card {
position: relative;
display: block;
width: 200px;
max-width: 100%;
margin-top: var(--sp-5);
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: transform var(--d-mid) var(--e-out);
}
.review-card:hover,
.review-card:focus-visible {
transform: translateY(-3px);
}
.review-card__art {
display: block;
width: 100%;
height: auto;
}
.review-card__qr {
position: absolute;
left: 22.54%;
top: 50.56%;
width: 54.41%;
height: auto;
aspect-ratio: 1;
background: #fff;
}
.social__link {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(var(--rgb-white), 0.14);
color: var(--on-dark-muted);
transition: transform var(--d-mid) var(--e-spring), color var(--d-fast) var(--e-out),
border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.social__link svg {
width: 17px;
height: 17px;
}
.social__link:hover {
transform: translateY(-4px);
color: var(--cyan-300);
border-color: rgba(var(--rgb-cyan), 0.45);
background: rgba(var(--rgb-cyan), 0.08);
}
.footer__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
padding-block: var(--sp-5);
border-top: 1px solid rgba(var(--rgb-white), 0.08);
font-size: var(--fs-caption);
}
/* The design credit in the legal row. The catch-all above already gives it a
colour and a cyan hover, so this only corrects the two things that are
wrong in this context: 0.92rem is larger than the 13px bar it sits in, and
base.css leaves links with no underline, which makes a link in running copy
indistinguishable from the copyright text around it.
The :not() chain is repeated deliberately — it matches the specificity of
the catch-all (0,5,1) so this rule wins on source order rather than on an
!important. */
.footer__bar a:not(.logo):not(.social__link):not(.footer__link):not(.footer__contact) {
font-size: inherit;
text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-thickness: 1px;
text-decoration-color: rgba(var(--rgb-white), 0.4);
transition: color var(--d-fast) var(--e-out),
text-decoration-color var(--d-fast) var(--e-out);
}
.footer__bar a:hover,
.footer__bar a:focus-visible {
text-decoration-color: currentColor;
}
/* Oversized ghosted wordmark bleeding off the bottom edge */
.footer__ghost {
position: absolute;
left: 50%;
bottom: -0.28em;
transform: translateX(-50%);
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(4rem, 15vw, 15rem);
line-height: 1;
white-space: nowrap;
color: rgba(var(--rgb-white), 0.03);
pointer-events: none;
user-select: none;
}
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
/* Six links, the phone and the quote button need ~1290px on one line. Below
1280 labels would wrap to two lines, so hand over to the drawer. */
@media (max-width: 1279px) {
.nav__links,
.nav__phone {
display: none;
}
.nav__toggle {
display: flex;
order: 3;
}
.nav__actions {
margin-left: auto;
}
}
@media (max-width: 1080px) {
.mega__grid {
grid-template-columns: 1fr 1fr;
}
.mega__promo {
display: none;
}
.footer__grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.btn {
padding: 0.85rem 1.35rem;
font-size: 0.9rem;
}
/* The nav bar can't hold the logo, CTA and toggle at this width. The drawer
and the hero both carry a "Get Free Quote", so drop this one. */
.nav__actions .btn {
display: none;
}
.form__row {
grid-template-columns: 1fr;
}
.footer__grid {
grid-template-columns: 1fr;
}
.logo__text b {
font-size: 0.95rem;
}
}
/* --------------------------------------------------------------------------
Mobile drawer (shares nav markup)
-------------------------------------------------------------------------- */
.drawer {
position: fixed;
inset: 0;
z-index: 90;
background: rgba(4, 16, 28, 0.97);
backdrop-filter: blur(20px);
padding: calc(var(--nav-h) + var(--sp-5)) var(--gutter) var(--sp-7);
overflow-y: auto;
opacity: 0;
visibility: hidden;
transform: translateY(-2%);
transition: opacity var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out),
visibility var(--d-mid);
}
.drawer.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Group headings are buttons now. They keep the eyebrow treatment the old
.drawer__title had, so the drawer reads the same when everything is shut. */
.drawer__group {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
width: 100%;
margin-top: var(--sp-4);
padding: 0.85rem 0;
background: none;
border: 0;
border-bottom: 1px solid rgba(var(--rgb-white), 0.07);
cursor: pointer;
text-align: left;
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--cyan-400);
}
.drawer__group .chev {
flex: none;
width: 18px;
height: 18px;
transition: transform var(--d-mid) var(--e-out);
}
.drawer__group[aria-expanded="true"] .chev {
transform: rotate(180deg);
}
/* Indented so the hierarchy is legible once a group is open. Needs the extra
.drawer to outrank `.drawer a { padding: 0.7rem 0 }` below, which is the
same specificity, comes later, and resets padding-left via the shorthand. */
.drawer .drawer__panel a {
padding-left: var(--sp-4);
}
.drawer a {
display: block;
padding: 0.7rem 0;
color: var(--on-dark);
border-bottom: 1px solid rgba(var(--rgb-white), 0.07);
}
.drawer a:hover {
color: var(--cyan-300);
}
/* `.drawer a` is (0,1,1) and outranks `.btn` (0,1,0), so without restating
these the quote button inherits display:block, the drawer's vertical-only
padding and its divider border — the label ends up jammed against the left
edge with a stray line under the pill. */
.drawer .btn {
display: inline-flex;
width: 100%;
margin-top: var(--sp-6);
padding: 0.95rem 1.75rem;
border-bottom: 0;
}
/* --------------------------------------------------------------------------
Mobile touch targets
Text links sit at 24-25px tall, which clears the 24px WCAG 2.5.8 floor but
is uncomfortable on a phone. Vertical padding brings them to 44px without
changing the visual rhythm — the list gaps shrink by the same amount, so the
columns keep their spacing.
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
.footer__link,
.footer__contact {
padding-block: 0.6rem;
}
.footer li + li {
margin-top: 0; /* padding above now supplies the gap */
}
/* "View Service" inside the service cards. */
.link-arrow {
padding-block: 0.65rem;
}
}
/* ==========================================================================
SECTIONS — copied from assets/css/sections.css
========================================================================== */
/* ==========================================================================
Sections — the twelve scenes
========================================================================== */
/* --------------------------------------------------------------------------
02 · Hero
-------------------------------------------------------------------------- */
.hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
padding-top: calc(var(--nav-h) + var(--sp-6));
padding-bottom: var(--sp-9);
background: var(--grad-hero);
color: var(--on-dark);
overflow: clip;
/* Gives .hero__inner a 3D context so its scroll dolly (translateZ) reads as
depth rather than a flat fade. .hero__stage nests its own for the layers. */
perspective: 1200px;
}
/* ---- 3D stage ------------------------------------------------------------
A single perspective wraps every background layer. Each layer declares its
depth in px via data-depth; JS applies translateZ plus a compensating scale
so the layer still fills the frame, then tilts the whole space toward the
pointer. The result is genuine parallax between the footage, the glows and
the copy — not a 2D fake.
-------------------------------------------------------------------------- */
.hero__stage {
position: absolute;
inset: 0;
z-index: 0;
perspective: 1200px;
perspective-origin: 50% 45%;
overflow: hidden;
}
.hero__space {
position: absolute;
inset: 0;
transform-style: preserve-3d;
will-change: transform;
}
/* Composed transform: --py is the scroll parallax offset (GSAP), --z the depth,
--zs the scale that cancels the size change translateZ would cause. Defaults
make an untouched layer sit flat and correct, so no-JS is the neutral state. */
.hero__layer {
position: absolute;
inset: 0;
transform-style: preserve-3d;
backface-visibility: hidden;
transform: translate3d(0, var(--py, 0px), var(--z, 0px)) scale(var(--zs, 1));
}
/* ---- Establishing shot ---------------------------------------------------- */
.hero__bg {
overflow: hidden;
}
.hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
/* Footage is warm golden-hour; pull it toward the brand blue and drop the
exposure so the headline stays legible over it. */
filter: saturate(0.66) contrast(1.08) brightness(0.6) hue-rotate(-12deg);
transform: scale(1.08);
}
/* ---- Floating panels ------------------------------------------------------ */
.hero__panels {
pointer-events: none;
}
.hero-panel {
position: absolute;
margin: 0;
border-radius: var(--r-lg);
overflow: hidden;
transform: translate3d(0, var(--py, 0px), var(--z, 0px)) scale(var(--zs, 1)) rotate(var(--rot, 0deg));
box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(var(--rgb-white), 0.09);
backface-visibility: hidden;
}
.hero-panel img {
width: 100%;
height: auto;
display: block;
filter: saturate(0.82) contrast(1.05) brightness(0.86);
border: 1px solid;
}
/* A cool rim so panels read as glass-edged rather than pasted on. */
.hero-panel::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(160deg, rgba(var(--rgb-cyan), 0.14), transparent 45%, rgba(var(--rgb-ink), 0.45));
pointer-events: none;
}
.hero-panel figcaption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
padding: var(--sp-5) var(--sp-4) var(--sp-4);
font-size: var(--fs-caption);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--paper-50);
background: linear-gradient(transparent, rgba(var(--rgb-ink), 0.85));
}
/* Cascading right-hand cluster. Depth order is set by data-depth in the
markup; these are just the positions. */
.hero-panel--bathroom {
top: 17%;
right: 30%;
width: 20vw;
--rot: -3deg;
}
.hero-panel--kitchen {
top: 31%;
right: 12%;
width: 24vw;
--rot: 2deg;
}
.hero-panel--products {
top: 67%;
right: 36%;
width: 15vw;
--rot: -4deg;
}
/* The only frame with real Living Fresh branding — largest and frontmost. */
.hero-panel--cleaner {
top: 53%;
right: 14%;
width: 30vw;
--rot: 1.5deg;
}
/* Cinematic vignette — pulls the eye to centre and protects the headline. */
.hero__vignette {
background: radial-gradient(75% 75% at 50% 45%, transparent 35%, rgba(var(--rgb-ink), 0.55) 78%, rgba(var(--rgb-ink), 0.88) 100%);
pointer-events: none;
}
/* Copy scrim — the footage is bright golden-hour interiors, and its highlights
(windows, sunlight) can hit 200+ luminance right behind the headline. This
left-weighted wedge keeps the text safely readable on any frame, and doubles
as composition: dark on the left where the copy sits, clear on the right
where the footage is worth seeing. */
.hero__copyscrim {
pointer-events: none;
background: linear-gradient(100deg, rgb(4 16 28 / 62%) 0%, rgb(4 16 28 / 63%) 32%, rgba(var(--rgb-ink), 0.42) 58%, rgba(var(--rgb-ink), 0.06) 80%, transparent 100%);
}
/* Anamorphic light bloom drifting across the frame. */
.hero__bloom {
pointer-events: none;
background: linear-gradient(102deg, transparent 34%, rgba(var(--rgb-cyan), 0.16) 47%, rgba(255, 255, 255, 0.1) 50%, rgba(var(--rgb-cyan), 0.16) 53%, transparent 66%);
mix-blend-mode: screen;
opacity: 0.75;
animation: bloom-drift 19s var(--e-inout) infinite alternate;
}
@keyframes bloom-drift {
from {
transform: translate3d(-14%, 0, 0) rotate(-1deg);
}
to {
transform: translate3d(14%, 0, 0) rotate(1deg);
}
}
/* Split layout: copy on the left, panel cluster on the right.
Two classes, so this beats `.hero h1 { max-width: 16ch }` on specificity —
without that the headline box extends past the panels and the two overlap.
The headline must also come down in size. --fs-display-xl tops out at 8vw,
which is ~102px at 1240 — in a 52% column that puts every single word on its
own line and pushes the hero past 1100px tall. This scale keeps it to three
lines with two words on most of them. */
@media (min-width: 1080px) {
.hero .hero__inner > * {
max-width: min(100%, 50%);
}
.hero h1 {
font-size: clamp(3rem, 5.4vw, 5rem);
max-width: min(100%, 50%);
}
/* The half-width column changes the vertical budget. At 56px the three trust
items need 622px in a 592px row and wrap to three lines — 196px of height
that pushes the CTA below the fold on a 840px-tall laptop. Tightening the
gap and the block spacing keeps the whole hero inside one viewport. */
/* Note the `.hero` prefix on both: the base .hero__trust / .hero__cta rules
are declared later in this file, so at equal specificity they would win. */
/* The trust strip sits at the bottom of the column, below where the panel
cluster reaches, so it can run wider than the rest of the copy. It needs
~574px for one line; a straight 50% column is only 506px at 1100. */
.hero .hero__trust {
gap: clamp(1.25rem, 2.2vw, 2rem);
max-width: min(100%, 58%);
}
.hero .hero__cta {
margin-bottom: var(--sp-6);
}
.hero {
padding-bottom: var(--sp-7);
}
}
/* Below 1080px the copy runs full width, so any panel placement collides with
the headline. The cluster is a wide-viewport flourish — drop it entirely and
let the establishing shot carry the hero. The team photo still appears in
the gallery, so nothing is lost from the page. */
@media (max-width: 1079px) {
.hero__panels {
display: none;
}
}
.hero__orb-1 {
inset: auto; /* .hero__layer sets inset:0; orbs position themselves */
width: 46vw;
height: 46vw;
max-width: 640px;
max-height: 640px;
top: -12%;
right: -6%;
opacity: 0.5;
animation: drift-a 38s var(--e-inout) infinite alternate;
}
.hero__orb-2 {
inset: auto;
width: 34vw;
height: 34vw;
max-width: 460px;
max-height: 460px;
bottom: -14%;
left: -8%;
opacity: 0.35;
background: radial-gradient(closest-side, rgba(var(--rgb-mint), 0.45), transparent 70%);
animation: drift-b 46s var(--e-inout) infinite alternate;
}
@keyframes drift-a {
to {
transform: translate3d(-7%, 9%, 0) scale(1.14);
}
}
@keyframes drift-b {
to {
transform: translate3d(9%, -8%, 0) scale(1.2);
}
}
.hero__inner {
position: relative;
z-index: 4;
width: 100%;
transform-style: preserve-3d;
}
/* The copy is a parallax layer too — slightly faster than the page, so it
lifts away ahead of the imagery. Gated on .is-3d so the no-JS and
reduced-motion states keep it perfectly flat. */
.hero.is-3d .hero__inner {
transform: translate3d(0, var(--py, 0px), var(--z, 0px)) scale(var(--zs, 1));
will-change: transform, opacity;
}
.hero__eyebrow {
color: var(--cyan-300);
margin-bottom: var(--sp-5);
}
/* Solid white is the safe default and the no-JS state. The gradient is applied
per-word by animations.js — see applyHeadlineGradient() for why it can't
live on the h1 itself. If that ever fails, the headline is still readable. */
.hero h1 {
max-width: 16ch;
margin-bottom: var(--sp-5);
color: var(--paper-50);
}
/* Word-by-word masked reveal: each word sits in an overflow-hidden box */
.word {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
padding-bottom: 0.08em;
}
.word > span {
display: inline-block;
}
.hero__sub {
font-size: var(--fs-body-lg);
font-weight: 500;
color: var(--cyan-300);
margin-bottom: var(--sp-3);
}
.hero__lede {
max-width: 52ch;
color: var(--on-dark);
opacity: 0.86;
margin-bottom: var(--sp-6);
}
.hero__cta {
display: flex;
flex-wrap: wrap;
gap: var(--sp-4);
margin-bottom: var(--sp-8);
}
.hero__trust {
display: flex;
flex-wrap: wrap;
gap: clamp(1.5rem, 4vw, 3.5rem);
padding-top: var(--sp-5);
border-top: 1px solid rgba(var(--rgb-white), 0.12);
max-width: 720px;
padding: 30px;
border-radius: 15px;
background: radial-gradient(closest-side, rgba(var(--rgb-cyan), 0.55), #204b71e0 70%);
}
.trust-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.trust-item b {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.4vw, 2.1rem);
font-weight: 700;
color: var(--paper-50);
line-height: 1;
}
.trust-item > span {
/* Direct child only: a descendant selector also matches the counter span
inside , shrinking "13" to caption size beside a full-size "+". */
font-size: var(--fs-caption);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--on-dark-muted);
}
/* --------------------------------------------------------------------------
03 · Intro
-------------------------------------------------------------------------- */
.intro__grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(2rem, 6vw, 5.5rem);
align-items: center;
}
.intro__media {
position: relative;
min-height: clamp(360px, 46vw, 620px);
}
/* Oversized ghosted "13" sitting behind the image pair */
.intro__ghost {
position: absolute;
left: -4%;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(11rem, 26vw, 26rem);
line-height: 0.8;
color: rgba(var(--rgb-blue), 0.06);
pointer-events: none;
user-select: none;
z-index: 0;
}
.intro__img {
position: absolute;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
z-index: 1;
}
.intro__img img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.9) contrast(1.04);
}
.intro__img--a {
width: 62%;
aspect-ratio: 4 / 5;
left: 0;
top: 0;
}
.intro__img--b {
width: 52%;
aspect-ratio: 1 / 1;
right: 0;
bottom: 0;
border: 6px solid var(--paper-50);
}
.intro__badge {
position: absolute;
left: 44%;
top: 8%;
z-index: 2;
display: flex;
align-items: center;
gap: var(--sp-3);
padding: 0.7rem 1.1rem;
border-radius: var(--r-pill);
background: var(--paper-50);
box-shadow: var(--shadow-md);
font-size: var(--fs-caption);
font-weight: 700;
color: var(--slate-700);
white-space: nowrap;
}
.intro__badge i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--mint-400);
box-shadow: 0 0 0 4px rgba(var(--rgb-mint), 0.22);
}
.intro__copy h2 {
margin-bottom: var(--sp-5);
}
.intro__copy p + p {
margin-top: var(--sp-4);
}
.intro__highlight {
display: block;
margin-top: var(--sp-5);
padding: var(--sp-4) var(--sp-5);
border-left: 3px solid var(--blue-500);
background: var(--paper-100);
border-radius: 0 var(--r-md) var(--r-md) 0;
font-weight: 500;
color: var(--slate-700);
}
.intro__list {
display: grid;
gap: var(--sp-3);
margin-top: var(--sp-5);
}
.intro__list li {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
font-size: 0.98rem;
}
.intro__list svg {
flex: none;
width: 20px;
height: 20px;
margin-top: 3px;
color: var(--blue-500);
}
.intro__actions {
display: flex;
flex-wrap: wrap;
gap: var(--sp-4);
margin-top: var(--sp-6);
}
/* --------------------------------------------------------------------------
04 · Services — card grid on a tinted light band
Was a GSAP-pinned horizontal track. A pinned section is the most fragile
thing on a page: it writes a spacer into layout, has to be measured before
images settle, and competes with every other trigger for refresh order.
A plain grid has none of that and shows all six services at once.
-------------------------------------------------------------------------- */
.services {
position: relative;
/* Dark band, as before. It sits between band-paper (#fff) and
band-paper-100 (#f4f8fc), so it is the section that keeps the page's
light/dark rhythm from flattening into three pale bands in a row.
The cards stay white and simply pop off it. */
background: var(--ink-800);
color: var(--on-dark-muted);
padding-block: var(--section-y);
overflow: clip;
}
.services__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-6);
padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
.services__head h2 {
max-width: 16ch;
color: var(--on-dark);
}
.services__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1rem, 1.8vw, 1.75rem);
}
@media (max-width: 1180px) {
.services__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.services__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.services__grid {
grid-template-columns: 1fr;
}
.services__head {
flex-direction: column;
align-items: flex-start;
gap: var(--sp-4);
}
}
/* --------------------------------------------------------------------------
05 · Working process — the light path
-------------------------------------------------------------------------- */
.process {
position: relative;
}
.process__grid {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.5rem, 4vw, 3.5rem);
margin-top: clamp(2rem, 4vw, 3rem);
}
.process__path {
position: absolute;
inset-inline: 8%;
top: 3px;
height: 90px;
z-index: 0;
pointer-events: none;
}
/* The SVG is stretched with preserveAspectRatio="none", so the horizontal and
vertical scales differ and would squash the dots into ellipses at narrower
widths. non-scaling-stroke renders the stroke in screen units instead, which
keeps every dot round and evenly spaced at any container size. */
.process__path path {
fill: none;
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 0.1 11; /* near-zero dash + round cap = a dot */
vector-effect: non-scaling-stroke;
}
.process__path .track {
stroke: var(--paper-300);
}
/* Dots travel left to right along the path. One full cycle is the dash
period (0.1 + 11), so the loop is seamless. */
.process__path .draw {
stroke: url(#processGrad);
animation: dot-flow 1.1s linear infinite;
}
@keyframes dot-flow {
to {
stroke-dashoffset: -11.1;
}
}
@media (prefers-reduced-motion: reduce) {
.process__path .draw {
animation: none;
}
}
.process__step {
position: relative;
z-index: 1;
text-align: center;
}
.process__node {
position: relative;
display: grid;
place-items: center;
width: 92px;
height: 92px;
margin: 0 auto var(--sp-5);
border-radius: 50%;
background: var(--paper-50);
border: 1px solid var(--paper-200);
box-shadow: var(--shadow-md);
color: var(--blue-500);
}
.process__node svg {
width: 32px;
height: 32px;
}
.process__node::after {
content: "";
position: absolute;
inset: -8px;
border-radius: 50%;
border: 2px solid var(--mint-400);
opacity: 0;
transform: scale(0.85);
}
.process__step.is-lit .process__node::after {
animation: ring 1.1s var(--e-out) forwards;
}
@keyframes ring {
0% {
opacity: 0.85;
transform: scale(0.85);
}
100% {
opacity: 0;
transform: scale(1.35);
}
}
/* ---- Node ambience -------------------------------------------------------
Three layers, all decorative, all independent of the dotted path:
.process__node::before a dashed halo ring rotating OUTSIDE the disc. This
is the layer you actually notice. Being outside the
white circle, it cannot affect icon contrast at all,
so it can be as visible as it likes.
.process__aura::before a soft light sweeping around INSIDE the disc. Uses
cyan/mint only — both are high-luminance, so the
wash stays pale and the dark blue icon keeps its
contrast. Never blue, which would darken it.
.process__aura::after one slow drifting blob, for a bit of organic depth.
Steps are offset with negative delays so the row never pulses in unison.
All of it stops under prefers-reduced-motion.
-------------------------------------------------------------------------- */
.process__node {
transition: transform var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-out);
}
/* Beacon pulse. Replaces the rotating dashed halo, which read as the dotted
path spinning around the disc — same motif twice. A ring that expands and
fades is a different gesture entirely.
The cycle is 2.8s (~0.36Hz), far below the 3Hz flash threshold, so it reads
as a slow blink rather than anything strobing. */
.process__node::before {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid var(--cyan-400);
opacity: 0;
animation: node-ping 2.8s var(--e-out) infinite;
}
@keyframes node-ping {
0% {
transform: scale(0.96);
opacity: 0;
}
18% {
opacity: 0.75;
}
100% {
transform: scale(1.42);
opacity: 0;
}
}
/* Inner glow, blinking in sync with the ring. Still ring-masked so the light
sits around the icon and the centre of the disc stays near-white. */
.process__aura {
position: absolute;
inset: 1px;
border-radius: 50%;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.process__aura::before {
content: "";
position: absolute;
inset: 6%;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(var(--rgb-cyan), 0.55), transparent 74%);
filter: blur(10px);
-webkit-mask: radial-gradient(closest-side, transparent 40%, #000 72%);
mask: radial-gradient(closest-side, transparent 40%, #000 72%);
opacity: 0.25;
animation: node-glow 2.8s var(--e-inout) infinite;
}
@keyframes node-glow {
0%,
100% {
opacity: 0.22;
}
22% {
opacity: 0.85;
}
}
/* Slow drifting blob underneath the sweep. */
.process__aura::after {
content: "";
position: absolute;
right: -14%;
bottom: -16%;
width: 76%;
height: 76%;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(var(--rgb-cyan), 0.32), transparent 70%);
filter: blur(12px);
animation: aura-drift 17s var(--e-inout) infinite alternate;
}
@keyframes aura-drift {
to {
transform: translate(-30%, -24%) scale(1.18);
}
}
/* Icon rides above both layers and breathes very slightly. */
.process__node svg {
position: relative;
z-index: 1;
animation: node-breathe 2.8s var(--e-inout) infinite;
}
@keyframes node-breathe {
0%,
100% {
transform: scale(1);
}
22% {
transform: scale(1.07);
}
}
/* Offsets so the three steps never move together. :nth-of-type, not
:nth-child — the .process__path