/* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } /* Lenis smooth-scroll required hooks. The library adds these classes to at runtime; the rules below let the page scroll properly while the JS handles the actual smooth-scroll RAF loop. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: clip; } .lenis.lenis-scrolling iframe { pointer-events: none; } /* Kill the rubber-band overscroll on every axis so the white html-bg never peeks through the edge of the page-frame on macOS / iOS / trackpads. */ html, body { overscroll-behavior: none; overflow-x: clip; } /* A11y utilities. `.visually-hidden` is the modern clip-path pattern for semantic-but-invisible text (page-level h1s on visual moodboard pages, etc). `.skip-link` is the keyboard-only "jump to main" affordance — parked off-screen until focused, then docks at the top-left. */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -10000px; top: 0; z-index: 10000; background: #fff; color: #000; padding: 12px 18px; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; border: 2px solid #000; } .skip-link:focus, .skip-link:focus-visible { left: 16px; top: 16px; outline: 2px solid #000; outline-offset: 2px; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Ink fallback DURING intro only (page-frame scale-up would otherwise show a grey viewport edge). After intro completes, swap to paper so the area below the altfooter (24px margin + overscroll) is white, not black. */ background: var(--color-ink); } html:has(body:not(.is-preloading):not(.is-intro-running)) { background: var(--color-paper); } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text); background: var(--color-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body:not(.is-preloading):not(.is-intro-running) { background: var(--color-paper); } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } h1, h2, h3, h4, p { margin: 0; } /* ---------- Utilities ---------- */ .container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--container-pad-x); } .eyebrow { display: inline-block; font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; font-weight: 500; color: var(--color-text-muted); } .eyebrow--invert { color: var(--color-text-invert-muted); } /* Rhombus eyebrow marker — solid-filled diamond, luxury-editorial tone. */ .eyebrow--dot::before { content: ""; display: inline-block; width: 7px; height: 7px; background: currentColor; margin-right: calc(var(--space-2) + 3px); transform: translateY(-1px) rotate(45deg); vertical-align: middle; } /* Display — IvyPresto Display Thin (100) EVERYWHERE. No bolder weights. */ .display { font-family: var(--font-display); font-weight: var(--fw-thin); line-height: var(--lh-display); letter-spacing: var(--tr-tight); } .display--hero { font-size: var(--fs-hero); line-height: 1.04; letter-spacing: -0.025em; font-weight: var(--fw-thin); } .display--hero em { font-style: italic; font-weight: var(--fw-thin); color: inherit; } .display--h2 { font-size: var(--fs-h2); font-weight: var(--fw-thin); } .display--h2 em { font-style: italic; font-weight: var(--fw-thin); } .display--h3 { font-size: var(--fs-h3); font-weight: var(--fw-thin); } /* Lock any titles that used to be heavier — everything display stays Thin */ .service-card__title, .work-card__title, .post__title, .testimonial__quote, .counter__num, .about__stat-num, .plan__price { font-weight: var(--fw-thin); } .faq-item summary { font-weight: var(--fw-thin); } .muted { color: var(--color-text-muted); } .muted-invert { color: var(--color-text-invert-muted); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: var(--space-3); padding: 14px 24px; border-radius: 0; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-light); text-transform: uppercase; letter-spacing: 0.14em; line-height: 1; transition: background-color var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease), opacity var(--motion-base) var(--motion-ease); } .btn--cta { padding: 10px 10px 10px 24px; } .btn--sm { padding: 8px 8px 8px 18px; font-size: 0.75rem; letter-spacing: 0.16em; } .btn--sm .arrow-circle { width: 24px; height: 24px; } .btn--sm .arrow-circle svg { width: 10px; height: 10px; } /* Glass variant — translucent white with backdrop-blur. Used on hero CTAs and the nav "Book a call" button. */ .btn--glass { background: rgba(255,255,255,0.06); color: var(--color-text-invert); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); } .btn--glass:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.5); } .btn--glass .arrow-circle { background: rgba(255,255,255,0.9); color: var(--color-ink); } .btn--glass .arrow-circle svg { color: var(--color-ink); } /* Text-swap on hover (Stodio-style): visible label slides up, duplicate slides in from below */ .btn__label { position: relative; display: inline-flex; overflow: hidden; line-height: 1.1; padding-block: 1px; /* room for descenders */ } .btn__label > span { display: inline-block; white-space: nowrap; transition: transform 420ms var(--motion-ease); } .btn__label > span:nth-child(1) { transform: translateY(0); } .btn__label > span:nth-child(2) { position: absolute; inset: 0; transform: translateY(110%); } .btn:hover .btn__label > span:nth-child(1) { transform: translateY(-110%); } .btn:hover .btn__label > span:nth-child(2) { transform: translateY(0); } .btn--primary { background: var(--color-accent); color: var(--color-accent-ink); } .btn--primary:hover { background: var(--color-accent-hover); } .btn--ghost { background: var(--color-paper); color: var(--color-text); } .btn--ghost:hover { background: var(--color-paper-soft); } .btn--outline-invert { background: transparent; color: var(--color-text-invert); border: 1px solid var(--color-line-dark); } .btn--outline-invert:hover { background: var(--color-line-dark); } /* Arrow-circle — reusable diagonal-swap CTA icon */ .arrow-circle { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pill); overflow: hidden; margin-left: var(--space-1); background: currentColor; flex: 0 0 auto; } .arrow-circle svg { grid-area: 1 / 1; width: 12px; height: 12px; transition: transform 420ms var(--motion-ease); } .arrow-circle svg:nth-child(1) { transform: translate(0, 0); } .arrow-circle svg:nth-child(2) { transform: translate(-170%, 170%); } .btn:hover .arrow-circle svg:nth-child(1) { transform: translate(170%, -170%); } .btn:hover .arrow-circle svg:nth-child(2) { transform: translate(0, 0); } /* Arrow colour per button variant */ .btn--primary .arrow-circle { background: var(--color-paper); color: var(--color-accent); } .btn--primary .arrow-circle svg { color: var(--color-accent); } .btn--ghost .arrow-circle { background: var(--color-ink); color: var(--color-paper); } .btn--ghost .arrow-circle svg { color: var(--color-paper); } .btn--outline-invert .arrow-circle { background: var(--color-paper); color: var(--color-ink); } .btn--outline-invert .arrow-circle svg { color: var(--color-ink); } /* ---------- Nav (inside hero panel) ---------- */ .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-bottom: clamp(var(--space-7), 8vw, var(--space-10)); color: var(--color-text-invert); } /* Floating variant. Pinned to the top of the viewport, present from first paint, no entry transition. The nav slides up and out as the user scrolls down past the hero (handled by JS toggling .nav--floating.is-hidden on .proj-transform--hero, .cs-hero, and .cs-single__hero). */ .nav--floating { position: fixed; top: 0; left: 0; right: 0; padding: clamp(var(--space-5), 3vw, var(--space-7)) clamp(var(--space-5), 4vw, var(--space-8)); padding-bottom: 0; z-index: 5; pointer-events: auto; transform: translateY(0); transition: transform 480ms cubic-bezier(0.22, 0.8, 0.24, 1), opacity 320ms var(--motion-ease); } .nav--floating.is-hidden { transform: translateY(-110%); opacity: 0; pointer-events: none; } .nav__brand { display: inline-flex; align-items: center; line-height: 1; color: var(--color-text-invert); text-decoration: none; } .nav__brand img { display: block; height: 40px; /* +10% on previous 36px per user direction */ width: auto; } .nav__links { display: flex; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; } .nav__links a { position: relative; display: inline-block; padding-block: 4px; font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-light); text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255,255,255,0.92); /* solid white-ish, not faded */ transition: color var(--motion-base) var(--motion-ease); } .nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255,255,255,0.8); /* crisp underline, not hazy */ transform: scaleX(0); transform-origin: left center; transition: transform 360ms var(--motion-ease); } .nav__links a:hover { color: #fff; } .nav__links a:hover::after { transform: scaleX(1); } @media (max-width: 840px) { .nav__links { display: none; } } /* ---------- Hero — full-bleed, video-backed, extended scroll (fluid.glass) ---------- Hero is a TALL section (~170vh). Video-wrap is absolute inset:0, so it stretches to cover the whole hero and scrolls away with the page (no sticky, no pinning). First fold (100vh) holds the title + hairline at the bottom; the second fold (~70vh) holds tagline + CTAs, revealed via IntersectionObserver. Mirrors fluid.glass's two-row hero pattern. */ .hero { padding: 0; background: #050505; position: relative; } .hero__panel { background: var(--color-ink); color: var(--color-text-invert); border-radius: 0; padding: clamp(var(--space-5), 3vw, var(--space-7)) clamp(var(--space-5), 4vw, var(--space-8)) clamp(var(--space-8), 8vw, var(--space-10)); position: relative; overflow: hidden; display: flex; flex-direction: column; isolation: isolate; /* Lock to one fold so the video sits edge-to-edge with no extra bezels */ min-height: 100vh; height: 100vh; } /* Hero image/video inside-zoom — scale 1.06 → 1. Delay 200ms, 900ms duration. */ .hero__bg, .hero__video-wrap { transform: scale(1.06); will-change: transform; transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1) 200ms; } body:not(.is-preloading) .hero__bg, body:not(.is-preloading) .hero__video-wrap { transform: scale(1); } /* Intro fade — nav + title + hairline appear 400ms after .is-preloading drop. Excludes .nav--floating (Projects + Case Studies floating nav) so the header on those pages is present from first paint, paired with the already-darkened hero shadow. The scroll-up hide-on-scroll behaviour continues to work normally afterwards. */ .nav:not(.nav--floating), .hero__title, .hero__rule { opacity: 0; transform: translateY(10px); transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1) 400ms, transform 600ms cubic-bezier(0.16, 1, 0.3, 1) 400ms; } body:not(.is-preloading) .nav:not(.nav--floating), body:not(.is-preloading) .hero__title, body:not(.is-preloading) .hero__rule { opacity: 1; transform: translateY(0); } .nav--floating { opacity: 1; transform: none; transition: none; } @media (prefers-reduced-motion: reduce) { .hero__bg, .hero__video-wrap { transform: none !important; transition: none; } .nav, .hero__title, .hero__rule { animation: none; opacity: 1; transform: none; } .hero__ctas { opacity: 1 !important; transform: none !important; } } /* Bottom soft blur + fade — TWO-LAYER effect for a smooth fog transition: ::before = backdrop-filter blur masked with a gradient so the blur amount gently ramps from 0 (top) to full (bottom). ::after = dark gradient sitting on top of the blur so the bleeds into the dark trusted-by strip feels continuous. */ .hero__panel::before { content: ""; position: absolute; inset: auto 0 0 0; height: clamp(240px, 32vh, 380px); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); /* Mask grows from transparent at top to opaque at bottom so the blur applies GRADUALLY — smooth "fog rising" effect, not a hard blur strip. */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 35%, rgba(0,0,0,0.85) 65%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 35%, rgba(0,0,0,0.85) 65%, #000 100%); pointer-events: none; z-index: 0; } .hero__panel::after { content: ""; position: absolute; inset: auto 0 0 0; height: clamp(240px, 32vh, 380px); background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.1) 28%, rgba(10,10,10,0.4) 55%, rgba(10,10,10,0.78) 78%, rgba(10,10,10,1) 100% ); pointer-events: none; z-index: 1; } /* Make sure nav + content stay above the blur layer */ .hero .nav, .hero__grid { position: relative; z-index: 2; } /* ---------- Preloader + page-frame reveal (fluid.glass-style intro) ---------- Timeline (all times approximate, driven by CSS animation delays): 0 ms dark panel covers viewport, logo hidden 150 ms logo words fade in with .split-words stagger (60ms per word) ~350 ms logo fully revealed (3 words × 60ms + 200ms word duration) 1600 ms HOLD ends. Logo exits upward with stagger, page-frame starts sliding up from translateY(100%) scale(0.85) → 0,1. 1900 ms Hero video inside the page-frame scales from 1.1 → 1 (soft settle, like fluid.glass's main:firstChild zoom). 2800 ms page-frame fully revealed; preloader fades out. 3200 ms preloader removed from DOM by JS. */ .preloader { position: fixed; inset: 0; z-index: 9999; pointer-events: auto; } body.is-preloading { overflow: hidden; } .preloader__panel { position: absolute; inset: 0; background: var(--color-ink); z-index: 1; transition: opacity 700ms cubic-bezier(0.22, 0.8, 0.24, 1); } .preloader__veil { position: absolute; inset: 0; z-index: 2; background: rgba(10,10,10,0); pointer-events: none; transition: background 300ms cubic-bezier(0.22, 0.8, 0.24, 1); } /* Veil stays transparent on exit — the previous "misty transition" that darkened to 0.28 opacity was sitting over the page for ~1s after the panel faded, making the hero look dimmed on first paint. Now panel fades straight to 0 and the page is fully visible immediately. */ .preloader.is-done .preloader__veil { background: rgba(10,10,10,0); } .preloader.is-done { pointer-events: none; /* don't eat clicks while exiting */ } .preloader.is-done .preloader__panel { opacity: 0; transition-delay: 0ms; transition-duration: 220ms; } /* Preloader mark — inline HoA wordmark SVG, split into 3 groups (House / of / Advanced). Each group animates in with a 90ms-per-word stagger, holds, then animates out with matching stagger. Motion vocabulary (opacity + blur + translateY) mirrors the site-wide .split-words title reveals so the intro reads as the same language. Total visible life ≈ 2.3s. */ .preloader__mark { position: absolute; top: 50%; left: 50%; z-index: 3; transform: translate(-50%, -50%); width: min(32vw, 320px); /* wordmark sits centred, scales fluidly */ } .preloader__svg { width: 100%; height: auto; display: block; overflow: visible; /* don't clip the blur halo on entry */ } .preloader__word { /* SVG elements — CSS transforms operate in the group's bounding box via transform-box, so translateY in CSS pixels behaves like it would on a block element. */ transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; filter: blur(8px); transform: translateY(12px); will-change: opacity, filter, transform; animation: preloader-word-in 700ms cubic-bezier(0.215, 0.61, 0.355, 1) calc(var(--w, 0) * 90ms + 140ms) both, preloader-word-out 520ms cubic-bezier(0.22, 0.8, 0.24, 1) calc(var(--w, 0) * 60ms + 1700ms) forwards; } @keyframes preloader-word-in { from { opacity: 0; filter: blur(8px); transform: translateY(12px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } } @keyframes preloader-word-out { from { opacity: 1; filter: blur(0); transform: translateY(0); } to { opacity: 0; filter: blur(6px); transform: translateY(-10px); } } @media (max-width: 640px) { .preloader__mark { width: min(68vw, 280px); } } /* Page-frame reveal REMOVED — the blur/translate/scale transition was reading as a "shadow" hanging on the page for ~1s after the preloader cleared. Page now appears fully rendered the moment the preloader panel fades. Only the preloader's own exit is the entry transition. */ @media (prefers-reduced-motion: reduce) { .preloader { transition: opacity 300ms linear; } .preloader.is-done { opacity: 0; } .preloader__mark { animation: none; transition: none; opacity: 1; filter: none; transform: translate(-50%, -50%); } } /* Vimeo iframe hero video — 16:9 cover. Whichever viewport side is wider drives the other so the iframe stays full-bleed at any aspect. Poster image below keeps paint alive while Vimeo finishes loading. */ .hero__video-wrap { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; pointer-events: none; /* Decoder hint: keep the loop alive even when the tab regains focus. */ background: var(--color-ink, #050505); } @media (prefers-reduced-motion: reduce) { .hero__video-wrap { display: none; } } /* Hero kicker — sits between H1 and hairline rule, explains the offer in one sentence. Thin body copy, restrained width, enters with the H1. */ .hero__kicker { font-family: var(--font-body); font-weight: 300; font-size: clamp(0.9375rem, 1.15vw, 1.0625rem); line-height: 1.55; color: rgba(255,255,255,0.78); max-width: 62ch; margin: clamp(18px, 1.8vw, 28px) 0 0; letter-spacing: 0; } /* Hairline divider — spans the full width of the title/CTA block so it visually ties the headline to the buttons. */ .hero__rule { border: 0; height: 1px; width: 100%; max-width: none; background: rgba(255,255,255,0.32); margin: clamp(24px, 2.6vw, 40px) 0 clamp(22px, 2.2vw, 32px); } /* Solid ink fallback only. The bitmap poster has been retired so the video iframe is the first background the visitor ever sees, with no image-then-video flash. The colour matches the dark video frame so the iframe slot reads as black before Vimeo paints. */ .hero__bg { position: absolute; inset: 0; background: var(--color-ink, #0a0a0a); z-index: -2; will-change: transform; } .hero__overlay { position: absolute; inset: 0; /* Diffuse darken across the video. Bottom band is the strongest so the H1 + CTAs at the bottom-fold sit on a deep shadow and read cleanly without bleaching the upper third of the frame. */ background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 28%, rgba(0,0,0,0.22) 60%, rgba(0,0,0,0.42) 100%), rgba(0,0,0,0.22); z-index: -1; } /* Hero content wrapper — single-fold, title + hairline + CTAs stacked tight at the bottom of a 100vh panel. No secondary row, no scroll pin. */ .hero__grid { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 0; } /* Asterisk marks — now a horizontal row above the title (leadestate.com pattern) */ .hero__marks { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: flex; flex-wrap: wrap; gap: clamp(var(--space-5), 3vw, var(--space-7)); font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-light); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-invert-muted); } .hero__marks li { display: inline-flex; align-items: center; gap: var(--space-3); } .hero__mark-star { width: 11px; height: 11px; color: var(--color-text-invert); flex: 0 0 auto; } .hero__title { /* +20% over previous clamp(2.5, 4.6vw, 4rem) = clamp(3rem, 5.5vw, 4.8rem) */ font-size: clamp(3rem, 5.5vw, 4.8rem); line-height: 1.05; letter-spacing: -0.02em; max-width: none; /*
in HTML controls the break */ margin: 0; } /* Editorial kicker — italic IvyPresto Thin. Legacy rule kept for any other template that references it, but the homepage H1 no longer uses it. */ .hero__title-emph { font-style: italic; font-weight: var(--fw-thin, 200); } /* "Luxury Real Estate" — italic IvyPresto Thin with a white → light-silver gradient wash. The gradient is applied to EACH .word span (split-words wraps every word) because background-clip: text only clips an element's own text, not descendants' text. Putting it on the alone made the inner word spans render transparent (invisible), which is why "Luxury Real Estate" disappeared while "Leading" and "Marketing Agency" stayed. */ .hero__title-lux { font-style: italic; font-weight: var(--fw-thin, 200); } .hero__title-lux, .hero__title-lux .word { background-image: linear-gradient(90deg, #ffffff 0%, #eaeaea 45%, #c8c8c8 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Subtle pink → white → light-grey gradient on "great". Low saturation so it reads as a tonal shift, not a colour pop. Fallback to soft cream tone in browsers without background-clip: text. */ .hero__title-great { color: #e8c7d4; background: linear-gradient(90deg, #e8c7d4 0%, #ffffff 48%, #d0d0d0 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.94; } .hero__lede { display: grid; gap: var(--space-4); max-width: 72ch; /* stretched wider, sits directly under title */ margin-top: var(--space-5); font-family: var(--font-body); font-size: 0.9375rem; font-weight: var(--fw-light); line-height: 1.6; color: var(--color-text-invert-muted); } .hero__lede p { margin: 0; } .hero__ctas { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: var(--space-6); margin-top: 0; } /* (Scroll hint removed per user request) */ /* Hero CTA variants — asymmetric: quiet text-link + emphasized glass pill. Simpler than the .btn system: no double-span text-swap, no diagonal arrow swap. */ .btn-ct { position: relative; display: inline-flex; align-items: center; gap: 0; font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-light); letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; color: var(--color-text-invert); text-decoration: none; transition: color var(--motion-base) var(--motion-ease), background-color var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease), opacity var(--motion-base) var(--motion-ease); } /* Slide-up synced animation — text + arrow move together as one layer, duplicate layer rises from below. Both layers use identical content so the arrow travels with the label at the same speed, same easing. */ .btn-ct__slide { position: relative; display: inline-flex; overflow: hidden; line-height: 1; padding-block: 2px; } .btn-ct__row { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; line-height: 1; transition: transform 480ms cubic-bezier(0.22, 0.8, 0.24, 1); } .btn-ct__row:nth-child(1) { transform: translateY(0); } .btn-ct__row:nth-child(2) { position: absolute; inset: 0; transform: translateY(120%); } .btn-ct:hover .btn-ct__row:nth-child(1) { transform: translateY(-120%); } .btn-ct:hover .btn-ct__row:nth-child(2) { transform: translateY(0); } .btn-ct__arrow { width: 12px; height: 12px; color: currentColor; flex: 0 0 auto; margin-left: 10px; overflow: visible; } /* Nav "Apply now" arrow → rhombus morph on hover (scoped, no other button). Rest: diagonal arrow visible, rhombus hidden. Hover: arrow un-draws, rhombus draws itself into a complete outline. */ .apply-arrow-path { stroke-dasharray: 24.5 0.1; stroke-dashoffset: 0; transition: stroke-dasharray 520ms cubic-bezier(0.65, 0, 0.35, 1), stroke-dashoffset 520ms cubic-bezier(0.65, 0, 0.35, 1); } .apply-arrow-dia { stroke-dasharray: 0 34; stroke-dashoffset: 0; transition: stroke-dasharray 520ms cubic-bezier(0.65, 0, 0.35, 1), stroke-dashoffset 520ms cubic-bezier(0.65, 0, 0.35, 1); } .btn-ct--nav:hover .apply-arrow-path { stroke-dasharray: 0 999999; stroke-dashoffset: 0.001; } .btn-ct--nav:hover .apply-arrow-dia { stroke-dasharray: 34 0.1; stroke-dashoffset: 0; } /* Morph variant — both glyphs share a unified clockwise rotation AND collapse through a scale-0 midpoint, so the arrow reads as genuinely morphing into the rhombus rather than cross-fading. Timing bands are staggered: arrow shrinks + rotates out over the first half; rhombus expands + rotates in over the second half, picking up from exactly the same angle. */ .btn-ct--morph .btn-ct__arrow-wrap { position: relative; display: inline-grid; width: 13px; height: 13px; flex: 0 0 auto; } .btn-ct--morph .btn-ct__arrow-wrap svg { grid-area: 1 / 1; width: 13px; height: 13px; transform-origin: 50% 50%; transition: opacity 260ms cubic-bezier(0.65, 0, 0.35, 1), transform 520ms cubic-bezier(0.65, 0, 0.35, 1); } /* Resting state: arrow visible at 0°, rhombus hidden, already rotated -180° */ .btn-ct--morph .btn-ct__arrow-wrap svg:nth-child(1) { opacity: 1; transform: rotate(0deg) scale(1); } .btn-ct--morph .btn-ct__arrow-wrap svg:nth-child(2) { opacity: 0; transform: rotate(-180deg) scale(0.1); transition-delay: 0ms; } /* Hover: arrow rotates clockwise 180° + shrinks to a point, rhombus continues the rotation from -180° → 0° + grows back from 0.1 → 1. Same effect when the parent .hstep--outro carries [data-outro-active] — the JS-driven scroll-end trigger so the Discover button auto-morphs as the carousel finishes, without needing a real hover. */ .btn-ct--morph:hover .btn-ct__arrow-wrap svg:nth-child(1), .hstep--outro[data-outro-active] .btn-ct--morph .btn-ct__arrow-wrap svg:nth-child(1) { opacity: 0; transform: rotate(180deg) scale(0.1); transition-delay: 0ms; } .btn-ct--morph:hover .btn-ct__arrow-wrap svg:nth-child(2), .hstep--outro[data-outro-active] .btn-ct--morph .btn-ct__arrow-wrap svg:nth-child(2) { opacity: 1; transform: rotate(0deg) scale(1); transition-delay: 180ms; } /* Outro card emphasis when auto-highlighted by scroll — the CTA reads as already-active (matches the visual state it would have on real hover) so the user sees a clear "next move" beacon without having to mouse over. */ .hstep--outro[data-outro-active] .btn-ct--glass { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.85); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 12px 36px rgba(0,0,0,0.32); } /* Outro card reads as an extra step that links through to the approach page. No box outline — the card matches the regular step layout, the morph CTA inside fires on scroll-arrival, and the whole card itself is wrapped in an anchor (see HTML) so any click navigates to /approach. */ .hstep__outro-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } .hstep__outro-link:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: 4px; } /* Quiet de-emphasized CTA — thin outline pill with a very soft light segment that runs slowly around the border perimeter. */ @property --run-angle { syntax: ""; inherits: false; initial-value: 0deg; } .btn-ct--quiet { padding: 14px 22px; color: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.10); background: transparent; --run-angle: 0deg; animation: runAngle 9s linear infinite; } .btn-ct--quiet::before { content: ""; position: absolute; inset: -1px; padding: 1px; /* thickness of the visible ring */ background: conic-gradient( from var(--run-angle), rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 6%, rgba(255,255,255,0) 18%, rgba(255,255,255,0) 100% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .btn-ct--quiet:hover { color: var(--color-text-invert); border-color: rgba(255,255,255,0.26); } @keyframes runAngle { to { --run-angle: 360deg; } } /* Firefox / older browsers: hide the conic layer and fall back to a static soft border — no runtime regression. */ @supports not (background: conic-gradient(from var(--run-angle), red, red)) { .btn-ct--quiet::before { display: none; } .btn-ct--quiet { animation: none; } } /* On-light variant — thin static border, no running gradient */ .btn-ct--on-light { color: rgba(10,10,10,0.7); border-color: rgba(10,10,10,0.18); animation: none; /* disable --run-angle loop */ } .btn-ct--on-light::before { display: none; } /* hide conic ring layer */ .btn-ct--on-light:hover { color: var(--color-text); border-color: rgba(10,10,10,0.45); background: rgba(10,10,10,0.03); } /* Centre variant — used for section-closing CTAs (stodio pattern). Bigger, more generous padding, lightly restored running outline so it reads as a "moment" at the end of a grid rather than a bare link. */ .btn-ct--centre { padding: 18px 36px; font-size: 0.8125rem; letter-spacing: 0.2em; } .btn-ct--centre.btn-ct--on-light { border-color: rgba(10,10,10,0.22); animation: runAngle 9s linear infinite; --run-angle: 0deg; } .btn-ct--centre.btn-ct--on-light::before { display: block; content: ""; position: absolute; inset: -1px; padding: 1px; background: conic-gradient( from var(--run-angle), rgba(10,10,10,0) 0%, rgba(10,10,10,0.5) 6%, rgba(10,10,10,0) 20%, rgba(10,10,10,0) 100% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* Emphasized glass pill — the primary on the right */ .btn-ct--glass { padding: 14px 22px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.32); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); } .btn-ct--glass:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.55); } @media (max-width: 840px) { .hero__marks { gap: var(--space-4); font-size: 0.6875rem; } } /* ---------- Trusted-by strip (label + logo marquee) — DARK, FULL-BLEED ---------- */ .trusted { background: var(--color-ink); color: var(--color-text-invert); padding: clamp(var(--space-7), 6.3vw, var(--space-9)) 0; /* -10% */ border-bottom: 1px solid rgba(255,255,255,0.08); /* Soft inner shadow at the top so the hero's fade-to-ink continues INTO the trusted strip — no visible edge where one section stops and the next begins. */ box-shadow: inset 0 32px 56px -32px rgba(0,0,0,0.8); } /* Full-bleed strip — label column on the left, marquee fills the rest. Label column is narrow enough that the marquee can stretch wide. */ .trusted__inner { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; align-items: center; gap: clamp(var(--space-4), 2.5vw, var(--space-6)); /* Matches the hero panel's horizontal padding so the ✦/Trusted stack lines up with the nav logo + hero title above */ padding-inline: clamp(var(--space-5), 4vw, var(--space-8)); } /* Stacked label, everything aligns to the left edge of the ✦ icon */ .trusted__label { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); } .trusted__icon { width: 13px; height: 13px; color: var(--color-text-invert); flex: 0 0 auto; margin-bottom: var(--space-1); } .trusted__head { font-family: var(--font-display); font-size: clamp(1.35rem, 2.15vw, 1.9rem); /* -10% */ font-weight: var(--fw-thin); line-height: 1.1; letter-spacing: -0.01em; color: var(--color-text-invert); } .trusted__head em { font-style: italic; color: rgba(255,255,255,0.6); } .trusted__sub { font-family: var(--font-body); font-size: 0.85rem; /* -10% */ font-weight: var(--fw-light); line-height: 1.55; color: rgba(255,255,255,0.55); max-width: 30ch; } /* Stylised kicker — "LUXURY REAL ESTATE" in editorial all-caps with tracking */ .trusted__kicker { display: inline-block; font-family: var(--font-body); font-weight: var(--fw-medium); font-size: 0.73rem; /* -10% */ letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-invert); margin-right: 0.2em; } /* Marquee column */ .trusted__marquee { position: relative; overflow: hidden; --fade: 60px; } .trusted__marquee::before, .trusted__marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--fade); z-index: 2; pointer-events: none; } .trusted__marquee::before { left: 0; background: linear-gradient(to right, var(--color-ink), transparent); } .trusted__marquee::after { right: 0; background: linear-gradient(to left, var(--color-ink), transparent); } .trusted__track { display: flex; gap: clamp(var(--space-6), 4.5vw, var(--space-8)); /* denser */ align-items: center; width: max-content; animation: trustedMarquee 90s linear infinite; /* desktop: original */ will-change: transform; } .trusted__track img { height: 40px; /* -10% on previous 44px */ width: auto; max-width: none; flex: 0 0 auto; /* Dark bg: logos are typically dark-on-light files — invert to near-white */ filter: brightness(0) invert(1) opacity(0.7); transition: filter 600ms var(--motion-ease), opacity 600ms var(--motion-ease); } .trusted__track:hover img { filter: brightness(0) invert(1) opacity(0.3); } .trusted__track:hover img:hover { filter: brightness(0) invert(1) opacity(1); } @keyframes trustedMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 840px) { .trusted__inner { grid-template-columns: 1fr; gap: var(--space-5); } .trusted__track img { height: 34px; } } /* ---------- Nav CTA — compact glass variant (uses same system as hero) ---------- */ .btn-ct--nav { padding: 14px 22px; /* roomier — no longer compressed */ min-height: 44px; /* hits the 44px touch-target floor */ font-size: 0.6875rem; /* 11px, matches nav link size weight */ letter-spacing: 0.14em; gap: 10px; } .btn-ct--nav .btn-ct__arrow { width: 10px; height: 10px; } /* ---------- Section scaffold ---------- */ .section { padding-block: var(--section-pad-y); } .section__head { display: grid; gap: var(--space-4); margin-bottom: var(--space-8); max-width: var(--prose-max); } .section__head--split { grid-template-columns: 1fr 1fr; gap: var(--space-7); max-width: none; align-items: end; } @media (max-width: 840px) { .section__head--split { grid-template-columns: 1fr; } } /* ---------- Featured In — editorial press-credibility strip (LIGHT GREY) ---- Sits between Case Studies and Approach. Uses `--color-paper-soft` (#f3f3f3) instead of the old beige canvas so the strip reads as a neutral press bar, not another content section. One editorial card currently; grid of cards can be swapped in as more press arrives without restyling. */ .featured { background: var(--color-paper-soft, #f3f3f3); color: var(--color-ink); } .featured__head { display: grid; gap: var(--space-3); margin-bottom: clamp(var(--space-7), 6vw, var(--space-9)); max-width: 68ch; } .featured__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0; } .featured__title em { font-style: italic; font-weight: 200; color: rgba(10,10,10,0.55); } /* Compact horizontal strip: logo (left) · title + meta (centre) · read (right). Lower height than before — reads as a discreet press mention, not a hero. */ .featured__card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(var(--space-6), 4vw, var(--space-8)); padding: clamp(var(--space-5), 2.6vw, var(--space-6)) clamp(var(--space-6), 4vw, var(--space-8)); border: 1px solid rgba(10,10,10,0.12); background: transparent; color: var(--color-ink); text-decoration: none; position: relative; isolation: isolate; transition: background-color 520ms var(--motion-ease), border-color 520ms var(--motion-ease); } .featured__card::before, .featured__card::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--color-ink); transform: scaleX(0); transform-origin: left center; transition: transform 640ms cubic-bezier(0.22, 0.8, 0.24, 1); z-index: 2; } .featured__card::before { top: -1px; } .featured__card::after { bottom: -1px; transform-origin: right center; } .featured__card:hover { background: #eaeaea; border-color: rgba(10,10,10,0.2); } .featured__card:hover::before, .featured__card:hover::after { transform: scaleX(1); } @media (max-width: 840px) { .featured__card { grid-template-columns: 1fr; gap: var(--space-5); } } .featured__card-logo { display: flex; align-items: center; justify-content: center; padding-right: clamp(var(--space-5), 3vw, var(--space-7)); border-right: 1px solid rgba(10,10,10,0.1); min-height: clamp(80px, 10vw, 110px); } @media (max-width: 840px) { .featured__card-logo { border-right: 0; border-bottom: 1px solid rgba(10,10,10,0.1); padding-right: 0; padding-bottom: var(--space-5); justify-content: flex-start; } } .featured__logo { width: clamp(86px, 9vw, 120px); height: auto; opacity: 0.82; /* discreet — doesn't dominate */ filter: saturate(0.85); transition: opacity 420ms var(--motion-ease); } .featured__card:hover .featured__logo { opacity: 1; } .featured__card-body { display: grid; gap: var(--space-2); align-content: center; } .featured__pub-kicker { font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(10,10,10,0.58); } .featured__article { font-family: var(--font-display); font-style: normal; /* NOT italic — IvyPresto Thin regular */ font-weight: 200; font-size: clamp(1.125rem, 1.9vw, 1.5rem); line-height: 1.25; letter-spacing: -0.01em; margin: 0; color: var(--color-ink); max-width: 46ch; } .featured__meta { font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(10,10,10,0.62); } .featured__card-action { display: flex; align-items: center; justify-content: flex-end; } @media (max-width: 840px) { .featured__card-action { justify-content: flex-start; } } .featured__read { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-light); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-ink); white-space: nowrap; } .featured__read svg { width: 14px; height: 14px; transition: transform 460ms cubic-bezier(0.22, 0.8, 0.24, 1); } .featured__card:hover .featured__read svg { transform: translate(3px, -3px); } /* ---------- About (two-column: content left, stacked media right) — DARK ---------- */ .about { position: relative; background: var(--color-ink); color: var(--color-text-invert); } .about .eyebrow { color: rgba(255,255,255,0.55); } .about__heading { color: var(--color-text-invert); } .about__lead { color: rgba(255,255,255,0.7) !important; } .about .values { color: rgba(255,255,255,0.65); } .about .values__star { color: var(--color-text-invert); } /* quiet CTA on dark About — slightly different gutter colour */ .about .btn-ct--quiet { color: rgba(255,255,255,0.78); border-color: rgba(255,255,255,0.12); } .about .btn-ct--quiet:hover { color: var(--color-text-invert); border-color: rgba(255,255,255,0.3); } /* About CTA — a touch bigger + thin weight so it reads at section scale */ .about__actions .btn-ct { font-size: 0.875rem; /* from 0.75rem — ~14px */ letter-spacing: 0.14em; font-weight: var(--fw-thin); padding: 16px 26px; } /* B image's corner gutter must now match the dark panel, not paper */ .about__image--b { /* overridden below, box-shadow swapped to ink */ } .about__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(var(--space-7), 6vw, var(--space-10)); align-items: stretch; } .about__content { display: flex; flex-direction: column; gap: var(--space-6); max-width: 58ch; } .about__content .eyebrow { justify-self: start; } .about__heading { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0; text-wrap: balance; max-width: 100%; } .about__lead { font-family: var(--font-body); font-size: clamp(1rem, 1.1vw, 1.125rem); line-height: 1.6; font-weight: var(--fw-light); color: var(--color-text-muted); max-width: 56ch; margin: 0; } .about__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-2); } /* Secondary text-link — sits next to the primary quiet button, no border, underline-on-hover via the nav-link pattern so it feels editorial. */ .about__secondary-link { position: relative; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-light); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.62); text-decoration: none; padding-block: 6px; transition: color 300ms var(--motion-ease); } .about__secondary-link::after { content: ""; position: absolute; left: 0; right: 22px; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 380ms var(--motion-ease); } .about__secondary-link:hover { color: var(--color-text-invert); } .about__secondary-link:hover::after { transform: scaleX(1); } .about__secondary-link { transition: color var(--motion-base) var(--motion-ease), transform 360ms cubic-bezier(0.22, 0.8, 0.24, 1); } .about__secondary-link:hover { transform: translateY(-2px); } .about__secondary-link .btn-ct__arrow { width: 11px; height: 11px; } /* Founders quote box — sits at the bottom of the content column with guaranteed breathing room from the paragraph above. */ .founders-box { display: flex; flex-direction: column; gap: var(--space-4); margin-top: auto; /* More generous padding — the quote icon hangs above the blockquote, so top padding is extra-large to give the mark room to breathe. */ padding: clamp(var(--space-8), 4.2vw, var(--space-10)) clamp(var(--space-6), 3.2vw, var(--space-8)) clamp(var(--space-7), 3.6vw, var(--space-8)); border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.025); } /* Guaranteed gap from the paragraph above — sits at bottom but never flush */ .about__content > .founders-box { margin-top: clamp(var(--space-7), 5vw, var(--space-9)); } .founders-box__quote { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .founders-box__quote blockquote { margin: 0; font-family: var(--font-display); font-style: normal; /* base stays upright; italic reserved for */ font-weight: var(--fw-thin); /* 100 — IvyPresto Display Thin */ font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.36; letter-spacing: -0.015em; color: rgba(255,255,255,0.72); /* light gray — editorial, emphasises the italic */ position: relative; padding-top: 0.2em; /* room for ghost open-quote to hang above */ } .founders-box__quote blockquote em { font-style: italic; font-weight: 200; /* IvyPresto Thin Italic — editorial emphasis */ color: var(--color-text-invert); /* pure white so the phrase sits forward */ } .founders-box__open { position: absolute; top: -0.62em; /* was -0.32em — sits higher above the first line */ left: -0.08em; font-family: var(--font-display); font-style: italic; font-weight: 200; font-size: clamp(3.5rem, 7vw, 5.5rem); line-height: 1; color: rgba(255,255,255,0.14); pointer-events: none; } .founders-box__quote figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-3); } /* Names — clean Gotham Book, plain title-case — readable */ .founders-box__name { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--color-text-invert); text-transform: none; } /* "Founders" label — tiny caps underneath, Gotham Light */ .founders-box__role { font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.45); } /* The quote itself stays IvyPresto italic — artistic, readable */ /* Light variant — used inside the LIGHT-grey Case Studies section. Two-column layout when there's space (more breathing room after the cards). */ .founders-box--light { margin-top: clamp(var(--space-8), 6vw, var(--space-10)); padding: clamp(var(--space-6), 2.6vw, var(--space-7)) clamp(var(--space-6), 3vw, var(--space-8)); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-6), 3vw, var(--space-8)); background: rgba(255,255,255,0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(0,0,0,0.08); } .founders-box--light .founders-box__quote blockquote { color: var(--color-text); } .founders-box--light .founders-box__name { color: var(--color-text); } .founders-box--light .founders-box__role { color: var(--color-text-muted); } @media (max-width: 720px) { .founders-box--light { grid-template-columns: 1fr; } } /* Ensure content column stretches to match the media column */ .about__content { align-self: stretch; } /* Trust badge — quiet 5-star strip */ .trust-badge { display: inline-flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); max-width: 56ch; } .trust-badge__stars { display: inline-flex; gap: 2px; color: #d4a656; /* warm gold — review-platform convention */ } .trust-badge__stars svg { width: 15px; height: 15px; display: block; } .trust-badge__text { display: inline-flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-body); font-size: var(--fs-sm); color: var(--color-text-muted); } .trust-badge__text strong { font-family: var(--font-display); font-weight: var(--fw-thin); font-size: 1.5rem; color: var(--color-text); letter-spacing: -0.01em; } /* Pillar strip — lives inside the About section, below the grid. Three components of success: Production (Visual Authority) · Marketing (Strategic Distribution) · Media (Global Network). Reveals on scroll via .reveal-soft. (Legacy .about__stats-grid rules kept below for reference but no longer rendered.) */ .about__stats { margin-top: clamp(var(--space-8), 8vw, var(--space-10)); } .about__pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(var(--space-6), 3.5vw, var(--space-8)); } @media (max-width: 900px) { .about__pillars { grid-template-columns: 1fr; gap: var(--space-7); } } .about__pillar { display: grid; gap: var(--space-4); padding-top: clamp(var(--space-5), 3vw, var(--space-6)); border-top: 1px solid rgba(255,255,255,0.14); position: relative; } .about__pillar-num { font-family: var(--font-display); font-style: italic; font-weight: 200; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1; letter-spacing: -0.02em; color: rgba(255,255,255,0.42); } .about__pillar-title { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--color-text-invert); } .about__pillar-title em { font-style: italic; font-weight: 200; color: rgba(255,255,255,0.62); } .about__pillar-body { margin: 0; font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.6; font-weight: var(--fw-light); color: rgba(255,255,255,0.72); max-width: 40ch; } .about__pillar-tag { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: var(--space-4); font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.48); } .about__pillar-tag::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: 0.6; } /* About-page THREE COMPONENTS — boxed cards on dark (replaced the old 4-pair Core Values list). Each box: Roman numeral top-left, discipline tag top-right, title in the body, 3-line lede underneath. */ .about-components__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(var(--space-5), 2.4vw, var(--space-6)); } @media (max-width: 900px) { .about-components__grid { grid-template-columns: 1fr; gap: var(--space-5); } } .component-box { border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.02); padding: clamp(var(--space-6), 3vw, var(--space-7)); display: grid; grid-template-rows: auto auto 1fr; gap: var(--space-4); position: relative; isolation: isolate; transition: background-color 520ms var(--motion-ease), border-color 520ms var(--motion-ease); } .component-box:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.26); } .component-box__num { position: absolute; top: clamp(18px, 2vw, 24px); right: clamp(20px, 2.4vw, 28px); font-family: var(--font-display); font-style: italic; font-weight: 200; font-size: clamp(1.625rem, 2.6vw, 2.125rem); line-height: 1; letter-spacing: -0.02em; color: rgba(255,255,255,0.34); } .component-box__tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); } .component-box__tag::before { content: ""; width: 16px; height: 1px; background: currentColor; opacity: 0.6; } .component-box__title { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--color-text-invert); } .component-box__title em { font-style: italic; font-weight: 200; color: rgba(255,255,255,0.62); } .component-box__body { margin: 0; font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.6; font-weight: var(--fw-light); color: rgba(255,255,255,0.72); max-width: 42ch; } /* ============================================================================ ABOUT PAGE — SECTIONS ADDED IN THE v38 REWRITE (Our Numbers head · about-press light-bg logos · timeline · approach quote · worldwide CTA) ========================================================================= */ /* Our Numbers — section head above the existing .about-stats grid */ .about-stats__head { max-width: 62ch; margin-bottom: clamp(var(--space-7), 5vw, var(--space-8)); } .about-stats__head .eyebrow { color: rgba(255,255,255,0.58); } .about-stats__head h2 { margin-top: var(--space-3); font-size: clamp(2rem, 3.6vw, 2.875rem); line-height: 1.1; color: var(--color-text-invert); } .about-stats__head h2 em { font-style: italic; font-weight: 200; color: rgba(255,255,255,0.55); } /* ---- About PRESS / CLIENTS — WHITE bg, BLACK logos, STATIC grid ---- */ .about-press { background: var(--color-paper); color: var(--color-ink); padding-block: clamp(var(--space-9), 8vw, var(--space-10)); } .about-press__head { max-width: 62ch; margin-bottom: clamp(var(--space-7), 5vw, var(--space-8)); } .about-press__head .eyebrow { color: rgba(10,10,10,0.58); } .about-press__title { margin-top: var(--space-3); font-size: clamp(1.75rem, 3.2vw, 2.625rem); line-height: 1.1; letter-spacing: -0.02em; } .about-press__title em { font-style: italic; font-weight: 200; color: rgba(10,10,10,0.55); } /* 6-col static grid on desktop, 4 on tablet, 3 on mobile. Each logo cell has a hairline border, logos are coerced to BLACK via brightness(0). */ .about-press__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-top: 1px solid rgba(10,10,10,0.12); border-left: 1px solid rgba(10,10,10,0.12); } @media (max-width: 900px) { .about-press__grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 600px) { .about-press__grid { grid-template-columns: repeat(3, 1fr); } } .about-press__grid li { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(10,10,10,0.12); border-bottom: 1px solid rgba(10,10,10,0.12); padding: clamp(var(--space-4), 2.4vw, var(--space-5)); position: relative; overflow: hidden; transition: background-color 420ms var(--motion-ease); } .about-press__grid li:hover { background: var(--color-paper-soft, #f3f3f3); } .about-press__grid img { width: 100%; max-width: 120px; height: auto; max-height: 56px; object-fit: contain; /* Convert WHITE source logos to BLACK (brightness 0 collapses luminance to 0, invert flips back to solid). Opacity softens to editorial weight. */ filter: brightness(0) opacity(0.72); transition: filter 420ms var(--motion-ease), transform 520ms var(--motion-ease); } .about-press__grid li:hover img { filter: brightness(0) opacity(1); transform: scale(1.04); } /* ---- TIMELINE — horizontal milestone track (DARK) ---- */ .about-timeline { background: var(--color-ink); color: var(--color-text-invert); padding-block: clamp(var(--space-9), 8vw, var(--space-10)); overflow: hidden; } .about-timeline__head { max-width: 58ch; margin-bottom: clamp(var(--space-8), 7vw, var(--space-9)); } .about-timeline__head .eyebrow { color: rgba(255,255,255,0.58); } .about-timeline__head h2 { margin-top: var(--space-3); font-size: clamp(2rem, 3.6vw, 2.875rem); line-height: 1.1; color: var(--color-text-invert); } .about-timeline__head h2 em { font-style: italic; font-weight: 200; color: rgba(255,255,255,0.55); } .about-timeline__track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(var(--space-6), 4vw, var(--space-8)); position: relative; } /* Connecting hairline across all items */ .about-timeline__track::before { content: ""; position: absolute; top: 3.5rem; /* vertical alignment with the dot */ left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.14); pointer-events: none; } @media (max-width: 900px) { .about-timeline__track { grid-template-columns: 1fr; gap: var(--space-6); } .about-timeline__track::before { display: none; } } .tl-item { display: grid; gap: clamp(var(--space-4), 2vw, var(--space-5)); position: relative; padding-top: 0.5rem; transition: transform 720ms cubic-bezier(0.22, 0.8, 0.24, 1); } .tl-item:hover { transform: translateY(-6px); } .tl-item__year { font-family: var(--font-display); font-weight: var(--fw-thin, 200); font-style: italic; font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: 1; letter-spacing: -0.02em; color: var(--color-text-invert); transition: color 480ms var(--motion-ease); } .tl-item:hover .tl-item__year { color: #fff; } .tl-item__dot { width: 13px; height: 13px; background: var(--color-text-invert); transform: rotate(45deg); display: inline-block; position: relative; z-index: 1; margin-top: 0.25rem; flex: 0 0 auto; transition: transform 720ms cubic-bezier(0.22, 0.8, 0.24, 1), background-color 480ms var(--motion-ease); } .tl-item:hover .tl-item__dot { transform: rotate(45deg) scale(1.5); background: #ffffff; } .tl-item__label { margin: 0; font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.62); } .tl-item__body { margin: 0; font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.5; font-weight: var(--fw-light); color: rgba(255,255,255,0.72); max-width: 26ch; } /* ---- APPROACH QUOTE — centered editorial pull quote (LIGHT) ---- */ .about-approach { background: var(--color-paper-soft, #f3f3f3); color: var(--color-ink); padding-block: clamp(var(--space-9), 9vw, 11rem); position: relative; overflow: hidden; } .about-approach .container { max-width: 62ch; text-align: center; } .about-approach__quote { margin: 0; font-family: var(--font-display); font-weight: var(--fw-thin); /* 100 — Thin */ font-size: clamp(1.625rem, 3.4vw, 2.625rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--color-ink); position: relative; padding-top: 0.4em; } .about-approach__quote em { font-style: italic; font-weight: var(--fw-thin); /* Ink → lighter-ink text gradient. Background-clip: text paints the glyphs with the gradient instead of a flat muted grey. On the light paper-soft panel this reads as a soft wash across the italic phrase. */ background: linear-gradient(90deg, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.32) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Opening-quote mark — IvyPresto Regular italic “ at icon scale. The glyph itself reads unmistakably as quotation marks; at Regular weight (400 rather than Thin 200) the strokes stay crisp rather than ghostly. Sits centred above the blockquote, restrained opacity so it punctuates rather than dominates. */ .about-approach__openmark { display: block; text-align: center; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(2.25rem, 4vw, 3rem); line-height: 0.55; /* tight so the glyph reads icon-like */ letter-spacing: -0.08em; color: rgba(10,10,10,0.42); margin: 0 auto clamp(var(--space-4), 2.4vw, var(--space-5)); /* Optical centering — “ glyph has a visible left-bias in the metrics */ padding-left: 0.08em; user-select: none; } .about-approach__attr { margin: clamp(var(--space-6), 4vw, var(--space-7)) auto 0; display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(10,10,10,0.55); text-align: center; } /* Small rotated-square ornament — sharp geometric accent. Matches the quotation ticks above so quote and credit share the same language. */ .about-approach__diamond { width: 6px; height: 6px; border: 1px solid rgba(10,10,10,0.38); background: transparent; transform: rotate(45deg); display: block; margin-bottom: 6px; } .about-approach__attr-name { font-family: var(--font-body); font-weight: var(--fw-medium, 500); color: rgba(10,10,10,0.78); } .about-approach__attr-role { font-family: var(--font-body); font-weight: var(--fw-light); color: rgba(10,10,10,0.5); } /* Approach redirect block — explicit deeper-read CTA sitting under the founders' quote. Pushes the visitor to /approach for the full process. */ .about-approach__redirect { margin: clamp(var(--space-8), 7vw, var(--space-10)) auto 0; padding-top: clamp(var(--space-6), 4vw, var(--space-7)); border-top: 1px solid rgba(10,10,10,0.10); display: flex; flex-direction: column; align-items: center; gap: clamp(var(--space-3), 2vw, var(--space-4)); text-align: center; } .about-approach__redirect-eyebrow { font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(10,10,10,0.5); } .about-approach__redirect-title { font-family: var(--font-display); font-weight: var(--fw-thin, 200); font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--color-ink); margin: 0; max-width: 30ch; } .about-approach__redirect-title em { font-style: italic; font-weight: var(--fw-thin, 100); color: rgba(10,10,10,0.55); } .about-approach__redirect-lede { font-family: var(--font-body); font-size: clamp(0.9375rem, 1.05vw, 1rem); line-height: 1.55; font-weight: var(--fw-light); color: rgba(10,10,10,0.62); margin: 0; max-width: 52ch; } .about-approach__redirect-cta { margin-top: clamp(var(--space-3), 2vw, var(--space-4)); } /* ============================================================ ABOUT — three-values blend animation (studiod.nu replica). The section is a sticky-pinned rail spanning ~360vh of vertical scroll so the user is locked into the convergence for ~3 viewport ticks. JS writes scroll progress 0→1 into --blend-p; CSS interpolates everything smoothly off that single variable. The wordmark begins absent at p≤0.40, fades in across 0.40→0.70, then grows in scale across 0.70→1.0 to fill the centre as the three circles fully merge. ============================================================ */ .about-blend { background: #0a0a0a; color: var(--color-text-invert); padding: 0; position: relative; } /* Rail = vertical scroll height; sticky inner pin holds the stage in place while the rail scrolls past it. ~560vh = ~5 scroll ticks so the journey has room: head fade → labels fade → row→pyramid → pyramid→ single merged circle → wordmark grows large. */ .about-blend__rail { position: relative; height: 560vh; } .about-blend__sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(var(--space-4), 3.2vw, var(--space-6)); padding: clamp(60px, 8vh, 110px) clamp(var(--space-5), 5vw, var(--space-9)); overflow: hidden; } /* Head — fades + lifts off as the convergence begins, controlled by --blend-head (0 at start, 1 once head should be gone, mapped from raw progress in JS). */ .about-blend__head { text-align: center; max-width: 56ch; opacity: calc(1 - var(--blend-head, 0)); transform: translateY(calc(var(--blend-head, 0) * -16px)); transition: opacity 200ms linear; will-change: opacity, transform; } .about-blend__head .eyebrow { justify-content: center; color: rgba(255,255,255,0.6); } .about-blend__title { margin: clamp(var(--space-3), 2vw, var(--space-4)) 0 0; color: var(--color-text-invert); } .about-blend__title em { color: rgba(255,255,255,0.55); font-style: italic; font-weight: var(--fw-thin, 100); } .about-blend__lede { margin: clamp(var(--space-4), 2.4vw, var(--space-5)) auto 0; font-family: var(--font-body); font-weight: var(--fw-light); font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.6; color: rgba(255,255,255,0.62); max-width: 50ch; } /* Stage — wide square frame. Bigger circles, with labels anchored to the OUTER half of each circle so they never bleed into a neighbour. Phases (raw scroll progress): 0.00–0.18 → head (eyebrow + title + lede) fades up 0.05–0.40 → labels fade out 0.20–0.62 → circles travel from HORIZONTAL ROW → PYRAMID VENN 0.55–0.92 → circles MERGE from pyramid → SINGLE centred ring 0.40–0.70 → wordmark fades in 0.62–1.00 → wordmark grows in scale ============================================================ */ .about-blend__stage { position: relative; width: min(94vmin, 980px); height: min(74vmin, 620px); margin: 0 auto; --blend-p: 0; --blend-merge: 0; } /* Three ringed circles. Two-stage transform: 1. Linearly interpolate between row pos (sx0/sy0) and pyramid pos (sx1/sy1) via --blend-p (0 = row, 1 = pyramid Venn). 2. Multiply the final offset by (1 - --blend-merge), so as merge climbs toward 1 the circle drifts back to the stage centre, leaving a single clean ring at the end. */ .about-blend__circle { position: absolute; top: 50%; left: 50%; width: 56%; aspect-ratio: 1 / 1; border: 1px solid rgba(255,255,255,0.50); border-radius: 50%; transform: translate(-50%, -50%) translate( calc((var(--sx0) + (var(--sx1) - var(--sx0)) * var(--blend-p)) * (1 - var(--blend-merge))), calc((var(--sy0) + (var(--sy1) - var(--sy0)) * var(--blend-p)) * (1 - var(--blend-merge))) ); display: flex; align-items: center; justify-content: center; will-change: transform; } /* Row positions (p=0) and pyramid Venn positions (p=1). Row spread wide enough so each circle's INNER half (where the label sits) is in the non-overlapping zone of its neighbour. ~32% overlap each pair, classic Venn look. */ .about-blend__circle--a { --sx0: -64%; --sy0: 0%; --sx1: -22%; --sy1: 14%; } .about-blend__circle--b { --sx0: 0%; --sy0: 0%; --sx1: 0%; --sy1: -20%; } .about-blend__circle--c { --sx0: 64%; --sy0: 0%; --sx1: 22%; --sy1: 14%; } /* Discipline labels — biased toward the OUTER half of each circle so they sit in the non-overlapping crescent. Centred inside circle B (the middle one). IvyPresto Display Thin, NON-italic. */ .about-blend__label { font-family: var(--font-display); font-weight: var(--fw-thin, 200); font-style: normal; font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.22; letter-spacing: -0.005em; color: rgba(255,255,255,0.92); text-align: center; max-width: 11ch; white-space: normal; opacity: calc(1 - var(--blend-label, 0)); pointer-events: none; will-change: opacity; } /* Labels stay centred inside their own circle. The wider start spread (sx0 ±64%) means each circle is fully isolated at p=0 so no need to bias toward an outer crescent. */ .about-blend__circle--b .about-blend__label { transform: translateY(-4%); } /* Centre wordmark — STACKED HoA SVG (white). Fades in 0.40→0.70 (--blend-fade), then grows scale 0.55 → 1.45 across 0.62→1.00 (--blend-grow). Final state = single centred ring + large wordmark. */ .about-blend__centre { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: var(--blend-fade, 0); /* Larger start scale (0.7 instead of 0.55) and bigger end scale (1.95 instead of 1.45) so the wordmark begins clearly visible and finishes prominently. */ transform: scale(calc(0.7 + 1.25 * var(--blend-grow, 0))); transform-origin: center center; will-change: transform, opacity; } .about-blend__wordmark { display: block; width: clamp(160px, 26vmin, 320px); height: auto; user-select: none; -webkit-user-drag: none; } @media (max-width: 720px) { .about-blend__rail { height: 480vh; } .about-blend__stage { width: min(96vmin, 540px); height: min(74vmin, 420px); } .about-blend__circle { width: 64%; } .about-blend__circle--a { --sx0: -36%; --sy0: 0%; --sx1: -16%; --sy1: 12%; } .about-blend__circle--b { --sx0: 0%; --sy0: 0%; --sx1: 0%; --sy1: -18%; } .about-blend__circle--c { --sx0: 36%; --sy0: 0%; --sx1: 16%; --sy1: 12%; } .about-blend__label { font-size: 0.9375rem; max-width: 9ch; } .about-blend__wordmark { width: clamp(110px, 28vmin, 200px); } } /* ---- WORLDWIDE CTA — final invitation (LIGHT paper) ---- */ .about-worldwide { background: var(--color-paper); color: var(--color-ink); padding-block: clamp(var(--space-9), 8vw, 10rem); } .about-worldwide__inner { max-width: 52ch; margin-inline: auto; text-align: center; display: grid; gap: clamp(var(--space-5), 4vw, var(--space-6)); } .about-worldwide__inner .eyebrow { color: rgba(10,10,10,0.58); margin: 0 auto; } .about-worldwide__inner h2 { font-size: clamp(2.25rem, 4.4vw, 3.75rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0; } .about-worldwide__inner h2 em { font-style: italic; font-weight: 200; color: rgba(10,10,10,0.55); } .about-worldwide__lede { margin: 0; font-family: var(--font-body); font-size: clamp(0.9375rem, 1.15vw, 1.0625rem); line-height: 1.55; font-weight: var(--fw-light); color: rgba(10,10,10,0.7); } .about-worldwide__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(var(--space-5), 3vw, var(--space-6)); margin-top: var(--space-3); } .about-worldwide__note { font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-light); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(10,10,10,0.5); margin: 0; } /* Legacy stats grid (unused on index, kept in case ported elsewhere) */ .about__stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-7); } .about__stat { display: grid; gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,0.12); } .about__stat-num { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 5rem); font-weight: var(--fw-thin); /* IvyPresto Display Thin — matches old Counter */ line-height: 1; letter-spacing: -0.02em; color: var(--color-text-invert); font-variant-numeric: tabular-nums; } .about__stat-label { /* Gotham Light — explanation sentence, muted white so it reads softer than the main label above. */ font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-light); line-height: 1.5; color: rgba(255,255,255,0.48); } .about__stat-label strong { display: block; font-family: var(--font-body); font-weight: var(--fw-regular); /* Gotham Book — 400, white */ color: var(--color-text-invert); margin-bottom: var(--space-1); } @media (max-width: 840px) { .about__stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } } /* Our values — horizontal inline row (no wrap on desktop) */ .values { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: clamp(var(--space-4), 2.5vw, var(--space-6)); font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); } .values li { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; } .values__star { width: 12px; height: 12px; color: var(--color-text); flex: 0 0 auto; } @media (max-width: 840px) { .values { flex-wrap: wrap; } } /* Media stack — two portrait founder cards layered one over the other, with rounded corners (constantoyannis-style). Card A sits back-left with a slight counter-rotation; Card B sits forward-right. Subtle hover parallax pushes them apart; scroll-linked tilt keeps them alive on entry. */ .about__media { position: relative; min-height: clamp(440px, 52vw, 600px); perspective: 1400px; /* Let the grid stretch this column to match the left column's height — the cards below are height-based so they rescale with the container, keeping the overlap visually consistent at any page height. */ align-self: stretch; } .about__card { position: absolute; margin: 0; overflow: hidden; background: #151515; border-radius: 0; /* sharp corners — no rounding */ box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55), 0 8px 24px -12px rgba(0,0,0,0.4); transition: transform 900ms cubic-bezier(0.22, 0.8, 0.24, 1); will-change: transform; } .about__card img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); transition: transform 1400ms cubic-bezier(0.22, 0.8, 0.24, 1); } /* Card sizing — height-based so both cards scale with the container. Each card at 56% height shows ~3/4 of its photo with a gentle overlap. POSITIONS: Card A pushed to the LEFT edge (2%), Card B pushed to the RIGHT edge (2%) — the diagonal pair with a clear side split, as it was before the centring experiment. */ .about__card--a { top: 0; left: 2%; height: 56%; aspect-ratio: 3 / 4; width: auto; z-index: 1; transform: rotate(-3deg) translateY(0); } .about__card--b { bottom: 0; right: 2%; height: 56%; aspect-ratio: 3 / 4; width: auto; z-index: 2; transform: rotate(2deg) translateY(0); } /* Hover parallax — pushes the two cards apart diagonally + lifts each */ .about__media:hover .about__card--a { transform: rotate(-5deg) translate(-10px, -6px); } .about__media:hover .about__card--b { transform: rotate(3deg) translate(10px, 6px); } .about__card:hover img { transform: scale(1.04); } @media (max-width: 840px) { .about__grid { grid-template-columns: 1fr; } .about__media { min-height: 520px; align-self: auto; } /* On single-column stack, revert cards to width-based so they fill the narrow phone viewport predictably. */ .about__card--a, .about__card--b { height: auto; width: 70%; aspect-ratio: 3 / 4; } .about__card--a { top: 0; } .about__card--b { bottom: 0; } } /* Card image cover + hover (work + post) */ .work-card__frame img, .post__frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--motion-slow) var(--motion-ease); } .work-card:hover .work-card__frame img, .post:hover .post__frame img { transform: scale(1.02); } /* ---------- Counter — DARK, inline with About/Services band ---------- */ .counter { background: var(--color-ink); color: var(--color-text-invert); /* no top border — About flows straight into Counter without a seam */ } .counter .eyebrow { color: rgba(255,255,255,0.55); } .counter__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-7); } .counter__cell { display: grid; gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,0.12); } .counter__num { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 5rem); line-height: 1; letter-spacing: -0.02em; color: var(--color-text-invert); font-variant-numeric: tabular-nums; } .counter__label { font-size: var(--fs-sm); color: rgba(255,255,255,0.6); line-height: 1.5; } .counter__label strong { display: block; color: var(--color-text-invert); font-weight: 500; margin-bottom: var(--space-1); } @media (max-width: 840px) { .counter__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } } /* ---------- Case Studies — WHITE band, cards on subtle off-white fill ---------- */ .case-studies { background: #ffffff; color: var(--color-text); padding-block: clamp(var(--space-10), 11vw, var(--space-12)); } .case-studies .eyebrow { color: var(--color-text-muted); } .case-studies__heading { color: var(--color-text); } .case-studies .section__head p { color: var(--color-text-muted); } /* Head — centred, title on top, hairline divider, description underneath */ .case-studies__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); max-width: 60ch; margin-inline: auto; } .case-studies__heading { margin: 0; max-width: 22ch; text-wrap: balance; } .case-studies__rule { display: block; width: 56px; height: 1px; background: rgba(0,0,0,0.32); margin-top: var(--space-3); } .case-studies__lede { margin: 0; max-width: 56ch; font-family: var(--font-body); font-size: 1rem; font-weight: var(--fw-light); line-height: 1.65; color: var(--color-text-muted); } /* Case studies carousel track — 3 visible at desktop, 2 at tablet, 1 at mobile */ .case-studies__carousel { margin-top: clamp(var(--space-7), 5vw, var(--space-9)); position: relative; padding-inline: clamp(0px, 5vw, 64px); /* leaves room for the side arrows */ } .case-studies__grid { display: flex; gap: clamp(var(--space-5), 2.5vw, var(--space-7)); padding-bottom: 4px; } .case-studies__grid > * { flex: 0 0 calc((100% - 2 * clamp(var(--space-5), 2.5vw, var(--space-7))) / 3); min-width: 0; scroll-snap-align: start; } @media (max-width: 1024px) { .case-studies__grid > * { flex-basis: calc((100% - 1 * clamp(var(--space-5), 2.5vw, var(--space-7))) / 2); } } @media (max-width: 720px) { .case-studies__grid > * { flex-basis: 86%; } } /* Side arrows — plain stroke glyphs (no box, no border), larger + bolder so they read cleanly without feeling like buttons. */ .cs-arrow--side { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: grid; place-items: center; background: transparent; border: 0; color: var(--color-text); cursor: pointer; opacity: 0.7; /* from 0.38 — readable without yelling */ padding: 0; border-radius: 0; z-index: 2; transition: opacity 300ms var(--motion-ease), transform 320ms var(--motion-ease); } .cs-arrow--side:hover { opacity: 1; } .cs-arrow--left { left: 0; } .cs-arrow--right { right: 0; } .cs-arrow--left:hover { transform: translate(-3px, -50%); } .cs-arrow--right:hover { transform: translate(3px, -50%); } .cs-arrow svg { display: block; } .case-studies__carousel .cs-arrow.is-disabled, .case-studies__carousel .cs-arrow:disabled { opacity: 0.4; pointer-events: auto; } @media (max-width: 640px) { .case-studies__carousel { padding-inline: 0; } .cs-arrow--side { position: static; transform: none; width: 40px; height: 40px; } } .case-card { display: flex; flex-direction: column; background: #ffffff; border: 1px solid rgba(0,0,0,0.08); overflow: hidden; position: relative; transition: border-color 500ms var(--motion-ease), background-color 500ms var(--motion-ease); } /* Artistic hover — no shadow, no lift. Instead: 1. Two hairline rules that draw in from opposite corners (editorial feel) 2. A diagonal light-sweep that travels across the image once 3. Subtle image zoom + soft warm bg shift on the card body Each motion overlaps in phase so the whole card feels composed, not animated. */ .case-card::before, .case-card::after { content: ""; position: absolute; height: 1px; background: var(--color-text); transform: scaleX(0); transition: transform 640ms cubic-bezier(0.22, 0.8, 0.24, 1); z-index: 2; pointer-events: none; } .case-card::before { top: 0; left: 0; right: 0; transform-origin: left; } .case-card::after { bottom: 0; left: 0; right: 0; transform-origin: right; } .case-card:hover { border-color: rgba(0,0,0,0.16); background-color: #f2f2f2; } .case-card:hover::before, .case-card:hover::after { transform: scaleX(1); } /* Image at the top of each card — 4:3 crop with a slow zoom + diagonal light sweep */ .case-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-paper-soft); position: relative; } .case-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); filter: brightness(0.96); transition: transform 1400ms cubic-bezier(0.22, 0.8, 0.24, 1), filter 700ms var(--motion-ease); } .case-card:hover .case-card__media img { transform: scale(1.04); filter: brightness(1.02); } /* Subtle scrim — bottom-weighted dark gradient over the image so the meta overlay (date + tag) reads cleanly regardless of the photo's brightness. */ .case-card__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(to top, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0) 100%); pointer-events: none; z-index: 1; } /* Meta overlay — date on the left, tag on the right. Sits ON the image bottom, riding the scrim gradient. White text in the standard meta typography (Gotham Light uppercase, tight letter-spacing). */ .case-card__meta-overlay { position: absolute; bottom: 14px; left: 16px; right: 16px; z-index: 2; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); color: #ffffff; font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.18em; text-transform: uppercase; pointer-events: none; } .case-card__meta-overlay .case-card__date, .case-card__meta-overlay .case-card__tag { color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Premium badge — inspired by the fluid.glass pill. Dark chip in the top- right corner of the media, #star-4 glyph + uppercase label. Sits on top of the image via z-index, backdrop-blur for legibility over any photo. */ .case-card__badge { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; background: rgba(10, 10, 10, 0.82); color: #ffffff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; /* badge is decorative — click goes to the media link */ } .case-card__badge-icon { width: 11px; height: 11px; flex: 0 0 auto; color: currentColor; } .case-card__badge-label { font-family: var(--font-body); font-size: 0.625rem; font-weight: var(--fw-medium, 500); letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; } .case-card__body { display: flex; flex-direction: column; gap: clamp(var(--space-4), 1.8vw, var(--space-5)); padding: clamp(var(--space-5), 2.4vw, var(--space-6)) clamp(var(--space-5), 2.6vw, var(--space-6)); flex: 1; } .case-card__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted); } .case-card__date { white-space: nowrap; } /* 2025 – 2026 stays on one line */ .case-card__tag { white-space: nowrap; } .case-card__tag { color: var(--color-text); } .case-card__name { font-family: var(--font-display); font-size: clamp(1.5rem, 2vw, 1.75rem); font-weight: var(--fw-thin); line-height: 1.1; letter-spacing: -0.01em; color: var(--color-text); margin: 0; } .case-card__loc { font-style: italic; color: var(--color-text-muted); } /* Title group — name stacked above a one-line explanation. Slight gap so the subtitle reads as a distinct descriptor line, not a kerning tail of the title above. */ .case-card__title { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .case-card__sub { margin: 0; font-family: var(--font-body); font-size: 0.8125rem; font-weight: var(--fw-light); line-height: 1.4; color: var(--color-text-muted); letter-spacing: 0; } /* 3-column stats — minmax(0, 1fr) lets columns shrink below their content width so a long value (e.g. €6.8M+) doesn't push the grid sideways. Each number is nowrap so it never breaks under its neighbour. */ .case-card__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(var(--space-2), 1vw, var(--space-3)); padding-block: clamp(var(--space-4), 2vw, var(--space-5)); border-top: 1px solid rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.08); } /* Stacked stat: big number on top, short bold label on a single line below. Labels are deliberately 1 word / abbreviation (CPL, Leads, Signed, etc.) so they fit in the narrow card column without wrapping to 2 lines. */ .case-card__stats > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow: hidden; } .case-card__num { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: var(--fw-thin); line-height: 1; letter-spacing: -0.02em; color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; } .case-card__label { font-family: var(--font-body); font-size: 0.625rem; font-weight: var(--fw-medium, 500); /* bolder so the short label holds its own */ letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: clip; line-height: 1; } .case-card__production { font-family: var(--font-body); font-size: 0.8125rem; font-weight: var(--fw-light); line-height: 1.6; color: var(--color-text-muted); } .case-card__kicker { /* Gotham Light — reads as a clean factual one-liner, not a display pull-quote. Carries the descriptive "what the number means" sentence underneath stats. */ font-family: var(--font-body); font-style: normal; font-weight: var(--fw-light); font-size: 0.875rem; line-height: 1.5; color: var(--color-text); padding-top: var(--space-3); border-top: 1px solid rgba(0,0,0,0.08); margin-top: auto; } /* "Read more" CTA inside each case card — small inline link with the site's standard NE-arrow glyph. Hover animates the arrow (same vocabulary as featured__read / btn-ct arrows). */ .case-card__readmore { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-medium, 500); letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text); text-decoration: none; padding-top: var(--space-2); transition: color 320ms var(--motion-ease); } .case-card__readmore svg { width: 12px; height: 12px; flex: 0 0 auto; transition: transform 420ms cubic-bezier(0.22, 0.8, 0.24, 1); } .case-card__readmore:hover { color: var(--color-text-muted); } .case-card__readmore:hover svg { transform: translate(3px, -3px); } /* Foot — centred column: quiet proof-line then CTA button, no divider line */ .case-studies__foot { margin-top: clamp(var(--space-8), 6vw, var(--space-10)); display: flex; flex-direction: column; align-items: center; gap: clamp(var(--space-5), 3vw, var(--space-6)); text-align: center; } .case-studies__proof { margin: 0; max-width: 52ch; display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-light); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); border: 1px solid rgba(0,0,0,0.08); border-radius: 999px; background: #ffffff; } .case-studies__proof svg { width: 9px; height: 9px; color: var(--color-text-muted); flex: 0 0 auto; } .case-studies__proof em { font-family: var(--font-display); font-style: italic; font-weight: var(--fw-thin); text-transform: none; letter-spacing: -0.005em; color: var(--color-text); font-size: 0.9375rem; margin-inline: 2px; } .case-studies__cta { display: flex; justify-content: center; margin-top: clamp(var(--space-8), 6vw, var(--space-10)); } .case-studies__cta .btn-ct--quiet { color: rgba(10,10,10,0.72); border-color: rgba(10,10,10,0.12); } .case-studies__cta .btn-ct--quiet:hover { color: var(--color-text); border-color: rgba(10,10,10,0.32); } .case-studies__cta .btn-ct--quiet::before { background: conic-gradient( from var(--run-angle), rgba(10,10,10,0) 0%, rgba(10,10,10,0.4) 6%, rgba(10,10,10,0) 18%, rgba(10,10,10,0) 100% ); } /* ---------- Approach — 7-step vertical roadmap (DARK) ---------- */ .approach { background: var(--color-ink); color: var(--color-text-invert); border-top: 1px solid rgba(255,255,255,0.12); } .approach .eyebrow { color: rgba(255,255,255,0.55); } .approach .display { color: var(--color-text-invert); } .approach .muted { color: rgba(255,255,255,0.62) !important; } .roadmap { list-style: none; margin: 0; padding: 0; margin-top: var(--space-7); position: relative; } /* Vertical thread connecting the numbers — sits behind each step */ .roadmap::before { content: ""; position: absolute; left: 22px; /* aligns with centre of circle */ top: 12px; bottom: 12px; width: 1px; background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.25), rgba(255,255,255,0.05)); } .roadmap__step { display: grid; grid-template-columns: 44px 1fr; gap: clamp(var(--space-5), 3vw, var(--space-8)); padding-block: clamp(var(--space-5), 2.6vw, var(--space-7)); border-bottom: 1px solid rgba(255,255,255,0.08); position: relative; } .roadmap__step:last-child { border-bottom: 0; } .roadmap__num { font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-light); letter-spacing: 0.18em; color: var(--color-text-invert); font-variant-numeric: tabular-nums; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.25); background: var(--color-ink); /* covers the thread line */ z-index: 1; } .roadmap__body { display: flex; flex-direction: column; gap: var(--space-2); max-width: 64ch; } .roadmap__title { margin: 0; font-family: var(--font-display); font-weight: var(--fw-thin); font-size: clamp(1.375rem, 2.4vw, 1.875rem); letter-spacing: -0.01em; line-height: 1.1; color: var(--color-text-invert); } .roadmap__desc { margin: 0; font-family: var(--font-body); font-size: 0.9375rem; font-weight: var(--fw-light); line-height: 1.6; color: rgba(255,255,255,0.68); } /* ---------- Approach v6 — horizontal scroll-pinned process ---------- */ /* Pin duration — user scrolls through this vertical distance to advance all 7 steps. Formula: (steps - visible) × step-scroll-multiplier. With ~7 steps and each taking about ~80vh of scroll feel, total ≈ 520vh including a lead-in. */ .approach--hscroll { background: var(--color-ink); color: var(--color-text-invert); padding-block: 0; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); } /* Approach unlock — sits as its own band on the dark canvas right after the seven-step process pin releases. Eyebrow + title + lede + glass CTA. */ .approach-unlock { background: var(--color-ink, #0a0a0a); color: var(--color-text-invert); padding: clamp(80px, 10vw, 144px) 0 clamp(96px, 11vw, 160px); text-align: center; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); } .approach-unlock__inner { max-width: 56ch; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: clamp(var(--space-3), 2vw, var(--space-4)); } .approach-unlock__eyebrow { color: rgba(255,255,255,0.6); justify-content: center; } .approach-unlock__title { font-family: var(--font-display); font-weight: var(--fw-thin, 200); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.06; letter-spacing: -0.02em; margin: 0; color: var(--color-text-invert); } .approach-unlock__title em { font-style: italic; font-weight: var(--fw-thin, 100); color: rgba(255,255,255,0.6); } .approach-unlock__lede { font-family: var(--font-body); font-weight: var(--fw-light); font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.6; color: rgba(255,255,255,0.62); margin: 0; max-width: 52ch; } .approach-unlock__cta { margin-top: clamp(var(--space-3), 2vw, var(--space-4)); } .approach-pin { position: relative; /* 7 slides total (no outro now — CTA lives in the .approach-unlock section directly below). End state shows steps 06 and 07 side by side. */ height: 640vh; /* Explicit dark fill so the empty area below the sticky stage cannot reveal the page's paper body background as the pin releases. */ background: var(--color-ink, #0a0a0a); } .approach.approach--hscroll + .approach-unlock { /* Hairline separator removed when the unlock band sits directly under the dark pin so the two read as one continuous black stretch. */ border-top: 0; } .approach-pin__stage { position: sticky; top: 0; height: 100vh; display: grid; grid-template-rows: auto auto 1fr; overflow: hidden; padding-block: 48px 48px; } .approach-pin__progress { position: relative; } .approach-pin__progress-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-5); margin-bottom: 14px; } .approach-pin__progress-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.625rem; font-weight: var(--fw-light); letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.72); } .approach-pin__progress-label svg { width: 10px; height: 10px; color: rgba(255,255,255,0.55); } .approach-pin__phases { display: flex; justify-content: space-between; max-width: 640px; margin-inline: auto; width: 100%; font-family: var(--font-display); font-style: italic; font-weight: var(--fw-thin); font-size: 0.8125rem; letter-spacing: -0.005em; color: rgba(255,255,255,0.38); } .approach-pin__phases span { transition: color 320ms var(--motion-ease); } .approach-pin__phases span[data-phase-active] { color: rgba(255,255,255,0.92); } .approach-pin__progress-counter { font-family: var(--font-display); font-style: normal; font-weight: var(--fw-thin, 100); font-size: 1.125rem; letter-spacing: -0.005em; color: rgba(255,255,255,0.85); font-variant-numeric: tabular-nums; display: inline-flex; gap: 6px; align-items: baseline; margin-left: auto; } .approach-pin__progress-counter em { color: rgba(255,255,255,0.38); font-style: normal; font-weight: var(--fw-light); } .approach-pin__progress-bar { position: relative; height: 1px; background: rgba(255,255,255,0.15); } .approach-pin__progress-fill { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--hscroll-progress, 0)); will-change: transform; } /* Vertical tick marks at phase boundaries */ .approach-pin__progress-tick { position: absolute; top: -3px; bottom: -3px; width: 1px; background: rgba(255,255,255,0.55); transform: translateX(-0.5px); } .approach-pin__head { padding-block: clamp(20px, 3vw, 36px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .approach-pin__headline { margin: 0; color: var(--color-text-invert); max-width: 22ch; font-size: clamp(2rem, 3.4vw, 2.75rem); } .approach-pin__headline em { color: rgba(255,255,255,0.6); font-style: italic; } /* Scroll-right cue under the pin headline. Subtle horizontal arrow with a hairline rule, gently nudging right on a long, slow loop so the user reads it as "scroll the rail" not "click here". */ .approach-pin__scroll-cue { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(10px, 1.4vw, 18px); color: rgba(255,255,255,0.55); font-family: var(--font-body); font-size: 11px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; pointer-events: none; animation: approach-pin-cue-nudge 2.4s ease-in-out infinite; } .approach-pin__scroll-cue-line { display: inline-block; width: 36px; height: 1px; background: rgba(255,255,255,0.35); } .approach-pin__scroll-cue svg { color: rgba(255,255,255,0.65); } @keyframes approach-pin-cue-nudge { 0%, 100% { transform: translateX(0); opacity: 0.7; } 50% { transform: translateX(6px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .approach-pin__scroll-cue { animation: none; } } .approach-pin__rail { position: relative; overflow: hidden; /* hides track translate overflow */ align-self: stretch; display: flex; align-items: center; } .approach-pin__track { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; height: 100%; /* 7 slides × 50vw each. (7 × 50) − 100 viewport = 250 translate range, so the final two slides sit side by side at the end state. */ transform: translate3d(calc(var(--hscroll-progress, 0) * -250vw), 0, 0); will-change: transform; min-width: 350vw; } /* Approach-only modifier — approach.html still has 8 step slides for now (will be synced to 7 in a later pass alongside the analytical copy). */ .approach--hscroll-8 .approach-pin { height: 600vh; } .approach--hscroll-8 .approach-pin__track { transform: translate3d(calc(var(--hscroll-progress, 0) * -300vw), 0, 0); min-width: 400vw; } .hstep { position: relative; flex: 0 0 50vw; padding-inline: clamp(40px, 6vw, 100px); border-left: 1px solid rgba(255,255,255,0.1); height: 100%; display: flex; align-items: center; min-width: 0; overflow: hidden; transition: opacity 420ms var(--motion-ease); opacity: 0.62; } .hstep:first-child { border-left: 0; } .hstep[data-hstep-active] { opacity: 1; } .hstep__content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-3); max-width: 42ch; } /* Crown — phase label, then a hairline rule, then the step number on one horizontal row. Replaces the old ghost+numeral combo so the same digit never repeats on screen. */ .hstep__crown { display: flex; align-items: center; gap: 14px; margin-bottom: var(--space-2); } .hstep__phase { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.625rem; font-weight: var(--fw-light); letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.72); white-space: nowrap; } .hstep__phase svg { width: 9px; height: 9px; color: rgba(255,255,255,0.55); flex: 0 0 auto; } .hstep__rule { flex: 1 1 auto; height: 1px; background: rgba(255,255,255,0.18); max-width: 80px; } /* Big ghost step number — positioned absolutely on the right side of each step, very transparent, acts as a typographic watermark. Replaces the old small crown-row number (same element, escapes the crown flow via position:absolute). */ .hstep__num { position: absolute; top: 4%; right: clamp(24px, 3.5vw, 72px); font-family: var(--font-display); font-weight: var(--fw-thin); font-style: italic; font-size: clamp(10rem, 20vw, 22rem); line-height: 0.85; letter-spacing: -0.04em; color: rgba(255,255,255,0.06); font-variant-numeric: tabular-nums; pointer-events: none; z-index: 0; transition: color 420ms var(--motion-ease); } .hstep__content { position: relative; z-index: 1; } .hstep[data-hstep-active] .hstep__num { color: rgba(255,255,255,0.09); } /* Outro slide — final horizontal-scroll slide, unnumbered, prominent CTA */ .hstep.hstep--outro { display: flex; align-items: center; justify-content: center; text-align: center; } .hstep__content--outro { max-width: 54ch; display: flex; flex-direction: column; align-items: center; gap: clamp(var(--space-4), 2vw, var(--space-5)); } .hstep__outro-title { font-family: var(--font-display); font-weight: var(--fw-thin, 200); font-size: clamp(1.75rem, 3.2vw, 2.625rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--color-text-invert, #fff); margin: 0; text-wrap: balance; } .hstep__outro-desc { font-family: var(--font-body); font-weight: var(--fw-light, 300); font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.55; color: rgba(255,255,255,0.72); margin: 0; max-width: 48ch; text-wrap: balance; } .hstep__outro-cta { margin-top: clamp(var(--space-3), 1.6vw, var(--space-4)); } .hstep__title { margin: 0; font-family: var(--font-display); font-weight: var(--fw-thin); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--color-text-invert); } .hstep__desc { margin: 0; max-width: 42ch; font-family: var(--font-body); font-size: 1rem; font-weight: var(--fw-light); line-height: 1.6; color: rgba(255,255,255,0.72); } /* Deliverables — 3 small items with a leading ✦ */ .hstep__deliverables { list-style: none; margin: var(--space-3) 0 0; padding: var(--space-3) 0 0; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 6px; } .hstep__deliverables li { position: relative; padding-left: 18px; font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.72); } .hstep__deliverables li::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 1px; background: rgba(255,255,255,0.55); } /* Pace — small timing indicator at the foot of each step card */ .hstep__pace { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,0.08); font-family: var(--font-body); font-size: 0.625rem; font-weight: var(--fw-light); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.4); display: inline-flex; align-items: center; gap: 10px; } .hstep__pace em { font-family: var(--font-display); font-style: italic; font-weight: var(--fw-thin); font-size: 0.9375rem; letter-spacing: -0.005em; color: rgba(255,255,255,0.85); text-transform: none; } /* CTA on the last process step — invites the reader into the full Approach page. Uppercase link + NE arrow, standard motion vocabulary. */ .hstep__cta { margin-top: var(--space-5); display: inline-flex; align-items: center; gap: 10px; padding-top: var(--space-3); font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-medium, 500); letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-invert); text-decoration: none; transition: color 320ms var(--motion-ease); } .hstep__cta svg { width: 12px; height: 12px; transition: transform 420ms cubic-bezier(0.22, 0.8, 0.24, 1); } .hstep__cta:hover { color: rgba(255,255,255,0.72); } .hstep__cta:hover svg { transform: translate(3px, -3px); } /* Mobile / tablet — disable the pin + horizontal scroll, use a vertical list */ @media (max-width: 900px) { .approach-pin { height: auto; } .approach-pin__stage { position: static; height: auto; display: block; padding-block: clamp(48px, 8vw, 80px); overflow: visible; } .approach-pin__progress { display: none; } .approach-pin__rail { overflow: visible; } .approach-pin__track { flex-direction: column; transform: none; min-width: 0; gap: var(--space-6); margin-top: clamp(32px, 5vw, 48px); } .hstep { flex: 1 1 auto; border-left: 0; border-top: 1px solid rgba(255,255,255,0.1); padding: clamp(24px, 4vw, 32px) 0 0; height: auto; opacity: 1; overflow: visible; } .hstep:first-child { border-top: 0; padding-top: 0; } .hstep__content { max-width: 56ch; } } /* ---------- Approach v5 — compact centred roadmap (deprecated, kept for safety) ---------- */ .approach--compact { padding-block: clamp(var(--space-7), 5vw, var(--space-8)); } .approach__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); max-width: 54ch; margin-inline: auto; margin-bottom: clamp(var(--space-6), 4vw, var(--space-8)); } .approach__headline { margin: 0; color: var(--color-text-invert); max-width: 24ch; font-size: clamp(2.25rem, 4vw, 3.25rem); /* bigger per brief */ line-height: 1.05; } .approach__headline em { color: rgba(255,255,255,0.72); font-style: italic; } .approach__lede { margin: 0; max-width: 54ch; font-family: var(--font-body); font-size: 1rem; font-weight: var(--fw-light); line-height: 1.65; color: rgba(255,255,255,0.72); } .roadmap-min { list-style: none; margin: clamp(var(--space-6), 4vw, var(--space-8)) 0 clamp(var(--space-5), 3vw, var(--space-7)); padding: 0; position: relative; display: grid; grid-template-columns: repeat(7, 1fr); column-gap: clamp(4px, 0.5vw, 10px); min-height: clamp(200px, 20vw, 260px); /* slimmer than before — titles are shorter */ align-items: center; } /* Single thin line running through all seven stations — the road */ .roadmap-min::before { content: ""; position: absolute; top: 50%; left: calc(100% / 14); /* pad in to the first dot centre */ right: calc(100% / 14); /* pad in from the last dot centre */ height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.35) 12%, rgba(255,255,255,0.35) 88%, rgba(255,255,255,0.05) 100% ); transform: translateY(-0.5px); } .roadmap-min__stop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; } .roadmap-min__dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: var(--color-ink); border: 1px solid rgba(255,255,255,0.7); transition: transform 420ms var(--motion-ease), border-color 420ms var(--motion-ease), box-shadow 420ms var(--motion-ease); z-index: 1; } .roadmap-min__stop:hover .roadmap-min__dot { transform: translate(-50%, -50%) scale(1.25); border-color: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,0.06), 0 0 20px rgba(255,255,255,0.18); } .roadmap-min__label { position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; width: min(22ch, 100%); padding-inline: 4px; } /* Stations alternate above and below the line */ .roadmap-min__stop[data-pos="top"] .roadmap-min__label { bottom: calc(50% + 28px); } .roadmap-min__stop[data-pos="bottom"] .roadmap-min__label { top: calc(50% + 28px); } .roadmap-min__num { font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.28em; color: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums; } .roadmap-min__title { margin: 4px 0 0; font-family: var(--font-display); font-weight: var(--fw-thin); font-size: clamp(1.125rem, 1.7vw, 1.5rem); /* bigger per brief */ line-height: 1.1; letter-spacing: -0.005em; color: var(--color-text-invert); } /* Mobile / tablet — collapse to a vertical line with stops on alternating sides */ @media (max-width: 900px) { .roadmap-min { grid-template-columns: 1fr; row-gap: clamp(40px, 6vw, 64px); margin-block: clamp(48px, 8vw, 80px); min-height: 0; padding-left: 24px; } .roadmap-min::before { left: 24px; right: auto; top: 24px; bottom: 24px; width: 1px; height: auto; background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.35) 10%, rgba(255,255,255,0.35) 90%, rgba(255,255,255,0.05) 100% ); } .roadmap-min__stop { align-items: flex-start; } .roadmap-min__dot { left: 24px; top: 14px; transform: none; } .roadmap-min__label, .roadmap-min__stop[data-pos="top"] .roadmap-min__label, .roadmap-min__stop[data-pos="bottom"] .roadmap-min__label { position: static; transform: none; align-items: flex-start; text-align: left; padding: 0 0 0 56px; width: 100%; max-width: 48ch; } .roadmap-min__desc { max-width: 40ch; } } /* Worldwide closer — centred, globe is the hero visual */ .approach__worldwide { margin-top: clamp(var(--space-9), 9vw, var(--space-11)); padding-top: clamp(var(--space-7), 5vw, var(--space-9)); border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; align-items: center; gap: clamp(var(--space-5), 3vw, var(--space-7)); } .approach__worldwide-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; } .approach__worldwide-title { margin: 0; color: var(--color-text-invert); max-width: 18ch; text-align: center; } .approach__worldwide-title em { color: rgba(255,255,255,0.55); font-style: italic; } .approach__worldwide-globe { position: relative; width: 100%; max-width: clamp(320px, 46vw, 520px); aspect-ratio: 1 / 1; cursor: grab; user-select: none; -webkit-user-select: none; } .approach__worldwide-globe.is-grabbing { cursor: grabbing; } .approach__worldwide-globe .globe-canvas { width: 100%; height: 100%; display: block; } .approach__worldwide-hint { position: absolute; bottom: 10px; left: 10px; padding: 4px 10px; font-family: var(--font-body); font-size: 0.625rem; font-weight: var(--fw-light); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); background: rgba(10,10,10,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.12); pointer-events: none; } .approach__worldwide-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(var(--space-6), 5vw, var(--space-8)); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,0.08); width: 100%; max-width: 520px; } .approach__worldwide-meta li { display: flex; flex-direction: column; align-items: center; gap: 4px; } .approach__worldwide-meta span { font-family: var(--font-display); font-weight: var(--fw-thin); font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1; color: var(--color-text-invert); font-variant-numeric: tabular-nums; } .approach__worldwide-meta em { font-family: var(--font-body); font-style: normal; font-size: 0.625rem; font-weight: var(--fw-light); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.4); } /* ---------- Approach v3 — DEPRECATED (vertical steps + sticky aside) ---------- */ .approach__grid { margin-top: clamp(var(--space-8), 8vw, var(--space-10)); display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(var(--space-7), 6vw, var(--space-10)); align-items: start; } .approach__steps { list-style: none; margin: 0; padding: 0; position: relative; } /* Vertical thread line running through the icon centres */ .approach__steps::before { content: ""; position: absolute; left: 22px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient( 180deg, transparent 0%, rgba(255,255,255,0.25) 15%, rgba(255,255,255,0.18) 85%, transparent 100% ); z-index: 0; } .approach__step { display: grid; grid-template-columns: 44px 1fr; gap: clamp(var(--space-5), 2.6vw, var(--space-7)); padding: clamp(var(--space-5), 2.2vw, var(--space-6)) 0; border-bottom: 1px solid rgba(255,255,255,0.08); position: relative; } .approach__step:last-child { border-bottom: 0; } .approach__icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.22); background: var(--color-ink); /* covers the thread where it passes through */ color: rgba(255,255,255,0.85); position: relative; z-index: 1; transition: border-color 420ms var(--motion-ease), color 420ms var(--motion-ease); } .approach__step:hover .approach__icon { border-color: rgba(255,255,255,0.55); color: #fff; } .approach__body { display: flex; flex-direction: column; gap: 6px; max-width: 56ch; } .approach__num { font-family: var(--font-body); font-size: 0.625rem; font-weight: var(--fw-light); letter-spacing: 0.24em; color: rgba(255,255,255,0.42); font-variant-numeric: tabular-nums; } .approach__title { margin: 0; font-family: var(--font-display); font-weight: var(--fw-thin); font-size: clamp(1.375rem, 2.2vw, 1.875rem); letter-spacing: -0.01em; line-height: 1.1; color: var(--color-text-invert); } .approach__desc { margin: 2px 0 0; font-family: var(--font-body); font-size: 0.9375rem; font-weight: var(--fw-light); line-height: 1.6; color: rgba(255,255,255,0.6); } /* RIGHT aside: sticky globe + worldwide copy */ .approach__aside { position: relative; } .approach__aside-sticky { position: sticky; top: clamp(80px, 12vh, 140px); display: flex; flex-direction: column; gap: clamp(var(--space-5), 3vw, var(--space-7)); } .approach__globe-shell { position: relative; aspect-ratio: 1 / 1; width: 100%; cursor: grab; user-select: none; -webkit-user-select: none; } .approach__globe-shell.is-grabbing { cursor: grabbing; } .approach__globe-shell .globe-canvas { width: 100%; height: 100%; display: block; } .approach__globe-hint { position: absolute; bottom: 12px; left: 12px; padding: 4px 10px; font-family: var(--font-body); font-size: 0.625rem; font-weight: var(--fw-light); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.6); background: rgba(10,10,10,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.12); pointer-events: none; } .approach__aside-text { display: flex; flex-direction: column; gap: var(--space-3); } .approach__aside-heading { margin: var(--space-2) 0 0; color: var(--color-text-invert); font-size: clamp(1.375rem, 2.3vw, 1.875rem); line-height: 1.1; max-width: 14ch; } .approach__aside-heading em { color: rgba(255,255,255,0.55); font-style: italic; } .approach__aside-copy { margin: var(--space-2) 0 0; font-family: var(--font-body); font-size: 0.9375rem; font-weight: var(--fw-light); line-height: 1.65; color: rgba(255,255,255,0.62); } .approach__aside-meta { list-style: none; margin: var(--space-3) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-wrap: wrap; gap: clamp(var(--space-4), 3vw, var(--space-6)); } .approach__aside-meta li { display: flex; flex-direction: column; gap: 2px; } .approach__aside-meta span { font-family: var(--font-display); font-weight: var(--fw-thin); font-size: 1.5rem; line-height: 1; color: var(--color-text-invert); font-variant-numeric: tabular-nums; } .approach__aside-meta em { font-family: var(--font-body); font-style: normal; font-size: 0.625rem; font-weight: var(--fw-light); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.4); } @media (max-width: 960px) { .approach__grid { grid-template-columns: 1fr; gap: var(--space-8); } .approach__aside-sticky { position: static; } } /* ---------- Approach v2 (horizontal flow) — DEPRECATED, kept for safety ---------- */ .approach-flow { list-style: none; margin: clamp(var(--space-7), 8vw, var(--space-9)) 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 24px); position: relative; } /* Horizontal thread through the icon row — desktop only */ .approach-flow::before { content: ""; position: absolute; top: 22px; /* centre of 44px icon */ left: calc(100% / 14); /* pad to centre of first icon */ right: calc(100% / 14); height: 1px; background: linear-gradient( 90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.05) 100% ); z-index: 0; } .approach-flow__step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-right: 8px; } .approach-flow__icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.22); background: var(--color-ink); /* covers the thread line */ color: rgba(255,255,255,0.85); flex: 0 0 auto; transition: border-color 420ms var(--motion-ease), color 420ms var(--motion-ease); } .approach-flow__step:hover .approach-flow__icon { border-color: rgba(255,255,255,0.55); color: #fff; } .approach-flow__num { font-family: var(--font-body); font-size: 0.625rem; font-weight: var(--fw-light); letter-spacing: 0.22em; color: rgba(255,255,255,0.45); font-variant-numeric: tabular-nums; margin-top: 6px; } .approach-flow__title { margin: 0; font-family: var(--font-display); font-weight: var(--fw-thin); font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.15; letter-spacing: -0.005em; color: var(--color-text-invert); } .approach-flow__desc { margin: 0; font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-light); line-height: 1.55; color: rgba(255,255,255,0.55); max-width: 22ch; } @media (max-width: 1180px) { .approach-flow { grid-template-columns: repeat(4, 1fr); } .approach-flow::before { display: none; } } @media (max-width: 760px) { .approach-flow { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 440px) { .approach-flow { grid-template-columns: 1fr; } } /* ---------- Approach — Global reach sub-block with rotating globe ---------- */ .approach__global { margin-top: clamp(var(--space-9), 10vw, var(--space-11)); padding-top: clamp(var(--space-7), 6vw, var(--space-9)); border-top: 1px solid rgba(255,255,255,0.12); display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(var(--space-6), 5vw, var(--space-9)); align-items: center; } .approach__global-text { display: flex; flex-direction: column; gap: var(--space-4); } .approach__global-heading { margin: var(--space-3) 0 var(--space-2); color: var(--color-text-invert); max-width: 16ch; } .approach__global-heading em { color: rgba(255,255,255,0.55); font-style: italic; } .approach__global-copy { margin: 0; font-family: var(--font-body); font-size: 1rem; font-weight: var(--fw-light); line-height: 1.65; color: rgba(255,255,255,0.7); max-width: 52ch; } .approach__global-meta { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(var(--space-5), 3vw, var(--space-7)); border-top: 1px solid rgba(255,255,255,0.08); padding-top: var(--space-5); } .approach__global-meta li { display: flex; flex-direction: column; gap: 4px; } .approach__global-meta span { font-family: var(--font-display); font-weight: var(--fw-thin); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; color: var(--color-text-invert); font-variant-numeric: tabular-nums; } .approach__global-meta em { font-family: var(--font-body); font-style: normal; font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.45); } .approach__global-globe { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 560px; justify-self: end; cursor: grab; user-select: none; -webkit-user-select: none; } .approach__global-globe.is-grabbing { cursor: grabbing; } .approach__global-globe .globe-canvas { width: 100%; height: 100%; display: block; } .approach__global-hint { position: absolute; bottom: 12px; left: 12px; padding: 4px 10px; font-family: var(--font-body); font-size: 0.625rem; font-weight: var(--fw-light); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); background: rgba(10,10,10,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.12); pointer-events: none; } @media (max-width: 960px) { .approach__global { grid-template-columns: 1fr; } .approach__global-globe { justify-self: center; max-width: 420px; } } /* ---------- Services (dark section, row list with hover reveal) ---------- */ .services { background: var(--color-ink); color: var(--color-text-invert); border-top: 1px solid rgba(255,255,255,0.12); /* divider between Numbers and Services */ } .services .eyebrow { color: var(--color-text-invert-muted); } .services .display { color: var(--color-text-invert); } .services .muted { color: var(--color-text-invert-muted); } .service-list { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,0.18); border-bottom: 1px solid rgba(255,255,255,0.18); } .service-row { display: grid; grid-template-columns: 64px 1fr auto; align-items: flex-start; gap: var(--space-5); padding: clamp(var(--space-5), 3.5vw, var(--space-7)) var(--space-5); position: relative; overflow: hidden; color: var(--color-text-invert); transition: background-color 450ms var(--motion-ease); } .service-row + .service-row { border-top: 1px solid rgba(255,255,255,0.12); } /* Row hover — single unified "open" animation, no background tint so there is no perception of two hover events layering. */ .service-row { transition: none; } /* Expanded detail — 2 short bullets, about-style editorial voice. Collapsed by default, opens on row hover via max-height + opacity + margin. */ .service-row__detail { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height 820ms cubic-bezier(0.22, 0.8, 0.24, 1), opacity 640ms var(--motion-ease), margin 700ms var(--motion-ease); } .service-row:hover .service-row__detail { max-height: 240px; opacity: 1; margin-top: var(--space-4); } .service-row__detail ul { list-style: none; margin: 0; padding: var(--space-4) 0 0; border-top: 1px solid rgba(255,255,255,0.08); display: grid; gap: var(--space-2); max-width: 64ch; } .service-row__detail li { display: flex; align-items: baseline; gap: var(--space-3); font-family: var(--font-body); font-size: 0.9375rem; font-weight: var(--fw-light); line-height: 1.55; color: rgba(255,255,255,0.7); } .service-row__detail li::before { content: "\2014"; /* em-dash bullet — editorial */ color: rgba(255,255,255,0.32); flex: 0 0 auto; } @media (hover: none) { .service-row__detail { max-height: 240px; opacity: 1; margin-top: var(--space-4); } } .service-row__num { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-light); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-invert-muted); font-variant-numeric: tabular-nums; transition: color 400ms var(--motion-ease); } .service-row:hover .service-row__num { color: var(--color-text-invert); } .service-row__name { transition: color 300ms var(--motion-ease); position: relative; } .service-row:hover .service-row__name { color: var(--color-text-invert); } .service-row__body { display: grid; gap: var(--space-5); max-width: 72ch; } .service-row__name { font-family: var(--font-display); font-size: clamp(1.75rem, 3.8vw, 3rem); /* shrunk from 2.5–5rem */ font-weight: var(--fw-thin); letter-spacing: -0.01em; text-transform: none; line-height: 1.05; } .service-row__desc { font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-light); line-height: 1.55; color: var(--color-text-invert-muted); max-width: 58ch; margin: 0; } /* Deliverables chips — editorial caps tags under each service name. Adds specificity without making the row feel busy. */ .service-row__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) 10px; margin-top: var(--space-3); } .service-row__chips li { font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); padding: 6px 12px; border: 1px solid rgba(255,255,255,0.14); transition: border-color 400ms var(--motion-ease), color 400ms var(--motion-ease), background-color 400ms var(--motion-ease); } .service-row:hover .service-row__chips li { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.26); } .service-row__arrow { display: inline-grid; place-items: center; width: 40px; height: 40px; color: var(--color-text-invert-muted); transition: color 300ms var(--motion-ease); } .service-row:hover .service-row__arrow { color: var(--color-text-invert); } @media (max-width: 840px) { .service-row { grid-template-columns: 44px 1fr auto; gap: var(--space-4); padding-inline: 0; } .service-row__name { font-size: 1.375rem; letter-spacing: 0; } } /* ---------- Portfolio (cinematic vertical stack of video tiles) ---------- */ .portfolio { background: var(--color-paper); position: relative; } .portfolio__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-bottom: clamp(var(--space-6), 4vw, var(--space-8)); max-width: 60ch; margin-inline: auto; } .portfolio__heading { margin: 0; max-width: 26ch; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.015em; } /* Foot — stats centred above the CTA, then the big centred CTA (stodio pattern) */ .portfolio__foot { margin-top: clamp(var(--space-8), 6vw, var(--space-10)); display: flex; flex-direction: column; align-items: center; gap: clamp(var(--space-5), 3vw, var(--space-7)); text-align: center; } .portfolio__stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(var(--space-5), 3vw, var(--space-7)); } .portfolio__stats li { display: flex; flex-direction: column; gap: 4px; } .portfolio__stats span { font-family: var(--font-display); font-weight: var(--fw-thin); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; color: var(--color-text); font-variant-numeric: tabular-nums; } .portfolio__stats em { font-family: var(--font-body); font-style: normal; font-size: 0.625rem; font-weight: var(--fw-light); letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-muted); } @media (max-width: 720px) { .portfolio__foot { justify-content: center; text-align: center; } .portfolio__stats { justify-content: center; } .portfolio__capacity { align-items: center; text-align: center; } } /* Portfolio capacity meter — mini version of the CTA-close capacity bar, sits in portfolio foot as a scarcity signal for the current quarter. */ .portfolio__capacity { display: flex; flex-direction: column; gap: clamp(var(--space-2), 1.2vw, var(--space-3)); max-width: 460px; flex: 1 1 auto; } .portfolio__capacity-kicker { font-family: var(--font-body); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-muted); } .portfolio__capacity-meter { position: relative; height: 2px; width: 100%; background: rgba(10,10,10,0.12); overflow: hidden; border-radius: 2px; } .portfolio__capacity-fill { position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); background: var(--color-ink, #0a0a0a); transition: width 900ms cubic-bezier(0.16, 1, 0.3, 1); } .portfolio__capacity-note { font-family: var(--font-body); font-weight: 300; font-size: 0.875rem; line-height: 1.55; color: var(--color-text-muted); margin: 0; } .portfolio__capacity-note em { font-style: normal; font-weight: 500; color: var(--color-ink); } .portfolio__stack { margin-top: clamp(var(--space-7), 6vw, var(--space-9)); display: flex; flex-direction: column; gap: clamp(var(--space-6), 5vw, var(--space-8)); } /* Second row: two tiles side by side, both 16:9 (same cinematic aspect as the hero tile, just smaller — fits video without cropping). */ .portfolio__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-5), 4vw, var(--space-7)); } .portfolio__pair .film-tile__media { aspect-ratio: 16 / 9; } @media (max-width: 720px) { .portfolio__pair { grid-template-columns: 1fr; gap: var(--space-6); } } .film-tile { margin: 0; /* GPU hint + paint isolation — fixes the flicker when two tiles overlap in the viewport mid-scroll (transform + filter on the img was thrashing the layer). */ transform: translateZ(0); will-change: transform, opacity; contain: layout paint; } .film-tile__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-paper-soft); /* Cursor is replaced by the glass View badge once the user enters the tile. */ cursor: pointer; isolation: isolate; } .film-tile__media:hover { cursor: none; } .film-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1) translateZ(0); transform-origin: center; will-change: transform, filter; transition: transform 1400ms cubic-bezier(0.22, 0.8, 0.24, 1), filter 600ms var(--motion-ease); filter: brightness(0.82); } .film-tile__media:hover img { transform: scale(1.04) translateZ(0); filter: brightness(1); } /* Stronger bottom scrim for text legibility. Softens on hover so the full image reads. */ .film-tile__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.48) 22%, rgba(0,0,0,0.12) 42%, rgba(0,0,0,0) 60% ); transition: opacity 600ms var(--motion-ease); pointer-events: none; } .film-tile__media:hover .film-tile__scrim { opacity: 0.55; } /* Bottom-left content block — all overlay text lives here, stacked cleanly */ .film-tile__corner { position: absolute; left: clamp(20px, 3vw, 40px); right: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 40px); display: flex; flex-direction: column; gap: 10px; color: #fff; } .film-tile__kicker { font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255,255,255,0.92); } .film-tile__name { margin: 0; font-family: var(--font-display); font-weight: var(--fw-thin); font-size: clamp(1.75rem, 4vw, 3.25rem); line-height: 1.02; letter-spacing: -0.015em; color: #ffffff; } .film-tile__name em { font-style: italic; color: rgba(255,255,255,0.78); font-weight: var(--fw-thin); } .film-tile__line { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-light); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.82); } .film-tile__value { font-variant-numeric: tabular-nums; color: #fff; font-weight: var(--fw-light); } .film-tile__dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.55); display: inline-block; } .film-tile__type { color: rgba(255,255,255,0.78); } /* Cursor-follow "View more" badge — small glass pill that tracks the cursor with a slow orbital offset, so it drifts around the cursor point rather than sitting on it. JS lerps the position toward the cursor + rotating offset (see film-tile cursor-follow block in main.js). Fades in/out on hover. */ .film-tile__view { position: absolute; left: 0; top: 0; padding: 10px 16px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.625rem; font-weight: var(--fw-light); letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255,255,255,0.96); background: rgba(255,255,255,0.14); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid rgba(255,255,255,0.42); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate3d(0, 0, 0); transition: opacity 700ms cubic-bezier(0.22, 0.8, 0.24, 1); will-change: transform, opacity; z-index: 3; } .film-tile__media:hover .film-tile__view { opacity: 1; } /* Scroll reveal on each tile */ .film-tile.reveal { opacity: 0; transform: translateY(48px); transition: opacity 900ms var(--motion-ease), transform 900ms var(--motion-ease); } .film-tile.reveal.is-visible { opacity: 1; transform: none; } .portfolio__cta { display: flex; justify-content: center; margin-top: clamp(var(--space-8), 6vw, var(--space-10)); } .project__media { display: block; aspect-ratio: 4 / 3; /* uniform across all tiles */ overflow: hidden; margin-bottom: var(--space-5); background: var(--color-paper-soft); position: relative; cursor: none; } .project__media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); transition: transform 1400ms cubic-bezier(0.22, 0.8, 0.24, 1); } .project:hover .project__media img { transform: scale(1.06); } /* Glass "View" badge — SHARP rectangle, CENTRED on the image, static. Fades + rises into place on hover. OS cursor stays visible (no replace). */ .project__cursor { position: absolute; left: 50%; top: 50%; padding: 12px 24px; border-radius: 0; background: rgba(255,255,255,0.1); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgba(255,255,255,0.35); color: #fff; font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-light); letter-spacing: 0.24em; text-transform: uppercase; line-height: 1; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) translateY(8px); transition: opacity 260ms ease, transform 360ms cubic-bezier(0.22, 0.8, 0.24, 1); z-index: 3; } .project__media:hover .project__cursor { opacity: 1; transform: translate(-50%, -50%) translateY(0); } .project__media { cursor: pointer; } /* OS cursor stays — no hide */ .project__meta { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--space-3) var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--color-line); } .project__tags { display: flex; flex-wrap: wrap; gap: var(--space-4); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-light); color: var(--color-text-muted); letter-spacing: 0.14em; text-transform: uppercase; grid-column: 1; order: 2; margin-top: var(--space-2); } .project__title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.25rem); font-weight: var(--fw-thin); letter-spacing: -0.005em; line-height: 1.1; grid-column: 1; order: 1; margin: 0; } .project__year { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-light); color: var(--color-text-muted); letter-spacing: 0.14em; grid-column: 2; grid-row: 1; order: 1; align-self: baseline; } /* Larger title for lg-size slots */ .project--lg .project__title { font-size: clamp(1.75rem, 3vw, 2.75rem); } /* Scroll reveal on the project container (img transform is reserved for hover) */ .project.reveal { opacity: 0; transform: translateY(48px); transition: opacity 900ms var(--motion-ease), transform 900ms var(--motion-ease); } .project.reveal.is-visible { opacity: 1; transform: none; } /* Staggered reveal delays per slot */ /* Staggered reveal delays by tile index via :nth-child */ .project:nth-child(1) { transition-delay: 0ms; } .project:nth-child(2) { transition-delay: 80ms; } .project:nth-child(3) { transition-delay: 160ms; } .project:nth-child(4) { transition-delay: 40ms; } .project:nth-child(5) { transition-delay: 120ms; } .project:nth-child(6) { transition-delay: 200ms; } @media (max-width: 840px) { .portfolio__grid { row-gap: var(--space-7); } } /* ---------- Marquee (continuous auto-scroll for testimonials + reviews) ---------- Hive-astro-style: cards drift left continuously; hovering or dragging pauses the animation so the reader has time. JS duplicates the children so the loop is seamless, and translates the track by -50% over the animation duration. */ .marquee { overflow: hidden; margin-top: clamp(var(--space-6), 4vw, var(--space-8)); } /* Soft edge mask — cards fade in/out at the edges smoothly for premium feel. Applied on both marquee variants (reviews + drag-enabled client experiences). */ .marquee--reviews, .marquee[data-marquee-drag] { -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 2%, black 98%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, black 2%, black 98%, transparent 100%); } .marquee__track { display: flex; width: max-content; /* gap: 0 — spacing is carried by each child's right margin so the loop is truly seamless (N children + N gaps × 2 halves exactly). */ gap: 0; animation: marquee var(--marquee-duration, 55s) linear infinite; cursor: grab; user-select: none; -webkit-user-select: none; will-change: transform; } .marquee__track.is-grabbing { cursor: grabbing; } .marquee__track > * { flex: 0 0 clamp(280px, 26vw, 380px); min-width: 0; margin-right: clamp(var(--space-5), 2.5vw, var(--space-7)); } /* Pause on hover OR while manually paused by drag */ .marquee:hover .marquee__track, .marquee__track.is-paused { animation-play-state: paused; } /* Reviews variant — slower calm flow, gentle pause on hover so visitors can read */ .marquee--reviews .marquee__track { --marquee-duration: 75s; animation-duration: var(--marquee-duration); transform: translateZ(0); /* GPU compositing, prevents jitter */ backface-visibility: hidden; } .marquee--reviews:hover .marquee__track { animation-play-state: paused; } @keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } } /* ---------- Generic carousel (used by Client Experiences + Reviews) ---------- */ .carousel { position: relative; margin-top: var(--space-6); } .carousel__track { display: flex; gap: clamp(var(--space-5), 2.5vw, var(--space-7)); overflow-x: auto; overflow-y: hidden; /* proximity (not mandatory) stops the page-scroll fight when your finger enters the track with any vertical angle; contain keeps the horizontal overscroll inside the track so the outer page doesn't jitter. */ scroll-snap-type: x proximity; overscroll-behavior-x: contain; overscroll-behavior-y: auto; scroll-behavior: smooth; cursor: grab; scrollbar-width: none; -ms-overflow-style: none; user-select: none; -webkit-user-select: none; touch-action: pan-x pan-y; /* let the browser handle vertical page scroll over the track */ padding-bottom: 4px; /* breathing space for any shadow */ } .carousel__track::-webkit-scrollbar { display: none; } .carousel__track.is-grabbing { cursor: grabbing; } .carousel__track > * { flex: 0 0 calc((100% - 2 * clamp(var(--space-5), 2.5vw, var(--space-7))) / 3); /* 3 visible */ scroll-snap-align: start; min-width: 0; } @media (max-width: 960px) { .carousel__track > * { flex-basis: calc((100% - 1 * clamp(var(--space-5), 2.5vw, var(--space-7))) / 2); } } @media (max-width: 600px) { .carousel__track > * { flex-basis: 86%; } } .carousel__controls { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-5); } /* Arrows are filled/visible by default — the hover look the user liked is now the default. Hover adds a subtle lift/scale rather than making the arrow appear. */ .carousel__btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 0; background: var(--color-ink); color: var(--color-paper); border: 1px solid var(--color-ink); opacity: 1; cursor: pointer; transition: transform var(--motion-base) var(--motion-ease), background-color var(--motion-base) var(--motion-ease); } .carousel__btn:hover { transform: scale(1.06); background: #1a1a1a; } .carousel__btn svg { color: currentColor; } .carousel__btn.is-disabled, .carousel__btn:disabled { opacity: 0.22; cursor: not-allowed; pointer-events: none; } /* Carousels inside a dark section invert to white bg + ink arrow. */ .sets-apart .carousel__btn, .work-with-us .carousel__btn { background: #ffffff; color: var(--color-ink); border-color: #ffffff; } .sets-apart .carousel__btn:hover, .work-with-us .carousel__btn:hover { background: rgba(255,255,255,0.88); } /* ---------- Client Experiences (video testimonials, LIGHT) ---------- */ .client-experiences { background: #ffffff; color: var(--color-text); } .client-experiences__grid { display: flex; /* overrides default grid for marquee */ } /* Ensure each vtm gets a fixed width inside the marquee track */ .marquee__track .vtm { flex: 0 0 clamp(280px, 26vw, 380px); min-width: 0; margin-right: clamp(var(--space-5), 2.5vw, var(--space-7)); } .vtm { margin: 0; display: flex; flex-direction: column; gap: var(--space-5); } .vtm__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-paper-soft); } .vtm__media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); transition: transform 1400ms cubic-bezier(0.22, 0.8, 0.24, 1), filter 600ms var(--motion-ease); filter: brightness(0.88); } .vtm__media:hover img { transform: scale(1.04); filter: brightness(0.95); } .vtm__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 999px; background: rgba(255,255,255,0.14); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid rgba(255,255,255,0.5); color: #fff; display: grid; place-items: center; padding-left: 3px; /* optical play triangle nudge */ transition: transform 360ms var(--motion-ease), background-color 360ms var(--motion-ease); } .vtm__media:hover .vtm__play { transform: translate(-50%, -50%) scale(1.06); background: rgba(255,255,255,0.22); } .vtm__duration { position: absolute; right: 12px; bottom: 12px; padding: 4px 8px; background: rgba(0,0,0,0.55); color: #fff; font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; } .vtm__caption { display: flex; flex-direction: column; gap: var(--space-2); } .vtm__name { font-family: var(--font-display); font-weight: var(--fw-thin); font-size: 1.25rem; letter-spacing: -0.005em; color: var(--color-text); } .vtm__role { font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted); } .vtm__quote { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: var(--fw-thin); font-size: 1.0625rem; line-height: 1.45; color: var(--color-text); max-width: 48ch; padding-top: var(--space-2); border-top: 1px solid rgba(0,0,0,0.08); } /* ---------- Client Stories (single-card viewer — fluid.glass pattern) ---------- Portrait-left + oversized italic bold quote right, stepped by prev/next. The swap is a plain opacity crossfade (no translate, no pop). One testimonial at a time — text is the star, portrait is a sidecar. */ .client-stories { background: #ffffff; color: var(--color-text); position: relative; } /* Editorial hairline at the top — anchors the section visually like a magazine section divider, same treatment as fluid.glass. Full container width. */ .client-stories .container { position: relative; } .client-stories .container::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(0,0,0,0.12); } .cs__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-7); margin-bottom: clamp(var(--space-7), 5vw, var(--space-9)); padding-top: clamp(var(--space-6), 4vw, var(--space-8)); } .cs__head-text { max-width: 30ch; } .cs__heading { margin-top: var(--space-3); max-width: 18ch; } .cs__heading em { font-style: italic; color: var(--color-text-muted); } .cs__controls { display: flex; align-items: center; gap: var(--space-5); flex-shrink: 0; } .cs__counter { font-family: var(--font-display); font-weight: var(--fw-thin); font-size: 1.125rem; color: rgba(0,0,0,0.46); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } .cs__counter [data-cs-now] { color: rgba(0,0,0,0.9); } .cs__nav { display: flex; gap: 10px; } .cs__nav-btn { appearance: none; background: transparent; border: 1px solid rgba(0,0,0,0.14); border-radius: 0; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(0,0,0,0.72); padding: 0; transition: background-color 320ms var(--motion-ease), color 320ms var(--motion-ease), border-color 320ms var(--motion-ease); } .cs__nav-btn:hover { background: var(--color-ink); color: var(--color-text-invert); border-color: var(--color-ink); } .cs__nav-btn svg { width: 18px; height: 18px; display: block; } /* Viewer stacks all stories in the same cell; active one is visible. Plain opacity crossfade on swap — NO translateY, NO scale, NO pop. */ .cs__viewer { position: relative; display: grid; min-height: clamp(360px, 38vw, 480px); } /* Giant ghost index number — decorative typographic watermark behind the story. JS (initClientStories) updates its text to match the active index. */ .cs__ghost { position: absolute; top: -0.25em; right: 0; font-family: var(--font-display); font-weight: var(--fw-thin); font-style: italic; font-size: clamp(12rem, 22vw, 22rem); line-height: 0.8; letter-spacing: -0.04em; color: rgba(0,0,0,0.04); font-variant-numeric: tabular-nums; pointer-events: none; z-index: 0; user-select: none; } .cs__story { z-index: 1; } .cs__story { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(var(--space-6), 5vw, var(--space-9)); align-items: start; opacity: 0; transition: opacity 420ms cubic-bezier(0.22, 0.8, 0.24, 1); pointer-events: none; } .cs__story.is-active { opacity: 1; pointer-events: auto; } .cs__portrait { aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-paper-soft); max-width: 320px; } .cs__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.96); } .cs__body { display: flex; flex-direction: column; gap: clamp(var(--space-5), 3vw, var(--space-7)); padding-top: var(--space-4); } .cs__quote { position: relative; margin: 0; padding-left: clamp(var(--space-5), 3vw, var(--space-7)); font-family: var(--font-display); font-style: italic; font-weight: var(--fw-light); font-size: clamp(1.75rem, 3.2vw, 2.875rem); line-height: 1.18; letter-spacing: -0.015em; color: rgba(0,0,0,0.94); max-width: 24ch; } /* Oversized open-quote glyph as a typographic flourish — sits at the start, scaled up, soft-grey, so it doesn't compete with the sentence itself. */ .cs__quote::before { content: "\201C"; position: absolute; left: -0.08em; top: -0.35em; font-family: var(--font-display); font-style: italic; font-weight: var(--fw-light); font-size: 3.2em; line-height: 1; color: rgba(0,0,0,0.14); pointer-events: none; } .cs__attr { margin: 0; position: relative; padding-top: clamp(var(--space-4), 2vw, var(--space-5)); } /* Ornamental ✦ + hairline rule between the quote and the attribution — editorial separator, positioned at the top of the attribution block. */ .cs__attr::before { content: ""; display: block; width: 48px; height: 1px; background: rgba(0,0,0,0.28); margin-bottom: clamp(var(--space-3), 1.4vw, var(--space-4)); } .cs__attr::after { content: ""; position: absolute; top: calc(-2px + clamp(var(--space-4), 2vw, var(--space-5))); left: 0; width: 8px; height: 8px; transform: rotate(45deg); border: 1px solid rgba(0,0,0,0.65); background: #fff; } .cs__name { margin: 0; font-family: var(--font-body); font-weight: var(--fw-medium); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text); } .cs__role { margin: 6px 0 0; font-family: var(--font-body); font-size: 0.875rem; font-weight: var(--fw-light); font-style: italic; color: var(--color-text-muted); } .cs__proof { margin-top: clamp(var(--space-7), 5vw, var(--space-9)); text-align: center; font-family: var(--font-body); font-size: 0.8125rem; font-weight: var(--fw-light); color: rgba(0,0,0,0.58); letter-spacing: 0.02em; max-width: 70ch; margin-inline: auto; } .cs__proof em { font-style: italic; color: rgba(0,0,0,0.86); } @media (max-width: 820px) { .cs__head { flex-direction: column; align-items: flex-start; gap: var(--space-5); } .cs__controls { align-self: flex-end; } .cs__viewer { min-height: 0; } .cs__story { grid-template-columns: 1fr; gap: var(--space-5); } .cs__portrait { max-width: none; aspect-ratio: 4 / 3; max-height: 340px; } .cs__body { padding-top: 0; } } /* ---------- What Sets Us Apart (3-column industry compare, DARK) ---------- */ .sets-apart { position: relative; background: var(--color-ink); color: var(--color-text-invert); padding-block: clamp(var(--space-8), 8vw, var(--space-10)); border-top: 1px solid rgba(255,255,255,0.08); } .sets-apart .eyebrow { color: rgba(255,255,255,0.72); } .sets-apart__head-wrap { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); max-width: 60ch; margin-inline: auto; } /* Short kicker that sits between the eyebrow and the headline */ .sets-apart__kicker { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: var(--fw-thin); font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.45; color: rgba(255,255,255,0.7); max-width: 48ch; } .sets-apart__heading { color: var(--color-text-invert); max-width: 22ch; margin: 0; } .sets-apart__heading em { color: rgba(255,255,255,0.72); font-style: italic; } /* Matrix — table-like with SOFT column dividers (hairlines) and row separators. All cells share the same base styling; HoA column differs only through type (brighter IvyPresto Display + ✦ mark), not through a separate dark box. */ .sets-apart__matrix-wrap { position: relative; margin-top: clamp(var(--space-6), 4vw, var(--space-8)); max-width: 1140px; margin-inline: auto; } .sets-apart__matrix { display: grid; grid-template-columns: minmax(120px, 0.55fr) 1fr 1fr; column-gap: 0; border-top: 1px solid rgba(255,255,255,0.16); } .sets-apart__headers, .sets-apart__row { display: contents; } /* Dimensions column (first) — same base style as others, just a hairline right divider */ .sets-apart__label { padding: clamp(var(--space-4), 1.8vw, var(--space-5)) clamp(var(--space-4), 2vw, var(--space-5)); border-bottom: 1px solid rgba(255,255,255,0.12); border-right: 1px solid rgba(255,255,255,0.14); background: transparent; display: flex; flex-direction: column; gap: 6px; justify-content: center; } .sets-apart__h--cat { border-right: 1px solid rgba(255,255,255,0.14); background: transparent; } .sets-apart__label-num { font-family: var(--font-body); font-size: 0.625rem; font-weight: var(--fw-light); letter-spacing: 0.3em; color: rgba(255,255,255,0.48); font-variant-numeric: tabular-nums; } .sets-apart__label-text { font-family: var(--font-body); font-size: 0.8125rem; font-weight: var(--fw-medium); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.9); line-height: 1.2; } /* Column headers — tighter vertical rhythm so the logo sits prominent, not floating */ .sets-apart__h { padding: clamp(var(--space-3), 1.2vw, var(--space-4)) clamp(var(--space-4), 2vw, var(--space-5)); border-bottom: 1px solid rgba(255,255,255,0.14); border-right: 1px solid rgba(255,255,255,0.14); display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); min-height: clamp(96px, 9vw, 128px); color: rgba(255,255,255,0.78); } .sets-apart__h:last-child { border-right: 0; } .sets-apart__h--cat span { font-family: var(--font-body); font-size: 0.625rem; font-weight: var(--fw-light); letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.4); } .sets-apart__h-kicker { font-family: var(--font-body); font-size: 0.625rem; font-weight: var(--fw-light); letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.45); } .sets-apart__h-name { margin: 0; font-family: var(--font-display); font-weight: var(--fw-thin); font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.1; letter-spacing: -0.005em; color: rgba(255,255,255,0.82); } .sets-apart__h-sub { margin-top: 4px; font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-light); line-height: 1.5; color: rgba(255,255,255,0.48); max-width: 32ch; } /* HoA header cell — SELF-CONTAINED dark tile so the white logo reads clearly. No grey wash, no gradient: just a darker-than-section ink fill + hairline border. */ /* HoA header — IDENTICAL padding + alignment as the Other Marketing Agencies header. The logo sits where the h-name text sits, scaled to the same line-height so the two columns read as equal-weight column titles (logo just replaces the text). */ /* HoA column differentiation — subtle editorial treatment that reads as a "premium ticket" column without being loud. Three moves: 1. Gentle gradient backdrop (top-down wash) to frame the column 2. A small rhombus accent at top-right of the header 3. Bigger logo + proper padding matching the Other Agencies h-name rhythm */ .sets-apart__h--hoa { background: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0) 72%); border-left: 1px solid rgba(255,255,255,0.24); border-right: 1px solid rgba(255,255,255,0.24); position: relative; } /* Vertical divider between HoA column (middle) and Other Marketing Agencies column (right) */ .sets-apart__row > *:nth-child(3), .sets-apart__headers > *:nth-child(3) { border-left: 1px solid rgba(255,255,255,0.18); } .sets-apart--light .sets-apart__row > *:nth-child(3), .sets-apart--light .sets-apart__headers > *:nth-child(3) { border-left-color: rgba(10,10,10,0.12); } .sets-apart__h--hoa::before { display: none; } /* Small filled rhombus, inline before "Our approach" kicker */ .sets-apart__h-rhombus { width: 8px; height: 8px; display: inline-block; vertical-align: middle; margin-right: 6px; color: currentColor; } /* Explicit vertical divider between HoA (middle) and Other Marketing Agencies (right) */ .sets-apart__row > .sets-apart__cell:last-child, .sets-apart__headers > .sets-apart__h:last-child { border-left: 1px solid rgba(255,255,255,0.22); } .sets-apart--light .sets-apart__row > .sets-apart__cell:last-child, .sets-apart--light .sets-apart__headers > .sets-apart__h:last-child { border-left-color: rgba(10,10,10,0.14); } .sets-apart__h--hoa img { /* Horizontal wordmark SVG (~4.7:1 tight). Height calibrated to match the visual weight of the 2-line Other Agencies h-name across its full cap height. */ max-height: clamp(44px, 4vw, 62px); max-width: 100%; width: auto; height: auto; display: block; opacity: 1; align-self: flex-start; margin-block: 2px; } /* Value cells — soft horizontal + vertical hairlines on every cell. Column gaps come from these right borders; the last cell of each row drops its border. */ .sets-apart__cell { padding: clamp(var(--space-4), 1.8vw, var(--space-5)) clamp(var(--space-5), 2vw, var(--space-6)); border-bottom: 1px solid rgba(255,255,255,0.12); border-right: 1px solid rgba(255,255,255,0.14); display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 1rem; font-weight: var(--fw-light); line-height: 1.5; color: rgba(255,255,255,0.78); transition: background-color 480ms var(--motion-ease); } .sets-apart__cell:last-child, .sets-apart__row > .sets-apart__cell--hoa { border-right: 0; } /* HoA column = last */ .sets-apart__cell:hover { background: rgba(255,255,255,0.01); } /* very soft hover */ /* HoA column — distinct premium-ticket treatment: darker bg, side borders brighter than the neutral cells, more vertical breathing room, IvyPresto. */ .sets-apart__cell--hoa { background: #000; border-left: 1px solid rgba(255,255,255,0.28); border-right: 1px solid rgba(255,255,255,0.28); padding-block: clamp(var(--space-5), 2.2vw, var(--space-6)); font-family: var(--font-display); font-style: normal; font-weight: var(--fw-thin); font-size: clamp(1.1875rem, 1.6vw, 1.4375rem); color: var(--color-text-invert); line-height: 1.3; letter-spacing: -0.005em; } .sets-apart__mark { width: 14px; height: 14px; flex: 0 0 auto; color: #fff; margin-top: 3px; transition: transform 520ms cubic-bezier(0.22, 0.8, 0.24, 1); } .sets-apart__cell--hoa:hover .sets-apart__mark { transform: rotate(90deg) scale(1.1); } /* Close out the HoA column rectangle on the last row */ .sets-apart__row--last .sets-apart__cell--hoa { border-bottom-color: rgba(255,255,255,0.22); } /* Quiet bridge link below the matrix — flows to Work-With-Us without duplicating its CTA */ .sets-apart__bridge { margin-top: clamp(var(--space-6), 4vw, var(--space-8)); display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 0.8125rem; font-weight: var(--fw-light); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.82); justify-self: center; align-self: center; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.22); transition: color 320ms var(--motion-ease), border-color 320ms var(--motion-ease), gap 320ms var(--motion-ease); } .sets-apart__matrix-wrap { display: flex; flex-direction: column; align-items: center; } .sets-apart__matrix { width: 100%; } .sets-apart__bridge:hover { color: #fff; border-bottom-color: #fff; gap: 14px; } .sets-apart__bridge svg { width: 14px; height: 14px; } @media (max-width: 760px) { .sets-apart__matrix { grid-template-columns: 1fr; } .sets-apart__h--cat { display: none; } .sets-apart__h--hoa, .sets-apart__cell--hoa { border-left: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.28); } } /* ---------- Work with us (closing CTA — 2-col: globe + copy, DARK) ---------- */ .work-with-us { position: relative; background: var(--color-ink); color: var(--color-text-invert); border-top: 1px solid rgba(255,255,255,0.08); padding-block: clamp(var(--space-9), 10vw, var(--space-11)); } .work-with-us .eyebrow { color: rgba(255,255,255,0.62); } .work-with-us__grid { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(280px, 0.9fr); gap: clamp(var(--space-7), 6vw, var(--space-9)); align-items: center; max-width: 1140px; margin-inline: auto; } /* Globe — no container styling (no border / no card), just the orb + tiny hint */ .work-with-us__globe { position: relative; width: 100%; max-width: 416px; aspect-ratio: 1 / 1; cursor: grab; user-select: none; -webkit-user-select: none; justify-self: end; } .work-with-us__globe.is-grabbing { cursor: grabbing; } .work-with-us__globe .globe-canvas { width: 100%; height: 100%; display: block; } /* Quieter hint — no box, just small muted text */ .work-with-us__globe-hint { position: absolute; bottom: -26px; left: 0; right: 0; text-align: center; font-family: var(--font-body); font-size: 0.625rem; font-weight: var(--fw-light); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.4); pointer-events: none; } /* Left column — text + CTA, compact */ .work-with-us__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 52ch; } .work-with-us__heading { margin: 0; color: var(--color-text-invert); font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.08; letter-spacing: -0.02em; } .work-with-us__heading em { font-style: italic; color: rgba(255,255,255,0.62); } .work-with-us__lede { margin: 0; font-family: var(--font-body); font-size: 1rem; font-weight: var(--fw-light); line-height: 1.6; color: rgba(255,255,255,0.82); max-width: 48ch; } .work-with-us__actions { display: flex; gap: var(--space-4); margin-top: var(--space-2); flex-wrap: wrap; align-items: center; } /* About-page engagement block: force the two CTAs onto a single horizontal row at desktop. They only wrap on narrow viewports. */ @media (min-width: 641px) { .about-engagement .work-with-us__actions { flex-wrap: nowrap; } } .about-engagement .work-with-us__inner { max-width: 62ch; } /* WhatsApp-branded variant of .btn-ct — leading green glyph + text pill. Inherits the btn-ct sliding-row animation so it matches the other CTA. */ .btn-ct--wa { display: inline-flex; align-items: center; gap: 12px; padding-left: clamp(18px, 1.6vw, 22px); /* a touch tighter so the icon reads first */ } .btn-ct__wa-icon { width: 18px; height: 18px; color: #25d366; /* WhatsApp green — same as the old wa-button */ flex: 0 0 auto; transition: transform 420ms cubic-bezier(0.22, 0.8, 0.24, 1); } .btn-ct--wa:hover .btn-ct__wa-icon { transform: scale(1.06); } /* Available-for-projects note — sans body copy (Manrope), upright, with a live green dot. Roman not italic so it reads cleanly at small size on the dark frame. Letter-spaced uppercase eyebrow scale. */ .work-with-us__available { margin: var(--space-3) 0 0; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-style: normal; font-weight: var(--fw-light); font-size: 0.6875rem; line-height: 1.5; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.78); } .work-with-us__available-dot { width: 8px; height: 8px; border-radius: 50%; background: #9ccfa3; /* quiet sage — "we're open" signal */ box-shadow: 0 0 0 3px rgba(156,207,163,0.15); flex: 0 0 auto; } @media (max-width: 840px) { .work-with-us__grid { grid-template-columns: 1fr; gap: var(--space-7); } .work-with-us__grid > * { min-width: 0; } .work-with-us__inner { align-items: center; text-align: center; margin-inline: auto; max-width: 100%; } .work-with-us__lede { max-width: 100%; } .work-with-us__actions { justify-content: center; } .work-with-us__globe { justify-self: center; max-width: min(416px, 100%); } } /* ---------- Reviews (written Google-style quotes, LIGHT) ---------- */ .reviews { background: #ffffff; color: var(--color-text); } .reviews__grid { display: flex; /* marquee track layout */ } .marquee__track .review { flex: 0 0 clamp(300px, 28vw, 420px); min-width: 0; margin-right: clamp(var(--space-5), 2.5vw, var(--space-7)); } .review { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: clamp(var(--space-5), 2.4vw, var(--space-6)); background: #f7f7f6; border: 1px solid rgba(0,0,0,0.06); transition: background 500ms var(--motion-ease), border-color 500ms var(--motion-ease), transform 700ms cubic-bezier(0.22, 0.8, 0.24, 1); } .review:hover { background: #f3f3f3; border-color: rgba(0,0,0,0.1); } /* Source badge — top of the card, Google vs Trustpilot */ .review__source { display: inline-flex; align-items: center; gap: 8px; padding-bottom: var(--space-2); margin-bottom: var(--space-2); border-bottom: 1px solid rgba(0,0,0,0.08); font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); } .review__source em { font-family: var(--font-body); font-style: normal; font-weight: var(--fw-medium); color: var(--color-text); text-transform: none; letter-spacing: 0.04em; } .review__source-icon { width: 14px; height: 14px; flex: 0 0 auto; } .review__source--google .review__source-icon { color: #4285f4; } .review__source--trustpilot .review__source-icon { color: #00b67a; } .review__stars { display: inline-flex; gap: 2px; color: #d4a656; } .review__stars svg { width: 14px; height: 14px; display: block; } .review__quote { margin: 0; font-family: var(--font-body); font-weight: var(--fw-light); font-size: 0.9375rem; line-height: 1.6; color: var(--color-text); } .review__person { display: flex; flex-direction: column; gap: 4px; padding-top: var(--space-3); border-top: 1px solid rgba(0,0,0,0.08); } .review__name { font-family: var(--font-display); font-weight: var(--fw-thin); font-size: 1.0625rem; letter-spacing: -0.005em; color: var(--color-text); line-height: 1.2; } .review__meta { font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-light); color: var(--color-text-muted); line-height: 1.4; } /* ---------- Pricing ---------- */ .pricing { background: var(--color-paper-soft); } .pricing__toggle { display: inline-flex; padding: 4px; background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-pill); margin-bottom: var(--space-7); } .pricing__toggle button { padding: 6px 18px; border-radius: var(--radius-pill); font-size: var(--fs-sm); color: var(--color-text-muted); transition: background-color var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease); } .pricing__toggle button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-text-invert); } .pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .plan { padding: var(--space-7); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-paper); display: grid; gap: var(--space-5); } .plan--featured { background: var(--color-ink); color: var(--color-text-invert); border-color: var(--color-ink); } .plan--featured .plan__features li { border-color: var(--color-line-dark); } .plan__name { font-size: var(--fs-sm); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; } .plan__price { font-family: var(--font-display); font-size: 3rem; line-height: 1; letter-spacing: var(--tr-tight); } .plan__price small { font-size: var(--fs-body); color: var(--color-text-muted); } .plan--featured .plan__price small { color: var(--color-text-invert-muted); } .plan__features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } .plan__features li { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-line); font-size: var(--fs-sm); color: var(--color-text-muted); } .plan--featured .plan__features li { color: var(--color-text-invert-muted); } .plan__cta { margin-top: auto; } @media (max-width: 840px) { .pricing__grid { grid-template-columns: 1fr; } } /* ---------- FAQ (simple toggle-down — no box icon, no hover wash) ---------- */ .faq__list { display: grid; gap: 0; margin-top: var(--space-7); border-top: 1px solid rgba(0,0,0,0.1); } /* FAQ tile — high-contrast card treatment (April 2026). White tile, full-ink text (not muted), 1px hairline border, sharp corners. On hover/open the tile background deepens and the border darkens. No accent stripe, no colour shift — the open affordance is a subtle + → − morph (vertical bar of the cross collapses) rather than a rotating ×. */ .faq-item { position: relative; background: #ffffff; border: 1px solid rgba(10,10,10,0.10); border-radius: 0; overflow: hidden; transition: background 320ms var(--motion-ease), border-color 320ms var(--motion-ease); } .faq-item:hover { background: #fbfbfb; border-color: rgba(10,10,10,0.16); } .faq-item[data-open] { background: #fafafa; border-color: rgba(10,10,10,0.22); } .faq-item__summary { width: 100%; cursor: pointer; padding: clamp(18px, 2vw, 26px) clamp(22px, 2.4vw, 34px); display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); font-family: var(--font-display); font-weight: var(--fw-thin); font-size: clamp(1.0625rem, 1.6vw, 1.375rem); letter-spacing: -0.005em; line-height: 1.3; text-align: left; color: var(--color-text); background: transparent; border: 0; transition: color 260ms var(--motion-ease); } .faq-item__summary:hover { color: var(--color-ink); } .faq-item[data-open] .faq-item__summary { color: var(--color-ink); } /* Plus → minus morph. The literal "+" text in the span is hidden (font-size: 0), and the cross is drawn via ::before (horizontal bar) and ::after (vertical bar). On open, the vertical bar scales to 0 so the icon reads as a minus — the conventional accordion affordance, no rejection × connotation. */ .faq-item__icon { position: relative; flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; background: transparent; border: 1px solid rgba(10,10,10,0.14); border-radius: 0; font-size: 0; /* hide the literal + glyph */ color: var(--color-ink); line-height: 1; transition: border-color 260ms var(--motion-ease), background 260ms var(--motion-ease); } .faq-item__icon::before, .faq-item__icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; transition: transform 420ms cubic-bezier(0.22, 0.8, 0.24, 1); } .faq-item__icon::before { /* horizontal bar */ width: 10px; height: 1.25px; transform: translate(-50%, -50%); } .faq-item__icon::after { /* vertical bar */ width: 1.25px; height: 10px; transform: translate(-50%, -50%); } .faq-item:hover .faq-item__icon { border-color: rgba(10,10,10,0.20); } .faq-item[data-open] .faq-item__icon { border-color: rgba(10,10,10,0.26); background: rgba(10,10,10,0.025); } .faq-item[data-open] .faq-item__icon::after { transform: translate(-50%, -50%) scaleY(0); /* vertical bar collapses → minus */ } /* JS-driven accordion — max-height animates smoothly via inline style set by JS. Default closed state: 0 height + fully transparent; when opened, JS sets max-height to the scrollHeight so the transition plays correctly in both directions. */ .faq-item__body { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 520ms cubic-bezier(0.22, 0.8, 0.24, 1), opacity 380ms cubic-bezier(0.22, 0.8, 0.24, 1); } .faq-item[data-open] .faq-item__body { opacity: 1; } .faq-item__body-inner { padding: 0 clamp(22px, 2.4vw, 34px) clamp(18px, 2vw, 26px); max-width: 72ch; font-family: var(--font-body); font-size: 0.9375rem; font-weight: var(--fw-light); line-height: 1.7; color: var(--color-ink-soft); } /* ---------- Testimonials ---------- */ .testimonials { background: var(--color-ink); color: var(--color-text-invert); } .testimonials .eyebrow { color: var(--color-text-invert-muted); } .testimonials .display { color: var(--color-text-invert); } .testimonials__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } .testimonial { padding: var(--space-7); border: 1px solid var(--color-line-dark); border-radius: var(--radius-lg); display: grid; gap: var(--space-6); } .testimonial__quote { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; line-height: 1.45; letter-spacing: var(--tr-tight); } .testimonial__person { display: flex; align-items: center; gap: var(--space-3); } .testimonial__avatar { width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--color-paper-alt); } .testimonial__meta { font-size: var(--fs-sm); color: var(--color-text-invert-muted); } @media (max-width: 840px) { .testimonials__grid { grid-template-columns: 1fr; } } /* ---------- Journal (editorial feature + 2-up grid, brand photography) ---------- */ .journal { background: var(--color-paper); padding-block: clamp(var(--space-9), 8vw, var(--space-11)); } .journal__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: clamp(var(--space-6), 4vw, var(--space-8)); flex-wrap: wrap; } .journal__head > div { display: flex; flex-direction: column; gap: var(--space-3); } .journal__top-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-light); letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-muted); border-bottom: 1px solid rgba(0,0,0,0.14); padding-bottom: 4px; transition: color 260ms var(--motion-ease), border-color 260ms var(--motion-ease), gap 320ms var(--motion-ease); } .journal__top-link:hover { color: var(--color-text); border-color: var(--color-text); gap: 14px; } .journal__top-link svg { width: 12px; height: 12px; color: currentColor; } @media (max-width: 720px) { .journal__head { justify-content: flex-start; } } .journal__headline { margin: 0; max-width: 22ch; } .journal__headline em { font-style: italic; color: var(--color-text-muted); } .journal__lede { margin: 0; max-width: 56ch; font-family: var(--font-body); font-size: 1rem; font-weight: var(--fw-light); line-height: 1.6; color: var(--color-text-muted); } /* Volume marker — reads the Journal as a quarterly dispatch rather than a generic blog feed. Sits between the section head and the grid. */ .journal__volume { margin: clamp(var(--space-6), 4vw, var(--space-7)) 0 clamp(var(--space-5), 3vw, var(--space-6)); display: flex; align-items: center; gap: clamp(var(--space-3), 2vw, var(--space-4)); padding-block: var(--space-3); border-top: 1px solid rgba(0,0,0,0.09); border-bottom: 1px solid rgba(0,0,0,0.09); font-family: var(--font-display); font-style: italic; font-weight: var(--fw-thin); font-size: clamp(0.9375rem, 1.3vw, 1.0625rem); color: var(--color-text-muted); letter-spacing: 0.005em; } .journal__volume-sep { width: 4px; height: 4px; background: currentColor; opacity: 0.55; flex: 0 0 auto; } /* 3-col × 1-row grid — stodio pattern */ .journal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(var(--space-5), 3vw, var(--space-7)); } @media (max-width: 900px) { .journal__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .journal__grid { grid-template-columns: 1fr; } } .journal-post { margin: 0; } /* Feature spans full width in a single column (image on top, text below), separated from the smaller 2-up grid beneath by a soft border + spacing. */ /* Featured post — editorial magazine layout. Image full-width on top, then the body splits into 2 columns below: big italic title on the left, a smaller excerpt + CTA on the right. Title and excerpt sit on the same line so they read as a proper lead article, not a centred blog post. */ .journal-post--feature { grid-column: 1 / -1; padding-bottom: clamp(var(--space-6), 4vw, var(--space-8)); margin-bottom: clamp(var(--space-4), 2vw, var(--space-6)); border-bottom: 1px solid rgba(0,0,0,0.1); } .journal-post--feature .journal-post__media { aspect-ratio: 21 / 9; margin-bottom: clamp(var(--space-5), 3vw, var(--space-6)); } .journal-post--feature .journal-post__body { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(var(--space-5), 4vw, var(--space-8)); align-items: start; text-align: left; } .journal-post--feature .journal-post__meta { grid-column: 1 / -1; /* meta bar spans full width */ } .journal-post--feature .journal-post__title { grid-column: 1; margin: 0; } .journal-post--feature .journal-post__excerpt { grid-column: 2; margin: 0; } .journal-post--feature .journal-post__cta { grid-column: 2; align-self: start; margin-top: var(--space-2); } @media (max-width: 860px) { .journal-post--feature .journal-post__media { aspect-ratio: 16 / 9; } .journal-post--feature .journal-post__body { grid-template-columns: 1fr; gap: var(--space-4); } .journal-post--feature .journal-post__title, .journal-post--feature .journal-post__excerpt, .journal-post--feature .journal-post__cta { grid-column: 1; } } .journal-post__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0; /* sharp corners per brand discipline */ background: var(--color-paper-soft); margin-bottom: var(--space-4); border: 1px solid rgba(0,0,0,0.06); } .journal-post--feature .journal-post__media { aspect-ratio: 21 / 9; } .journal-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1) translateZ(0); transition: transform 1400ms cubic-bezier(0.22, 0.8, 0.24, 1); filter: brightness(0.96); } .journal-post:hover .journal-post__media img { transform: scale(1.035) translateZ(0); filter: brightness(1); } /* Subtle glass — translucent white, soft border, backdrop-blur. Reads as light glass. */ .journal-post__tag { position: absolute; top: 16px; left: 16px; padding: 6px 12px; background: rgba(255,255,255,0.18); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); color: #fff; font-family: var(--font-body); font-size: 0.625rem; font-weight: var(--fw-light); letter-spacing: 0.26em; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.35); text-shadow: 0 1px 6px rgba(0,0,0,0.4); } .journal-post__body { display: flex; flex-direction: column; gap: var(--space-3); } .journal-post--feature .journal-post__body { max-width: 64ch; } .journal-post__meta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-muted); } .journal-post__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-text-muted); opacity: 0.6; } .journal-post__title { margin: 0; font-family: var(--font-display); font-weight: var(--fw-thin); font-size: clamp(1.25rem, 1.8vw, 1.625rem); line-height: 1.2; letter-spacing: -0.005em; color: var(--color-text); } .journal-post--feature .journal-post__title { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; max-width: 26ch; } .journal-post__excerpt { margin: 0; max-width: 60ch; font-family: var(--font-body); font-size: 1rem; font-weight: var(--fw-light); line-height: 1.65; color: var(--color-text-muted); } .journal-post__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-2); font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-light); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text); padding-bottom: 4px; border-bottom: 1px solid var(--color-text); align-self: flex-start; transition: gap 320ms var(--motion-ease); } .journal-post__cta svg { width: 12px; height: 12px; color: currentColor; } .journal-post:hover .journal-post__cta { gap: 12px; } /* Centred foot — big button stodio-style, nothing else */ .journal__foot { margin-top: clamp(var(--space-8), 6vw, var(--space-10)); display: flex; justify-content: center; } /* ---------- Blog (deprecated, kept for safety) ---------- */ .blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .post__frame { aspect-ratio: 4 / 3; border-radius: var(--radius-md); background: var(--color-paper-alt); margin-bottom: var(--space-4); } .post__meta { display: flex; gap: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); } .post__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; letter-spacing: var(--tr-tight); } @media (max-width: 840px) { .blog__grid { grid-template-columns: 1fr; } } /* ---------- CTA strip ---------- */ .cta-strip { background: var(--color-ink); color: var(--color-text-invert); text-align: center; } .cta-strip .display { color: var(--color-text-invert); max-width: 18ch; margin-inline: auto; } .cta-strip__actions { display: inline-flex; gap: var(--space-3); margin-top: var(--space-6); } /* ---------- Footer (DARK with ambient image) ---------- Layout: top-grid (newsletter + 3 nav cols) → oversized transparent wordmark strip → micro-bar. Villa backdrop sits behind a heavy dark gradient so text stays readable while the image reads as editorial atmosphere. Wordmark is semi-transparent white so it blends into the image rather than sitting on it. */ .footer { position: relative; color: rgba(255,255,255,0.74); padding-block: clamp(var(--space-8), 8vw, var(--space-10)) var(--space-4); border-top: 1px solid rgba(255,255,255,0.08); background-color: #050505; background-image: linear-gradient(180deg, rgba(5, 5, 5, 0.94) 0%, rgba(5, 5, 5, 0.86) 35%, rgba(5, 5, 5, 0.82) 65%, rgba(5, 5, 5, 0.94) 100%), url("../assets/portfolio/villa-rafaella-10.jpg"); background-size: auto, cover; background-position: center, center 30%; background-repeat: no-repeat, no-repeat; overflow: hidden; } .footer > .container, .footer > .footer__wordmark { position: relative; z-index: 2; } .footer__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); gap: clamp(var(--space-7), 6vw, var(--space-9)); padding-bottom: clamp(var(--space-7), 5vw, var(--space-9)); border-bottom: 1px solid rgba(255,255,255,0.08); } .footer__news { max-width: 44ch; } .footer .eyebrow { color: rgba(255,255,255,0.55); } .footer__news-title { margin: var(--space-3) 0 var(--space-4); font-family: var(--font-display); font-weight: var(--fw-thin); font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.15; letter-spacing: -0.01em; color: #fff; } .footer__news-title em { font-style: italic; color: rgba(255,255,255,0.62); } .footer__news-lede { margin: 0 0 var(--space-5); font-family: var(--font-body); font-size: 0.9375rem; font-weight: var(--fw-light); line-height: 1.55; color: rgba(255,255,255,0.6); } .footer__news-form { display: flex; align-items: stretch; gap: var(--space-3); border-bottom: 1px solid rgba(255,255,255,0.22); padding-bottom: 10px; max-width: 460px; } .footer__news-form input { flex: 1; background: transparent; border: 0; outline: 0; color: #fff; font-family: var(--font-body); font-size: 0.9375rem; font-weight: var(--fw-light); letter-spacing: 0.02em; padding: 6px 0; } .footer__news-form input::placeholder { color: rgba(255,255,255,0.38); } .footer__news-form button { appearance: none; background: transparent; border: 1px solid rgba(255,255,255,0.3); width: 44px; height: 44px; cursor: pointer; color: #fff; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background-color 320ms var(--motion-ease), border-color 320ms var(--motion-ease), color 320ms var(--motion-ease); } .footer__news-form button:hover { background: #fff; color: #000; border-color: #fff; } .footer__news-form button svg { width: 14px; height: 14px; } .footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--space-6), 5vw, var(--space-8)); } .footer__col h4 { margin: 0 0 var(--space-5); font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-medium); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.5); } .footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .footer__col a { color: rgba(255,255,255,0.82); font-family: var(--font-body); font-size: 0.9375rem; font-weight: var(--fw-light); text-decoration: none; transition: color 280ms var(--motion-ease); } .footer__col li { color: rgba(255,255,255,0.72); font-family: var(--font-body); font-size: 0.9375rem; font-weight: var(--fw-light); } .footer__col a:hover { color: #fff; } /* Signature box — wordmark + hairline + micro-bar locked to the same width. One coherent block. Wordmark is a transparent watermark over the villa image; the hairline sits exactly at the wordmark edges because both share width. Tight vertical spacing so the block reads as a unit, not three stacked pieces. */ .footer__sig { margin-top: clamp(var(--space-6), 4vw, var(--space-8)); } .footer__wordmark { margin: 0; line-height: 0; pointer-events: none; } .footer__wordmark img { width: 100%; height: auto; display: block; opacity: 0.22; /* watermark — lets the villa image read through */ filter: brightness(1.2); } .footer__bottom { padding-top: clamp(var(--space-4), 2vw, var(--space-5)); margin-top: clamp(var(--space-3), 1.5vw, var(--space-4)); display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); border-top: 1px solid rgba(255,255,255,0.24); font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-light); letter-spacing: 0.08em; color: rgba(255,255,255,0.56); } .footer__copy { flex: 0 0 auto; } .footer__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-5); flex: 1 1 auto; justify-content: center; } .footer__legal a { color: rgba(255,255,255,0.56); text-decoration: none; transition: color 280ms var(--motion-ease); } .footer__legal a:hover { color: #fff; } /* Socials as text-link list — luxury editorial, not icon set. Same typographic weight as the copyright line. Animated underline on hover (reveal + travel). */ .footer__socials { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); flex: 0 0 auto; } /* Generic animated-underline link used by legal + socials in the micro-bar */ .footer__link { position: relative; color: rgba(255,255,255,0.7); text-decoration: none; transition: color 300ms var(--motion-ease); } .footer__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 420ms cubic-bezier(0.22, 0.8, 0.24, 1); } .footer__link:hover { color: #fff; } .footer__link:hover::after { transform: scaleX(1); transform-origin: left; } .footer__legal a { color: inherit; } /* old selector override — now uses .footer__link */ /* Live "Athens HH:MM" pulse — small italic timestamp with a breathing dot. Reads like a studio status indicator rather than a gimmick. */ .footer__pulse { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-style: italic; font-weight: var(--fw-thin); font-size: 0.875rem; letter-spacing: 0.02em; color: rgba(255,255,255,0.78); font-variant-numeric: tabular-nums; flex: 0 0 auto; white-space: nowrap; } .footer__pulse-dot { width: 6px; height: 6px; background: #bfe0c2; border-radius: 999px; box-shadow: 0 0 10px rgba(191,224,194,0.6); animation: footer-pulse 2400ms ease-in-out infinite; flex: 0 0 auto; } .footer__pulse-sep { opacity: 0.55; } .footer__pulse time { color: #fff; font-style: italic; } @keyframes footer-pulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } } @media (prefers-reduced-motion: reduce) { .footer__pulse-dot { animation: none; } } @media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr; gap: var(--space-7); } .footer__nav { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-4); } .footer__legal { justify-content: flex-start; } } /* ---------- OPTION B — stodio-inspired alternate footer (for comparison) ---------- */ .altfooter-banner { background: #fff; color: #0a0a0a; padding: 20px 24px; text-align: center; font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: var(--fw-medium); border-top: 1px solid rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.08); } .altfooter { position: relative; margin: 24px; padding: clamp(40px, 5vw, 72px) clamp(28px, 5vw, 64px) clamp(24px, 3vw, 40px); background: #0a0a0a; color: #fff; overflow: hidden; isolation: isolate; /* Sharp edges — matches the site discipline (all zero radii) */ } /* Cursor-tracking spotlight — a soft radial that follows the mouse with lerp (slower trailing). CSS vars driven by JS (see main.js altfooter block). */ .altfooter__spot { position: absolute; inset: 0; pointer-events: none; background: radial-gradient( circle 640px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.18), rgba(255,255,255,0.06) 30%, transparent 62% ); opacity: 0; transition: opacity 900ms var(--motion-ease); z-index: 0; } .altfooter:hover .altfooter__spot { opacity: 1; } .altfooter__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); } /* Top zone — newsletter + socials (left) · 3 nav columns (right) */ .altfooter__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(40px, 6vw, 80px); align-items: start; } .altfooter__news { max-width: 44ch; } .altfooter__news-title { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: var(--fw-thin); font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.12; letter-spacing: -0.01em; color: #fff; } .altfooter__news-title em { font-style: italic; color: rgba(255,255,255,0.62); } .altfooter__news-lede { margin: 0 0 var(--space-5); font-family: var(--font-body); font-size: 0.9375rem; font-weight: var(--fw-light); line-height: 1.55; color: rgba(255,255,255,0.6); } /* Sharp newsletter — bordered rectangle, no pill. Submit button = sharp square that inverts on hover, arrow slides the same way the .btn-ct system does. */ .altfooter__news-form { display: flex; align-items: stretch; gap: 8px; padding: 4px 4px 4px 20px; border: 1px solid rgba(255,255,255,0.22); max-width: 440px; margin-bottom: var(--space-5); position: relative; } .altfooter__news-bot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .altfooter__news-form input { flex: 1; background: transparent; border: 0; outline: 0; color: #fff; font-family: var(--font-body); font-size: 0.9375rem; font-weight: var(--fw-light); padding: 10px 0; } .altfooter__news-form input::placeholder { color: rgba(255,255,255,0.42); } .altfooter__news-form button { appearance: none; background: #fff; color: #0a0a0a; border: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; transition: background 320ms var(--motion-ease); } .altfooter__news-form button svg { width: 16px; height: 16px; transition: transform 420ms cubic-bezier(0.22, 0.8, 0.24, 1); } .altfooter__news-form button:hover { background: #e6e6e6; } /* Arrow slides up + right on hover — same motion language as the .btn-ct buttons */ .altfooter__news-form button:hover svg { transform: translate(3px, -3px); } /* Submit-status line for the newsletter form. Lives outside the bordered pill so the input + button row stays clean; absolute-positioned just beneath the form. */ .altfooter__news-status { position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; font-family: var(--font-body); font-size: 0.8125rem; font-weight: var(--fw-light); letter-spacing: 0.02em; color: rgba(255,255,255,0.62); min-height: 1.2em; } .altfooter__news-status:empty { display: none; } .altfooter__news-status[data-state="ok"] { color: rgba(255,255,255,0.92); } .altfooter__news-status[data-state="error"] { color: rgba(255,200,200,0.92); } /* Socials as horizontal text names — Instagram · TikTok · LinkedIn · YouTube. Animated underline on hover (same motion language as the nav links above). */ .altfooter__socials { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(var(--space-4), 2.5vw, var(--space-5)); } .altfooter__socials a { position: relative; display: inline-block; font-family: var(--font-body); font-size: 0.9375rem; font-weight: var(--fw-light); letter-spacing: 0.02em; color: rgba(255,255,255,0.82); text-decoration: none; transition: color 300ms var(--motion-ease); } .altfooter__socials a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 420ms cubic-bezier(0.22, 0.8, 0.24, 1); } .altfooter__socials a:hover { color: #fff; } .altfooter__socials a:hover::after { transform: scaleX(1); transform-origin: left; } /* Newsletter kicker — matches the site's eyebrow treatment */ .altfooter__news-kicker { display: inline-block; margin-bottom: var(--space-3); color: rgba(255,255,255,0.55); } /* Nav columns — each has a small UPPERCASE title + link list underneath */ .altfooter__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); } .altfooter__col { display: flex; flex-direction: column; } .altfooter__col-title { margin: 0 0 var(--space-5); font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-medium); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.48); } .altfooter__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .altfooter__nav a, .altfooter__nav a:link, .altfooter__nav a:visited, .altfooter__nav a:hover, .altfooter__nav a:active, .altfooter__nav li { font-family: var(--font-body); font-size: 1rem; font-weight: var(--fw-light); color: rgba(255,255,255,0.82); text-decoration: none; line-height: 1.4; -webkit-tap-highlight-color: transparent; } .altfooter__nav li { color: rgba(255,255,255,0.72); } /* tel: and mailto: links inherit a UA-default dark visited colour on dark backgrounds across iOS Safari and some Android browsers. The tel: phone link in the Connect column was rendering nearly black, which made the number invisible against the ink footer. We override every state explicitly with !important so no UA stylesheet wins. */ .altfooter__nav a[href^="tel:"], .altfooter__nav a[href^="tel:"]:link, .altfooter__nav a[href^="tel:"]:visited, .altfooter__nav a[href^="tel:"]:hover, .altfooter__nav a[href^="tel:"]:active, .altfooter__nav a[href^="mailto:"], .altfooter__nav a[href^="mailto:"]:link, .altfooter__nav a[href^="mailto:"]:visited, .altfooter__nav a[href^="mailto:"]:hover, .altfooter__nav a[href^="mailto:"]:active { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .altfooter__nav a[href^="tel:"]:hover, .altfooter__nav a[href^="mailto:"]:hover { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 0.92; } /* Animated underline on link hover — same motion language as footer__link */ .altfooter__nav a { position: relative; display: inline-block; transition: color 300ms var(--motion-ease); } .altfooter__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 420ms cubic-bezier(0.22, 0.8, 0.24, 1); } .altfooter__nav a:hover { color: #fff; } .altfooter__nav a:hover::after { transform: scaleX(1); transform-origin: left; } /* Massive wordmark, full width of the card, white. The wordmark is now wrapped in an anchor so the footer logo doubles as a return-home link. The block-level hit area covers the whole image. */ .altfooter__wordmark { line-height: 0; opacity: 0.95; } .altfooter__wordmark-link { display: block; width: 100%; line-height: 0; transition: opacity 320ms var(--motion-ease); } .altfooter__wordmark-link:hover { opacity: 0.78; } .altfooter__wordmark img { width: 100%; height: auto; display: block; } /* Bottom bar — copyright + clock on LEFT, social pills on RIGHT. */ .altfooter__bottom { padding-top: clamp(var(--space-4), 2vw, var(--space-5)); margin-top: clamp(var(--space-3), 1.5vw, var(--space-4)); border-top: 1px solid rgba(255,255,255,0.14); display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-light); letter-spacing: 0.08em; color: rgba(255,255,255,0.55); } .altfooter__bottom-left { display: inline-flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; } .altfooter__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); } .altfooter__legal a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 280ms var(--motion-ease); } .altfooter__legal a:hover { color: #fff; } /* Clock bottom-right — NORMAL font (not italic), regular body typography */ .altfooter__pulse { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-style: normal; font-weight: var(--fw-light); font-size: 0.8125rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.82); font-variant-numeric: tabular-nums; } /* Rhombus mark — replaces the circle dot. Sharp, same breathing animation, matches the site's eyebrow marker vocabulary. */ .altfooter__pulse-mark { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); animation: footer-pulse 2400ms ease-in-out infinite; color: rgba(255,255,255,0.82); flex: 0 0 auto; } .altfooter__pulse-sep { opacity: 0.55; } /* =========================================================== Standardised editorial pulse meta. Used on Approach, About, Journal and Contact only (Home, Case Studies and Projects keep their own footer signature). The bar carries: bottom-left : rhombus + "Athens, Greece" bottom-right: time + rhombus Mirrors the about-hero meta chips so the pages share one visual vocabulary for location + time of day. =========================================================== */ .altfooter__bottom--meta { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(var(--space-4), 2vw, var(--space-6)); } .altfooter__bottom--meta .altfooter__copy { text-align: center; color: rgba(255,255,255,0.45); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; } .altfooter__chip { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-body); font-weight: var(--fw-light); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.78); font-variant-numeric: tabular-nums; } .altfooter__chip--left { justify-self: start; } .altfooter__chip--right { justify-self: end; } .altfooter__chip-mark { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); display: inline-block; flex: 0 0 auto; animation: footer-pulse 2400ms ease-in-out infinite; } @media (max-width: 720px) { .altfooter__bottom--meta { grid-template-columns: 1fr; justify-items: start; gap: var(--space-3); } .altfooter__bottom--meta .altfooter__copy { text-align: left; } .altfooter__chip--left, .altfooter__chip--right { justify-self: start; } } @media (prefers-reduced-motion: reduce) { .altfooter__chip-mark { animation: none; } } @media (max-width: 900px) { .altfooter { margin: 16px; padding: 40px 24px 24px; border-radius: 14px; } .altfooter__top { grid-template-columns: 1fr; gap: 40px; } .altfooter__nav { grid-template-columns: repeat(2, 1fr); } .altfooter__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-4); } .altfooter__bottom-left { gap: var(--space-4); } } @media (prefers-reduced-motion: reduce) { .altfooter__pulse-dot { animation: none; } } /* ---------- Scroll reveals ---------- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--motion-slow) var(--motion-ease), transform var(--motion-slow) var(--motion-ease); } .reveal.is-visible { opacity: 1; transform: none; } /* Softer reveal with blur + lift — used on counters */ .reveal-soft { opacity: 0; filter: blur(6px); transform: translateY(32px); transition: opacity 900ms var(--motion-ease), filter 900ms var(--motion-ease), transform 900ms var(--motion-ease); transition-delay: var(--reveal-delay, 0ms); } .reveal-soft.is-visible { opacity: 1; filter: blur(0); transform: none; } /* Word-by-word reveal (applied by JS to .split-words) */ .split-words .word { display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(0.5em); transition: opacity 700ms var(--motion-ease), filter 700ms var(--motion-ease), transform 700ms var(--motion-ease); transition-delay: calc(var(--word-index, 0) * 60ms); } .split-words.is-visible .word { opacity: 1; filter: blur(0); transform: none; } .split-words em { font-style: normal; color: var(--color-text-muted); } .display em.text-mute, .split-words em.text-mute { color: var(--color-text-muted); font-style: normal; } /* ============================================================================ ABOUT PAGE Dedicated second page at /about.html. Reuses all shared chrome (preloader, page-frame, nav, altfooter, split-words, .reveal) and adds sections below: 1. .about-hero — dark page-header with small image 2. .about-story — founder narrative + pull quote 3. .about-stats — 4 locked numbers (count-up via data-count) 4. .about-founders — 2 portrait cards side by side 5. .about-team-note — single-paragraph team mention 6. .about-values — 4 principle-pairs 7. .about-approach-tease — linked promo for /approach 8. .about-cta — final invitation ========================================================================= */ /* ---- 1. ABOUT HERO — CENTERED "About" on full-bleed photo ---- */ .about-hero { background: #050505; position: relative; } .about-hero__panel { background: var(--color-ink); color: var(--color-text-invert); padding: clamp(var(--space-5), 3vw, var(--space-7)) clamp(var(--space-5), 4vw, var(--space-8)); position: relative; overflow: hidden; display: flex; flex-direction: column; isolation: isolate; min-height: 100vh; } .about-hero__bg { position: absolute; inset: 0; background-image: url("../assets/about-studio-a.jpg"); /* Stretch to fill the full panel rect on every inner-page hero. We used `cover` previously, which kept aspect — but each source has a different native ratio, so the framing read differently on About vs Approach vs Journal vs Contact. 100% 100% forces an identical box on all four pages, so the bottom-left location chip and the bottom-right time chip land at the same coordinate every time. */ background-size: 100% 100%; background-position: center; background-repeat: no-repeat; z-index: -2; opacity: 1; transform: scale(1.04); will-change: transform; transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1) 200ms; } body:not(.is-preloading) .about-hero__bg { transform: scale(1); } /* Optional Vimeo hero video — sits as the page hero background. When a video is present we hide the static bg image (no double-stacking) and let the video play at full opacity; the radial overlay alone provides the shadow for text legibility. */ .about-hero__panel:has(.about-hero__video-wrap) .about-hero__bg { display: none; } .about-hero__video-wrap { position: absolute; inset: 0; overflow: hidden; z-index: -2; pointer-events: none; opacity: 1; } .about-hero__video { position: absolute; top: 50%; left: 50%; width: max(100%, calc(100vh * 16 / 9)); height: max(100%, calc(100vw * 9 / 16)); transform: translate(-50%, -50%); border: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .about-hero__video-wrap { display: none; } } /* Hero overlay — diffuse shadow over the image so the white headline and kicker read cleanly. Deeper top + bottom bands, stronger central tint, no photo bleach. Applies to about / approach / journal / contact inner-page heroes. */ .about-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.40) 22%, rgba(10,10,10,0.40) 78%, rgba(10,10,10,0.72) 100%), rgba(10,10,10,0.55); z-index: -1; } /* Video variant — deeper still for moving footage legibility. */ .about-hero__panel:has(.about-hero__video-wrap) .about-hero__overlay { background: linear-gradient(to bottom, rgba(10,10,10,0.70) 0%, rgba(10,10,10,0.30) 24%, rgba(10,10,10,0.30) 76%, rgba(10,10,10,0.62) 100%), rgba(10,10,10,0.44); } /* Centered stack — sits in the middle of the viewport */ .about-hero__center { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(var(--space-8), 12vh, 14rem) clamp(var(--space-5), 4vw, var(--space-7)); max-width: 58ch; margin: 0 auto; } .about-hero__eyebrow { color: rgba(255,255,255,0.72); margin-bottom: clamp(var(--space-5), 4vw, var(--space-6)); } .about-hero__display { font-family: var(--font-display); font-weight: var(--fw-thin, 200); font-size: clamp(2.25rem, 4.8vw, 4.5rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 clamp(var(--space-5), 3vw, var(--space-6)); color: var(--color-text-invert); max-width: 28ch; } /* Forced 2-line variant — each .hero-line span breaks onto its own line regardless of viewport width. Used on journal hero + similar 2-line editorial displays. Inner .word spans (added by split-words JS) stay inline within their parent .hero-line. */ .about-hero__display--2lines { max-width: none; } .about-hero__display .hero-line { display: block; } .about-hero__display em { font-style: italic; font-weight: var(--fw-thin, 200); color: rgba(255,255,255,0.72); } .about-hero__kicker { font-family: var(--font-body); font-size: clamp(0.9375rem, 1.15vw, 1.0625rem); line-height: 1.55; font-weight: var(--fw-light); color: rgba(255,255,255,0.78); max-width: 54ch; margin: 0 0 clamp(var(--space-6), 4vw, var(--space-7)); } .about-hero__ctas { display: flex; flex-wrap: nowrap; /* horizontal ALWAYS, never stacked */ justify-content: center; align-items: center; gap: clamp(var(--space-5), 3vw, var(--space-6)); } @media (max-width: 520px) { .about-hero__ctas { flex-wrap: wrap; gap: var(--space-4); } } /* Meta chips — editorial tags overlaid bottom-left / bottom-right */ .about-hero__meta { position: absolute; bottom: clamp(var(--space-6), 4vw, var(--space-7)); display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.72); z-index: 2; } .about-hero__meta em { font-style: italic; font-weight: 300; color: rgba(255,255,255,0.82); } .about-hero__meta--left { left: clamp(var(--space-5), 4vw, var(--space-8)); } .about-hero__meta--right { right: clamp(var(--space-5), 4vw, var(--space-8)); } /* Editorial top-left masthead: live date chip. Same typography as the bottom chips, anchored to the top edge instead of the bottom. */ .about-hero__meta--top-left { top: clamp(var(--space-6), 4vw, var(--space-7)); left: clamp(var(--space-5), 4vw, var(--space-8)); bottom: auto; } .about-hero__meta--top-right { top: clamp(var(--space-6), 4vw, var(--space-7)); right: clamp(var(--space-5), 4vw, var(--space-8)); bottom: auto; } .about-hero__meta-mark { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); display: inline-block; flex: 0 0 auto; } /* Live pulse — 1s cycle, in time with the seconds tick. Subtle scale + opacity wave so the chip reads as "live" without a hard blink. Honours prefers-reduced-motion. */ .about-hero__meta-mark--pulse { animation: hero-mark-pulse 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: center center; } @keyframes hero-mark-pulse { 0%, 100% { transform: rotate(45deg) scale(1); opacity: 0.86; } 50% { transform: rotate(45deg) scale(1.18); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .about-hero__meta-mark--pulse { animation: none; opacity: 0.92; } } /* Numeric tabular look for the time span so digits don't dance as they tick second-by-second. */ .about-hero__meta [data-clock], .about-hero__meta [data-clock-athens] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; color: rgba(255,255,255,0.92); } @media (max-width: 640px) { .about-hero__meta { font-size: 0.625rem; letter-spacing: 0.16em; } } /* ---- 2. ABOUT STORY — narrative + pull quote + 2-col split variant ---- */ .about-story { background: var(--color-paper); color: var(--color-ink); padding-block: clamp(var(--space-9), 8vw, var(--space-10)); } .about-story__head { max-width: 58ch; margin-bottom: clamp(var(--space-7), 5vw, var(--space-8)); } /* Our Story — simplest possible wrap: 100% of the viewport width with a small horizontal padding. NO max-width cap. NO auto margins. Text spans the ENTIRE viewport minus the side padding. */ .about-story__wrap { width: 100%; max-width: none; margin: 0; padding-inline: clamp(24px, 4vw, 80px); box-sizing: border-box; } /* Plain full-width single-column prose. Smaller, more compact type per user feedback — text extends to the end of the wider container. */ .about-story__prose { display: grid; gap: clamp(var(--space-4), 2vw, var(--space-5)); max-width: none; font-family: var(--font-body); font-size: clamp(0.875rem, 1vw, 1rem); line-height: 1.6; font-weight: var(--fw-light); color: rgba(10,10,10,0.82); } .about-story__prose p { margin: 0; } .about-story__prose strong { font-weight: var(--fw-medium, 500); color: var(--color-ink); } .about-story__prose em { font-style: italic; color: var(--color-ink); } /* Mission — distinct card below the story. Italic display block with a leading hairline and bigger type so it reads as a pull-statement. */ .about-mission { margin-top: clamp(var(--space-8), 6vw, var(--space-9)); padding-top: clamp(var(--space-7), 5vw, var(--space-8)); padding-bottom: clamp(var(--space-5), 3vw, var(--space-6)); border-top: 1px solid rgba(10,10,10,0.12); border-bottom: 1px solid rgba(10,10,10,0.12); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(var(--space-5), 4vw, var(--space-7)); align-items: start; } @media (max-width: 760px) { .about-mission { grid-template-columns: 1fr; gap: var(--space-4); } } .about-mission__eyebrow { color: rgba(10,10,10,0.58); } .about-mission__body { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.35; letter-spacing: -0.01em; color: var(--color-ink); max-width: 62ch; } .about-mission__body strong { font-weight: var(--fw-medium, 500); } .about-mission__body em { font-style: italic; font-weight: 200; color: rgba(10,10,10,0.62); } .about-story__head .eyebrow { color: rgba(10,10,10,0.58); } .about-story__head h2 { margin-top: var(--space-3); font-size: clamp(2rem, 3.6vw, 2.875rem); line-height: 1.1; letter-spacing: -0.02em; } .about-story__body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(var(--space-7), 5vw, var(--space-9)); align-items: start; } @media (max-width: 900px) { .about-story__body { grid-template-columns: 1fr; } } .about-story__prose { font-family: var(--font-body); font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.6; font-weight: var(--fw-light); color: rgba(10,10,10,0.82); display: grid; gap: var(--space-5); max-width: 58ch; } .about-story__prose em { font-style: italic; color: var(--color-ink); } .about-story__quote { margin: 0; padding: clamp(var(--space-6), 3vw, var(--space-7)); border: 1px solid rgba(10,10,10,0.1); background: var(--color-paper-soft, #f3f3f3); display: grid; gap: var(--space-4); } .about-story__quote-mark { width: 20px; height: 20px; color: var(--color-ink); opacity: 0.55; } .about-story__quote blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.25rem, 1.8vw, 1.625rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--color-ink); } .about-story__quote figcaption { font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(10,10,10,0.56); } /* ---- 3. STATS — 4 locked numbers ---- */ .about-stats { background: var(--color-ink); color: var(--color-text-invert); padding-block: clamp(var(--space-8), 6vw, var(--space-9)); } .about-stats__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(var(--space-5), 3vw, var(--space-7)); } @media (max-width: 900px) { .about-stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-7); } } .about-stats__item { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,0.14); } .about-stats__num { font-family: var(--font-display); font-weight: var(--fw-thin, 200); /* IvyPresto Display Thin */ font-size: clamp(3rem, 5.4vw, 5rem); /* bigger so the thin weight reads */ line-height: 1; letter-spacing: -0.025em; color: var(--color-text-invert); font-variant-numeric: tabular-nums; } .about-stats__label { font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-light); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.62); } /* ---- 4. FOUNDERS — 2 portrait cards ---- */ .about-founders { background: var(--color-paper); color: var(--color-ink); padding-block: clamp(var(--space-9), 8vw, var(--space-10)); } .about-founders__head { max-width: 60ch; margin-bottom: clamp(var(--space-7), 5vw, var(--space-8)); } .about-founders__head .eyebrow { color: rgba(10,10,10,0.58); } .about-founders__head h2 { margin-top: var(--space-3); font-size: clamp(2rem, 3.6vw, 2.875rem); line-height: 1.1; letter-spacing: -0.02em; } .about-founders__head h2 em { font-style: italic; font-weight: 200; color: rgba(10,10,10,0.55); } .about-founders__lede { margin-top: var(--space-4); font-family: var(--font-body); font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.55; font-weight: var(--fw-light); color: rgba(10,10,10,0.7); max-width: 56ch; } .about-founders__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(var(--space-6), 4vw, var(--space-8)); } @media (max-width: 900px) { .about-founders__grid { grid-template-columns: 1fr; } } .founder-card { border: 1px solid rgba(10,10,10,0.1); background: transparent; position: relative; isolation: isolate; transition: border-color 480ms var(--motion-ease); } .founder-card:hover { border-color: rgba(10,10,10,0.22); } .founder-card__portrait { /* Smaller, tighter frame (4:5 portrait, max 280px wide) — the old 5:4 landscape filled too much of the card. */ width: clamp(180px, 24vw, 260px); aspect-ratio: 4 / 5; margin: clamp(var(--space-5), 3vw, var(--space-6)) clamp(var(--space-5), 3vw, var(--space-6)) 0; overflow: hidden; border: 1px solid rgba(10,10,10,0.1); filter: saturate(0.92); } .founder-card__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms var(--motion-ease); } .founder-card:hover .founder-card__portrait img { transform: scale(1.03); } .founder-card__body { padding: clamp(var(--space-5), 3vw, var(--space-6)); position: relative; } .founder-card__num { position: absolute; top: var(--space-5); right: var(--space-5); font-family: var(--font-display); font-style: italic; font-weight: 200; font-size: clamp(1.25rem, 2vw, 1.75rem); color: rgba(10,10,10,0.45); line-height: 1; } .founder-card__name { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 var(--space-2); color: var(--color-ink); } .founder-card__role { font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(10,10,10,0.58); margin: 0 0 var(--space-4); } .founder-card__bio { font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.55; font-weight: var(--fw-light); color: rgba(10,10,10,0.72); margin: 0 0 var(--space-5); } .founder-card__meta { list-style: none; margin: 0; padding: var(--space-4) 0 0; border-top: 1px solid rgba(10,10,10,0.1); display: flex; flex-wrap: wrap; gap: var(--space-4); font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(10,10,10,0.58); } .founder-card__meta li::before { content: "\25C6"; /* rhombus marker */ display: inline-block; margin-right: 8px; font-size: 7px; transform: translateY(-2px); color: rgba(10,10,10,0.62); } .founder-card__meta li { display: inline-flex; align-items: center; } /* Per-founder social icons — sits under the meta chips on every card */ .founder-card__socials { list-style: none; margin: var(--space-4) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid rgba(10,10,10,0.08); display: flex; flex-wrap: wrap; gap: clamp(var(--space-4), 2vw, var(--space-5)); } .founder-card__socials a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(10,10,10,0.7); text-decoration: none; transition: color 320ms var(--motion-ease); } .founder-card__socials a:hover { color: var(--color-ink); } .founder-card__socials svg { width: 15px; height: 15px; flex: 0 0 auto; transition: transform 360ms var(--motion-ease); } .founder-card__socials a:hover svg { transform: translateY(-2px); } /* Placeholder sockets (URL pending) — muted + no transform on hover */ .founder-card__socials a[data-placeholder] { opacity: 0.42; cursor: default; pointer-events: none; } /* Standalone WhatsApp CTA — sits below the founder grid. Black pill with a WhatsApp glyph, two-line label (headline + number), trailing NE arrow. Clearly distinct from the personal IG/LinkedIn icons above. */ .about-founders__whatsapp { margin-top: clamp(var(--space-7), 5vw, var(--space-8)); display: flex; justify-content: center; } .wa-button { display: inline-flex; align-items: center; gap: clamp(var(--space-4), 2vw, var(--space-5)); padding: clamp(14px, 1.4vw, 18px) clamp(var(--space-5), 2.6vw, var(--space-6)); background: var(--color-ink); color: var(--color-text-invert); text-decoration: none; border: 1px solid var(--color-ink); transition: background-color 420ms var(--motion-ease), transform 520ms var(--motion-ease); } .wa-button:hover { background: #1e1e1e; transform: translateY(-1px); } .wa-button__icon { width: 22px; height: 22px; color: #25d366; /* WhatsApp green accent only on the glyph */ flex: 0 0 auto; } .wa-button__label { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; } .wa-button__line { font-family: var(--font-body); font-size: 0.8125rem; font-weight: var(--fw-medium, 500); letter-spacing: 0.06em; text-transform: uppercase; } .wa-button__sub { font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); } .wa-button__arrow { width: 14px; height: 14px; color: currentColor; flex: 0 0 auto; transition: transform 420ms cubic-bezier(0.22, 0.8, 0.24, 1); } .wa-button:hover .wa-button__arrow { transform: translate(3px, -3px); } /* ---- ABOUT page Press Features — generous head-to-card spacing ---- Light-grey panel (matches .about-approach) so the editorial card separates clearly from the white sections above and below. */ .about-press-features { background: var(--color-paper-soft, #f3f3f3); color: var(--color-ink); padding-block: clamp(var(--space-9), 8vw, var(--space-10)); } .about-press-features__head { max-width: 64ch; /* Extra bottom margin so the Luxury Playbook card sits clearly below the title, not crowded against it. User explicitly asked for more breathing room here. */ margin-bottom: clamp(var(--space-8), 7vw, 7rem); } .about-press-features__head .eyebrow { color: rgba(10,10,10,0.58); } .about-press-features__head h2 { margin-top: var(--space-3); font-size: clamp(2rem, 3.6vw, 2.875rem); line-height: 1.1; letter-spacing: -0.02em; } .about-press-features__head h2 em { font-style: italic; font-weight: 200; color: rgba(10,10,10,0.55); } /* ---- ABOUT REVIEWS — static minimal dark grid (distinct from homepage) ---- */ .about-reviews { background: var(--color-ink); color: var(--color-text-invert); padding-block: clamp(var(--space-9), 8vw, var(--space-10)); } .about-reviews__head { max-width: 58ch; margin-bottom: clamp(var(--space-7), 5vw, var(--space-8)); } .about-reviews__head .eyebrow { color: rgba(255,255,255,0.58); } .about-reviews__head h2 { margin-top: var(--space-3); font-size: clamp(2rem, 3.6vw, 2.875rem); line-height: 1.1; color: var(--color-text-invert); } .about-reviews__head h2 em { font-style: italic; font-weight: 200; color: rgba(255,255,255,0.55); } .about-reviews__lede { margin-top: var(--space-4); font-family: var(--font-body); font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.55; font-weight: var(--fw-light); color: rgba(255,255,255,0.7); max-width: 54ch; } .about-reviews__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.14); } @media (max-width: 760px) { .about-reviews__grid { grid-template-columns: 1fr; } } .review-card { padding: clamp(var(--space-6), 3vw, var(--space-7)) clamp(var(--space-5), 3vw, var(--space-6)); border-bottom: 1px solid rgba(255,255,255,0.14); border-right: 1px solid rgba(255,255,255,0.14); display: grid; gap: clamp(var(--space-4), 2vw, var(--space-5)); position: relative; } .review-card:nth-child(2n) { border-right: 0; } @media (max-width: 760px) { .review-card { border-right: 0; } } .review-card__source { font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.48); } .review-card blockquote { margin: 0; font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: clamp(1.125rem, 1.7vw, 1.375rem); line-height: 1.35; letter-spacing: -0.01em; color: var(--color-text-invert); max-width: 42ch; } .review-card cite { font-style: normal; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-light); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.68); } .review-card__name { color: var(--color-text-invert); } .review-card__org { color: rgba(255,255,255,0.52); position: relative; } .review-card__org::before { content: "\25C6"; display: inline-block; margin-right: 8px; font-size: 6px; color: rgba(255,255,255,0.36); transform: translateY(-3px); } /* Editorial separator between two adjacent About sections — used before the Apply-for-engagement globe section so it sits distinctly from the press-features row above it. A tall dark band with a centered hairline + small rhombus mark. */ .about-section-sep { background: var(--color-ink); height: clamp(80px, 10vw, 140px); position: relative; display: block; } .about-section-sep::before, .about-section-sep::after { content: ""; position: absolute; top: 50%; width: clamp(80px, 14vw, 200px); height: 1px; background: rgba(255,255,255,0.16); } .about-section-sep::before { left: calc(50% - clamp(100px, 16vw, 220px)); } .about-section-sep::after { right: calc(50% - clamp(100px, 16vw, 220px)); } .about-section-sep::marker { display: none; } /* Centered rhombus mark via a child span placed with ::before on the parent wouldn't work, so we paint one using box-shadow trick — but simplest: drop an inline element. Instead, use a gradient-line trick: */ .about-section-sep { background: var(--color-ink) linear-gradient(180deg, var(--color-ink), var(--color-ink)) no-repeat; } /* Small rhombus dot at the exact center */ .about-section-sep::before { /* override to place dot instead — keep the left hairline via another pseudo */ } /* Reset the dual-pseudo approach: do it with ONE element carrying a pseudo dot + two hairlines via radial-gradient / linear-gradient layers. */ .about-section-sep { background-color: var(--color-ink); background-image: /* left hairline */ linear-gradient(90deg, transparent 0%, transparent calc(50% - 100px), rgba(255,255,255,0.18) calc(50% - 100px), rgba(255,255,255,0.18) calc(50% - 14px), transparent calc(50% - 14px)), /* right hairline */ linear-gradient(90deg, transparent 0%, transparent calc(50% + 14px), rgba(255,255,255,0.18) calc(50% + 14px), rgba(255,255,255,0.18) calc(50% + 100px), transparent calc(50% + 100px)); background-position: center center, center center; background-size: 100% 1px, 100% 1px; background-repeat: no-repeat; } /* Rhombus dot at the center */ .about-section-sep::before, .about-section-sep::after { content: none; } .about-section-sep { position: relative; } .about-section-sep::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; background: rgba(255,255,255,0.42); transform: translate(-50%, -50%) rotate(45deg); } /* Team note — single paragraph under the founder grid. */ .about-team-note { margin-top: clamp(var(--space-7), 5vw, var(--space-8)); max-width: 68ch; font-family: var(--font-body); font-size: clamp(0.9375rem, 1vw, 1rem); line-height: 1.6; font-weight: var(--fw-light); color: rgba(10,10,10,0.72); padding-top: var(--space-5); border-top: 1px solid rgba(10,10,10,0.1); } .about-team-note strong { font-weight: var(--fw-medium, 500); color: var(--color-ink); } /* ---- 5. VALUES — 4 principle-pairs ---- */ .about-values { background: var(--color-ink); color: var(--color-text-invert); padding-block: clamp(var(--space-9), 8vw, var(--space-10)); } .about-values__head { max-width: 62ch; margin-bottom: clamp(var(--space-7), 5vw, var(--space-8)); } .about-values__head .eyebrow { color: rgba(255,255,255,0.58); } .about-values__head h2 { margin-top: var(--space-3); font-size: clamp(2rem, 3.6vw, 2.875rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text-invert); } .about-values__head h2 em { font-style: italic; font-weight: 200; color: rgba(255,255,255,0.55); } .about-values__lede { margin-top: var(--space-4); font-family: var(--font-body); font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.55; font-weight: var(--fw-light); color: rgba(255,255,255,0.7); max-width: 58ch; } .about-values__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(var(--space-6), 3vw, var(--space-7)); } @media (max-width: 760px) { .about-values__list { grid-template-columns: 1fr; } } .value-item { padding: clamp(var(--space-5), 3vw, var(--space-6)) 0; border-top: 1px solid rgba(255,255,255,0.14); position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-6); row-gap: var(--space-3); } .value-item__num { font-family: var(--font-display); font-style: italic; font-weight: 200; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; color: rgba(255,255,255,0.35); grid-row: span 2; } .value-item__title { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--color-text-invert); } .value-item__title em { font-style: normal; color: rgba(255,255,255,0.42); margin: 0 6px; font-weight: 200; } .value-item__body { margin: 0; font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.55; font-weight: var(--fw-light); color: rgba(255,255,255,0.72); max-width: 42ch; } /* ---- 6. APPROACH TEASE — horizontal ---- */ .about-approach-tease { background: var(--color-paper); color: var(--color-ink); padding-block: clamp(var(--space-8), 6vw, var(--space-9)); } .about-approach-tease__inner { display: grid; grid-template-columns: minmax(0, 1.6fr) auto; gap: clamp(var(--space-7), 5vw, var(--space-9)); align-items: end; padding-block: clamp(var(--space-6), 3vw, var(--space-7)); border-top: 1px solid rgba(10,10,10,0.1); border-bottom: 1px solid rgba(10,10,10,0.1); } @media (max-width: 760px) { .about-approach-tease__inner { grid-template-columns: 1fr; align-items: start; } } .about-approach-tease__title { margin: var(--space-3) 0 var(--space-4); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; max-width: 22ch; } .about-approach-tease__title em { font-style: italic; font-weight: 200; color: rgba(10,10,10,0.55); } .about-approach-tease__text p { font-family: var(--font-body); font-size: clamp(0.9375rem, 1vw, 1rem); line-height: 1.55; font-weight: var(--fw-light); color: rgba(10,10,10,0.72); max-width: 54ch; } /* ---- 7. CTA — centered final invitation ---- */ .about-cta { background: var(--color-paper); color: var(--color-ink); padding-block: clamp(var(--space-9), 8vw, 10rem); } .about-cta__inner { max-width: 52ch; margin-inline: auto; text-align: center; display: grid; gap: clamp(var(--space-6), 4vw, var(--space-7)); } .about-cta__inner h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.08; letter-spacing: -0.02em; } .about-cta__inner h2 em { font-style: italic; font-weight: 200; color: rgba(10,10,10,0.55); } .about-cta__buttons { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-5); } .about-cta__note { font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-light); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(10,10,10,0.5); } /* Light-bg variant of .btn-ct — swaps white defaults to ink for use on paper sections (about-approach-tease, about-cta). */ .btn-ct--on-light { color: var(--color-ink); } .btn-ct--on-light.btn-ct--glass { border: 1px solid rgba(10,10,10,0.22); padding: 14px 22px; background: rgba(10,10,10,0.03); } .btn-ct--on-light.btn-ct--glass:hover { background: rgba(10,10,10,0.06); border-color: rgba(10,10,10,0.42); } .btn-ct--on-light.btn-ct--quiet { color: var(--color-ink); } /* ============================================================================ ABOUT — EXPANDED SECTIONS (manifesto · pillars · rules · exclusions · clients) ========================================================================= */ /* ---- Manifesto pull quote (DARK) — one dramatic editorial line ---- */ .about-manifesto { background: var(--color-ink); color: var(--color-text-invert); padding-block: clamp(var(--space-9), 9vw, 10rem); position: relative; overflow: hidden; } .about-manifesto .container { max-width: 64ch; text-align: center; } .about-manifesto__quote { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.625rem, 3.4vw, 2.625rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--color-text-invert); position: relative; padding-top: 0.4em; } .about-manifesto__quote em { font-style: italic; font-weight: 200; color: rgba(255,255,255,0.65); } .about-manifesto__open { position: absolute; top: -0.35em; left: -0.2em; font-family: var(--font-display); font-style: italic; font-weight: 200; font-size: clamp(4rem, 10vw, 8rem); line-height: 1; color: rgba(255,255,255,0.08); pointer-events: none; } .about-manifesto__attr { margin: clamp(var(--space-6), 4vw, var(--space-7)) auto 0; display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); } .about-manifesto__rule { width: 40px; height: 1px; background: rgba(255,255,255,0.28); display: inline-block; } /* ---- What we do — 3 pillars (LIGHT) ---- */ .about-pillars { background: var(--color-paper); color: var(--color-ink); padding-block: clamp(var(--space-9), 8vw, var(--space-10)); } .about-pillars__head { max-width: 66ch; margin-bottom: clamp(var(--space-7), 5vw, var(--space-8)); } .about-pillars__head .eyebrow { color: rgba(10,10,10,0.58); } .about-pillars__head h2 { margin-top: var(--space-3); font-size: clamp(2rem, 3.6vw, 2.875rem); line-height: 1.1; } .about-pillars__head h2 em { font-style: italic; font-weight: 200; color: rgba(10,10,10,0.55); } .about-pillars__lede { margin-top: var(--space-4); font-family: var(--font-body); font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.55; font-weight: var(--fw-light); color: rgba(10,10,10,0.7); max-width: 58ch; } .about-pillars__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(var(--space-6), 3vw, var(--space-7)); } @media (max-width: 900px) { .about-pillars__grid { grid-template-columns: 1fr; } } .pillar-card { display: grid; gap: var(--space-4); padding: clamp(var(--space-6), 3vw, var(--space-7)) 0 0; border-top: 1px solid rgba(10,10,10,0.14); position: relative; } .pillar-card__num { font-family: var(--font-display); font-style: italic; font-weight: 200; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; letter-spacing: -0.02em; color: rgba(10,10,10,0.45); } .pillar-card__title { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--color-ink); } .pillar-card__title em { font-style: italic; font-weight: 200; color: rgba(10,10,10,0.55); } .pillar-card__lede { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.4; color: rgba(10,10,10,0.78); } .pillar-card__body { margin: 0; font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.6; font-weight: var(--fw-light); color: rgba(10,10,10,0.72); max-width: 42ch; } /* ---- Five rules (DARK) — playbook of luxury marketing ---- */ .about-rules { background: var(--color-ink); color: var(--color-text-invert); padding-block: clamp(var(--space-9), 8vw, var(--space-10)); } .about-rules__head { max-width: 64ch; margin-bottom: clamp(var(--space-7), 5vw, var(--space-8)); } .about-rules__head .eyebrow { color: rgba(255,255,255,0.58); } .about-rules__head h2 { margin-top: var(--space-3); font-size: clamp(2rem, 3.6vw, 2.875rem); line-height: 1.1; color: var(--color-text-invert); } .about-rules__head h2 em { font-style: italic; font-weight: 200; color: rgba(255,255,255,0.55); } .about-rules__lede { margin-top: var(--space-4); font-family: var(--font-body); font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.55; font-weight: var(--fw-light); color: rgba(255,255,255,0.7); max-width: 58ch; } .about-rules__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .rule-item { display: grid; grid-template-columns: clamp(70px, 10vw, 120px) 1fr; gap: clamp(var(--space-5), 3vw, var(--space-7)); padding: clamp(var(--space-6), 3vw, var(--space-7)) 0; border-top: 1px solid rgba(255,255,255,0.14); align-items: start; } .rule-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.14); } .rule-item__num { font-family: var(--font-display); font-style: italic; font-weight: 200; font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1; color: rgba(255,255,255,0.25); letter-spacing: -0.02em; } .rule-item__body { display: grid; gap: var(--space-3); } .rule-item__title { margin: 0; display: flex; flex-direction: column; gap: 4px; font-family: var(--font-display); font-weight: 300; line-height: 1.15; letter-spacing: -0.01em; color: var(--color-text-invert); } .rule-item__gr { font-size: clamp(1.5rem, 2.6vw, 2.125rem); } .rule-item__en { font-size: clamp(0.875rem, 1.2vw, 1.0625rem); font-style: italic; font-weight: 200; color: rgba(255,255,255,0.5); letter-spacing: 0; } .rule-item__body p { margin: 0; font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.6; font-weight: var(--fw-light); color: rgba(255,255,255,0.72); max-width: 60ch; } /* ---- What we don't do — exclusion list (LIGHT) ---- */ .about-exclusions { background: var(--color-paper-soft, #f3f3f3); color: var(--color-ink); padding-block: clamp(var(--space-9), 8vw, var(--space-10)); } .about-exclusions__head { max-width: 62ch; margin-bottom: clamp(var(--space-7), 5vw, var(--space-8)); } .about-exclusions__head .eyebrow { color: rgba(10,10,10,0.58); } .about-exclusions__head h2 { margin-top: var(--space-3); font-size: clamp(2rem, 3.6vw, 2.875rem); line-height: 1.1; } .about-exclusions__head h2 em { font-style: italic; font-weight: 200; color: rgba(10,10,10,0.55); } .about-exclusions__lede { margin-top: var(--space-4); font-family: var(--font-body); font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.55; font-weight: var(--fw-light); color: rgba(10,10,10,0.7); max-width: 56ch; } .about-exclusions__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid rgba(10,10,10,0.14); } @media (max-width: 760px) { .about-exclusions__list { grid-template-columns: 1fr; } } .exclusion-item { padding: clamp(var(--space-5), 3vw, var(--space-6)) clamp(var(--space-5), 3vw, var(--space-6)); border-bottom: 1px solid rgba(10,10,10,0.14); border-right: 1px solid rgba(10,10,10,0.14); position: relative; display: grid; gap: var(--space-3); } .exclusion-item:nth-child(2n) { border-right: 0; } @media (max-width: 760px) { .exclusion-item { border-right: 0; } } .exclusion-item::before { content: "\2715"; /* small × mark */ position: absolute; top: clamp(18px, 2.6vw, 28px); right: clamp(18px, 2.6vw, 28px); font-size: 12px; color: rgba(10,10,10,0.62); } .exclusion-item h3 { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--color-ink); padding-right: 32px; } .exclusion-item p { margin: 0; font-family: var(--font-body); font-size: 0.875rem; line-height: 1.55; font-weight: var(--fw-light); color: rgba(10,10,10,0.68); max-width: 42ch; } /* ---- Clients — named editorial strip (LIGHT) ---- */ .about-clients { background: var(--color-paper); color: var(--color-ink); padding-block: clamp(var(--space-8), 7vw, var(--space-9)); } .about-clients__head { margin-bottom: clamp(var(--space-6), 4vw, var(--space-7)); } .about-clients__head .eyebrow { color: rgba(10,10,10,0.58); } .about-clients__head h2 { margin-top: var(--space-3); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; } .about-clients__head h2 em { font-style: italic; font-weight: 200; color: rgba(10,10,10,0.55); } .about-clients__list { list-style: none; margin: 0; padding-top: clamp(var(--space-5), 3vw, var(--space-6)); border-top: 1px solid rgba(10,10,10,0.14); display: flex; flex-wrap: wrap; row-gap: clamp(var(--space-3), 1.5vw, var(--space-4)); column-gap: 0; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--color-ink); } .about-clients__list li { display: inline-flex; align-items: center; } .about-clients__list li + li::before { content: "\25C6"; /* rhombus separator */ display: inline-block; margin: 0 clamp(14px, 1.4vw, 22px); font-size: 8px; color: rgba(10,10,10,0.62); transform: translateY(-3px); } /* ============================================================= 2b. ABOUT STORY — VARIANT B Duplicate of the Our Story section using the SAME structural pattern as .about-stats / .about-press / .about-timeline etc:
head + body
. Placed directly below variant A so the two can be compared on the same page and the more reliable layout can be kept. ============================================================= */ .about-story-v2 { background: var(--color-paper); color: var(--color-ink); padding-block: clamp(var(--space-9), 8vw, var(--space-10)); border-top: 1px solid rgba(10,10,10,0.08); } .about-story-v2__head { max-width: 58ch; margin-bottom: clamp(var(--space-7), 5vw, var(--space-8)); } .about-story-v2__head .eyebrow { color: rgba(10,10,10,0.58); } .about-story-v2__head h2 { margin-top: var(--space-3); font-size: clamp(2rem, 3.6vw, 2.875rem); line-height: 1.1; letter-spacing: -0.02em; } /* Chapter grid — Roman-numeral kicker on the left, body prose on the right. display:contents on .story-row lets both children flow as grid cells. */ .about-story-v2__prose { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 4.2fr); column-gap: clamp(var(--space-5), 4vw, var(--space-7)); row-gap: clamp(var(--space-6), 3vw, var(--space-7)); max-width: 1120px; } .story-row { display: contents; } .story-row__kicker { font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-medium, 500); letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-ink); padding-top: 0.4em; /* optical align with first line */ } .story-row__body { margin: 0; font-family: var(--font-body); font-size: clamp(0.9375rem, 1.05vw, 1.0625rem); line-height: 1.65; font-weight: var(--fw-light); color: rgba(10,10,10,0.82); } .story-row__body strong { font-weight: var(--fw-medium, 500); color: var(--color-ink); } .story-row__body em { font-style: italic; color: var(--color-ink); /* Gotham Light Italic — scoped ONLY to Our Story chapter paragraphs. Rest of the site keeps IvyPresto Display italic. Sans italic here gives the body prose a grounded, editorial-journal voice distinct from the display quotes. */ font-family: var(--font-body); font-weight: 300; } @media (max-width: 760px) { .about-story-v2__prose { grid-template-columns: 1fr; row-gap: var(--space-5); } .story-row__kicker { padding-top: 0; margin-bottom: calc(var(--space-2) * -1); /* pull kicker close to body */ } } /* Editorial pull quote between chapters and mission. Hairline + rotated rhombus ornament at top — same vocabulary as .about-approach & .cs__attr. Quote text stays on a SINGLE LINE: font-size uses min(...) so it shrinks fluidly with the viewport and never wraps. */ .about-story-v2__pullquote { margin: clamp(var(--space-8), 6vw, var(--space-9)) 0 0; padding-top: clamp(var(--space-7), 5vw, var(--space-8)); /* extra room so star + hairline sit clean */ position: relative; /* NO overflow:hidden here — it was clipping the top half of the star ornament. Narrow-viewport safety net now lives on the blockquote. */ } .about-story-v2__pullquote-rule { position: absolute; top: 0; left: 0; width: 72px; height: 1px; background: rgba(10,10,10,0.26); } /* 4-point star ornament — replaces the small rhombus, reads as a typographic asterisk. Rendered vertically (N/S/E/W points), sits just above the hairline so it visually interrupts the rule rather than being clipped. */ .about-story-v2__pullquote-star { position: absolute; top: -6px; /* centred on the hairline: 14px/2 − 1px = 6px */ left: 84px; width: 14px; height: 14px; color: rgba(10,10,10,0.44); display: block; } .about-story-v2__pullquote blockquote { margin: 0; font-family: var(--font-display); font-weight: 300; /* min() clamps to whichever is smaller — so on narrow viewports the text scales DOWN automatically to keep on one line. Cap at 2.25rem desktop. */ font-size: min(2.25rem, 3.7vw); line-height: 1.22; letter-spacing: -0.015em; color: var(--color-ink); white-space: nowrap; } .about-story-v2__pullquote blockquote em { /* IvyPresto Display Thin Italic — muted italic lift inside the display quote. */ font-family: var(--font-display); font-style: italic; font-weight: 200; color: rgba(10,10,10,0.55); } /* split-words word spans need to respect the nowrap on their parent */ .about-story-v2__pullquote blockquote .word { white-space: nowrap; } .about-story-v2__pullquote figcaption { margin-top: clamp(var(--space-4), 2.2vw, var(--space-5)); font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(10,10,10,0.5); } .about-mission-v2 { margin-top: clamp(var(--space-8), 6vw, var(--space-9)); padding-top: clamp(var(--space-7), 5vw, var(--space-8)); padding-bottom: clamp(var(--space-5), 3vw, var(--space-6)); border-top: 1px solid rgba(10,10,10,0.12); border-bottom: 1px solid rgba(10,10,10,0.12); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(var(--space-5), 4vw, var(--space-7)); align-items: start; } @media (max-width: 760px) { .about-mission-v2 { grid-template-columns: 1fr; gap: var(--space-4); } } .about-mission-v2__eyebrow { color: rgba(10,10,10,0.58); } .about-mission-v2__body { margin: 0; font-family: var(--font-display); font-weight: var(--fw-thin); /* 100 — Thin */ font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.35; letter-spacing: -0.01em; color: var(--color-ink); max-width: 62ch; } .about-mission-v2__body strong { font-weight: var(--fw-medium, 500); } .about-mission-v2__body em { font-style: italic; font-weight: var(--fw-thin); /* Same ink → lighter gradient wash as the approach quote — one voice for italics across the About page display copy. */ background: linear-gradient(90deg, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.32) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================================================= APPROACH PAGE Dedicated /approach.html — reuses the about-page chrome (preloader, page-frame, nav, altfooter) and adds: 1. .approach-hero — reuses .about-hero--centered shell 2. .approach-process — four-phase vertical, Roman-numeral 3. .approach-tiers — 2×2 engagement tier grid 4. .approach-services — 8-card service stack (4×2 on desktop) 5. .approach-benefits — soft partner benefits list ============================================================= */ /* ---- 2. PROCESS — four-phase vertical list, big Roman numerals ---- */ .approach-process { background: var(--color-paper); color: var(--color-ink); padding-block: clamp(var(--space-9), 8vw, var(--space-10)); } .approach-process__head { max-width: 64ch; margin-bottom: clamp(var(--space-7), 5vw, var(--space-8)); } .approach-process__head .eyebrow { color: rgba(10,10,10,0.58); } .approach-process__head h2 { margin-top: var(--space-3); font-size: clamp(2rem, 3.6vw, 2.875rem); line-height: 1.1; letter-spacing: -0.02em; } .approach-process__head h2 em { font-style: italic; font-weight: 200; color: rgba(10,10,10,0.55); } .approach-process__lede { margin: var(--space-4) 0 0; font-family: var(--font-body); font-size: clamp(0.9375rem, 1.05vw, 1.0625rem); font-weight: var(--fw-light); line-height: 1.65; color: rgba(10,10,10,0.74); max-width: 62ch; } .approach-process__track { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(var(--space-5), 3vw, var(--space-7)); counter-reset: step; border-top: 1px solid rgba(10,10,10,0.1); } .approach-step { display: grid; grid-template-columns: minmax(72px, 120px) minmax(0, 1fr); gap: clamp(var(--space-5), 3vw, var(--space-7)); align-items: start; padding-block: clamp(var(--space-6), 4vw, var(--space-7)); border-bottom: 1px solid rgba(10,10,10,0.1); } .approach-step__num { font-family: var(--font-display); font-style: italic; font-weight: 200; font-size: clamp(3rem, 6vw, 5rem); line-height: 1; letter-spacing: -0.02em; color: rgba(10,10,10,0.38); } .approach-step__title { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 300; font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--color-ink); } .approach-step__title em { font-style: italic; font-weight: 200; color: rgba(10,10,10,0.55); } .approach-step__body-text { margin: 0; font-family: var(--font-body); font-size: clamp(0.9375rem, 1.05vw, 1.0625rem); font-weight: var(--fw-light); line-height: 1.65; color: rgba(10,10,10,0.78); max-width: 68ch; } @media (max-width: 720px) { .approach-step { grid-template-columns: 1fr; gap: var(--space-3); } .approach-step__num { font-size: clamp(2.5rem, 8vw, 3.5rem); } } /* ---- 3. ENGAGEMENT TIERS — 2×2 grid of four cards ---- */ .approach-tiers { background: var(--color-paper-soft, #f3f3f3); color: var(--color-ink); padding-block: clamp(var(--space-9), 8vw, var(--space-10)); } /* ===================================================================== APPROACH FLAGSHIP — standalone private-tier band Lifted out of the public-tiers grid so the invitation register reads as its own thing. Ink-on-paper, editorial, two-column horizontal composition with a hairline rule running between the lead column and the CTA aside. Stays in the same monochrome vocabulary as the rest of the page; no red, no accent fills, no bold panels. ================== */ .approach-flagship { background: var(--color-ink); color: var(--color-text-invert); padding-block: clamp(var(--space-8), 7vw, var(--space-10)); border-top: 1px solid rgba(255,255,255,0.08); } .approach-flagship__panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(var(--space-7), 6vw, var(--space-10)); padding: clamp(var(--space-8), 5.5vw, var(--space-10)) clamp(var(--space-7), 5vw, var(--space-9)); background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.10); } .approach-flagship__lead { display: grid; gap: clamp(18px, 1.8vw, 26px); } .approach-flagship__lede { margin: 0; font-family: var(--font-display); font-weight: var(--fw-thin, 200); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.18; letter-spacing: -0.015em; color: var(--color-text-invert, #fff); max-width: 30ch; } .approach-flagship__lede em { font-style: italic; color: rgba(255,255,255,0.78); } .approach-flagship__pillars { list-style: none; margin: clamp(12px, 1.4vw, 18px) 0 0; padding: 0; /* Horizontal row — three pillar items sit side by side. Wraps to a stack only at narrow viewports. ============================== */ display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 2.4vw, 36px); font-family: var(--font-body); font-size: 0.8125rem; letter-spacing: 0.02em; color: rgba(255,255,255,0.74); max-width: none; } .approach-flagship__pillars li { display: inline-flex; align-items: center; gap: 12px; } @media (max-width: 760px) { .approach-flagship__pillars { flex-direction: column; align-items: flex-start; gap: 10px; } } .approach-flagship__pillar-mark { width: 5px; height: 5px; background: rgba(255,255,255,0.56); transform: rotate(45deg); flex: 0 0 auto; display: inline-block; } /* "By invitation only" eyebrow — IvyPresto Display Thin, italic, no uppercase or letterspacing tracking. Reads like a hand-set editorial line above the Flagship name. ============================== */ .approach-flagship__eyebrow { font-family: var(--font-display); font-style: italic; font-weight: var(--fw-thin); font-size: clamp(1.0625rem, 1.45vw, 1.25rem); letter-spacing: 0; text-transform: none; color: rgba(255,255,255,0.72); line-height: 1.1; } .approach-flagship__name { margin: 0; font-family: var(--font-display); font-weight: var(--fw-thin); font-size: clamp(2rem, 3.4vw, 2.875rem); letter-spacing: -0.02em; line-height: 1.05; display: flex; align-items: baseline; gap: clamp(14px, 1.4vw, 22px); color: var(--color-text-invert); } .approach-flagship__numeral { font-family: var(--font-display); font-style: italic; font-weight: 200; font-size: clamp(1rem, 1.4vw, 1.25rem); color: rgba(255,255,255,0.50); letter-spacing: -0.02em; } .approach-flagship__lock { width: 0.5em; height: 0.5em; margin-left: 0.18em; color: rgba(255,255,255,0.62); vertical-align: 0.34em; transition: color 320ms var(--motion-ease), transform 520ms cubic-bezier(0.22, 0.8, 0.24, 1); } .approach-flagship__panel:hover .approach-flagship__lock { color: var(--color-text-invert); transform: translateY(-1px); } .approach-flagship__body { margin: 0; font-family: var(--font-body); font-size: clamp(0.9375rem, 1.05vw, 1.0625rem); font-weight: var(--fw-light); line-height: 1.65; color: rgba(255,255,255,0.78); max-width: 64ch; } .approach-flagship__aside { display: grid; grid-template-columns: 80px auto; align-items: center; gap: clamp(20px, 2vw, 32px); } .approach-flagship__rule { display: block; height: 1px; width: 100%; background: rgba(255,255,255,0.22); } .approach-flagship__cta.btn-ct { padding: 14px 22px; white-space: nowrap; color: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.32); } .approach-flagship__cta.btn-ct:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.55); } @media (max-width: 760px) { .approach-flagship__panel { grid-template-columns: 1fr; gap: clamp(var(--space-5), 4vw, var(--space-7)); } .approach-flagship__aside { grid-template-columns: 1fr; gap: var(--space-3); } .approach-flagship__rule { display: none; } } .approach-tiers__head { max-width: 64ch; margin-bottom: clamp(var(--space-7), 5vw, var(--space-8)); } .approach-tiers__head .eyebrow { color: rgba(10,10,10,0.58); } .approach-tiers__head h2 { margin-top: var(--space-3); font-size: clamp(2rem, 3.6vw, 2.875rem); line-height: 1.1; letter-spacing: -0.02em; } .approach-tiers__head h2 em { font-style: italic; font-weight: 200; color: rgba(10,10,10,0.55); } .approach-tiers__lede { margin: var(--space-4) 0 0; font-family: var(--font-body); font-size: clamp(0.9375rem, 1.05vw, 1.0625rem); font-weight: var(--fw-light); line-height: 1.65; color: rgba(10,10,10,0.74); max-width: 62ch; } /* ===================================================================== ENGAGEMENT TIERS, refactored for proper UX/UI balance. Layout: - Three public tiers in a row (Project · Essential · Signature), every card is a vertical flex column with five fixed zones: numeral → name → tagline → divider → CTA all gaps and paddings come from the same scale so the cards align at every horizontal baseline. - Flagship is one full-width row underneath, dark, three editorial zones separated by hairline rules: lead (numeral + name + lock + tagline) | status pill + CTA (right column). The `--tier-pad` token below is the single source of truth for card padding. Bumping it scales the whole component cleanly. ===================================================================== */ .approach-tiers__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(var(--space-4), 2vw, var(--space-5)); --tier-pad: clamp(28px, 2.6vw, 44px); } /* ---- BASE TIER CARD (public 3 + flagship inherit this) ---- Bottom padding gets a touch more breathing space than the top so the CTA sits with proper visual weight, never crowded against the lower edge of the card. */ .tier-card { position: relative; display: flex; flex-direction: column; padding: var(--tier-pad); padding-bottom: clamp(36px, 3.4vw, 56px); border: 1px solid rgba(10,10,10,0.10); min-height: clamp(560px, 44vw, 640px); background: var(--color-paper); transition: transform 520ms cubic-bezier(0.22, 0.8, 0.24, 1), border-color 320ms var(--motion-ease), box-shadow 520ms cubic-bezier(0.22, 0.8, 0.24, 1); } .tier-card--white { background: var(--color-paper); border-color: rgba(10,10,10,0.10); } .tier-card--black { background: var(--color-ink); color: var(--color-text-invert); border: 1px solid rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); } /* Hover. Whole card lifts, border brightens, the small rhombus on the top-right fades in. The big name nudges left a touch. */ .tier-card::after { content: ""; position: absolute; top: var(--tier-pad); right: var(--tier-pad); width: 10px; height: 10px; border: 1px solid currentColor; transform: rotate(45deg) scale(0.6); opacity: 0; transition: opacity 420ms var(--motion-ease), transform 520ms cubic-bezier(0.22, 0.8, 0.24, 1); pointer-events: none; } .tier-card:hover { transform: translateY(-4px); border-color: rgba(10,10,10,0.22); box-shadow: 0 20px 40px -24px rgba(10,10,10,0.18); } .tier-card:hover::after { opacity: 0.46; transform: rotate(45deg) scale(1); } .tier-card--black:hover { border-color: rgba(255,255,255,0.28); box-shadow: 0 24px 50px -28px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.10); } .tier-card__name { transition: transform 520ms cubic-bezier(0.22, 0.8, 0.24, 1); } .tier-card:hover .tier-card__name { transform: translateX(-2px); } /* ---- NUMERAL ---- */ .tier-card__num { font-family: var(--font-display); font-style: italic; font-weight: 200; font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1; letter-spacing: -0.02em; color: rgba(10,10,10,0.38); display: block; margin: 0 0 clamp(28px, 3vw, 44px); } .tier-card--black .tier-card__num { color: rgba(255,255,255,0.44); } /* ---- NAME (the dominant typographic element) ---- */ .tier-card__name { margin: 0; font-family: var(--font-display); font-weight: var(--fw-thin); font-size: clamp(2.25rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -0.02em; color: var(--color-ink); display: inline-flex; align-items: center; gap: 0; } .tier-card--black .tier-card__name { color: var(--color-text-invert); } /* ---- TAGLINE ---- */ .tier-card__tagline { margin: clamp(20px, 1.8vw, 28px) 0 0; font-family: var(--font-body); font-size: clamp(0.9375rem, 1.05vw, 1rem); font-weight: var(--fw-light); line-height: 1.6; color: rgba(10,10,10,0.74); max-width: 28ch; } .tier-card--black .tier-card__tagline { color: rgba(255,255,255,0.78); } /* ---- SCOPE (analytical paragraph after tagline) ---- The body copy that gives the reader operational clarity about the tier: what's in scope, what isn't, how it relates to the seven-step chain. Sits between tagline and the bullet list. ============================ */ .tier-card__scope { margin: clamp(14px, 1.2vw, 20px) 0 0; font-family: var(--font-body); font-size: clamp(0.8125rem, 0.92vw, 0.9375rem); font-weight: var(--fw-light); line-height: 1.65; color: rgba(10,10,10,0.62); max-width: 38ch; } .tier-card--black .tier-card__scope { color: rgba(255,255,255,0.66); } /* ---- INCLUSIONS LIST ---- Minimal four-bullet rundown of what the tier ships. Pinned above the CTA, with the same hairline divider language as the rest of the site. */ .tier-card__list { list-style: none; margin: clamp(20px, 1.6vw, 28px) 0 clamp(28px, 2vw, 36px); padding: clamp(16px, 1.4vw, 22px) 0 0; border-top: 1px solid rgba(10,10,10,0.08); display: grid; gap: clamp(6px, 0.6vw, 10px); font-family: var(--font-body); font-size: clamp(0.75rem, 0.85vw, 0.8125rem); font-weight: var(--fw-light); letter-spacing: 0.01em; color: rgba(10,10,10,0.78); } .tier-card--black .tier-card__list { border-top-color: rgba(255,255,255,0.10); color: rgba(255,255,255,0.78); } .tier-card__list li { position: relative; padding-left: 14px; } .tier-card__list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 1px; background: currentColor; opacity: 0.55; } /* The min-height on the cards needs to grow now that scope + list sit inside. Bumping the floor ensures all three white cards align cleanly at the bottom even when scope copy lengths vary. ===================== */ /* ---- CTA + divider rule ---- Anchored to the bottom of the card via margin-top: auto so all three cards line up at the same baseline regardless of tagline length. The hairline rule sits above the button at a fixed 24-36px top-padding, the button itself has its own 14x22px internal padding (.btn-ct--quiet), and the card's bottom padding (36-56px) gives the button room beneath it. Result: the action reads as a deliberate, balanced moment, not crammed against the card edge. */ /* CTAs inside tier cards keep the boxed .btn-ct--quiet treatment, so they read as part of the same button vocabulary used elsewhere on the site. The base button properties (border, padding, animation) are preserved. We only constrain layout: the four CTAs are all forced to the same visual width and to centred text content, so "See details", "Request a snapshot" and "Enquire privately" all render as identically-sized boxes. */ .tier-card__cta.btn-ct { width: 100%; max-width: clamp(220px, 22vw, 280px); justify-content: center; text-align: center; padding: 16px 22px; } .tier-card__cta.btn-ct .btn-ct__slide, .tier-card__cta.btn-ct .btn-ct__row { justify-content: center; width: 100%; } .tier-card__cta { margin-top: auto; align-self: flex-start; position: relative; } /* The hairline rule that previously sat above the CTA has been retired. Now that the CTA is a boxed .btn-ct--quiet button, the rule would compete visually with the button's own border. The boxed button is the divider. */ .tier-card__cta::before { content: none; display: none; } /* ---- FLAGSHIP LOCK GLYPH ---- */ .tier-card__lock { width: 0.5em; height: 0.5em; margin-left: 0.32em; color: rgba(255,255,255,0.78); vertical-align: 0.34em; transition: color 320ms var(--motion-ease), transform 520ms cubic-bezier(0.22, 0.8, 0.24, 1); } .tier-card--black:hover .tier-card__lock { color: #ffffff; transform: translateY(-1px); } /* ===================================================================== FLAGSHIP HORIZONTAL ROW Two main editorial zones, one structural balance: [ LEAD ] | [ ASIDE ] IV ─── (rule) | Flagship 🔒 | By invitation Tagline copy across two lines max. | ──── (rule) | Enquire privately → The aside is a self-contained mini-card: status pill on top, a hairline rule, then the CTA. Both columns share the same vertical padding, so the vertical hairline that separates them runs the full height cleanly. ===================================================================== */ .approach-tiers__grid .tier-card--black { grid-column: 1 / -1; flex-direction: row; align-items: stretch; min-height: clamp(240px, 22vw, 300px); padding: 0; overflow: hidden; gap: 0; } .approach-tiers__grid .tier-card--black > .tier-card__lead, .approach-tiers__grid .tier-card--black > .tier-card__aside { padding: clamp(36px, 3.2vw, 56px) clamp(36px, 3.4vw, 64px); display: flex; flex-direction: column; } .approach-tiers__grid .tier-card--black > .tier-card__aside { border-left: 1px solid rgba(255,255,255,0.12); } /* LEAD column. Vertical-centred, IV numeral with its own short rule above the title for editorial weight. */ .tier-card__lead { flex: 1 1 60%; min-width: 0; justify-content: center; gap: 0; } .approach-tiers__grid .tier-card--black .tier-card__lead .tier-card__num { margin: 0 0 clamp(14px, 1.4vw, 20px); padding-bottom: clamp(10px, 1vw, 14px); border-bottom: 1px solid rgba(255,255,255,0.20); width: clamp(56px, 5vw, 80px); font-style: normal; letter-spacing: 0.16em; font-size: 0.8125rem; font-weight: 300; color: rgba(255,255,255,0.78); } .approach-tiers__grid .tier-card--black .tier-card__name { font-size: clamp(2rem, 3.2vw, 2.75rem); letter-spacing: -0.02em; margin: 0; } .approach-tiers__grid .tier-card--black .tier-card__tagline { max-width: 50ch; margin: clamp(14px, 1.4vw, 20px) 0 0; font-size: clamp(0.9375rem, 1.05vw, 1.0625rem); } /* ASIDE column. Pill on top, hairline rule, CTA underneath. All three cluster tightly together and vertically centre as one unit, so there is no awkward dead space between the pill and the CTA. */ .tier-card__aside { flex: 0 0 clamp(300px, 28vw, 380px); justify-content: center; align-items: flex-end; text-align: right; gap: clamp(22px, 2vw, 30px); } .approach-tiers__grid .tier-card--black .tier-card__aside::before { content: "By invitation"; display: inline-flex; align-items: center; padding: 11px 18px; border: 1px solid rgba(255,255,255,0.36); font-family: var(--font-body); font-weight: var(--fw-light); font-size: 0.6875rem; letter-spacing: 0.28em; text-transform: uppercase; color: #ffffff; background: rgba(255,255,255,0.04); align-self: flex-end; } .approach-tiers__grid .tier-card--black .tier-card__cta { align-self: flex-end; margin-top: 0; padding-top: 0; font-size: 0.75rem; } /* Flagship CTA matches the public tier CTA width so all four button boxes share the same proportions across the section. */ .approach-tiers__grid .tier-card--black .tier-card__cta.btn-ct { width: 100%; max-width: clamp(220px, 22vw, 280px); justify-content: center; text-align: center; padding: 16px 22px; } /* ---- RESPONSIVE ---- */ @media (max-width: 1024px) { .approach-tiers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .approach-tiers__grid { grid-template-columns: 1fr; } .tier-card { min-height: 0; } .approach-tiers__grid .tier-card--black { flex-direction: column; align-items: stretch; min-height: 0; } .approach-tiers__grid .tier-card--black > .tier-card__aside { border-left: 0; border-top: 1px solid rgba(255,255,255,0.12); align-items: flex-start; text-align: left; flex: 0 0 auto; } .approach-tiers__grid .tier-card--black .tier-card__aside::before { align-self: flex-start; } .approach-tiers__grid .tier-card--black .tier-card__cta { align-self: flex-start; } .approach-tiers__grid .tier-card--black .tier-card__cta::before { left: 0; right: auto; } } /* Legacy aliases, kept so other templates that reference these classes still render correctly. */ .tier-card--light-grey { background: var(--color-paper-soft, #f3f3f3); } .tier-card--silver { background: linear-gradient(135deg, #ffffff 0%, #e4e4e4 100%); border-color: rgba(10,10,10,0.05); } .tier-card__meta { list-style: none; margin: var(--space-2) 0 0; padding: clamp(var(--space-3), 1.6vw, var(--space-4)) 0 0; border-top: 1px solid rgba(10,10,10,0.12); display: flex; flex-wrap: wrap; gap: clamp(var(--space-3), 1.6vw, var(--space-4)); font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(10,10,10,0.64); } .tier-card--silver .tier-card__meta { border-top-color: rgba(10,10,10,0.14); } .tier-card--black .tier-card__meta { border-top-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.66); } /* ---- 4. SERVICES — 8 mini cards, 4×2 grid on desktop, 2×4 on tablet ---- */ .approach-services { background: var(--color-ink); color: var(--color-text-invert); padding-block: clamp(var(--space-9), 8vw, var(--space-10)); } .approach-services__head { max-width: 64ch; margin-bottom: clamp(var(--space-7), 5vw, var(--space-8)); } .approach-services__head .eyebrow { color: rgba(255,255,255,0.6); } .approach-services__head h2 { margin-top: var(--space-3); font-size: clamp(2rem, 3.6vw, 2.875rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text-invert); } .approach-services__head h2 em { font-style: italic; font-weight: 200; color: rgba(255,255,255,0.55); } .approach-services__lede { margin: var(--space-4) 0 0; font-family: var(--font-body); font-size: clamp(0.9375rem, 1.05vw, 1.0625rem); font-weight: var(--fw-light); line-height: 1.65; color: rgba(255,255,255,0.74); max-width: 62ch; } .approach-services__grid { list-style: none; margin: 0; padding: 0; display: grid; /* Nine departments laid out 3 × 3 so the section reads as a clean square bento, not a wide 4-col strip. ─────────────────────────── */ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(var(--space-4), 1.8vw, var(--space-5)); } @media (max-width: 1100px) { .approach-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .approach-services__grid { grid-template-columns: 1fr; } } .service-card { position: relative; display: flex; flex-direction: column; gap: clamp(var(--space-3), 1.4vw, var(--space-4)); padding: clamp(var(--space-5), 2.4vw, var(--space-6)); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); transition: background 320ms var(--motion-ease), border-color 320ms var(--motion-ease); } .service-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22); } .service-card__num { font-family: var(--font-display); font-style: italic; font-weight: 200; font-size: 1.25rem; line-height: 1; letter-spacing: -0.01em; color: rgba(255,255,255,0.4); } .service-card__title { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.22; letter-spacing: -0.01em; color: var(--color-text-invert); } .service-card__title em { font-style: italic; font-weight: 200; color: rgba(255,255,255,0.58); } .service-card__body { margin: 0; font-family: var(--font-body); font-size: 0.8125rem; font-weight: var(--fw-light); line-height: 1.6; color: rgba(255,255,255,0.74); } .service-card__meta { list-style: none; margin: auto 0 0; padding: clamp(var(--space-3), 1.4vw, var(--space-4)) 0 0; border-top: 1px solid rgba(255,255,255,0.12); display: grid; gap: 6px; font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); line-height: 1.4; color: rgba(255,255,255,0.6); } .service-card__meta li::before { content: "\2014\2009"; /* em-dash + thin space bullet */ color: rgba(255,255,255,0.32); } /* ---- 5. PARTNER BENEFITS — stacked list with leading star glyph ---- */ .approach-benefits { background: var(--color-paper); color: var(--color-ink); /* Extra top spacing so it sits clearly separated from the service stack section above (a separator space, as requested). */ padding-top: clamp(var(--space-10), 9vw, 9rem); padding-bottom: clamp(var(--space-9), 8vw, var(--space-10)); margin-top: clamp(var(--space-6), 4vw, var(--space-7)); } .approach-benefits__head { max-width: 64ch; margin-bottom: clamp(var(--space-7), 5vw, var(--space-8)); } .approach-benefits__head .eyebrow { color: rgba(10,10,10,0.58); } .approach-benefits__head h2 { margin-top: var(--space-3); font-size: clamp(2rem, 3.6vw, 2.875rem); line-height: 1.1; letter-spacing: -0.02em; } .approach-benefits__head h2 em { font-style: italic; font-weight: 200; color: rgba(10,10,10,0.55); } .approach-benefits__lede { margin: var(--space-4) 0 0; font-family: var(--font-body); font-size: clamp(0.9375rem, 1.05vw, 1.0625rem); font-weight: var(--fw-light); line-height: 1.65; color: rgba(10,10,10,0.74); max-width: 62ch; } .approach-benefits__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--space-5), 3vw, var(--space-6)); border-top: 1px solid rgba(10,10,10,0.1); padding-top: clamp(var(--space-6), 3vw, var(--space-7)); } @media (max-width: 760px) { .approach-benefits__list { grid-template-columns: 1fr; } } .benefit-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: clamp(var(--space-3), 1.4vw, var(--space-4)); align-items: start; position: relative; padding: clamp(var(--space-3), 1.6vw, var(--space-4)) clamp(var(--space-3), 1.6vw, var(--space-4)); padding-left: 0; padding-top: clamp(var(--space-3), 1.6vw, var(--space-4)); cursor: default; transition: padding-left 520ms cubic-bezier(0.22, 0.61, 0.36, 1); } /* Editorial corner — two hairlines that draw inward from the top-left corner of the card on hover. Top hairline scales horizontally from the mark column rightward; left hairline scales vertically from the same point downward. Together they form a thin L-shaped frame that completes itself in 520ms, the same easing as the rest of the site's reveals. Stays monochrome to fit the no-red lock + editorial vocabulary. ====== */ .benefit-item::before, .benefit-item::after { content: ""; position: absolute; background: var(--color-ink); pointer-events: none; transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1) 0ms, opacity 200ms ease; opacity: 0; } /* Top hairline: spans the full card width, draws left-to-right. */ .benefit-item::before { top: 0; left: 0; right: 0; height: 1px; transform: scaleX(0); transform-origin: 0 0; } /* Left hairline: spans the card height, draws top-to-bottom (delayed by ~120ms so the L completes itself with deliberate cadence). */ .benefit-item::after { top: 0; left: 0; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: 0 0; transition-delay: 120ms; } .benefit-item:hover::before, .benefit-item:focus-within::before { transform: scaleX(1); opacity: 1; } .benefit-item:hover::after, .benefit-item:focus-within::after { transform: scaleY(1); opacity: 1; } /* Whole row nudges right when the corner appears so the title pulls slightly out of its anchored position, reinforcing the L-frame. ===== */ .benefit-item:hover, .benefit-item:focus-within { padding-left: clamp(var(--space-2), 1vw, 12px); } .benefit-item__mark { display: grid; place-items: center; width: 24px; height: 24px; color: rgba(10,10,10,0.42); padding-top: 2px; transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1), color 320ms ease; } .benefit-item__mark svg { width: 14px; height: 14px; } /* Mark rotates 45° + opacifies on hover, locking it visually to the corner that just completed (rhombus alignment, mirrors btn-ct--morph language used elsewhere on the site). =============================== */ .benefit-item:hover .benefit-item__mark, .benefit-item:focus-within .benefit-item__mark { transform: rotate(45deg) scale(1.15); color: var(--color-ink); } .benefit-item__title { margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: 300; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--color-ink); transition: letter-spacing 520ms cubic-bezier(0.22, 0.61, 0.36, 1); } .benefit-item:hover .benefit-item__title, .benefit-item:focus-within .benefit-item__title { letter-spacing: 0; } .benefit-item__body { margin: 0; font-family: var(--font-body); font-size: clamp(0.875rem, 1vw, 0.9375rem); font-weight: var(--fw-light); line-height: 1.6; color: rgba(10,10,10,0.76); max-width: 56ch; transition: color 320ms ease; } .benefit-item:hover .benefit-item__body, .benefit-item:focus-within .benefit-item__body { color: rgba(10,10,10,0.92); } @media (prefers-reduced-motion: reduce) { .benefit-item, .benefit-item::before, .benefit-item::after, .benefit-item__mark, .benefit-item__title, .benefit-item__body { transition: none !important; } } /* ============================================================= .sets-apart--light — approach-page variant of the compare matrix Section background: paper (white). Dimension labels + Industry Standard column in ink text on paper. The HoA column becomes a full DARK column (ink bg + white text) so it stands out dramatically against the light table, leadestate.com style. All default white colors inherited from the dark-version CSS are explicitly overridden here because some of them (.sets-apart__label-text, .sets-apart__label-num, etc.) have hardcoded white values that win over a parent-level override. ============================================================= */ .sets-apart--light { background: var(--color-paper); color: var(--color-ink); border-top: 1px solid rgba(10,10,10,0.08); padding-top: clamp(var(--space-10), 10vw, 10rem); padding-bottom: clamp(var(--space-10), 10vw, 10rem); margin-top: clamp(var(--space-7), 5vw, var(--space-8)); margin-bottom: clamp(var(--space-6), 4vw, var(--space-7)); } .sets-apart--light .eyebrow { color: rgba(10,10,10,0.6); } .sets-apart--light .sets-apart__kicker { color: rgba(10,10,10,0.62); } .sets-apart--light .sets-apart__heading { color: var(--color-ink); } .sets-apart--light .sets-apart__heading em { color: rgba(10,10,10,0.55); } /* Table — ink-tinted borders everywhere (default rules use white) */ .sets-apart--light .sets-apart__matrix { border-top-color: rgba(10,10,10,0.16); } .sets-apart--light .sets-apart__row { border-bottom-color: rgba(10,10,10,0.08); } .sets-apart--light .sets-apart__label { border-bottom-color: rgba(10,10,10,0.1); border-right-color: rgba(10,10,10,0.12); } .sets-apart--light .sets-apart__h--cat { border-right-color: rgba(10,10,10,0.12); } .sets-apart--light .sets-apart__h { border-bottom-color: rgba(10,10,10,0.12); border-right-color: rgba(10,10,10,0.12); color: var(--color-ink); } .sets-apart--light .sets-apart__cell { border-bottom-color: rgba(10,10,10,0.08); border-right-color: rgba(10,10,10,0.08); } /* Dimensions column (leftmost) — labels in INK (the user saw these as white) */ .sets-apart--light .sets-apart__h--cat span { color: rgba(10,10,10,0.5); } .sets-apart--light .sets-apart__label-num { color: rgba(10,10,10,0.4); } .sets-apart--light .sets-apart__label-text { color: var(--color-ink); } /* Industry Standard column — ink on paper */ .sets-apart--light .sets-apart__h-kicker { color: rgba(10,10,10,0.5); } .sets-apart--light .sets-apart__h-name { color: var(--color-ink); } .sets-apart--light .sets-apart__h-sub { color: rgba(10,10,10,0.6); } .sets-apart--light .sets-apart__cell:not(.sets-apart__cell--hoa) { color: rgba(10,10,10,0.7); } /* HoA column — DARK standout within the light section. Background fills top to bottom, white text, white mark, white wordmark. */ .sets-apart--light .sets-apart__h--hoa { background: var(--color-ink); color: var(--color-text-invert); border-left: 0; border-right: 0; border-bottom-color: rgba(255,255,255,0.12); } .sets-apart--light .sets-apart__h--hoa .sets-apart__h-kicker { color: rgba(255,255,255,0.62); } .sets-apart--light .sets-apart__h--hoa .sets-apart__h-name { color: var(--color-text-invert); } .sets-apart--light .sets-apart__h--hoa .sets-apart__h-sub { color: rgba(255,255,255,0.76); } .sets-apart--light .sets-apart__cell--hoa { background: var(--color-ink); color: var(--color-text-invert); border-left: 0; border-right: 0; border-bottom-color: rgba(255,255,255,0.08); } .sets-apart--light .sets-apart__cell--hoa span { color: var(--color-text-invert); } .sets-apart--light .sets-apart__cell--hoa .sets-apart__mark { color: #ffffff; } /* HoA wordmark — stays WHITE on the dark column (no filter flip). */ .sets-apart--light .sets-apart__h--hoa img { filter: none; } /* Hover: star glyph rotates + scales — same interaction language as homepage */ .sets-apart--light .sets-apart__mark { transition: transform 420ms cubic-bezier(0.22, 0.8, 0.24, 1); } .sets-apart--light .sets-apart__cell--hoa:hover .sets-apart__mark { transform: rotate(90deg) scale(1.1); } /* Last row: no bottom border on HoA cell to round out the dark column cleanly */ .sets-apart--light .sets-apart__row--last .sets-apart__cell--hoa { border-bottom: 0; } /* ============================================================ CASE STUDIES — listing page (case-studies.html) New v=149 system: 1. .cs-hero — fluid-glass slider (top 3 latest cases auto-rotate) 2. .cs-rows — row-based stack of all cases (image L, body M, cue R) The legacy .cs-list and .cs-row component is no longer rendered, but its CSS lives below for reference until any other page reuses it. ============================================================ */ /* ─── HERO · fluid-glass auto-rotating slider ─── */ .cs-hero { position: relative; background: #0a0a0a; color: var(--color-text-invert); min-height: 100vh; overflow: hidden; isolation: isolate; } .cs-hero__background { position: absolute; inset: 0; z-index: 0; } .cs-hero__bg-layer { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1100ms cubic-bezier(0.4, 0, 0.2, 1); } .cs-hero__bg-layer.is-active { opacity: 1; } .cs-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.18) 22%, rgba(10,10,10,0.32) 70%, rgba(10,10,10,0.62) 100%), rgba(10,10,10,0.22); pointer-events: none; } /* Slide stack — anchored bottom-LEFT, sitting above the persistent footer strip. Title is the hooky "breaking-news" headline (2 short bold lines, IvyPresto Display Thin) with a short description directly underneath. */ .cs-hero__container { position: absolute; inset: 0; z-index: 5; pointer-events: none; } .cs-hero__slide { position: absolute; left: clamp(var(--space-5), 5vw, var(--space-9)); right: auto; bottom: clamp(150px, 18vh, 220px); width: min(760px, 56vw); max-width: none; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.6vw, 22px); opacity: 0; transform: translateY(14px); transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1), transform 900ms cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .cs-hero__slide.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } .cs-hero__title-link { display: inline-block; text-decoration: none; color: inherit; position: relative; z-index: 2; cursor: pointer; } .cs-hero__title-link:hover .cs-hero__title { opacity: 0.92; } .cs-hero__title { font-family: var(--font-display); font-weight: var(--fw-thin, 200); font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: 1.04; letter-spacing: -0.02em; color: var(--color-text-invert); margin: 0; width: 100%; max-width: 760px; text-wrap: balance; transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1); } .cs-hero__title em { font-style: italic; font-weight: var(--fw-thin, 100); color: rgba(255,255,255,0.82); } .cs-hero__desc { font-family: var(--font-body); font-weight: var(--fw-light); font-size: clamp(0.9375rem, 1.15vw, 1.0625rem); line-height: 1.55; color: rgba(255,255,255,0.78); margin: 0; max-width: 52ch; } /* Footer strip — pinned to the bottom edge. Layout (top→bottom): full-page-width progress bar tag (left-aligned) ⟷ numbering (right-aligned) The prev/next arrows are taken OUT of the footer flow and floated to the right at the SAME baseline as the title (.cs-hero__nav absolute positioned), so title-bottom and arrow-bottom align perfectly on a single horizontal line. */ .cs-hero__footer { position: absolute; bottom: 0; left: 0; right: 0; z-index: 6; display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 16px); padding: 0 clamp(var(--space-5), 5vw, var(--space-9)) clamp(var(--space-5), 3vw, var(--space-7)); pointer-events: none; } .cs-hero__footer > * { pointer-events: auto; } .cs-hero__nav { position: absolute; right: clamp(var(--space-5), 5vw, var(--space-9)); bottom: clamp(150px, 18vh, 220px); display: inline-flex; gap: 10px; z-index: 8; } .cs-hero__btn { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,0.32); background: rgba(10,10,10,0.28); color: rgba(255,255,255,0.85); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 320ms var(--motion-ease), border-color 320ms var(--motion-ease), color 320ms var(--motion-ease); } .cs-hero__btn:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.72); color: #fff; } .cs-hero__btn svg { width: 16px; height: auto; } /* Progress bar — direct port of the fluid.glass /projects bar: 1px hairline track, 1px hairline fill, no CSS transition, the JS writes scaleX every animation frame so the line draws itself in lock-step with the slide timer. Track is 20% white, fill is 80% white, both pinned across the full width of the hero footer. */ .cs-hero__progress { position: relative; width: 100%; height: 1px; background: rgba(255,255,255,0.20); overflow: hidden; } /* The premium completion dial — small circular ring whose stroke draws clockwise from 12 o'clock as the bar fills. Lives in the strip row to the right of the slide counter. Pure SVG, the JS writes stroke-dashoffset on its inner circle so it stays in lock-step with the bar. */ .cs-hero__progress-glyph { display: inline-flex; align-items: center; justify-content: center; pointer-events: none; } .cs-hero__progress-glyph-fill { transition: stroke-dashoffset 80ms linear; } .cs-hero__strip-right { display: inline-flex; align-items: center; gap: clamp(10px, 1.2vw, 14px); flex: 0 0 auto; } .cs-hero__progress-bar { width: 100%; height: 100%; background: rgba(255,255,255,0.80); transform: scaleX(0); transform-origin: 0 50%; transition: none; will-change: transform; /* CSS keyframe driver — far more reliable than the previous rAF loop, which the preloader and the IntersectionObserver were occasionally starving on first paint. The keyframe runs forever and restarts cleanly on prev/next via a JS class flip. */ animation: cs-progress-fill var(--cs-prog-dur, 9000ms) linear infinite; } @keyframes cs-progress-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .cs-hero__progress-bar.is-restarting { animation: none; } @media (prefers-reduced-motion: reduce) { .cs-hero__progress-bar { animation: none; transform: scaleX(0); } } /* Premium completion dial, paired with the bar. Same keyframe duration, draws the stroke clockwise from 12 o'clock. */ .cs-hero__progress-glyph-fill { animation: cs-progress-glyph-fill var(--cs-prog-dur, 9000ms) linear infinite; } @keyframes cs-progress-glyph-fill { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } .cs-hero__progress-glyph-fill.is-restarting { animation: none; } @media (prefers-reduced-motion: reduce) { .cs-hero__progress-glyph-fill { animation: none; } } /* Footer phone + email: belt-and-braces against UA stylesheets that were stretching the tel: link across the whole column. The bug reported as "I cannot see the phone, even if I copy-paste it" was that the four number chunks were spreading across ~1300px because the anchor was ending up as wide as the column. Force inline width, keep word-spacing normal so the chunks read together, and lock the colour to white on every state. */ .altfooter__nav a[href^="tel:"], .altfooter__nav a[href^="mailto:"] { display: inline-block !important; width: max-content !important; max-width: 100% !important; text-align: left !important; word-spacing: normal !important; letter-spacing: normal !important; white-space: nowrap; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .altfooter__nav a[href^="tel:"]:hover, .altfooter__nav a[href^="mailto:"]:hover { color: rgba(255,255,255,0.82) !important; -webkit-text-fill-color: rgba(255,255,255,0.82) !important; } /* Strip — tag on the left (e.g. "Luxury real estate brokerage · Athens"), numbering on the right ("01 / 03"). Both share the same eyebrow scale. */ .cs-hero__strip { display: flex; align-items: baseline; justify-content: space-between; gap: clamp(var(--space-4), 3vw, var(--space-6)); font-family: var(--font-body); font-weight: var(--fw-light); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.78); } .cs-hero__tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; color: rgba(255,255,255,0.68); } .cs-hero__indicator { display: inline-flex; align-items: baseline; gap: 6px; flex: 0 0 auto; } .cs-hero__indicator-divider { color: rgba(255,255,255,0.38); margin: 0 4px; } .cs-hero__indicator-meta { margin-left: 12px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.55); font-size: 0.6875rem; letter-spacing: 0.16em; } @media (max-width: 760px) { .cs-hero__indicator-meta { display: none; } } /* Glass cursor-follow "View case" pill — pinned to the VIEWPORT (position: fixed) so it tracks the native cursor as the page scrolls inside the hero. JS lerps the pill toward screen-space clientX/clientY with a slow factor (0.10) for the fluid.glass feel. The pill fades on enter (.is-visible) and is suppressed (.is-suppressed) when the pointer hovers any interactive zone — arrows, top nav, footer strip, case-study links — so those clicks aren't intercepted. */ .cs-hero__cursor { position: fixed; top: 0; left: 0; z-index: 7; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: 1px solid rgba(255,255,255,0.55); background: rgba(10,10,10,0.30); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-light); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.94); text-decoration: none; pointer-events: none; opacity: 0; transform: translate3d(-9999px, -9999px, 0) translate(-50%, -50%) scale(0.92); transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1), border-color 320ms cubic-bezier(0.4, 0, 0.2, 1); will-change: transform, opacity; } .cs-hero__cursor.is-visible { opacity: 1; pointer-events: auto; } .cs-hero__cursor.is-suppressed { opacity: 0; pointer-events: none; transition: opacity 80ms cubic-bezier(0.4, 0, 0.2, 1); } .cs-hero__cursor svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; } /* On touch / no-hover devices the View pill is irrelevant. */ @media (hover: none) { .cs-hero__cursor { display: none; } } @media (max-width: 760px) { .cs-hero__slide { bottom: clamp(150px, 22vh, 220px); } .cs-hero__footer { gap: 8px; padding-bottom: clamp(var(--space-4), 4vw, var(--space-6)); } .cs-hero__strip { font-size: 0.6875rem; } .cs-hero__tag { letter-spacing: 0.14em; } } /* (Legacy bottom-right .cs-hero__nav rules removed — nav now lives inside .cs-hero__footer, see the footer-strip block above.) */ /* ─── ROW LIST · all case studies stacked, simple ─── */ .cs-rows { background: var(--color-paper, #fafafa); padding: clamp(80px, 9vw, 144px) clamp(var(--space-5), 5vw, var(--space-9)) clamp(96px, 11vw, 160px); } .cs-rows__intro { max-width: 1280px; margin: 0 auto clamp(var(--space-8), 8vw, var(--space-10)); text-align: left; } .cs-rows__intro .eyebrow { color: rgba(10,10,10,0.58); margin-bottom: var(--space-4); } .cs-rows__title { font-family: var(--font-display); font-weight: var(--fw-thin, 200); font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.04; letter-spacing: -0.02em; color: var(--color-ink); margin: 0; max-width: 22ch; } .cs-rows__title em { font-style: italic; font-weight: var(--fw-thin, 100); color: rgba(10,10,10,0.55); } .cs-rows__lede { font-family: var(--font-body); font-weight: 300; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.6; color: rgba(10,10,10,0.62); margin: clamp(var(--space-4), 2vw, var(--space-5)) 0 0; max-width: 58ch; } .cs-rows__meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: clamp(var(--space-3), 1.4vw, var(--space-4)); margin-top: clamp(var(--space-5), 3vw, var(--space-6)); font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(10,10,10,0.5); } .cs-rows__meta > span { display: inline-flex; align-items: baseline; gap: 6px; } .cs-rows__meta > span > span { font-family: var(--font-display); font-weight: 200; font-size: 0.875rem; letter-spacing: -0.005em; text-transform: none; color: var(--color-ink); } .cs-rows__meta-sep { display: inline-block; width: 18px; height: 1px; background: rgba(10,10,10,0.18); } .cs-rows__list { list-style: none; margin: 0; padding: 0; max-width: 1280px; margin: 0 auto; border-top: 1px solid rgba(10,10,10,0.10); } .cs-rows__item { border-bottom: 1px solid rgba(10,10,10,0.10); } .cs-rows__link { display: grid; grid-template-columns: minmax(220px, 32%) minmax(0, 1fr) auto; gap: clamp(var(--space-5), 4vw, var(--space-8)); align-items: center; padding: clamp(var(--space-5), 3vw, var(--space-6)) 0; text-decoration: none; color: inherit; transition: padding 360ms var(--motion-ease); } .cs-rows__link:hover { padding-left: clamp(var(--space-3), 1.6vw, var(--space-4)); } .cs-rows__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #111; border-radius: 0; } .cs-rows__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1); } .cs-rows__link:hover .cs-rows__media img { transform: scale(1.04); } .cs-rows__body { display: flex; flex-direction: column; gap: clamp(var(--space-2), 1.2vw, var(--space-3)); min-width: 0; } .cs-rows__row-meta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(10,10,10,0.48); } .cs-rows__sep { color: rgba(10,10,10,0.28); } .cs-rows__name { font-family: var(--font-display); font-weight: var(--fw-thin, 200); font-size: clamp(1.625rem, 2.8vw, 2.5rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--color-ink); margin: 0; } .cs-rows__name em { font-style: italic; font-weight: var(--fw-thin, 100); color: rgba(10,10,10,0.55); } .cs-rows__sub { font-family: var(--font-body); font-weight: 300; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.55; color: rgba(10,10,10,0.72); margin: 0; max-width: 56ch; } .cs-rows__services { font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--fw-light); letter-spacing: 0.06em; color: rgba(10,10,10,0.48); margin-top: clamp(var(--space-2), 1vw, var(--space-3)); } .cs-rows__cue { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(10,10,10,0.18); color: rgba(10,10,10,0.72); transition: background 360ms var(--motion-ease), border-color 360ms var(--motion-ease), color 360ms var(--motion-ease); flex-shrink: 0; } .cs-rows__cue svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; } .cs-rows__link:hover .cs-rows__cue { background: var(--color-ink); border-color: var(--color-ink); color: #fff; } @media (max-width: 760px) { .cs-rows__link { grid-template-columns: 1fr; gap: var(--space-4); } .cs-rows__cue { justify-self: flex-start; } } /* ─── Legacy .cs-page-hero override kept only so nothing else breaks if referenced elsewhere; the new hero is .cs-hero, not .about-hero. ─── */ .cs-page-hero .about-hero__bg { background-image: url("../assets/hero-bg.jpg"); } /* List section — tighter top entry, generous but not excessive airspace */ .cs-list { background: var(--color-paper, #fafafa); padding: clamp(64px, 8vw, 112px) 0 clamp(80px, 10vw, 144px); } /* WIDE intro variant — stretches to the corners, editorial 2-column layout */ .cs-list__intro--wide { max-width: none; margin: 0 0 clamp(72px, 10vw, 144px); padding: 0 clamp(var(--space-5), 6vw, var(--space-10)); text-align: left; align-items: stretch; display: block; } .cs-list__intro-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(var(--space-6), 6vw, var(--space-10)); align-items: end; padding-bottom: clamp(var(--space-6), 4vw, var(--space-8)); border-bottom: 1px solid rgba(10,10,10,0.1); } .cs-list__intro-head .eyebrow { margin-bottom: clamp(var(--space-4), 2vw, var(--space-5)); justify-content: flex-start; } .cs-list__heading { font-family: var(--font-display); font-weight: 200; font-size: clamp(2.25rem, 5.6vw, 5rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--color-ink); margin: 0; max-width: 12ch; } .cs-list__heading em { font-style: italic; font-weight: 100; } .cs-list__intro-side { display: flex; flex-direction: column; gap: clamp(var(--space-5), 3vw, var(--space-7)); justify-content: flex-end; padding-bottom: clamp(var(--space-2), 0.8vw, var(--space-3)); } .cs-list__lede { font-family: var(--font-body); font-weight: 300; font-size: clamp(0.9375rem, 1.15vw, 1.0625rem); line-height: 1.68; color: rgba(10,10,10,0.66); max-width: 52ch; margin: 0; } /* Summary meta strip — stays on the right column, left-aligned */ .cs-list__meta { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px, 1.8vw, 20px); margin: 0; padding: 0; border: 0; font-family: var(--font-body); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(10,10,10,0.5); } .cs-list__meta-item { display: inline-flex; align-items: baseline; gap: 6px; } .cs-list__meta-item > span { font-family: var(--font-display); font-weight: 200; font-style: italic; font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); letter-spacing: -0.01em; color: var(--color-ink); text-transform: none; line-height: 1; } .cs-list__meta-sep { display: inline-block; width: 5px; height: 5px; transform: rotate(45deg); border: 1px solid rgba(10,10,10,0.3); } @media (max-width: 860px) { .cs-list__intro-grid { grid-template-columns: 1fr; gap: var(--space-5); align-items: start; } .cs-list__heading { max-width: 18ch; } .cs-list__intro-side { justify-content: flex-start; padding-bottom: 0; } } .cs-list__meta-item { display: inline-flex; align-items: baseline; gap: 6px; } .cs-list__meta-item > span { font-family: var(--font-display); font-weight: 200; font-style: italic; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); letter-spacing: -0.01em; color: var(--color-ink); text-transform: none; line-height: 1; } .cs-list__meta-sep { display: inline-block; width: 5px; height: 5px; transform: rotate(45deg); border: 1px solid rgba(10,10,10,0.3); } @media (max-width: 520px) { .cs-list__meta { gap: 10px 14px; font-size: 0.625rem; } .cs-list__meta-item > span { font-size: 1rem; } } /* ROW — full-bleed horizontal editorial layout, alternating L/R */ .cs-row { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(var(--space-6), 5vw, var(--space-10)); align-items: center; width: 100%; padding: clamp(var(--space-8), 8vw, var(--space-12)) clamp(var(--space-5), 6vw, var(--space-10)); border-top: 1px solid rgba(10,10,10,0.08); position: relative; } .cs-row:last-of-type { border-bottom: 1px solid rgba(10,10,10,0.08); } /* Reverse: image on right, body on left */ .cs-row--reverse .cs-row__media { grid-column: 2; grid-row: 1; } .cs-row--reverse .cs-row__body { grid-column: 1; grid-row: 1; } /* MEDIA — big 4:3 image with badge + meta overlay */ .cs-row__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #111; text-decoration: none; color: inherit; transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); } .cs-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1), filter 800ms ease; will-change: transform; } .cs-row:hover .cs-row__media img { transform: scale(1.045); filter: brightness(1.02); } /* Bottom gradient scrim for meta legibility */ .cs-row__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44%; background: linear-gradient(180deg, transparent 0%, rgba(10,10,10,0.62) 100%); pointer-events: none; } .cs-row__badge { position: absolute; top: clamp(14px, 1.8vw, 22px); right: clamp(14px, 1.8vw, 22px); display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; background: rgba(255,255,255,0.94); color: var(--color-ink); font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; z-index: 2; } .cs-row__badge svg { width: 13px; height: 13px; } .cs-row__meta-overlay { position: absolute; left: clamp(16px, 2vw, 24px); right: clamp(16px, 2vw, 24px); bottom: clamp(16px, 2vw, 22px); display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); color: rgba(255,255,255,0.92); font-family: var(--font-body); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; z-index: 2; } .cs-row__meta-tag { font-style: italic; letter-spacing: 0.04em; text-transform: none; opacity: 0.9; } /* BODY — stacked editorial content */ .cs-row__body { display: flex; flex-direction: column; gap: clamp(var(--space-3), 1.6vw, var(--space-4)); position: relative; padding-right: clamp(0px, 2vw, var(--space-5)); } .cs-row--reverse .cs-row__body { padding-right: 0; padding-left: clamp(0px, 2vw, var(--space-5)); } .cs-row__index { font-family: var(--font-display); font-weight: 100; font-style: italic; font-size: clamp(1.125rem, 1.35vw, 1.375rem); color: rgba(10,10,10,0.3); letter-spacing: 0.02em; margin-bottom: -4px; } .cs-row__eyebrow { margin: 0; } .cs-row__title { font-family: var(--font-display); font-weight: 200; font-size: clamp(2.25rem, 4.4vw, 3.875rem); line-height: 1; letter-spacing: -0.015em; color: var(--color-ink); margin: var(--space-1) 0 0; } .cs-row__title em { font-style: italic; font-weight: 100; } .cs-row__sub { font-family: var(--font-body); font-weight: 300; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); color: rgba(10,10,10,0.62); margin: 0; } .cs-row__quote { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: clamp(1.125rem, 1.55vw, 1.4375rem); line-height: 1.38; color: var(--color-ink); margin: var(--space-2) 0 var(--space-1); max-width: 44ch; } /* STATS — 3 horizontal items with hairline dividers */ .cs-row__stats { list-style: none; margin: var(--space-3) 0 0; padding: var(--space-4) 0 var(--space-4); display: flex; gap: clamp(var(--space-4), 3vw, var(--space-8)); border-top: 1px solid rgba(10,10,10,0.1); border-bottom: 1px solid rgba(10,10,10,0.1); } .cs-row__stats li { display: flex; flex-direction: column; gap: 4px; } .cs-row__stat-num { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.625rem, 2.6vw, 2.25rem); line-height: 1; color: var(--color-ink); letter-spacing: -0.01em; } .cs-row__stat-label { font-family: var(--font-body); font-weight: 400; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(10,10,10,0.52); } /* SERVICES — tag row with rhombus separator */ .cs-row__services { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; } .cs-row__services li { font-family: var(--font-body); font-weight: 400; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(10,10,10,0.68); position: relative; padding-right: 18px; } .cs-row__services li::after { content: ""; position: absolute; right: 0; top: 50%; width: 5px; height: 5px; transform: translateY(-50%) rotate(45deg); border: 1px solid rgba(10,10,10,0.3); } .cs-row__services li:last-child { padding-right: 0; } .cs-row__services li:last-child::after { display: none; } .cs-row__cta { align-self: flex-start; margin-top: var(--space-3); } /* Hover — subtle lift on the whole body (title nudges, row border brightens) */ .cs-row:hover { background: rgba(10,10,10,0.015); } .cs-row:hover .cs-row__title { transform: translateX(-3px); } .cs-row__title { transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1); } /* MOBILE — stack, image on top always */ @media (max-width: 900px) { .cs-row, .cs-row--reverse { grid-template-columns: 1fr; gap: var(--space-6); padding: clamp(var(--space-6), 9vw, var(--space-9)) clamp(var(--space-4), 6vw, var(--space-6)); } .cs-row--reverse .cs-row__media, .cs-row__media { grid-column: 1; grid-row: 1; } .cs-row--reverse .cs-row__body, .cs-row__body { grid-column: 1; grid-row: 2; padding-left: 0; padding-right: 0; } .cs-row__stats { gap: var(--space-4); } .cs-row__stat-num { font-size: clamp(1.375rem, 6vw, 1.75rem); } } @media (max-width: 520px) { .cs-row__media { aspect-ratio: 3 / 2; } .cs-row__stats { flex-wrap: wrap; } .cs-row__stats li { min-width: 30%; } } /* ============================================================ CASE STUDIES — interstitial bands between rows 3 creative elements: method quote · aggregate metrics · booking CTA ============================================================ */ .cs-band { display: block; width: 100%; padding: clamp(80px, 9vw, 144px) clamp(var(--space-5), 6vw, var(--space-10)); border-top: 1px solid rgba(10,10,10,0.08); border-bottom: 1px solid rgba(10,10,10,0.08); } .cs-band__inner { max-width: 1280px; margin: 0 auto; } .cs-band__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(10,10,10,0.6); } .cs-band__eyebrow svg { width: 12px; height: 12px; color: var(--color-ink); } .cs-band__eyebrow--light { color: rgba(255,255,255,0.64); } .cs-band__eyebrow--light svg { color: rgba(255,255,255,0.9); } /* ─── BAND A · Method pull-quote ─── */ .cs-band--quote { background: var(--color-paper, #fafafa); text-align: center; } .cs-band--quote .cs-band__inner { max-width: 960px; display: flex; flex-direction: column; align-items: center; gap: clamp(var(--space-5), 3vw, var(--space-7)); } .cs-band__quote { font-family: var(--font-display); font-weight: 200; font-style: italic; font-size: clamp(1.5rem, 3.2vw, 2.625rem); line-height: 1.22; letter-spacing: -0.012em; color: var(--color-ink); margin: 0; max-width: 22ch; position: relative; } .cs-band__quote em { font-style: italic; font-weight: 300; background: linear-gradient(90deg, rgba(10,10,10,1) 0%, rgba(10,10,10,0.72) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .cs-band__mark { display: block; font-family: var(--font-display); font-weight: 100; font-style: italic; font-size: clamp(3rem, 6vw, 5rem); line-height: 0.6; color: rgba(10,10,10,0.18); margin-bottom: clamp(var(--space-2), 1vw, var(--space-3)); } .cs-band__attr { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 0.75rem; font-style: normal; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(10,10,10,0.56); } .cs-band__attr-rhombus { display: inline-block; width: 6px; height: 6px; transform: rotate(45deg); border: 1px solid rgba(10,10,10,0.4); } /* ─── BAND B · Aggregate metrics (dark full-bleed) ─── */ .cs-band--metrics { background: var(--color-ink, #0a0a0a); color: #fff; border-color: transparent; padding-top: clamp(96px, 10vw, 160px); padding-bottom: clamp(96px, 10vw, 160px); } .cs-band--metrics .cs-band__inner { max-width: 1360px; } .cs-band__metrics-head { display: flex; flex-direction: column; gap: clamp(var(--space-4), 2.2vw, var(--space-5)); margin-bottom: clamp(var(--space-8), 6vw, var(--space-10)); max-width: 680px; } .cs-band__metrics-title { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.875rem, 3.8vw, 3.25rem); line-height: 1.05; letter-spacing: -0.015em; color: #fff; margin: 0; } .cs-band__metrics-title em { font-style: italic; font-weight: 100; color: rgba(255,255,255,0.82); } .cs-band__metrics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } .cs-band__metrics li { display: flex; flex-direction: column; gap: 10px; padding: clamp(var(--space-5), 3vw, var(--space-7)) clamp(var(--space-4), 2.6vw, var(--space-6)); border-left: 1px solid rgba(255,255,255,0.12); } .cs-band__metrics li:first-child { padding-left: 0; border-left: 0; } .cs-band__metric-num { font-family: var(--font-display); font-weight: 100; font-style: italic; font-size: clamp(2.5rem, 5.4vw, 4.75rem); line-height: 0.95; letter-spacing: -0.02em; color: #fff; } .cs-band__metric-label { font-family: var(--font-body); font-weight: 500; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.88); } .cs-band__metric-note { font-family: var(--font-body); font-weight: 300; font-size: 0.8125rem; line-height: 1.5; color: rgba(255,255,255,0.52); font-style: italic; } @media (max-width: 860px) { .cs-band__metrics { grid-template-columns: repeat(2, 1fr); } .cs-band__metrics li { padding: var(--space-5); border-left: 0; border-top: 1px solid rgba(255,255,255,0.12); } .cs-band__metrics li:first-child, .cs-band__metrics li:nth-child(2) { border-top: 0; padding-top: 0; } } @media (max-width: 520px) { .cs-band__metrics { grid-template-columns: 1fr; } .cs-band__metrics li { border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--space-5); } .cs-band__metrics li:first-child { border-top: 0; padding-top: 0; } } /* ─── BAND C · Currently booking (light, centered, conversion CTA) ─── */ .cs-band--booking { background: var(--color-paper, #fafafa); text-align: center; } .cs-band--booking .cs-band__inner { max-width: 820px; display: flex; flex-direction: column; align-items: center; gap: clamp(var(--space-5), 2.6vw, var(--space-6)); } .cs-band--booking .cs-band__eyebrow { align-items: center; } .cs-band__pulse { position: relative; width: 8px; height: 8px; transform: rotate(45deg); background: #2a8a5a; border: 1px solid rgba(42,138,90,0.4); animation: cs-band-pulse 2400ms ease-in-out infinite; } @keyframes cs-band-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(42,138,90,0.35); } 50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(42,138,90,0); } } .cs-band__booking-title { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.75rem, 3.6vw, 2.875rem); line-height: 1.08; letter-spacing: -0.015em; color: var(--color-ink); margin: 0; max-width: 24ch; } .cs-band__booking-title em { font-style: italic; font-weight: 100; } .cs-band__booking-lede { font-family: var(--font-body); font-weight: 300; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.65; color: rgba(10,10,10,0.62); max-width: 54ch; margin: 0; } .cs-band__booking-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); } /* Capacity meter — small trust signal below CTAs */ .cs-band__booking-meta { display: inline-flex; align-items: center; gap: 14px; margin-top: clamp(var(--space-4), 2vw, var(--space-5)); padding-top: clamp(var(--space-5), 3vw, var(--space-6)); border-top: 1px solid rgba(10,10,10,0.1); width: 100%; max-width: 480px; justify-content: center; font-family: var(--font-body); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(10,10,10,0.54); } .cs-band__booking-meta em { font-family: var(--font-display); font-weight: 200; font-style: italic; font-size: 1rem; color: var(--color-ink); text-transform: none; letter-spacing: -0.01em; margin-right: 2px; } .cs-band__booking-bar { position: relative; display: inline-block; width: 96px; height: 3px; background: rgba(10,10,10,0.12); overflow: hidden; } .cs-band__booking-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--fill, 0%); background: var(--color-ink); } @media (max-width: 520px) { .cs-band__booking-ctas { flex-direction: column; width: 100%; } .cs-band__booking-ctas .btn-ct { width: 100%; justify-content: center; } } /* ============================================================ PROJECTS PAGE — hero bg · transform morph · 2-col grid · dump gallery ============================================================ */ /* ─── TRANSFORM · sticky day→night scroll morph (fluid.glass pattern) ─── Used in two modes: 1. Standalone section (default) — paper background, padded intro above 2. .proj-transform--hero — page entry, dark, full-bleed, no intro, nav floats over the frame, "Day / Night" caption at bottom-center */ .proj-transform { background: var(--color-paper, #fafafa); padding: clamp(64px, 8vw, 128px) 0 0; position: relative; } .proj-transform--hero { background: #0a0a0a; padding: 0; } /* Top-only shadow under the floating nav. Pinned to the viewport, present from first paint, never animates in. When the floating nav slides up on scroll-down, the shadow rides with it via the `body.nav-hidden` hook on the body, so the two read as a single piece of UI. */ .proj-transform--hero::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: clamp(180px, 22vh, 260px); background: linear-gradient(to bottom, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.72) 35%, rgba(10,10,10,0.42) 70%, rgba(10,10,10,0) 100%); z-index: 4; pointer-events: none; transform: translateY(0); opacity: 1; transition: transform 480ms cubic-bezier(0.22, 0.8, 0.24, 1), opacity 320ms var(--motion-ease); } body.nav-hidden .proj-transform--hero::before { transform: translateY(-110%); opacity: 0; } .proj-transform__intro { text-align: center; max-width: 720px; padding: 0 clamp(var(--space-4), 4vw, var(--space-6)); margin: 0 auto clamp(48px, 6vw, 96px); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } .proj-transform__intro .eyebrow { justify-content: center; } .proj-transform__heading { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.875rem, 4vw, 3.25rem); line-height: 1.06; letter-spacing: -0.015em; color: var(--color-ink); margin: 0; max-width: 16ch; } .proj-transform__heading em { font-style: italic; font-weight: 100; } .proj-transform__lede { font-family: var(--font-body); font-weight: 300; font-size: clamp(0.9375rem, 1.15vw, 1.0625rem); line-height: 1.65; color: rgba(10,10,10,0.6); max-width: 48ch; margin: 0; } /* Rail is a tall scroll container. Inside, the sticky frame pins to the viewport while the page scrolls, absorbing the scroll to drive the day→night crossfade. Total rail = 500vh → 100vh pin + 400vh scroll range (~4 scroll ticks). Fluid-glass feel: long opacity smoothstep, subtle scale + blur on the day layer as it dissolves, glass-tinted overlay during transition. Slow, deliberate, "unlock" rather than swap. */ .proj-transform__rail { position: relative; height: 500vh; } /* Hero mode — shorter pin so the user reaches the projects grid quickly */ .proj-transform--hero .proj-transform__rail { height: 220vh; } .proj-transform__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; } .proj-transform__frame { position: relative; width: min(94vw, 1280px); aspect-ratio: 16 / 9; background: #0a0a0a; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.06), 0 32px 80px rgba(0,0,0,0.08), 0 80px 160px rgba(0,0,0,0.08); } /* Hero mode — full-bleed frame fills the viewport, no shadow, no aspect cap */ .proj-transform__frame--bleed { width: 100%; height: 100vh; aspect-ratio: auto; box-shadow: none; } .proj-transform { padding-bottom: clamp(64px, 8vw, 128px); } .proj-transform--hero { padding-bottom: 0; } @media (max-width: 760px) { .proj-transform__rail { height: 260vh; } .proj-transform--hero .proj-transform__rail { height: 200vh; } } /* Both layers share exact bounds — pixel-identical overlay. object-fit: cover + object-position: center locks framing so even if day/night aspects differ slightly, they sit on top of each other cleanly. */ .proj-transform__layer { position: absolute; inset: 0; will-change: opacity, transform, filter; } /* Glass tint — held at zero opacity. The dissolve is driven entirely by the day/night layer crossfade so luminance flows smoothly from one state to the next, with no mid-transition darken→lighten ramp. The element stays in the DOM in case a future variant wants to enable it. */ .proj-transform__overlay { position: absolute; inset: 0; background: transparent; opacity: 0; pointer-events: none; z-index: 2; } /* Gradient fallbacks — only visible while the images load or if they fail */ .proj-transform__layer--day { opacity: 1; background: linear-gradient(135deg, #e8c896 0%, #c9a37a 55%, #9f7e5c 100%); } .proj-transform__layer--night { opacity: 0; background: linear-gradient(135deg, #1c2540 0%, #0f1629 55%, #050811 100%); /* Lighten blend during the crossfade so the bright pixels of the night image (lit windows, lamps, reflections) take precedence over the day pixels below as soon as opacity ramps up. The image itself is unmodified — no boosted brightness — so the lights end up at their TRUE source intensity from start to end without dimming during the transition. */ mix-blend-mode: lighten; } .proj-transform__layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; transform-origin: center center; } /* Framing calibration — tune these values if day and night were shot from slightly different camera positions. Each layer exposes --scale, --x, --y as CSS custom properties so you can nudge one image to align with the other without touching the HTML or JS. Default is no transform (images as-is). */ .proj-transform__layer--day img { --scale: 1; --x: 0%; --y: 0%; transform: scale(var(--scale)) translate(var(--x), var(--y)); } .proj-transform__layer--night img { --scale: 1; --x: 0%; --y: 0%; transform: scale(var(--scale)) translate(var(--x), var(--y)); } .proj-transform__layer.is-missing img { display: none; } /* Label strip — day/night indicator with hairline between */ .proj-transform__labels { position: absolute; top: clamp(18px, 2.4vw, 32px); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: clamp(10px, 1.4vw, 16px); padding: 8px 16px; background: rgba(0,0,0,0.28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 3; font-family: var(--font-body); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.2em; } /* Bottom-positioned variant — used in hero mode so the caption sits at the foot of the viewport, leaving the upper portion clean for the image. */ .proj-transform__labels--bottom { top: auto; bottom: clamp(28px, 4vw, 56px); padding: 10px 18px; background: rgba(0,0,0,0.22); letter-spacing: 0.28em; font-size: 0.75rem; } .proj-transform__label { color: rgba(255,255,255,0.92); transition: opacity 240ms ease; } .proj-transform__label-divider { display: inline-block; width: 16px; height: 1px; background: rgba(255,255,255,0.4); } @media (max-width: 760px) { .proj-transform__frame { aspect-ratio: 3 / 4; } } /* ─── PROJECTS GRID · stodio-style 2-col stretched ─── */ .projects-grid { background: var(--color-paper, #fafafa); padding: clamp(80px, 9vw, 144px) clamp(var(--space-5), 5vw, var(--space-9)); } .projects-grid__head { max-width: 1480px; margin: 0 auto clamp(56px, 7vw, 104px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(var(--space-5), 4vw, var(--space-8)); align-items: end; padding-bottom: clamp(var(--space-5), 3vw, var(--space-6)); border-bottom: 1px solid rgba(10,10,10,0.1); } .projects-grid__title { font-family: var(--font-display); font-weight: 200; font-size: clamp(2rem, 5.2vw, 4.5rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--color-ink); margin: 0; max-width: 13ch; } .projects-grid__title em { font-style: italic; font-weight: 100; } .projects-grid__lede { font-family: var(--font-body); font-weight: 300; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.65; color: rgba(10,10,10,0.62); max-width: 52ch; margin: 0; padding-bottom: clamp(var(--space-2), 1vw, var(--space-3)); } .projects-grid__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--space-6), 5vw, var(--space-10)) clamp(var(--space-5), 3.2vw, var(--space-7)); max-width: 1480px; margin: 0 auto; } /* Clean aligned 2-col grid (stodio pattern) — no stagger, 16:9 rows. */ .projects-grid__cell { display: flex; flex-direction: column; text-decoration: none; color: inherit; min-width: 0; /* Render-perf hint: skip painting off-screen cells to keep scrolling smooth on long pages with media-heavy tiles. The intrinsic-size hint reserves a stable scroll height so the page doesn't reflow as cells enter/leave the rendering set. */ content-visibility: auto; contain-intrinsic-size: 720px 540px; } /* Slower, softer reveal on the grid head + cells — the Day/Night hero pins for a long scroll, so when the user finally crosses into the grid we want the entry to feel like a slow exhale, not a hard pop. */ .projects-grid__head.reveal, .projects-grid__body > .projects-grid__cell.reveal { transform: translateY(28px); transition: opacity 1100ms var(--motion-ease), transform 1100ms var(--motion-ease); } .projects-grid__head.reveal { transition-delay: 80ms; } .projects-grid__body > .projects-grid__cell.reveal { transition-delay: calc(220ms + var(--col, 0) * 120ms); } .projects-grid__body > .projects-grid__cell:nth-child(2n+1) { --col: 0; } .projects-grid__body > .projects-grid__cell:nth-child(2n+2) { --col: 1; } @media (max-width: 760px) { .projects-grid__body > .projects-grid__cell.reveal { --col: 0; transition-delay: 0ms; } } @media (prefers-reduced-motion: reduce) { .projects-grid__body > .projects-grid__cell.reveal { transition-delay: 0ms; } } .projects-grid__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111; } .projects-grid__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1), filter 800ms ease; will-change: transform; } .projects-grid__cell:hover .projects-grid__media img { transform: scale(1.04); filter: brightness(1.02); } /* Cursor-follow "View more" glass badge — mirrors the home film-tile pattern. JS positions the badge at the cursor inside .projects-grid__media; CSS fades it in on :hover. Sharp rectangle, blurred glass, no border-radius. */ .projects-grid__media { cursor: pointer; } .projects-grid__cell:hover .projects-grid__media { cursor: none; } .projects-grid__cursor { position: absolute; left: 0; top: 0; padding: 10px 16px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.625rem; font-weight: var(--fw-light); letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255,255,255,0.96); background: rgba(255,255,255,0.14); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid rgba(255,255,255,0.42); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate3d(0, 0, 0); transition: opacity 700ms cubic-bezier(0.22, 0.8, 0.24, 1); will-change: transform, opacity; z-index: 3; } .projects-grid__cell:hover .projects-grid__cursor { opacity: 1; } .projects-grid__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 100%); pointer-events: none; } .projects-grid__meta-overlay { position: absolute; left: clamp(14px, 1.8vw, 22px); right: clamp(14px, 1.8vw, 22px); bottom: clamp(14px, 1.8vw, 18px); display: flex; justify-content: space-between; gap: var(--space-3); color: rgba(255,255,255,0.92); font-family: var(--font-body); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; z-index: 2; } .projects-grid__footer { display: flex; flex-direction: column; align-items: stretch; padding: clamp(var(--space-4), 2vw, var(--space-5)) 0 0; gap: 12px; border-top: 1px solid rgba(10,10,10,0); transition: border-color 400ms ease; } /* Top row: project name on the left, valuation block on the right. The valuation uses an uppercase Property Valuation label set above the price, both right-aligned, locked to the same top edge as the project name through alignment-baseline: text-top on the row. */ .projects-grid__row--head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); } .projects-grid__row--head .projects-grid__name { margin-top: 0; } .projects-grid__valuation { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; white-space: nowrap; /* Pull the valuation baseline up so the small label rides level with the top of the project name, not floating mid-row. */ margin-top: 4px; } .projects-grid__valuation-label { font-family: var(--font-body); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.20em; color: rgba(10,10,10,0.55); font-weight: 500; line-height: 1; } .projects-grid__valuation-amount { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.15rem, 1.5vw, 1.4rem); letter-spacing: -0.005em; color: var(--color-ink); line-height: 1; } .projects-grid__desc { font-family: var(--font-body); font-weight: 300; font-size: 0.875rem; line-height: 1.55; color: rgba(10,10,10,0.72); margin: 0; max-width: 64ch; } .projects-grid__row--foot { display: flex; justify-content: flex-end; margin-top: 2px; } .projects-grid__name { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.25rem, 1.8vw, 1.625rem); line-height: 1.2; color: var(--color-ink); margin: 0; letter-spacing: -0.01em; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); } .projects-grid__name em { font-style: italic; font-weight: 100; } .projects-grid__cell:hover .projects-grid__name { transform: translateX(-2px); } .projects-grid__services { font-family: var(--font-body); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(10,10,10,0.55); text-align: right; white-space: nowrap; } @media (max-width: 760px) { .projects-grid__head { grid-template-columns: 1fr; gap: var(--space-4); } .projects-grid__body { grid-template-columns: 1fr; gap: var(--space-7); } .projects-grid__services { text-align: left; white-space: normal; } } /* ─── DUMP · mixed photos + reels masonry ─── */ .projects-dump { background: var(--color-paper-soft, #f3f3f3); padding: clamp(80px, 9vw, 144px) clamp(var(--space-5), 5vw, var(--space-9)); } .projects-dump__head { max-width: 1480px; margin: 0 auto clamp(var(--space-5), 3vw, var(--space-6)); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; } .projects-dump__head .eyebrow { margin-bottom: var(--space-1); } /* Filter bar — elegant editorial toggles above the dump grid */ .projects-dump__filters { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 2.6vw, 36px); max-width: 1480px; margin: 0 auto clamp(var(--space-6), 4vw, var(--space-7)); padding: clamp(var(--space-4), 2.2vw, var(--space-5)) 0; border-top: 1px solid rgba(10,10,10,0.12); border-bottom: 1px solid rgba(10,10,10,0.12); } .projects-dump__filter { appearance: none; background: transparent; border: 0; padding: 2px 0 3px; font-family: var(--font-body); font-size: 0.75rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(10,10,10,0.52); cursor: pointer; position: relative; transition: color 320ms ease; display: inline-flex; align-items: baseline; gap: 8px; } .projects-dump__filter::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--color-ink); transform: scaleX(0); transform-origin: right center; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); } .projects-dump__filter:hover { color: var(--color-ink); } .projects-dump__filter:hover::after, .projects-dump__filter.is-active::after { transform: scaleX(1); transform-origin: left center; } .projects-dump__filter.is-active { color: var(--color-ink); } .projects-dump__filter-count { display: inline-block; font-family: var(--font-display); font-weight: 200; font-style: italic; font-size: 0.75rem; color: rgba(10,10,10,0.38); letter-spacing: -0.01em; text-transform: none; transition: color 320ms ease; } .projects-dump__filter.is-active .projects-dump__filter-count, .projects-dump__filter:hover .projects-dump__filter-count { color: rgba(10,10,10,0.68); } @media (max-width: 520px) { .projects-dump__filters { gap: 16px; font-size: 0.6875rem; } .projects-dump__filter { font-size: 0.6875rem; letter-spacing: 0.16em; } } /* Filter state: hide cells that don't match */ .projects-dump__cell.is-hidden { display: none; } .projects-dump__title { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.5rem, 2.8vw, 2.375rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--color-ink); margin: 0; } .projects-dump__title em { font-style: italic; font-weight: 100; } .projects-dump__lede { font-family: var(--font-body); font-weight: 300; font-size: clamp(0.875rem, 1.05vw, 1rem); line-height: 1.55; color: rgba(10,10,10,0.6); max-width: 56ch; margin: 0; } /* Justified-row gallery. Cells render at their native aspect ratio, then JS scales each row uniformly so the row fills the container width edge-to-edge. No gaps, no cropping, flush left/right edges. The JS layer (in projects.html) sets per-cell width/height in px. */ .projects-dump__grid { display: flex; flex-wrap: wrap; gap: clamp(6px, 0.5vw, 10px); max-width: 1480px; margin: 0 auto; } .projects-dump__cell { position: relative; overflow: hidden; background: #111; margin: 0; display: block; flex: 0 0 auto; cursor: pointer; /* JS sets explicit width / height in px per row pass. */ } .projects-dump__cell img, .projects-dump__cell .va__vp { width: 100%; height: 100%; display: block; } .projects-dump__cell img { object-fit: cover; transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1), filter 500ms ease; } .projects-dump__cell:hover img { transform: scale(1.04); filter: brightness(1.05); } /* Hidden cells must take no space at all so the justified rows reflow cleanly when the filter changes. */ .projects-dump__cell.is-hidden { display: none; } /* Legacy span modifiers — no-op in justified-row layout. */ .projects-dump__cell--wide, .projects-dump__cell--tall, .projects-dump__cell--big { /* no-op */ } .projects-dump__tag { position: absolute; top: 10px; left: 10px; padding: 4px 9px; background: rgba(10,10,10,0.68); color: #fff; font-family: var(--font-body); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.14em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 2; } .projects-dump__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(44px, 5vw, 62px); height: clamp(44px, 5vw, 62px); border-radius: 50%; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; z-index: 2; transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), background 240ms ease, border-color 240ms ease; } .projects-dump__cell:hover .projects-dump__play { transform: translate(-50%, -50%) scale(1.08); background: rgba(255,255,255,0.26); border-color: rgba(255,255,255,0.85); } .projects-dump__play svg { width: 16px; height: 16px; fill: #ffffff; margin-left: 3px; } /* Justified-row layout reflows automatically per viewport via JS; no per-breakpoint column count needed. */ /* ============================================================ CTA-CLOSE — reusable closing section across every page Light paper bg, massive bar-style action, supporting links. Every CTA lands on contact.html (universal lead form). ============================================================ */ .cta-close { position: relative; background: var(--color-paper, #fafafa); padding: clamp(88px, 11vw, 168px) clamp(var(--space-5), 5vw, var(--space-9)); border-top: 1px solid rgba(10,10,10,0.08); } /* (cta-close--dark variant retired — all pages now use the default white closing treatment per direction. To re-enable a dark closing band on a specific page, scope new rules with a body class.) */ .cta-close__inner { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(var(--space-5), 2.8vw, var(--space-7)); } .cta-close__eyebrow { position: relative; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(10,10,10,0.64); } .cta-close__pulse { display: inline-block; width: 7px; height: 7px; transform: rotate(45deg); background: #2a8a5a; box-shadow: 0 0 0 0 rgba(42,138,90,0.5); animation: cta-close-pulse 2400ms ease-in-out infinite; } @keyframes cta-close-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(42,138,90,0.45); } 50% { opacity: 0.65; box-shadow: 0 0 0 8px rgba(42,138,90,0); } } .cta-close__display { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.875rem, 4.6vw, 4rem); line-height: 1.06; letter-spacing: -0.02em; color: var(--color-ink); margin: 0; max-width: 28ch; text-wrap: balance; } /* Italic emphasis — solid color, no gradient (prevents disappearing glyphs on browsers that drop background-clip: text). */ .cta-close__display em { font-style: italic; font-weight: 100; color: var(--color-ink); } .cta-close__lede { font-family: var(--font-body); font-weight: 300; font-size: clamp(0.9375rem, 1.15vw, 1.0625rem); line-height: 1.65; color: rgba(10,10,10,0.6); max-width: 52ch; margin: 0; } /* The creative bar-style CTA — full-width hairline borders, fills with ink on hover, arrow translates diagonally. Refined: smaller padding, thinner borders, restrained type. */ .cta-close__action { display: flex; align-items: center; gap: 0; width: 100%; max-width: 780px; padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 32px); border-top: 1px solid rgba(10,10,10,0.18); border-bottom: 1px solid rgba(10,10,10,0.18); text-decoration: none; color: var(--color-ink); position: relative; overflow: hidden; margin-top: clamp(var(--space-3), 1.4vw, var(--space-4)); isolation: isolate; } /* Ink fill sweeps in from left on hover */ .cta-close__action::before { content: ""; position: absolute; inset: 0; background: var(--color-ink); transform: translateX(-101%); transition: transform 680ms cubic-bezier(0.76, 0, 0.24, 1); z-index: 0; } .cta-close__action:hover::before, .cta-close__action:focus-visible::before { transform: translateX(0); } .cta-close__action-label, .cta-close__action-rule, .cta-close__action-cue { position: relative; z-index: 1; transition: color 420ms ease, background 420ms ease; } .cta-close__action-label { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.125rem, 1.9vw, 1.625rem); line-height: 1; letter-spacing: -0.015em; color: var(--color-ink); flex-shrink: 0; } .cta-close__action-label em { font-style: italic; font-weight: 100; } .cta-close__action-rule { flex: 1; height: 1px; background: rgba(10,10,10,0.26); margin: 0 clamp(var(--space-4), 3vw, var(--space-7)); } .cta-close__action-cue { flex-shrink: 0; width: clamp(26px, 2.4vw, 34px); height: clamp(26px, 2.4vw, 34px); display: flex; align-items: center; justify-content: center; position: relative; } .cta-close__action-arrow { width: 100%; height: 100%; color: var(--color-ink); transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), color 420ms ease; } /* Keep the arrow strokes thin regardless of displayed size */ .cta-close__action-arrow path { vector-effect: non-scaling-stroke; stroke-width: 1; } .cta-close__action:hover .cta-close__action-label { color: var(--color-paper, #fafafa); } .cta-close__action:hover .cta-close__action-rule { background: rgba(255,255,255,0.38); } .cta-close__action:hover .cta-close__action-arrow { color: var(--color-paper, #fafafa); transform: translate(5px, -5px); } /* Supporting links row — small editorial trio with rhombus separators */ .cta-close__links { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: clamp(var(--space-2), 1vw, var(--space-3)); font-family: var(--font-body); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.16em; } .cta-close__links a { color: rgba(10,10,10,0.56); text-decoration: none; position: relative; padding: 3px 0; transition: color 320ms ease; } .cta-close__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-ink); transform: scaleX(0); transform-origin: right center; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); } .cta-close__links a:hover { color: var(--color-ink); } .cta-close__links a:hover::after { transform: scaleX(1); transform-origin: left center; } .cta-close__links-sep { display: inline-block; width: 5px; height: 5px; transform: rotate(45deg); border: 1px solid rgba(10,10,10,0.32); } /* Capacity meter — optional trust signal under the links */ .cta-close__meter { display: inline-flex; align-items: center; gap: 14px; margin-top: clamp(var(--space-4), 2.4vw, var(--space-5)); padding-top: clamp(var(--space-4), 2.6vw, var(--space-5)); border-top: 1px solid rgba(10,10,10,0.1); width: 100%; max-width: 480px; justify-content: center; font-family: var(--font-body); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(10,10,10,0.54); } .cta-close__meter em { font-family: var(--font-display); font-weight: 200; font-style: italic; font-size: 0.9375rem; color: var(--color-ink); text-transform: none; letter-spacing: -0.01em; margin-right: 3px; } /* FOMO line — italic accent that wraps under the bar at narrow widths */ .cta-close__meter-fomo { font-style: italic; font-weight: 300; text-transform: none; letter-spacing: 0.01em; color: rgba(10,10,10,0.78); margin-left: 4px; } .cta-close__meter-bar { position: relative; display: inline-block; width: 100px; height: 3px; background: rgba(10,10,10,0.12); overflow: hidden; } .cta-close__meter-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--fill, 0%); background: var(--color-ink); } @media (max-width: 640px) { .cta-close__action { padding: 22px 20px; gap: var(--space-3); } .cta-close__action-rule { display: none; } .cta-close__action-label { font-size: 1.375rem; } .cta-close__action-cue { width: 40px; height: 40px; } .cta-close__links { flex-direction: column; gap: 10px; } .cta-close__links-sep { display: none; } } /* ============================================================ JOURNAL PAGE — hero override · wide intro · filter bar · 3-col grid ============================================================ */ /* Hero bg — Dusit Suites Athens, rooftop pool at twilight (HOA-DSP1). Swapped in from the Dusit page hero; the previous hero-journal.jpg has moved over to be the Dusit page hero. */ .journal-page-hero .about-hero__bg { background-image: url("../assets/portfolio/dusit-suites-athens/gallery/HOA-DSP1.jpg"); } /* Journal hero title — force exactly 2 lines (not 3) at all viewports. Each .hero-line wraps as one unbroken line. Font-size scales down on narrow viewports so the text never overflows horizontally. ───────── */ .journal-page-hero .about-hero__display .hero-line { white-space: nowrap; } .journal-page-hero .about-hero__display { font-size: clamp(1.75rem, 4.2vw, 4.5rem); } /* Journal list wrapper — generous bottom padding for breathing before CTA */ .journal-list { background: var(--color-paper, #fafafa); padding: clamp(64px, 8vw, 112px) clamp(var(--space-5), 5vw, var(--space-9)) clamp(112px, 14vw, 192px); } /* Wide intro — heading LEFT, lede+meta RIGHT (case-studies pattern) */ .journal-list__intro { max-width: 1480px; margin: 0 auto clamp(var(--space-7), 5vw, var(--space-9)); } .journal-list__intro-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(var(--space-6), 6vw, var(--space-10)); align-items: end; padding-bottom: clamp(var(--space-6), 4vw, var(--space-8)); border-bottom: 1px solid rgba(10,10,10,0.1); } .journal-list__intro-head .eyebrow { margin-bottom: clamp(var(--space-4), 2vw, var(--space-5)); justify-content: flex-start; } .journal-list__heading { font-family: var(--font-display); font-weight: 200; font-size: clamp(2.25rem, 5.6vw, 5rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--color-ink); margin: 0; max-width: 12ch; } .journal-list__heading em { font-style: italic; font-weight: 100; } .journal-list__intro-side { display: flex; flex-direction: column; gap: clamp(var(--space-5), 3vw, var(--space-7)); justify-content: flex-end; padding-bottom: clamp(var(--space-2), 0.8vw, var(--space-3)); } .journal-list__lede { font-family: var(--font-body); font-weight: 300; font-size: clamp(0.9375rem, 1.15vw, 1.0625rem); line-height: 1.68; color: rgba(10,10,10,0.66); max-width: 52ch; margin: 0; } .journal-list__meta { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px, 1.8vw, 20px); margin: 0; font-family: var(--font-body); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(10,10,10,0.5); } .journal-list__meta span:not(.journal-list__meta-sep) { display: inline-flex; align-items: baseline; gap: 6px; } .journal-list__meta em { font-family: var(--font-display); font-weight: 200; font-style: italic; font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); letter-spacing: -0.01em; color: var(--color-ink); text-transform: none; line-height: 1; } .journal-list__meta-sep { display: inline-block; width: 5px; height: 5px; transform: rotate(45deg); border: 1px solid rgba(10,10,10,0.3); } @media (max-width: 860px) { .journal-list__intro-grid { grid-template-columns: 1fr; gap: var(--space-5); align-items: start; } .journal-list__heading { max-width: 18ch; } .journal-list__intro-side { justify-content: flex-start; padding-bottom: 0; } } /* Filter bar — same editorial toggle pattern as dump */ .journal-list__filters { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 2.6vw, 36px); max-width: 1480px; margin: 0 auto clamp(var(--space-7), 5vw, var(--space-9)); padding: clamp(var(--space-4), 2.2vw, var(--space-5)) 0; border-top: 1px solid rgba(10,10,10,0.12); border-bottom: 1px solid rgba(10,10,10,0.12); } .journal-list__filter { appearance: none; background: transparent; border: 0; padding: 2px 0 3px; font-family: var(--font-body); font-size: 0.75rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(10,10,10,0.52); cursor: pointer; position: relative; transition: color 320ms ease; display: inline-flex; align-items: baseline; gap: 8px; } .journal-list__filter::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--color-ink); transform: scaleX(0); transform-origin: right center; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); } .journal-list__filter:hover { color: var(--color-ink); } .journal-list__filter:hover::after, .journal-list__filter.is-active::after { transform: scaleX(1); transform-origin: left center; } .journal-list__filter.is-active { color: var(--color-ink); } .journal-list__filter-count { display: inline-block; font-family: var(--font-display); font-weight: 200; font-style: italic; font-size: 0.75rem; color: rgba(10,10,10,0.38); letter-spacing: -0.01em; text-transform: none; transition: color 320ms ease; } .journal-list__filter.is-active .journal-list__filter-count, .journal-list__filter:hover .journal-list__filter-count { color: rgba(10,10,10,0.68); } @media (max-width: 520px) { .journal-list__filters { gap: 16px; } .journal-list__filter { font-size: 0.6875rem; letter-spacing: 0.16em; } } /* Grid — 9 cards, 3-col desktop, 2-col tablet, 1-col mobile */ .journal-list__body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(var(--space-6), 4vw, var(--space-9)) clamp(var(--space-5), 3vw, var(--space-7)); max-width: 1480px; margin: 0 auto; } @media (max-width: 900px) { .journal-list__body { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .journal-list__body { grid-template-columns: 1fr; gap: var(--space-7); } } /* Individual card — simple per-column stagger, no forced GPU layers. Browser auto-composites opacity + transform; we don't hint. */ .journal-card { display: block; position: relative; outline: 1px solid transparent; outline-offset: clamp(10px, 1.2vw, 14px); transition: outline-color 420ms cubic-bezier(0.22, 1, 0.36, 1); } /* Whole-card hover — subtle hairline frame distinguishes the card from siblings. Signals "you can click anywhere" without shouting. */ .journal-card:hover { outline-color: rgba(10,10,10,0.16); } .journal-list__body > .journal-card.reveal { transition-delay: calc(var(--col, 0) * 60ms); } .journal-list__body > .journal-card:nth-child(3n+1) { --col: 0; } .journal-list__body > .journal-card:nth-child(3n+2) { --col: 1; } .journal-list__body > .journal-card:nth-child(3n+3) { --col: 2; } @media (max-width: 900px) { .journal-list__body > .journal-card:nth-child(2n+1) { --col: 0; } .journal-list__body > .journal-card:nth-child(2n+2) { --col: 1; } .journal-list__body > .journal-card:nth-child(3n+3) { --col: 1; } } @media (max-width: 600px) { .journal-list__body > .journal-card.reveal { --col: 0; transition-delay: 0ms; } } @media (prefers-reduced-motion: reduce) { .journal-list__body > .journal-card.reveal { transition-delay: 0ms; } } /* Card is NOT one big link anymore — media / title / more are 3 separate s. This lets us keep card-wide hover subtle while the "Read dispatch" button has its own prominent hover. */ .journal-card__media { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111; margin-bottom: clamp(var(--space-4), 2.2vw, var(--space-5)); text-decoration: none; color: inherit; } .journal-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1), filter 800ms ease; will-change: transform; } /* Media hover: subtle image lift */ .journal-card__media:hover img, .journal-card:hover .journal-card__media img { transform: scale(1.025); filter: brightness(1.02); } .journal-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.14) 0%, transparent 28%, transparent 68%, rgba(0,0,0,0.38) 100%); pointer-events: none; } /* Ghost index number — top-left of media, large italic, low opacity */ .journal-card__num { position: absolute; top: clamp(12px, 1.6vw, 18px); left: clamp(14px, 1.8vw, 22px); font-family: var(--font-display); font-weight: 100; font-style: italic; font-size: clamp(1rem, 1.4vw, 1.25rem); letter-spacing: 0.02em; color: rgba(255,255,255,0.68); z-index: 2; text-shadow: 0 1px 6px rgba(0,0,0,0.22); } /* Category chip — top-right of media, glass pill */ .journal-card__cat { position: absolute; top: clamp(12px, 1.6vw, 18px); right: clamp(14px, 1.8vw, 22px); padding: 4px 9px; background: rgba(255,255,255,0.92); color: var(--color-ink); font-family: var(--font-body); font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 2; } .journal-card__body { display: flex; flex-direction: column; gap: clamp(var(--space-2), 1.2vw, var(--space-3)); } /* Date + reading time — hairline divider treatment */ .journal-card__meta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(10,10,10,0.5); } .journal-card__meta time, .journal-card__meta span { white-space: nowrap; } .journal-card__meta-sep { display: inline-block; width: 4px; height: 4px; transform: rotate(45deg); border: 1px solid rgba(10,10,10,0.3); flex-shrink: 0; } /* Title — editorial IvyPresto with italic emphasis. The inside inherits typography; the h3 is just a spacing wrapper. */ .journal-card__title { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.25rem, 1.7vw, 1.625rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--color-ink); margin: 4px 0 0; } .journal-card__title em { font-style: italic; font-weight: 100; } .journal-card__title-link { color: inherit; text-decoration: none; display: inline-block; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), color 240ms ease; } .journal-card__title-link:hover { transform: translateX(-2px); color: rgba(10,10,10,0.82); } /* Excerpt — 2-line body */ .journal-card__excerpt { font-family: var(--font-body); font-weight: 300; font-size: 0.9375rem; line-height: 1.55; color: rgba(10,10,10,0.6); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* "Read the dispatch" — a real outlined button. Sharp corners, 1px hairline border, ink-fill sweep on direct hover. Card-wide hover darkens the border subtly. Gotham Light (300) per brand direction. */ .journal-card__more { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(var(--space-3), 1.6vw, var(--space-4)); padding: 10px 16px; font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--fw-light); text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink); position: relative; width: fit-content; text-decoration: none; border: 1px solid rgba(10,10,10,0.26); background: transparent; overflow: hidden; isolation: isolate; transition: color 320ms ease, border-color 320ms ease; } /* Sharp thin NE arrow */ .journal-card__more svg { width: 12px; height: 12px; color: currentColor; transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1); stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; flex-shrink: 0; } /* Ink fill sweep — covers the button from left to right on direct hover */ .journal-card__more::before { content: ""; position: absolute; inset: 0; background: var(--color-ink); transform: translateX(-101%); transition: transform 560ms cubic-bezier(0.76, 0, 0.24, 1); z-index: -1; } /* Card-wide hover → subtle: border darkens, arrow barely nudges */ .journal-card:hover .journal-card__more { border-color: rgba(10,10,10,0.52); } .journal-card:hover .journal-card__more svg { transform: translate(2px, -2px); } /* Direct button hover → full invert: ink fills, text/arrow flip to paper color, arrow translates more. Clear CTA moment. */ .journal-card__more:hover, .journal-card__more:focus-visible { color: var(--color-paper, #fafafa); border-color: var(--color-ink); outline: none; } .journal-card__more:hover::before, .journal-card__more:focus-visible::before { transform: translateX(0); } .journal-card__more:hover svg, .journal-card__more:focus-visible svg { transform: translate(5px, -5px); } /* Filter state: hidden cards don't take up grid space */ .journal-card.is-hidden { display: none; } /* ============================================================ CONTACT PAGE — hero + 2-col (companies image · form placeholder) ============================================================ */ /* Hero bg — Villa Bond exterior (HOA-VBP51) */ .contact-page-hero .about-hero__bg { background-image: url("../assets/portfolio/hero-contact.jpg"); } /* About page hero — Villa Selene exterior (HOA-VSP1) */ .about-page-hero .about-hero__bg { background-image: url("../assets/portfolio/hero-about.jpg"); } /* Approach page hero — Villa Rafaella exterior (HOA-VRP48) */ .approach-hero .about-hero__bg { background-image: url("../assets/portfolio/hero-approach.jpg"); } /* Full-screen parity lock for the four inner-page heroes. The contact page is the reference: every page now uses the EXACT same fixed panel height (not `min-height`, which let the panel grow when the inner content stack was taller than the viewport, so Approach was rendering taller than About / Journal / Contact and the chips were landing in different places). With `height: 100vh` + `overflow: hidden` the four panels are pixel-identical, the bg image renders at the same dimensions, and the bottom-left location chip + bottom-right time chip land at the same coordinate on every page. ================ */ .about-page-hero .about-hero__panel, .approach-hero .about-hero__panel, .journal-page-hero .about-hero__panel, .contact-page-hero .about-hero__panel { height: 100vh; min-height: 100vh; max-height: 100vh; padding: clamp(var(--space-5), 3vw, var(--space-7)) clamp(var(--space-5), 4vw, var(--space-8)); overflow: hidden; } /* Inner stack is allowed to shrink to fit so a long title doesn't push the panel taller than the viewport. ============================= */ .about-page-hero .about-hero__center, .approach-hero .about-hero__center, .journal-page-hero .about-hero__center, .contact-page-hero .about-hero__center { padding-block: clamp(var(--space-7), 8vh, var(--space-10)); } .contact-form-section { background: var(--color-paper, #fafafa); padding: clamp(48px, 6vw, 88px) clamp(var(--space-5), 5vw, var(--space-9)) clamp(56px, 7vw, 104px); } .contact-form-grid { max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--space-7), 6vw, var(--space-12)); align-items: stretch; } /* Solo variant — image column removed, form runs full-width inside a tighter measure so the long-form brief still reads comfortably. */ .contact-form-grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 980px; } /* ── LEFT: companies image + compact list ── */ .contact-form-side { display: flex; flex-direction: column; gap: clamp(var(--space-6), 4vw, var(--space-8)); position: sticky; top: clamp(32px, 4vw, 56px); } .contact-form-image { position: relative; /* Tall portrait — fills the form column width and runs longer than a standard 9:16, so the still reads as a true vertical photograph instead of a boxy crop next to the form. */ aspect-ratio: 3 / 5; width: 100%; height: auto; margin: 0; overflow: hidden; background: #111; } .contact-form-image img { width: 100%; height: 100%; object-fit: cover; } .contact-form-side-body { display: flex; flex-direction: column; gap: clamp(var(--space-3), 1.6vw, var(--space-4)); } .contact-form-side-title { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--color-ink); margin: 0; max-width: 18ch; } .contact-form-side-title em { font-style: italic; font-weight: 100; } .contact-form-side-lede { font-family: var(--font-body); font-weight: 300; font-size: clamp(0.9375rem, 1.05vw, 1rem); line-height: 1.6; color: rgba(10,10,10,0.62); max-width: 50ch; margin: 0; } .contact-form-side-list { list-style: none; padding: 0; margin: clamp(var(--space-3), 1.4vw, var(--space-4)) 0 0; display: flex; flex-direction: column; border-top: 1px solid rgba(10,10,10,0.1); } .contact-form-side-list li { display: flex; flex-direction: column; gap: 3px; padding: clamp(var(--space-3), 1.4vw, var(--space-4)) 0; border-bottom: 1px solid rgba(10,10,10,0.08); } .contact-form-side-name { font-family: var(--font-display); font-weight: 200; font-style: italic; font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); letter-spacing: -0.01em; color: var(--color-ink); } .contact-form-side-note { font-family: var(--font-body); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(10,10,10,0.5); } /* ── RIGHT: form panel ── */ .contact-form-panel { display: flex; flex-direction: column; gap: clamp(var(--space-4), 2vw, var(--space-5)); } .contact-form-title { font-family: var(--font-display); font-weight: 200; font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.04; letter-spacing: -0.02em; color: var(--color-ink); margin: 0; max-width: 18ch; } .contact-form-title em { font-style: italic; font-weight: 100; } .contact-form-lede { font-family: var(--font-body); font-weight: 300; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.6; color: rgba(10,10,10,0.6); max-width: 52ch; margin: 0; } .contact-form { display: flex; flex-direction: column; gap: clamp(var(--space-4), 2vw, var(--space-5)); margin-top: clamp(var(--space-3), 1.6vw, var(--space-4)); } /* Tally form slot — modal-launch button + supporting hint */ .contact-form__tally { margin-top: clamp(var(--space-3), 1.6vw, var(--space-4)); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(var(--space-3), 1.4vw, var(--space-4)); } .contact-form__tally-btn { font-family: var(--font-body); cursor: pointer; font-size: inherit; line-height: inherit; } .contact-form__tally-placeholder { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: clamp(var(--space-5), 3vw, var(--space-7)); border: 1px dashed rgba(10,10,10,0.22); background: rgba(10,10,10,0.015); min-height: inherit; } .contact-form__tally-dot { display: inline-block; width: 7px; height: 7px; transform: rotate(45deg); background: rgba(10,10,10,0.4); margin-bottom: 6px; } .contact-form__tally-label { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; color: rgba(10,10,10,0.6); } .contact-form__tally-hint { font-family: var(--font-body); font-weight: 300; font-size: 0.8125rem; line-height: 1.5; color: rgba(10,10,10,0.5); max-width: 40ch; } .contact-form__tally-hint code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.75rem; background: rgba(10,10,10,0.06); padding: 2px 6px; color: rgba(10,10,10,0.7); } /* When a real iframe is embedded, hide the placeholder */ .contact-form__tally:has(iframe) .contact-form__tally-placeholder { display: none; } .contact-form__tally iframe { width: 100% !important; min-height: 520px; border: 0; } /* ============================================================ CONTACT NOT-FOR — soft qualification standards below the form ============================================================ */ .contact-not-for { background: var(--color-paper, #fafafa); padding: clamp(80px, 10vw, 144px) clamp(var(--space-5), 5vw, var(--space-9)) clamp(112px, 12vw, 176px); border-top: 1px solid rgba(10,10,10,0.08); } /* ============================================================ FAQ PAGE — 3-category accordion body (/faq) ============================================================ */ .faq-page { background: var(--color-paper, #fafafa); padding: clamp(80px, 10vw, 128px) clamp(var(--space-5), 5vw, var(--space-9)) clamp(96px, 11vw, 160px); border-top: 1px solid rgba(10,10,10,0.08); } .faq-page__inner { max-width: 1000px; margin: 0 auto; } .faq-page__cat { margin-bottom: clamp(var(--space-8), 9vw, var(--space-10)); } .faq-page__cat:last-child { margin-bottom: 0; } .faq-page__cat-head { display: flex; flex-direction: column; gap: clamp(var(--space-2), 1.2vw, var(--space-3)); margin-bottom: clamp(var(--space-5), 3vw, var(--space-6)); padding-bottom: clamp(var(--space-4), 2.4vw, var(--space-5)); border-bottom: 1px solid rgba(10,10,10,0.12); } .faq-page__cat-title { font-family: var(--font-display); font-weight: var(--fw-thin, 200); font-size: clamp(1.625rem, 3vw, 2.25rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--color-ink, #0a0a0a); margin: 0; max-width: 36ch; } .faq-page__cat-sub { font-family: var(--font-body); font-weight: 300; font-size: clamp(0.9375rem, 1.1vw, 1rem); line-height: 1.55; color: rgba(10,10,10,0.58); margin: 0; max-width: 56ch; } .faq-page__list { display: flex; flex-direction: column; gap: clamp(8px, 0.9vw, 12px); } .contact-not-for__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(var(--space-7), 6vw, var(--space-12)); align-items: start; } .contact-not-for__head { display: flex; flex-direction: column; gap: clamp(var(--space-3), 1.6vw, var(--space-4)); position: sticky; top: clamp(32px, 4vw, 64px); } .contact-not-for__title { font-family: var(--font-display); font-weight: 200; font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.04; letter-spacing: -0.02em; color: var(--color-ink); margin: 0; max-width: 14ch; } .contact-not-for__title em { font-style: italic; font-weight: 100; } .contact-not-for__lede { font-family: var(--font-body); font-weight: 300; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.6; color: rgba(10,10,10,0.6); max-width: 48ch; margin: 0; } .contact-not-for__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .contact-not-for__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(var(--space-4), 2.2vw, var(--space-5)); padding: clamp(var(--space-4), 2.4vw, var(--space-5)) 0; border-bottom: 1px solid rgba(10,10,10,0.08); } /* No row-level hover background or padding shift — the only hover affordance is the × mark itself lifting up. Keeps first/last rows clean (no clipped shadow visible) and the editorial look unbroken. */ .contact-not-for__item:first-child { padding-top: 0; } .contact-not-for__item:last-child { border-bottom: 0; padding-bottom: 0; } /* Soft × mark — thin italic; on row hover, very gentle scale + deeper ink, no rotation */ .contact-not-for__mark { font-family: var(--font-display); font-weight: 100; font-style: italic; font-size: 1.75rem; line-height: 1; color: rgba(10,10,10,0.28); padding-top: 4px; display: inline-block; transform-origin: center center; transition: color 480ms cubic-bezier(0.4, 0, 0.2, 1), transform 520ms cubic-bezier(0.4, 0, 0.2, 1); } .contact-not-for__item:hover .contact-not-for__mark, .contact-not-for__item:focus-within .contact-not-for__mark { color: var(--color-ink); transform: translateY(-3px); } .contact-not-for__item-body { display: flex; flex-direction: column; gap: 8px; } .contact-not-for__item-title { font-family: var(--font-body); font-weight: 300; font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.5; color: rgba(10,10,10,0.82); letter-spacing: 0; transition: color 360ms cubic-bezier(0.4, 0, 0.2, 1); } .contact-not-for__item:hover .contact-not-for__item-title, .contact-not-for__item:focus-within .contact-not-for__item-title { color: var(--color-ink); } .contact-not-for__item-note { font-family: var(--font-body); font-weight: 300; font-size: clamp(0.875rem, 1vw, 0.9375rem); line-height: 1.58; color: rgba(10,10,10,0.58); max-width: 64ch; } @media (max-width: 760px) { .contact-not-for__inner { grid-template-columns: 1fr; gap: clamp(var(--space-6), 6vw, var(--space-8)); } .contact-not-for__head { position: static; } } .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-4), 2.2vw, var(--space-5)); } .contact-form__field { display: flex; flex-direction: column; gap: 8px; } .contact-form__field label { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(10,10,10,0.6); } .contact-form__hint { text-transform: none; letter-spacing: 0; color: rgba(10,10,10,0.38); font-weight: 300; font-style: italic; } .contact-form input, .contact-form select, .contact-form textarea { appearance: none; background: transparent; border: 0; border-bottom: 1px solid rgba(10,10,10,0.22); padding: 10px 0; font-family: var(--font-body); font-weight: 400; font-size: 0.9375rem; line-height: 1.4; color: var(--color-ink); transition: border-color 320ms ease; border-radius: 0; } .contact-form textarea { resize: vertical; min-height: 120px; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-bottom-color: var(--color-ink); } /* Keyboard-only focus ring: the border-bottom color change alone is too subtle for sighted keyboard users. Show a 2px ink ring on `:focus-visible` only, so mouse users keep the clean look. */ .contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(10,10,10,0.34); font-weight: 300; } .contact-form select { cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 4px center; padding-right: 24px; } .contact-form__note { display: flex; align-items: flex-start; gap: 10px; padding: clamp(var(--space-3), 1.6vw, var(--space-4)); background: rgba(10,10,10,0.04); border-left: 2px solid rgba(10,10,10,0.4); font-family: var(--font-body); font-weight: 300; font-size: 0.8125rem; line-height: 1.55; color: rgba(10,10,10,0.7); } .contact-form__note a { color: var(--color-ink); text-decoration: underline; text-decoration-color: rgba(10,10,10,0.4); text-underline-offset: 3px; } .contact-form__note-dot { display: inline-block; width: 7px; height: 7px; transform: rotate(45deg); background: rgba(10,10,10,0.5); margin-top: 5px; flex-shrink: 0; } /* Submit button — same bar-style as cta-close__action (for visual parity) */ .contact-form__submit { display: flex; align-items: center; gap: 0; width: 100%; max-width: 520px; padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 28px); border: 1px solid rgba(10,10,10,0.2); background: transparent; text-decoration: none; color: var(--color-ink); position: relative; overflow: hidden; isolation: isolate; font-family: var(--font-body); cursor: pointer; margin-top: clamp(var(--space-2), 1vw, var(--space-3)); } .contact-form__submit[disabled] { cursor: not-allowed; opacity: 0.52; } .contact-form__submit::before { content: ""; position: absolute; inset: 0; background: var(--color-ink); transform: translateX(-101%); transition: transform 620ms cubic-bezier(0.76, 0, 0.24, 1); z-index: -1; } .contact-form__submit:not([disabled]):hover::before { transform: translateX(0); } .contact-form__submit-label { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.125rem, 1.8vw, 1.5rem); line-height: 1; letter-spacing: -0.015em; flex-shrink: 0; transition: color 420ms ease; } .contact-form__submit-rule { flex: 1; height: 1px; background: rgba(10,10,10,0.26); margin: 0 clamp(var(--space-4), 3vw, var(--space-6)); transition: background 420ms ease; } .contact-form__submit-cue { flex-shrink: 0; width: clamp(26px, 2.4vw, 32px); height: clamp(26px, 2.4vw, 32px); display: flex; align-items: center; justify-content: center; } .contact-form__submit-cue svg { width: 100%; height: 100%; color: var(--color-ink); transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), color 420ms ease; } .contact-form__submit:not([disabled]):hover .contact-form__submit-label { color: var(--color-paper); } .contact-form__submit:not([disabled]):hover .contact-form__submit-rule { background: rgba(255,255,255,0.38); } .contact-form__submit:not([disabled]):hover .contact-form__submit-cue svg { color: var(--color-paper); transform: translate(5px, -5px); } /* Direct contact row — email, WhatsApp, phone */ .contact-form__direct { margin-top: clamp(var(--space-3), 1.6vw, var(--space-5)); padding-top: clamp(var(--space-4), 2vw, var(--space-5)); border-top: 1px solid rgba(10,10,10,0.1); display: flex; flex-direction: column; gap: var(--space-3); } .contact-form__direct-title { font-family: var(--font-body); font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(10,10,10,0.5); } .contact-form__direct ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 14px 24px; } .contact-form__direct a { font-family: var(--font-body); font-size: 0.875rem; color: rgba(10,10,10,0.72); text-decoration: none; position: relative; padding: 3px 0; transition: color 240ms ease; } .contact-form__direct a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-ink); transform: scaleX(0); transform-origin: right center; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); } .contact-form__direct a:hover { color: var(--color-ink); } .contact-form__direct a:hover::after { transform: scaleX(1); transform-origin: left center; } @media (max-width: 900px) { .contact-form-grid { grid-template-columns: 1fr; gap: clamp(var(--space-7), 8vw, var(--space-10)); } .contact-form-side { position: static; } .contact-form-image { aspect-ratio: 16 / 10; } } @media (max-width: 600px) { .contact-form__row { grid-template-columns: 1fr; gap: clamp(var(--space-4), 4vw, var(--space-5)); } .contact-form__submit-rule { display: none; } } /* ============================================================ HAMBURGER + SIDE MENU — appears after hero scroll, panel from right ============================================================ */ .hamburger { position: fixed; top: clamp(16px, 2vw, 24px); right: clamp(16px, 2vw, 24px); width: clamp(44px, 3.4vw, 52px); height: clamp(44px, 3.4vw, 52px); background: var(--color-ink, #0a0a0a); color: #fff; border: 0; padding: 0; cursor: pointer; z-index: 100; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(-14px) scale(0.86); filter: blur(4px); transition: opacity 640ms cubic-bezier(0.22, 1, 0.36, 1), transform 640ms cubic-bezier(0.22, 1, 0.36, 1), filter 480ms cubic-bezier(0.22, 1, 0.36, 1), background 240ms ease, visibility 0ms linear 640ms; } .hamburger.is-active { opacity: 1; visibility: visible; transform: translateY(0) scale(1); filter: blur(0); transition: opacity 640ms cubic-bezier(0.22, 1, 0.36, 1), transform 640ms cubic-bezier(0.22, 1, 0.36, 1), filter 480ms cubic-bezier(0.22, 1, 0.36, 1), background 240ms ease, visibility 0ms linear 0ms; } /* Tablet / mobile: the hamburger is the ONLY nav available (`.nav__links` is hidden ≤840px). Show it unconditionally on small viewports so users on pages without a hero-scroll trigger (about, approach, faq, contact, all project pages, journal, privacy, terms) still see a menu above the fold. */ @media (max-width: 840px) { .hamburger { opacity: 1; visibility: visible; transform: none; filter: none; } } .hamburger:hover { background: #141414; } .hamburger__box { width: 22px; height: 12px; display: flex; flex-direction: column; justify-content: space-between; position: relative; } .hamburger__line { display: block; height: 1px; background: currentColor; transition: transform 380ms cubic-bezier(0.76, 0, 0.24, 1), opacity 240ms ease, width 380ms cubic-bezier(0.22, 1, 0.36, 1); } .hamburger__line:nth-child(1) { width: 100%; } .hamburger__line:nth-child(2) { width: 70%; align-self: flex-end; } .hamburger__line:nth-child(3) { width: 100%; } .hamburger:hover .hamburger__line:nth-child(2) { width: 100%; } /* Open state — morph into X */ .hamburger.is-open .hamburger__line:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .hamburger.is-open .hamburger__line:nth-child(2) { opacity: 0; } .hamburger.is-open .hamburger__line:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); width: 100%; } /* Overlay */ .side-menu__overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 98; opacity: 0; visibility: hidden; transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0ms linear 420ms; cursor: pointer; } .side-menu__overlay.is-open { opacity: 1; visibility: visible; transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0ms linear 0ms; } /* Side panel — slides in from right, sharp edges */ .side-menu { position: fixed; top: 0; right: 0; width: min(560px, 100vw); height: 100vh; background: var(--color-ink, #0a0a0a); color: #fff; transform: translateX(100%); transition: transform 560ms cubic-bezier(0.76, 0, 0.24, 1), visibility 0ms linear 560ms; z-index: 99; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; visibility: hidden; box-shadow: -40px 0 80px -20px rgba(0,0,0,0.4); } .side-menu.is-open { transform: translateX(0); visibility: visible; transition: transform 560ms cubic-bezier(0.76, 0, 0.24, 1), visibility 0ms linear 0ms; } .side-menu__close { position: absolute; top: clamp(18px, 2vw, 26px); right: clamp(18px, 2vw, 26px); width: 44px; height: 44px; background: transparent; color: rgba(255,255,255,0.72); border: 0; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; transition: color 240ms ease, transform 480ms cubic-bezier(0.22, 1, 0.36, 1); } .side-menu__close:hover { color: #fff; transform: rotate(90deg); } .side-menu__inner { padding: clamp(80px, 9vw, 108px) clamp(32px, 4vw, 56px) clamp(40px, 5vw, 56px); display: flex; flex-direction: column; min-height: 100%; gap: clamp(24px, 3.2vw, 40px); } .side-menu__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.52); } .side-menu__eyebrow::before { content: ""; display: inline-block; width: 7px; height: 7px; transform: rotate(45deg); background: currentColor; } .side-menu__nav { flex: 1; } .side-menu__nav ul, .side-menu__foot ul { list-style: none; margin: 0; padding: 0; } .side-menu__nav a { display: block; font-family: var(--font-display); font-weight: 200; font-size: clamp(1.375rem, 2.6vw, 2rem); line-height: 1.15; color: #fff; text-decoration: none; padding: clamp(10px, 1.4vw, 14px) 0; border-bottom: 1px solid rgba(255,255,255,0.1); letter-spacing: -0.012em; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), color 240ms ease; position: relative; } .side-menu__nav a::before { content: ""; position: absolute; left: -14px; top: 50%; width: 5px; height: 5px; transform: translateY(-50%) rotate(45deg) scale(0); background: rgba(255,255,255,0.78); transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); } .side-menu__nav a:hover { transform: translateX(10px); } .side-menu__nav a:hover::before { transform: translateY(-50%) rotate(45deg) scale(1); } /* Active page marker */ .side-menu__nav a[aria-current="page"] { font-style: italic; font-weight: 100; } /* Foot row — Follow left, Contact right. Contact needs more room for the full email + multi-line address, so it gets a wider fr. */ .side-menu__foot { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: clamp(20px, 2.8vw, 40px); padding-top: clamp(22px, 3vw, 32px); border-top: 1px solid rgba(255,255,255,0.1); } .side-menu__col-title { display: block; font-family: var(--font-body); font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; color: rgba(255,255,255,0.4); margin-bottom: clamp(var(--space-3), 1.4vw, var(--space-4)); } .side-menu__foot ul { display: flex; flex-direction: column; gap: 0; } .side-menu__foot li { border-bottom: 1px solid rgba(255,255,255,0.06); } .side-menu__foot li:last-child { border-bottom: 0; } .side-menu__foot a { display: block; font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.45; color: rgba(255,255,255,0.72); text-decoration: none; padding: 7px 0; transition: color 240ms ease, transform 320ms ease; /* Allow long email addresses to break if the column is narrow */ word-break: break-word; overflow-wrap: anywhere; } .side-menu__foot a:hover { color: #fff; transform: translateX(4px); } /* "The End" — wordmark centered + copyright line beneath */ .side-menu__end { margin-top: auto; padding-top: clamp(var(--space-6), 4vw, var(--space-8)); display: flex; flex-direction: column; align-items: center; gap: clamp(var(--space-3), 1.6vw, var(--space-4)); text-align: center; padding-bottom: clamp(var(--space-2), 1vw, var(--space-3)); } .side-menu__wordmark { width: 100%; display: flex; justify-content: center; } .side-menu__wordmark img { width: 100%; max-width: 260px; opacity: 0.5; display: block; } .side-menu__end-copy { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.38); } /* When menu is open, prevent body scroll */ body.has-side-menu-open { overflow: hidden; } @media (max-width: 520px) { .side-menu__foot { grid-template-columns: 1fr; gap: var(--space-5); } .side-menu__wordmark { max-width: 160px; } } /* ============================================================ CONTACT FORM — custom 3-page brief (Netlify Forms) Typography: IvyPresto Display for questions, Gotham for input. Clear hierarchy, generous spacing, no red hover on checkboxes. ============================================================ */ .cform[hidden] { display: none !important; } .cform { display: flex; flex-direction: column; gap: clamp(var(--space-5), 3vw, var(--space-6)); margin: 0; padding: 0; border: 0; } .cform-bot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Progress bar — dynamic segments (auto-sized by count) */ .cform-progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin: 0 0 var(--space-4); } .cform-progress__seg { height: 2px; background: rgba(10,10,10,0.1); transition: background-color var(--motion-base) var(--motion-ease); } .cform-progress__seg[data-active] { background: var(--color-ink); } /* Page container — one visible at a time */ .cform-page { display: none; flex-direction: column; gap: clamp(var(--space-4), 2.4vw, var(--space-5)); margin: 0; padding: 0; border: 0; animation: cformSlideIn var(--motion-base) var(--motion-ease); } .cform-page[data-active] { display: flex; } @keyframes cformSlideIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Page header: step eyebrow / title / lede / back */ .cform-pagehead { display: flex; flex-direction: column; gap: 8px; position: relative; padding-bottom: var(--space-4); border-bottom: 1px solid rgba(10,10,10,0.08); margin-bottom: var(--space-1); } .cform-step { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; color: rgba(10,10,10,0.45); } .cform-pagetitle { font-family: var(--font-display); font-weight: 100; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.08; letter-spacing: -0.015em; color: var(--color-ink); margin: 0; max-width: 22ch; } .cform-pagetitle em { font-style: italic; font-weight: 100; } .cform-pagelede { font-family: var(--font-body); font-weight: 300; font-size: 0.9375rem; line-height: 1.55; color: rgba(10,10,10,0.58); margin: 0; max-width: 46ch; } .cform-back { position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; background: none; border: 0; color: rgba(10,10,10,0.55); font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; cursor: pointer; transition: color var(--motion-fast) var(--motion-ease); } .cform-back:hover { color: var(--color-ink); } .cform-back svg { width: 14px; height: 14px; stroke: currentColor; } /* Two-column grid for First / Last name */ .cform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-4), 2.2vw, var(--space-5)) clamp(var(--space-4), 2.4vw, var(--space-5)); } @media (max-width: 640px) { .cform-grid { grid-template-columns: 1fr; } } /* Fields — the container. Spacing between a field's question+input is intentional: question on top, gap, then input below. */ .cform-field { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; } .cform-field--full { grid-column: 1 / -1; } /* Question labels — IvyPresto Display Thin, NOT uppercase, readable size. This is the primary visual hierarchy marker. */ .cform-q { font-family: var(--font-display); font-weight: 100; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.3; letter-spacing: -0.005em; color: var(--color-ink); padding: 0; margin: 0; } .cform-qhint { font-family: var(--font-body); font-weight: 300; font-size: 0.8125rem; line-height: 1.4; color: rgba(10,10,10,0.5); margin: 4px 0 8px; font-style: italic; } /* Question row — label on the left, mini note on the right (inline). Used when a hint is short enough to live next to the question. */ .cform-qrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .cform-qnote { font-family: var(--font-body); font-weight: 300; font-size: 0.75rem; line-height: 1.4; color: rgba(10,10,10,0.45); font-style: italic; text-align: right; flex-shrink: 0; } .cform-opt { margin-left: 8px; font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.16em; color: rgba(10,10,10,0.4); font-weight: 400; font-style: italic; text-transform: lowercase; vertical-align: 2px; } /* Inputs — Gotham Light, generous padding, subtle bottom border. Border goes solid on focus, accent on invalid. */ .cform input[type="text"], .cform input[type="email"], .cform input[type="tel"], .cform select, .cform textarea { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-bottom: 1px solid rgba(10,10,10,0.18); padding: 9px 0; font-family: var(--font-body); font-weight: 300; font-size: 1rem; line-height: 1.45; color: var(--color-ink); transition: border-color var(--motion-base) var(--motion-ease); border-radius: 0; width: 100%; max-width: 100%; min-width: 0; } .cform textarea { resize: vertical; min-height: 84px; border: 1px solid rgba(10,10,10,0.12); padding: 11px 14px; background: #fcfcfc; transition: border-color var(--motion-base) var(--motion-ease), background var(--motion-base) var(--motion-ease); } .cform textarea:focus { border-color: var(--color-ink); background: #ffffff; } .cform input:focus, .cform select:focus { outline: none; border-bottom-color: var(--color-ink); } .cform textarea:focus { outline: none; } /* Keyboard-only focus ring (see note on .contact-form). */ .cform input:focus-visible, .cform select:focus-visible, .cform textarea:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; } .cform input::placeholder, .cform textarea::placeholder { color: rgba(10,10,10,0.28); font-weight: 300; } .cform select { cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 4px center; padding-right: 28px; } /* Phone with country code — custom picker on the left, input on the right. Phone input explicitly sits at z-index: 1 so nothing from the picker column can mask it even during paint/layout transitions. */ .cform-phone { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-4); align-items: end; position: relative; } .cform-phone input[data-cp-phone] { position: relative; z-index: 1; } @media (max-width: 520px) { .cform-phone { grid-template-columns: 120px 1fr; } } /* Tap-target accessibility: bump form fields to >=44px on mobile (Apple HIG / Google Material guidance). On the qualification (.cform) and brief (.contact-form) inputs the desktop styles set padding to ~9-11px which on the iOS soft-keyboard sizes computes to ~38px tall — too small. */ @media (max-width: 900px) { .cform input[type="text"], .cform input[type="email"], .cform input[type="tel"], .cform select, .cform textarea, .cform-cp__button, .contact-form input, .contact-form select, .contact-form textarea, .altfooter__news-form input { padding-top: 13px; padding-bottom: 13px; min-height: 44px; font-size: 16px; /* prevents iOS Safari from auto-zooming on focus */ } .cform textarea, .contact-form textarea { min-height: 110px; } /* Newsletter pill keeps its tighter padding-y but the input sits at 16px. */ .altfooter__news-form input { padding-top: 10px; padding-bottom: 10px; } } /* Custom country picker — flag graphic (SVG from flag-icons) + dial code */ .cform-cp { position: relative; } .cform-cp__button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 4px; background: transparent; border: 0; border-bottom: 1px solid rgba(10,10,10,0.18); font-family: var(--font-body); font-weight: 300; font-size: 1rem; color: var(--color-ink); cursor: pointer; text-align: left; border-radius: 0; transition: border-color var(--motion-base) var(--motion-ease); } .cform-cp__button:hover, .cform-cp__button[aria-expanded="true"] { border-bottom-color: var(--color-ink); } .cform-cp__flag { width: 22px; height: 16px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(10,10,10,0.08); border-radius: 1px; } .cform-cp__code { font-weight: 300; flex: 1; } .cform-cp__caret { width: 12px; height: 12px; color: rgba(10,10,10,0.5); transition: transform var(--motion-base) var(--motion-ease); } .cform-cp__button[aria-expanded="true"] .cform-cp__caret { transform: rotate(180deg); } .cform-cp__list { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; min-width: 320px; max-height: 320px; overflow-y: auto; list-style: none; margin: 0; padding: 8px 0; background: #ffffff; border: 1px solid rgba(10,10,10,0.1); box-shadow: 0 8px 32px rgba(10,10,10,0.08); } .cform-cp__list[hidden] { display: none; } .cform-cp__list li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; font-family: var(--font-body); font-weight: 300; font-size: 0.875rem; color: var(--color-ink); transition: background var(--motion-fast) var(--motion-ease); } .cform-cp__list li:hover, .cform-cp__list li:focus { background: rgba(10,10,10,0.04); outline: none; } .cform-cp__list .fi { width: 22px; height: 16px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(10,10,10,0.08); border-radius: 1px; } .cform-cp__name { flex: 1; } .cform-cp__dim { color: rgba(10,10,10,0.5); font-variant-numeric: tabular-nums; } /* Inline submit error — used instead of alert() */ .cform-submit-error { padding: 14px 18px; background: rgba(222, 50, 45, 0.06); border-left: 2px solid var(--color-accent); color: var(--color-ink); font-family: var(--font-body); font-weight: 300; font-size: 0.875rem; line-height: 1.5; margin-bottom: var(--space-3); } .cform-submit-error[hidden] { display: none; } /* Checkboxes block — larger tap targets, no red hover, cleaner state */ .cform-checks { display: flex; flex-direction: column; gap: 0; padding: 0; } .cform-checks > .cform-q { margin-bottom: 4px; } .cform-check { display: flex; align-items: center; gap: 14px; padding: 14px 2px; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 300; color: var(--color-ink); cursor: pointer; border-bottom: 1px solid rgba(10,10,10,0.08); transition: border-color var(--motion-fast) var(--motion-ease); } .cform-check:first-of-type { border-top: 1px solid rgba(10,10,10,0.08); } .cform-check:hover { border-bottom-color: rgba(10,10,10,0.28); } .cform-check:hover input[type="checkbox"] { border-color: var(--color-ink); } .cform-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1px solid rgba(10,10,10,0.28); background: transparent; border-radius: 0; cursor: pointer; position: relative; flex-shrink: 0; transition: all var(--motion-fast) var(--motion-ease); } .cform-check input[type="checkbox"]:checked { background: var(--color-ink); border-color: var(--color-ink); } .cform-check input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } .cform-check input[type="checkbox"]:checked ~ span { color: var(--color-ink); font-weight: 400; } .cform-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; } /* Error state — subtle, accent-only on the field, no aggressive full borders */ .cform-field.is-invalid .cform-q { color: var(--color-accent); } .cform-field.is-invalid input, .cform-field.is-invalid select { border-bottom-color: var(--color-accent); } .cform-field.is-invalid textarea { border-color: var(--color-accent); } .cform-field.is-invalid.cform-checks { padding-left: 12px; border-left: 2px solid var(--color-accent); margin-left: -14px; } /* GDPR consent row — required checkbox above the submit on the qualification form (page 4). Custom box visualisation so the native checkbox stays accessible but doesn't fight the brand vocabulary. */ .cform-field--consent { margin-top: var(--space-4); } .cform-consent { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 14px 16px; border: 1px solid rgba(10,10,10,0.10); background: #fcfcfc; transition: border-color var(--motion-base) var(--motion-ease), background var(--motion-base) var(--motion-ease); } .cform-consent:hover { border-color: rgba(10,10,10,0.22); background: #fafafa; } .cform-consent input[type="checkbox"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .cform-consent__box { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; border: 1.5px solid rgba(10,10,10,0.32); background: #fff; position: relative; transition: border-color 200ms ease, background 200ms ease; } .cform-consent__box::after { content: ""; position: absolute; inset: 2px; background: var(--color-ink, #0a0a0a); transform: scale(0); transform-origin: center; transition: transform 180ms cubic-bezier(0.22, 0.8, 0.24, 1); } .cform-consent input[type="checkbox"]:checked ~ .cform-consent__box { border-color: var(--color-ink, #0a0a0a); } .cform-consent input[type="checkbox"]:checked ~ .cform-consent__box::after { transform: scale(1); } .cform-consent input[type="checkbox"]:focus-visible ~ .cform-consent__box { outline: 2px solid var(--color-ink, #0a0a0a); outline-offset: 2px; } .cform-consent__text { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 300; line-height: 1.55; color: rgba(10,10,10,0.78); } .cform-consent__text a { color: var(--color-ink, #0a0a0a); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .cform-field--consent.is-invalid .cform-consent { border-color: #c14b4b; background: #fff5f5; } .cform-field--consent.is-invalid .cform-consent__box { border-color: #c14b4b; } /* Actions row — Back on left is in header; primary button on the right for natural reading flow. Notice text next to it. */ .cform-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-4); padding-top: var(--space-5); border-top: 1px solid rgba(10,10,10,0.06); } .cform-notice { font-family: var(--font-body); font-size: 0.75rem; font-weight: 300; color: rgba(10,10,10,0.45); letter-spacing: 0.02em; max-width: 32ch; order: -1; } /* Primary action button — black, right-aligned. Slide animation on hover (two rows of label+arrow, one slides up, the other rises from below). No red anywhere — the brand accent is reserved for required markers, error state, and the success panel rule. */ .cform-btn { display: inline-flex; align-items: center; padding: 18px 32px; background: var(--color-ink); color: #fff; border: 1px solid var(--color-ink); font-family: var(--font-body); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1; cursor: pointer; border-radius: 0; transition: background var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease); white-space: nowrap; margin-left: auto; overflow: hidden; } .cform-btn__slide { position: relative; display: inline-flex; overflow: hidden; line-height: 1; } .cform-btn__row { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; line-height: 1; transition: transform 520ms cubic-bezier(0.22, 0.8, 0.24, 1); } .cform-btn__row:nth-child(1) { transform: translateY(0); } .cform-btn__row:nth-child(2) { position: absolute; inset: 0; transform: translateY(120%); } .cform-btn:hover .cform-btn__row:nth-child(1) { transform: translateY(-120%); } .cform-btn:hover .cform-btn__row:nth-child(2) { transform: translateY(0); } .cform-btn__arrow { width: 14px; height: 14px; stroke: currentColor; flex: 0 0 auto; } .cform-btn:hover { background: #1a1a1a; border-color: #1a1a1a; } .cform-btn:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; } /* Disabled / submitting state */ .cform.is-submitting .cform-btn { opacity: 0.6; pointer-events: none; } /* Success panel — ONLY shown when submission completes. Default hidden via [hidden]. */ .cform-success[hidden] { display: none !important; } .cform-success { display: flex; flex-direction: column; gap: var(--space-4); padding: clamp(var(--space-7), 6vw, var(--space-9)); background: var(--color-paper-soft); border-left: 2px solid var(--color-accent); animation: cformSlideIn 480ms var(--motion-ease); } .cform-success__title { font-family: var(--font-display); font-weight: 100; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.08; letter-spacing: -0.015em; color: var(--color-ink); margin: 0; max-width: 18ch; } .cform-success__title em { font-style: italic; font-weight: 100; } .cform-success__lede { font-family: var(--font-body); font-weight: 300; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.6; color: rgba(10,10,10,0.62); max-width: 50ch; margin: 0; } /* Narrower image column — give more room to the form. Image stretches to match form height so the two columns always end at the same baseline (no dangling empty space below the form). */ .contact-form-grid { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); align-items: stretch; } .contact-form-side { position: sticky; top: clamp(80px, 12vh, 140px); height: auto; align-self: start; } /* 1080x1350 portrait — image fills its column at native 4:5 ratio (no height cap). The aside is sticky so the photograph stays visible as the form scrolls past it. */ .contact-form-image { aspect-ratio: 4 / 5; height: auto; min-height: 0; max-height: none; } .contact-form-image img { width: 100%; height: 100%; object-fit: cover; } /* 9:16 placeholder when no portrait image is wired yet. Subtle ink panel with a hairline border and a single discreet label. The aspect ratio on .contact-form-image already locks the slot to 9:16. */ .contact-form-image--placeholder { background: rgba(10,10,10,0.04); border: 1px solid rgba(10,10,10,0.10); display: flex; align-items: flex-end; justify-content: flex-start; padding: clamp(var(--space-3), 1.6vw, var(--space-4)); } .contact-form-image__label { font-family: var(--font-body); font-weight: var(--fw-light); font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(10,10,10,0.45); } /* Form panel — no forced min-height; the form drives its own height now that the section is compressed. The image stays sticky alongside it. */ .contact-form-panel { min-height: 0; } @media (max-width: 960px) { .contact-form-grid { grid-template-columns: 1fr; } .contact-form-side { position: relative; top: auto; } /* Keep the 4:5 portrait at native ratio on narrow viewports too — the photograph reads as a full vertical above the form. */ .contact-form-image { aspect-ratio: 4 / 5; max-height: none; width: 100%; margin-inline: auto; } } /* Mobile tweaks for the form panel */ @media (max-width: 720px) { .cform-pagehead { padding-top: 0; } .cform-back { position: static; margin-bottom: var(--space-2); align-self: flex-start; } .cform-actions { flex-direction: column; align-items: stretch; } .cform-btn { margin-left: 0; justify-content: center; } } /* ============================================================ APPROACH V2 — Circular step indicator engine (shared between approach-v2-preview.html and approach.html). 7 scroll-locked frames, single ring on the right that fills clockwise per step and ticks 01 → 07. Editorial copy bottom-left per step. Bottom- right scroll cue. No spiral, no ornament. ============================================================ */ .av2-rail { position: relative; height: calc(100vh * 7 + 60vh); background: #0a0a0a; color: #fff; } .av2-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; } .av2-stage::before, .av2-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .av2-stage::before { background: radial-gradient(ellipse 70% 60% at 0% 0%, rgba(255,255,255,0.04), transparent 70%), radial-gradient(ellipse 80% 70% at 100% 100%, rgba(255,255,255,0.03), transparent 65%); } .av2-stage::after { background: radial-gradient(circle at 50% 50%, transparent 40%, rgba(0,0,0,0.55) 100%); } .av2-step-indicator { position: absolute; right: clamp(24px, 5vw, 80px); top: 50%; z-index: 3; width: clamp(120px, 12vw, 180px); height: clamp(120px, 12vw, 180px); transform: translateY(-50%); display: flex; align-items: center; justify-content: center; pointer-events: none; } .av2-step-indicator__track, .av2-step-indicator__fill { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .av2-step-indicator__track-circle { fill: none; stroke: rgba(255,255,255,0.16); stroke-width: 1; } .av2-step-indicator__fill-circle { fill: none; stroke: rgba(255,255,255,0.94); stroke-width: 1.4; stroke-linecap: round; /* Drawn from 12 o'clock clockwise. No CSS transition — rAF writes the offset every frame, so the ring fills smoothly with scroll. */ transform: rotate(-90deg); transform-origin: 50% 50%; } .av2-step-indicator__num { position: relative; font-family: var(--font-display); font-weight: var(--fw-thin, 200); font-style: normal; font-size: clamp(1.5rem, 1.9vw, 2rem); letter-spacing: 0.04em; color: #fff; line-height: 1; } .av2-step-indicator__count { position: absolute; bottom: -34px; left: 50%; transform: translateX(-50%); font-family: var(--font-body); font-weight: var(--fw-regular, 400); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: #ffffff; white-space: nowrap; text-shadow: 0 1px 14px rgba(0,0,0,0.45); } /* Editorial copy block — pinned to the MIDDLE-LEFT of the viewport, inside the left column of an imaginary 3×3 grid (box position 4 = row 2, column 1). The block spans the full stage HEIGHT and uses grid-stack layout so the active step's bounding box (kicker + title + body + deliv) is genuinely centred vertically by the grid's align-items: center, instead of just having its top edge at the midline (which is what made the visible block fall low on screen). */ .av2-copy { position: absolute; left: clamp(20px, 4vw, 64px); top: 0; bottom: 0; z-index: 5; /* Wider copy column so each step's body breathes across two natural lines instead of three. Caps at the right edge of the right-rail ring indicator. */ width: min(640px, 42vw); display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; align-items: center; justify-items: start; pointer-events: none; } /* All 7 step blocks share the same grid cell — they OVERLAP in row 1 col 1 of the copy grid. Only the active one is opaque, everything else stays at opacity 0 but contributes to layout via grid stacking so the cell height matches the tallest step. */ .av2-step { grid-column: 1; grid-row: 1; width: 100%; padding: 0; opacity: 0; transform: translateY(12px); transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .av2-step.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } .av2-step__kicker { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-body); font-weight: var(--fw-regular, 400); font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.92); margin: 0 0 clamp(20px, 2.4vw, 32px); /* Asymmetric: a bit more breathing room on the right so the last letter of the step name (e.g. the "G" in "REPORTING") does not crowd the box edge. The 0.28em tracking pushes the final letter out visually; we compensate. */ padding: 8px 22px 8px 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .av2-step__kicker::before { content: ""; display: inline-block; width: 8px; height: 8px; background: #ffffff; transform: rotate(45deg); box-shadow: 0 0 10px rgba(255,255,255,0.35); } .av2-step__num { color: #ffffff; font-weight: var(--fw-regular, 500); } .av2-step__divider { color: rgba(255,255,255,0.55); margin: 0 6px; } .av2-step__title { font-family: var(--font-display); font-weight: var(--fw-thin, 200); font-style: normal; font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.06; letter-spacing: -0.015em; color: #fff; margin: 0 0 clamp(18px, 2vw, 28px); text-wrap: balance; } .av2-step__title em { font-style: italic; color: rgba(255,255,255,0.66); font-weight: var(--fw-thin, 100); } .av2-step__body { font-family: var(--font-body); font-weight: var(--fw-light); font-size: clamp(0.9375rem, 1.05vw, 1.0625rem); line-height: 1.65; color: rgba(255,255,255,0.82); margin: 0 0 clamp(18px, 2vw, 26px); max-width: 100%; } .av2-step__deliv { font-family: var(--font-body); font-weight: var(--fw-regular, 400); font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.78); } /* Bottom-right scroll cue — sits CENTRED directly below the circular step indicator, mirroring its horizontal position. Slightly bolder text + a longer, more visible thread so the affordance reads at a glance. The right offset matches the indicator's right offset and the indicator's half-width via translateX so the cue lines up with the ring's vertical axis. */ .av2-scroll { position: absolute; right: calc(clamp(24px, 5vw, 80px) + clamp(120px, 12vw, 180px) / 2); transform: translateX(50%); bottom: clamp(56px, 6vh, 88px); z-index: 5; display: inline-flex; flex-direction: column; align-items: center; gap: 12px; font-family: var(--font-body); font-weight: var(--fw-light); font-size: 0.6875rem; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255,255,255,0.92); opacity: var(--av2-scroll-fade, 1); transition: opacity 500ms linear; pointer-events: none; } .av2-scroll__line { width: 1px; height: 56px; background: linear-gradient(to bottom, rgba(255,255,255,0.92), rgba(255,255,255,0)); animation: av2-scroll-pulse 1800ms ease-in-out infinite; transform-origin: top center; } @keyframes av2-scroll-pulse { 0%, 100% { transform: scaleY(0.5); opacity: 0.55; } 50% { transform: scaleY(1); opacity: 1; } } @media (max-width: 760px) { .av2-copy { width: calc(100% - 40px); } .av2-step__title { font-size: 1.875rem; } .av2-step__body { font-size: 0.9375rem; } .av2-step-indicator { width: 80px; height: 80px; } .av2-scroll { right: 20px; bottom: 70px; } } @media (prefers-reduced-motion: reduce) { .av2-step { transition: none; } } /* ============================================================ SALT-CINEMA video player (shared). Inline tile = poster + scrim + rhombus glyph + 2px playhead that fills as the video previews on hover. Click any tile and the same source opens in a glass fullscreen modal with custom chrome (play/pause toggle, volume, fullscreen, time, rotating ×). The modal markup is injected by js/main.js if not already on the page, so any HTML page only needs the inline tile markup. Lifted from ck-realtors.html so every project page can share the same handler. - Default tile aspect = 9 / 16 (vertical reel). - Add `.va__vid-frame--landscape` for 16/9 hero films. - Add `.va__vid-frame--square` for 1/1. - Modal stage detects the video's intrinsic ratio after meta- loaded and toggles `.va__player.is-landscape` so landscape films render in a wide stage instead of the portrait stage. ============================================================ */ .va__vid-frame { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; background: var(--va-paper-soft, #f4f1ec); border: 1px solid var(--va-line, rgba(0,0,0,0.08)); cursor: pointer; } .va__vid-frame--landscape { aspect-ratio: 16 / 9; } .va__vid-frame--square { aspect-ratio: 1 / 1; } .va__vid-player { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--va-paper-soft, #f4f1ec); } .va__vid-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.32) 100%); transition: opacity 540ms cubic-bezier(0.22, 0.61, 0.36, 1); opacity: 1; z-index: 2; } .va__vid-frame:hover::after { opacity: 0.55; } /* Default tile (Salt-Cinema mode): centred glass play disc + triangle. No hover preview, no rhombus corner glyph. Click opens the modal. */ .va__vid-frame::before { content: ""; position: absolute; top: 50%; left: 50%; width: clamp(64px, 5.4vw, 88px); height: clamp(64px, 5.4vw, 88px); border-radius: 50%; border: 1px solid rgba(255,255,255,0.62); background-color: rgba(255,255,255,0.10); background-image: url("data:image/svg+xml;utf8,"); background-size: 26%; background-position: 56% 50%; background-repeat: no-repeat; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translate(-50%, -50%); z-index: 3; pointer-events: none; transition: background-color 320ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color 320ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1); } .va__vid-frame:hover::before { background-color: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.92); transform: translate(-50%, -50%) scale(1.06); } /* Hover-play variant (CK Realtors only): restores the corner rhombus glyph + the inline tile playhead. Hover-to-preview is reactivated from JS by checking this modifier. */ .va__vid-frame--hover-play::before { top: auto; left: auto; bottom: clamp(14px, 1.6vw, 22px); right: clamp(14px, 1.6vw, 22px); width: 14px; height: 14px; border-radius: 0; background: transparent; background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: rotate(45deg); } .va__vid-frame--hover-play:hover::before { opacity: 0; background: transparent; border-color: rgba(255,255,255,0.86); transform: rotate(45deg) scale(0.7) translate(6px, -6px); } .va__vid-frame--hover-play:hover::after { opacity: 0; } .va__vid-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,0.18); z-index: 4; pointer-events: none; opacity: 0; transition: opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1); } .va__vid-frame--hover-play:hover .va__vid-bar { opacity: 1; } .va__vid-bar-fill { display: block; height: 100%; width: 0%; background: rgba(255,255,255,0.92); transform-origin: 0 50%; transition: width 80ms linear; } .va__player { position: fixed; inset: 0; display: none; place-items: center; z-index: 9999; background: rgba(10,10,10,0.72); backdrop-filter: blur(24px) saturate(1.05); -webkit-backdrop-filter: blur(24px) saturate(1.05); opacity: 0; transition: opacity 460ms cubic-bezier(0.22, 0.61, 0.36, 1); } .va__player.is-open { display: grid; opacity: 1; } .va__player-stage { position: relative; width: min(420px, 88vw); height: min(746px, 84vh); background: #000; overflow: hidden; transform: scale(0.96); transition: transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1); box-shadow: 0 40px 120px -20px rgba(0,0,0,0.7); } .va__player.is-landscape .va__player-stage { width: min(1280px, 92vw); height: min(720px, 80vh); } .va__player.is-square .va__player-stage { width: min(720px, 88vw); height: min(720px, 80vh); } .va__player.is-open .va__player-stage { transform: scale(1); } .va__player-video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; } .va__player-close { position: absolute; top: clamp(20px, 3vw, 32px); right: clamp(20px, 3vw, 32px); width: 44px; height: 44px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.32); color: #fff; cursor: pointer; display: grid; place-items: center; z-index: 4; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 220ms ease, transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1); } .va__player-close:hover { background: rgba(255,255,255,0.18); transform: rotate(90deg); } .va__player-close::before, .va__player-close::after { content: ""; position: absolute; width: 18px; height: 1px; background: #fff; } .va__player-close::before { transform: rotate(45deg); } .va__player-close::after { transform: rotate(-45deg); } /* Bottom playhead, time, volume, fullscreen — all glass chrome. Hidden until pointer enters the stage; fades in/out. */ .va__player-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,0.16); z-index: 3; cursor: pointer; } .va__player-bar-fill { display: block; height: 100%; width: 0%; background: #fff; transform-origin: 0 50%; transition: width 80ms linear; } .va__player-time { position: absolute; left: clamp(16px, 2.4vw, 24px); bottom: clamp(16px, 2.4vw, 24px); color: rgba(255,255,255,0.86); font-family: var(--va-font-body, var(--font-body)); font-size: 0.75rem; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; z-index: 3; text-shadow: 0 1px 4px rgba(0,0,0,0.5); opacity: 0; transition: opacity 240ms ease; pointer-events: none; } .va__player.is-open .va__player-time { opacity: 1; } .va__player-toggle { position: absolute; inset: 0; background: transparent; border: 0; cursor: pointer; color: #fff; z-index: 1; display: grid; place-items: center; } .va__player-toggle::after { content: ""; width: 14px; height: 14px; border: 1px solid rgba(255,255,255,0.86); transform: rotate(45deg) scale(0.9); opacity: 0; transition: opacity 240ms ease, transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1); } .va__player.is-paused .va__player-toggle::after { opacity: 1; transform: rotate(45deg) scale(1); } /* Glass control row anchored bottom-right of the stage. Holds volume slider + fullscreen toggle. Same blur/border treatment as the close button. =========================================== */ .va__player-controls { position: absolute; right: clamp(16px, 2.4vw, 24px); bottom: clamp(16px, 2.4vw, 24px); display: inline-flex; align-items: center; gap: 10px; z-index: 3; opacity: 0; transform: translateY(4px); transition: opacity 240ms ease, transform 240ms ease; pointer-events: none; } .va__player.is-open .va__player-controls { opacity: 1; transform: translateY(0); pointer-events: auto; } .va__player-ctl { width: 36px; height: 36px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.28); color: #fff; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 220ms ease; position: relative; padding: 0; } .va__player-ctl:hover { background: rgba(255,255,255,0.18); } .va__player-ctl svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .va__player-vol-wrap { display: inline-flex; align-items: center; height: 36px; border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 0 10px 0 8px; gap: 8px; } .va__player-vol-btn { width: 24px; height: 24px; background: transparent; border: 0; color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; } .va__player-vol-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .va__player-vol { appearance: none; -webkit-appearance: none; background: transparent; width: 64px; height: 16px; margin: 0; cursor: pointer; } .va__player-vol::-webkit-slider-runnable-track { height: 1px; background: rgba(255,255,255,0.36); border: 0; } .va__player-vol::-moz-range-track { height: 1px; background: rgba(255,255,255,0.36); border: 0; } .va__player-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 8px; height: 8px; border-radius: 0; background: #fff; margin-top: -3.5px; border: 0; transform: rotate(45deg); } .va__player-vol::-moz-range-thumb { width: 8px; height: 8px; border-radius: 0; background: #fff; border: 0; transform: rotate(45deg); } @media (max-width: 540px) { .va__player-vol-wrap { display: none; } } body.va-player-open { overflow: hidden; } /* ============================================================ INLINE VIDEO PLAYER (Salt-Cinema style). The poster sits in place. Click → plays inline AT THE TILE's own location (no modal). Chrome (time + volume + settings + fullscreen + hairline progress) is permanently in the player frame, fading slightly when the cursor leaves so it never covers the work. Only the fullscreen button moves the video into native fullscreen — that's the single mode-change. First applied to villa-rafaella.html as the reference; will replace the modal-click pattern site-wide once locked. ============================================================ */ .va__vp { position: relative; width: 100%; background: #000; overflow: hidden; isolation: isolate; cursor: pointer; /* Default = portrait reel (9:16). Modifiers override for landscape / square / custom inline aspect-ratio. ============================== */ aspect-ratio: 9 / 16; } .va__vp--landscape { aspect-ratio: 16 / 9; } .va__vp--portrait { aspect-ratio: 9 / 16; } .va__vp--square { aspect-ratio: 1 / 1; } /* Hover-darken at rest. The whole frame deepens when the cursor enters the player BEFORE play has been pressed, so the centred play disc reads against any bright frame. The moment the user hits play, this shadow (and everything else) disappears and the video runs clean. */ .va__vp::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.34); opacity: 0; z-index: 1; pointer-events: none; transition: opacity 360ms cubic-bezier(0.22, 0.61, 0.36, 1); } .va__vp:hover::before { opacity: 1; } .va__vp.is-playing::before, .va__vp.is-playing:hover::before { opacity: 0; } .va__vp__video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; } /* Soft bottom shade — gives chrome readable contrast on bright frames. */ .va__vp__shade { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.62) 100%); pointer-events: none; z-index: 2; opacity: 1; transition: opacity 360ms cubic-bezier(0.22, 0.61, 0.36, 1); } /* Top vignette — so the centered play button has the same dark feel from above as Salt Cinema's reference. Lighter than the bottom. */ .va__vp__shade-top { position: absolute; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.32) 100%); pointer-events: none; z-index: 2; opacity: 1; transition: opacity 360ms cubic-bezier(0.22, 0.61, 0.36, 1); } /* Centred play button — Salt-Cinema spec. Smaller, denser disc with a larger triangle that DOMINATES the disc (≈40% width). No outline ring, soft outer shadow. ====================== */ .va__vp__play { position: absolute; top: 50%; left: 50%; width: clamp(72px, 5.6vw, 96px); height: clamp(72px, 5.6vw, 96px); border-radius: 50%; background: rgba(0, 0, 0, 0.58); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 0; outline: 0; box-shadow: 0 16px 42px -10px rgba(0,0,0,0.58); cursor: pointer; color: #fff; display: grid; place-items: center; padding: 0; z-index: 4; transform: translate(-50%, -50%); transition: background 240ms ease, box-shadow 320ms ease, transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 320ms cubic-bezier(0.22, 0.61, 0.36, 1); } .va__vp__play:hover { background: rgba(0,0,0,0.72); box-shadow: 0 20px 52px -10px rgba(0,0,0,0.72); transform: translate(-50%, -50%) scale(1.04); } .va__vp__play:focus-visible { outline: 2px solid rgba(255,255,255,0.55); outline-offset: 4px; } .va__vp__play svg { width: 44%; height: 44%; fill: #fff; /* No optical x-shift — the triangle sits at true geometric centre. */ } .va__vp.is-playing .va__vp__play { opacity: 0; pointer-events: none; } /* Chrome row — time on the left, control cluster on the right. Sits above the hairline progress bar with breathing room. */ .va__vp__chrome { position: absolute; left: 0; right: 0; bottom: clamp(20px, 2vw, 28px); padding: 0 clamp(20px, 2.4vw, 32px); display: flex; justify-content: space-between; align-items: center; gap: 16px; z-index: 5; color: #fff; pointer-events: none; } .va__vp__chrome > * { pointer-events: auto; } .va__vp__time { font-family: var(--font-body); font-size: clamp(0.8125rem, 1vw, 0.9375rem); font-weight: var(--fw-light, 300); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px rgba(0,0,0,0.42); user-select: none; } .va__vp__ctrls { display: inline-flex; align-items: center; gap: clamp(16px, 1.6vw, 24px); } .va__vp__btn { background: transparent; border: 0; cursor: pointer; color: #fff; width: clamp(22px, 1.7vw, 26px); height: clamp(22px, 1.7vw, 26px); padding: 0; display: grid; place-items: center; opacity: 0.94; transition: opacity 200ms ease, transform 200ms ease; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45)); } .va__vp__btn:hover { opacity: 1; transform: scale(1.08); } .va__vp__btn svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .va__vp__btn .vp-fill { fill: currentColor; stroke: none; } /* The Lucide gear path fills the full 24×24 viewBox edge-to-edge, so visually it lands ~14% larger than the speaker / fullscreen icons. Scale the inner SVG to bring optical weight in line. */ .va__vp__btn[data-vp-set] svg { transform: scale(0.86); } /* Volume control: speaker icon + a horizontal slider that grows out from zero width on hover. The slider stays inside the chrome row so the layout doesn't jump when it appears. ============================== */ .va__vp__vol { display: inline-flex; align-items: center; gap: 0; } .va__vp__vol-slider { appearance: none; -webkit-appearance: none; background: transparent; width: 0; height: 16px; margin: 0; cursor: pointer; opacity: 0; transition: width 320ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 240ms ease, margin-left 320ms cubic-bezier(0.22, 0.61, 0.36, 1); } .va__vp__vol:hover .va__vp__vol-slider, .va__vp__vol:focus-within .va__vp__vol-slider { width: clamp(64px, 7vw, 96px); margin-left: 10px; opacity: 1; } .va__vp__vol-slider::-webkit-slider-runnable-track { height: 1px; background: rgba(255,255,255,0.32); border: 0; } .va__vp__vol-slider::-moz-range-track { height: 1px; background: rgba(255,255,255,0.32); border: 0; } .va__vp__vol-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 0; margin-top: -4px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); } .va__vp__vol-slider::-moz-range-thumb { width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.5); } /* Hairline progress — sits a small distance above the bottom edge so the bar reads as a deliberate UI element rather than a screen border. On hover the bar lifts subtly (drop-shadow + slight thickness) so the user can see exactly where the duration is. =========================== */ .va__vp__progress { position: absolute; left: clamp(20px, 2.4vw, 32px); right: clamp(20px, 2.4vw, 32px); bottom: clamp(8px, 0.9vw, 12px); height: 2px; background: rgba(255,255,255,0.20); z-index: 6; cursor: pointer; transition: height 200ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 220ms ease, background 220ms ease; } .va__vp__progress:hover { height: 3px; background: rgba(255,255,255,0.28); filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55)); } .va__vp__progress-fill { display: block; height: 100%; width: 0%; background: rgba(255,255,255,0.94); /* No width transition — RAF updates the playhead every frame, a CSS transition lags 80ms behind playback and visibly chases the cursor. */ } /* Auto-hide chrome after a few seconds of idle play; restores on hover. */ .va__vp.is-idle .va__vp__chrome, .va__vp.is-idle .va__vp__shade, .va__vp.is-idle .va__vp__shade-top, .va__vp.is-idle .va__vp__progress { opacity: 0; } .va__vp.is-idle:hover .va__vp__chrome, .va__vp.is-idle:hover .va__vp__shade, .va__vp.is-idle:hover .va__vp__shade-top, .va__vp.is-idle:hover .va__vp__progress { opacity: 1; } .va__vp__chrome, .va__vp__shade, .va__vp__shade-top, .va__vp__progress { transition: opacity 360ms cubic-bezier(0.22, 0.61, 0.36, 1); } /* Fullscreen mode — the player container fills the viewport and the video letterboxes inside (object-fit: contain) so we never crop the work. Chrome stays anchored to the bottom edge of the now full-page container, so its position scales with the user's screen. =========== */ .va__vp:fullscreen, .va__vp:-webkit-full-screen, .va__vp.is-fullscreen { width: 100vw; height: 100vh; background: #000; aspect-ratio: auto; display: grid; place-items: center; } .va__vp:fullscreen .va__vp__video, .va__vp:-webkit-full-screen .va__vp__video, .va__vp.is-fullscreen .va__vp__video { width: 100%; height: 100%; object-fit: contain !important; max-width: 100vw; max-height: 100vh; } /* ============================================================ COOKIE CONSENT BANNER (shared, injected by js/main.js). Editorial bar pinned bottom-right, monochrome glass treatment. Buttons: Accept all (primary) / Reject non-essential (secondary) plus a quiet privacy-policy link. Hides on first interaction and writes a localStorage flag so it never re-appears for the same visitor. Honours `prefers-reduced-motion`. ============================================================ */ .hoa-cookie { position: fixed; z-index: 10000; right: clamp(16px, 2.4vw, 28px); bottom: clamp(16px, 2.4vw, 28px); max-width: min(420px, calc(100vw - 32px)); padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 28px); background: rgba(10,10,10,0.78); color: rgba(255,255,255,0.92); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(20px) saturate(1.05); -webkit-backdrop-filter: blur(20px) saturate(1.05); box-shadow: 0 24px 64px -16px rgba(0,0,0,0.55); font-family: var(--font-body); font-weight: var(--fw-light, 300); font-size: 0.875rem; line-height: 1.5; transform: translateY(16px); opacity: 0; transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 480ms cubic-bezier(0.22, 0.61, 0.36, 1); pointer-events: none; } .hoa-cookie.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; } /* Mobile rules moved to AFTER the desktop base rules below — they were here originally but the cascade order let the desktop block override them. See the @media (max-width: 600px) block at the end of this section. */ .hoa-cookie__title { display: block; font-family: var(--font-display); font-weight: var(--fw-thin, 200); font-size: 1.0625rem; margin: 0 0 6px; letter-spacing: -0.01em; color: #fff; } .hoa-cookie__body { margin: 0 0 14px; color: rgba(255,255,255,0.74); } /* Privacy-policy link: editorial double-underline swap on hover. The resting underline retracts as a fresh underline draws in from the left, in time with the cubic-bezier easing the rest of the site uses for hairlines. ============================================== */ .hoa-cookie__body a { position: relative; display: inline-block; color: #fff; text-decoration: none; padding-bottom: 1px; } .hoa-cookie__body a::before, .hoa-cookie__body a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left center; transition: transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1); } .hoa-cookie__body a::before { transform: scaleX(1); } .hoa-cookie__body a::after { transform: scaleX(0); transform-origin: right center; } .hoa-cookie__body a:hover::before { transform: scaleX(0); transform-origin: right center; } .hoa-cookie__body a:hover::after { transform: scaleX(1); transform-origin: left center; transition-delay: 120ms; } .hoa-cookie__row { display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* ---------- Case-study cross-link rail ("Read next") ---------- Sits between the case-study body and the cta-close on the 4 RE marketing engagements (villa-apollon, ck-realtors, estate-prive, punctum-interiors) so a visitor finishing one story has a frictionless path into another. */ .cs-next { background: var(--color-paper, #fafafa); padding: clamp(80px, 9vw, 144px) clamp(var(--space-5), 5vw, var(--space-9)); border-top: 1px solid rgba(10,10,10,0.08); } .cs-next__inner { max-width: 1280px; margin: 0 auto; } .cs-next__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(10,10,10,0.62); font-weight: 500; margin-bottom: clamp(28px, 3vw, 40px); } .cs-next__eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--color-ink, #0a0a0a); border-radius: 999px; } .cs-next__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.4vw, 32px); } @media (max-width: 760px) { .cs-next__grid { grid-template-columns: 1fr; } } .cs-next__card { display: block; text-decoration: none; color: var(--color-ink); background: #fff; border: 1px solid rgba(10,10,10,0.08); transition: border-color 240ms var(--motion-ease), transform 360ms var(--motion-ease); overflow: hidden; } .cs-next__card:hover { border-color: rgba(10,10,10,0.32); transform: translateY(-3px); } .cs-next__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; } .cs-next__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms var(--motion-ease); } .cs-next__card:hover .cs-next__media img { transform: scale(1.04); } .cs-next__body { padding: clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px) clamp(24px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 6px; } .cs-next__name { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.25rem, 1.6vw, 1.625rem); line-height: 1.15; letter-spacing: -0.01em; } .cs-next__hook { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 300; color: rgba(10,10,10,0.62); letter-spacing: 0.02em; } /* ---------- WhatsApp sticky CTA ---------- Fixed bottom-right pill, sitewide except legal pages. Ink fill / paper text per the "no red on the website" lock rule, so the WhatsApp pill reads as part of the brand vocabulary, not a foreign green dot. The element is injected by js/main.js after DOM ready. Hidden while the preloader is up, while a Salt-Cinema player is fullscreen, and when the user prefers reduced motion (the bounce-in is the only motion). */ .wa-sticky { position: fixed; right: clamp(16px, 2.4vw, 28px); bottom: clamp(16px, 2.4vw, 28px); z-index: 95; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 18px 12px 14px; background: var(--color-ink, #0a0a0a); color: #fff; font-family: var(--font-body); font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; text-decoration: none; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 6px 24px -8px rgba(0,0,0,0.45); transition: background 220ms ease, transform 220ms cubic-bezier(0.22, 0.8, 0.24, 1), box-shadow 220ms ease; opacity: 0; transform: translateY(12px); pointer-events: none; animation: wa-sticky-in 520ms cubic-bezier(0.22, 0.8, 0.24, 1) 1.2s forwards; } @keyframes wa-sticky-in { to { opacity: 1; transform: translateY(0); pointer-events: auto; } } .wa-sticky:hover { background: #141414; transform: translateY(-2px); box-shadow: 0 10px 28px -8px rgba(0,0,0,0.55); } .wa-sticky:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .wa-sticky__icon { display: inline-grid; place-items: center; width: 22px; height: 22px; } .wa-sticky__icon svg { width: 22px; height: 22px; } .wa-sticky__label { display: inline-block; } /* Mobile: collapse to icon-only so it doesn't crowd thumb-zone or compete with bottom-anchored UI. */ @media (max-width: 600px) { .wa-sticky { min-height: 52px; width: 52px; padding: 0; justify-content: center; border-radius: 0; } .wa-sticky__label { display: none; } } /* Hide while a Salt-Cinema video is fullscreen, while the preloader is up, and during the intro animation. Reduced-motion users get it instantly instead of the bounce. */ body.is-preloading .wa-sticky, body.is-intro-running .wa-sticky, body:has(.va__vp.is-fullscreen) .wa-sticky { opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .wa-sticky { animation: none; opacity: 1; transform: none; pointer-events: auto; } } .hoa-cookie__btn { font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: var(--fw-medium, 500); padding: 13px 18px; min-height: 44px; cursor: pointer; background: transparent; color: rgba(255,255,255,0.92); border: 1px solid rgba(255,255,255,0.32); transition: background 220ms ease, border-color 220ms ease, color 220ms ease; } .hoa-cookie__btn:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.62); } .hoa-cookie__btn--primary { background: rgba(255,255,255,0.92); color: var(--color-ink, #0a0a0a); border-color: rgba(255,255,255,0.92); } .hoa-cookie__btn--primary:hover { background: #fff; color: var(--color-ink, #0a0a0a); border-color: #fff; } @media (prefers-reduced-motion: reduce) { .hoa-cookie { transition: opacity 240ms ease; transform: none; } } /* Mobile: ultra-compact horizontal strip at the bottom. Title sits inline with the two action buttons in a single row, banner stays ~60px tall, never covers the hero CTAs at 375 / 414 / 540 widths. */ @media (max-width: 600px) { .hoa-cookie { right: 0; left: 0; bottom: 0; max-width: 100vw; padding: 10px 12px; border-left: 0; border-right: 0; border-bottom: 0; font-size: 0.75rem; line-height: 1.3; display: flex; flex-direction: row; align-items: center; gap: 10px; } .hoa-cookie__title { font-size: 0.75rem; font-family: var(--font-body); font-weight: 500; letter-spacing: 0.02em; margin: 0; flex: 1 1 auto; min-width: 0; } .hoa-cookie__body { display: none !important; } .hoa-cookie__row { gap: 6px; margin: 0; flex: 0 0 auto; } .hoa-cookie__btn { padding: 9px 12px; min-height: 40px; font-size: 0.625rem; letter-spacing: 0.12em; white-space: nowrap; } } /* The earlier `right: 12px; left: 12px; bottom: 12px` floating-card override for ≤540px was REMOVED — it was undoing the bottom-strip fix above and pushing the banner back over the hero CTAs at 375 / 414 / 540 widths. */ /* ============================================================ MORE WORK video lightbox — opens when a `.projects-dump__cell` with `data-video-src` is clicked. Native