/* ==========================================================================
PRIME FRAME — Design System
Black / White / Red(accent). One typeface (Inter), weight-driven hierarchy.
========================================================================== */
/* Inter is loaded via + in
each page's (not @import) so the font request starts in parallel
with CSS parsing instead of after it — see README "Performance" notes. */
:root {
/* Colors */
--black: #0a0a0a;
--black-soft: #111111;
--black-elevated: #161616;
--white: #f7f7f5;
--off-white: #f2f1ed;
--paper: #eeece7;
--line: rgba(247, 247, 245, 0.14);
--line-strong: rgba(247, 247, 245, 0.28);
--line-dark: rgba(10, 10, 10, 0.12);
--line-dark-strong: rgba(10, 10, 10, 0.22);
--muted: rgba(247, 247, 245, 0.62);
--muted-dark: rgba(10, 10, 10, 0.6);
--red: #e2321f;
--red-dim: #8f2016;
/* Typography */
--font-sans: 'Inter', 'Inter Placeholder', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
/* Fluid type scale */
--fs-display: clamp(3rem, 2rem + 5.5vw, 8.5rem);
--fs-h1: clamp(2.4rem, 1.7rem + 3.6vw, 5.6rem);
--fs-h2: clamp(1.9rem, 1.5rem + 2vw, 3.4rem);
--fs-h3: clamp(1.35rem, 1.15rem + 1vw, 2rem);
--fs-h4: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
--fs-lead: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
--fs-body: 1rem;
--fs-small: 0.875rem;
--fs-micro: 0.75rem;
/* Spacing */
--space-section: clamp(3.6rem, 2.56rem + 4.8vw, 7.2rem);
--space-section-sm: clamp(2.4rem, 1.76rem + 3.2vw, 4.8rem);
--gutter: clamp(1.25rem, 0.9rem + 1.7vw, 3rem);
--container-max: 1480px;
--radius-sm: 2px;
--radius-md: 4px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--dur: 0.9s;
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
margin: 0;
}
ul, ol { padding: 0; list-style: none; }
img, picture, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; }
html, body { height: 100%; }
body {
background: var(--black);
color: var(--white);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* Homepage only: one continuous fixed background behind hero through the
final CTA, instead of each section re-painting its own copy. Scoped to
body.home so inner pages keep a plain background. */
body.home {
background:
radial-gradient(120% 90% at 85% 0%, rgba(226, 50, 31, 0.04), transparent 55%),
radial-gradient(90% 70% at 10% 100%, rgba(255,255,255,0.06), transparent 60%),
var(--black);
background-attachment: fixed;
}
body.no-scroll { overflow: hidden; }
/* ---------- Page transition (fade + blur) ----------
html gets an explicit dark background so there's nothing but solid
black behind body while it's mid-fade (opacity < 1) — no flash of
default UA white. The enter animation is unconditional CSS on body
(no JS needed to trigger it); main.js only adds .page-is-exiting
before navigating away, and cleans it up on bfcache restore. */
html { background: var(--black); }
/* No fill-mode on the enter animation: once it finishes, body's
`filter`/`opacity` revert to their un-animated base (filter: none),
rather than staying pinned at the keyframe's blur(0px) forever. That
matters because ANY non-'none' filter — even blur(0px) — makes body
a new containing block for its position:fixed descendants (.navbar,
.back-to-top, .nav-overlay), which would otherwise scroll away with
the page instead of staying pinned to the viewport. The exit
animation keeps `both` since the page unloads right after it
finishes anyway. */
body {
animation: page-fade-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
body.page-is-exiting {
animation: page-fade-out 0.35s ease-in both;
}
@keyframes page-fade-in {
from { opacity: 0; filter: blur(8px); }
to { opacity: 1; filter: blur(0); }
}
@keyframes page-fade-out {
from { opacity: 1; filter: blur(0); }
to { opacity: 0; filter: blur(8px); }
}
::selection { background: var(--red); color: var(--white); }
/* ---------- Base typography ---------- */
h1, h2, h3, h4 {
font-weight: 800;
line-height: 1.02;
letter-spacing: -0.03em;
text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: -0.01em; }
p { color: var(--muted); }
.section--light p { color: var(--muted-dark); }
.lead { font-size: var(--fs-lead); line-height: 1.4; font-weight: 400; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6em;
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
}
.section--light .eyebrow { color: var(--muted-dark); }
.eyebrow::before {
content: '';
width: 22px;
height: 1px;
background: var(--red);
display: block;
}
.eyebrow--plain::before { content: none; }
.text-red { color: var(--red); }
/* ---------- Layout ---------- */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section {
padding-block: var(--space-section);
position: relative;
}
.section--sm { padding-block: var(--space-section-sm); }
.section--light {
background: var(--off-white);
color: var(--black);
}
.section--light h1, .section--light h2, .section--light h3, .section--light h4 { color: var(--black); }
.section--soft { background: var(--black-soft); }
.section--border-t { border-top: 1px solid var(--line); }
.section--light.section--border-t { border-top: 1px solid var(--line-dark); }
/* ---------- Buttons ---------- */
.btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
padding: 1.05rem 1.9rem;
border-radius: var(--radius-sm);
border: 1px solid transparent;
transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn--primary {
background: var(--white);
color: var(--black);
}
.btn--primary:hover { background: var(--red); color: var(--white); }
.btn--outline {
background: transparent;
color: var(--white);
border-color: var(--line-strong);
}
.btn--outline:hover { border-color: var(--white); }
.section--light .btn--outline { color: var(--black); border-color: var(--line-dark-strong); }
.section--light .btn--outline:hover { border-color: var(--black); }
.btn--red {
background: var(--red);
color: var(--white);
}
.btn--red:hover { background: var(--white); color: var(--black); }
.btn--project {
background: var(--red);
color: var(--white);
padding: 0.875rem 2rem;
border: none;
border-radius: 8px;
font-weight: 500;
letter-spacing: 0.03em;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn--project:hover {
background: var(--red);
transform: translateY(-2px);
box-shadow: 0 10px 25px -5px rgba(224, 49, 31, 0.4);
}
.btn--ghost {
color: var(--white);
padding: 0.4rem 0;
text-transform: none;
letter-spacing: normal;
font-weight: 500;
font-size: var(--fs-body);
}
.btn--ghost::after {
content: '→';
display: inline-block;
margin-left: 0.4rem;
transition: transform var(--dur) var(--ease);
}
.btn--ghost:hover::after { transform: translateX(4px); }
.btn-arrow {
width: 1.1em; height: 1.1em;
flex-shrink: 0;
}
/* ---------- Frame corner motif ---------- */
.frame {
position: relative;
}
.frame::before, .frame::after,
.frame > .frame-mark::before, .frame > .frame-mark::after {
content: '';
position: absolute;
width: 22px;
height: 22px;
border: 1.5px solid var(--white);
opacity: 0.55;
pointer-events: none;
transition: opacity var(--dur) var(--ease);
}
.frame::before { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.frame::after { bottom: 12px; right: 12px; border-left: none; border-top: none; }
.frame:hover::before, .frame:hover::after { opacity: 1; }
.frame-tag {
position: absolute;
top: 12px;
right: 12px;
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: 0.15em;
color: var(--white);
opacity: 0.7;
font-variant-numeric: tabular-nums;
z-index: 2;
}
/* ---------- Navbar ---------- */
.navbar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding-block: 1.3rem;
transition: background var(--dur) var(--ease), padding var(--dur) var(--ease), border-color var(--dur) var(--ease);
border-bottom: 1px solid transparent;
}
.navbar.is-scrolled {
background: rgba(10, 10, 10, 0.82);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
padding-block: 0.9rem;
border-color: var(--line);
}
.navbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.logo {
display: flex;
align-items: center;
z-index: 110;
}
.logo__img {
height: 42px;
width: auto;
display: block;
}
.footer__brand .logo__img { height: 50px; }
.nav-links {
display: flex;
align-items: center;
gap: clamp(1.4rem, 1rem + 1.6vw, 2.6rem);
}
.nav-links a {
position: relative;
font-size: var(--fs-small);
font-weight: 500;
letter-spacing: 0.01em;
padding: 0.3rem 0;
color: var(--white);
}
.nav-links a::after {
content: '';
position: absolute;
left: 0; right: 100%;
bottom: -2px;
height: 1px;
background: var(--red);
transition: right var(--dur) var(--ease);
}
.nav-links a:hover::after, .nav-links a.is-active::after { right: 0; }
.nav-links a.is-active { color: var(--white); }
.navbar__actions { display: flex; align-items: center; gap: 1.2rem; }
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 30px; height: 30px;
z-index: 110;
}
.nav-toggle span {
display: block;
width: 100%;
height: 1.5px;
background: var(--white);
transition: transform 0.525s var(--ease), opacity 0.525s var(--ease);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-overlay {
position: fixed;
inset: 0;
background: var(--black);
z-index: 105;
display: flex;
flex-direction: column;
justify-content: center;
padding: 6rem var(--gutter) 3rem;
transform: translateY(-100%);
transition: transform 0.825s var(--ease);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.nav-overlay.is-open { transform: translateY(0); }
.nav-overlay__links {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.nav-overlay__links a {
font-size: clamp(2.2rem, 1.6rem + 3vw, 3.4rem);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.02em;
padding-block: 0.35rem;
border-bottom: 1px solid var(--line);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-overlay__links span { font-size: var(--fs-micro); color: var(--red); font-weight: 600; }
.nav-overlay__meta {
margin-top: 2.5rem;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
color: var(--muted);
font-size: var(--fs-small);
}
.nav-overlay__meta a { color: var(--white); }
@media (max-width: 900px) {
.nav-links { display: none; }
.navbar__actions .btn--project { display: none; }
.nav-toggle { display: flex; }
}
@media (max-height: 700px) {
.nav-overlay { padding-top: 5.5rem; justify-content: flex-start; }
.nav-overlay__links a { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); }
}
/* ---------- Hero ----------
Content-height rather than min-height: 100svh — the old full-viewport,
vertically-centered layout left huge dead space above the title and
below the CTAs on standard desktop heights. padding-top just clears
the fixed navbar (~93px unscrolled) with a little breathing room. */
.hero {
padding-top: clamp(6.5rem, 6rem + 1vw, 7rem);
padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
position: relative;
overflow: hidden;
}
.hero__title {
font-size: clamp(2.4rem, 1.6rem + 4.4vw, 6.8rem);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.035em;
line-height: 0.96;
overflow-wrap: break-word;
}
.hero__title em {
font-style: normal;
color: var(--red);
}
.hero__actions {
display: flex;
justify-content: center;
gap: 1.25rem;
flex-wrap: wrap;
margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.hero__cta { gap: 0; }
.hero__cta .btn-phone {
width: 0;
height: 1em;
opacity: 0;
margin-left: 0;
color: var(--red);
overflow: hidden;
transform: translateX(-6px);
transition: width var(--dur) var(--ease), opacity var(--dur) var(--ease), margin-left var(--dur) var(--ease), transform var(--dur) var(--ease);
flex-shrink: 0;
}
.hero__cta:hover .btn-phone {
width: 1em;
opacity: 1;
margin-left: 0.55em;
transform: translateX(0);
}
/* ---------- Client logo marquee ---------- */
.marquee {
position: relative;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee__track {
display: flex;
width: max-content;
animation: marquee-scroll 34s linear infinite;
}
.marquee__group {
--logo-gap: clamp(2.5rem, 1.8rem + 3.5vw, 5.5rem);
display: flex;
align-items: center;
flex-shrink: 0;
gap: var(--logo-gap);
/* Half the gap on each side so two adjacent groups read as one evenly
spaced row — the seam between them matches the internal gaps exactly. */
padding-inline: calc(var(--logo-gap) / 2);
}
.marquee__logo {
height: clamp(45px, 36px + 3vw, 66px);
width: auto;
flex-shrink: 0;
opacity: 0.7;
transition: opacity 0.3s ease, filter 0.3s ease;
}
.marquee__logo:hover {
opacity: 1;
filter: brightness(1);
}
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.marquee__track { animation: none; }
}
/* ---------- Section heading ---------- */
.section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 2rem;
margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
}
.section-head__title { max-width: 16ch; margin-top: 0.6rem; }
.section-head__aside { max-width: 34ch; }
.section-head__title--inline {
max-width: none;
margin-top: 0;
margin-bottom: 0.9rem;
font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
}
.section-head__desc {
max-width: 46ch;
margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
}
.section--tight-top { padding-top: calc(var(--space-section) * 0.8); }
@media (max-width: 780px) {
.section-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
/* ---------- Tighter homepage section rhythm ----------
20% off the shared --space-section/--space-section-sm clamps (all three
stops scaled, so it stays fluid) and off .cta-banner's own padding —
scoped to each homepage section individually (via 2-class selectors, so
they win over the shared single-class rules regardless of source order)
rather than touching the global tokens, which other pages (about.html,
work.html, plans.html, 404.html) also use at their original spacing. */
.home-trusted.section--sm {
padding-block: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}
.section.services-intro,
.section.why-intro,
.section.process-intro {
padding-block: clamp(2.88rem, 2.048rem + 3.84vw, 5.76rem);
}
.cta-banner.home-cta {
padding-block: clamp(3.2rem, 2.56rem + 3.2vw, 5.76rem);
}
/* ---------- Services intro header (Home — "Our Services") ----------
Scoped to this section only — .section-head/.section-head__title are
shared site-wide (work.html, plans.html, etc.), which should keep
their default left-aligned layout. */
.services-intro .section-head {
flex-direction: column;
align-items: center;
text-align: center;
}
.services-intro .section-head__title {
max-width: 1100px;
font-size: clamp(2rem, 3.5vw, 3.2rem);
}
/* ---------- Process intro header (Home — "How We Work") ----------
Same centered treatment as .services-intro above, scoped the same way
(.section-head is shared site-wide). */
.process-intro .section-head {
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.process-intro .section-head__title {
max-width: 1100px;
font-size: clamp(2rem, 3.5vw, 3.2rem);
}
/* ---------- Capability list (What We Do) ---------- */
.capability {
border-top: 1px solid var(--line);
}
.capability__row {
display: grid;
grid-template-columns: 100px 1fr 1fr;
align-items: center;
gap: 2rem;
padding-block: clamp(1.6rem, 1.3rem + 1.5vw, 2.6rem);
border-bottom: 1px solid var(--line);
}
/* Higher specificity than [data-reveal] / [data-reveal].is-visible (which
also match these rows and otherwise win the shared transition/transform
properties on source order alone) so the hover lift + glow always applies. */
.capability .capability__row {
transition: padding-left var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.capability .capability__row:hover {
background: rgba(247,247,245,0.03);
padding-left: 1rem;
transform: translateY(-2px);
box-shadow: 0 10px 25px -5px rgba(224, 49, 31, 0.4);
}
.capability__num {
font-size: var(--fs-small);
color: var(--muted);
font-weight: 700;
font-variant-numeric: tabular-nums;
transition: color var(--dur) var(--ease);
}
.capability .capability__row:hover .capability__num {
color: var(--red);
}
.capability__title {
font-size: var(--fs-h3);
font-weight: 700;
line-height: 1.5;
letter-spacing: -0.02em;
text-transform: uppercase;
text-wrap: initial;
}
.capability__desc { max-width: 46ch; }
@media (max-width: 900px) {
.capability__row { grid-template-columns: 50px 1fr; grid-template-areas: "num title" "num desc"; row-gap: 0.8rem; }
.capability__num { grid-area: num; }
.capability__title { grid-area: title; }
.capability__desc { grid-area: desc; }
}
/* ---------- Portfolio ---------- */
.portfolio-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--gutter);
}
.portfolio-grid.is-single { grid-template-columns: 1fr; }
@media (max-width: 900px) {
.portfolio-grid { grid-template-columns: 1fr; }
}
.p-card {
position: relative;
display: block;
border: 1px solid var(--line);
border-radius: var(--radius-md);
overflow: hidden;
cursor: pointer;
}
.p-card--wide { grid-column: span 2; }
@media (max-width: 900px) { .p-card--wide { grid-column: span 1; } }
.p-card__media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: linear-gradient(155deg, #1b1b1b, #0a0a0a 60%);
}
.p-card--wide .p-card__media { aspect-ratio: 16 / 9; }
.p-card__media::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(60% 60% at 30% 20%, rgba(226,50,31,0.14), transparent 60%),
repeating-linear-gradient(135deg, rgba(247,247,245,0.035) 0 2px, transparent 2px 26px);
transition: transform 1.35s var(--ease);
}
.p-card:hover .p-card__media::before { transform: scale(1.08) rotate(1deg); }
.p-card__ph-mark {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
font-weight: 800;
color: rgba(247,247,245,0.08);
letter-spacing: -0.02em;
user-select: none;
}
.p-card__body {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 1.4rem clamp(1.2rem, 1rem + 1vw, 2rem);
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1rem;
background: linear-gradient(to top, rgba(10,10,10,0.92), transparent);
}
.p-card__title { font-size: var(--fs-h4); font-weight: 400; line-height: 1.5; text-transform: uppercase; letter-spacing: -0.01em; text-wrap: initial; }
.p-card__meta { font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 0.3rem; }
.p-card__go {
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid var(--line-strong);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.p-card:hover .p-card__go { background: var(--red); border-color: var(--red); transform: rotate(45deg); }
.p-card__go svg { width: 16px; height: 16px; }
.p-card__tags {
position: absolute; top: 1rem; left: 1rem;
display: flex; gap: 0.4rem; flex-wrap: wrap;
}
.p-card__tag {
font-size: var(--fs-micro);
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.35rem 0.7rem;
border: 1px solid var(--line-strong);
border-radius: 100px;
backdrop-filter: blur(6px);
background: rgba(10,10,10,0.35);
}
.work-filters {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-bottom: clamp(2rem, 1.6rem + 1.5vw, 3rem);
}
.work-filter {
font-size: var(--fs-small);
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.6rem 1.1rem;
border: 1px solid var(--line-strong);
border-radius: 100px;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.work-filter.is-active, .work-filter:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.p-note {
margin-top: 2.5rem;
padding: 1.4rem 1.6rem;
border: 1px dashed var(--line-strong);
border-radius: var(--radius-md);
font-size: var(--fs-small);
color: var(--muted);
}
/* ---------- Why Prime Frame (split) ---------- */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 1.5rem + 2vw, 5rem);
align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split__list { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.1rem; }
.split__list li { display: flex; gap: 0.9rem; align-items: flex-start; color: var(--muted); }
.section--light .split__list li { color: var(--muted-dark); }
.split__list svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.2rem; color: var(--red); }
/* ---------- Why Prime Frame intro header (Home) ----------
Centered layout + horizontal checklist row, scoped to this section —
.founders-intro/.split__list aren't reused elsewhere, but .split itself
is, so everything here is scoped rather than edited on the base rules. */
.why-intro .founders-intro {
max-width: none;
}
.why-intro .eyebrow {
display: block;
text-align: center;
margin: 0 auto 1.5rem;
}
.why-intro h2 {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.why-intro .lead {
max-width: 720px;
text-align: center;
margin: 1.5rem auto 3rem;
}
.why-intro .split__list {
flex-direction: row;
justify-content: center;
align-items: flex-start;
gap: 2rem;
max-width: 1100px;
margin: 0 auto;
}
.why-intro .split__list li {
flex: 1;
max-width: 320px;
display: flex;
align-items: flex-start;
gap: 0.75rem;
text-align: left;
}
@media (max-width: 700px) {
.why-intro .split__list {
flex-direction: column;
gap: 1.25rem;
}
.why-intro .split__list li {
max-width: none;
}
}
/* ---------- Team collage (About — offset overlapping image stack) ----------
Three placeholder cards arranged as a collage: aspect-ratio (not a fixed
px height) keeps the 460:520 proportions intact at any width, so it
scales cleanly on mobile/tablet without clipping. Placeholder art is a
plain CSS gradient rather than hotlinked external images. */
.team-collage-container {
position: relative;
width: 100%;
max-width: 460px;
aspect-ratio: 460 / 520;
/* Trailing clearance for item--2's 25% downward shift below — kept as
margin (not a taller aspect-ratio) so it doesn't also drag item--1/
item--3's percentage-based positions along with it. */
margin: 0 auto clamp(50px, 15vw, 90px);
}
/* All three cards share one exact size (width + aspect-ratio) — position
and z-index are the only things that differ between them. */
.team-collage__item {
position: absolute;
width: 62%;
aspect-ratio: 4 / 5;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
overflow: hidden;
background: linear-gradient(160deg, var(--black-elevated), var(--black) 70%);
transition: transform 0.4s var(--ease), filter 0.4s var(--ease), z-index 0.2s;
}
/* Top/Back — anchored top-left, dimmed to sit behind the other two. */
.team-collage__item--1 {
top: 0;
left: 0;
z-index: 1;
filter: brightness(0.85);
}
/* Bottom/Front — left edge aligned with the top/back card (left: 0) and
shifted down 25% of its own height from its resting bottom:0 position;
the container's aspect-ratio was given extra room (above) so this
doesn't clip against the next section. Highest z-index so it overlaps
the bottom of the top card and the bottom-left corner of the right card. */
.team-collage__item--2 {
bottom: 0;
left: 0;
z-index: 3;
transform: translateY(25%);
}
/* Override (not the generic rule) so the hover lift composes with the
25% resting offset instead of replacing it. */
.team-collage__item--2:hover {
transform: translateY(calc(25% - 6px)) scale(1.02);
}
/* Right/Middle — offset right, vertically centered/slightly down. */
.team-collage__item--3 {
top: 24%;
right: 0;
z-index: 2;
}
.team-collage__item:hover {
transform: translateY(-6px) scale(1.02);
filter: brightness(1);
z-index: 4;
}
/* ---------- Portfolio intro header (Work — category picker) ----------
Same centered treatment as .services-intro/.process-intro on the
homepage; .eyebrow/.section-head__title are shared site-wide so this
stays scoped to the portfolio section only. */
.portfolio-intro {
padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.portfolio-intro .eyebrow {
display: flex;
justify-content: center;
margin-bottom: 0.9rem;
}
.portfolio-intro .section-head__title,
.portfolio-intro .section-head__desc {
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* ---------- Portfolio feed (categorized reel sections) ---------- */
.portfolio-feed__list {
margin-top: clamp(2.5rem, 2rem + 2.5vw, 4rem);
}
.portfolio-category {
text-align: center;
margin-top: clamp(3rem, 2.4rem + 3vw, 5rem);
}
.portfolio-category:first-child { margin-top: 0; }
.portfolio-category__title {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: 'JetBrains Mono', 'Space Mono', monospace;
font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--white);
margin-bottom: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
}
.portfolio-category__icon {
height: 1.38em;
width: 1.38em;
object-fit: contain;
flex-shrink: 0;
}
/* ---------- Selected Work (reel grid) ----------
A fixed 2-column grid, capped and centered, so the vertical 9:16
reels stay proportional instead of stretching edge-to-edge; each
category always carries exactly 2 clips, so no flex-wrap centering
trick is needed here the way the old single-video modal grid did. */
.reel-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
max-width: 900px;
margin: 0 auto;
}
@media (max-width: 640px) {
.reel-grid { grid-template-columns: 1fr; }
}
.reel-card {
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--black-soft);
overflow: hidden;
}
.reel-card__media {
position: relative;
aspect-ratio: 9 / 16;
overflow: hidden;
background: linear-gradient(155deg, #1b1b1b, #0a0a0a 60%);
cursor: pointer;
}
.reel-card__media:focus-visible {
outline: 2px solid var(--red);
outline-offset: -2px;
}
.reel-card__media::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(60% 60% at 30% 20%, rgba(226,50,31,0.14), transparent 60%),
repeating-linear-gradient(135deg, rgba(247,247,245,0.035) 0 2px, transparent 2px 26px);
pointer-events: none;
}
.reel-card__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* Fills the vertical frame without stretching; crops evenly on the
wider dimension rather than letterboxing. */
object-fit: cover;
}
.reel-card__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: clamp(48px, 40px + 2vw, 60px);
height: clamp(48px, 40px + 2vw, 60px);
border-radius: 50%;
background: rgba(247,247,245,0.94);
color: var(--black);
display: flex;
align-items: center;
justify-content: center;
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
pointer-events: none;
z-index: 1;
}
.reel-card__play svg { width: 28%; height: 28%; margin-left: 2px; }
.reel-card.is-playing .reel-card__play { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
/* Sound toggle — sits above the play affordance, own click target so it
doesn't also trigger the media's play/pause handler. Bottom-right so
it sits opposite the top-left niche badge without colliding with the
top-right frame-tag numbering. */
.reel-card__mute {
position: absolute;
bottom: 12px;
right: 12px;
z-index: 6;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.reel-card__mute:hover,
.reel-card__mute:focus-visible {
background: rgba(0, 0, 0, 0.8);
border-color: rgba(255, 255, 255, 0.3);
transform: scale(1.08);
}
.reel-card__mute-icon { width: 18px; height: 18px; }
.reel-card__mute-icon--on { display: none; }
.reel-card.is-unmuted .reel-card__mute-icon--on { display: block; }
.reel-card.is-unmuted .reel-card__mute-icon--off { display: none; }
/* Niche/industry badge — top-left, opposite the frame-tag numbering
at top-right, so the two never collide. */
.reel-card__badge {
position: absolute;
top: 16px;
left: 16px;
right: 16px;
z-index: 5;
pointer-events: none;
width: fit-content;
max-width: 100%;
padding: 0.4rem 0.85rem;
border-radius: 999px;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--white);
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* ---------- Founders row (Why Prime Frame) ---------- */
.founders-intro { max-width: 62ch; }
/* ---------- Process ---------- */
.process {
border-top: 1px solid var(--line);
}
.process__item {
display: grid;
grid-template-columns: 100px 1fr;
align-items: center;
gap: 2rem;
padding-block: clamp(1.6rem, 1.3rem + 1.5vw, 2.6rem);
border-bottom: 1px solid var(--line);
position: relative;
}
/* Same hover treatment as the homepage's "What We Do" list
(.capability .capability__row) — higher specificity than
[data-reveal]/[data-reveal].is-visible (also matched on these rows,
for their scroll-in animation) so the hover lift + glow always
applies instead of silently losing to the reveal system's own
transition/transform on source order alone. */
.process .process__item {
transition: padding-left var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.process .process__item:hover {
background: rgba(247, 247, 245, 0.03);
padding-left: 1rem;
transform: translateY(-2px);
box-shadow: 0 10px 25px -5px rgba(224, 49, 31, 0.4);
}
.process__num {
font-size: var(--fs-small);
color: var(--muted);
font-weight: 700;
font-variant-numeric: tabular-nums;
transition: color var(--dur) var(--ease);
}
.process .process__item:hover .process__num {
color: var(--red);
}
.process__body h3 { text-transform: uppercase; margin-bottom: 0.7rem; }
.process__body p { max-width: 56ch; }
@media (max-width: 700px) {
.process__item { grid-template-columns: 50px 1fr; gap: 0.8rem; }
}
/* ---------- Process cards (How We Work — homepage only) ----------
Five cards rendered simultaneously in a horizontal overlapping stack
(no slider, no JS) — each later card overlaps the previous one via a
negative margin + rising z-index, and pops forward on hover. Wraps to
a plain stacked column with normal spacing on tablet/mobile rather
than scrolling horizontally. */
.process-cards {
display: flex;
align-items: stretch;
justify-content: center;
position: relative;
width: 100%;
max-width: 1240px;
margin: 3rem auto 0;
padding: 2rem 0;
}
.process-card {
flex: 0 0 250px;
/* Solid/opaque at all times (including :hover below) — this sits in an
overlapping stack, so any transparency here lets the card behind
show through the front card's body, not just its background. */
background-color: #0b0b0b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 2rem 1.5rem;
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6);
position: relative;
}
/* Higher specificity than [data-reveal] (also matched on these cards, for
their scroll-in animation) — both set `transition`, and at equal
specificity [data-reveal] wins by being declared later in the file,
silently replacing this with its own opacity/transform-only, 1.35s
transition. */
.process-cards .process-card {
transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.55s ease,
background-color 0.55s ease,
opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
z-index 0s;
}
.process-card + .process-card {
margin-left: -36px;
}
.process-card:nth-child(1) { z-index: 1; }
.process-card:nth-child(2) { z-index: 2; }
.process-card:nth-child(3) { z-index: 3; }
.process-card:nth-child(4) { z-index: 4; }
.process-card:nth-child(5) { z-index: 5; }
/* Higher specificity than [data-reveal].is-visible (also matched on
these cards, for their scroll-in animation) — both set `transform` and
would otherwise tie at equal specificity, making the pop-out silently
lose to the reveal system once a card has revealed. */
.process-cards .process-card:hover {
/* Same opaque color as rest — no rgba tint, so nothing bleeds through.
z-index still rises (0s, instant) so the lifted card fully clears
its overlapping neighbors. */
background-color: #0b0b0b;
transform: translateY(-8px);
z-index: 10;
border-color: rgba(255, 255, 255, 0.28);
box-shadow: 0 10px 25px -5px rgba(224, 49, 31, 0.4);
}
.process-card__num {
font-family: 'JetBrains Mono', 'Space Mono', monospace;
font-size: 0.85rem;
letter-spacing: 0.15em;
color: rgba(255, 255, 255, 0.45);
margin-bottom: 1.25rem;
display: block;
transition: color 0.55s ease;
}
.process-cards .process-card:hover .process-card__num {
color: var(--red);
}
.process-card__title {
font-size: 1.15rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 0.75rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.process-card__desc {
font-size: 0.875rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.65);
}
@media (max-width: 900px) {
.process-cards {
flex-wrap: wrap;
gap: 1.25rem;
}
.process-card {
flex: 1 1 260px;
}
.process-card + .process-card {
margin-left: 0;
}
}
/* ---------- Pricing / Plans ---------- */
.plans-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gutter);
align-items: stretch;
}
@media (max-width: 1000px) { .plans-grid { grid-template-columns: 1fr; } }
.plan-card {
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: clamp(1.8rem, 1.5rem + 1vw, 2.6rem);
display: flex;
flex-direction: column;
position: relative;
transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.plan-card:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.plan-card--featured {
background: var(--black-soft);
border-color: var(--red);
}
.plan-card--featured:hover { border-color: var(--red); }
.plan-card__badge {
position: absolute;
top: -1px; right: 1.6rem;
background: var(--red);
color: var(--white);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.5rem 0.9rem;
border-radius: 0 0 4px 4px;
}
.plan-card__name { text-transform: uppercase; font-size: var(--fs-h3); font-weight: 400; line-height: 1.5; letter-spacing: normal; margin-bottom: 0.6rem; text-wrap: initial; }
.plan-card__desc { min-height: 3.6em; margin-bottom: 1.6rem; }
.plan-card__price {
display: flex;
align-items: baseline;
gap: 0.4rem;
padding-bottom: 1.6rem;
margin-bottom: 1.6rem;
border-bottom: 1px solid var(--line);
}
.plan-card__price strong { font-size: clamp(2rem, 1.6rem + 1vw, 2.8rem); font-weight: 800; }
.plan-card__price span { color: var(--muted); font-size: var(--fs-small); }
.plan-card__features { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 2rem; flex-grow: 1; }
.plan-card__features li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--fs-small); color: var(--white); }
.plan-card__features svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 0.15rem; color: var(--red); }
.plan-card__features li.is-muted { color: var(--muted); }
.plan-card__features li.is-muted svg { color: var(--muted); opacity: 0.4; }
.custom-plan {
margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
border: 1px dashed var(--line-strong);
border-radius: var(--radius-md);
padding: clamp(1.8rem, 1.5rem + 1.5vw, 3rem);
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
/* ---------- CTA banner ---------- */
.cta-banner {
text-align: center;
padding-block: clamp(4rem, 3.2rem + 4vw, 7.2rem);
position: relative;
overflow: hidden;
}
.cta-banner .eyebrow { justify-content: center; margin-bottom: 1rem; }
.cta-banner__title {
font-size: clamp(2.4rem, 1.8rem + 3.5vw, 5.5rem);
text-transform: uppercase;
max-width: 18ch;
margin-inline: auto;
}
.cta-banner__sub {
max-width: 46ch;
margin: 1.4rem auto 2.4rem;
font-size: var(--fs-lead);
}
.cta-banner__actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
/* ---------- Forms ---------- */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.4rem;
}
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.6rem; }
.field.full { grid-column: 1 / -1; }
.field label {
font-size: var(--fs-micro);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
}
.field input, .field textarea, .field select {
background: transparent;
border: none;
border-bottom: 1px solid var(--line-strong);
padding-block: 0.7rem;
font-size: 1rem;
color: var(--white);
transition: border-color var(--dur) var(--ease);
}
.field select { appearance: none; -webkit-appearance: none; }
.field select option { background: var(--black); color: var(--white); }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus, .field select:focus {
outline: none;
border-color: var(--red);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(247,247,245,0.32); }
.field-hint { font-size: var(--fs-micro); color: var(--muted); }
.select-wrap { position: relative; }
.select-wrap::after {
content: '↓';
position: absolute;
right: 0.2rem; top: 0.55rem;
color: var(--red);
pointer-events: none;
}
.form-submit-row {
margin-top: 2.2rem;
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.form-note { font-size: var(--fs-small); color: var(--muted); }
.form-status {
margin-top: 1.5rem;
padding: 1rem 1.2rem;
border-radius: var(--radius-md);
font-size: var(--fs-small);
display: none;
}
.form-status.is-success,
.form-status.is-error {
display: block;
animation: form-status-in 0.4s var(--ease);
}
.form-status.is-success { border: 1px solid var(--red); background: rgba(226,50,31,0.08); }
.form-status.is-error { border: 1px solid var(--line-strong); }
@keyframes form-status-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.contact-grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
align-items: start;
gap: clamp(2rem, 1.5rem + 2vw, 5rem);
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { display: flex; flex-direction: column; gap: 2rem; }
.contact-info__item { padding-block: 1.2rem; border-top: 1px solid var(--line); }
.contact-info__label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.5rem; }
.contact-info__value { font-size: var(--fs-h4); }
.contact-info__value a:hover { color: var(--red); }
/* ---------- Footer ---------- */
.footer {
background: var(--black);
border-top: 1px solid var(--line);
padding-top: clamp(3rem, 2.4rem + 3vw, 5rem);
}
/* On pages whose final section is a .cta-fade (index.html, about.html),
the footer's own hairline sits right where the fade already reaches
solid black — a visible seam cutting across that otherwise-smooth
transition. .footer sits inside a sibling of , not next to
.cta-fade itself, so this can't be reached with a sibling combinator;
the footer opts out explicitly instead. Other pages keep the normal
divider. */
.footer--no-top-border {
border-top: none;
}
.footer__top {
display: grid;
grid-template-columns: 1.4fr repeat(2, 1fr);
gap: 2.5rem;
padding-bottom: clamp(3rem, 2.4rem + 3vw, 5rem);
}
@media (max-width: 900px) {
.footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.footer__top { grid-template-columns: 1fr; }
}
.footer__brand p { margin-top: 1rem; max-width: 34ch; }
.footer__note { margin-top: 1.6rem; font-size: var(--fs-micro); letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
.footer__col-title { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 1.1rem; }
.footer__col ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__col a:hover { color: var(--red); }
.footer__bottom {
border-top: 1px solid var(--line);
padding-block: 1.6rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
font-size: var(--fs-micro);
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.footer__bottom-links { display: flex; gap: 1.5rem; }
.footer__bottom-links a:hover { color: var(--white); }
/* ---------- Page hero (inner pages) ---------- */
.page-hero {
padding-top: clamp(8rem, 7rem + 3vw, 11rem);
padding-bottom: var(--space-section-sm);
}
.page-hero__title { max-width: 20ch; }
/* Tighter than the shared .page-hero clamp — work.html is the only page
using this modifier, so pulling its hero closer to the fixed navbar
doesn't affect the About/Contact/Plans page heroes above it in the
cascade. */
.page-hero--tight {
padding-top: clamp(6rem, 5rem + 2vw, 7rem);
padding-bottom: 0.5rem;
}
.page-hero__row {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 2rem;
margin-top: 2rem;
flex-wrap: wrap;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: var(--fs-micro);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
margin-bottom: 1.5rem;
}
.breadcrumb a:hover { color: var(--white); }
/* Compact centered hero variant (about.html) — headline sits just below the
fixed navbar with controlled padding instead of filling the viewport. */
.page-hero--centered {
padding-top: clamp(60px, 10vh, 100px);
padding-bottom: clamp(30px, 5vh, 50px);
}
.page-hero--centered .container { width: 100%; }
.page-hero--centered .page-hero__title {
margin-inline: auto;
text-align: center;
}
/* Extra specificity to beat [data-reveal].is-visible's transform:translateY(0)
(equal-specificity, later in source) which would otherwise cancel this. */
.page-hero--centered .container .page-hero__title {
transform: translateY(45%);
}
/* ---------- Services page ---------- */
.service-block {
border-top: 1px solid var(--line);
padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
display: grid;
grid-template-columns: 320px 1fr;
gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
}
@media (max-width: 900px) { .service-block { grid-template-columns: 1fr; } }
.service-block__head { display: flex; flex-direction: column; gap: 1rem; }
.service-block__num { font-size: var(--fs-small); color: var(--red); font-weight: 700; }
.service-block__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem 2rem; }
@media (max-width: 560px) { .service-block__list { grid-template-columns: 1fr; } }
.service-block__list li {
display: flex;
align-items: baseline;
gap: 0.8rem;
padding-bottom: 0.9rem;
border-bottom: 1px solid var(--line);
font-weight: 500;
}
.service-block__list li span { color: var(--red); font-size: var(--fs-micro); }
/* ---------- Reveal animations ---------- */
[data-reveal] {
opacity: 0;
transform: translateY(28px);
transition: opacity 1.35s var(--ease), transform 1.35s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 90ms); }
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1; transform: none; transition: none; }
}
/* ---------- Edge-only fade, light section on dark (About "Our
Philosophy" + the "Let's Build Something" / "Ready To Put Your
Brand..." CTA banners) ----------
Two overlays (::before/::after) sitting only at the very top and
bottom edges — NOT a mask over the whole section, so headings/cards/
copy stay 100% crisp (pinned above via z-index). The fade itself uses
an eased, many-stop curve (matches var(--black) exactly, not pure
#000, so it terminates flush with the adjoining black sections) over
a wide enough span that it dissipates gradually instead of visibly
terminating — a straight 2-stop gradient reads as a harsh line right
where it hits full black; this eased curve avoids that. .cta-fade
reuses the same overlay rules (rather than duplicating them) so any
future tweak to the curve stays in sync across both. */
.philosophy-transition,
.cta-fade {
position: relative;
}
.philosophy-transition::before,
.philosophy-transition::after,
.cta-fade::before,
.cta-fade::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: clamp(140px, 15vh, 220px);
pointer-events: none;
z-index: 0;
}
.philosophy-transition::before,
.cta-fade::before {
top: 0;
background: linear-gradient(
to top,
rgba(10, 10, 10, 0) 0%,
rgba(10, 10, 10, 0.02) 15%,
rgba(10, 10, 10, 0.08) 30%,
rgba(10, 10, 10, 0.18) 45%,
rgba(10, 10, 10, 0.35) 60%,
rgba(10, 10, 10, 0.58) 75%,
rgba(10, 10, 10, 0.82) 88%,
rgba(10, 10, 10, 1) 100%
);
}
.philosophy-transition::after,
.cta-fade::after {
bottom: 0;
background: linear-gradient(
to bottom,
rgba(10, 10, 10, 0) 0%,
rgba(10, 10, 10, 0.02) 15%,
rgba(10, 10, 10, 0.08) 30%,
rgba(10, 10, 10, 0.18) 45%,
rgba(10, 10, 10, 0.35) 60%,
rgba(10, 10, 10, 0.58) 75%,
rgba(10, 10, 10, 0.82) 88%,
rgba(10, 10, 10, 1) 100%
);
}
.philosophy-transition .container,
.cta-fade .container {
position: relative;
z-index: 1;
}
/* Centered single-column header for this section only — .section-head
is shared site-wide (Team section, "How We Approach", etc.), which
should keep its default split two-column layout. */
.philosophy-transition .section-head {
flex-direction: column;
align-items: center;
text-align: center;
gap: 0;
}
.philosophy-transition .section-head__title {
max-width: none;
font-size: clamp(2rem, 3.5vw, 3.2rem);
}
.philosophy-transition .section-head__aside {
margin: 1.5rem auto 0;
text-align: center;
max-width: 760px;
font-size: 1.1rem;
line-height: 1.55;
}
.philosophy-transition .section-head__aside p + p {
margin-top: 0.9em;
}
/* Higher specificity than .section--light.section--border-t (2 classes)
so the fade replaces the hairline divider instead of sitting alongside
it, regardless of source order. */
.philosophy-transition.section--light.section--border-t,
.cta-fade.section--light.section--border-t {
border-top: none;
}
/* The section right after Philosophy ("Our Approach") — remove its own
top hairline too, so nothing draws a hard line where the fade above
already blends into black. .section--border-t is shared site-wide, so
this is scoped to just this section. */
.philosophy-next.section--border-t {
border-top: none;
}
/* ---------- Misc ---------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
@media (max-width: 800px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.section--light .stat { border-color: var(--line-dark); }
.stat strong { display: block; font-size: clamp(2rem, 1.6rem + 1.4vw, 3.2rem); font-weight: 800; letter-spacing: -0.02em; }
.stat span { font-size: var(--fs-small); color: var(--muted); }
.section--light .stat span { color: var(--muted-dark); }
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--white);
color: var(--black);
padding: 1rem 1.4rem;
z-index: 999;
font-weight: 600;
}
.skip-link:focus { left: 1rem; top: 1rem; }
.back-to-top {
position: fixed;
right: clamp(1rem, 0.7rem + 1vw, 2rem);
bottom: clamp(1rem, 0.7rem + 1vw, 2rem);
width: 48px; height: 48px;
border-radius: 50%;
background: var(--white);
color: var(--black);
display: flex; align-items: center; justify-content: center;
opacity: 0;
pointer-events: none;
transform: translateY(10px);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
z-index: 60;
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top svg { width: 18px; height: 18px; }
.page-stub {
padding-top: clamp(9rem, 7.5rem + 3vw, 12rem);
padding-bottom: var(--space-section);
}
.page-stub .lead { max-width: 62ch; }
.prose { max-width: 68ch; display: flex; flex-direction: column; gap: 1.1rem; }
.prose h2 { margin-top: 2rem; font-size: var(--fs-h4); text-transform: uppercase; }