:root{ --ivory:#faf7f2; --ivory-deep:#f1ebe1; --charcoal:#1c1b19; --charcoal-soft:#4a4640; --stone:#8a857d; --gold:#b08d57; --gold-light:#d7bd8d; --line:#e2dbcd; --dark:#111110; --dark-card:#1c1b19; --maxw:1440px; --pad:clamp(20px,5vw,80px); --serif:'Fraunces',Georgia,serif; --sans:'Inter','Segoe UI',sans-serif; --ease:cubic-bezier(.16,.84,.44,1); } *{box-sizing:border-box;margin:0;padding:0;} /* scroll-behavior:smooth is intentionally NOT set here — Lenis owns smooth scrolling; the two fight each other (double-easing, jitter) if both run. */ body{ font-family:var(--sans);background:var(--ivory);color:var(--charcoal); -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} button{font-family:inherit;} .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);} ::selection{background:var(--gold);color:#fff;} /* ---------- FOCUS + SKIP LINK ---------- One visible focus indicator for every interactive element. Written with :where() so it carries zero specificity: the hand-tuned focus rings further down (.seg, .btn-solid, .pcard) still win, and this is only the floor for everything that had none — the slider arrows, the nav, the card buttons. The dark sections get the lighter gold: --gold on charcoal is too close in luminance to read as a ring. */ :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--gold);outline-offset:3px; } :where(.hero,.stats,.journey,.explore,.testimonials,footer,header.site.on-dark) :where(a,button):focus-visible{ outline-color:var(--gold-light); } /* Keyboard-only escape hatch past the six nav links into the page content. */ .skip-link{ position:fixed;left:var(--pad);top:14px;z-index:400; background:var(--charcoal);color:#fff;padding:13px 22px; font-size:12px;letter-spacing:.12em;text-transform:uppercase; transform:translateY(calc(-100% - 20px));transition:transform .25s var(--ease); } .skip-link:focus{transform:translateY(0);} /* The header is fixed, so an anchor jump would otherwise land its target underneath it. Roughly header height + breathing room. */ main [id]{scroll-margin-top:110px;} h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;} /* ---------- Lenis smooth-scroll resets (darkroomengineering/lenis) ---------- */ 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:hidden; } .lenis.lenis-smooth iframe{ pointer-events:none; } /* ---------- GSAP ScrollTrigger reveal utilities ---------- Hidden by default so there's no flash of fully-visible content before scroll-animations.js runs; GSAP animates opacity/y from this baseline. pointer-events:none blocks hover/click while an element is still invisible pre-reveal (e.g. a .service-row's cursor-follow image preview firing on a hover target you can't see yet) — scroll- animations.js restores it to 'auto' the moment each reveal starts. Everything that starts hidden is scoped to .anim-ready, a class an inline script adds ONLY once it has seen gsap + ScrollTrigger on window. If either CDN fails, the class is never added, none of these rules apply and the page renders as plain readable content instead of a blank one. */ .anim-ready .reveal-up,.anim-ready .reveal-card{opacity:0;pointer-events:none;} /* Headings that animate on load rather than on scroll (hero + page headers). */ .anim-ready [data-reveal="load"]{opacity:0;} /* ---------- NAV ---------- */ header.site{ position:fixed;top:0;left:0;right:0;z-index:200; display:flex;align-items:center;justify-content:space-between; padding:26px var(--pad); background:linear-gradient(to bottom, rgba(250,247,242,.95), rgba(250,247,242,0)); transition:background .5s var(--ease),padding .4s var(--ease); } header.site.scrolled{background:rgba(250,247,242,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line);padding-top:16px;padding-bottom:16px;color:var(--charcoal);} header.site.on-dark:not(.scrolled){color:#fff;} .brand{display:flex;align-items:center;gap:12px;} .brand .mark{width:30px;height:30px;flex:none;} .brand .word{font-family:var(--serif);font-size:19px;letter-spacing:.02em;line-height:1;} .brand .word small{display:block;font-family:var(--sans);font-size:9px;letter-spacing:.32em;color:var(--stone);margin-top:5px;} header.site.on-dark:not(.scrolled) .brand .word small{color:rgba(255,255,255,.65);} /* Uploaded logo (admin → Settings). Height-constrained with width:auto so a wide wordmark-style file and a square monogram both sit correctly against the nav; the inline SVG .mark keeps its own fixed box above. The dark-background variant is swapped in on exactly the states that turn the wordmark white, so the logo always matches the text beside it. */ .brand .brand-logo{height:34px;width:auto;max-width:200px;object-fit:contain;flex:none;} .brand .brand-logo-dark{display:none;} header.site.on-dark:not(.scrolled) .brand .brand-logo{display:none;} header.site.on-dark:not(.scrolled) .brand .brand-logo-dark{display:block;} .nav-links{display:flex;align-items:center;gap:40px;} .nav-links a{font-size:13px;letter-spacing:.05em;position:relative;padding:4px 0;} .nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .35s var(--ease);} .nav-links a:hover::after,.nav-links a.active::after{width:100%;} /* ---------- ABOUT DROPDOWN (desktop) ---------- */ .nav-item{position:relative;} .nav-item > a{display:inline-flex;align-items:center;gap:6px;} .nav-item > a::after{ /* overrides the shared underline rule above: this trigger link is not a page destination in the same sense as its siblings (it opens a menu), so it does not get their persistent-underline "active" treatment. */ content:none; } .nav-item-caret{ width:6px;height:6px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(45deg);transition:transform .3s var(--ease); } .nav-item:hover .nav-item-caret,.nav-item:focus-within .nav-item-caret{transform:rotate(225deg);margin-top:1px;} .nav-dropdown{ position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);min-width:250px; background:#fff;border:1px solid var(--line);border-radius:4px;padding:8px 0; box-shadow:0 24px 48px rgba(17,17,16,.16); /* opacity only, deliberately no visibility:hidden — that would drop these links from the tab order entirely (browsers skip visibility:hidden elements when tabbing), so a keyboard user could never focus into the menu to trigger :focus-within in the first place. Opacity keeps them focusable while still invisible and unclickable until open. */ opacity:0;pointer-events:none; transition:opacity .25s var(--ease),transform .25s var(--ease); } .nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{ opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0); } .nav-dropdown a{display:block;padding:11px 22px;font-size:13px;letter-spacing:.02em;color:var(--charcoal);white-space:nowrap;} .nav-dropdown a:hover,.nav-dropdown a:focus-visible{background:var(--ivory-deep);color:var(--gold);} .nav-cta{ border:1px solid currentColor;padding:11px 24px;font-size:12px;letter-spacing:.1em;text-transform:uppercase; transition:background .35s var(--ease),color .35s var(--ease); } .nav-cta:hover{background:var(--charcoal);color:#fff;border-color:var(--charcoal);} header.site.on-dark:not(.scrolled) .nav-cta:hover{background:#fff;color:var(--charcoal);border-color:#fff;} .nav-right{display:flex;align-items:center;gap:34px;} /* ---------- MOBILE NAV ---------- Below 900px the six links have nowhere to go, so they move into a full-screen panel behind a hamburger. The panel sits BELOW the header in z-order (190 vs 200) on purpose: the brand and the toggle stay visible and clickable on top of it, so the button you opened it with is the button you close it with. */ .nav-toggle{ display:none;width:44px;height:44px;margin-right:-10px; border:0;background:none;color:inherit;cursor:pointer; flex-direction:column;align-items:center;justify-content:center;gap:6px; } .nav-toggle span{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),opacity .3s var(--ease);} /* 6px gap + 1.5px bar = each bar is 3.75px off centre; meet there, then cross. */ .nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg);} .nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg);} .mobile-nav{ position:fixed;inset:0;z-index:190;background:var(--ivory); display:flex;flex-direction:column; padding:112px var(--pad) max(40px, env(safe-area-inset-bottom)); overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; opacity:0;visibility:hidden; transition:opacity .45s var(--ease),visibility .45s var(--ease); } .mobile-nav.is-open{opacity:1;visibility:visible;} .mobile-nav nav{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:auto;flex:none;} .mobile-nav nav > a,.mnav-toggle{ font-family:var(--serif);font-size:clamp(26px,7.5vw,40px);font-weight:400; padding:15px 0;border-bottom:1px solid var(--line); transition:color .3s var(--ease); } .mobile-nav nav > *{ opacity:0;transform:translateY(16px); transition:opacity .5s var(--ease),transform .5s var(--ease); } .mobile-nav nav > a:hover,.mobile-nav nav > a:focus-visible,.mnav-toggle:hover,.mnav-toggle:focus-visible{color:var(--gold);} /* Rows land one after another once the panel itself has faded in. */ .mobile-nav.is-open nav > *{opacity:1;transform:none;} .mobile-nav.is-open nav > *:nth-child(2){transition-delay:.05s;} .mobile-nav.is-open nav > *:nth-child(3){transition-delay:.10s;} .mobile-nav.is-open nav > *:nth-child(4){transition-delay:.15s;} .mobile-nav.is-open nav > *:nth-child(5){transition-delay:.20s;} .mobile-nav.is-open nav > *:nth-child(6){transition-delay:.25s;} .mobile-nav.is-open nav > *:nth-child(7){transition-delay:.30s;} .mobile-nav.is-open nav > *:nth-child(8){transition-delay:.35s;} /* ---------- ABOUT ACCORDION (mobile) — tapping "About" expands its six sub-links inline within the same panel; there is no hover state to hang a dropdown off on a touch device. */ .mnav-group{border-bottom:1px solid var(--line);} .mnav-toggle{ display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%; background:none;border:0;border-bottom:0;cursor:pointer;color:inherit;font-family:inherit;text-align:left; } .mnav-toggle{opacity:1;transform:none;} .mnav-caret{ width:12px;height:12px;flex:none;border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg);transition:transform .35s var(--ease); } .mnav-group.is-open .mnav-caret{transform:rotate(225deg);} .mnav-sub{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);} .mnav-group.is-open .mnav-sub{max-height:1200px;} .mnav-sub a{ display:block;font-family:var(--sans);font-size:16px;padding:13px 0 13px 4px; border-top:1px solid var(--line);color:var(--charcoal-soft);transition:color .3s var(--ease); } .mnav-sub a:hover,.mnav-sub a:focus-visible{color:var(--gold);} .mobile-nav-foot{ margin-top:36px;margin-bottom:auto;padding-top:4px;flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:20px; opacity:0;transition:opacity .5s var(--ease) .4s; } .mobile-nav.is-open .mobile-nav-foot{opacity:1;} .mobile-nav-foot .contact-line{font-size:14px;line-height:1.9;color:var(--charcoal-soft);} .mobile-nav-foot .contact-line a:hover{color:var(--gold);} /* The header may be sitting in its white-on-photography state when the panel opens over it — against ivory that brand mark would be invisible. */ body.nav-open header.site,body.nav-open header.site.on-dark{color:var(--charcoal);background:none;box-shadow:none;} body.nav-open header.site.on-dark .brand .word small{color:var(--stone);} body.nav-open header.site.on-dark .brand .brand-logo{display:block;} body.nav-open header.site.on-dark .brand .brand-logo-dark{display:none;} /* Fallback lock for when Lenis is not running (reduced motion, CDN failure); normally main.js stops Lenis, which is what actually holds the page still. */ body.nav-open{overflow:hidden;} @media (max-width:900px){ .nav-links{display:none;} .nav-toggle{display:flex;} } @media (min-width:901px){ .mobile-nav{display:none;} } /* Brand + Enquire + hamburger is one element too many on a narrow phone; the CTA is repeated at the foot of the panel, so it is the one that goes. */ @media (max-width:560px){ .nav-cta{display:none;} .nav-right{gap:16px;} } /* ---------- PAGE HEADER (non-home pages: photographic hero band) ---------- The charcoal stays as the base colour so the band is never bare while the photograph loads, and so the text keeps its contrast if the image 404s. */ .page-header{ position:relative;overflow:hidden;isolation:isolate; padding:200px var(--pad) 110px;background:var(--charcoal);color:#fff; } /* The bleed IS the parallax travel budget — scroll-animations.js measures it off this element rather than being told a number, so changing the inset here changes how far the image may drift and nothing else needs updating. */ .page-header-media{ position:absolute;inset:-14% -2%;z-index:0; background-size:cover;background-position:center;background-color:var(--charcoal); will-change:transform; } /* Two stacked scrims, not one. A vertical-only scrim has to be dark enough for the worst case anywhere on the row, which flattens the whole photograph — and these images vary from night skyline to bright white interior. The copy is left-aligned, so the horizontal pass darkens only the column it actually sits in, leaving the right-hand side of the image to read. Combined opacity behind the body text lands around .84, which keeps it legible over the brightest of the six images. */ .page-header::after{ content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(90deg,rgba(17,17,16,.72) 0%,rgba(17,17,16,.30) 50%,rgba(17,17,16,.18) 100%), linear-gradient(180deg,rgba(17,17,16,.86) 0%,rgba(17,17,16,.55) 45%,rgba(17,17,16,.90) 100%); } .page-header > .wrap{position:relative;z-index:2;} .page-header .intro-tag{color:var(--gold-light);} .page-header h1,.page-header h2{font-size:clamp(34px,5.2vw,64px);font-weight:400;max-width:20ch;} .page-header p{margin-top:20px;font-size:15px;line-height:1.8;color:rgba(255,255,255,.75);max-width:560px;} @media (max-width:700px){ .page-header{padding-top:150px;padding-bottom:80px;} } /* ---------- HERO (parallax-layered slider: autoplay + arrows/dots, mouse-parallax depth, never touches scroll) ---------- */ .hero{position:relative;background:var(--charcoal);height:100vh;height:100svh;overflow:hidden;} .hero-pin{position:relative;height:100%;overflow:hidden;} .hero-layer{position:absolute;inset:0;will-change:transform;} /* scroll-exit parallax wrapper */ /* Swiper crossfades the slides (effect:'fade'); it writes opacity/z-index as inline styles straight onto .swiper-slide, so every animation of ours lives on inner wrappers Swiper never touches. Ownership is strictly split so nothing writes the same property twice: .swiper-slide → Swiper (opacity, z-index) .hero-slide → GSAP (per-slide entrance: transform + filter) .bg-blur → GSAP (mouse drift x/y, slow Ken Burns scale) .bg-zoom → plain CSS (static; never transformed) */ .hero-swiper{position:absolute;inset:0;} .hero-slide{position:absolute;inset:0;width:100%;height:100%;will-change:transform,filter;} /* Blurred, over-scaled copy of the same photo — it fills the space the contained image leaves at the sides instead of a hard letterbox bar. The generous -16% bleed is what the entrance transitions are sized against: the widest of them shifts the slide 14% and shrinks it to 0.88, and the bleed has to still cover the viewport at that extreme, including the blur's own soft edge. */ .bg-blur{ position:absolute;inset:-16%; background-size:cover;background-position:center;background-color:#332d22; filter:blur(30px) saturate(1.2) brightness(.68); transform:scale(1.06); will-change:transform; } /* The photo itself: `contain`, never transformed, never drifted — so the full frame is visible at rest no matter the viewport's aspect ratio. */ .bg-zoom{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;background-position:center;} /* `contain` only shows the photo off while the viewport is somewhere near the photo's own 3:2. Once the viewport is taller than it is wide, the contained photo collapses into a thin band sitting behind the headline — the whole frame is technically visible and none of it is readable. Below 0.9 (portrait phones and tablets) it falls back to `cover`. .bg-blur is deliberately still painted underneath: invisible at rest, but it is what the entrance transitions bleed into when they shift or shrink the slide. */ @media (max-aspect-ratio: 9/10){ .bg-zoom{background-size:cover;} } .hero-scrim{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(17,17,16,.5) 0%,rgba(17,17,16,.12) 38%,rgba(17,17,16,.58) 100%);pointer-events:none;} /* No CSS transition on transform here: home.js scrubs y/opacity on this element off scroll position, and a .35s transition would make every scrubbed frame chase the previous one — the copy lags the photo plate it is supposed to be moving against. */ .hero-content{position:relative;z-index:5;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad) 76px;color:#fff;} .hero-eyebrow{font-size:12px;letter-spacing:.32em;text-transform:uppercase;opacity:.8;margin-bottom:14px;overflow:hidden;} .hero-eyebrow span{display:inline-block;transform:translateY(100%);animation:riseIn .8s var(--ease) .2s forwards;} .hero-label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);margin-bottom:22px;opacity:1;transition:opacity .3s ease;min-height:1.2em;} /* No .line wrappers any more: SplitText builds the per-line masks and the per-letter pieces at runtime, and GSAP staggers them — see the letter stagger section of scroll-animations.js. The eyebrow keeps its CSS keyframe because it is a single line rising as one piece, not a stagger. */ .hero h1{ font-size:clamp(40px,7.4vw,108px);font-weight:300;line-height:.98;letter-spacing:-.01em;max-width:16ch; } @keyframes riseIn{ to{transform:translateY(0);} } .hero-foot{display:flex;align-items:flex-end;justify-content:space-between;margin-top:44px;gap:24px;flex-wrap:wrap;} .hero-sub{max-width:420px;font-size:15px;line-height:1.7;opacity:.85;font-weight:300;} .hero-nav{display:flex;align-items:center;gap:22px;} .hero-dots{display:flex;gap:10px;--swiper-pagination-bullet-horizontal-gap:0px;} .hero-dots .swiper-pagination-bullet{ width:22px;height:2px;border-radius:0;background:rgba(255,255,255,.35);opacity:1; transition:background .3s,width .3s;cursor:pointer; } .hero-dots .swiper-pagination-bullet-active{background:#fff;width:38px;} .hero-arrows{display:flex;gap:10px;} .hero-arrows button{ width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:none;color:#fff; cursor:pointer;transition:.3s;font-size:15px;display:flex;align-items:center;justify-content:center; } .hero-arrows button:hover{background:#fff;color:var(--charcoal);} .hero-scroll-cue{ position:absolute;right:32px;top:50%;transform:translateY(-50%);z-index:5;color:#fff;pointer-events:none; font-size:11px;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:12px;opacity:.6; } .hero-scroll-cue .line{width:1px;height:40px;background:rgba(255,255,255,.35);position:relative;overflow:hidden;} .hero-scroll-cue .line::after{content:'';position:absolute;left:0;top:-100%;width:100%;height:50%;background:#fff;animation:cueMove 1.9s ease-in-out infinite;} @keyframes cueMove{ 0%{top:-60%;} 60%{top:110%;} 100%{top:110%;} } @media (max-width:760px){ .hero-scroll-cue{display:none;} .hero-foot{flex-direction:column;align-items:flex-start;} } /* ---------- INTRO ---------- */ .intro{padding:160px var(--pad) 120px;} .intro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center;} .intro-tag{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:26px;display:block;} .intro h2{font-size:clamp(28px,3.4vw,44px);font-weight:400;line-height:1.28;color:var(--charcoal);} .intro h2 em{font-style:italic;color:var(--gold);} .intro-media{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:2px;} /* max-width:none defeats the global img{max-width:100%} reset. Without it this image is capped back to 100% while its inset still pulls it 10% left, so it sits short of the container's right edge and has no horizontal headroom for the parallax to move into. Same for the two cards below. */ .intro-media img{position:absolute;inset:-10% -10% -10% -10%;width:120%;height:120%;max-width:none;object-fit:cover;will-change:transform;} .intro-media .badge{ position:absolute;left:-26px;bottom:-26px;background:var(--charcoal);color:#fff;padding:26px 30px; font-family:var(--serif);z-index:3; } .intro-media .badge .n{font-size:34px;line-height:1;color:var(--gold-light);} .intro-media .badge .l{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-top:8px;} .intro-foot{margin-top:44px;display:flex;gap:50px;flex-wrap:wrap;} .intro-foot div{font-size:14px;line-height:1.7;color:var(--charcoal-soft);max-width:220px;} .intro-foot strong{display:block;font-family:var(--serif);font-size:15px;color:var(--charcoal);margin-bottom:6px;font-weight:500;} .link-arrow{ display:inline-flex;align-items:center;gap:10px;margin-top:44px;font-size:12px;letter-spacing:.12em;text-transform:uppercase; color:var(--charcoal);padding-bottom:5px;transition:gap .3s var(--ease),color .3s var(--ease); /* currentColor, not --charcoal: this link is also used on the dark journey chapters and page headers, where a hard-coded charcoal rule stayed behind as a near-invisible line under recoloured text. Now the underline always follows whatever colour the context sets. */ border-bottom:1px solid currentColor; } .link-arrow:hover{gap:16px;} /* On photography the charcoal default was dark-on-dark and effectively unreadable — "Follow the build →" on the journey chapters was the worst of it, sitting over the bottom of a full-bleed image. */ .journey-content .link-arrow,.page-header .link-arrow,.pd-hero .link-arrow,.map-info .link-arrow{color:var(--gold-light);} .journey-content .link-arrow:hover,.page-header .link-arrow:hover,.pd-hero .link-arrow:hover,.map-info .link-arrow:hover{color:#fff;} @media (max-width:900px){ .intro-grid{grid-template-columns:1fr;gap:50px;} .intro-media{order:-1;} } /* ---------- MARQUEE ---------- */ .marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;overflow:hidden;white-space:nowrap;} .marquee-track{display:inline-flex;animation:scrollLeft 30s linear infinite;} .marquee-track span{font-family:var(--serif);font-style:italic;font-size:clamp(16px,2vw,26px);padding:0 26px;color:var(--charcoal-soft);white-space:nowrap;} .marquee-track span.dot{font-family:var(--sans);font-style:normal;color:var(--gold);} .marquee:hover .marquee-track{animation-play-state:paused;} @keyframes scrollLeft{ from{transform:translateX(0);} to{transform:translateX(-50%);} } /* ---------- STATS (parallax banner) ---------- */ .stats{position:relative;height:80vh;min-height:520px;overflow:hidden;display:flex;align-items:center;} .stats-bg{position:absolute;inset:-12% -2%;background-size:cover;background-position:center;will-change:transform;} .stats::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,16,.72),rgba(17,17,16,.82));} .stats-inner{position:relative;z-index:2;width:100%;color:#fff;} .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 20px;text-align:left;} .stat .num{font-family:var(--serif);font-size:clamp(36px,4.6vw,58px);color:var(--gold-light);font-weight:400;} .stat .label{margin-top:10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.75;line-height:1.6;} @media (max-width:800px){ .stats-grid{grid-template-columns:repeat(2,1fr);} } /* ---------- FEATURED DEVELOPMENTS SLIDER (home page teaser) ---------- A button-driven peek carousel — one large card in view plus the next card's edge, so it reads as a gallery without hijacking page scroll the way the dedicated Projects page's pinned track does. */ .featured{padding:150px var(--pad);} .featured-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:50px;} .featured-controls{display:flex;align-items:center;gap:20px;flex-wrap:wrap;} .featured-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:4px;gap:2px;} .featured-toggle button{ border:none;background:none;padding:9px 18px;font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--charcoal-soft);border-radius:999px;cursor:pointer;transition:background .3s,color .3s; } .featured-toggle button.active{background:var(--charcoal);color:#fff;} .featured-nav{display:flex;gap:14px;} .featured-nav button{ width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--charcoal); cursor:pointer;transition:.3s;font-size:16px; } .featured-nav button:hover{background:var(--charcoal);color:#fff;border-color:var(--charcoal);} .featured-swiper{overflow:hidden;} /* Swiper's own base CSS already sets this, kept explicit for clarity */ .feature-card{ /* The cards' photos are lazy-loaded, and the ones waiting off to the right have not been fetched yet — this is the plate they sit on until they are, so a slide never opens on bare white. */ position:relative;width:min(58vw,680px);height:62vh;height:62svh;min-height:400px;overflow:hidden;border-radius:2px;background:var(--ivory-deep); box-shadow:0 0 0 rgba(17,17,16,0);transition:box-shadow .6s var(--ease); } .feature-card.swiper-slide-active{box-shadow:0 40px 80px rgba(17,17,16,.28);} .feature-card img{position:absolute;inset:-8%;width:116%;height:116%;max-width:none;object-fit:cover;transition:transform .8s var(--ease);} .feature-card:hover img{transform:scale(1.05);} .feature-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,16,0) 42%,rgba(17,17,16,.82) 100%);} .feature-copy{position:absolute;left:34px;right:34px;bottom:32px;color:#fff;z-index:2;} .feature-copy .cat{font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.8;} .feature-copy h3{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);font-weight:400;margin:8px 0 4px;} .feature-copy .loc{display:block;font-size:13px;opacity:.75;margin-bottom:22px;} .feature-btn{ display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff; border:1px solid rgba(255,255,255,.55);padding:12px 22px;transition:background .3s,color .3s,gap .3s; } .feature-btn:hover{background:#fff;color:var(--charcoal);gap:16px;} .featured-dots{display:flex;gap:8px;margin-top:40px;--swiper-pagination-bullet-horizontal-gap:0px;} .featured-dots .swiper-pagination-bullet{width:6px;height:6px;border-radius:50%;background:var(--line);opacity:1;transition:.3s;cursor:pointer;} .featured-dots .swiper-pagination-bullet-active{background:var(--gold);width:22px;border-radius:4px;} @media (max-width:700px){ .feature-card{width:82vw;height:52vh;height:52svh;} } /* ---------- FEATURED PROJECTS (horizontal scroll) ---------- */ .projects-h{position:relative;background:var(--ivory-deep);} .projects-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;} .projects-head{padding:70px var(--pad) 30px;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;} .projects-head .intro-tag{margin-bottom:14px;} .projects-head h2{font-size:clamp(30px,4vw,52px);font-weight:400;} .projects-progress{width:220px;height:2px;background:var(--line);position:relative;overflow:hidden;} .projects-progress i{position:absolute;left:0;top:0;height:100%;width:20%;background:var(--gold);transition:width .1s linear;} .projects-track{display:flex;gap:34px;padding:10px var(--pad) 0;flex:1;align-items:center;will-change:transform;} .project-card{position:relative;flex:0 0 auto;width:min(64vw,760px);height:66vh;min-height:400px;overflow:hidden;border-radius:2px;} .project-card img{position:absolute;inset:-8%;width:116%;height:116%;max-width:none;object-fit:cover;transition:transform .8s var(--ease);} .project-card:hover img{transform:scale(1.04) translate(0,0);} .project-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,16,0) 45%,rgba(17,17,16,.78) 100%);} .project-copy{position:absolute;left:30px;right:30px;bottom:26px;color:#fff;z-index:2;} .project-copy .cat{font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.8;} .project-copy h3{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);font-weight:400;margin:8px 0 4px;} .project-copy .loc{font-size:13px;opacity:.75;} .project-view{ position:absolute;top:22px;right:22px;z-index:2;width:46px;height:46px;border-radius:50%; border:1px solid rgba(255,255,255,.55);color:#fff;display:flex;align-items:center;justify-content:center; opacity:0;transform:translateY(-8px);transition:opacity .35s,transform .35s; } .project-card:hover .project-view{opacity:1;transform:translateY(0);} @media (max-width:700px){ .project-card{width:82vw;height:56vh;} } /* ---------- PORTFOLIO (filterable grid: status / type / location / search) ---------- */ .portfolio{padding:130px 0 150px;background:var(--ivory);} .portfolio-head{margin-bottom:44px;} .portfolio-head h2{font-size:clamp(30px,4vw,52px);max-width:18ch;} .filters{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0;display:flex;flex-direction:column;gap:26px;} .filter-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:34px;} .filter-row-lower{gap:22px;} .filter-field{border:0;display:flex;flex-direction:column;gap:11px;min-width:0;} .filter-field-grow{flex:1 1 240px;} .filter-field legend,.filter-label{ font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);padding:0; } /* Segmented control. The radio itself is taken out of flow rather than set to display:none — display:none would drop it out of the tab order and off the accessibility tree, taking the arrow-key group navigation with it. */ .seg{display:flex;flex-wrap:wrap;gap:8px;} .seg input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;} /* Two markup shapes share this control: the portfolio filters are radio + label pairs, the partner page's audience switch is role="tab" buttons. They style together so the two controls are visually identical, and each keeps the selected-state hook its own semantics provide — :checked for the radios, aria-selected for the tabs. */ .seg label,.seg > button{ cursor:pointer;user-select:none;padding:10px 20px;border:1px solid var(--line);border-radius:999px; font-family:inherit;font-size:13px;color:var(--charcoal-soft);background:transparent; transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease); } .seg label:hover,.seg > button:hover{border-color:var(--gold);color:var(--charcoal);} .seg input:checked + label,.seg > button[aria-selected="true"]{background:var(--charcoal);border-color:var(--charcoal);color:#fff;} /* For the radios focus lives on the label, because the input is visually hidden; the tab buttons take focus themselves. */ .seg input:focus-visible + label,.seg > button:focus-visible{outline:2px solid var(--gold);outline-offset:2px;} .filter-select,.filter-search{ font-family:inherit;font-size:14px;color:var(--charcoal);background:#fff; border:1px solid var(--line);border-radius:2px;padding:12px 14px;min-width:200px;width:100%; transition:border-color .25s var(--ease); } .filter-select:focus,.filter-search:focus{outline:none;border-color:var(--gold);} .filter-select{ appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--stone) 50%),linear-gradient(135deg,var(--stone) 50%,transparent 50%); background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px); background-size:5px 5px,5px 5px;background-repeat:no-repeat; } .filter-clear{ cursor:pointer;border:1px solid var(--line);background:transparent;border-radius:999px; padding:12px 24px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--charcoal-soft); transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease); } .filter-clear:hover{background:var(--charcoal);border-color:var(--charcoal);color:#fff;} .filter-clear:focus-visible{outline:2px solid var(--gold);outline-offset:2px;} .filter-count{margin:26px 0 34px;font-size:13px;color:var(--stone);letter-spacing:.02em;} .portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px;} @media (max-width:1000px){ .portfolio-grid{grid-template-columns:repeat(2,1fr);} } @media (max-width:640px){ .portfolio-grid{grid-template-columns:1fr;} .filter-row{gap:22px;} } .pcard.is-filtered-out{display:none;} .pcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden;display:flex;flex-direction:column;} .pcard-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ivory-deep);} .pcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);} .pcard:hover .pcard-media img{transform:scale(1.05);} .pcard-status{ position:absolute;top:16px;left:16px;z-index:2; padding:6px 13px;border-radius:999px;backdrop-filter:blur(6px); font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#fff; } .pcard-status.is-ongoing{background:rgba(176,141,87,.92);} .pcard-status.is-upcoming{background:rgba(28,27,25,.78);} .pcard-status.is-under-construction{background:rgba(150,116,66,.92);} .pcard-status.is-handover{background:rgba(103,95,80,.88);} .pcard-status.is-completed{background:rgba(74,70,64,.85);} .pcard-body{padding:26px 26px 30px;display:flex;flex-direction:column;gap:9px;flex:1;} .pcard-meta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);} .pcard-body h3{font-size:22px;line-height:1.24;} .pcard-body p{font-size:14px;line-height:1.75;font-weight:300;color:var(--charcoal-soft);} .portfolio-empty{padding:70px 0;text-align:center;color:var(--stone);font-size:15px;} .portfolio-empty .link-arrow{display:inline-block;margin-left:10px;border:0;background:none;cursor:pointer;font-size:inherit;} /* Stretched link: one real anchor, named by the project title, expanded to cover the whole card. Keeps a single meaningful link in the tab order — wrapping the
would instead put the image, badge and body text inside the link's accessible name. */ .pcard-link::after{content:'';position:absolute;inset:0;z-index:3;} .pcard-link{color:inherit;} .pcard:hover .pcard-link{color:var(--gold);} .pcard:focus-within{outline:2px solid var(--gold);outline-offset:3px;} .pcard-link:focus-visible{outline:none;} /* the card carries the focus ring instead */ /* ---------- PROJECT DETAIL PAGE ---------- */ .pd-hero{ position:relative;overflow:hidden;isolation:isolate; padding:210px var(--pad) 100px;background:var(--charcoal);color:#fff; } .pd-hero::after{ content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(90deg,rgba(17,17,16,.78) 0%,rgba(17,17,16,.34) 52%,rgba(17,17,16,.2) 100%), linear-gradient(180deg,rgba(17,17,16,.84) 0%,rgba(17,17,16,.5) 42%,rgba(17,17,16,.92) 100%); } .pd-hero-inner{position:relative;z-index:2;} /* block + fit-content, not inline-block: the status badge that follows is itself inline-block and would otherwise sit on the same line as the back link instead of starting the stack below it. */ .pd-back{display:block;width:fit-content;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:26px;transition:color .3s;} .pd-back:hover{color:var(--gold-light);} /* The badge is absolutely placed on a card; here it sits in the flow. */ .pd-hero .pcard-status{position:static;display:inline-block;margin-bottom:18px;} .pd-hero h1{font-size:clamp(34px,5.4vw,68px);font-weight:400;max-width:18ch;} .pd-meta{margin-top:18px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);} .pd-summary{margin-top:20px;font-size:16px;line-height:1.8;color:rgba(255,255,255,.8);max-width:60ch;} .pd-facts-band{background:var(--ivory-deep);border-bottom:1px solid var(--line);} .pd-facts{display:grid;grid-template-columns:repeat(5,1fr);gap:30px;padding-top:44px;padding-bottom:44px;} @media (max-width:900px){ .pd-facts{grid-template-columns:repeat(2,1fr);gap:26px;} } .fact dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);margin-bottom:9px;} .fact dd{font-family:var(--serif);font-size:clamp(19px,2.1vw,25px);color:var(--charcoal);} .pd-main{padding:110px 0 40px;} .pd-main-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:80px;align-items:start;} @media (max-width:960px){ .pd-main-grid{grid-template-columns:1fr;gap:56px;} } .pd-body p{font-size:16.5px;line-height:1.9;color:var(--charcoal-soft);margin-bottom:26px;max-width:62ch;} .pd-body p:first-child{font-size:19px;color:var(--charcoal);} .pd-side h3{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);font-weight:500;margin-bottom:18px;} .pd-features{list-style:none;border-top:1px solid var(--line);margin-bottom:38px;} .pd-features li{padding:14px 0 14px 26px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.7;color:var(--charcoal-soft);position:relative;} .pd-features li::before{content:'';position:absolute;left:0;top:22px;width:9px;height:1px;background:var(--gold);} .pd-enquire{display:inline-block;text-align:center;} .pd-progress{margin-bottom:42px;} .pd-progress-track{height:3px;background:var(--line);position:relative;overflow:hidden;} .pd-progress-track i{position:absolute;left:0;top:0;height:100%;background:var(--gold);width:0;transition:width 1.1s var(--ease);} .pd-progress-value{display:block;margin-top:12px;font-size:13px;color:var(--charcoal-soft);} .pd-gallery-section{padding:70px 0 110px;} .pd-gallery-section h2{font-size:clamp(26px,3.4vw,42px);margin-bottom:44px;} .pd-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} @media (max-width:800px){ .pd-gallery{grid-template-columns:1fr;} } .pd-shot{overflow:hidden;border-radius:2px;aspect-ratio:4/3;background:var(--ivory-deep);} /* The first shot spans the full row above the other two — a flat grid of three equal thumbnails reads as a contact sheet rather than a gallery. */ .pd-gallery .pd-shot:first-child{grid-column:1/-1;aspect-ratio:16/7;} @media (max-width:800px){ .pd-gallery .pd-shot:first-child{aspect-ratio:4/3;} } .pd-shot img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);} .pd-shot:hover img{transform:scale(1.04);} .pd-nav{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ivory-deep);} .pd-nav-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;} @media (max-width:640px){ .pd-nav-grid{grid-template-columns:1fr;} } .pd-nav-link{display:flex;flex-direction:column;gap:10px;padding:40px 0;transition:color .3s var(--ease);} .pd-nav-next{text-align:right;align-items:flex-end;} @media (max-width:640px){ .pd-nav-next{text-align:left;align-items:flex-start;border-top:1px solid var(--line);} } .pd-nav-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);} .pd-nav-name{font-family:var(--serif);font-size:clamp(19px,2.4vw,28px);} .pd-nav-link:hover .pd-nav-name{color:var(--gold);} .pd-related-section{padding-top:110px;} /* ---------- AMENITIES (project detail, aside) ---------- */ .pd-amenities{list-style:none;border-top:1px solid var(--line);margin-bottom:38px;display:grid;grid-template-columns:1fr 1fr;} .pd-amenities li{padding:14px 14px 14px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--charcoal-soft);position:relative;padding-left:20px;} .pd-amenities li::before{content:'';position:absolute;left:0;top:22px;width:7px;height:1px;background:var(--gold);} @media (max-width:480px){ .pd-amenities{grid-template-columns:1fr;} } /* ---------- UNIT TABLE (project detail, main column) ---------- */ .pd-units-section{margin:50px 0;} .pd-units-section h2{font-size:clamp(22px,2.6vw,30px);font-weight:400;margin-bottom:24px;} .pd-units-table{width:100%;border-collapse:collapse;font-size:14.5px;} .pd-units-table th,.pd-units-table td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);} .pd-units-table th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);font-weight:500;} .pd-units-table td{color:var(--charcoal-soft);} .pd-units-table tr:first-child th{border-top:1px solid var(--line);} .pd-units-wrap{overflow-x:auto;} /* ---------- FLOOR PLANS + LIGHTBOX (project detail) ---------- */ .pd-floorplans-section{padding:0 0 20px;} .pd-floorplans-section h2{font-size:clamp(22px,2.6vw,30px);font-weight:400;margin-bottom:24px;} .pd-floorplans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} @media (max-width:800px){ .pd-floorplans{grid-template-columns:1fr 1fr;} } @media (max-width:520px){ .pd-floorplans{grid-template-columns:1fr;} } .pd-floorplan{border:1px solid var(--line);background:var(--ivory-deep);cursor:zoom-in;display:block;width:100%;text-align:left;padding:0;} .pd-floorplan img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;} .pd-floorplan span{display:block;padding:12px 16px;font-size:13px;color:var(--charcoal-soft);border-top:1px solid var(--line);} .lightbox{position:fixed;inset:0;z-index:200;background:rgba(17,17,16,.92);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s var(--ease);} .lightbox.is-open{opacity:1;pointer-events:auto;} .lightbox img{max-width:88vw;max-height:82vh;object-fit:contain;} .lightbox-caption{position:absolute;left:0;right:0;bottom:28px;text-align:center;color:rgba(255,255,255,.75);font-size:13px;} .lightbox-close{position:absolute;top:24px;right:28px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;border:0;cursor:pointer;font-size:20px;line-height:1;} .lightbox-close:hover{background:rgba(255,255,255,.2);} /* ---------- BROCHURE (project detail, aside) ---------- */ .pd-brochure{ display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:16px; border:1px solid var(--charcoal);border-radius:999px;padding:15px 28px;font-size:12px;letter-spacing:.14em;text-transform:uppercase; transition:background .3s var(--ease),color .3s var(--ease); } .pd-brochure:hover{background:var(--charcoal);color:#fff;} .pd-brochure svg{width:16px;height:16px;flex:none;} /* ---------- PROGRESS TIMELINE (project detail) ---------- */ .pd-stage-track{display:flex;gap:6px;margin-top:16px;} .pd-stage{flex:1;text-align:center;} .pd-stage-bar{height:4px;background:var(--line);border-radius:2px;margin-bottom:8px;} .pd-stage.is-done .pd-stage-bar,.pd-stage.is-current .pd-stage-bar{background:var(--gold);} .pd-stage-label{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--stone);} .pd-stage.is-done .pd-stage-label,.pd-stage.is-current .pd-stage-label{color:var(--charcoal);} /* ---------- LOCATION MAP (project detail) ---------- */ .pd-map-section{padding:20px 0 110px;} .pd-map-section h2{font-size:clamp(22px,2.6vw,30px);font-weight:400;margin-bottom:24px;} .pd-map-embed{position:relative;aspect-ratio:16/6;overflow:hidden;border-radius:2px;background:var(--ivory-deep);} @media (max-width:700px){ .pd-map-embed{aspect-ratio:4/3;} } .pd-map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.25) contrast(1.05);} /* ---------- INLINE ENQUIRY FORM (project detail) ---------- */ .pd-enquire-section{padding:20px 0 110px;background:var(--ivory-deep);} .pd-enquire-inner{padding-top:110px;} .pd-enquire-head{margin-bottom:40px;max-width:60ch;} .pd-enquire-head h2{font-size:clamp(24px,3vw,36px);font-weight:400;margin-bottom:14px;} .pd-enquire-head p{font-size:15px;line-height:1.8;color:var(--charcoal-soft);} /* ---------- SERVICES (accordion + cursor-follow preview) ---------- */ .services{padding:150px var(--pad);position:relative;} .service-list{margin-top:56px;border-top:1px solid var(--line);} .service-row{ display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:26px; padding:34px 0;border-bottom:1px solid var(--line);cursor:pointer;position:relative; } .service-row .idx{font-family:var(--serif);font-size:14px;color:var(--stone);} .service-row h3{font-size:clamp(22px,3vw,36px);font-weight:400;transition:color .3s,transform .4s var(--ease);} .service-row p{grid-column:2/3;font-size:14px;color:var(--charcoal-soft);max-width:520px;margin-top:10px;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s,margin-top .4s;} .service-row.open p{max-height:80px;opacity:1;margin-top:12px;} .service-row .arrow{font-size:22px;color:var(--gold);transition:transform .4s var(--ease);} .service-row:hover h3{color:var(--gold);transform:translateX(10px);} .service-row.open .arrow{transform:rotate(135deg);} @media (max-width:900px){ .service-row{grid-template-columns:40px 1fr auto;} } /* ---------- TESTIMONIALS ---------- */ .testimonials{margin-top:120px;padding:140px var(--pad);background:var(--charcoal);color:#fff;overflow:hidden;} .testi-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;margin-bottom:70px;} .testi-head .intro-tag{color:var(--gold-light);} .testi-head h2{font-size:clamp(28px,3.6vw,46px);} .testi-nav{display:flex;gap:14px;} .testi-nav button{ width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:none;color:#fff; cursor:pointer;transition:.3s;font-size:16px; } .testi-nav button:hover{background:#fff;color:var(--charcoal);} .testi-swiper{overflow:hidden;} .testi-slide{padding-right:60px;} .testi-slide blockquote{font-family:var(--serif);font-weight:300;font-size:clamp(22px,3vw,36px);line-height:1.5;max-width:850px;} .testi-who{display:flex;align-items:center;gap:16px;margin-top:38px;} .testi-avatar{ width:52px;height:52px;border-radius:50%;overflow:hidden;flex:none; background:linear-gradient(135deg,var(--gold),var(--gold-light));display:flex;align-items:center;justify-content:center; font-family:var(--serif);font-size:17px;color:#111; } .testi-avatar img{width:100%;height:100%;object-fit:cover;} .testi-name{font-size:14px;} .testi-role{font-size:12px;opacity:.6;margin-top:2px;} .testi-dots{display:flex;gap:8px;margin-top:44px;--swiper-pagination-bullet-horizontal-gap:0px;} .testi-dots .swiper-pagination-bullet{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);opacity:1;transition:.3s;cursor:pointer;} .testi-dots .swiper-pagination-bullet-active{background:var(--gold-light);width:22px;border-radius:4px;} /* ---------- OUR JOURNEY (scroll-driven storytelling chapters, home page) ---------- Not a widget to operate (no tabs to click, no cards to filter) — a sequence of full-bleed chapters the visitor scrolls THROUGH, each one a project's moment: video or image (whichever tells it best), a large faint chapter numeral, and text that rises in as it enters view. Plain normal document scroll (no pin/scrub) so it stays perfectly compatible with the Lenis smooth-scroll already driving the rest of the page — the narrative comes from pacing and copy, not from scroll-jacking. */ .journey-head{padding:150px var(--pad) 64px;text-align:center;} .journey-head .intro-tag{display:block;} .journey-head h2{font-size:clamp(28px,3.8vw,46px);max-width:680px;margin:0 auto;} .journey-chapter{position:relative;height:92vh;height:92svh;min-height:580px;overflow:hidden;background:var(--charcoal);} /* -10% bleed is the drift budget for the scrubbed parallax in home.js: the plate travels ±6% of its OWN height, which is 7.2% of the chapter, so the chapter's edge never appears even at the extremes of the scroll — and that holds independently of whatever the image is scaled to inside it. No CSS transform/transition on the media any more: GSAP scrubs the scale off scroll position, and a 6s CSS transition on the same property would fight it frame by frame. */ .journey-media{position:absolute;inset:-10%;will-change:transform;} .journey-media img,.journey-media video{width:100%;height:100%;max-width:none;object-fit:cover;will-change:transform;} .journey-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,16,.18) 0%,rgba(17,17,16,.34) 52%,rgba(17,17,16,.88) 100%);} .journey-num{ position:absolute;top:36px;right:var(--pad);z-index:1;pointer-events:none; font-family:var(--serif);font-size:clamp(70px,11vw,170px);line-height:1;font-weight:300;color:rgba(255,255,255,.09); } .journey-content{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 var(--pad) 84px;color:#fff;} .journey-content-inner{max-width:640px;} .journey-kicker{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light);margin-bottom:20px;} .journey-kicker .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;} .journey-content h3{font-family:var(--serif);font-size:clamp(30px,4.2vw,56px);font-weight:400;line-height:1.08;margin-bottom:20px;} .journey-content p{font-size:15.5px;line-height:1.8;font-weight:300;color:rgba(255,255,255,.82);max-width:520px;margin-bottom:28px;} @media (max-width:700px){ .journey-chapter{height:86vh;height:86svh;} .journey-num{display:none;} } /* ---------- EXPLORE (full-width image + video project slider) ---------- Same crossfade+pop language as the hero, but content-focused: each slide is either an or an autoplaying muted