/* ==========================================================================
A.S. Associates - Consultants and Accounting
Colours are taken from the company logo: deep navy, azure blue, coral red.
Shape system (applied everywhere, no exceptions):
buttons + chips ....... 999px (pill)
panels, cards, media .. 18px
inputs, small cards ... 14px
Layering scale:
floating action 100 | header 200 (owns the mobile drawer) | skip link 400
========================================================================== */
/* --------------------------------------------------------------- 1. tokens
Theming is explicit, never inherited from the operating system:
is the default and the no-JavaScript state, and
the header toggle writes "as-theme" to localStorage for return visits.
Every dark rule in this file therefore hangs off [data-theme="dark"].
------------------------------------------------------------------------- */
:root {
color-scheme: light;
/* brand constants, identical in both themes */
--navy-950: #071B33;
--navy-900: #0B2647;
--navy-800: #0F3260;
--navy-700: #163F76;
--azure-500: #1683C8;
--azure-600: #1272B0;
--coral-500: #E8404F;
--coral-600: #D0303D;
--coral-700: #BC2733;
/* light theme surfaces + text (all pairs verified at WCAG AA or better) */
--bg: #FFFFFF;
--bg-soft: #F4F8FC;
--bg-sunk: #E9F1F9;
--surface: #FFFFFF;
--surface-2: #F8FBFE;
--line: #DDE7F1;
--line-strong: #C3D4E5; /* dividers only */
--control-line: #7089A3; /* borders of real controls: 3.6:1 on white, 3.2:1 on sunk */
--ink: #0C1B2E; /* 17.3:1 on white */
--ink-2: #3C5570; /* 7.7:1 */
--ink-3: #526A85; /* 5.6:1 white, 5.2:1 soft, 4.9:1 sunk */
--brand: #0F6CA8; /* 5.6:1 */
--brand-hover: #0B5586;
--accent: #C42B38; /* 5.6:1 */
--cta: var(--coral-600); /* white on it = 5.0:1 */
--cta-hover: var(--coral-700);
--on-cta: #FFFFFF;
--ring: #0F6CA8;
--brand-tint: rgba(15, 108, 168, .12);
--brand-ring: rgba(15, 108, 168, .26);
--panel-dark: linear-gradient(150deg, #0B2647 0%, #123A6B 52%, #0F3260 100%);
--shadow-sm: 0 1px 2px rgba(12, 27, 46, .06), 0 2px 8px rgba(12, 27, 46, .05);
--shadow-md: 0 2px 6px rgba(12, 27, 46, .06), 0 14px 34px rgba(12, 27, 46, .09);
--shadow-lg: 0 4px 12px rgba(12, 27, 46, .08), 0 28px 64px rgba(12, 27, 46, .14);
--r-pill: 999px;
--r-lg: 18px;
--r-sm: 14px;
--header-h: 72px;
--wrap: 1200px;
--gutter: clamp(1.25rem, 4vw, 2.5rem);
--section-y: clamp(4rem, 8vw, 7rem);
--font-display: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--ease: cubic-bezier(.16, 1, .3, 1);
/* the header owns the mobile drawer, so it has to outrank the floating button */
--z-fab: 100;
--z-header: 200;
--z-drawer: 1;
}
[data-theme="dark"] {
color-scheme: dark;
--bg: #08192C;
--bg-soft: #0C2138;
--bg-sunk: #0F2942;
--surface: #0F2942;
--surface-2: #12304C;
--line: #1E3B58;
--line-strong: #2A4C6E;
--control-line: #4A76A2;
--ink: #E9F1F9; /* 15.5:1 on --bg */
--ink-2: #AEC3D8; /* 9.8:1 */
--ink-3: #93AAC2; /* 7.4:1 */
--brand: #5CB6F0; /* 7.9:1 */
--brand-hover: #85CBF7;
--accent: #FF8A93; /* 7.9:1 */
--ring: #5CB6F0;
--brand-tint: rgba(92, 182, 240, .16);
--brand-ring: rgba(92, 182, 240, .3);
--panel-dark: linear-gradient(150deg, #0D2C52 0%, #164379 52%, #123A6B 100%);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .22);
--shadow-md: 0 2px 6px rgba(0, 0, 0, .32), 0 14px 34px rgba(0, 0, 0, .34);
--shadow-lg: 0 4px 12px rgba(0, 0, 0, .36), 0 28px 64px rgba(0, 0, 0, .46);
}
/* One short cross-fade when the toggle is pressed, never on first paint.
Named surfaces only: a blanket `*` rule forces a whole-document style
recalculation and snaps any opacity or transform transition already in
flight, because it replaces the transition property outright. */
@media (prefers-reduced-motion: no-preference) {
html.theme-anim body,
html.theme-anim .header,
html.theme-anim .nav,
html.theme-anim .hero,
html.theme-anim .stats,
html.theme-anim .stat,
html.theme-anim .section,
html.theme-anim .tile,
html.theme-anim .service,
html.theme-anim .info,
html.theme-anim .step__icon,
html.theme-anim .tile__icon,
html.theme-anim .info__icon,
html.theme-anim .trust__item,
html.theme-anim .filter,
html.theme-anim .services__note,
html.theme-anim .qa,
html.theme-anim .input,
html.theme-anim .select,
html.theme-anim .textarea,
html.theme-anim .map,
html.theme-anim .map__foot,
html.theme-anim .theme-toggle,
html.theme-anim .nav__toggle,
html.theme-anim .to-top,
html.theme-anim .footer {
transition: background-color .28s var(--ease), border-color .28s var(--ease),
color .28s var(--ease), fill .28s var(--ease),
box-shadow .28s var(--ease);
}
}
/* ----------------------------------------------------------- 2. base reset */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 20px);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.65;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
/* the icon symbols carry no fill of their own, so they take the text colour */
svg { fill: currentColor; }
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--ink);
margin: 0;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.12;
text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-hover); }
button { font: inherit; color: inherit; }
:focus-visible {
outline: 3px solid var(--ring);
outline-offset: 3px;
border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }
/* the brand blue ring disappears against the navy panels, so those go white */
.founder :focus-visible,
.tile--dark :focus-visible,
.footer :focus-visible { outline-color: #FFFFFF; }
/* the green floating button needs a ring that reads on green in both themes */
.fab:focus-visible { outline-color: #FFFFFF; box-shadow: 0 0 0 7px rgba(7, 27, 51, .45); }
/* a summary spans the full row, so its ring is drawn just inside it */
.qa > summary:focus-visible { outline-offset: -3px; border-radius: var(--r-sm); }
/* fields already carry a soft ring for pointer focus; keyboard focus gets the
full outline instead of both at once */
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
outline: 3px solid var(--ring); outline-offset: 2px; box-shadow: none;
}
/* focusing the link inside a card lights the whole card, so it is obvious
which one is being acted on */
.service:has(:focus-visible) { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.sprite { display: none; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0;
margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
z-index: 400; background: var(--cta); color: var(--on-cta);
padding: .75rem 1.25rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
font-weight: 700; text-decoration: none; transition: transform .18s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); color: var(--on-cta); }
/* --------------------------------------------------------- 3. layout atoms */
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--soft { background: var(--bg-soft); }
.section--sunk { background: var(--bg-sunk); }
.eyebrow {
display: inline-flex; align-items: center; gap: .5rem;
font-family: var(--font-body);
font-size: .75rem; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase;
color: var(--accent);
margin-bottom: 1rem;
}
.h2 { font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.75rem); }
.h3 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.375rem); font-weight: 600; }
.lede {
font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
color: var(--ink-2);
max-width: 62ch;
}
.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section-head .h2 + .lede { margin-top: 1.5rem; }
/* a short accent rule under every section heading that draws itself on reveal.
it is always in the layout, so nothing shifts when it animates */
.section-head .h2::after {
content: ""; display: block;
width: 68px; height: 3px; margin-top: 1.125rem; border-radius: 999px;
background: linear-gradient(90deg, var(--accent), var(--brand));
transform: scaleX(0); transform-origin: left center;
transition: transform .7s var(--ease) .12s;
}
.section-head.is-in .h2::after,
html:not(.js) .section-head .h2::after { transform: scaleX(1); }
/* ------------------------------------------------------------- 4. buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: .5rem; white-space: nowrap;
padding: .875rem 1.5rem;
border-radius: var(--r-pill);
border: 1.5px solid transparent;
font-family: var(--font-body);
font-size: 1rem; font-weight: 700; letter-spacing: -0.005em;
text-decoration: none; cursor: pointer;
transition: background-color .2s var(--ease), border-color .2s var(--ease),
color .2s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease);
}
.btn svg { width: 1.25em; height: 1.25em; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn--cta {
background: var(--cta); color: var(--on-cta); border-color: var(--cta);
box-shadow: 0 8px 22px rgba(208, 48, 61, .28);
}
.btn--cta:hover {
background: var(--cta-hover); border-color: var(--cta-hover); color: var(--on-cta);
box-shadow: 0 12px 28px rgba(208, 48, 61, .34);
}
.btn--ghost {
background: transparent; color: var(--ink); border-color: var(--control-line);
}
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--surface-2); }
.btn--onDark {
background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .4);
}
.btn--onDark:hover { background: #fff; color: var(--navy-900); border-color: #fff; }
.btn--sm { padding: .625rem 1.125rem; font-size: .9375rem; }
.btn--block { width: 100%; }
/* text link with a trailing arrow */
.link-arrow {
display: inline-flex; align-items: center; gap: .375rem;
font-weight: 700; font-size: .9375rem; text-decoration: none;
color: var(--brand);
}
.link-arrow svg { width: 1.05em; height: 1.05em; transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }
/* -------------------------------------------------------------- 5. header */
/* watched by IntersectionObserver: once this leaves the viewport the sticky
header has lifted off the top of the page and earns its shadow */
#stickySentinel { position: absolute; top: 0; height: 1px; width: 100%; }
.header {
position: sticky; top: 0; z-index: var(--z-header);
background: var(--bg); /* fallback: a solid bar beats a transparent one */
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid transparent;
transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
@supports not (backdrop-filter: blur(4px)) { .header { background: var(--bg); } }
@media (prefers-reduced-transparency: reduce) {
.header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.header.is-stuck {
border-bottom-color: var(--line);
box-shadow: var(--shadow-sm);
background: color-mix(in srgb, var(--bg) 94%, transparent);
backdrop-filter: saturate(190%) blur(18px);
-webkit-backdrop-filter: saturate(190%) blur(18px);
}
@supports not (backdrop-filter: blur(4px)) { .header.is-stuck { background: var(--bg); } }
@media (prefers-reduced-transparency: reduce) {
.header.is-stuck { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.header__inner {
display: flex; align-items: center; justify-content: space-between;
gap: 1.5rem; height: var(--header-h);
}
.header__actions { display: flex; align-items: center; gap: .625rem; flex: none; }
@media (min-width: 1024px) { .nav { margin-left: auto; } }
@media (max-width: 640px) { :root { --header-h: 64px; } }
/* ------------------------------------------------------- 5b. theme toggle */
/* With no JavaScript at all the button is taken out of the layout entirely.
When scripting is on, its space is reserved from the first paint but it
stays invisible and unfocusable until main.js has wired it and set its
pressed state, so a dead or mislabelled control is never shown and the
header does not shift when it appears. */
html:not(.js) .theme-toggle { display: none; }
html.js .theme-toggle { visibility: hidden; }
html.js.theme-ready .theme-toggle { visibility: visible; }
.theme-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; flex: none;
border-radius: var(--r-pill);
border: 1.5px solid var(--control-line);
background: transparent; color: var(--ink-2); cursor: pointer;
transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.theme-toggle:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-tint); }
.theme-toggle__icons { position: relative; display: block; width: 22px; height: 22px; }
.theme-toggle__icons svg {
position: absolute; inset: 0; width: 22px; height: 22px;
transition: opacity .3s var(--ease), transform .45s var(--ease);
}
/* light theme offers the moon, dark theme offers the sun */
.theme-toggle__sun { opacity: 0; transform: rotate(-90deg) scale(.5); }
.theme-toggle__moon { opacity: 1; transform: none; }
[data-theme="dark"] .theme-toggle__sun { opacity: 1; transform: none; }
[data-theme="dark"] .theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(.5); }
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
/* The mark is a background image, not an ![]()
, because only the declaration
that actually wins is ever fetched. Two ![]()
s toggled with display:none
would download both marks on every load. Light is the base, so the light
mark is what a visitor with no JavaScript gets, and the theme bootstrap in
has already set data-theme before first paint, so dark never flashes.
Sizes are fixed, so swapping the image cannot shift the header. */
.brand__logo {
display: block; width: 239px; height: 38px;
background: url("../img/logo-wide-400.png") left center / contain no-repeat;
background-image: -webkit-image-set(url("../img/logo-wide-400.png") 1x, url("../img/logo-wide-760.png") 2x);
background-image: image-set(url("../img/logo-wide-400.png") 1x, url("../img/logo-wide-760.png") 2x);
}
[data-theme="dark"] .brand__logo {
background-image: url("../img/logo-wide-white-400.png");
background-image: -webkit-image-set(url("../img/logo-wide-white-400.png") 1x, url("../img/logo-wide-white-760.png") 2x);
background-image: image-set(url("../img/logo-wide-white-400.png") 1x, url("../img/logo-wide-white-760.png") 2x);
}
@media (max-width: 640px) { .brand__logo { width: 201px; height: 32px; } }
/* forced-colours modes drop background images, so the name comes back as text */
@media (forced-colors: active) {
.brand__logo { background: none; width: auto; height: auto; }
.brand__logo::after {
content: "A.S. Associates";
font-family: var(--font-display); font-weight: 700;
font-size: 1.125rem; letter-spacing: -0.02em;
}
}
.nav { display: flex; align-items: center; gap: 2rem; }
.nav__list { display: flex; align-items: center; gap: 1.75rem; }
.nav__link {
position: relative; text-decoration: none; color: var(--ink-2);
font-size: .9375rem; font-weight: 600; padding-block: .25rem;
transition: color .18s var(--ease);
}
.nav__link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
background: var(--accent); border-radius: 2px;
transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease);
}
.nav__link:hover, .nav__link[aria-current="true"] { color: var(--ink); }
.nav__link:hover::after, .nav__link[aria-current="true"]::after { transform: scaleX(1); }
.nav__toggle {
display: none; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: var(--r-pill);
border: 1.5px solid var(--control-line); background: transparent; cursor: pointer;
}
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }
@media (max-width: 1023px) {
.nav__toggle { display: inline-flex; }
.header__cta { display: none; }
.nav {
position: fixed; inset: var(--header-h) 0 auto; z-index: var(--z-drawer);
display: block; background: var(--bg);
border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg);
padding: 1rem var(--gutter) 1.75rem;
max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
visibility: hidden; opacity: 0; transform: translateY(-8px);
transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
/* the scrim is painted as a shadow so the drawer's own overflow cannot clip
it, and so it adds no scrollable area inside the drawer */
.nav.is-open {
visibility: visible; opacity: 1; transform: none;
box-shadow: var(--shadow-lg), 0 100vh 0 100vh rgba(7, 27, 51, .42);
}
.nav__list { display: block; }
.nav__list li + li { border-top: 1px solid var(--line); }
.nav__link { display: block; padding: .9375rem 0; font-size: 1.0625rem; }
.nav__link::after { display: none; }
/* the sliding underline has nowhere to go in the drawer, so the current
section is marked with colour instead */
.nav__link[aria-current="true"] { color: var(--brand); }
.nav__drawer-cta { display: block; margin-top: 1.25rem; }
}
@media (min-width: 1024px) { .nav__drawer-cta { display: none; } }
/* ---------------------------------------------------------------- 6. hero */
.hero {
position: relative; overflow: hidden;
padding-top: clamp(3rem, 5vw, 4.5rem);
padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
.hero::before {
content: ""; position: absolute; inset: -20% -10% auto -25%; height: 78%;
background:
radial-gradient(48% 60% at 18% 32%, color-mix(in srgb, var(--azure-500) 16%, transparent), transparent 70%),
radial-gradient(38% 52% at 78% 8%, color-mix(in srgb, var(--coral-500) 11%, transparent), transparent 72%);
pointer-events: none; z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
/* Ambient mesh: very soft brand blobs drifting behind the hero. The child
selector outranks the `.hero > *` stacking rule above rather than relying on
coming later in the file with the same weight. */
.hero > .hero__aura {
position: absolute; z-index: 0; pointer-events: none;
inset: -28% -18% auto -18%; height: 92%;
background:
radial-gradient(30% 36% at 24% 44%, color-mix(in srgb, var(--azure-500) 20%, transparent), transparent 68%),
radial-gradient(26% 32% at 74% 20%, color-mix(in srgb, var(--coral-500) 15%, transparent), transparent 70%),
radial-gradient(22% 28% at 54% 78%, color-mix(in srgb, var(--navy-700) 12%, transparent), transparent 72%);
opacity: .85;
}
[data-theme="dark"] .hero > .hero__aura { opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
.hero > .hero__aura { will-change: transform; animation: auraDrift 34s ease-in-out infinite alternate; }
}
@keyframes auraDrift {
from { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(2.5%, 1.5%, 0) scale(1.06); }
to { transform: translate3d(-2%, -1%, 0) scale(1.02); }
}
.hero__grid {
display: grid; gap: clamp(2.5rem, 5vw, 4rem);
grid-template-columns: 1fr;
align-items: center;
}
@media (min-width: 900px) {
.hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(3rem, 5vw, 5rem); }
}
.hero__title {
font-size: clamp(2.25rem, 1.35rem + 3.9vw, 4rem);
font-weight: 600; letter-spacing: -0.032em; line-height: 1.06;
max-width: 15ch;
}
.hero__title em {
position: relative;
font-style: normal; font-weight: 700;
background: linear-gradient(96deg, var(--navy-700) 0%, var(--azure-500) 62%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* the highlighted phrase draws its own underline once, shortly after load */
.hero__title em::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -.02em;
height: .075em; min-height: 3px; border-radius: 999px;
background: linear-gradient(90deg, var(--accent), var(--azure-500));
transform: scaleX(0); transform-origin: left center;
animation: emSweep .85s var(--ease) 780ms forwards;
}
@keyframes emSweep { to { transform: scaleX(1); } }
[data-theme="dark"] .hero__title em {
background: linear-gradient(96deg, #7FC7F5 0%, #4FA8E6 70%);
-webkit-background-clip: text; background-clip: text;
}
.hero__lede { margin-top: 1.375rem; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); color: var(--ink-2); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2.25rem; }
/* slim trust strip: nothing here that is not already stated elsewhere on the page */
.trust {
display: flex; flex-wrap: wrap; gap: .5rem .625rem;
margin-top: 2.25rem; padding-top: 1.75rem;
border-top: 1px solid var(--line);
max-width: 40rem;
}
.trust__item {
display: inline-flex; align-items: center; gap: .4375rem;
padding: .375rem .75rem .375rem .5625rem;
border: 1px solid var(--line); border-radius: var(--r-pill);
background: var(--surface-2);
font-size: .8125rem; font-weight: 600; color: var(--ink-2);
transition: border-color .2s var(--ease), color .2s var(--ease);
}
.trust__item svg { width: 16px; height: 16px; flex: none; color: var(--brand); }
.trust__item:hover { border-color: var(--brand); color: var(--ink); }
/* ------------------------------------------------- 6b. hero entrance (load)
The portrait is the likely Largest Contentful Paint element, so it animates
on transform alone: an element held at opacity 0 is not a paint candidate
and would push the LCP timestamp out by the length of the delay. The h1
starts with no delay for the same reason. */
@media (prefers-reduced-motion: no-preference) {
html.js [data-hero] { animation: heroRise .8s var(--ease) both; animation-delay: var(--hd, 0ms); }
html.js [data-hero-media] { animation: heroMedia .9s var(--ease) 80ms both; }
html.js [data-hero-media] .hero__panel { animation: heroPanel 1s var(--ease) 260ms both; }
}
@keyframes heroRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes heroMedia { from { transform: scale(.94); } to { transform: none; } }
@keyframes heroPanel {
from { opacity: 0; transform: rotate(-2.5deg) translate(20px, 20px); }
to { opacity: 1; transform: rotate(-2.5deg); }
}
/* portrait sitting on an offset brand panel */
.hero__media { justify-self: center; width: 100%; max-width: 460px; }
.hero__figure { margin: 0; }
.hero__frame { position: relative; }
.hero__panel {
position: absolute; inset: 14% -22px -22px 14%;
background: var(--panel-dark); border-radius: var(--r-lg);
transform: rotate(-2.5deg);
}
[data-theme="dark"] .hero__panel { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.hero__figure img {
position: relative; z-index: 1;
width: 100%; border-radius: var(--r-lg);
box-shadow: var(--shadow-lg);
background: var(--bg-sunk);
aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 12%;
}
.hero__caption {
margin-top: 3rem; font-size: .875rem; color: var(--ink-3);
display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.hero__caption b { color: var(--ink); font-weight: 700; font-size: .9375rem; }
@media (max-width: 899px) {
.hero__media { max-width: 380px; }
.hero__panel { inset: 14% -16px -16px 12%; }
.hero__caption { margin-top: 2.5rem; }
}
/* ---------------------------------------------------------- 7. stats band */
.stats {
border-block: 1px solid var(--line);
background: var(--bg-soft);
padding-block: clamp(2.25rem, 4vw, 3rem);
}
.stats__grid {
display: grid; gap: clamp(1.5rem, 3vw, 2rem);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 860px) { .stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { display: flex; flex-direction: column; gap: .25rem; }
@media (min-width: 860px) {
.stat + .stat { padding-left: clamp(1.5rem, 3vw, 2.25rem); border-left: 1px solid var(--line-strong); }
}
.stat__num {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(2rem, 1.4rem + 2.1vw, 2.875rem); line-height: 1;
letter-spacing: -0.03em; color: var(--ink);
/* fixed-width digits so a counting number does not jitter its own width */
font-variant-numeric: tabular-nums;
}
.stat__num span { color: var(--accent); }
/* the figure itself keeps the heading colour, and is a block box so main.js can
pin its width to the final value before the count-up starts */
.stat__num .stat__count { display: inline-block; color: var(--ink); text-align: left; }
.stat__label { font-size: .9375rem; color: var(--ink-2); line-height: 1.4; }
/* ----------------------------------------------------- 8. expertise bento */
.bento {
display: grid; gap: clamp(1rem, 2vw, 1.5rem);
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.bento__a { grid-column: span 7; }
.bento__b { grid-column: span 5; }
.bento__c { grid-column: span 12; }
}
.tile {
position: relative; overflow: hidden;
border-radius: var(--r-lg); border: 1px solid var(--line);
background: var(--surface);
padding: clamp(1.75rem, 3.2vw, 2.5rem);
}
.tile__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 52px; height: 52px; border-radius: var(--r-sm);
background: var(--brand-tint);
color: var(--brand); margin-bottom: 1.25rem;
}
.tile__icon svg { width: 28px; height: 28px; }
.tile .h3 + p { margin-top: .75rem; color: var(--ink-2); }
.tile--tint {
background:
radial-gradient(120% 130% at 4% 0%, color-mix(in srgb, var(--azure-500) 14%, transparent), transparent 62%),
var(--surface);
}
.tile--ghost { background: var(--surface-2); }
.tile--ghost::after {
content: ""; position: absolute; right: -34px; bottom: -46px;
width: 210px; height: 210px; opacity: .06; pointer-events: none;
background: currentColor;
-webkit-mask: url("data:image/png;base64,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") center / contain no-repeat;
mask: url("data:image/png;base64,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") center / contain no-repeat;
color: var(--ink);
}
.tile--dark {
border-color: transparent; background: var(--panel-dark); color: #fff;
display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center;
}
@media (min-width: 820px) { .tile--dark { grid-template-columns: minmax(0, 1fr) auto; } }
.tile--dark .h3, .tile--dark p { color: #fff; }
.tile--dark p { color: rgba(255, 255, 255, .84); max-width: 58ch; }
.tile--dark .tile__icon { background: rgba(255, 255, 255, .18); color: #fff; }
.checklist { margin-top: 1.5rem; display: grid; gap: .625rem; }
.checklist li { display: flex; gap: .625rem; align-items: flex-start; font-size: .9375rem; color: var(--ink-2); }
.checklist svg { width: 20px; height: 20px; flex: none; color: var(--brand); margin-top: 2px; }
/* ------------------------------------------------------------ 9. services */
.filters {
display: flex; flex-wrap: wrap; gap: .5rem;
margin-bottom: clamp(1.75rem, 3vw, 2.25rem);
}
.filter {
padding: .5625rem 1.125rem; border-radius: var(--r-pill);
border: 1.5px solid var(--control-line); background: var(--surface);
color: var(--ink-2); font-size: .9375rem; font-weight: 600; cursor: pointer;
transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.filter:hover { border-color: var(--brand); color: var(--brand); }
.filter[aria-pressed="true"] {
background: var(--navy-900); border-color: var(--navy-900); color: #fff;
}
[data-theme="dark"] .filter[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #04121F; }
html:not(.js) .filters { display: none; }
.services__grid {
display: grid; gap: clamp(.875rem, 1.6vw, 1.125rem);
grid-template-columns: 1fr;
}
@media (min-width: 620px) { .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.service {
position: relative;
display: flex; flex-direction: column; gap: .625rem;
padding: 1.5rem 1.5rem 1.375rem;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--surface);
transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.service[hidden] { display: none; } /* author display beats the UA [hidden] rule */
/* the lift itself lives in section 17d, alongside the other hover polish */
.service:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }
.service__icon { color: var(--brand); }
.service__icon svg { width: 26px; height: 26px; }
.service__name { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.015em; }
.service__desc { font-size: .875rem; color: var(--ink-3); line-height: 1.55; flex: 1; }
.service__ask {
display: inline-flex; align-items: center; gap: .375rem;
font-size: .8125rem; font-weight: 700; color: var(--accent); text-decoration: none;
padding-top: .25rem;
}
.service__ask svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.service__ask:hover { color: var(--accent); text-decoration: underline; }
.service__ask:hover svg { transform: translate(2px, -2px); }
/* padded so the link clears the 24px minimum target on a phone */
.service__ask { padding-block: .5rem; margin-block: -.25rem -.375rem; }
.services__note {
margin-top: clamp(1.75rem, 3vw, 2.5rem);
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 1.25rem; padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
background: var(--surface-2);
}
.services__note p { color: var(--ink-2); font-size: .9375rem; max-width: 52ch; }
.services__note strong { color: var(--ink); }
/* -------------------------------------------------- 10. founder / message */
.founder {
background: var(--panel-dark); color: #fff;
padding-block: clamp(4rem, 8vw, 7rem);
}
.founder__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 940px) { .founder__grid { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); } }
.founder__figure { margin: 0; position: relative; }
.founder__figure img {
width: 100%; border-radius: var(--r-lg);
aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 14%;
box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}
.founder__id { margin-top: 1.25rem; }
.founder__id b { display: block; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: #fff; }
.founder__id span { font-size: .875rem; color: rgba(255, 255, 255, .68); }
.founder .eyebrow { color: #FFAEB5; }
.founder .h2 { color: #fff; }
.founder__quote {
margin: 1.75rem 0 0; padding: 0 0 0 clamp(1.25rem, 3vw, 2rem);
border-left: 3px solid var(--coral-500);
}
.founder__quote p {
font-family: var(--font-display); font-weight: 500;
font-size: clamp(1.25rem, 1.05rem + .85vw, 1.75rem);
line-height: 1.34; letter-spacing: -0.02em; color: #fff;
}
.founder__quote cite { display: block; margin-top: .875rem; font-style: normal; font-size: .875rem; color: rgba(255, 255, 255, .68); }
.founder__body { margin-top: 2rem; display: grid; gap: 1.125rem; }
.founder__body p { color: rgba(255, 255, 255, .82); max-width: 64ch; }
.founder__sign { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .875rem; }
/* ------------------------------------------------------- 11. about / rail */
.about__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 940px) { .about__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.about__prose { display: grid; gap: 1.125rem; }
.about__prose p { color: var(--ink-2); max-width: 62ch; }
.about__prose strong { color: var(--ink); font-weight: 700; }
.rail { position: relative; display: grid; gap: 1.75rem; padding-left: 2.25rem; }
.rail::before {
content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px;
background: linear-gradient(180deg, var(--azure-500), color-mix(in srgb, var(--coral-500) 70%, transparent));
border-radius: 2px; opacity: .55;
}
.rail__item { position: relative; }
.rail__item::before {
content: ""; position: absolute; left: -2.25rem; top: .45rem;
width: 12px; height: 12px; border-radius: 50%;
background: var(--bg); border: 3px solid var(--brand);
transform: translateX(6px);
}
.rail__title { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.015em; }
.rail__text { font-size: .9375rem; color: var(--ink-3); margin-top: .25rem; }
/* ------------------------------------------------------------ 12. process */
.process { display: grid; gap: clamp(2rem, 4vw, 2.5rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .process { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); } }
.step { position: relative; padding-top: 3.75rem; }
.step__icon {
position: absolute; top: 0; left: 0;
display: inline-flex; align-items: center; justify-content: center;
width: 52px; height: 52px; border-radius: var(--r-pill);
background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--brand);
}
.step__icon svg { width: 25px; height: 25px; }
@media (min-width: 760px) {
.step::after {
content: ""; position: absolute; top: 26px; left: 60px; right: -1rem; height: 1.5px;
background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px);
}
.step:last-child::after { display: none; }
}
.step__title { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.015em; }
.step__text { margin-top: .5rem; font-size: .9375rem; color: var(--ink-3); }
/* ---------------------------------------------------------------- 13. faq */
.faq { max-width: 52rem; }
.qa {
border-bottom: 1px solid var(--line);
background: transparent;
}
.qa:first-of-type { border-top: 1px solid var(--line); }
.qa > summary {
position: relative; display: block;
padding: 1.375rem 3rem 1.375rem .25rem; cursor: pointer; list-style: none;
font-family: var(--font-display); font-weight: 600;
font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); letter-spacing: -0.015em;
color: var(--ink); transition: color .18s var(--ease);
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover { color: var(--brand); }
.qa__caret {
position: absolute; right: .25rem; top: 1.5rem;
width: 24px; height: 24px; color: var(--brand); transition: transform .25s var(--ease);
}
.qa[open] .qa__caret { transform: rotate(180deg); }
.qa__body { padding: 0 3rem 1.5rem .25rem; }
.qa__body p { color: var(--ink-2); font-size: 1rem; }
.qa__body p + p { margin-top: .75rem; }
@supports (interpolate-size: allow-keywords) {
@media (prefers-reduced-motion: no-preference) {
:root { interpolate-size: allow-keywords; }
.qa::details-content {
block-size: 0; opacity: 0; overflow: hidden;
transition: block-size .34s var(--ease), opacity .26s var(--ease) .04s,
content-visibility .34s allow-discrete;
}
.qa[open]::details-content { block-size: auto; opacity: 1; }
}
}
/* where ::details-content cannot be animated, the answer still fades and
slides in rather than appearing abruptly */
@supports not (interpolate-size: allow-keywords) {
@media (prefers-reduced-motion: no-preference) {
.qa[open] .qa__body { animation: qaIn .3s var(--ease) both; }
}
}
@keyframes qaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* ------------------------------------------------------------ 14. contact */
.contact__grid { display: grid; gap: clamp(2.5rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 940px) { .contact__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.form { display: grid; gap: 1.125rem; }
.form__legend { font-size: .8125rem; color: var(--ink-3); }
.form__legend .req { color: var(--accent); font-weight: 700; }
.field { display: grid; gap: .4375rem; }
.field > label { font-size: .875rem; font-weight: 700; color: var(--ink); }
.field > label .req { color: var(--accent); }
.field__hint { font-size: .8125rem; color: var(--ink-3); }
.input, .select, .textarea {
width: 100%; padding: .8125rem 1rem;
font-family: var(--font-body); font-size: 1rem; color: var(--ink);
background: var(--surface); border: 1.5px solid var(--control-line);
border-radius: var(--r-sm); transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus {
outline: none; border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-ring);
}
.textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
.select {
appearance: none; padding-right: 2.75rem; cursor: pointer;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 1.25rem) 55%, calc(100% - 1rem) 55%;
background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.field__error {
display: none; align-items: center; gap: .375rem;
font-size: .8125rem; font-weight: 600; color: var(--accent);
}
.field__error svg { width: 15px; height: 15px; flex: none; }
.field.is-invalid .field__error { display: flex; }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--accent); }
.field__error[hidden] { display: none; } /* author display beats the UA rule */
.form__foot { display: grid; gap: .75rem; margin-top: .25rem; }
.form__note { font-size: .8125rem; color: var(--ink-3); }
.contact__cards { display: grid; gap: 1rem; }
.info {
display: flex; gap: 1rem; align-items: flex-start;
padding: 1.25rem 1.375rem; border: 1px solid var(--line);
border-radius: var(--r-sm); background: var(--surface);
text-decoration: none; color: inherit;
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
a.info:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); color: inherit; }
.info__icon {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px; border-radius: var(--r-pill);
background: var(--brand-tint); color: var(--brand);
}
.info__icon svg { width: 21px; height: 21px; }
.info__k, .info__v, .info__sub { display: block; }
.info__k { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.info__v {
font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem;
line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); margin-top: .25rem;
overflow-wrap: anywhere;
}
.info__sub { font-size: .875rem; line-height: 1.45; color: var(--ink-3); margin-top: .25rem; }
.map {
margin-top: clamp(2.5rem, 5vw, 3.5rem);
border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
background: var(--bg-sunk);
}
.map iframe { width: 100%; height: clamp(260px, 38vw, 400px); border: 0; }
/* tone the map down in dark mode rather than inverting it, which would
scramble the map's own colour coding */
[data-theme="dark"] .map iframe { filter: brightness(.86) contrast(1.04); }
.map__foot {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
padding: 1rem 1.25rem; border-top: 1px solid var(--line); background: var(--surface);
font-size: .875rem; color: var(--ink-2);
}
/* ------------------------------------------------------------- 15. footer */
/* the footer is dark in both themes, so its white logo and light-on-dark text
stay correct either way */
.footer { background: var(--navy-950); color: rgba(255, 255, 255, .74); }
[data-theme="dark"] .footer { background: #050F1D; }
.footer a { color: rgba(255, 255, 255, .74); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__top {
display: grid; gap: clamp(2rem, 4vw, 3rem);
padding-block: clamp(3rem, 6vw, 4.5rem);
grid-template-columns: 1fr;
}
@media (min-width: 700px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer__logo { height: 46px; width: auto; margin-bottom: 1.5rem; }
.footer__blurb { font-size: .9375rem; max-width: 34ch; }
.footer h3 {
font-family: var(--font-body); font-size: .75rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 1rem;
}
.footer__list { display: grid; gap: .625rem; font-size: .9375rem; }
.footer__contact { display: grid; gap: .875rem; font-size: .9375rem; }
.footer__contact div { display: flex; gap: .625rem; align-items: flex-start; }
.footer__contact svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: rgba(255, 255, 255, .55); }
.footer__cta { margin-top: 1.375rem; }
.footer__bottom {
border-top: 1px solid rgba(255, 255, 255, .13);
padding-block: 1.75rem;
display: grid; gap: 1rem; font-size: .8125rem; line-height: 1.6;
}
.footer__legal { color: rgba(255, 255, 255, .55); max-width: 90ch; }
.footer__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; align-items: center; }
.footer__meta a { padding-block: .375rem; }
/* -------------------------------------------------------- 16. floating CTA */
.fab {
position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
z-index: var(--z-fab);
display: inline-flex; align-items: center; gap: .625rem;
padding: .875rem 1.25rem; border-radius: var(--r-pill);
background: #147A3D; color: #fff; text-decoration: none;
font-weight: 700; font-size: .9375rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, .26);
transition: transform .25s var(--ease), background-color .2s var(--ease),
opacity .25s var(--ease), visibility .25s;
}
.fab:hover { background: #0F6231; color: #fff; transform: translateY(-2px); }
.fab:active { transform: translateY(0); }
.fab svg { width: 24px; height: 24px; flex: none; }
/* the footer carries its own WhatsApp button, so the floating one steps aside */
.fab.is-hidden { opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; }
@media (max-width: 560px) {
.fab { padding: .875rem; }
.fab span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fab:hover { transform: none; } }
/* ------------------------------------------------------------ 17. reveals */
@media (prefers-reduced-motion: no-preference) {
html.js [data-reveal] {
opacity: 0; transform: translateY(18px);
transition: opacity .6s var(--ease), transform .6s var(--ease);
transition-delay: var(--d, 0ms);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }
}
/* ------------------------------------------- 17b. scroll progress indicator */
.progress {
position: fixed; inset: 0 0 auto; height: 3px;
z-index: calc(var(--z-header) + 100);
pointer-events: none; background: transparent;
}
.progress__bar {
display: block; height: 100%; width: 100%;
transform: scaleX(0); transform-origin: 0 50%;
background: linear-gradient(90deg, var(--brand), var(--accent));
}
html:not(.js) .progress { display: none; }
/* ------------------------------------------------ 17c. back to top button */
html:not(.js) .to-top { display: none; }
.to-top {
position: fixed; z-index: var(--z-fab);
left: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
width: 46px; height: 46px; border-radius: var(--r-pill);
display: inline-flex; align-items: center; justify-content: center;
/* the same control border as the nav and theme buttons, which clears 3:1
against the page in both themes; --line-strong is a divider colour and
was far too faint for the edge of an interactive control */
border: 1.5px solid var(--control-line); background: var(--surface);
color: var(--ink-2); cursor: pointer; box-shadow: var(--shadow-sm);
opacity: 0; visibility: hidden; transform: translateY(12px);
transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s,
color .2s var(--ease), border-color .2s var(--ease);
}
.to-top svg { width: 21px; height: 21px; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top.is-visible:hover { color: var(--brand); border-color: var(--brand); transform: translateY(-2px); }
/* --------------------------------------------------- 17d. micro-interactions */
.tile {
transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
/* the reveal rule above pins revealed elements to transform:none, so the hover
lifts on the cards that carry [data-reveal] have to match its weight */
html.js .tile:hover, .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
html.js .service:hover, .service:hover { transform: translateY(-3px); }
.tile--tint:hover, .tile--ghost:hover { border-color: var(--brand-ring); }
.tile__icon, .info__icon, .step__icon {
transition: transform .3s var(--ease), color .2s var(--ease),
background-color .2s var(--ease), border-color .2s var(--ease);
}
.service__icon svg { transition: transform .3s var(--ease); }
.tile:hover .tile__icon,
.service:hover .service__icon svg,
a.info:hover .info__icon,
.step:hover .step__icon { transform: translateY(-2px) scale(1.07); }
.step:hover .step__icon { border-color: var(--brand); }
.info { transition: transform .25s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease); }
a.info:hover { transform: translateY(-3px); }
.checklist svg { transition: transform .25s var(--ease); }
.tile:hover .checklist svg { transform: scale(1.08); }
.filter { transition: background-color .18s var(--ease), color .18s var(--ease),
border-color .18s var(--ease), transform .18s var(--ease); }
.filter:hover { transform: translateY(-1px); }
.filter:active { transform: translateY(0); }
/* the floating WhatsApp button asks for attention every few seconds */
.fab::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
border: 2px solid rgba(20, 122, 61, .55); opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.fab::after { animation: fabPulse 6s var(--ease) 3s infinite; }
}
@keyframes fabPulse {
0%, 70% { transform: scale(1); opacity: 0; }
74% { opacity: .6; }
90%, 100% { transform: scale(1.2); opacity: 0; }
}
/* ------------------------------------------------ 17e. service filtering */
/* the id keeps these ahead of the generic reveal transition on the same cards */
html.js #servicesGrid .service {
transition: opacity .24s var(--ease), transform .24s var(--ease),
border-color .2s var(--ease), box-shadow .2s var(--ease);
}
html.js .service.is-out { opacity: 0; transform: scale(.96) translateY(8px); }
/* --------------------------------------------- 17f. reduced motion sweep */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0ms !important;
transition-duration: .01ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
/* movement on hover goes too, not just its duration */
.btn:hover, .btn:active,
html.js .tile:hover, .tile:hover,
html.js .service:hover, .service:hover,
a.info:hover, .filter:hover,
.to-top.is-visible:hover,
.tile:hover .tile__icon, .tile:hover .checklist svg,
.service:hover .service__icon svg,
a.info:hover .info__icon, .step:hover .step__icon { transform: none; }
.fab::after { display: none; }
}
/* ---------------------------------------------------- 18. small screens */
@media (max-width: 520px) {
body { font-size: 1rem; }
.hero { padding-top: 2.5rem; }
.hero__actions { margin-top: 1.75rem; gap: .75rem; }
.hero__actions .btn { flex: 1 1 100%; }
.trust { margin-top: 1.75rem; padding-top: 1.5rem; }
/* comfortable thumb targets */
.filter { padding: .75rem 1.125rem; }
.btn { padding: .875rem 1.375rem; }
.service { padding: 1.25rem 1.25rem 1.125rem; }
.qa > summary { padding-block: 1.25rem; }
.qa__body { padding-right: 2.25rem; }
.services__note { flex-direction: column; align-items: flex-start; }
.services__note .btn { width: 100%; }
.founder__sign .btn, .tile--dark .btn { width: 100%; }
.map__foot { flex-direction: column; align-items: flex-start; }
}
/* The header bar carries the logo, the theme switch and the menu button. The
two buttons stay at the 44px minimum target; the logo and the gaps give way
instead, which still leaves room at 320px. */
@media (max-width: 400px) {
.header__inner { gap: .5rem; }
.header__actions { gap: .25rem; }
.brand__logo { width: 176px; height: 28px; }
}
@media (max-width: 340px) {
.brand__logo { width: 157px; height: 25px; }
}
/* ------------------------------------------------------------- 19. print */
@media print {
.header, .fab, .map, .nav, .hero__panel,
.progress, .to-top, .hero__aura { display: none !important; }
body { color: #000; background: #fff; font-size: 11pt; }
.section { padding-block: 1rem; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}