/* ============================================================
Kimberley Kay Interiors — one-page marketing site
Warm, editorial, elevated. Ivory base, smoky-slate moody
accent (pulled from KKI's own kitchens + textiles), bronze
hairline details. Cormorant Garamond (Light) throughout.
============================================================ */
:root {
/* palette — black + cream editorial: warm cream base, near-black
bands, one restrained bronze accent. (Slate direction retired.) */
/* warm neutrals — greige-warm, not golden (blue lifted to cut the yellow
cast while red stays highest so it still reads warm) */
--ivory: #F5F1EC;
--linen: #ECE5DF;
--ink: #1B1815;
--ink-60: rgba(27, 24, 21, 0.64);
--slate: #24201A; /* soft near-black — moody band background */
--slate-deep: #16130F; /* deepest black — footer */
--bronze: #9E7F60; /* antique bronze — warmed off the old gold */
--white: #FFFFFF;
/* type — Cormorant Garamond (Light) for display/headings + the
wordmark; Arial for all body copy and descriptions (clean, highly
readable). Headings use var(--serif); everything else inherits the
body font (var(--sans) = Arial). */
--serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
--serif-italic: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
--sans: Arial, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
/* rhythm */
--space-section: clamp(5rem, 12vw, 9.5rem);
--wrap: 86rem; /* wider content — bigger photos */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Cormorant Garamond has a low x-height and runs small, so lift the root
size a touch — everything (rem-based) scales up proportionally to keep
the light weight readable. */
html { scroll-behavior: smooth; font-size: 106.25%; }
body {
font-family: var(--sans);
font-weight: 400;
color: var(--ink);
background: var(--ivory);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body.page-white { background: var(--white); }
body.page-white .ig { background: var(--white); }
img, video { display: block; max-width: 100%; }
/* our img/video display rules must never resurrect [hidden] elements */
[hidden] { display: none !important; }
ul, ol { list-style: none; }
a { color: inherit; }
em { font-style: italic; }
/* focus states */
:focus-visible {
outline: 2px solid var(--bronze);
outline-offset: 3px;
border-radius: 2px;
}
.skip-link {
position: absolute; left: 1rem; top: -4rem; z-index: 100;
background: var(--ink); color: var(--ivory);
padding: 0.6rem 1.2rem; border-radius: 3px;
font-size: 0.85rem; text-decoration: none;
transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 1rem; }
/* ---------- shared ---------- */
[id] { scroll-margin-top: 4.5rem; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 2.5vw, 1.75rem); }
.wrap--narrow { max-width: 54rem; }
.eyebrow {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bronze);
margin-bottom: 1.4rem;
}
.eyebrow--light { color: rgba(255, 255, 255, 0.85); }
h1, h2, h3 { font-family: var(--serif); font-weight: 300; line-height: 1.1; }
/* accent words use Cormorant's true italic (same family now) */
h1 em, h2 em, blockquote em, .intro-statement em {
font-family: var(--serif-italic);
font-style: italic;
}
/* Thank-you page — centered confirmation, headline stays on one line */
.thankyou {
min-height: 62vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: clamp(7rem, 15vh, 10rem) 1.2rem clamp(3rem, 8vw, 6rem);
}
.thankyou .wrap { max-width: 64rem; }
.thankyou-h {
font-size: clamp(1.1rem, 5vw, 3.6rem);
white-space: nowrap;
line-height: 1.05;
margin: 0.5rem 0 1.1rem;
}
.thankyou-h em { color: var(--bronze); }
.thankyou-sub { max-width: 46ch; margin: 0 auto; }
.thankyou-actions {
margin-top: 2.2rem;
display: flex;
gap: 0.9rem;
justify-content: center;
flex-wrap: wrap;
}
/* editorial caps system: key section headers run uppercase with gentle
tracking, while the Arapey italic accents stay lowercase — the
caps-vs-italic contrast is the signature */
.build-headline, .meet-headline, .footer-headline, .proc-h2, .flow-h2 {
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.12;
}
.build-headline em, .meet-headline em, .footer-headline em, .proc-h2 em, .flow-h2 em {
text-transform: none;
letter-spacing: 0;
}
.btn {
display: inline-block;
font-family: var(--sans);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
padding: 1rem 2.1rem;
border: 1px solid currentColor;
border-radius: 0; /* sharp — gallery-editorial, not soft */
color: var(--ink);
transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.btn--light { background: var(--white); border-color: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--bronze); border-color: var(--bronze); color: var(--white); }
.btn--solid { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.btn--solid:hover { background: var(--bronze); border-color: var(--bronze); color: var(--white); }
.btn--small { padding: 0.6rem 1.3rem; font-size: 0.7rem; }
.btn--big { padding: 1.15rem 2.8rem; }
/* scroll reveals — sections rise softly into view */
.reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* ============================================================
HEADER
============================================================ */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 50;
/* hamburger · centered wordmark · socials — menu-driven on every screen */
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1rem;
padding: 1.1rem clamp(1rem, 2.5vw, 1.75rem);
transition: background 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), padding 0.4s var(--ease-out);
}
/* centered wordmark (replaces the logo image) */
.brand-word {
grid-column: 2;
justify-self: center;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(0.95rem, 1.8vw, 1.5rem);
letter-spacing: 0.28em;
text-indent: 0.28em; /* recentre against the trailing tracking */
text-transform: uppercase;
white-space: nowrap;
text-decoration: none;
color: var(--white);
text-shadow: 0 1px 10px rgba(24, 20, 16, 0.45);
transition: color 0.3s;
}
/* hamburger — top left, always visible */
.nav-toggle {
grid-column: 1;
justify-self: start;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
width: 2.3rem;
height: 2.3rem;
padding: 0.4rem;
background: none;
border: 0;
cursor: pointer;
color: var(--white);
filter: drop-shadow(0 1px 5px rgba(24, 20, 16, 0.4));
}
.nav-toggle span { display: block; height: 1.5px; width: 100%; background: currentColor; }
/* socials — top right */
.header-social {
grid-column: 3;
justify-self: end;
display: flex;
align-items: center;
gap: clamp(0.85rem, 1.5vw, 1.35rem);
}
.header-social a {
display: inline-flex;
color: var(--white);
filter: drop-shadow(0 1px 5px rgba(24, 20, 16, 0.4));
transition: color 0.3s;
}
.header-social a:hover { color: var(--bronze); }
.header-social svg { width: 1.1rem; height: 1.1rem; display: block; }
/* solid state after leaving the hero */
.site-header.is-scrolled { background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(42, 36, 30, 0.08); padding-block: 0.75rem; }
.site-header.is-scrolled .brand-word { color: var(--ink); text-shadow: none; }
.site-header.is-scrolled .nav-toggle,
.site-header.is-scrolled .header-social a { color: var(--ink); filter: none; }
.site-header.is-scrolled .header-social a:hover { color: var(--bronze); }
/* mobile menu overlay */
.mobile-nav {
position: fixed;
inset: 0;
z-index: 70;
background: var(--ivory);
display: flex;
flex-direction: column;
padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem) 2rem;
overflow-y: auto;
}
.mobile-nav-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: clamp(2rem, 8vh, 3.5rem);
}
/* wordmark inside the overlay — ink on cream, no drop shadow */
.brand-word--panel { color: var(--ink); text-shadow: none; font-size: 0.9rem; }
.mobile-nav-close {
background: none;
border: 0;
font-size: 2.2rem;
line-height: 1;
padding: 0.2rem 0.6rem;
cursor: pointer;
color: var(--ink);
}
.mobile-nav-links { display: flex; flex-direction: column; gap: 1.5rem; }
.mobile-nav-links a {
font-family: var(--serif);
font-size: 2rem;
line-height: 1.1;
color: var(--ink);
text-decoration: none;
}
.mobile-nav-links a.is-active { color: var(--bronze); }
.mobile-nav-links .btn {
font-family: var(--sans);
font-size: 0.8rem;
margin-top: 1.25rem;
align-self: flex-start;
}
/* small screens: drop the socials, keep hamburger + wordmark */
@media (max-width: 34rem) {
.header-social { display: none; }
.brand-word { font-size: 0.8rem; letter-spacing: 0.18em; text-indent: 0.18em; }
}
@media (max-width: 43rem) {
.hero-content .eyebrow { font-size: 0.6rem; letter-spacing: 0.18em; }
}
/* ============================================================
1. HERO
============================================================ */
.hero {
position: relative;
/* 75vh banner on every screen — not a full takeover */
height: 75vh;
height: 75svh;
min-height: 28rem;
overflow: hidden;
background: var(--ink);
}
.hero-media, .hero-media .hero-poster, .hero-media video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-media video {
opacity: 0;
transition: opacity 1.4s ease;
}
.hero-media video.is-showing { opacity: 1; }
.hero-scrim {
position: absolute;
inset: 0;
background:
linear-gradient(to right, rgba(24, 20, 16, 0.5) 0%, rgba(24, 20, 16, 0) 58%),
linear-gradient(to top, rgba(24, 20, 16, 0.62) 0%, rgba(24, 20, 16, 0.18) 38%, rgba(24, 20, 16, 0) 60%),
linear-gradient(to bottom, rgba(24, 20, 16, 0.5) 0%, rgba(24, 20, 16, 0) 26%);
}
/* the shorter mobile hero puts text higher over the frame — darken more */
@media (max-width: 43rem) {
.hero-scrim {
background: linear-gradient(to top, rgba(24, 20, 16, 0.72) 0%, rgba(24, 20, 16, 0.42) 55%, rgba(24, 20, 16, 0.2) 100%);
}
}
.hero-content {
position: absolute;
left: clamp(1.25rem, 5vw, 4rem);
right: clamp(1.25rem, 5vw, 4rem);
bottom: clamp(3.5rem, 9vh, 6.5rem);
max-width: 46rem;
color: var(--white);
}
.hero-headline {
/* sized so each half of the
split holds one line -> two lines total */
font-size: clamp(2rem, 5.2vw, 4.2rem);
letter-spacing: 0;
line-height: 1.02;
margin-bottom: 1.1rem;
}
.hero-headline em { color: #D9BA9C; }
.hero-subhead {
font-size: clamp(1rem, 1.6vw, 1.2rem);
font-weight: 300;
max-width: 32em;
margin-bottom: 2rem;
color: rgba(255, 255, 255, 0.92);
}
.hero-cue {
position: absolute;
right: clamp(1.5rem, 4vw, 3rem);
bottom: 2.5rem;
height: 5rem;
width: 2rem;
display: flex;
justify-content: center;
}
.hero-cue-line {
display: block;
width: 1px;
height: 100%;
background: rgba(255, 255, 255, 0.55);
transform-origin: top;
animation: cue-drop 2.6s var(--ease-out) infinite;
}
@keyframes cue-drop {
0% { transform: scaleY(0); }
45% { transform: scaleY(1); transform-origin: top; }
46% { transform-origin: bottom; }
90%, 100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 43rem) { .hero-cue { display: none; } }
/* ============================================================
2. INTRO
============================================================ */
.intro { padding: var(--space-section) 0; }
.intro-statement {
font-family: var(--serif);
font-size: clamp(1.4rem, 3.1vw, 2.25rem);
font-weight: 400;
line-height: 1.38;
letter-spacing: 0;
}
.intro-statement em { color: var(--bronze); }
/* scroll-lit words: faint until the scroll inks them in (js/main.js) */
.intro-statement.is-split .w { color: rgba(27, 24, 21, 0.16); transition: color 0.4s var(--ease-out); }
.intro-statement.is-split .w.is-lit { color: var(--ink); }
.intro-statement.is-split em .w { color: rgba(156, 126, 82, 0.25); }
.intro-statement.is-split em .w.is-lit { color: var(--bronze); }
/* ============================================================
3. BUILD — scroll-scrubbed timelapse
Section is 230vh tall; .build-pin stays sticky for the
difference (~130vh) while JS scrubs the video.
============================================================ */
.build { height: 230vh; background: var(--ink); }
.build-pin {
position: sticky;
top: 0;
height: 100vh;
height: 100svh;
overflow: hidden;
}
.build-stage { position: relative; height: 100%; }
.build-video, .build-still, .build-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.build-panel {
position: absolute;
left: clamp(1.25rem, 4vw, 3.5rem);
top: clamp(4.5rem, 9vh, 6rem); /* below the fixed header; visible from the moment the section enters */
width: min(24rem, calc(100% - 2.5rem));
background: rgba(247, 243, 236, 0.93);
backdrop-filter: blur(8px);
padding: clamp(1.5rem, 3vw, 2.4rem);
border-radius: 4px;
}
.build-panel .eyebrow { margin-bottom: 0.9rem; }
.build-headline {
font-size: clamp(1.6rem, 2.8vw, 2.2rem);
margin-bottom: 1.4rem;
}
.build-panel-sub { color: var(--ink-60); font-size: 0.98rem; line-height: 1.55; }
/* CONTACT variant: split screen — text on the left, the (portrait) scroll-scrub
video on the right half so it isn't over-zoomed/blurry. Scrub effect unchanged. */
@media (min-width: 54rem) {
.build--contact .build-video,
.build--contact .build-still,
.build--contact .build-canvas {
left: 50%;
width: 50%;
}
.build--contact .build-panel {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 50%;
max-width: none;
background: transparent;
backdrop-filter: none;
border-radius: 0;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(2rem, 5vw, 5rem);
padding-top: clamp(5.5rem, 11vh, 7.5rem);
}
/* dark grasscloth weave behind the text — fixed, same treatment as the home
"Experience" band */
.build--contact .build-panel::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(18, 15, 11, 0.55), rgba(18, 15, 11, 0.55)),
url("../assets/img/grasscloth.jpg");
background-size: cover, 600px auto;
background-repeat: no-repeat, repeat;
background-attachment: fixed, fixed;
pointer-events: none;
z-index: 0;
}
.build--contact .build-panel > * { position: relative; z-index: 1; }
.build--contact .build-panel .eyebrow { color: #C9A87E; }
.build--contact .build-headline { color: var(--ivory); font-size: clamp(1.9rem, 3.2vw, 2.9rem); }
.build--contact .build-headline em { color: #D9BA9C; }
.build--contact .build-panel-sub { color: rgba(245, 241, 232, 0.78); font-size: 1.02rem; }
}
.build-layers {
display: flex;
flex-wrap: wrap;
gap: 0.45rem 1.1rem;
margin-bottom: 1.3rem;
}
.build-layers li {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-60);
opacity: 0.45;
transition: opacity 0.4s, color 0.4s;
}
.build-layers li.is-active { opacity: 1; color: var(--bronze); }
.build-layers li.is-done { opacity: 0.9; color: var(--ink); }
.build-progress {
height: 2px;
background: rgba(42, 36, 30, 0.14);
border-radius: 2px;
overflow: hidden;
}
.build-progress span {
display: block;
height: 100%;
width: 0%;
background: var(--bronze);
}
/* MOBILE: the overlay panel would cover most of the frame, so the
stage splits vertically instead — video on top, panel below on the
section's dark ground. Canvas sizes itself to its own box. */
@media (max-width: 43rem) {
.build-stage { display: flex; flex-direction: column; }
.build-video, .build-still, .build-canvas {
position: relative;
inset: auto;
width: 100%;
height: 54svh;
flex: 0 0 auto;
}
.build-panel {
position: static;
width: auto;
flex: 1;
background: none;
backdrop-filter: none;
color: var(--ivory);
padding: 1.4rem clamp(1.25rem, 5vw, 3rem) 1.25rem;
border-radius: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.build-panel .eyebrow { color: #C9A87E; }
.build-headline { font-size: 1.45rem; }
.build-panel-sub { color: rgba(245, 241, 232, 0.75); }
.build-layers li { color: rgba(245, 241, 232, 0.5); opacity: 1; }
.build-layers li.is-active { color: #D9BA9C; }
.build-layers li.is-done { color: var(--ivory); }
.build-progress { background: rgba(245, 241, 232, 0.2); }
}
/* CONTACT on mobile: the copy is its own band on the dark weave (.contact-intro-mobile,
full + scrollable), and the pinned scroll-scrub image owns the screen below it. */
.contact-intro-mobile { display: none; }
@media (max-width: 43rem) {
.build--contact .build-panel { display: none; } /* copy handled by the band above */
.build--contact .build-video,
.build--contact .build-still,
.build--contact .build-canvas { height: 100%; flex: 1 1 auto; }
.contact-intro-mobile {
display: block;
position: relative;
background: var(--ink);
color: var(--ivory);
overflow: hidden;
padding: clamp(7rem, 18vh, 9rem) clamp(1.25rem, 5vw, 2.5rem) clamp(2.75rem, 8vh, 4rem);
}
.contact-intro-mobile::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(18, 15, 11, 0.55), rgba(18, 15, 11, 0.55)),
url("../assets/img/grasscloth.jpg");
background-size: cover, 420px auto;
background-repeat: no-repeat, repeat;
z-index: 0;
pointer-events: none;
}
.contact-intro-mobile > * { position: relative; z-index: 1; }
.contact-intro-mobile .eyebrow { color: #C9A87E; margin-bottom: 0.9rem; }
.contact-intro-mobile__h {
font-family: var(--serif);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.01em;
font-size: clamp(1.9rem, 8vw, 2.6rem);
line-height: 1.12;
margin-bottom: 1.2rem;
}
.contact-intro-mobile__h em { color: #D9BA9C; font-style: italic; text-transform: none; }
.contact-intro-mobile__sub {
color: rgba(245, 241, 232, 0.78);
font-size: 1rem;
line-height: 1.55;
max-width: 40em;
}
}
/* loop + still fallback modes collapse the pin */
.build.is-static { height: auto; }
.build.is-static .build-pin { position: relative; height: auto; }
.build.is-static .build-stage { height: auto; aspect-ratio: 3 / 2; min-height: 70vh; }
.build.is-static .build-progress { display: none; }
/* ============================================================
SERVICES
============================================================ */
.services { padding: var(--space-section) 0; background: var(--linen); }
/* full-bleed services — big landscape photos, minimal side gutters */
.services .wrap { max-width: none; padding-inline: clamp(0.75rem, 1.5vw, 1.25rem); }
/* header row above the cards — heading left, button right (Jaimee Rose style) */
.services-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem 2rem;
flex-wrap: wrap;
margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
}
.services-title {
font-size: clamp(2rem, 4.4vw, 3.2rem);
line-height: 1.05;
letter-spacing: 0.02em;
margin-bottom: 0.55rem;
}
.services-sub {
color: var(--ink-60);
font-size: 1.02rem;
}
.services-head__btn { flex-shrink: 0; }
@media (max-width: 40rem) {
.services-head { align-items: flex-start; }
}
.services-list {
display: grid;
gap: clamp(1rem, 1.6vw, 1.5rem);
grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .services-list { grid-template-columns: repeat(3, 1fr); } }
.service { display: flex; flex-direction: column; }
/* photo at the top of each service card */
.service-media {
display: block;
position: relative;
overflow: hidden;
aspect-ratio: 3 / 4; /* tall portrait — like Jaimee Rose "See What's New" */
margin-bottom: 1.4rem;
}
/* taller than the frame so the image can drift on scroll (js/main.js [data-plx]) */
.service-media img {
position: absolute;
left: 0;
top: -8%;
width: 100%;
height: 116%;
object-fit: cover;
will-change: transform;
}
.service-icon {
width: 1.75rem;
height: 1.75rem;
color: var(--bronze);
margin-bottom: 0.6rem;
}
.service h3 {
font-size: 1.05rem;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 0.6rem;
}
.service p { color: var(--ink-60); max-width: 26em; }
.service:nth-child(2) { transition-delay: 0.12s; }
.service:nth-child(3) { transition-delay: 0.24s; }
/* ---- brand manifesto band ---- */
.manifesto {
background: var(--white);
/* even top/bottom padding */
padding: clamp(2.5rem, 6vw, 4rem) 0;
min-height: clamp(14rem, 30vh, 24rem);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.manifesto .wrap--narrow { max-width: 46rem; }
.manifesto-lead {
font-size: clamp(1.9rem, 4vw, 3.1rem);
line-height: 1.16;
text-wrap: balance;
margin-bottom: 1.4rem;
}
.manifesto-lead em { color: var(--bronze); }
/* the eyebrow is too text-heavy on small screens — desktop only */
@media (max-width: 40rem) { .manifesto .eyebrow { display: none; } }
.manifesto-sub {
max-width: 40em;
margin-inline: auto;
color: var(--ink-60);
font-size: clamp(1rem, 1.4vw, 1.15rem);
}
/* ---- reach / where we work ---- */
.reach { padding: var(--space-section) 0; background: var(--linen); }
.reach-head {
font-size: clamp(1.8rem, 3.6vw, 2.9rem);
text-wrap: balance;
max-width: 30ch; /* fits on two lines */
margin-bottom: 1.2rem;
}
.reach-head em { color: var(--bronze); }
.reach-intro { max-width: 40em; color: var(--ink-60); margin-bottom: clamp(2rem, 4vw, 3rem); }
.reach-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.9rem clamp(1.5rem, 4vw, 3rem);
border-top: 1px solid rgba(27, 24, 21, 0.16);
padding-top: clamp(1.5rem, 3vw, 2.2rem);
}
@media (min-width: 40rem) { .reach-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 60rem) { .reach-list { grid-template-columns: repeat(4, 1fr); } }
.reach-list li {
font-family: var(--serif);
font-size: clamp(1.05rem, 1.5vw, 1.3rem);
position: relative;
padding-left: 1.1rem;
}
.reach-list li::before {
content: "";
position: absolute;
left: 0; top: 0.62em;
width: 5px; height: 5px;
border-radius: 50%;
background: rgba(27, 24, 21, 0.35);
transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.reach-list a {
display: inline-block;
color: var(--ink);
text-decoration: none;
transition: color 0.3s var(--ease-out), transform 0.35s var(--ease-out);
}
/* fun hover — the city slides right + turns bronze, its dot grows */
.reach-list a:hover,
.reach-list a:focus-visible { color: var(--bronze); transform: translateX(6px); }
.reach-list li:has(a:hover)::before,
.reach-list li:has(a:focus-visible)::before { background: var(--bronze); transform: scale(1.8); }
.reach-list .reach-home a { color: var(--bronze); }
.reach-list .reach-home::before { background: var(--bronze); }
/* floating project thumbnail that follows the cursor */
.reach-peek {
position: fixed;
left: 0; top: 0;
width: clamp(12rem, 17vw, 16rem);
aspect-ratio: 4 / 3;
object-fit: cover;
pointer-events: none;
z-index: 40;
opacity: 0;
transition: opacity 0.35s var(--ease-out);
box-shadow: 0 24px 60px -20px rgba(27, 24, 21, 0.45);
}
.reach-peek.is-on { opacity: 1; }
/* ============================================================
4. WHY KKI — moody band
============================================================ */
/* The Experience — a COMPACT textured quote band (no pin, sized to the
quote so there's no empty space) */
.why { position: relative; padding: clamp(4rem, 10vh, 7rem) 0; background: var(--slate); color: var(--ivory); }
.why-inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
/* dark grasscloth weave surface (client's swatch), tiled at natural scale */
.why::before {
content: "";
position: absolute;
inset: 0;
/* dark scrim over the weave so it reads dark + the light text stays legible */
background-image:
linear-gradient(rgba(18, 15, 11, 0.6), rgba(18, 15, 11, 0.6)),
url("../assets/img/grasscloth.jpg");
background-size: cover, 600px auto;
background-repeat: no-repeat, repeat;
background-attachment: fixed, fixed;
opacity: 1;
pointer-events: none;
}
@media (hover: none) { .why::before { background-attachment: scroll, scroll; } }
.why .wrap--narrow { max-width: 62rem; text-align: center; }
.why .eyebrow--light { color: rgba(247, 243, 236, 0.6); }
.why-quote p {
font-family: var(--serif);
font-weight: 400;
/* sized to hold ~3 lines, centered */
font-size: clamp(1.3rem, 2.5vw, 1.95rem);
line-height: 1.4;
text-wrap: balance;
}
.why-quote em { color: #D9BA9C; }
/* ============================================================
4b. MEET KIM
============================================================ */
.meet { padding: var(--space-section) 0; }
.meet-grid {
display: grid;
gap: clamp(2.5rem, 6vw, 5rem);
grid-template-columns: 1fr;
align-items: center;
}
@media (min-width: 52rem) { .meet-grid { grid-template-columns: 6fr 5fr; } }
.meet-headline {
font-size: clamp(1.9rem, 3.8vw, 2.9rem);
margin-bottom: 1.4rem;
text-wrap: balance;
}
.meet-headline em { color: var(--bronze); }
.meet-body { max-width: 38em; color: var(--ink-60); margin-bottom: 1rem; }
.meet-media { position: relative; aspect-ratio: 5 / 6; overflow: clip; }
/* image is a touch taller than the frame so it can drift up/down on scroll
(js/main.js [data-plx]); reduced motion just leaves it parked. */
.meet-media img {
position: absolute;
left: 0;
top: -10%;
width: 100%;
height: 120%;
object-fit: cover;
object-position: center;
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.meet-media img { top: 0; height: 100%; }
}
/* hairline offset frame — reads like a mounted print */
.meet-media::after {
content: "";
position: absolute;
inset: 0.9rem 0.9rem 3.2rem;
border: 1px solid rgba(245, 241, 232, 0.55);
pointer-events: none;
}
.meet-caption {
margin-top: 0.9rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-60);
}
.meet-media.reveal { transition-delay: 0.12s; }
/* ============================================================
5. PORTFOLIO
============================================================ */
.portfolio { padding: var(--space-section) 0; }
.portfolio-head { max-width: 36rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.portfolio-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); text-wrap: balance; }
/* endless marquee — the track holds two identical card sets (second is
cloned by JS) and slides -50%, so the loop point is invisible.
Card spacing uses margin-right, not gap, so -50% lands exactly. */
.portfolio-marquee {
overflow: hidden;
padding-block: 0.5rem 1.5rem; /* room for the hover lift + shadow */
}
.portfolio-track {
display: flex;
width: max-content;
animation: portfolio-marquee 48s linear infinite;
}
.portfolio-track:hover,
.portfolio-track:focus-within { animation-play-state: paused; }
@keyframes portfolio-marquee {
to { transform: translateX(-50%); }
}
.portfolio-card {
position: relative;
display: block;
overflow: hidden;
border-radius: 4px;
/* full-bleed marquee — ~3 cards visible at a time across the viewport */
width: clamp(17rem, 31vw, 40rem);
flex-shrink: 0;
margin-right: clamp(0.75rem, 1.4vw, 1.25rem);
aspect-ratio: 4 / 5;
text-decoration: none;
transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.portfolio-card img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.8s var(--ease-out);
}
.portfolio-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -18px rgba(42, 36, 30, 0.45); }
.portfolio-card:hover img { transform: scale(1.04); }
.portfolio-label {
position: absolute;
left: 0.9rem; bottom: 0.8rem;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--white);
background: rgba(24, 20, 16, 0.55);
backdrop-filter: blur(4px);
padding: 0.35rem 0.7rem;
}
.pl-title { display: block; }
/* location tucks away until hover/focus reveals it */
.pl-loc {
display: block;
max-height: 0;
opacity: 0;
overflow: hidden;
font-size: 0.58rem;
letter-spacing: 0.2em;
color: #D9BA9C;
transition: max-height 0.4s var(--ease-out), opacity 0.4s var(--ease-out), margin-top 0.4s var(--ease-out);
}
.portfolio-card:hover .pl-loc,
.portfolio-card:focus-visible .pl-loc {
max-height: 1.4em;
opacity: 1;
margin-top: 0.2em;
}
/* ============================================================
6. SOCIAL PROOF
============================================================ */
.proof {
padding: var(--space-section) 0;
/* Fernandez kitchen behind the reviews — full photo, no wash (the review
cards carry their own background, so they stay readable on their own) */
background-color: var(--linen);
background-image: url("../assets/img/kindwords-bg.jpg");
background-size: cover;
background-position: center;
}
/* dual vertical marquee: left column drifts down, right drifts up.
Each track holds its cards twice (JS clones once); the keyframes
travel exactly -50% so the loop point is invisible. Cards use
margin-bottom (not gap) so -50% lands cleanly. */
.review-marquee {
display: grid;
grid-template-columns: 1fr;
column-gap: clamp(1.25rem, 3vw, 2.5rem);
height: 34rem;
overflow: hidden;
margin-bottom: clamp(2rem, 4vw, 3rem);
-webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}
@media (min-width: 46rem) { .review-marquee { grid-template-columns: 1fr 1fr; } }
@media (max-width: 45.99rem) { .review-col--up { display: none; } }
.review-col { overflow: hidden; }
.review-col-track { display: flex; flex-direction: column; width: 100%; }
.review-col--up .review-col-track { animation: review-drift-up 46s linear infinite; }
.review-col--down .review-col-track { animation: review-drift-down 38s linear infinite; }
.review-col-track:hover { animation-play-state: paused; }
@keyframes review-drift-up { to { transform: translateY(-50%); } }
@keyframes review-drift-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.review-card {
background: rgba(245, 241, 232, 0.95);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: clamp(1.4rem, 2.5vw, 2rem);
margin-bottom: clamp(1.25rem, 3vw, 2rem);
border: 1px solid rgba(27, 24, 21, 0.07);
}
.review-stars {
color: var(--bronze);
font-size: 0.85rem;
letter-spacing: 0.25em;
margin-bottom: 0.8rem;
}
.review-card blockquote p {
font-family: var(--serif);
font-weight: 400;
font-size: 1.05rem;
line-height: 1.5;
margin-bottom: 0.9rem;
}
.review-card figcaption {
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-60);
}
.review-loc {
display: block;
margin-top: 0.3rem;
color: var(--bronze);
text-transform: none;
letter-spacing: 0.03em;
font-size: 0.68rem;
}
.review-cta { text-align: center; margin-bottom: clamp(3rem, 7vw, 5rem); }
.placeholder-tag {
font-size: 0.62rem;
color: var(--bronze);
border: 1px solid currentColor;
padding: 0.1rem 0.5rem;
margin-left: 0.4rem;
text-transform: lowercase;
letter-spacing: 0.04em;
}
.press { border-top: 1px solid rgba(42, 36, 30, 0.18); padding-top: 2.2rem; }
/* FEATURED IN — standalone dark band (homepage) so it can't get lost */
.press-band {
background: var(--slate);
color: var(--ivory);
padding: clamp(3rem, 7vw, 5rem) 0;
}
.press-band .press-title { color: rgba(245, 241, 232, 0.55); }
.press-band .press-row { color: var(--ivory); opacity: 1; }
.press-band .press-logo span { color: rgba(245, 241, 232, 0.55); }
.press-band a.press-logo:hover { color: #D9BA9C; }
/* all five outlets on ONE line at desktop widths */
@media (min-width: 56rem) {
.press-band .press-row {
flex-wrap: nowrap;
justify-content: space-between;
gap: clamp(1rem, 2.5vw, 2.5rem);
}
.press-band .press-logo { white-space: nowrap; }
.press-band .press-logo--hgtv { font-size: clamp(1rem, 1.5vw, 1.45rem); }
.press-band .press-logo--luxury { font-size: clamp(0.9rem, 1.35vw, 1.3rem); }
.press-band .press-logo--podcast { font-size: clamp(0.88rem, 1.3vw, 1.25rem); }
.press-band .press-logo--voyage { font-size: clamp(0.82rem, 1.2vw, 1.15rem); }
.press-band .press-logo--serif { font-size: clamp(0.85rem, 1.25vw, 1.2rem); }
.press-band .press-logo span { font-size: clamp(0.48rem, 0.62vw, 0.6rem); }
}
/* subpage hero video (services) */
.hero--page .hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* FOLLOW ON INSTAGRAM — pre-footer strip on every page */
.ig { padding: clamp(3.5rem, 8vw, 6rem) 0 0; background: var(--ivory); }
.ig-head { display: inline-block; text-decoration: none; margin-bottom: 1.8rem; }
.ig-head .eyebrow { margin-bottom: 0.4rem; }
.ig-handle {
font-size: clamp(1.5rem, 3vw, 2.2rem);
color: var(--ink);
transition: color 0.3s;
}
.ig-head:hover .ig-handle { color: var(--bronze); }
.ig-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
}
@media (min-width: 46rem) { .ig-grid { grid-template-columns: repeat(6, 1fr); } }
.ig-grid a { display: block; overflow: hidden; aspect-ratio: 1; }
.ig-grid img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s var(--ease-out), opacity 0.4s;
}
.ig-grid a:hover img { transform: scale(1.06); opacity: 0.88; }
@media (max-width: 46rem) {
/* 3x2 on mobile: hide the last two tiles' overflow gracefully */
.ig-grid a:nth-child(n+7) { display: none; }
}
.press-title {
display: block;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-60);
margin-bottom: 1.6rem;
}
.press-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 1.8rem 3.2rem;
color: var(--ink);
opacity: 0.8;
}
.press-logo { display: inline-block; text-decoration: none; }
.press-logo span {
display: block;
font-family: var(--sans);
font-style: normal;
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-60);
margin-top: 0.2rem;
}
a.press-logo { transition: color 0.3s; }
a.press-logo:hover { color: var(--bronze); }
.press-logo--hgtv { font-family: var(--sans); font-weight: 700; font-size: 1.45rem; letter-spacing: 0.06em; }
.press-logo--luxury { font-family: var(--serif); font-size: 1.3rem; }
.press-logo--podcast { font-family: var(--serif-italic); font-style: italic; font-size: 1.25rem; }
.press-logo--voyage { font-family: var(--sans); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em; }
.press-logo--serif { font-family: var(--serif); font-size: 1.2rem; }
/* press logos as an endless marquee drifting to the RIGHT (js/main.js clones
the set once). align-items:center evens out the differently-sized logos. */
.press-row.is-marquee {
display: block;
overflow: hidden;
flex-wrap: initial;
gap: 0;
opacity: 1;
}
.press-track {
display: flex;
align-items: center;
width: max-content;
animation: pressScroll linear infinite;
}
.press-track > * { flex: 0 0 auto; margin-right: clamp(2.5rem, 6vw, 5rem); }
.press-row.is-marquee:hover .press-track { animation-play-state: paused; }
@keyframes pressScroll { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* ============================================================
7. CTA FOOTER
============================================================ */
/* standalone CTA band — full-bleed image, centred headline + button */
.cta-band {
position: relative;
min-height: clamp(22rem, 58vh, 38rem);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
color: var(--white);
/* sticky (fixed) background — the photo stays put while the band scrolls
over it, revealing the room like a window */
background: var(--ink) url("../assets/img/cta-devlin.jpg") center / cover fixed;
}
/* photo now lives in the section background; the ![]()
is kept for no-CSS
fallback but hidden when the fixed background is active */
.cta-band__img { display: none; }
@media (hover: none) {
/* iOS/touch mishandle fixed backgrounds — fall back to a normal scroll bg */
.cta-band { background-attachment: scroll; }
}
.cta-band__scrim {
position: absolute; inset: 0;
background: linear-gradient(rgba(24, 20, 16, 0.52), rgba(24, 20, 16, 0.46));
}
.cta-band__inner { position: relative; z-index: 1; padding: var(--space-section) 1.5rem; }
.cta-band__headline {
font-size: clamp(2.2rem, 5vw, 4rem);
color: var(--white);
margin-bottom: 1.9rem;
text-shadow: 0 2px 24px rgba(24, 20, 16, 0.45);
text-wrap: balance;
}
.cta-band__headline em {
font-family: var(--serif-italic);
font-style: italic;
font-size: 1.06em;
color: #D9BA9C;
}
/* light footer — matches the cream nav bar */
/* ---- tile texture over flat color on the key light sections ----
placed here (late) so it overrides each section's earlier flat bg.
strong linen wash keeps the diamond tile faint behind the copy. */
.intro, .reach, .deliv {
background-color: var(--ivory);
background-image:
linear-gradient(rgba(245, 241, 236, 0.72), rgba(245, 241, 236, 0.72)),
url("../assets/img/grasscloth-stripe.jpg");
background-size: auto, 620px auto;
background-repeat: repeat;
background-attachment: fixed;
}
@media (hover: none) { .intro, .reach, .deliv { background-attachment: scroll; } }
/* services + meet + recent-projects kept clean/light (no texture) */
.services { background: var(--white); }
.meet, .portfolio { background: var(--white); }
/* ============================================================
FOOTER — full editorial footer: faded wordmark, IG row,
Navigate / Contact / Stay-Connected columns
============================================================ */
.footer {
padding: clamp(3.5rem, 7vw, 6rem) 0 2.4rem;
color: var(--ink);
background-color: var(--white);
border-top: 1px solid rgba(27, 24, 21, 0.1);
text-align: center;
}
.footer-wordmark {
font-family: var(--serif);
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.2em;
/* vw-scaled + nowrap so the full name always sits on one line */
white-space: nowrap;
font-size: clamp(0.9rem, 4.5vw, 3.7rem);
line-height: 1;
color: rgba(27, 24, 21, 0.13);
margin-bottom: 1.3rem;
}
.footer-follow {
color: var(--ink-60);
font-size: 1rem;
white-space: nowrap;
margin: 0 auto clamp(2.2rem, 4.5vw, 3.4rem);
}
.footer-follow a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--bronze); padding-bottom: 1px; transition: color 0.3s; }
.footer-follow a:hover { color: var(--bronze); }
.footer-ig {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: clamp(0.5rem, 1vw, 1rem);
margin-bottom: clamp(2.6rem, 5vw, 4rem);
}
.footer-ig a { display: block; overflow: hidden; aspect-ratio: 1 / 1; }
.footer-ig img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.footer-ig a:hover img { transform: scale(1.05); }
/* endless marquee variant — js/main.js wraps the tiles in a track and clones
them once; the track scrolls left forever (paused on hover). */
.footer-ig.is-marquee { display: block; overflow: hidden; }
.footer-ig-track {
display: flex;
width: max-content;
animation: footerIgScroll linear infinite;
}
.footer-ig.is-marquee a {
flex: 0 0 auto;
width: clamp(9rem, 15vw, 13rem);
margin-right: clamp(0.5rem, 1vw, 1rem);
}
.footer-ig.is-marquee:hover .footer-ig-track { animation-play-state: paused; }
@keyframes footerIgScroll { to { transform: translateX(-50%); } }
.footer-cols {
display: grid;
grid-template-columns: 1fr 1fr 1.3fr;
gap: clamp(2rem, 4vw, 3.5rem);
text-align: left;
max-width: 60rem;
margin: 0 auto clamp(2.6rem, 5vw, 4rem);
}
.footer-col h3 {
font-family: var(--sans);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; }
.footer-col--nav li { margin-bottom: 0.55rem; }
.footer-col a { color: var(--ink-60); text-decoration: none; transition: color 0.3s; }
.footer-col a:hover { color: var(--bronze); }
.footer-col p { color: var(--ink-60); font-size: 0.95rem; line-height: 1.5; margin-bottom: 0.55rem; }
.footer-col--nav a { font-family: var(--serif); font-size: 1.05rem; }
/* social row tucked under Contact */
.footer-social { display: flex; gap: 1.3rem; margin-top: 1.1rem; list-style: none; }
.footer-social a { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-60); }
.footer-social a:hover { color: var(--bronze); }
/* newsletter */
.footer-news-form { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.9rem; }
.footer-news-form input {
font-family: var(--sans);
font-size: 0.9rem;
padding: 0.85rem 1rem;
border: 1px solid rgba(27, 24, 21, 0.26);
background: rgba(255, 255, 255, 0.55);
color: var(--ink);
}
.footer-news-form input::placeholder { color: var(--ink-60); }
.footer-news-form input:focus { outline: none; border-color: var(--bronze); }
.footer-news-form button {
font-family: var(--sans);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 0.95rem 1rem;
background: var(--ink);
color: var(--ivory);
border: 0;
cursor: pointer;
transition: background 0.3s;
}
.footer-news-form button:hover { background: var(--bronze); }
.footer-bottom {
max-width: 60rem;
margin: 0 auto;
padding-top: 1.8rem;
border-top: 1px solid rgba(27, 24, 21, 0.12);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-60);
}
.footer-bottom a { color: var(--ink-60); text-decoration: none; border-bottom: 1px solid rgba(27, 24, 21, 0.25); transition: color 0.3s, border-color 0.3s; }
.footer-bottom a:hover { color: var(--bronze); border-color: var(--bronze); }
.footer-sep { margin-inline: 0.3rem; }
@media (max-width: 52rem) {
.footer-cols { grid-template-columns: 1fr; text-align: center; gap: 2.2rem; }
.footer-social { justify-content: center; }
.footer-news-form { max-width: 22rem; margin-inline: auto; }
.footer-ig { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 40rem) {
.footer-wordmark { letter-spacing: 0.05em; font-size: min(5.9vw, 2.1rem); }
/* the follow line is too long to force onto one line on phones */
.footer-follow { white-space: normal; max-width: 34ch; }
}
@media (max-width: 34rem) {
.footer-ig { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
SUBPAGES — shared patterns for portfolio / services / about / contact
============================================================ */
.site-nav a.is-active:not(.btn) { color: var(--bronze); }
/* photo variant: a shorter full-bleed image hero for subpages */
.hero--page { height: clamp(26rem, 68vh, 42rem); overflow: hidden; }
/* About hero: zoom in ~20% (origin right) so the hallway wreath on the far left is cropped out */
.hero--page .hero-img { transform: scale(1.2); transform-origin: 72% center; }
/* generous, even breathing room around the contact details + form */
.contact-body { padding: clamp(4rem, 11vh, 8rem) 0 var(--space-section); }
/* keep the contact details in view while the long form scrolls */
@media (min-width: 52rem) {
.contact-details { position: sticky; top: clamp(5.5rem, 11vh, 7.5rem); align-self: start; }
}
/* centered text needs an even scrim rather than a bottom-weighted one */
.hero--page .hero-scrim {
background: linear-gradient(rgba(24, 20, 16, 0.44), rgba(24, 20, 16, 0.44));
}
.hero--page .hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero--page .hero-headline { font-size: clamp(2.1rem, 4.6vw, 3.6rem); text-wrap: balance; }
/* services hero: centered block, both axes */
.hero--page .hero-content {
left: 50%;
right: auto;
top: 50%;
bottom: auto;
transform: translate(-50%, -50%);
width: 100%;
max-width: 52rem;
padding-inline: clamp(1.25rem, 5vw, 2rem);
text-align: center;
}
.hero--page .hero-subhead { margin-inline: auto; }
/* two full-width photos under the services hero: wide 2/3 + narrow 1/3 */
.svc-duo {
display: grid;
grid-template-columns: 2fr 1fr;
gap: clamp(0.5rem, 1vw, 0.9rem);
height: clamp(18rem, 46vh, 32rem);
margin-top: clamp(0.75rem, 2vw, 1.5rem);
}
.svc-duo > div { overflow: hidden; }
.svc-duo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 40rem) {
.svc-duo { grid-template-columns: 1fr; height: auto; }
.svc-duo > div { aspect-ratio: 3 / 2; }
}
/* full-bleed portfolio hero slider, sitting just under the solid header.
Auto-advances (js/main.js [data-hero-slider]); 60vh is the max height. */
.portfolio-banner { margin-top: 4.5rem; position: relative; overflow: hidden; }
.hero-track { display: flex; will-change: transform; }
.hero-slide {
flex: 0 0 100%;
width: 100%;
height: 60vh;
min-height: 16rem;
object-fit: cover;
object-position: center;
}
/* slide indicator dots */
.hero-dots {
position: absolute;
left: 0; right: 0;
bottom: clamp(0.9rem, 2vh, 1.5rem);
display: flex;
justify-content: center;
gap: 0.55rem;
z-index: 2;
}
.hero-dot {
width: 8px; height: 8px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.55);
box-shadow: 0 1px 3px rgba(24, 20, 16, 0.35);
cursor: pointer;
transition: background 0.3s, transform 0.3s;
}
.hero-dot.is-active { background: #fff; transform: scale(1.35); }
.page-hero { padding: clamp(9rem, 16vh, 12rem) 0 clamp(2.5rem, 5vw, 4rem); }
/* when a banner precedes the title, it already clears the header — tighten the gap */
.portfolio-banner + .page-hero { padding-top: clamp(2.75rem, 6vw, 4.5rem); }
.page-hero h1 {
font-size: clamp(2.4rem, 6vw, 4.4rem);
text-wrap: balance;
max-width: 20ch;
}
.page-hero h1 em { color: var(--bronze); }
.page-hero .page-intro {
margin-top: 1.4rem;
max-width: 40em;
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--ink-60);
}
/* portfolio: mixed-aspect editorial columns */
.masonry {
columns: 1;
column-gap: clamp(1rem, 2vw, 1.6rem);
padding-bottom: var(--space-section);
}
@media (min-width: 34rem) { .masonry { columns: 2; } }
@media (min-width: 58rem) { .masonry { columns: 3; } }
.masonry figure {
break-inside: avoid;
margin-bottom: clamp(1rem, 2vw, 1.6rem);
}
.masonry a { display: block; overflow: hidden; text-decoration: none; }
.masonry img {
width: 100%;
transition: transform 0.8s var(--ease-out);
}
.masonry a:hover img { transform: scale(1.03); }
.masonry figcaption {
padding-top: 0.6rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-60);
}
/* services: WHAT WE DO — scroll-driven dial. Left column (lead + dial)
is sticky; tall steps on the right activate as they cross the viewport
midline while the dial's bronze ring fills. js/process.js drives it. */
.flow {
position: relative;
background: var(--white);
padding: var(--space-section) 0;
overflow: clip;
}
/* the shared faded backdrop is replaced by a photo per chapter */
.flow-bg { display: none; }
.flow-bg--legacy { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.flow-bg-sticky { position: sticky; top: 0; height: 100vh; width: 100%; }
.flow-bg-band {
position: absolute;
right: 0;
top: 9vh;
width: min(46%, 520px);
height: 82vh;
overflow: hidden;
}
.flow-bg-band img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.55;
-webkit-mask-image: linear-gradient(to left, #000 32%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to left, #000 32%, rgba(0,0,0,0) 100%);
}
.flow-bg-veil {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, var(--linen), rgba(235,229,216,0) 14%, rgba(235,229,216,0) 86%, var(--linen));
}
.flow-inner { position: relative; z-index: 1; }
.flow-canvas {
display: grid;
/* photos/chapters on the LEFT (wide), dial + lead on the RIGHT (narrow) */
grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
gap: clamp(2.5rem, 6vw, 5.5rem);
align-items: start;
}
.flow-steps { grid-column: 1; }
.flow-visual {
grid-column: 2;
position: sticky;
/* clears the fixed header so the eyebrow never clips while pinned */
top: clamp(5.25rem, 10vh, 6.75rem);
align-self: start;
display: flex;
flex-direction: column;
gap: clamp(1.5rem, 3.5vw, 2.75rem);
}
.flow-lead { display: flex; flex-direction: column; gap: 1rem; }
.flow-h2 { font-size: clamp(1.6rem, 2.6vw, 2.35rem); text-wrap: balance; max-width: 32rem; }
.flow-h2 em { color: var(--bronze); }
.flow-lead-p { max-width: 40ch; color: var(--ink-60); }
/* the dial */
.flow-dial { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1; }
.flow-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow-spin { transition: transform 0.3s linear; transform-origin: 100px 100px; }
.flow-prog { transition: stroke-dashoffset 0.3s var(--ease-out); }
.flow-node {
fill: var(--linen);
stroke: rgba(27, 24, 21, 0.45);
stroke-width: 1.5;
transition: fill 0.4s var(--ease-out), stroke 0.4s var(--ease-out);
}
.flow-node.is-past { fill: var(--ink); stroke: var(--ink); }
.flow-node.is-active { fill: var(--bronze); stroke: var(--bronze); }
.flow-dialface {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.6rem;
padding: 20%;
}
.flow-dial-cap, .flow-dial-count {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--ink-60);
}
.flow-dial-num {
font-family: var(--serif);
font-size: clamp(3.25rem, 7vw, 5rem);
line-height: 0.9;
color: var(--ink);
transition: opacity 0.36s var(--ease-out), transform 0.48s var(--ease-out);
}
.flow-dial-slug {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink);
transition: opacity 0.36s var(--ease-out), transform 0.48s var(--ease-out);
}
.flow-swap { opacity: 0; transform: translateY(8px); }
/* the steps */
.flow-steps { position: relative; }
.flow-step {
position: relative;
z-index: 1;
min-height: clamp(22rem, 80vh, 47rem);
padding: 14vh 0;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 0.4;
transition: opacity 0.6s var(--ease-out);
}
.flow-step:not(:last-child) { border-bottom: 1px solid rgba(27, 24, 21, 0.12); }
.flow-step.is-active { opacity: 1; }
.flow-step-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(1.1rem, 2.4vw, 2.5rem);
align-items: start;
}
.flow-num {
font-family: var(--serif);
font-size: clamp(3.4rem, 7vw, 7.25rem);
line-height: 0.82;
-webkit-text-stroke: 1px rgba(27, 24, 21, 0.55);
color: transparent;
transition: color 0.6s var(--ease-out), -webkit-text-stroke-color 0.6s var(--ease-out);
}
.flow-step.is-active .flow-num, .flow-step.is-past .flow-num {
color: var(--ink);
-webkit-text-stroke-color: var(--ink);
}
/* large photo above each chapter's text */
.flow-step-photo {
aspect-ratio: 16 / 10;
overflow: hidden;
margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
}
.flow-step-photo img { width: 100%; height: 100%; object-fit: cover; }
.flow-step-body { padding-top: 0.5rem; display: flex; flex-direction: column; gap: 1rem; max-width: 39rem; }
.flow-step-label {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-60);
display: flex;
align-items: center;
gap: 0.6rem;
}
.flow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bronze); display: inline-block; }
.flow-step h3 { font-size: clamp(1.6rem, 3vw, 2.5rem); text-wrap: pretty; }
.flow-step p { color: var(--ink-60); font-size: clamp(1rem, 1.2vw, 1.1rem); text-wrap: pretty; transition: color 0.6s var(--ease-out); }
.flow-step.is-active p { color: var(--ink); }
@media (max-width: 56rem) {
.flow-canvas { grid-template-columns: 1fr; gap: 1rem; }
.flow-visual { display: contents; }
.flow-bg { display: none; }
.flow-lead { order: -1; }
.flow-dial { position: sticky; top: 4.5rem; z-index: 5; max-width: 11.75rem; margin: 0 auto; }
.flow-dial::before {
content: "";
position: absolute;
top: -1rem; bottom: -0.6rem;
left: 50%; transform: translateX(-50%);
width: 100vw;
background: var(--white);
z-index: -1;
}
.flow-dial::after {
content: "";
position: absolute;
top: 100%; left: 50%; transform: translateX(-50%);
margin-top: -0.6rem;
width: 100vw; height: 4.5rem;
background: linear-gradient(var(--white), rgba(255, 255, 255, 0));
z-index: -1;
}
.flow-dialface { padding: 15%; gap: 0.25rem; }
.flow-dialface .flow-dial-num { font-size: 2.1rem; }
.flow-dialface .flow-dial-slug { font-size: 0.6rem; letter-spacing: 0.1em; }
.flow-step { min-height: auto; padding: 1.9rem 0; }
}
/* portfolio: gallery index — title + location per project; hovering
crossfades to a second photo from the same project with a slow zoom
and an italic "take the tour" cue */
/* portfolio catalog runs full-bleed edge to edge */
.catalog .wrap { max-width: none; padding-inline: clamp(0.75rem, 1.5vw, 1.25rem); }
.gallery-grid {
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.6rem);
grid-template-columns: 1fr;
padding-bottom: var(--space-section);
}
@media (min-width: 34rem) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 58rem) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gallery-card { display: block; text-decoration: none; }
/* hero clip that plays over a card on hover (js/main.js wireCardVideo) */
.card-vid {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.5s var(--ease-out);
z-index: 3;
pointer-events: none;
}
.card-vid.is-on { opacity: 1; }
.portfolio-label { position: relative; z-index: 4; }
.gallery-media {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 4 / 5;
background: var(--linen);
}
.gallery-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.7s var(--ease-out), transform 1.2s var(--ease-out);
}
.gallery-img--b { opacity: 0; }
.gallery-card:hover .gallery-img { transform: scale(1.05); }
.gallery-card:hover .gallery-img--b { opacity: 1; }
.gallery-cue {
position: absolute;
left: 1rem;
bottom: 1rem;
font-family: var(--serif-italic);
font-style: italic;
font-size: 1.15rem;
color: var(--white);
background: rgba(24, 20, 16, 0.55);
backdrop-filter: blur(4px);
padding: 0.3rem 0.9rem;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.gallery-card:hover .gallery-cue,
.gallery-card:focus-visible .gallery-cue { opacity: 1; transform: none; }
.gallery-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding-top: 0.75rem;
}
.gallery-title {
font-family: var(--serif);
font-size: 1.15rem;
color: var(--ink);
transition: color 0.3s;
}
.gallery-card:hover .gallery-title { color: var(--bronze); }
.gallery-loc {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-60);
white-space: nowrap;
}
/* project template (project.html?p=slug — content from projects.json) */
.project-back { color: var(--bronze); text-decoration: none; }
.project-back:hover { color: var(--ink); }
.project-loc {
font-size: 0.72rem !important;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.project-grid {
display: grid;
gap: clamp(1rem, 2vw, 1.6rem);
grid-template-columns: 1fr;
}
@media (min-width: 34rem) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 58rem) { .project-grid { grid-template-columns: repeat(4, 1fr); } }
.project-photo { overflow: hidden; background: var(--linen); aspect-ratio: 4 / 5; cursor: zoom-in; }
.project-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.project-photo:hover img { transform: scale(1.04); }
/* ============================================================
LIGHTBOX — full-screen zoomable photo viewer (js/lightbox.js)
============================================================ */
.lb {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(18, 15, 11, 0.95);
display: flex;
align-items: center;
justify-content: center;
}
.lb-stage {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.lb-img {
max-width: 92vw;
max-height: 86vh;
object-fit: contain;
cursor: zoom-in;
transition: transform 0.25s var(--ease-out);
touch-action: none;
user-select: none;
-webkit-user-drag: none;
}
.lb-img.is-zoomed { cursor: grab; transition: none; }
.lb-x {
position: absolute;
top: 0.9rem; right: 1.2rem;
z-index: 2;
background: none; border: 0;
color: #fff; font-size: 2.5rem; line-height: 1;
cursor: pointer; opacity: 0.8;
}
.lb-x:hover { opacity: 1; }
.lb-nav {
position: absolute; top: 50%;
transform: translateY(-50%);
z-index: 2;
background: rgba(0, 0, 0, 0.28); border: 0;
color: #fff; font-size: 2rem;
width: 3.2rem; height: 3.2rem; border-radius: 50%;
cursor: pointer; opacity: 0.75;
display: flex; align-items: center; justify-content: center;
transition: opacity 0.3s, background 0.3s;
}
.lb-nav:hover { opacity: 1; background: rgba(0, 0, 0, 0.5); }
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }
.lb-bar {
position: absolute; bottom: 1rem; left: 0; right: 0;
display: flex; gap: 0.9rem; justify-content: center;
color: rgba(255, 255, 255, 0.85);
font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.06em;
}
.lb-count { font-weight: 600; }
.lb-cap { opacity: 0.7; }
@media (max-width: 40rem) {
.lb-img { max-width: 100vw; max-height: 82vh; }
.lb-nav { width: 2.6rem; height: 2.6rem; font-size: 1.7rem; }
.lb-prev { left: 0.4rem; } .lb-next { right: 0.4rem; }
}
.portfolio-how { padding: 0 0 var(--space-section); }
.portfolio-how-copy { color: var(--ink-60); font-size: 1.05rem; line-height: 1.75; }
.portfolio-how-copy + .portfolio-how-copy { margin-top: 1.2rem; }
.portfolio-how-copy strong { color: var(--ink); font-weight: 600; }
.project-intro { max-width: 46em !important; }
.read-more {
display: inline-block;
margin-top: 1.4rem;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
color: var(--bronze);
border-bottom: 1px solid rgba(156, 126, 82, 0.4);
padding-bottom: 3px;
transition: color 0.3s, border-color 0.3s;
}
.read-more:hover { color: var(--ink); border-color: var(--ink); }
.project-story {
max-width: 46rem;
margin-top: clamp(2.5rem, 5vw, 4rem);
}
.project-story .eyebrow { margin-bottom: 1.2rem; }
.project-story p:not(.eyebrow) {
color: var(--ink-60);
margin-bottom: 1.1rem;
font-size: 1.02rem;
line-height: 1.7;
}
.project-nav {
display: flex;
justify-content: space-between;
gap: 2rem;
margin-top: clamp(2.5rem, 5vw, 4rem);
padding: clamp(1.5rem, 3vw, 2.2rem) 0 var(--space-section);
border-top: 1px solid rgba(27, 24, 21, 0.18);
}
.project-nav a { text-decoration: none; color: var(--ink-60); max-width: 45%; }
.project-nav a:last-child { text-align: right; }
.project-nav a:hover .project-nav-title { color: var(--bronze); }
.project-nav-label {
display: block;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 0.35rem;
}
.project-nav-title {
font-family: var(--serif);
font-size: 1.15rem;
color: var(--ink);
transition: color 0.3s;
}
/* services: THE PROCESS — sticky horizontal machine. The section is
taller than the viewport; a 100vh stage pins while the step cards
travel horizontally with scroll. Stacked by default (mobile / no-JS /
reduced motion); js/process.js adds .is-live on desktop. */
.proc { position: relative; background: var(--slate); color: var(--ivory); }
/* dark grasscloth weave surface — same treatment as the home "Experience" band */
.proc::before {
content: "";
position: absolute;
inset: 0;
/* dark scrim over the weave so it reads dark + the light text stays legible */
background-image:
linear-gradient(rgba(18, 15, 11, 0.6), rgba(18, 15, 11, 0.6)),
url("../assets/img/grasscloth.jpg");
background-size: cover, 600px auto;
background-repeat: no-repeat, repeat;
/* anchor the texture to the viewport so it stays put while the pinned
process machine scrolls over it */
background-attachment: fixed, fixed;
opacity: 1;
pointer-events: none;
z-index: 0;
}
@media (hover: none) { .proc::before { background-attachment: scroll; } }
.proc-stage {
position: relative;
z-index: 1;
max-width: var(--wrap);
margin-inline: auto;
padding: var(--space-section) clamp(1.25rem, 5vw, 3rem);
display: grid;
gap: clamp(2.75rem, 6vw, 4.5rem);
}
.proc-left { display: flex; flex-direction: column; gap: clamp(1.25rem, 2.4vw, 1.75rem); }
.proc-h2 { font-size: clamp(2rem, 4.2vw, 3.9rem); text-wrap: balance; max-width: 15ch; }
.proc-h2 em { color: #D9BA9C; }
.proc-lead { color: rgba(245, 241, 232, 0.75); max-width: 46ch; }
.proc-figure {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
border: 1px solid rgba(245, 241, 232, 0.16);
}
/* frame on Kim's face so it isn't cropped out of the landscape crop */
.proc-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.proc-meta {
display: none;
align-items: center;
gap: 0.7rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245, 241, 232, 0.55);
}
.proc-meta .proc-count { font-family: var(--serif); font-size: 1.3rem; letter-spacing: 0; color: var(--ivory); }
.proc-meta .proc-now { color: rgba(245, 241, 232, 0.8); }
.proc-right { min-width: 0; }
.proc-progress { display: none; }
.proc-track { display: flex; flex-direction: column; gap: clamp(1.9rem, 4vw, 2.75rem); }
.proc-card { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.9rem; }
.proc-card-img {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
border: 1px solid rgba(245, 241, 232, 0.16);
}
.proc-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proc-card-label {
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(245, 241, 232, 0.55);
display: flex;
align-items: center;
gap: 0.55rem;
}
.proc-card-label .proc-n { color: #C9A87E; }
.proc-card h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); color: var(--ivory); }
.proc-card-rule { width: 40px; height: 2px; background: var(--bronze); }
.proc-card p { color: rgba(245, 241, 232, 0.62); font-size: 0.98rem; text-wrap: pretty; }
/* live: the desktop horizontal machine (js adds .is-live + section height) */
.proc.is-live .proc-stage {
position: sticky;
top: 0;
height: 100vh;
height: 100svh;
max-width: none;
margin: 0;
padding: 0;
display: flex;
align-items: stretch;
gap: 0;
overflow: hidden;
}
.proc.is-live .proc-left {
flex: 0 0 clamp(22.5rem, 37vw, 35rem);
justify-content: center;
padding: clamp(2.75rem, 6vh, 5.25rem) clamp(2rem, 3.4vw, 3.75rem);
border-right: 1px solid rgba(245, 241, 232, 0.16);
}
.proc.is-live .proc-figure { aspect-ratio: 16 / 11; }
.proc.is-live .proc-meta { display: flex; }
.proc.is-live .proc-right {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(2.75rem, 6vh, 5.25rem) clamp(2rem, 3.4vw, 3.75rem);
overflow: hidden;
}
.proc.is-live .proc-progress {
display: block;
position: relative;
height: 1px;
background: rgba(245, 241, 232, 0.16);
margin-bottom: clamp(1.9rem, 4vh, 3.25rem);
}
.proc.is-live .proc-progress-fill { position: absolute; left: 0; top: 0; height: 1px; background: var(--bronze); width: 0; }
.proc.is-live .proc-track {
flex-direction: row;
flex-wrap: nowrap;
gap: clamp(2rem, 3vw, 3.5rem);
will-change: transform;
transform: translate3d(var(--proc-tx, 0), 0, 0);
transition: transform 0.18s var(--ease-out);
}
.proc.is-live .proc-card {
flex: 0 0 clamp(20rem, 29vw, 26rem);
opacity: 0;
transform: translateY(26px);
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.proc.is-live .proc-card[data-in="1"] { opacity: 1; transform: none; }
/* sticky room reveal — a tall photo pinned in a viewport frame; the
crop pans top→bottom as you scroll the (taller) section, revealing the
whole room. js/main.js drives the object-position. */
/* its own sticky reveal section — an 80vh frame pins while the crop pans
top→bottom (js/main.js), revealing the whole room */
/* simple 80vh window with the image pinned behind it (fixed background) */
.room-reveal {
height: 80vh;
background-color: var(--ink);
background-image: url("../assets/img/reveal-study-183.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
@media (prefers-reduced-motion: reduce), (hover: none) {
/* iOS/Safari and touch devices mishandle fixed backgrounds — just scroll normally */
.room-reveal { background-attachment: scroll; }
}
/* parallax band — full-width image drifting slower than the page */
.plx {
position: relative;
height: clamp(22rem, 78vh, 42rem);
overflow: clip;
}
.plx img {
position: absolute;
left: 0;
top: -20%;
width: 100%;
height: 140%;
object-fit: cover;
will-change: transform;
}
/* fixed-background variant — the photo stays put while the page scrolls over
it (js/main.js converts .plx bands: hides the ![]()
, paints it as a fixed
background). Touch devices mishandle fixed bg, so they fall back to scroll. */
.plx--fixed {
background-size: cover;
background-position: center;
background-attachment: fixed;
}
@media (hover: none) { .plx--fixed { background-attachment: scroll; } }
/* sticky looping-video band — the video pins to the viewport while the
taller section scrolls past, so it reads like a fixed window (same feel
as .plx--fixed, but a moving image). */
.plx-video {
position: relative;
/* band matches the video height so the sticky video fills it edge to edge
(no reveal gap before the next section) */
height: 100vh;
height: 100svh;
background: var(--ink);
overflow: clip;
}
.plx-video__el {
position: sticky;
top: 0;
display: block;
width: 100%;
height: 100vh;
height: 100svh;
object-fit: cover;
}
/* floating image that follows the cursor over the services list */
.offer { position: relative; }
/* full-bleed service list (bigger rows) */
.offer .wrap { max-width: none; padding-inline: clamp(0.75rem, 1.5vw, 1.25rem); }
.offer-peek {
position: fixed;
left: 0;
top: 0;
width: clamp(17rem, 26vw, 26rem);
aspect-ratio: 4 / 5;
object-fit: cover;
pointer-events: none;
z-index: 40;
opacity: 0;
transition: opacity 0.35s var(--ease-out), transform 0.22s ease-out;
box-shadow: 0 24px 60px -20px rgba(27, 24, 21, 0.45);
}
.offer-peek.is-on { opacity: 1; }
/* services: deliverables checklist */
/* .deliv background is the shared tile texture (see the .intro/.reach rule) */
.deliv { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.deliv .eyebrow { margin-bottom: 1.8rem; }
.deliv-list {
display: grid;
gap: 1rem clamp(2rem, 4vw, 3.5rem);
grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .deliv-list { grid-template-columns: 1fr 1fr; } }
.deliv-list li {
position: relative;
padding-left: 1.4rem;
color: var(--ink);
max-width: 34em;
}
.deliv-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--bronze);
}
/* titled variant: each item is a heading + description, no bullet dot */
.deliv-list--titled { gap: clamp(1.8rem, 3.5vw, 2.75rem) clamp(2rem, 4vw, 4rem); }
.deliv-list--titled li { padding-left: 0; }
.deliv-list--titled li::before { display: none; }
.deliv-list--titled h3 {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(1.2rem, 1.8vw, 1.5rem);
margin-bottom: 0.45rem;
}
.deliv-list--titled p { color: var(--ink-60); }
/* services detail rows */
.offer { padding: var(--space-section) 0; background: var(--white); }
/* "Which client are you?" reads as a section header, not a tiny eyebrow */
.offer-eyebrow {
font-family: var(--serif);
font-size: clamp(1.9rem, 3.6vw, 2.9rem);
font-weight: 400;
line-height: 1.1;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: center;
color: var(--ink);
margin-bottom: clamp(2rem, 4vw, 3rem);
}
/* closing PS — its own compact band after the process machine */
.proc-note-band { background: var(--white); }
.proc-note {
max-width: 46rem;
margin: 0 auto;
padding: clamp(3rem, 8vw, 5.5rem) clamp(1.5rem, 5vw, 3rem);
text-align: center;
font-family: var(--serif);
font-style: italic;
font-size: clamp(1.1rem, 1.7vw, 1.45rem);
line-height: 1.6;
color: var(--ink-60);
}
.proc-note strong { font-style: normal; color: var(--ink); letter-spacing: 0.02em; }
.offer-list { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.offer-item {
display: grid;
gap: 1rem clamp(2rem, 5vw, 4rem);
grid-template-columns: 1fr;
border-top: 1px solid rgba(27, 24, 21, 0.25);
padding-top: 1.6rem;
}
@media (min-width: 46rem) { .offer-item { grid-template-columns: 2fr 3fr; } }
.offer-item h2 {
font-size: clamp(1.15rem, 1.9vw, 1.5rem);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.offer-item p { color: var(--ink-60); max-width: 44em; }
/* about: story blocks */
.story { padding: var(--space-section) 0; background: var(--white); }
/* linen stories now carry the shared grasscloth-stripe texture (home / services) */
.story--linen {
background-color: var(--ivory);
background-image:
linear-gradient(rgba(245, 241, 236, 0.72), rgba(245, 241, 236, 0.72)),
url("../assets/img/grasscloth-stripe.jpg");
background-size: auto, 620px auto;
background-repeat: repeat;
background-attachment: fixed;
}
@media (hover: none) { .story--linen { background-attachment: scroll; } }
/* auto-rotating photo gallery inside a story figure (js/main.js crossfades) */
.story-gallery { position: relative; aspect-ratio: 4 / 5; }
.story-gallery img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.1s var(--ease-out);
}
.story-gallery img.is-active { opacity: 1; }
.story-grid {
display: grid;
gap: clamp(2.5rem, 6vw, 5rem);
grid-template-columns: 1fr;
align-items: center;
}
@media (min-width: 52rem) {
.story-grid { grid-template-columns: 6fr 5fr; }
.story-grid--flip { grid-template-columns: 5fr 6fr; }
.story-grid--flip .story-media { order: -1; }
}
.story-grid h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); margin-bottom: 1.2rem; text-wrap: balance; }
.story-grid h2 em { color: var(--bronze); }
.story-grid p { color: var(--ink-60); max-width: 40em; margin-bottom: 1rem; }
.story-media img { width: 100%; object-fit: cover; }
/* OUR PHILOSOPHY — values grid */
.philosophy h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); margin-bottom: 1rem; text-wrap: balance; }
.philosophy h2 em { color: var(--bronze); }
.philosophy-intro {
max-width: 46em;
color: var(--ink-60);
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
.philosophy-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1.8rem, 4vw, 2.75rem) clamp(2rem, 4vw, 4rem);
}
@media (min-width: 40rem) { .philosophy-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .philosophy-grid { grid-template-columns: repeat(3, 1fr); } }
.philosophy-item { border-top: 1px solid rgba(27, 24, 21, 0.16); padding-top: 1.1rem; }
.philosophy-item h3 {
font-family: var(--serif);
font-size: clamp(1.2rem, 1.8vw, 1.5rem);
font-weight: 500;
margin-bottom: 0.5rem;
}
.philosophy-item p { color: var(--ink-60); max-width: 32em; }
/* "The other secret" supporting line under the quote */
.story-secret-sub { max-width: 42em; margin: 1.5rem auto 0; color: var(--ink-60); text-align: center; }
/* THE KKI EXPERIENCE checklist */
.kki-exp { padding: var(--space-section) 0; background: var(--white); text-align: center; }
.kki-exp-lead {
max-width: 42em;
margin: 0.8rem auto clamp(2.2rem, 4vw, 3.25rem);
color: var(--ink-60);
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}
.kki-exp-list {
display: grid;
grid-template-columns: 1fr;
gap: 1rem clamp(2rem, 4vw, 3.5rem);
max-width: 54rem;
margin: 0 auto;
text-align: left;
}
@media (min-width: 44rem) { .kki-exp-list { grid-template-columns: 1fr 1fr; } }
.kki-exp-list li { position: relative; padding-left: 1.6rem; color: var(--ink); }
.kki-exp-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--bronze);
}
/* READY TO GET STARTED — final CTA band */
.final-cta { background: var(--slate); color: var(--ivory); padding: var(--space-section) 0; text-align: center; }
.final-cta h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin: 0.6rem 0 1.2rem; text-wrap: balance; }
.final-cta h2 em { color: #D9BA9C; font-style: italic; }
.final-cta-sub { max-width: 42em; margin: 0 auto clamp(1.9rem, 3.5vw, 2.6rem); color: rgba(245, 241, 236, 0.75); }
/* FAQ accordion */
.faq { padding: var(--space-section) 0; background: var(--white); }
.faq h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin: 0.4rem 0 clamp(1.8rem, 4vw, 2.75rem); }
.faq h2 em { color: var(--bronze); }
.faq-item { border-top: 1px solid rgba(27, 24, 21, 0.14); }
.faq-item:last-child { border-bottom: 1px solid rgba(27, 24, 21, 0.14); }
.faq-item summary {
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.2rem;
padding: 1.3rem 0;
font-family: var(--serif);
font-size: clamp(1.15rem, 1.9vw, 1.45rem);
color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
font-family: var(--sans);
font-size: 1.5rem;
line-height: 1;
color: var(--bronze);
flex: 0 0 auto;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-a { padding: 0 0 1.5rem; }
.faq-a p { color: var(--ink-60); max-width: 48em; }
/* contact */
.contact-grid {
display: grid;
gap: clamp(2.5rem, 6vw, 5rem);
grid-template-columns: 1fr;
padding-bottom: var(--space-section);
}
@media (min-width: 52rem) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-details p { color: var(--ink-60); margin-bottom: 1.2rem; max-width: 36em; }
.contact-line { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.4rem; }
.contact-details a { color: var(--ink); }
.contact-details a:hover { color: var(--bronze); }
.contact-form { display: grid; gap: 1.1rem; }
.contact-form label {
display: block;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-60);
margin-bottom: 0.4rem;
}
.contact-form input, .contact-form textarea, .contact-form select {
width: 100%;
font-family: var(--sans);
font-size: 1rem;
color: var(--ink);
background: var(--white);
border: 1px solid rgba(27, 24, 21, 0.25);
padding: 0.85rem 1rem;
border-radius: 0;
}
/* native select with a simple chevron */
.contact-form select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231B1815' stroke-width='1.4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.6rem;
cursor: pointer;
}
.contact-form input:focus-visible, .contact-form textarea:focus-visible, .contact-form select:focus-visible {
outline: 2px solid var(--bronze);
outline-offset: 0;
border-color: var(--bronze);
}
.contact-form .req { color: var(--bronze); }
/* "How did you find KKI?" checkbox group */
.contact-checks { border: 0; padding: 0; margin: 0.2rem 0 0; }
.contact-checks legend {
padding: 0;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-60);
margin-bottom: 0.9rem;
}
.contact-checks .check {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.95rem;
letter-spacing: 0;
text-transform: none;
font-weight: 400;
color: var(--ink);
margin-bottom: 0.55rem;
cursor: pointer;
}
.contact-checks .check input {
width: 1.05rem;
height: 1.05rem;
flex: 0 0 auto;
accent-color: var(--bronze);
margin: 0;
padding: 0;
}
.contact-form button { cursor: pointer; background: var(--ink); color: var(--ivory); border: 1px solid var(--ink); justify-self: start; }
.contact-form button:hover { background: var(--bronze); border-color: var(--bronze); }
/* ============================================================
REDUCED MOTION — stills instead of video, no reveals/parallax
============================================================ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
.hero-media video { display: none; }
.hero-cue-line { animation: none; transform: none; }
.portfolio-card, .portfolio-card img, .btn { transition: none; }
/* marquees stop; horizontal row becomes hand-scrollable, reviews
become a static list (clones hidden so nothing repeats) */
.portfolio-track { animation: none; }
.portfolio-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.review-col-track { animation: none; }
.review-marquee { height: auto; mask-image: none; -webkit-mask-image: none; }
[data-clone] { display: none; }
.plx img { top: 0; height: 100%; }
.offer-peek { display: none; }
.hero--page .hero-video { display: none; }
.proc.is-live .proc-card, .proc.is-live .proc-track { transition: none; }
.proc.is-live .proc-card { opacity: 1; transform: none; }
.gallery-img, .gallery-cue, .gallery-title { transition: none; }
.flow-step, .flow-num, .flow-prog, .flow-spin, .flow-dial-num, .flow-dial-slug, .flow-node, .flow-step p { transition: none; }
.flow-step { opacity: 1; }
}