/* Variables/Fonts */
:root {
--font-display: "Playfair Display", Georgia, serif;
--font-body: "Arimo", system-ui, sans-serif;
--primary-color: #149dff;
--text-color: white;
--padding-size: 1rem;
--space-xs: 0.25rem; /* 4px */
--space-sm: 0.5rem; /* 8px */
--space-md: 1rem; /* 16px */
--space-lg: 2rem; /* 32px */
--space-xl: 4rem; /* 64px */
/* light sky up top (hero / about run their own backgrounds), then
from the services region down it deepens into rich blues that
hold AA contrast for white text (#1274c4 is ~4.9:1, and every
stop below it is darker) all the way to the footer */
/* a real-sky drift: #61A0F7 easing to #5B8CF9 through close
intermediate steps, the way an actual sky shifts — no hard bands */
--gradient: linear-gradient(
180deg,
#61a0f7 0%,
#609cf7 16%,
#5f98f8 32%,
#5e94f8 48%,
#5d91f8 64%,
#5c8ef9 80%,
#5b8cf9 100%
);
}
/* ==== Modern CSS Reset ==== */
/* 1. Use a more intuitive box-sizing model */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* 2. Remove default margin and padding */
* {
margin: 0;
padding: 0;
}
/* 3. Improve text rendering */
html {
-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
text-size-adjust: 100%;
/* clip on BODY alone doesn't reliably reach the viewport - with it
only there, the page could still pan ~8px sideways at widths with
a scrollbar (the 100vw full-bleed sections). Clip on html closes
the viewport itself. */
overflow-x: clip;
/* nav links glide to their section instead of jump-cutting
(the reduced-motion reset below overrides this to auto) */
scroll-behavior: smooth;
}
/* 4. Set core body defaults */
body {
min-height: 100vh;
line-height: 1.5;
font-family: system-ui, sans-serif;
background-image: var(--gradient);
color: #000;
/* full-bleed 100vw sections overflow by the scrollbar's width;
clip (not hidden) removes that without breaking position:sticky */
overflow-x: clip;
}
/* 5. Remove list styles on ul, ol elements with a list role */
ul[role="list"],
ol[role="list"] {
list-style: none;
}
/* 6. Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}
/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
font: inherit;
}
/* 8. Remove animations/transitions for people who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* SCREEN READERS ONLY */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ------------------*/
section {
width: 100%;
min-height: 100vh;
}
.skyband {
border: 2px solid white;
}
/* ================= */
/* SECTIONS DESIGNED */
/* ================= */
/* SKIP LINK — visually hidden until keyboard focus lands on it, then
it drops in top-left with strong contrast (WCAG 2.4.1 bypass block) */
.skip-link {
position: fixed;
top: var(--space-md);
left: var(--space-md);
z-index: 200; /* above everything, including the open menu */
padding: 0.8em 1.6em;
border-radius: 10px;
background: #1f1e1d;
color: whitesmoke;
font-family: var(--font-body);
font-weight: 700;
text-decoration: none;
outline-offset: 3px;
translate: 0 calc(-100% - var(--space-lg)); /* parked off-screen */
transition: translate 0.25s ease;
}
/* :focus (not :focus-visible) — the skip link must appear for ANY
focus, including assistive tech moving focus programmatically */
.skip-link:focus {
translate: 0 0;
}
/* the MENU button — pinned to the top right, follows the scroll, and
rides on a frosted chip so it stays readable over every section */
/* bare white hamburger - three bars, no pill. The button keeps a
generous hit area; only the bars are visible. */
#menu-toggle {
position: fixed;
top: var(--space-md);
right: var(--space-lg);
z-index: 90; /* above the page, below the open menu (100) */
background: none;
border: none;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
width: 48px;
height: 44px;
padding: var(--space-sm);
color: whitesmoke; /* the bars borrow currentColor, so hover restyles
all three with one property */
cursor: pointer;
transition: color 0.3s ease;
}
#menu-toggle span {
display: block;
width: 100%;
height: 3px;
border-radius: 2px;
background: currentColor;
box-shadow: 0 1px 4px rgba(0, 30, 60, 0.35); /* survives light skies */
}
/* over a light surface the probe (script.js) flips the bars to the
brand blue; declared BEFORE :hover so the gold still wins on tie */
#menu-toggle.on-light {
color: var(--primary-color);
}
#menu-toggle.on-light span {
box-shadow: none; /* the shadow was for light bars on light skies */
}
#menu-toggle:hover,
#menu-toggle:focus-visible {
color: hsl(42, 100%, 55%);
}
#menu-toggle:focus-visible {
outline: 2px solid whitesmoke;
outline-offset: 4px;
}
/* NOTE: no background/backdrop-filter on this button, deliberately -
a fixed element with backdrop-filter flickers and clips during
scroll in some renderers (both the old pill and a trial chip
glitched). Bare bars + drop shadow + the tone probe carry it. */
/* ---- THE FULL-SCREEN MENU ---- */
body.menu-locked {
overflow: hidden; /* the page holds still behind the menu */
}
#site-menu {
position: fixed;
inset: 0;
z-index: 100;
display: grid;
grid-template-columns: 1.4fr 1fr;
align-items: center;
padding: 14vh clamp(var(--space-lg), 8vw, 8rem);
background: linear-gradient(135deg, #ffffff 0%, #eaf6ff 100%);
opacity: 0;
visibility: hidden;
translate: 0 -2.5%;
transition:
opacity 0.45s ease,
translate 0.45s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 0.45s;
}
#site-menu.open {
opacity: 1;
visibility: visible;
translate: 0 0;
transition-delay: 0s;
}
/* vertical MENU label down the left edge */
.menu-label {
position: absolute;
top: 14vh;
left: clamp(var(--space-md), 3.5vw, 3rem);
font-family: var(--font-body);
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.4em;
color: #8b949c;
writing-mode: vertical-rl;
}
/* the close X — the same bare glyph as the about dialog's:
grey at rest, red and raised on hover, no circle */
.menu-close {
position: absolute;
top: var(--space-lg);
right: clamp(var(--space-lg), 6vw, 6rem);
border: none;
background: none;
color: #9a9a9a;
font-size: 2.6rem;
line-height: 1;
cursor: pointer;
transition:
color 0.25s ease,
translate 0.25s ease;
}
.menu-close:hover,
.menu-close:focus-visible {
color: #e03131;
translate: 0 -4px;
}
/* the giant links, staggering in as the menu opens */
.menu-links {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.menu-links a {
font-family: var(--font-body);
font-weight: 800;
font-size: clamp(2.4rem, 6.5vw, 4.8rem);
line-height: 1.15;
color: #1f1e1d;
text-decoration: none;
width: fit-content;
opacity: 0;
translate: 0 22px;
transition:
opacity 0.5s ease,
translate 0.5s cubic-bezier(0.22, 1, 0.36, 1),
color 0.25s ease,
padding-left 0.25s ease;
}
#site-menu.open .menu-links a {
opacity: 1;
translate: 0 0;
}
#site-menu.open .menu-links a:nth-child(1) {
transition-delay: 0.12s;
}
#site-menu.open .menu-links a:nth-child(2) {
transition-delay: 0.18s;
}
#site-menu.open .menu-links a:nth-child(3) {
transition-delay: 0.24s;
}
#site-menu.open .menu-links a:nth-child(4) {
transition-delay: 0.3s;
}
#site-menu.open .menu-links a:nth-child(5) {
transition-delay: 0.36s;
}
.menu-links a:hover,
.menu-links a:focus-visible {
color: var(--primary-color);
padding-left: var(--space-md);
}
/* contact block on the right */
.menu-contact {
justify-self: end;
display: flex;
flex-direction: column;
gap: var(--space-md);
}
/* brand mark on the menu, in the contact links' blue */
.menu-mark {
width: 76px;
height: 76px;
color: var(--primary-color);
margin-bottom: var(--space-sm);
}
.menu-contact a {
font-family: var(--font-body);
font-size: 1.15rem;
color: var(--primary-color);
text-decoration: none;
border-bottom: 2px solid hsl(42, 100%, 55%);
width: fit-content;
padding-bottom: 2px;
transition: color 0.3s ease;
}
.menu-contact a:hover {
color: #0b6bb5;
}
.menu-contact p {
font-family: var(--font-body);
font-size: 0.9rem;
letter-spacing: 0.08em;
color: #8b949c;
}
@media (max-width: 800px) {
#site-menu {
grid-template-columns: 1fr;
align-content: center;
gap: var(--space-xl);
}
.menu-contact {
justify-self: start;
}
}
/* sections FADE IN on arrival from the menu (script.js jumps
instantly, then plays this) — instead of the long glide */
.fade-arrive {
animation: section-arrive 0.9s ease both;
}
@keyframes section-arrive {
from {
opacity: 0;
translate: 0 30px;
}
to {
opacity: 1;
translate: 0 0;
}
}
/* HERO */
#hero {
position: relative; /* hosts the Vanta layer */
overflow: hidden;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
height: 100dvh;
}
/* the animated cloudscape canvas fills the hero, behind everything */
.hero-vanta {
position: absolute;
inset: 0;
z-index: 0;
}
/* hero content rides above the canvas (positioned elements would
otherwise paint under an absolutely-positioned sibling). The scroll
cue is excluded — the ID weight here would override the mobile
layer's position: absolute on it; grid items honour z-index
without needing a position anyway. */
#hero > :not(.hero-vanta):not(.hero-scroll) {
position: relative;
z-index: 1;
}
.hero-scroll {
z-index: 1;
}
/* the legibility scrim: a diagonal navy wash anchored where the type
sits, dissolving before it reaches the sun side — the clouds stay
vivid on the right while the text zone always has contrast */
#hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 0; /* above the canvas, below the z-1 content */
background: linear-gradient(
75deg,
rgba(7, 28, 48, 0.55) 0%,
rgba(7, 28, 48, 0.3) 38%,
rgba(7, 28, 48, 0) 64%
);
pointer-events: none;
}
/* the editorial kicker crowning the masthead — first to rise */
.hero-kicker {
grid-column: 1 / 10;
grid-row: 6;
align-self: end;
margin-bottom: 0;
opacity: 0;
translate: 0 18px;
animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}
/* brand mark, top left of the hero (the old header's job) */
.hero-logo {
grid-column: 1 / 8;
grid-row: 1 / 3;
align-self: start;
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md) 0 0 var(--space-md);
}
.hero-logo .hero-mark {
width: 54px;
height: 54px;
color: whitesmoke; /* the mark inherits via currentColor */
filter: drop-shadow(0 4px 10px rgba(0, 30, 60, 0.35));
}
.hero-logo span {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.35rem;
letter-spacing: 0.04em;
color: whitesmoke;
text-shadow: 0 2px 8px rgba(0, 30, 60, 0.35);
}
#hero h1 {
font-family: var(--font-display);
font-weight: 700;
grid-column: 1 / 10; /* offset from left */
grid-row: 7;
font-size: clamp(2.5rem, 6vw + 1rem, 5.5rem);
line-height: 1.15;
/* the masthead wears the engraved-glass fill from the house style:
bright-to-ice gradient through the glyphs with a navy cut beneath
(drop-shadow follows the letterforms; text-shadow would bleed
through the gradient-clipped fill) */
background: linear-gradient(
180deg,
#ffffff 0%,
rgba(255, 255, 255, 0.92) 55%,
rgba(214, 236, 255, 0.78) 100%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 2px 2px rgba(7, 28, 48, 0.65))
drop-shadow(0 10px 26px rgba(7, 28, 48, 0.45));
opacity: 0;
translate: 0 30px;
animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
/* the deck: an editorial hairline rules it off from the masthead.
Scoped by id — a bare `#hero p` would also capture the kicker
paragraph and drag it into this grid row. */
#hero-description {
font-family: var(--font-body);
font-weight: 400;
color: whitesmoke;
grid-column: 3 / 11; /* shifted right, overlaps h1's columns visually */
grid-row: 8;
align-self: start;
font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
line-height: 1.5;
font-style: italic;
border-top: 1px solid rgba(255, 255, 255, 0.65);
padding-top: var(--space-sm);
text-shadow: 0 2px 10px rgba(7, 28, 48, 0.6);
opacity: 0;
translate: 0 24px;
animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;
}
/* "new heights" carries the sunlight — solid gold glyphs punch
through the gradient fill around them */
.bold {
font-weight: 700;
font-style: italic;
color: hsl(42, 100%, 62%);
}
/* the invitation under the tagline */
.hero-cta {
grid-column: 3 / 7;
grid-row: 9;
justify-self: start;
align-self: start;
padding: 0.8em 2em;
border-radius: 30px;
background: #1f1e1d;
color: whitesmoke;
font-family: var(--font-body);
font-weight: 700;
letter-spacing: 0.06em;
text-decoration: none;
box-shadow: 0 10px 26px rgba(0, 30, 60, 0.35);
opacity: 0;
translate: 0 20px;
animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
transition:
background-color 0.3s ease,
color 0.3s ease,
box-shadow 0.3s ease;
}
.hero-cta:hover,
.hero-cta:focus-visible {
background: hsl(42, 100%, 55%);
color: #1f1e1d;
box-shadow: 0 14px 30px rgba(255, 194, 51, 0.4);
}
@keyframes hero-rise {
to {
opacity: 1;
translate: 0 0;
}
}
/* scroll cue, bottom centre */
.hero-scroll {
grid-column: 6 / 8;
grid-row: 12;
justify-self: center;
align-self: end;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
padding-bottom: var(--space-md);
color: rgba(245, 245, 245, 0.85);
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.32em;
text-indent: 0.32em;
}
.hero-scroll i {
width: 2px;
height: 44px;
background: rgba(245, 245, 245, 0.85);
border-radius: 1px;
transform-origin: top;
animation: scroll-drop 1.9s ease-in-out infinite;
}
@keyframes scroll-drop {
0% {
scale: 1 0;
}
45% {
scale: 1 1;
transform-origin: top;
}
100% {
scale: 1 0;
transform-origin: bottom;
}
}
/* ABOUT US */
/* ---- WHO WE ARE: full-viewport statement panel ----
Sweeps in from the left edge as you scroll to it. */
/* the observed wrapper — stays in the flow so it can intersect */
.who-wrap {
width: 100vw;
min-height: 108vh; /* fills the viewport with a little extra */
margin-left: calc(50% - 50vw); /* break out of any parent padding */
overflow: hidden; /* hides the panel while it waits off to the left */
}
/* styled to MATCH THE MENU: the same white-to-ice wash, the same
heavy dark Arimo, grey label, gold accents. Lazy reveal — hidden
until scrolled to, then a clean fade-up instead of the old sweep. */
.who-panel {
--who-pad: clamp(var(--space-lg), 8vw, 10rem);
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
min-height: 108vh;
padding: var(--space-xl) var(--who-pad);
background: linear-gradient(135deg, #ffffff 0%, #eaf6ff 100%);
box-shadow: 0 24px 60px rgba(0, 30, 60, 0.18);
overflow: hidden;
opacity: 0;
translate: 0 60px;
transition:
opacity 0.9s ease,
translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.who-wrap.in-view .who-panel {
translate: 0 0;
opacity: 1;
}
/* the widely-tracked label in the top left, menu-label grey */
.who-eyebrow {
position: absolute;
top: clamp(var(--space-lg), 6vh, 4rem);
left: clamp(var(--space-lg), 8vw, 10rem);
font-family: var(--font-body);
font-weight: 700;
font-size: clamp(0.75rem, 0.5vw + 0.6rem, 1rem);
text-transform: uppercase;
letter-spacing: 0.55em; /* the W H O W E A R E spacing */
word-spacing: 0.5em;
color: #8b949c;
opacity: 0;
translate: 0 -14px;
transition:
opacity 0.7s ease 0.35s,
translate 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}
.who-wrap.in-view .who-eyebrow {
opacity: 1;
translate: 0 0;
}
/* a small rule under the label, for weight */
.who-eyebrow::after {
content: "";
position: absolute;
left: 0;
bottom: -0.9rem;
width: 64px;
height: 2px;
background: hsl(42, 100%, 60%);
}
/* ---- THE ANNOTATED STATEMENT ----
Sequence: the furniture loads first (bar drawing down, cog turning
in, vertical caption, crosshair) while the ARROW stretches in from
the right (0.25s - 1.15s). When it lands, the words fill in a few
at a time (script.js staggers them), then the dashed rule draws
itself in steps, then the closer fades in whole. */
.who-statement {
position: relative; /* anchors the bar, arrow and annotations */
max-width: 26ch;
font-family: var(--font-body);
font-weight: 800;
font-size: clamp(1.6rem, 3.6vw + 0.5rem, 3.8rem);
line-height: 1.2;
color: #1f1e1d;
}
.who-line {
display: block;
}
/* the ink bar ruling the opening lines, drawn top-down */
.who-statement::before {
content: "";
position: absolute;
left: clamp(-3rem, -2.2vw, -1.2rem);
top: 0.25em;
width: 5px;
height: 55%;
background: #1f1e1d;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}
.who-wrap.in-view .who-statement::before {
transform: scaleY(1);
}
/* the arrow: head leads, shaft stretches in from the right edge */
.who-arrow {
position: absolute;
top: 0.28em;
right: calc(-1 * var(--who-pad, 4rem));
height: 20px;
width: 0;
background: #1f1e1d;
opacity: 0;
transition:
width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s,
opacity 0.2s ease 0.25s;
}
.who-arrow::before {
content: "";
position: absolute;
left: -30px;
top: 50%;
translate: 0 -50%;
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
border-right: 30px solid #1f1e1d;
}
.who-wrap.in-view .who-arrow {
width: clamp(90px, 16vw, 340px);
opacity: 1;
}
/* the words, wrapped by script.js — each fades in on its own delay */
.who-word {
opacity: 0;
transition: opacity 0.28s ease;
}
.who-wrap.in-view .who-word {
opacity: 1;
}
/* the dashed rule: draws left-to-right in steps, like pen strokes */
.who-dots {
display: block;
height: 0;
margin: 0.35em 0;
margin-right: calc(-1 * var(--who-pad, 4rem));
border-top: 5px dotted #1f1e1d;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.8s steps(16, end) 2.6s;
}
.who-wrap.in-view .who-dots {
transform: scaleX(1);
}
/* the closer arrives whole, after the rule finishes drawing */
.who-statement .who-line:last-child {
opacity: 0;
translate: 0 14px;
transition:
opacity 0.6s ease 3.5s,
translate 0.6s cubic-bezier(0.22, 1, 0.36, 1) 3.5s;
}
.who-wrap.in-view .who-line:last-child {
opacity: 1;
translate: 0 0;
}
/* ---- the annotation furniture ---- */
.who-cog {
position: absolute;
left: -52px;
top: 56%;
width: clamp(80px, 9vw, 130px);
height: auto;
opacity: 0;
rotate: -50deg;
transition:
opacity 0.5s ease 0.3s,
rotate 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.who-cog .cog-body {
fill: #1f1e1d;
}
.who-cog .cog-hole {
fill: #edf5fd; /* reads as a cut-out against the panel */
}
.who-wrap.in-view .who-cog {
opacity: 1;
rotate: 0deg;
}
.who-vertical {
position: absolute;
right: calc(var(--who-pad, 4rem) * 0.3);
top: 30%;
writing-mode: vertical-rl;
font-family: var(--font-body);
font-weight: 600;
font-style: italic;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: clamp(0.9rem, 1.1vw, 1.3rem);
color: #1f1e1d;
opacity: 0;
translate: 0 -18px;
transition:
opacity 0.6s ease 0.45s,
translate 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
}
.who-wrap.in-view .who-vertical {
opacity: 1;
translate: 0 0;
}
/* the crosshair tick, bottom right */
.who-cross {
position: absolute;
right: calc(var(--who-pad, 4rem) * 0.45);
bottom: 7%;
width: 2px;
height: 110px;
background: #1f1e1d;
opacity: 0;
transition: opacity 0.5s ease 0.55s;
}
.who-cross::before {
content: "";
position: absolute;
left: -32px;
bottom: 28px;
width: 66px;
height: 2px;
background: #1f1e1d;
}
.who-wrap.in-view .who-cross {
opacity: 1;
}
/* reduced motion: everything arrives at once — the global reset kills
durations but NOT delays, so zero them explicitly */
@media (prefers-reduced-motion: reduce) {
.who-panel,
.who-panel *,
.who-panel *::before {
transition-delay: 0s !important;
}
}
@media (min-width: 900px) {
.who-statement {
max-width: 34ch;
}
}
/* ---- THE BENTO GLASS STAGE ----
Deep-sky band with a live constellation canvas behind two rails of
frosted glass panels. The rails counter-scroll: script.js slides the
right one up faster so it visibly passes the left. */
/* the scroll runway: the page can't move past the rails until their
travel completes inside it — same pin trick as the roadmap */
.bento-wrap {
position: relative;
height: 300vh;
}
.bento-stage {
position: sticky;
top: 0;
width: 100vw;
height: 100vh;
margin-left: calc(50% - 50vw); /* full bleed out of section padding */
overflow: hidden;
display: grid;
align-content: start;
padding: 8vh clamp(var(--space-lg), 6vw, 6rem);
/* dips slightly deeper mid-stage so the white constellation reads,
then returns to the page's periwinkle at both edges — seamless */
background: linear-gradient(
180deg,
#61a0f7 0%,
#4f83e4 45%,
#4a7cdd 70%,
#5f98f8 100%
);
}
/* reduced motion: no pin, no runway — just the panels in the sky */
@media (prefers-reduced-motion: reduce) {
.bento-wrap {
height: auto;
}
.bento-stage {
position: static;
height: auto;
min-height: 100vh;
}
}
#constellation {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.bento-cols {
position: relative; /* rides above the canvas */
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(var(--space-lg), 6vw, 6rem); /* real air between the rails */
max-width: 1100px;
margin: 0 auto;
}
/* two clean rails: each column is a single-file stack of cards.
No CSS offsets — script.js owns both rails' positions outright
(one scroll value, two multipliers, lerped every frame). */
.bento-col {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-lg);
will-change: transform;
}
.bento-item {
display: grid; /* the button stretches to fill its slot */
}
/* one subtle light per pane, each from a different direction — two
panes get none at all, so the set never reads as cloned lighting */
.bento-col--left .bento-item:nth-child(1) .about-card {
--glass-light: radial-gradient(
60% 45% at 80% 4%,
rgba(255, 255, 255, 0.26),
rgba(255, 255, 255, 0) 70%
);
}
.bento-col--left .bento-item:nth-child(2) .about-card {
--glass-light: radial-gradient(
50% 42% at 88% 96%,
rgba(255, 197, 61, 0.16),
rgba(255, 197, 61, 0) 70%
);
}
.bento-col--right .bento-item:nth-child(2) .about-card {
--glass-light: radial-gradient(
55% 45% at 10% 92%,
rgba(255, 255, 255, 0.22),
rgba(255, 255, 255, 0) 70%
);
}
.bento-col--right .bento-item:nth-child(3) .about-card {
--glass-light: radial-gradient(
50% 48% at 8% 6%,
rgba(255, 197, 61, 0.13),
rgba(255, 197, 61, 0) 70%
);
}
/* magazine-mix heights: two tall slabs left, four varied right */
.bento-col--left .bento-item:nth-child(1) .about-card {
min-height: 380px;
}
.bento-col--left .bento-item:nth-child(2) .about-card {
min-height: 320px;
}
.bento-col--right .bento-item:nth-child(1) .about-card {
min-height: 230px;
}
.bento-col--right .bento-item:nth-child(2) .about-card {
min-height: 290px;
}
.bento-col--right .bento-item:nth-child(3) .about-card {
min-height: 200px;
}
.bento-col--right .bento-item:nth-child(4) .about-card {
min-height: 260px;
}
/* ---- the glass panels ---- */
.about-card {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-sm);
width: 100%;
min-height: 240px; /* single-file rails carry taller panels */
padding: var(--space-lg) var(--space-md);
border-radius: 24px;
/* true clear glass: the heavy blur was what read as "opaque" — it
liquefied the fine constellation lines into flat colour. A light
5px diffusion keeps the field legible THROUGH the pane. Each card
may carry ONE subtle light via --glass-light (varied per card
below; none by default so the lighting never looks cloned). */
--glass-light: none;
/* transparent OVERRIDES the browser's default white ButtonFace —
without it the pane paints solid white under the gradients */
background-color: transparent;
background-image:
var(--glass-light),
linear-gradient(
135deg,
rgba(255, 255, 255, 0.13) 0%,
rgba(255, 255, 255, 0.04) 55%,
rgba(255, 255, 255, 0.01) 100%
);
backdrop-filter: blur(5px) saturate(1.15);
-webkit-backdrop-filter: blur(5px) saturate(1.15);
border: 1.5px solid rgba(255, 255, 255, 0.6);
box-shadow:
0 22px 55px rgba(0, 15, 35, 0.45),
inset 0 1.5px 1px rgba(255, 255, 255, 0.85),
inset 1px 0 1px rgba(255, 255, 255, 0.35),
inset 0 -1px 1px rgba(255, 255, 255, 0.12);
cursor: pointer;
transition:
translate 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
}
/* the diagonal sheen sweeping the glass surface from the top-left */
.about-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
115deg,
rgba(255, 255, 255, 0.16) 0%,
rgba(255, 255, 255, 0.04) 30%,
rgba(255, 255, 255, 0) 48%
);
pointer-events: none;
}
.about-card:hover,
.about-card:focus-visible {
translate: 0 -6px;
border-color: rgba(255, 255, 255, 0.9);
box-shadow:
0 30px 65px rgba(0, 15, 35, 0.55),
inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
inset 1px 0 1px rgba(255, 255, 255, 0.45),
inset 0 -1px 1px rgba(255, 255, 255, 0.15);
}
.about-card h3 {
font-family: var(--font-body);
font-weight: 800;
font-size: clamp(1rem, 0.7vw + 0.8rem, 1.3rem);
letter-spacing: 0.02em;
text-align: center;
line-height: 1.25;
/* engraved-in-glass: bright-to-dim gradient fill through the glyphs,
with a fine dark cut beneath (drop-shadow follows the letterforms;
text-shadow would bleed through the transparent gradient fill) */
background: linear-gradient(
180deg,
#ffffff 0%,
rgba(255, 255, 255, 0.85) 55%,
rgba(214, 236, 255, 0.65) 100%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 1px 1px rgba(11, 58, 94, 0.5));
}
/* the Explore pill, drawn by CSS so the markup stays a plain button */
.about-card::after {
content: "Explore \2192";
padding: 0.45em 1.3em;
border-radius: 30px;
background: rgba(255, 255, 255, 0.08); /* etched ring, not a chip */
border: 1px solid rgba(255, 255, 255, 0.7);
color: #ffffff;
font-family: var(--font-body);
font-weight: 700;
font-size: 0.85rem;
text-shadow: 0 1px 3px rgba(11, 58, 94, 0.45);
transition:
background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease;
}
.about-card:hover::after,
.about-card:focus-visible::after {
background: hsl(42, 100%, 55%);
border-color: hsl(42, 100%, 55%);
color: #1f1e1d;
}
/* the topic icon glowing white through the glass */
.card-icon {
width: 40px;
height: 40px;
stroke: #ffffff;
stroke-width: 2.5;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 1px 5px rgba(11, 58, 94, 0.4));
}
.card-icon .icon-fill {
fill: #ffffff;
stroke: none;
}
/* mobile: one rail, no counter-scroll, panels in simple flow */
@media (max-width: 700px) {
.bento-stage {
padding: var(--space-xl) var(--space-lg);
}
.bento-cols {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.bento-col,
.bento-col--left,
.bento-col--right {
margin-top: 0;
transform: none !important; /* the JS parallax stands down */
}
}
/*About loading in */
/*
*/
#about-dialog {
margin: 0; /* pin to the left edge, no auto-centering */
margin-top: 10vh;
height: 80vh;
max-height: 100vh;
width: 100vw; /* fills the LEFT half; use 100vw for full screen */
max-width: 100vw;
border: none;
padding: 0;
background: linear-gradient(135deg, #ffffff 0%, #eaf6ff 55%, #d9efff 100%);
border-top: 4px solid var(--primary-color);
border-bottom: 4px solid var(--primary-color);
box-shadow: 0 18px 50px rgba(0, 30, 60, 0.35);
transform: translateX(-100%); /* start fully off-screen to the left */
/* long, gentle glide — 1.4s with a soft ease-out tail */
transition:
transform 1.4s cubic-bezier(0.33, 1, 0.68, 1),
display 1.4s ease allow-discrete,
overlay 1.4s ease allow-discrete;
}
/* open state — slid into place */
#about-dialog[open] {
display: flex;
align-items: center;
justify-content: center;
transform: translateX(0);
}
/* where the slide STARTS from when it opens */
@starting-style {
#about-dialog[open] {
transform: translateX(-100%);
}
}
#about-dialog::backdrop {
background-color: rgba(32, 31, 30, 0);
backdrop-filter: blur(0px);
transition:
background-color 0.9s ease,
backdrop-filter 0.9s ease,
display 0.9s ease allow-discrete,
overlay 0.9s ease allow-discrete;
}
/* open state — the final dark, blurred look */
#about-dialog[open]::backdrop {
background-color: rgba(32, 31, 30, 0.7);
backdrop-filter: blur(4px);
}
/* where the fade STARTS when it opens */
@starting-style {
#about-dialog[open]::backdrop {
background-color: rgba(32, 31, 30, 0);
backdrop-filter: blur(0px);
}
}
/* THE CLOSE X — a bare glyph, no circle. It spins into position while
the dialog glides right, unspins the other way on close, and settles
as an upright grey X at full expansion. `rotate` and `translate` are
separate CSS properties, so spin and hover-raise never fight. */
.dialog-close {
position: absolute;
top: var(--space-md);
right: var(--space-lg);
z-index: 2;
border: none;
background: none;
color: #9a9a9a; /* grey at rest */
font-size: 2.6rem;
line-height: 1;
cursor: pointer;
rotate: -540deg; /* wound up while closed */
transition:
rotate 1.4s cubic-bezier(0.33, 1, 0.68, 1),
translate 0.25s ease,
color 0.25s ease;
}
/* open: unwind 1.5 turns into place, synced with the glide */
#about-dialog[open] .dialog-close {
rotate: 0deg;
}
@starting-style {
#about-dialog[open] .dialog-close {
rotate: -540deg;
}
}
/* hover: red and raised */
.dialog-close:hover,
.dialog-close:focus-visible {
color: #e03131;
translate: 0 -4px;
}
/* CONTENT — rides in from the left after the panel, leaves with it */
#dialog-content {
max-width: 62ch; /* readable line length */
padding: var(--space-lg) var(--space-xl);
text-align: center;
opacity: 0;
translate: -40px 0;
transition:
opacity 0.45s ease,
translate 0.45s ease;
}
#about-dialog[open] #dialog-content {
opacity: 1;
translate: 0 0;
transition-duration: 0.7s;
transition-delay: 0.9s; /* waits for the slower panel to arrive */
}
/* on close the delay is gone (base rule), so the text immediately
shifts back left and fades while the panel departs */
@starting-style {
#about-dialog[open] #dialog-content {
opacity: 0;
translate: -40px 0;
}
}
.dialog-title {
font-family: var(--font-display);
font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem);
font-weight: 600;
color: #1f1e1d;
line-height: 1.2;
}
/* accent line under the title — brand blue into the CTA gold */
.dialog-divider {
display: block;
width: 90px;
height: 3px;
margin: var(--space-md) auto var(--space-lg);
border-radius: 2px;
background: linear-gradient(90deg, var(--primary-color), hsl(42, 100%, 50%));
}
.dialog-body p {
font-family: var(--font-body);
font-size: 1.05rem;
line-height: 1.7;
color: #333;
}
/* SERVICES PROVIDED */
#services {
position: relative;
height: auto;
min-height: 0;
}
/* --- the title stage: one full screen, centred both ways --- */
.services-intro {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
text-align: center;
padding: var(--space-lg);
}
#services-heading {
font-family: var(--font-display);
font-weight: 600;
color: whitesmoke;
font-size: clamp(2.5rem, 6vw + 1rem, 6rem);
line-height: 1.1;
text-shadow: 0 4px 18px rgba(0, 30, 60, 0.35);
/* drops in from above as the section scrolls up */
opacity: 0;
translate: 0 -60px;
transition:
opacity 0.9s ease,
translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.services-sub {
font-family: var(--font-body);
font-style: italic;
color: whitesmoke;
font-size: clamp(1rem, 1vw + 0.6rem, 1.4rem);
margin-top: var(--space-md);
opacity: 0;
translate: 0 -30px;
transition:
opacity 0.9s ease 0.18s,
translate 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}
.services-intro.in-view #services-heading,
.services-intro.in-view .services-sub {
opacity: 1;
translate: 0 0;
}
/* ---- SHARED EDITORIAL FURNITURE ----
The rules, kickers and dividers from the services spread, reusable
anywhere text needs segmenting. Light variants for the blue sky,
--dark modifiers for white surfaces (the expanded tier cards). */
.edit-rule {
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.7);
width: 100%;
max-width: 1050px;
margin: 0 auto var(--space-lg);
}
.section-kicker {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
font-family: var(--font-body);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.24em;
font-size: 0.75rem;
color: whitesmoke;
margin-bottom: var(--space-sm);
}
.section-kicker span {
color: hsl(42, 100%, 55%);
font-size: 0.8rem;
}
/* left-aligned variant for intros that aren't centred */
.section-kicker--start,
.care-copy .section-kicker {
justify-content: flex-start;
}
/* the aesthetic divider: hairlines meeting a small gold star */
.edit-divider {
display: flex;
align-items: center;
gap: var(--space-md);
width: 100%;
max-width: 1050px;
margin: var(--space-lg) auto;
color: hsl(42, 100%, 60%);
font-size: 0.8rem;
line-height: 1;
}
.edit-divider::before,
.edit-divider::after {
content: "";
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.65);
}
/* dark variants for white surfaces */
.edit-divider--dark {
color: hsl(42, 84%, 45%);
}
.edit-divider--dark::before,
.edit-divider--dark::after {
background: rgba(11, 58, 94, 0.25);
}
/* --- the editorial spread beneath the title --- */
.services-editorial {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
max-width: 1050px;
margin-top: var(--space-xl);
padding-top: var(--space-lg);
border-top: 1px solid rgba(255, 255, 255, 0.7); /* hairline rule */
text-align: left;
opacity: 0;
translate: 0 24px;
transition:
opacity 0.9s ease 0.35s,
translate 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}
.services-intro.in-view .services-editorial {
opacity: 1;
translate: 0 0;
}
@media (min-width: 800px) {
.services-editorial {
grid-template-columns: 1fr 1fr 1fr;
gap: var(--space-xl);
}
/* thin column rules, magazine-style */
.edit-col + .edit-col {
border-left: 1px solid rgba(255, 255, 255, 0.45);
padding-left: var(--space-xl);
}
}
.edit-kicker {
font-family: var(--font-body);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.75rem;
color: whitesmoke;
margin-bottom: var(--space-sm);
}
/* the issue number in sunlight yellow */
.edit-kicker span {
color: hsl(42, 100%, 55%);
margin-right: var(--space-sm);
}
.edit-body {
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.75;
color: rgba(255, 255, 255, 0.92);
}
/* editorial drop cap on the opening column */
.edit-body--dropcap::first-letter {
font-family: var(--font-display);
font-size: 3.2em;
font-weight: 700;
float: left;
line-height: 0.8;
padding-right: 0.12em;
color: whitesmoke;
}
.edit-pullquote {
max-width: 1050px;
width: 100%;
margin-top: var(--space-lg);
padding-top: var(--space-md);
border-top: 1px solid rgba(255, 255, 255, 0.7);
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.1rem, 1.4vw + 0.6rem, 1.6rem);
color: whitesmoke;
text-align: center;
opacity: 0;
transition: opacity 0.9s ease 0.6s;
}
.services-intro.in-view .edit-pullquote {
opacity: 1;
}
/* --- THE CARD FILE ---
The three tiers sit stacked like cards in a file: offset, tilted,
z-ordered. Scrolling through the tall wrapper shuffles the front
card; clicking the front card expands it to fill the stage. */
.tier-stack-wrap {
position: relative;
min-height: 260vh; /* the scroll runway that drives the shuffle */
}
.tier-grid {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
opacity: 0;
transition: opacity 0.8s ease;
}
.tier-grid.in-view {
opacity: 1;
}
/* the tier close X — TOP LEFT, clear of the fixed menu button */
#services-close {
position: absolute;
top: var(--space-md);
left: var(--space-lg);
z-index: 20;
border: none;
background: none;
font-size: 2.6rem;
line-height: 1;
color: #9a9a9a;
cursor: pointer;
opacity: 0;
pointer-events: none; /* unreachable until a tier is open */
transition:
opacity 0.35s ease,
color 0.25s ease,
translate 0.25s ease;
}
.tier-grid.stack-expanded #services-close {
opacity: 1;
pointer-events: auto;
}
#services-close:hover,
#services-close:focus-visible {
color: #e03131;
translate: 0 -3px;
}
.tier-stair {
position: absolute;
left: 50%;
top: 50%;
width: min(540px, 86vw);
min-height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: var(--space-lg);
text-align: center;
border: none; /* focus ring is custom below — no stray borders */
outline: none;
border-radius: 22px;
background: linear-gradient(180deg, #ffffff 0%, #f2faff 100%);
box-shadow: 0 24px 50px rgba(0, 30, 60, 0.35); /* deep — they float */
overflow: hidden;
cursor: pointer;
/* every stack move animates through the same clock */
transition:
translate 0.7s cubic-bezier(0.22, 1, 0.36, 1),
rotate 0.7s cubic-bezier(0.22, 1, 0.36, 1),
scale 0.7s cubic-bezier(0.22, 1, 0.36, 1),
width 0.7s ease,
height 0.7s ease,
min-height 0.7s ease,
border-radius 0.7s ease,
filter 0.7s ease,
opacity 0.4s ease,
padding 0.7s ease;
}
/* keyboard focus gets a deliberate gold ring instead of the UA box */
.tier-stair:focus-visible {
outline: 3px solid hsl(42, 100%, 55%);
outline-offset: 4px;
}
/* scattered desk photos behind the pile so the stage feels lived-in */
.stack-scatter img {
position: absolute;
width: clamp(180px, 22vw, 300px);
height: auto;
border: 8px solid #ffffff;
border-radius: 8px;
box-shadow: 0 14px 30px rgba(0, 30, 60, 0.3);
opacity: 0.55;
pointer-events: none;
}
.scatter-1 {
top: 9%;
left: 6%;
rotate: -8deg;
}
.scatter-2 {
bottom: 8%;
left: 10%;
rotate: 5deg;
}
.scatter-3 {
top: 12%;
right: 7%;
rotate: 7deg;
}
.scatter-4 {
bottom: 10%;
right: 9%;
rotate: -5deg;
width: clamp(160px, 18vw, 260px);
}
@media (max-width: 700px) {
.stack-scatter {
display: none;
}
}
/* the three stations of the pile (JS assigns these) */
.tier-stair.pos-0 {
z-index: 3;
translate: -50% -50%;
rotate: 0deg;
scale: 1;
filter: brightness(1);
}
.tier-stair.pos-1 {
z-index: 2;
translate: calc(-50% + 40px) calc(-50% + 26px);
rotate: 3deg;
scale: 0.96;
filter: brightness(0.95);
}
.tier-stair.pos-2 {
z-index: 1;
translate: calc(-50% - 36px) calc(-50% + 46px);
rotate: -3.5deg;
scale: 0.92;
filter: brightness(0.9);
}
/* the CLICK ME cue riding the front card */
.click-cue {
position: absolute;
top: var(--space-md);
left: 50%;
translate: -50% 0;
padding: 0.45em 1.3em;
border-radius: 30px;
background: #1f1e1d;
color: whitesmoke;
font-family: var(--font-body);
font-weight: 700;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.28em;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
animation: cue-bob 2.2s ease-in-out infinite;
}
.tier-stair.pos-0 .click-cue {
opacity: 1;
}
.tier-grid.stack-expanded .click-cue {
opacity: 0;
}
@keyframes cue-bob {
0%,
100% {
translate: -50% 0;
}
50% {
translate: -50% -7px;
}
}
/* EXPANDED: the front card grows to fill the stage */
.tier-grid.stack-expanded .tier-stair.is-open {
z-index: 10;
width: 100vw;
height: 100vh;
min-height: 100vh;
translate: -50% -50%;
rotate: 0deg;
scale: 1;
border-radius: 0;
padding: var(--space-xl);
gap: var(--space-sm);
overflow-y: auto;
}
/* the rest of the pile fades away while one card owns the stage */
.tier-grid.stack-expanded .tier-stair:not(.is-open) {
opacity: 0;
pointer-events: none;
}
/* blue-to-gold accent rail across the top of each tier */
.tier-stair::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), hsl(42, 100%, 50%));
}
/* Collapsed type is sized to FIT the third-of-a-screen tile so nothing
is clipped before you open it; each step scales up when expanded. */
.tier-tag {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #7a7a7a;
transition: font-size 0.8s ease;
}
/* the editorial numeral, same gold as the services spread */
.tag-no {
color: hsl(42, 84%, 45%);
margin-right: 0.5em;
}
.tier-stair h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.15rem;
line-height: 1.2;
transition: font-size 0.8s ease;
}
.tier-stair .price {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 600;
line-height: 1.2;
color: var(--primary-color);
transition: font-size 0.8s ease;
}
.tier-stair > ul {
list-style: none;
font-size: 0.85rem;
line-height: 1.45;
transition: font-size 0.8s ease;
}
.tier-stair > ul li::before {
content: "✓ ";
color: #2f9e44;
font-weight: 700;
}
/* expanded: everything grows into the bigger box, and the detail
takes the editorial format — hairline rules segmenting the copy,
the description set as an italic serif deck */
.tier-grid.stack-expanded .tier-stair.is-open .tier-tag {
font-size: 0.9rem;
}
.tier-grid.stack-expanded .tier-stair.is-open .tier-more-inner {
border-top: 1px solid rgba(11, 58, 94, 0.2);
padding-top: var(--space-md);
}
.tier-grid.stack-expanded .tier-stair.is-open .tier-more p {
font-family: var(--font-display);
font-style: italic;
font-size: 1.15rem;
line-height: 1.6;
color: #333;
}
.tier-grid.stack-expanded .tier-stair.is-open .tier-perks {
border-top: 1px solid rgba(11, 58, 94, 0.15);
padding-top: var(--space-md);
}
.tier-grid.stack-expanded .tier-stair.is-open h3 {
font-size: 2.2rem;
}
.tier-grid.stack-expanded .tier-stair.is-open .price {
font-size: 3rem;
}
.tier-grid.stack-expanded .tier-stair.is-open > ul {
font-size: 1.05rem;
line-height: 1.7;
}
/* THE EXPAND DETAIL — collapsed via the 0fr grid-row trick, grows
into place and fades up once its tier owns the viewport */
.tier-more {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
translate: 0 18px;
transition:
grid-template-rows 0.6s ease 0.15s,
opacity 0.5s ease 0.25s,
translate 0.5s ease 0.25s;
}
.tier-more-inner {
overflow: hidden;
max-width: 46ch;
}
.tier-more p {
margin-bottom: var(--space-sm);
color: #444;
}
.tier-perks {
list-style: none;
margin-bottom: var(--space-md);
font-size: 0.95rem;
color: #555;
}
.tier-perks li::before {
content: "— ";
color: hsl(42, 100%, 45%);
font-weight: 700;
}
.tier-cta {
display: inline-block;
padding: var(--space-sm) var(--space-lg);
border-radius: 30px;
background: #1f1e1d;
color: #f2f2f2;
text-decoration: none;
transition:
background-color 0.3s ease,
box-shadow 0.3s ease;
}
.tier-cta:hover {
background: var(--primary-color);
box-shadow: 0 6px 14px rgba(20, 157, 255, 0.4);
}
.tier-stair.is-open .tier-more {
grid-template-rows: 1fr;
opacity: 1;
translate: 0 0;
}
@media (max-width: 700px) {
#services {
height: auto;
min-height: 0;
}
.services-intro {
height: auto;
padding: var(--space-xl) var(--space-lg);
}
/* no stack on touch — a plain stacked list, everything visible */
.tier-stack-wrap {
min-height: 0;
}
.tier-grid {
position: static;
height: auto;
overflow: visible;
display: flex;
flex-direction: column;
gap: var(--space-lg);
padding: var(--space-lg);
}
.tier-stair,
.tier-stair.pos-0,
.tier-stair.pos-1,
.tier-stair.pos-2 {
position: static;
width: 100%;
min-height: 0;
translate: 0 0;
rotate: 0deg;
scale: 1;
filter: none;
height: auto;
padding: var(--space-lg);
border-radius: 16px;
text-align: left;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.click-cue {
display: none;
}
.tier-stair p,
.tier-stair li {
font-size: 0.9rem;
line-height: 1.4; /* tighter than default 1.5-1.6 */
color: #555;
}
.tier-stair h3 {
font-size: 1.05rem;
}
/* no hover on touch — the detail is simply always visible */
.tier-more {
grid-template-rows: 1fr;
opacity: 1;
translate: 0 0;
}
}
/* TIER COMPARISON — the matrix fills its section's width and the
whole thing is built to fit one screen on every device */
#tier-comparison {
position: relative;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--space-lg);
overflow: hidden;
}
#comparison-heading {
font-family: var(--font-display);
font-weight: 600;
text-align: center;
color: whitesmoke;
font-size: clamp(2rem, 3vw + 1rem, 3rem);
margin-bottom: var(--space-lg);
}
/* the glass sheet — DARK frost, so the white text and the coloured
marks stay legible instead of washing out against the sky */
.table-wrap {
position: relative;
width: 100%; /* fills the section edge to edge, no side gaps */
margin: 0 auto;
border-radius: 24px;
background: linear-gradient(
135deg,
rgba(7, 28, 48, 0.72) 0%,
rgba(11, 58, 94, 0.55) 55%,
rgba(7, 28, 48, 0.66) 100%
);
backdrop-filter: blur(9px) saturate(1.2);
-webkit-backdrop-filter: blur(9px) saturate(1.2);
border: 1.5px solid rgba(255, 255, 255, 0.4);
box-shadow:
0 24px 60px rgba(0, 20, 45, 0.4),
inset 0 1.5px 1px rgba(255, 255, 255, 0.35);
}
/* ---- THE FEATURE MATRIX ----
A CSS grid instead of an HTML table: same semantics via ARIA table
roles, but the layout compresses to phone width with no horizontal
scrolling. Icon-led feature rows, boxed checks, quiet dashes. */
.matrix {
padding: var(--space-sm) var(--space-md) var(--space-md);
}
.matrix-header,
.matrix-row {
display: grid;
grid-template-columns: minmax(0, 2.4fr) repeat(3, minmax(56px, 1fr));
align-items: center;
}
/* the header: etched into the glass, not a solid band */
.matrix-header {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.6);
}
.matrix-header span {
/* vertical padding scales with viewport height so the 12 rows plus
header always fit one screen */
padding: clamp(6px, 1.2vh, 16px) var(--space-sm);
color: #ffffff;
font-family: var(--font-body);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.14em;
text-transform: uppercase;
text-align: center;
text-shadow: 0 1px 3px rgba(11, 58, 94, 0.45);
}
.matrix-header .mh-feature {
text-align: left;
}
/* feature rows: hairline separated, revealed on scroll */
.matrix-row {
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
opacity: 0;
translate: 0 26px;
transition:
opacity 0.6s ease,
translate 0.5s ease,
background-color 0.4s ease;
}
.matrix-row:last-child {
border-bottom: none;
}
.matrix-row.row-in {
opacity: 1;
translate: 0 0;
}
/* THE FOCUSED ROW — the row in line with the scroll rises, brightens,
and its checks glow; as the scroll moves on it drifts back down */
.matrix-row.row-active {
translate: 0 -4px;
background: rgba(255, 255, 255, 0.1);
}
/* the icon-led feature cell */
.mx-feature {
display: flex;
align-items: center;
gap: var(--space-md);
padding: clamp(4px, 1.1vh, 16px) var(--space-sm);
min-width: 0;
}
/* short screens: names and icons carry the rows so it all still fits */
@media (max-height: 780px) {
.mx-desc {
display: none;
}
}
.mx-icon {
flex-shrink: 0;
width: 34px;
height: 34px;
fill: none;
stroke: rgba(255, 255, 255, 0.85);
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.mx-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.mx-name {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.95rem;
color: #ffffff;
text-shadow: 0 1px 3px rgba(11, 58, 94, 0.4);
}
.mx-desc {
font-family: var(--font-body);
font-size: 0.78rem;
line-height: 1.4;
color: rgba(245, 245, 245, 0.75);
}
/* mark cells with the reference's fine column hairlines */
.mx-cell {
display: grid;
place-items: center;
align-self: stretch;
border-left: 1px solid rgba(255, 255, 255, 0.14);
}
/* the boxed check, reference-style */
.mark-box {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border: 2px solid rgba(105, 219, 124, 0.8);
border-radius: 6px;
transition:
border-color 0.4s ease,
box-shadow 0.4s ease;
}
.mark-box svg {
width: 16px;
height: 16px;
fill: none;
stroke: rgba(105, 219, 124, 0.9);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 0.4s ease;
}
/* absent: a quiet dash, not an alarm */
.mark-none {
color: rgba(245, 245, 245, 0.45);
font-weight: 700;
font-size: 1.1rem;
}
/* numeric values (pages, revisions) as small chips */
.mark-num {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
color: #ffffff;
padding: 0.15em 0.7em;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 20px;
background: rgba(255, 255, 255, 0.08);
}
/* the focused row's checks light up */
.matrix-row.row-active .mark-box {
border-color: #69db7c;
box-shadow: 0 0 12px rgba(105, 219, 124, 0.7);
}
.matrix-row.row-active .mark-box svg {
stroke: #69db7c;
}
/* reduced motion: no focus choreography, checks stay full-strength */
@media (prefers-reduced-motion: reduce) {
.mark-box {
border-color: #69db7c;
}
.mark-box svg {
stroke: #69db7c;
}
}
/*======================*/
/* EXAMPLES OF OUR WORK */
/*======================*/
#examples {
padding: var(--space-xl) var(--space-lg);
overflow: hidden;
}
/* joins the house style: Playfair, white, centred under its kicker */
#examples-heading {
font-family: var(--font-display);
font-weight: 600;
text-align: center;
color: whitesmoke;
font-size: clamp(2rem, 3vw + 1rem, 3rem);
}
.examples-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(4, 1fr);
gap: 0 var(--space-xl);
max-width: 1200px;
margin: 0 auto;
padding: var(--space-xl) var(--space-lg);
align-items: start; /* generally centered, per your read of the reference */
}
/* the subtle stagger — one slightly up, one slightly down */
.example--up {
grid-row: 1 / 4;
}
.example--down {
grid-row: 2 / 5;
}
.example figure {
overflow: hidden; /* so the zoom is clipped to the frame */
perspective: 1500px; /* enables the 3D tilt */
cursor: pointer;
}
/* client testimonial under the card: rides in from the left the first
time it enters the viewport (shared in-view observer) */
.example-detail {
margin-top: var(--space-lg);
max-width: 58ch;
opacity: 0;
translate: -56px 0;
transition:
opacity 0.7s ease,
translate 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.example-detail.in-view {
opacity: 1;
translate: 0 0;
}
@media (prefers-reduced-motion: reduce) {
.example-detail {
opacity: 1;
translate: 0 0;
transition: none;
}
}
.testimonial-stars {
color: hsl(42, 100%, 55%);
font-size: 1.15rem;
letter-spacing: 6px;
}
.testimonial {
border-left: 3px solid hsl(42, 100%, 55%);
padding-left: var(--space-md);
margin: var(--space-sm) 0;
font-style: italic;
line-height: 1.7;
}
.testimonial-source {
font-weight: 700;
}
/* live-site link in the card title: inherits the heading's look, gold
underline as the affordance (the house link treatment) */
.example figcaption h3 a {
color: inherit;
text-decoration: none;
border-bottom: 2px solid hsl(42, 100%, 55%);
padding-bottom: 1px;
transition: color 0.25s ease;
}
.example figcaption h3 a:hover,
.example figcaption h3 a:focus-visible {
color: hsl(42, 100%, 55%);
}
/* The media wrapper is now the tilt target, so poster and hover video
pitch together as one held-up panel. It has no size of its own - the
img inside still defines the card's footprint. */
.example-media {
position: relative;
transform-origin: right center;
will-change: transform;
}
.example-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; /* crops exactly like the poster underneath */
opacity: 0;
transition: opacity 0.35s ease; /* opacity only - transform stays GSAP's */
pointer-events: none; /* hover belongs to the figure, not the video */
border-radius: 6px; /* match the poster's frame */
}
.example-media.is-playing .example-video {
opacity: 1;
}
/* "Hover over me" affordance: only rendered where hovering exists and
motion is welcome - a touch user or reduced-motion visitor never
plays the video, so the invitation would be a lie for them. */
.hover-hint {
display: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.hover-hint {
display: block;
position: absolute;
bottom: 14px;
right: 14px;
padding: 8px 16px;
background: rgba(10, 25, 47, 0.65);
color: #fff;
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
border-radius: 999px;
pointer-events: none;
animation: hintPulse 2.4s ease-in-out infinite;
transition: opacity 0.25s ease;
}
/* the moment the invitation is accepted, it bows out */
.example figure:hover .hover-hint {
opacity: 0;
animation: none;
}
}
@keyframes hintPulse {
0%, 100% { opacity: 0.75; }
50% { opacity: 1; }
}
.example img {
width: 100%;
/* frame matches the 1280x800 screenshots' shape, so nothing crops -
a fixed 500px height forced cover to amputate the sides */
aspect-ratio: 16 / 10;
height: auto;
display: block;
object-fit: cover;
/* no CSS transition here — GSAP drives the transform now, and a
CSS transition on the same property would fight its tweening */
transform-origin: right center; /* anchor the RIGHT — left edge moves */
will-change: transform;
border-radius: 6px;
box-shadow: 0 18px 40px rgba(0, 30, 60, 0.3);
}
@media (max-width: 700px) {
.examples-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
padding: 0;
}
.example {
margin-bottom: var(--space-xl);
}
.example--up {
grid-column: 1 / 5;
grid-row: auto;
}
.example--down {
grid-column: 1 / 5;
grid-row: auto;
}
#examples {
padding: 0;
}
.example figure {
position: relative; /* anchor for the caption */
width: 80%;
max-width: 400px;
margin-right: auto; /* pushed left */
}
.example img {
width: 100%;
/* same 16:10 frame as desktop - a 60vh box was cropping the
screenshots' sides on phones too */
aspect-ratio: 16 / 10;
height: auto;
object-fit: cover;
display: block;
}
.example figure {
overflow: visible;
}
/* the name reads under the photo - overlaid on the screenshot it
fought the site's own artwork for legibility */
.example figcaption h3 {
position: static;
text-align: left;
margin-top: var(--space-sm);
}
}
/* ============================== */
/* HAVING A WEB PRESENCE MATTERS */
/* ============================== */
#general-info {
min-height: 150vh;
padding: var(--space-xl) var(--space-lg);
color: whitesmoke;
}
.gi-intro {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-xl);
max-width: 1100px;
margin: 0 auto var(--space-xl);
}
#general-info-heading {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2rem, 3vw + 1rem, 3rem);
line-height: 1.15;
margin-bottom: var(--space-md);
}
.gi-lede {
font-family: var(--font-body);
font-style: italic;
font-size: 1.15rem;
line-height: 1.7;
max-width: 42ch;
}
/* --- the draggable globe --- */
.globe-stage {
flex-shrink: 0;
width: 260px;
cursor: grab;
touch-action: pan-y; /* vertical scrolling still works over it */
user-select: none;
}
.globe-stage:active {
cursor: grabbing;
}
.globe {
width: 100%;
height: auto;
overflow: visible;
filter: drop-shadow(0 14px 30px rgba(0, 30, 60, 0.35));
}
.globe-ball {
fill: url(#globe-shade);
stroke: rgba(255, 255, 255, 0.9);
stroke-width: 2;
}
.globe-lines ellipse,
.globe-lines line,
#globe-meridians ellipse {
fill: none;
stroke: rgba(255, 255, 255, 0.75);
stroke-width: 1.6;
}
/* a soft highlight so the sphere reads as glass */
.globe-gloss {
fill: none;
stroke: rgba(255, 255, 255, 0.5);
stroke-width: 3;
}
.globe-hint {
text-align: center;
font-family: var(--font-body);
font-style: italic;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.75);
margin-top: var(--space-xs);
}
/* --- the six reasons --- */
.gi-grid {
display: grid;
/* two columns at EVERY width — six cards, three rows.
minmax(0,…): a bare 1fr inherits the widest item's min-content as
a floor, which inflated the whole page on phones */
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-md);
max-width: 1100px;
margin: 0 auto var(--space-lg);
list-style: none;
}
.gi-item {
display: flex;
align-items: flex-start;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
border-radius: 18px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.35);
backdrop-filter: blur(6px);
/* reveal on scroll — class added by the observer in script.js */
opacity: 0;
translate: 0 26px;
transition:
opacity 0.6s ease,
translate 0.6s ease,
background-color 0.3s ease;
}
.gi-item.in-view {
opacity: 1;
translate: 0 0;
}
.gi-item:hover {
background: rgba(255, 255, 255, 0.22);
}
.gi-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
fill: none;
stroke: whitesmoke;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.gi-icon .icon-dot {
fill: whitesmoke;
stroke: none;
}
.gi-text {
/* flex items refuse to shrink below their content's min-width by
default — the search mock's nowrap text was inflating the page */
min-width: 0;
flex: 1;
}
.gi-text h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.3rem;
margin-bottom: var(--space-xs);
}
.gi-text p {
font-family: var(--font-body);
line-height: 1.7;
color: #f0f6fb;
}
/* --- illustrative search mock (decorative, not a real search box) --- */
.search-mock {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-top: var(--space-md);
padding: var(--space-sm) var(--space-md);
border-radius: 30px;
background: #ffffff;
box-shadow: 0 4px 14px rgba(0, 30, 60, 0.25);
}
.search-mark {
font-family: var(--font-body);
font-weight: 700;
font-size: 1.1rem;
letter-spacing: -0.02em;
}
.mark-b {
color: #4285f4;
}
.mark-r {
color: #ea4335;
}
.mark-y {
color: #fbbc05;
}
.mark-g {
color: #34a853;
}
.search-field {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
border-left: 1px solid #e0e0e0;
padding-left: var(--space-sm);
}
.search-typed {
font-family: var(--font-body);
color: #3c4043;
white-space: nowrap;
overflow: hidden;
}
/* the blinking cursor */
.search-caret {
display: inline-block;
width: 2px;
height: 1.15em;
margin-left: 2px;
background: #4285f4;
animation: caret-blink 1.1s steps(1, end) infinite;
}
@keyframes caret-blink {
0%,
49% {
opacity: 1;
}
50%,
100% {
opacity: 0;
}
}
.search-glass {
flex-shrink: 0;
width: 22px;
height: 22px;
fill: none;
stroke: #4285f4;
stroke-width: 2.2;
stroke-linecap: round;
}
/* --- lazy-loaded illustrations that scale up as they scroll in --- */
.gi-gallery {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-lg);
max-width: 1100px;
margin: 0 auto;
}
@media (min-width: 800px) {
.gi-gallery {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.gi-shot {
opacity: 0;
scale: 0.82;
transition:
opacity 0.7s ease,
scale 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.gi-shot.in-view {
opacity: 1;
scale: 1;
}
.gi-shot img {
width: 100%;
height: 210px;
object-fit: cover;
border-radius: 14px;
border: 3px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 16px 34px rgba(0, 30, 60, 0.3);
}
.gi-shot figcaption {
margin-top: var(--space-sm);
text-align: center;
font-family: var(--font-body);
font-style: italic;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.9);
}
/* CARE PLAN — Progressive Support */
#care-plan {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-xl);
padding: var(--space-xl) var(--space-lg);
}
/* the 3D stage: perspective lives on the parent, the cross spins inside */
.care-scene {
perspective: 900px;
width: 260px;
height: 300px;
display: grid;
place-items: center;
flex-shrink: 0;
}
.care-cross {
position: relative;
width: 190px;
height: 190px;
transform-style: preserve-3d;
animation: cross-spin 9s linear infinite;
}
@keyframes cross-spin {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
/* three translucent plus-shaped layers stacked in Z fake the volume */
.cross-layer {
position: absolute;
inset: 0;
}
.cross-layer:nth-child(1) {
transform: translateZ(-26px);
}
.cross-layer:nth-child(3) {
transform: translateZ(26px);
}
/* each layer's plus = vertical bar (::before) + horizontal bar (::after) */
.cross-layer::before,
.cross-layer::after {
content: "";
position: absolute;
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: 12px;
box-shadow: 0 0 28px rgba(255, 255, 255, 0.55);
}
.cross-layer::before {
width: 34%;
height: 100%;
left: 33%;
top: 0;
}
.cross-layer::after {
width: 100%;
height: 34%;
top: 33%;
left: 0;
}
.care-copy {
max-width: 48ch;
color: whitesmoke;
}
#care-plan-heading {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2rem, 3vw + 1rem, 3rem);
margin-bottom: var(--space-md);
}
.care-lede {
font-family: var(--font-body);
line-height: 1.7;
margin-bottom: var(--space-md);
}
.care-points {
list-style: none;
margin-bottom: var(--space-lg);
line-height: 1.9;
}
.care-points li::before {
content: "+ ";
color: hsl(42, 100%, 60%);
font-weight: 700;
}
.care-price {
font-family: var(--font-body);
font-size: 1.1rem;
}
.care-price-amount {
font-family: var(--font-display);
font-size: 2.4rem;
font-weight: 700;
color: hsl(42, 100%, 60%);
}
.care-price-period {
color: #dfe9f2;
}
/* ROADMAP — the treasure map.
The section is deliberately tall and the map is sticky inside it, so
the trail draws across a long stretch of scrolling while the map
stays pinned in view, instead of racing to the end in half a screen. */
#roadmap {
position: relative;
min-height: 320vh;
padding: var(--space-xl) var(--space-lg);
}
#roadmap-heading {
font-family: var(--font-display);
font-weight: 600;
text-align: center;
color: whitesmoke;
font-size: clamp(2rem, 3vw + 1rem, 3rem);
}
#roadmap-desc {
text-align: center;
color: whitesmoke;
font-style: italic;
max-width: 55ch;
margin: var(--space-sm) auto var(--space-lg);
}
.map-wrap {
position: sticky;
top: 6vh;
/* width capped by HEIGHT too: the map is width x 0.62 tall, and the
sticky stack (status line + map + the Launch overhang) must fit
under 100vh or the X clips at the fold. 140vh - 5em backs the
width out of the available height; tall screens still get the
full 1000px. */
max-width: min(1000px, calc(140vh - 5em));
margin: 0 auto;
}
/* phones keep the full pinned progression — the map just runs a
shorter runway and everything on it draws bigger */
@media (max-width: 700px) {
#roadmap {
min-height: 240vh;
}
.map-wrap {
top: 8svh;
/* phones swap to the TALL portrait route (420x780 - see the
geometry swap in script.js), so height = width x 1.857 and the
height budget now sets the width: (100svh - offset - status) /
1.857. svh, not vh: on real phones vh is the LARGE viewport
(URL bar hidden) - sizing against it overflows the screen
whenever the browser chrome is showing. */
max-width: min(100%, calc(46svh - 3em));
}
}
#treasure-map {
width: 100%;
height: auto;
display: block;
/* labels near the viewBox edge (Discovery's D) may overhang it at
phone label sizes — let them render instead of clipping */
overflow: visible;
}
/* the dashed trail — round caps make the dashes read hand-drawn */
.map-trail {
stroke: whitesmoke;
stroke-width: 6;
stroke-dasharray: 2 22;
filter: drop-shadow(0 2px 3px rgba(0, 30, 60, 0.4));
}
/* X marks the spot — lives OUTSIDE the reveal mask (the mask's round
edge was slicing it into a circular blob mid-scroll) and stamps in
with a springy pop once the trail arrives */
.map-x {
transform-box: fill-box;
transform-origin: center;
opacity: 0;
scale: 0.2;
transition:
opacity 0.35s ease,
scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.map-x.stamped {
opacity: 1;
scale: 1;
}
.map-x path {
stroke: #e03131;
stroke-width: 10;
stroke-linecap: round;
fill: none;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}
/* waypoints: dim until the trail reaches them */
.map-stage circle {
fill: rgba(255, 255, 255, 0.35);
stroke: whitesmoke;
stroke-width: 3;
transition:
fill 0.4s ease,
r 0.4s ease;
}
.map-stage text {
fill: rgba(255, 255, 255, 0.55);
font-family: var(--font-display);
font-size: 1.6rem;
font-style: italic;
text-anchor: middle;
transition:
fill 0.4s ease,
font-size 0.4s ease;
}
.map-stage.reached circle {
fill: hsl(42, 100%, 55%);
}
.map-stage.reached text {
fill: whitesmoke;
}
/* hitting a marker is an EVENT: the label swells and goes gold,
and its waypoint dot grows */
.map-stage.current text {
fill: hsl(42, 100%, 60%);
font-weight: 700;
font-size: 2.1rem;
}
.map-stage.current circle {
r: 15;
}
/* stages you've sailed past get struck through — completed */
.stage-strike {
stroke: rgba(255, 255, 255, 0.9);
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
transition: stroke-dashoffset 0.5s ease 0.15s;
}
.map-stage.passed .stage-strike {
stroke-dashoffset: 0;
}
.map-stage.passed text {
fill: rgba(255, 255, 255, 0.65);
}
#map-status {
text-align: center;
color: whitesmoke;
font-family: var(--font-body);
/* sits above the map now - under it, the map's 620px pushed the
line below the fold on shorter screens */
margin: 0 0 var(--space-sm);
min-height: 1.5em; /* no layout jump as the text changes */
}
#map-status strong {
color: hsl(42, 100%, 60%);
font-family: var(--font-display);
font-size: 1.2rem;
}
/* PARALLAX SKY — fixed decorative layer behind the content */
#parallax-sky {
position: fixed;
inset: 0;
z-index: -1; /* above the body gradient, below everything else */
overflow: hidden;
pointer-events: none;
}
.p-cloud {
position: absolute;
border-radius: 50%;
background: radial-gradient(
ellipse at center,
rgba(255, 255, 255, 0.55) 0%,
rgba(255, 255, 255, 0) 70%
);
filter: blur(6px);
will-change: transform;
}
.p-cloud--1 {
width: 55vw;
height: 22vh;
top: 18%;
left: -8%;
}
.p-cloud--2 {
width: 40vw;
height: 18vh;
top: 55%;
right: -6%;
opacity: 0.8;
}
.p-cloud--3 {
width: 65vw;
height: 26vh;
top: 85%;
left: 12%;
opacity: 0.6;
}
/* CONTACT US — the "let's discuss" panel: deep blue card with a dot
grid, intro column left, conversational form right */
#contact-us {
padding: 10vh clamp(var(--space-lg), 6vw, 6rem);
}
/* the honeypot hides off-screen, NOT display:none - some bots skip
fields the layout engine dropped entirely */
.hidden-field {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.contact-panel {
position: relative;
display: grid;
grid-template-columns: 1fr 1.25fr;
gap: clamp(var(--space-lg), 4vw, 4.5rem);
max-width: 1200px;
margin: 0 auto;
padding: clamp(var(--space-lg), 5vw, 4.5rem);
border-radius: 28px;
background:
radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 1.5px),
linear-gradient(160deg, #149dff 0%, #0b6bb5 100%);
background-size:
26px 26px,
auto;
box-shadow: 0 30px 70px rgba(0, 30, 60, 0.35);
color: whitesmoke;
}
@media (max-width: 900px) {
.contact-panel {
grid-template-columns: 1fr;
}
}
/* --- left column: avatar, heading, note, placeholder photo --- */
.contact-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
border: 4px solid whitesmoke;
box-shadow: 0 10px 24px rgba(0, 20, 45, 0.35);
margin-bottom: var(--space-lg);
/* deep-sky night circle behind the mark - a full-bleed cover crop
would clip the wingtips against the round frame */
background: hsl(210, 100%, 14%);
display: flex;
align-items: center;
justify-content: center;
}
.contact-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.contact-avatar svg {
width: 64%;
height: 64%;
color: whitesmoke;
}
#contact-us h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2rem, 3vw + 1rem, 3.4rem);
line-height: 1.1;
color: hsl(42, 100%, 60%); /* the sunlight accent carries the title */
margin-bottom: var(--space-md);
}
.contact-note {
font-family: var(--font-body);
font-size: 1.05rem;
line-height: 1.7;
color: #eaf4fb;
max-width: 34ch;
margin-bottom: var(--space-lg);
}
/* PLACEHOLDER photo — swap src when the real one exists */
.contact-photo {
max-width: 340px;
}
.contact-photo img {
width: 100%;
height: auto;
border-radius: 20px;
border: 4px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 16px 36px rgba(0, 20, 45, 0.35);
}
/* --- right column: the conversational form --- */
#contact-form {
display: flex;
flex-direction: column;
align-items: stretch;
}
.field {
position: relative; /* anchors the ::after underline */
display: flex;
flex-direction: column;
gap: var(--space-xs);
margin-bottom: var(--space-lg);
width: 100%;
border: none; /* fieldsets reset */
padding: 0;
}
/* the conversational question above each control */
.field-label {
font-family: var(--font-body);
font-weight: 700;
font-size: 1.05rem;
color: whitesmoke;
}
.field input,
.field textarea {
width: 100%;
padding: 1em 1.2em;
border: 2px solid transparent;
border-radius: 14px;
font: inherit;
background: white;
color: #1f1e1d;
}
.field input::placeholder,
.field textarea::placeholder {
color: #9aa7b3;
}
.field input:focus,
.field textarea:focus {
outline: none;
border-color: hsl(42, 100%, 55%);
box-shadow: 0 0 0 4px rgba(255, 194, 51, 0.25);
}
/* the sweeping underline, now in sunlight gold */
.field::after {
content: "";
position: absolute;
bottom: -6px;
left: 0.3%;
width: 99%;
height: 2px;
border-radius: 1px;
background: hsl(42, 100%, 55%);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s ease;
}
.field:focus-within::after {
transform: scaleX(1);
}
/* --- the tier pills --- */
.tier-pills {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
.tier-pill input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.tier-pill span {
display: inline-block;
padding: 0.65em 1.5em;
border-radius: 30px;
background: white;
color: #1f1e1d;
font-weight: 700;
cursor: pointer;
transition:
background-color 0.25s ease,
translate 0.25s ease,
box-shadow 0.25s ease;
}
.tier-pill span:hover {
translate: 0 -2px;
box-shadow: 0 8px 16px rgba(0, 20, 45, 0.3);
}
.tier-pill input:checked + span {
background: hsl(42, 100%, 55%); /* their green, our sunlight */
}
.tier-pill input:focus-visible + span {
outline: 3px solid whitesmoke;
outline-offset: 2px;
}
/* custom dropdown arrow (native select — the no-JS fallback) */
.field select {
appearance: none;
background-image: url("images/dropdown-menu-svgrepo-com.svg");
background-repeat: no-repeat;
background-position: right var(--space-md) center;
background-size: 40px;
padding-right: var(--space-xl);
cursor: pointer;
}
/* ---- CUSTOM SELECT ----
The native