/* ========================================================= ARYAN CONSTRUCTIONS — Editorial Architectural Cinema Deep ink + warm bone + burnished copper ========================================================= */ /* Google Fonts are loaded from each HTML page via preload + onload swap. That avoids the render-blocking @import that previously sat here. */ /* ===== TOKENS — logo-aligned: charcoal + warm cream + signature red ===== */ :root{ --ink:#221E19; /* warm slate — hero / CTA / footer grounds */ --ink-2:#2B261F; /* slate panel / dark service cards */ --ink-3:#2B2620; /* main dark text on the concrete canvas */ --bone:#E8E3D8; /* concrete — the warm-gray canvas */ --bone-2:#DCD4C5; /* deeper concrete for layered bands */ --paper:#FBF8F2; /* plaster — card surface */ --copper:#D62828; /* unified to logo red (was clay #B4502F) */ --copper-2:#E63946; /* lighter red for dark grounds (was clay #C86B41) */ --copper-d:#B5201C; /* deep red for hovers on light (was clay #8E3D21) */ --line:rgba(245,243,238,.14); /* hairline on slate */ --line-d:rgba(34,30,25,.12); /* hairline on concrete */ --mute:#7A7064; --mute-d:#5E564B; /* body / label text on concrete */ --red:#D62828; /* logo red — reserved for primary actions + logo */ --red-d:#B5201C; --clay:#D62828; /* unified to logo red (was clay #B4502F) */ /* Elevation + tactile corner radius */ --shadow-sm:0 1px 2px rgba(34,30,25,.06), 0 10px 26px -14px rgba(34,30,25,.22); --shadow-md:0 2px 8px rgba(34,30,25,.08), 0 28px 56px -22px rgba(34,30,25,.36); --radius:4px; --serif:'Fraunces', 'Cormorant Garamond', Georgia, serif; --sans:'Inter', system-ui, -apple-system, sans-serif; --mono:'JetBrains Mono', monospace; --ease:cubic-bezier(.65,.05,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-bounce:cubic-bezier(.34,1.56,.64,1); --t-fast:.3s; --t-mid:.6s; --t-slow:1s; --container:1400px; --gutter:clamp(20px, 4vw, 56px); } /* ===== RESET ===== */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--sans); background:var(--ink); color:var(--bone); line-height:1.6; font-size:16px; font-weight:400; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } p+p{margin-top:1em} img{max-width:100%;display:block;height:auto} a{color:inherit;text-decoration:none;transition:color var(--t-fast) var(--ease)} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} ul{list-style:none} input,select,textarea{font:inherit;color:inherit} ::selection{background:var(--copper);color:var(--ink)} /* Visible keyboard focus ring. Copper reads on both the dark hero/nav and the cream content sections. Mouse clicks don't trigger :focus-visible, so this only appears for keyboard/AT users. */ :focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:1px} .nav :focus-visible,.hero :focus-visible,.pg-hero :focus-visible,.footer :focus-visible{outline-color:#fff} /* ===== LOADING SCREEN ===== */ .loader{ position:fixed;inset:0;background:var(--ink);z-index:9999; display:flex;align-items:center;justify-content:center; transition:opacity .25s var(--ease-out), visibility .25s var(--ease-out); overflow:hidden; } .loader::before{ content:'';position:absolute;inset:0; background:radial-gradient(ellipse 800px 600px at center, rgba(214,40,40,.07), transparent 60%); pointer-events:none; } .loader::after{ content:'EST · 2020';position:absolute;left:50%;bottom:32px;transform:translateX(-50%); font-family:var(--mono);font-size:12px;letter-spacing:.32em;text-transform:uppercase; color:rgba(245,239,227,.25); opacity:0;animation:loaderItem .4s var(--ease-out) .45s forwards; } .loader.done{opacity:0;visibility:hidden;pointer-events:none} .loader-inner{ display:flex;flex-direction:column;align-items:center;gap:16px; position:relative;z-index:1; } .loader-logo{ width:auto;height:150px;max-width:320px;object-fit:contain; opacity:0;transform:translateY(8px) scale(.94); animation:loaderLogo .5s var(--ease-out) 0s forwards; } @media(max-width:600px){.loader-logo{height:110px;max-width:240px}} .loader-mark{ font-family:var(--serif);font-size:clamp(34px, 5vw, 46px);font-weight:500;color:var(--copper); letter-spacing:-.02em;line-height:1; opacity:0;transform:translateY(8px); animation:loaderItem .5s var(--ease-out) .08s forwards; } .loader-mark em{font-style:italic;color:var(--copper);font-weight:500} .loader-tag{ font-family:var(--mono);font-size:12px;font-weight:500; letter-spacing:.3em;text-transform:uppercase; color:rgba(245,239,227,.45); opacity:0;transform:translateY(8px); animation:loaderItem .5s var(--ease-out) .18s forwards; } .loader-bar{ width:clamp(220px, 28vw, 320px);height:1px; background:rgba(245,239,227,.1);overflow:hidden;position:relative; margin-top:8px; opacity:0;animation:loaderItem .35s var(--ease-out) .28s forwards; } .loader-bar::before{ content:'';position:absolute;inset:0;background:var(--copper); transform:translateX(-100%); animation:loadBar .55s var(--ease-out) .3s forwards; } .loader-bar::after{ content:'';position:absolute;top:0;left:0;width:40px;height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation:loadShimmer 1s linear .35s infinite; } @keyframes loaderLogo{to{opacity:1;transform:translateY(0) scale(1)}} @keyframes loaderItem{to{opacity:1;transform:translateY(0)}} @keyframes loadBar{to{transform:translateX(0)}} @keyframes loadShimmer{ 0%{transform:translateX(-40px)} 100%{transform:translateX(360px)} } @media(max-width:600px){ .loader-mark{font-size:30px} .loader::after{bottom:24px} } /* Homepage hero eyebrow ('Showing up on time is a competitive advantage.') sits over the dark video — switch from copper to bone (cream/white) so it reads cleanly against the city footage. The little leading line before the text gets the same treatment. */ .hero-content > .eyebrow{color:var(--bone)} .hero-content > .eyebrow::before{background:var(--bone)} /* ===== CUSTOM CURSOR ===== Removed mix-blend-mode: difference — it forces the browser to recompute blend pixels against the underlying frame on every cursor move, which was extremely expensive over the playing hero video (causing the reported cursor lag while hovering the hero, but normal cursor feel after scrolling past). Now uses solid copper colour, which reads well on both the dark hero and the cream content sections, and lets the GPU composite the cursor layer independently of whatever's underneath. */ .cursor,.cursor-ring{ position:fixed;top:0;left:0;pointer-events:none;z-index:9000; border-radius:50%;transform:translate(-50%,-50%); will-change:transform; } .cursor{ width:8px;height:8px;background:var(--copper); transition:width .2s var(--ease), height .2s var(--ease), opacity .2s var(--ease); opacity:.85; } .cursor-ring{ width:36px;height:36px;border:1px solid var(--copper); transition:width .3s var(--ease-out), height .3s var(--ease-out), border-color .3s var(--ease-out), opacity .3s var(--ease-out); opacity:.45; } .cursor.hover{opacity:0} .cursor-ring.hover{width:64px;height:64px;border-color:var(--copper);opacity:1} @media(hover:none),(pointer:coarse){.cursor,.cursor-ring{display:none}} /* ===== CONTAINER ===== */ .container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);position:relative} .container-wide{max-width:1600px;margin:0 auto;padding:0 var(--gutter)} .container-narrow{max-width:920px;margin:0 auto;padding:0 var(--gutter)} /* ===== TYPOGRAPHY ===== Note: tracked-out mono labels (eyebrow, scroll cue, footer bar etc.) bumped from 10/11px to 12px so they pass Lighthouse's 'legible font sizes' SEO audit on mobile. */ .eyebrow{ font-family:var(--mono);font-size:12px;font-weight:500; text-transform:uppercase;letter-spacing:.22em;color:var(--copper); display:inline-flex;align-items:center;gap:12px; } .eyebrow::before{ content:'';width:24px;height:1px;background:var(--copper); } .eyebrow.no-line::before{display:none} .h-display{ font-family:var(--serif);font-weight:700;line-height:1.04;letter-spacing:-.02em; font-size:clamp(44px, 7.4vw, 120px); } .h-display em{font-style:normal;color:var(--copper);font-weight:700} .h-1{ font-family:var(--serif);font-weight:700;line-height:1.06;letter-spacing:-.018em; font-size:clamp(38px, 5.6vw, 84px); } .h-1 em{font-style:normal;color:var(--copper);font-weight:700} .h-2{ font-family:var(--serif);font-weight:700;line-height:1.12;letter-spacing:-.013em; font-size:clamp(30px, 4.2vw, 60px); } .h-2 em{font-style:normal;color:var(--copper);font-weight:700} .h-3{ font-family:var(--serif);font-weight:700;line-height:1.22;letter-spacing:-.008em; font-size:clamp(24px, 2.8vw, 36px); } .h-3 em{font-style:normal;color:var(--copper);font-weight:700} .lead{ font-size:clamp(16.5px, 1.3vw, 20px);line-height:1.58;color:var(--bone); font-weight:300;max-width:62ch; } .lead.dim{color:rgba(242,235,220,.7)} .body{font-size:16px;line-height:1.72;color:rgba(242,235,220,.75);max-width:60ch} .body.dark{color:var(--mute-d)} .rule{width:36px;height:1px;background:var(--copper);margin:22px 0;opacity:.7} .rule.c{margin-left:auto;margin-right:auto} /* ===== BUTTONS ===== */ .btn{ display:inline-flex;align-items:center;gap:14px; padding:18px 28px;font-family:var(--sans);font-size:13px;font-weight:500; text-transform:uppercase;letter-spacing:.14em; border:1px solid transparent; position:relative;overflow:hidden; transition:transform .4s var(--ease-out), color .4s var(--ease-out), background .4s var(--ease-out), border-color .4s var(--ease-out); cursor:pointer; } .btn .arrow{ display:inline-block;width:20px;height:1px;background:currentColor;position:relative; transition:transform .4s var(--ease-out); } .btn .arrow::after{ content:'';position:absolute;right:0;top:50%;width:8px;height:1px;background:currentColor; transform-origin:right;transform:translateY(-50%) rotate(45deg); } .btn .arrow::before{ content:'';position:absolute;right:0;top:50%;width:8px;height:1px;background:currentColor; transform-origin:right;transform:translateY(-50%) rotate(-45deg); } .btn:hover .arrow{transform:translateX(6px)} .btn-primary{background:var(--copper);color:#fff} .btn-primary:hover{background:var(--copper-2);color:#fff} .btn-ghost{border-color:rgba(245,239,227,.3);color:var(--bone)} .btn-ghost:hover{border-color:var(--copper);color:var(--copper-2)} .btn-ghost-dk{border-color:rgba(20,20,20,.2);color:var(--ink)} .btn-ghost-dk:hover{border-color:var(--copper);color:var(--copper)} .btn-ink{background:var(--ink);color:var(--bone)} .btn-ink:hover{background:var(--copper);color:#fff} .btn-mag{transition:transform .35s var(--ease-out)} /* ===== NAVIGATION ===== */ .nav{ position:fixed;top:0;left:0;right:0;z-index:1000; padding:18px 0; transition:padding .4s var(--ease-out), background .4s var(--ease-out); } .nav.scrolled{ padding:12px 0; background:rgba(10,10,10,.85); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--line); } /* Logo on the left, menu group + CTA pushed to the right with margin-left:auto. Gives the logo room to dominate while the nav links cluster cleanly together. */ .nav-inner{display:flex;align-items:center;gap:32px} .nav-logo{ display:flex;align-items:center; flex-shrink:0; } .nav-logo img{ width:auto;height:140px;max-width:380px;object-fit:contain; transition:height .35s var(--ease-out); display:block; } .nav.scrolled .nav-logo img{height:108px} @media(max-width:1100px){ .nav-logo img{height:116px;max-width:300px} .nav.scrolled .nav-logo img{height:88px} } @media(max-width:600px){ .nav-logo img{height:76px;max-width:220px} .nav.scrolled .nav-logo img{height:64px} } .nav-links{ display:flex;align-items:center;gap:14px; margin-left:auto; } .nav-item{position:relative} .nav-link{ display:inline-flex;align-items:center; padding:12px 18px;font-size:13px;font-weight:500; letter-spacing:.04em;color:rgba(242,235,220,.75); position:relative;min-height:44px; } .nav-link::after{ content:'';position:absolute;bottom:6px;left:50%;transform:translateX(-50%); width:0;height:1px;background:var(--copper);transition:width .35s var(--ease-out); } .nav-link:hover,.nav-link.active{color:var(--bone)} .nav-link:hover::after,.nav-link.active::after{width:14px} .nav-cta{ margin-left:14px; display:inline-flex;align-items:center;gap:10px; padding:12px 22px; background:var(--copper);color:#fff; font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; transition:background .35s var(--ease-out); } .nav-cta:hover{background:var(--copper-2);color:#fff} .nav-cta .arrow{ display:inline-block;width:14px;height:1px;background:currentColor;position:relative; transition:transform .35s var(--ease-out); } .nav-cta .arrow::after{ content:'';position:absolute;right:0;top:50%;width:6px;height:1px;background:currentColor; transform-origin:right;transform:translateY(-50%) rotate(45deg); } .nav-cta .arrow::before{ content:'';position:absolute;right:0;top:50%;width:6px;height:1px;background:currentColor; transform-origin:right;transform:translateY(-50%) rotate(-45deg); } .nav-cta:hover .arrow{transform:translateX(4px)} /* Dropdown */ .has-dd{position:relative} .nav-dd{ position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px); min-width:240px;background:rgba(18,18,18,.96);backdrop-filter:blur(20px); border:1px solid var(--line);padding:8px; opacity:0;visibility:hidden; transition:all .35s var(--ease-out); } .has-dd:hover .nav-dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .nav-dd li a{ display:block;padding:12px 16px;font-size:12px; letter-spacing:.06em;color:rgba(242,235,220,.75); transition:color .25s var(--ease), background .25s var(--ease); } .nav-dd li a:hover{color:var(--copper);background:rgba(214,40,40,.06)} /* Burger */ .burger{ display:none;width:36px;height:36px;flex-direction:column;justify-content:center;align-items:center;gap:4px; /* Push to far right of the nav. The .nav-links panel is position:fixed and out of flow when closed, so without margin-left:auto the burger ends up right next to the logo. */ margin-left:auto; /* Stay above the slide-out panel so the X is visible and tappable when open */ position:relative;z-index:2; } .burger span{ display:block;width:22px;height:1px;background:var(--bone);transition:transform .35s var(--ease), opacity .25s, background .25s; } /* Burger spans need to flip to dark when nav is over cream content (otherwise the cream-coloured X disappears). */ .nav.scrolled .burger span{background:var(--ink)} /* When the slide-out panel is open the panel is dark — keep spans cream. */ .burger.open span{background:var(--bone)} /* Keep the open X cream on the dark slide-out panel even after scrolling (higher specificity than the scrolled dark-bars rule above). */ .nav.scrolled .burger.open span{background:var(--bone)} .burger.open span:nth-child(1){transform:translateY(2.5px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-2.5px) rotate(-45deg)} @media (max-width:1100px){ .nav-links{ position:fixed;top:0;right:-100%;height:100vh;width:min(360px,90vw); background:var(--ink-2);flex-direction:column;align-items:stretch; padding:120px 32px 40px;gap:0; transition:right .5s var(--ease-out); border-left:1px solid var(--line); overflow-y:auto; } .nav-links.open{right:0} .nav-link{padding:16px 0;font-size:18px;border-bottom:1px solid var(--line);min-height:52px} .nav-link::after{display:none} .nav-cta{margin:24px 0 0;justify-content:center} /* Has-dropdown parent (Projects) needs space on the right for the +/- indicator */ .has-dd{position:relative} .has-dd > .nav-link{padding-right:40px} .has-dd .nav-link::before{ content:'+';position:absolute;right:0;top:50%; transform:translateY(-50%); width:32px;height:32px;display:flex;align-items:center;justify-content:center; font-family:var(--sans);font-size:22px;font-weight:300;line-height:1; color:var(--copper); transition:transform .25s var(--ease-out); } .has-dd.open .nav-link::before{ content:'−';transform:translateY(-50%) rotate(180deg); } /* Submenu — left border accent so items visually nest under the parent. Bigger tap targets, looser type, no fighting with the indicator. The selectors below use .nav-links .nav-dd to beat the desktop hover rule (.has-dd:hover .nav-dd) which otherwise applies transform:translateX(-50%) and pushes the dropdown off-screen left when the user taps Projects on mobile. */ .nav-links .nav-dd, .nav-links .has-dd:hover .nav-dd, .nav-links .has-dd.open .nav-dd{ position:static; top:auto;left:auto; transform:none; background:none; border:none;border-left:2px solid var(--copper); margin:4px 0 12px 8px; padding:4px 0 4px 18px; opacity:1;visibility:visible; width:auto;min-width:0; backdrop-filter:none; -webkit-backdrop-filter:none; } .nav-links .nav-dd{display:none} .nav-links .has-dd.open .nav-dd{display:block} .nav-dd li{margin:0} .nav-dd li a{ display:flex;align-items:center; padding:12px 0;font-size:15px; letter-spacing:.02em;color:rgba(242,235,220,.7); background:none;min-height:44px; transition:color .25s var(--ease); } .nav-dd li a:hover, .nav-dd li a:focus{color:var(--bone);background:none} .burger{display:flex} } /* ===== HERO ===== */ .hero{ position:relative;min-height:100vh; display:flex;align-items:flex-end; padding:160px 0 80px; overflow:hidden; background:var(--ink); } .hero-bg{ position:absolute;inset:0;overflow:hidden; will-change:transform; } .hero-bg-img{ position:absolute;inset:-4%; background-size:cover;background-position:center; filter:brightness(.72) contrast(1.05) saturate(.95); opacity:0; animation:heroFade 1.4s var(--ease-out) .3s forwards, kenBurns 32s ease-in-out 1.4s infinite alternate; will-change:transform; } @keyframes heroFade{to{opacity:1}} @keyframes kenBurns{ 0%{transform:scale(1.04) translate(0,0)} 100%{transform:scale(1.12) translate(-1.2%, -1%)} } @media(prefers-reduced-motion:reduce){ .hero-bg-img{animation:heroFade 1.4s var(--ease-out) .3s forwards} *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } @media(max-width:900px){ .hero-bg-img{animation:heroFade 1s var(--ease-out) .2s forwards} } .hero-bg-video{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover;object-position:center; /* Default opacity:1 (was 0 + dependent on JS adding .ready). The old dance meant if JS skipped for any reason — reduced-motion, save-data, console error — the video stayed invisible. Now it's visible the instant the browser has any frame to paint. */ opacity:1; pointer-events:none; z-index:1; transform:translateZ(0); /* dedicated compositor layer */ } /* Mobile gets a smaller 540p variant via so it still plays — only hide for reduced-motion users (poster image carries the visual when the user has explicitly opted out of motion). */ @media(prefers-reduced-motion:reduce){.hero-bg-video{display:none}} /* Homepage video-hero poster: render the video's own first frame at the SAME framing (inset:0) and brightness (no filter) as the video itself, so when the clip finishes buffering and paints over the poster there is no visible jump. The generic .hero-bg-img above is zoomed (inset:-4%) and dimmed for the OTHER pages' still-image heroes — this overrides it for the video hero only. */ .hero.hero-scroll .hero-bg-img{ inset:0; filter:none; animation:heroFade 1.4s var(--ease-out) .3s forwards; } /* ===== CINEMATIC HERO with NATIVE scroll-driven animations ===== Same effect as the earlier scroll-scrub (text fades, then video fades into cream), but driven by the browser's native CSS scroll-driven animation engine instead of JS-tied --scroll-p. Why this is smoother: scroll-driven animations are processed on the browser's COMPOSITOR thread, the same one that scrolls the page. They never touch the main thread, never compete with video decoding or cursor handling, never trigger style recalc per frame. The browser literally interpolates animation progress directly from scroll position with zero JS or CSS-calc overhead. Browser support (as of 2026): Chrome/Edge 115+ have it. Safari does not. The @supports rules below collapse the hero to a normal 100vh layout in unsupported browsers — they get a regular hero with the video playing, no fancy effect, but nothing broken. */ /* ===== HERO — sticky pin with quick fade transition ===== Hero is 130vh: 100vh visible + only 30vh of extra pin scroll. That short pin gives just enough room for the text-fade and hero-bg-fade transitions to play out before the section releases and the next chapter appears. No more long pinned dead time. */ .hero.hero-scroll{ display:block;min-height:0; height:130vh; padding:0; overflow:visible; } .hero.hero-scroll .hero-sticky{ position:sticky;top:0; height:100vh;width:100%; display:flex;align-items:flex-end; padding:160px 0 80px; overflow:hidden; } .hero.hero-scroll .hero-merge-bg{ position:absolute;inset:0;z-index:0; background:var(--bone); pointer-events:none; } /* Default — text/meta/scroll cue visible. Video at native size. */ .hero.hero-scroll .hero-content, .hero.hero-scroll .hero-meta, .hero.hero-scroll .scroll-cue{ transition:opacity .4s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); will-change:opacity, transform; } .hero.hero-scroll .hero-bg{ transition:opacity .45s cubic-bezier(.16,1,.3,1); } /* First scroll trigger: text + meta + scroll cue fade up and out */ .hero.hero-scroll.scrolling .hero-content{ opacity:0; transform:translate3d(0,-40px,0); } .hero.hero-scroll.scrolling .hero-meta{ opacity:0; transform:translate3d(0,-24px,0); } .hero.hero-scroll.scrolling .scroll-cue{ opacity:0; } /* Second trigger (a few px later): hero-bg fades, revealing cream merge layer that blends into the next section seamlessly */ .hero.hero-scroll.scrolling-deep .hero-bg{ opacity:0; } /* Mobile + reduced-motion: collapse to a normal hero */ @media(max-width:900px), (prefers-reduced-motion:reduce){ .hero.hero-scroll{ height:auto;padding:140px 0 60px; display:flex;align-items:flex-end; } .hero.hero-scroll .hero-sticky{ position:static;height:auto;padding:0; display:contents; } .hero.hero-scroll .hero-merge-bg{display:none} .hero.hero-scroll.scrolling .hero-content, .hero.hero-scroll.scrolling .hero-meta, .hero.hero-scroll.scrolling .scroll-cue{ opacity:1;transform:none; } .hero.hero-scroll.scrolling-deep .hero-bg{opacity:1} } .hero-bg::after{ content:'';position:absolute;inset:0;z-index:2; /* Strengthened gradient now that the video has no filter — keeps the cinematic look without the per-frame cost. */ background:linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.35) 40%, rgba(10,10,10,.95) 100%); } .hero-grid{ position:relative;z-index:2; display:grid;grid-template-columns:1.4fr .8fr;gap:80px;align-items:end; } .hero-meta{ display:flex;flex-direction:column;gap:24px; padding-bottom:8px; } .hero-meta .meta-row{ display:flex;justify-content:space-between;align-items:baseline;gap:24px; padding-bottom:14px;border-bottom:1px solid var(--line); } .hero-meta .meta-k{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,235,220,.5)} .hero-meta .meta-v{font-family:var(--serif);font-size:18px;color:var(--bone);font-style:italic;font-weight:400;text-align:right} .hero-content{display:flex;flex-direction:column;gap:36px;max-width:900px} .hero-actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px} .scroll-cue{ position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:3; display:flex;flex-direction:column;align-items:center;gap:12px; font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase; color:rgba(242,235,220,.6); } .scroll-cue .line{ width:1px;height:60px;background:linear-gradient(to bottom, transparent, var(--copper));position:relative;overflow:hidden; } .scroll-cue .line::before{ content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:var(--bone); transform:translate3d(0,-100%,0); animation:scrollDown 2s var(--ease) infinite; } /* Animate transform (compositor-only) instead of `top` (layout+paint every frame) — same visual sweep, no per-frame main-thread work. */ @keyframes scrollDown{to{transform:translate3d(0,100%,0)}} @media(max-width:900px){ .hero{padding:140px 0 60px} .hero-grid{grid-template-columns:1fr;gap:48px} .hero-meta{order:2;flex-direction:row;flex-wrap:wrap} .hero-meta .meta-row{flex:1 1 45%;min-width:140px} .scroll-cue{display:none} } /* Page hero */ .pg-hero{ position:relative;min-height:64vh; padding:200px 0 90px;display:flex;align-items:flex-end; overflow:hidden;background:var(--ink); } .pg-hero-bg{ position:absolute;inset:0;background-size:cover;background-position:center; filter:brightness(.4) contrast(1.05); transform:scale(1.04); } .pg-hero-bg::after{ content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(10,10,10,.55),rgba(10,10,10,.95)); } .pg-hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:24px;max-width:920px} .crumb{ font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase; color:rgba(242,235,220,.55);display:flex;gap:10px;align-items:center; } .crumb a{color:rgba(242,235,220,.55)} .crumb a:hover{color:var(--copper)} .crumb span{color:rgba(242,235,220,.3)} /* ===== TESTIMONIALS — auto-scrolling review marquee ===== */ .tst-sec{background:var(--ink);padding:140px 0;position:relative;overflow:hidden} /* faint warm depth in one corner, echoing the other dark sections' atmosphere */ .tst-sec::before{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(58% 48% at 86% 10%, rgba(214,40,40,.08), transparent 68%); } .tst-sec>.container{position:relative;z-index:1} .tst-sec .eyebrow{color:var(--copper-2)} .tst-sec .eyebrow::before{background:var(--copper-2)} /* baseline body text is dark (light site); relight the heading on this dark section */ .tst-sec .h-2{color:var(--bone)} /* full-bleed marquee band with faded edges; cards drift right-to-left */ .tst-marquee{ position:relative;width:100%;overflow:hidden;margin-top:24px; mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); } .tst-track{ display:flex;width:max-content; animation:tstScroll 60s linear infinite;will-change:transform; } /* pause when the visitor hovers so they can read a card */ .tst-marquee:hover .tst-track{animation-play-state:paused} @keyframes tstScroll{to{transform:translateX(-50%)}} /* small review box */ .tst-box{ flex:none;width:min(360px,82vw); display:flex;flex-direction:column;gap:16px; margin:0 8px;padding:30px 30px 28px; background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius); transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease-out); } .tst-box:hover{border-color:var(--copper-2);transform:translateY(-4px)} .tst-box::before{ content:'\201C';font-family:var(--serif);font-style:italic;font-weight:600; font-size:42px;line-height:.9;color:var(--copper-2);opacity:.45; margin-bottom:-12px;pointer-events:none; } .tst-quote{ margin:0;flex:1; font-family:var(--serif);font-weight:400;font-style:italic; font-size:16px;line-height:1.55;letter-spacing:-.005em;color:rgba(242,235,220,.86); } .tst-cite{ display:flex;flex-direction:column;gap:4px;font-style:normal; padding-top:16px;border-top:1px solid var(--line); } .tst-name{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--bone);letter-spacing:.01em} .tst-role{ font-family:var(--mono);font-size:11px;font-weight:500;text-transform:uppercase; letter-spacing:.16em;color:rgba(242,235,220,.5); } @media(max-width:900px){ .tst-sec{padding:90px 0} } @media(max-width:600px){ .tst-sec{padding:64px 0} .tst-box{padding:26px 26px 24px} } /* respect reduced-motion: freeze the drift and let the row be scrolled by hand */ @media(prefers-reduced-motion:reduce){ .tst-track{animation:none} .tst-marquee{overflow-x:auto} } /* ===== STATS ===== */ .stats{ background:var(--ink-2);padding:80px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .stats-grid{ display:flex;gap:8px;justify-content:center; } .stat{ flex:1;text-align:left;padding:24px 32px;border-left:1px solid var(--line); display:flex;flex-direction:column;gap:8px; } .stat:first-child{border-left:none} .stat-n{ font-family:var(--serif);font-size:clamp(48px,5vw,84px);font-weight:300; line-height:1;letter-spacing:-.02em;color:var(--copper); font-variation-settings:'opsz' 96; } .stat-l{ font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:rgba(242,235,220,.6); } @media(max-width:768px){ .stats-grid{flex-wrap:wrap} .stat{flex:0 0 calc(50% - 4px);border-left:none} .stat:nth-child(even){border-left:1px solid var(--line)} .stat:last-child:nth-child(odd):not(:first-child){ flex:0 0 100%;border-left:none;align-items:center;text-align:center; } } @media(max-width:420px){ .stat{flex:0 0 100%;border-left:none;padding:20px 24px} .stat:nth-child(even){border-left:none} } /* ===== SECTIONS ===== */ .section{padding:140px 0;position:relative} .section.sm{padding:90px 0} .section.tight{padding:80px 0} .section.bone{background:var(--bone);color:var(--ink-3)} .section.bone .h-1,.section.bone .h-2,.section.bone .h-3{color:var(--ink-3)} .section.bone .body{color:var(--mute-d)} .section.bone .lead{color:var(--ink-3)} .sec-head{margin-bottom:80px;display:flex;flex-direction:column;gap:24px;max-width:780px} .sec-head.c{margin-left:auto;margin-right:auto;text-align:center;align-items:center} /* ===== ABOUT (HOME) ===== */ .about-h{padding:140px 0;background:var(--ink)} .about-h-grid{ display:grid;grid-template-columns:1.05fr 1fr;gap:90px;align-items:start; } .about-h-img{ position:relative;aspect-ratio:4/5;overflow:hidden; } .about-h-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)} .about-h-img:hover img{transform:scale(1.05)} .about-h-img-frame{ position:absolute;inset:auto -8% -8% auto;width:55%;height:55%; background:linear-gradient(135deg,var(--copper),var(--copper-d));z-index:-1; } .about-h-tag{ position:absolute;bottom:30px;left:30px; background:var(--ink);color:var(--bone);padding:18px 22px; display:flex;flex-direction:column;gap:6px;border-left:2px solid var(--copper); } .about-h-tag .n{font-family:var(--serif);font-size:34px;line-height:1;color:var(--copper);font-weight:300;font-style:italic} .about-h-tag .l{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,235,220,.7)} .about-h-text{display:flex;flex-direction:column;gap:24px} .about-pillars{ display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:14px 0 24px; } .pillar{ padding:16px 18px;border:1px solid var(--line); font-size:13px;font-weight:500;letter-spacing:.04em;color:rgba(242,235,220,.85); display:flex;align-items:center;gap:12px; transition:border-color .35s var(--ease), color .35s var(--ease); } .pillar::before{ content:'';width:6px;height:6px;background:var(--copper); } .pillar:hover{border-color:var(--copper);color:var(--bone)} @media(max-width:900px){ .about-h-grid{grid-template-columns:1fr;gap:60px} } /* ===== SERVICES (HOME) ===== */ .services-h{background:var(--ink);padding:140px 0;position:relative;overflow:hidden} .svc-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:0; border-top:1px solid var(--line); } .svc-card{ position:relative; padding:48px 36px 64px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex;flex-direction:column;gap:24px; min-height:480px; overflow:hidden; transition:background .5s var(--ease); } .svc-card:last-child{border-right:none} .svc-card-bg{ position:absolute;inset:0;background-size:cover;background-position:center; opacity:0;transform:scale(1.1);transition:opacity .8s var(--ease), transform 1.4s var(--ease-out); z-index:0; } .svc-card-bg::after{ content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.4),rgba(10,10,10,.92)); } .svc-card:hover .svc-card-bg{opacity:1;transform:scale(1)} .svc-card>*{position:relative;z-index:1} .svc-num{ font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--copper); } .svc-title{ font-family:var(--serif);font-size:30px;font-weight:300;line-height:1.05;color:var(--bone); letter-spacing:-.01em;margin-top:auto; font-variation-settings:'opsz' 96; } .svc-title em{font-style:italic;color:var(--copper)} .svc-desc{font-size:14px;line-height:1.65;color:rgba(242,235,220,.7)} .svc-link{ margin-top:auto;font-family:var(--mono);font-size:12px;letter-spacing:.18em; text-transform:uppercase;color:var(--copper);display:inline-flex;align-items:center;gap:10px; } .svc-link .arrow{ width:18px;height:1px;background:currentColor;display:inline-block;position:relative; transition:width .35s var(--ease); } .svc-link .arrow::after,.svc-link .arrow::before{ content:'';position:absolute;right:0;top:50%;width:6px;height:1px;background:currentColor; } .svc-link .arrow::after{transform:translateY(-50%) rotate(45deg);transform-origin:right} .svc-link .arrow::before{transform:translateY(-50%) rotate(-45deg);transform-origin:right} .svc-card:hover .svc-link .arrow{width:36px} @media(max-width:1024px){.svc-grid{grid-template-columns:repeat(2,1fr)}.svc-card:nth-child(2n){border-right:none}} @media(max-width:600px){.svc-grid{grid-template-columns:1fr}.svc-card{border-right:none;min-height:380px;padding:36px 24px 48px}} /* ===== FEATURED PROJECTS ===== */ .projects-h{background:var(--bone);padding:140px 0;color:var(--ink-3)} .projects-h .eyebrow{color:var(--copper-d)} .proj-h-head{ display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:60px;flex-wrap:wrap; } .proj-h-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:32px; } .proj-card{ position:relative;display:flex;flex-direction:column;gap:18px;cursor:pointer; } .proj-card .proj-img{ position:relative;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(135deg,var(--ink-3),#2a2520); } .proj-card .proj-img-bg{ position:absolute;inset:0;background-size:cover;background-position:center; transition:transform 1.6s var(--ease-out); } .proj-card .proj-img::after{ content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0) 30%, rgba(10,10,10,.85)); opacity:0;transition:opacity .5s var(--ease); } .proj-card:hover .proj-img-bg{transform:scale(1.08)} .proj-card:hover .proj-img::after{opacity:1} .proj-card .proj-mark{ position:absolute;top:24px;left:24px; font-family:var(--serif);font-size:54px;font-weight:300; color:rgba(242,235,220,.18);font-style:italic;line-height:1;letter-spacing:-.04em; z-index:1; } .proj-card .proj-tag{ position:absolute;top:24px;right:24px; font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--bone);background:rgba(10,10,10,.7);padding:7px 12px;backdrop-filter:blur(10px); z-index:1; } .proj-card .proj-arrow{ position:absolute;bottom:24px;right:24px;width:48px;height:48px;border-radius:50%; background:var(--copper);color:var(--ink);display:flex;align-items:center;justify-content:center; opacity:0;transform:translateY(10px);transition:all .45s var(--ease-out);z-index:1; } .proj-card:hover .proj-arrow{opacity:1;transform:translateY(0)} .proj-card .proj-arrow::after{ content:'→';font-family:var(--serif);font-size:18px; } .proj-card .proj-info{display:flex;flex-direction:column;gap:6px} .proj-card .proj-name{ font-family:var(--serif);font-size:24px;font-weight:400;line-height:1.15;color:var(--ink-3); letter-spacing:-.01em; } .proj-card .proj-meta{ font-size:13px;color:var(--mute-d);font-weight:400;display:flex;gap:8px;align-items:center;flex-wrap:wrap; } .proj-card .proj-meta span.dot{width:3px;height:3px;background:var(--copper);border-radius:50%;display:inline-block} @media(max-width:1024px){.proj-h-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.proj-h-grid{grid-template-columns:1fr}} /* ===== WHY US ===== */ .why{background:var(--ink);padding:140px 0;position:relative;overflow:hidden} .why-grid{display:grid;grid-template-columns:.9fr 1fr;gap:90px;align-items:center} .why-img{position:relative;aspect-ratio:1/1.15;overflow:hidden} .why-img img{width:100%;height:100%;object-fit:cover} .why-img-frame{ position:absolute;inset:auto -6% -6% auto;width:60%;height:60%; border:1px solid var(--copper);z-index:-1; } .why-feats{display:flex;flex-direction:column;gap:8px;margin-top:36px} .why-feat{ display:grid;grid-template-columns:60px 1fr;gap:24px;align-items:start; padding:28px 0;border-top:1px solid var(--line); } .why-feat:last-child{border-bottom:1px solid var(--line)} .why-feat-n{ font-family:var(--serif);font-size:42px;font-weight:300;color:var(--copper); font-style:italic;line-height:1;font-variation-settings:'opsz' 96; } .why-feat h4{ font-family:var(--serif);font-size:22px;font-weight:400;color:var(--bone); margin-bottom:8px;letter-spacing:-.005em; } .why-feat p{font-size:14px;color:rgba(242,235,220,.7);line-height:1.7} @media(max-width:900px){.why-grid{grid-template-columns:1fr;gap:48px}} /* ===== CTA ===== */ .cta{ background:var(--ink);padding:160px 0;text-align:center;position:relative;overflow:hidden; border-top:1px solid var(--line); } .cta::before{ content:'AC';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); font-family:var(--serif);font-size:clamp(280px,40vw,560px);font-weight:300;font-style:italic; color:rgba(214,40,40,.04);line-height:1;letter-spacing:-.04em;pointer-events:none; } .cta-inner{position:relative;display:flex;flex-direction:column;gap:32px;align-items:center;max-width:880px;margin:0 auto} .cta-actions{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:8px} /* ===== FOOTER ===== */ .footer{background:var(--ink-2);padding:100px 0 32px;border-top:1px solid var(--line)} .f-top{ display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:60px; padding-bottom:60px;border-bottom:1px solid var(--line);margin-bottom:32px; } .f-brand{display:flex;flex-direction:column;gap:24px} .f-brand .logo{font-family:var(--serif);font-size:30px;font-weight:500;color:var(--copper);letter-spacing:-.01em} .f-brand .logo em{font-weight:500} .f-brand .logo em{font-style:italic;color:var(--copper);font-weight:400} .f-brand p{font-size:14px;color:rgba(242,235,220,.6);line-height:1.7;max-width:34ch} .f-soc{display:flex;gap:10px;margin-top:8px} .f-soc a{ width:40px;height:40px;border:1px solid var(--line); display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:rgba(242,235,220,.7); transition:all .3s var(--ease); } .f-soc a:hover{border-color:var(--copper);color:var(--copper);background:rgba(214,40,40,.05)} .f-col h4{ font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase; /* Lighter colour: copper-on-ink failed Lighthouse contrast (~3.4:1). bone tone gets ~13:1 against the dark footer background. */ color:rgba(245,239,227,.85);margin-bottom:24px;font-weight:500; } .f-links{display:flex;flex-direction:column;gap:14px} .f-links a{font-size:14px;color:rgba(242,235,220,.7);transition:color .3s var(--ease), padding .3s var(--ease);position:relative;padding-left:0} .f-links a:hover{color:var(--copper);padding-left:14px} .f-links a::before{ content:'→';position:absolute;left:-4px;top:50%;transform:translateY(-50%); opacity:0;transition:all .3s var(--ease);font-size:12px; } .f-links a:hover::before{opacity:1;left:0} .f-contact .ci{display:flex;flex-direction:column;gap:4px;margin-bottom:18px} .f-contact .lbl{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,235,220,.45)} .f-contact .val{font-size:14px;color:rgba(242,235,220,.85);line-height:1.55} .f-contact .val a:hover{color:var(--copper)} .f-bar{ display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap; font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:rgba(242,235,220,.5); } .f-bar a{color:rgba(242,235,220,.5);margin-left:24px} .f-bar a:hover{color:var(--copper)} @media(max-width:1024px){.f-top{grid-template-columns:1fr 1fr;gap:48px}} @media(max-width:600px){.f-top{grid-template-columns:1fr;gap:48px}.f-bar{flex-direction:column;align-items:flex-start}} /* ===== ABOUT PAGE ===== */ .story{padding:140px 0;background:var(--ink)} .story-grid{display:grid;grid-template-columns:.9fr 1fr;gap:90px;align-items:center} .story-img-wrap{position:relative} .story-img{aspect-ratio:4/5;overflow:hidden;position:relative} .story-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease-out)} .story-img-wrap:hover .story-img img{transform:scale(1.06)} .story-floater{ position:absolute;bottom:-30px;right:-30px; background:var(--copper);color:#fff; padding:32px 40px;display:flex;flex-direction:column;gap:6px; border:1px solid var(--copper); } .story-floater .n{font-family:var(--serif);font-size:54px;line-height:1;font-style:italic;font-weight:300} .story-floater .l{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase} .story-text{display:flex;flex-direction:column;gap:24px} .story-text p{font-size:15px;line-height:1.8;color:rgba(242,235,220,.78)} @media(max-width:900px){.story-grid{grid-template-columns:1fr;gap:80px}.story-floater{bottom:-20px;right:0;padding:24px 28px}} /* MVV */ .mvv{background:var(--bone);padding:140px 0;color:var(--ink-3)} .mvv .eyebrow{color:var(--copper-d)} .mvv-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:24px} .mvv-card{ background:#FAF6EC;border:1px solid rgba(10,10,10,.08);padding:48px 36px; display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden; transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out); } .mvv-card:first-child{padding:56px 40px;background:#F0E8D4} .mvv-card:first-child .mvv-ttl{font-size:32px} .mvv-card:nth-child(2){transform:translateY(28px)} @media(max-width:900px){.mvv-card:nth-child(2){transform:none}} .mvv-card::before{ content:'';position:absolute;top:0;left:0;height:2px;width:0;background:var(--copper); transition:width .6s var(--ease-out); } .mvv-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px -16px rgba(10,10,10,.15)} .mvv-card:hover::before{width:100%} .mvv-lbl{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--copper-d)} .mvv-ttl{font-family:var(--serif);font-size:28px;font-weight:400;line-height:1.15;color:var(--ink-3);letter-spacing:-.005em} .mvv-card p{font-size:14px;line-height:1.7;color:var(--mute-d)} @media(max-width:900px){.mvv-grid{grid-template-columns:1fr}} /* Values */ .values{background:var(--ink);padding:140px 0;position:relative;overflow:hidden} .vals-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .val-card:nth-child(odd){transform:translateY(18px)} @media(max-width:1024px){.val-card:nth-child(odd){transform:none}} .val-card{ padding:48px 32px;border:1px solid var(--line); display:flex;flex-direction:column;gap:16px; transition:background .5s var(--ease), border-color .5s var(--ease); position:relative;overflow:hidden; } .val-card::before{ content:'';position:absolute;inset:0;background:radial-gradient(circle at 0% 0%, rgba(214,40,40,.1), transparent 60%); opacity:0;transition:opacity .5s var(--ease); } .val-card:hover{border-color:var(--copper)} .val-card:hover::before{opacity:1} .val-card>*{position:relative} .val-n{ font-family:var(--serif);font-size:54px;font-weight:300;color:rgba(242,235,220,.15); font-style:italic;line-height:1;letter-spacing:-.03em; font-variation-settings:'opsz' 96; transition:color .5s var(--ease); } .val-card:hover .val-n{color:var(--copper)} .val-t{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--bone);letter-spacing:-.005em} .val-card p{font-size:14px;line-height:1.7;color:rgba(242,235,220,.7)} .tech-split{ display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center; max-width:1200px;margin:50px auto 70px; } .tech-img{position:relative} .tech-img .img-reveal{aspect-ratio:4/3;overflow:hidden;position:relative} .tech-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease-out)} .tech-img:hover img{transform:scale(1.04)} .tech-img-frame{ position:absolute;inset:auto -3% -5% auto;width:50%;height:50%; border:1px solid var(--copper);z-index:-1; } .tech-text{display:flex;flex-direction:column;gap:20px} .tech-text p{font-size:16px;line-height:1.72;color:var(--mute-d);margin:0} .tech-closing{ text-align:center;margin:60px auto 0;max-width:760px; font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.5;color:var(--mute-d); } @media(max-width:900px){.tech-split{grid-template-columns:1fr;gap:50px}} @media(max-width:1024px){.vals-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.vals-grid{grid-template-columns:1fr}} /* ===== TEAM PAGE ===== */ .team-sec{padding:140px 0;background:var(--bone);color:var(--ink-3)} .team-sec .eyebrow{color:var(--copper-d)} .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .team-card{ background:#FAF6EC;border:1px solid rgba(10,10,10,.08);overflow:hidden; display:flex;flex-direction:column; transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out); } .team-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px -20px rgba(10,10,10,.18)} .team-photo{ aspect-ratio:4/5;background:linear-gradient(135deg,var(--ink),#2a2520); display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden; } .team-photo::before{ content:'';position:absolute;inset:0; background:radial-gradient(circle at 30% 30%, rgba(214,40,40,.2), transparent 60%); } .team-init{ font-family:var(--serif);font-size:120px;font-weight:300;color:var(--copper); font-style:italic;letter-spacing:-.04em;line-height:1; font-variation-settings:'opsz' 144; position:relative;z-index:1; } .team-photo img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center top;z-index:1; } .team-body{padding:40px 36px 44px;display:flex;flex-direction:column;gap:14px} .team-name{font-family:var(--serif);font-size:30px;font-weight:400;line-height:1;color:var(--ink-3);letter-spacing:-.01em} .team-role{ font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase; color:var(--copper-d); } .team-body p{font-size:14px;line-height:1.7;color:var(--mute-d)} .team-edu{ margin-top:8px;padding-top:18px;border-top:1px solid rgba(10,10,10,.1); font-size:12px;color:var(--mute-d);font-style:italic; } @media(max-width:1024px){.team-grid{grid-template-columns:1fr 1fr}} @media(max-width:680px){.team-grid{grid-template-columns:1fr}} /* Quote */ .quote-sec{ background:var(--ink);padding:140px 0;text-align:center;position:relative;overflow:hidden; } .quote-sec::before{ content:'"';font-family:var(--serif);font-size:520px;line-height:.8; position:absolute;top:-80px;left:50%;transform:translateX(-50%); color:rgba(214,40,40,.05);font-style:italic;font-weight:400; pointer-events:none; } .quote-text{ font-family:var(--serif);font-size:clamp(28px,3.6vw,46px);font-weight:300;font-style:italic; line-height:1.25;color:var(--bone);max-width:920px;margin:0 auto;letter-spacing:-.01em; font-variation-settings:'opsz' 96; position:relative; } .quote-author{margin-top:36px;font-family:var(--serif);font-size:20px;color:var(--copper);font-style:italic;font-weight:400} .quote-role{margin-top:6px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,235,220,.5)} /* ===== SERVICES PAGE ===== */ .svc-page{background:var(--ink);padding:80px 0 40px} .svc-detail{ display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center; padding:80px 0;border-bottom:1px solid var(--line); } .svc-detail:last-child{border-bottom:none} .svc-detail.flip .svc-d-img{order:2} .svc-d-img{position:relative;aspect-ratio:4/5;overflow:hidden} .svc-d-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease-out)} .svc-d-img:hover img{transform:scale(1.06)} .svc-d-num{ position:absolute;top:24px;left:24px;z-index:1; font-family:var(--serif);font-size:80px;font-weight:300;color:var(--bone); font-style:italic;line-height:1;letter-spacing:-.04em;mix-blend-mode:difference; font-variation-settings:'opsz' 144; } .svc-d-text{display:flex;flex-direction:column;gap:24px} .svc-d-text ul{display:flex;flex-direction:column;gap:14px;margin:8px 0} .svc-d-text li{ display:flex;gap:14px;align-items:start;font-size:15px;color:rgba(242,235,220,.78);line-height:1.65; padding-left:22px;position:relative; } .svc-d-text li::before{ content:'';position:absolute;left:0;top:10px;width:12px;height:1px;background:var(--copper); } @media(max-width:900px){ .svc-detail{grid-template-columns:1fr;gap:48px;padding:60px 0} .svc-detail.flip .svc-d-img{order:0} } /* ===== PROJECTS PAGE ===== */ .proj-page{background:var(--ink);padding:80px 0 120px} .proj-filter{ display:flex;flex-wrap:wrap;gap:6px;margin-bottom:60px; padding-bottom:32px;border-bottom:1px solid var(--line); } .f-btn{ padding:12px 22px;background:transparent;color:rgba(242,235,220,.7); font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase; border:1px solid var(--line);transition:all .35s var(--ease); cursor:pointer; } .f-btn:hover{color:var(--bone);border-color:rgba(242,235,220,.3)} .f-btn.on{background:var(--copper);color:var(--ink);border-color:var(--copper)} .proj-block{margin-bottom:80px;scroll-margin-top:90px} .proj-block:last-child{margin-bottom:0} .proj-block-head{ display:flex;justify-content:space-between;align-items:baseline;gap:24px; margin-bottom:48px;padding-bottom:24px;border-bottom:1px solid var(--line); } .proj-block-h{ font-family:var(--serif);font-size:clamp(48px,6vw,84px);font-weight:500; color:var(--bone);letter-spacing:-.02em;line-height:1; } .proj-block-h em{font-style:italic;color:var(--copper);font-weight:800} .proj-block-c{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:rgba(242,235,220,.5);text-transform:uppercase} .proj-divider{ height:1px;background:rgba(20,20,20,.10);margin:96px 0; } .proj-overseas-head{ margin:80px 0 32px;display:flex;flex-direction:column;gap:14px;max-width:680px; } .proj-overseas-head .body{margin:0} .proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .proj-grid .proj-card .proj-name{color:var(--bone)} .proj-grid .proj-card .proj-meta{color:rgba(242,235,220,.6)} .proj-grid .proj-card .proj-meta span.dot{background:var(--copper)} @media(max-width:1024px){.proj-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.proj-grid{grid-template-columns:1fr}} /* Overseas list */ .overseas-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)} .overseas-row{ display:grid;grid-template-columns:80px 1fr auto;gap:24px;align-items:center; padding:32px 24px;border-bottom:1px solid var(--line);border-right:1px solid var(--line); transition:background .35s var(--ease); } .overseas-row:nth-child(2n){border-right:none} .overseas-row:hover{background:rgba(214,40,40,.04)} .overseas-icon{ width:64px;height:64px;border:1px solid var(--copper);display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:14px;color:var(--copper);letter-spacing:.05em; } .overseas-name{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--bone);letter-spacing:-.005em;margin-bottom:4px} .overseas-meta{font-size:12px;color:rgba(242,235,220,.55);font-family:var(--mono);letter-spacing:.06em} .overseas-loc{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--copper)} @media(max-width:768px){.overseas-list{grid-template-columns:1fr}.overseas-row{border-right:none}} /* ===== PROJECT CATEGORY SECTIONS ===== */ .proj-sec-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:60px;padding-bottom:32px;border-bottom:1px solid var(--line)} .proj-sec-btn{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,235,220,.6);padding:10px 20px;border:1px solid var(--line);transition:color .25s,border-color .25s,background .25s;white-space:nowrap;text-decoration:none} .proj-sec-btn:hover{color:var(--bone);border-color:rgba(242,235,220,.5);background:rgba(255,255,255,.04)} .proj-cat{scroll-margin-top:90px} .proj-cat-head{margin-bottom:56px;padding-bottom:36px;border-bottom:1px solid rgba(242,235,220,.1)} .proj-cat-label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,235,220,.3);margin-bottom:12px} .proj-cat-title{font-family:var(--serif);font-size:clamp(32px,4.5vw,56px);font-weight:800;color:var(--bone);line-height:1.1;margin:0 0 16px} .proj-cat-title em{color:var(--copper);font-style:italic} .proj-cat-desc{font-size:15px;color:rgba(242,235,220,.55);line-height:1.65;margin:0;max-width:560px} .proj-cat-divider{height:1px;background:var(--line);margin:80px 0} /* Project tabs */ .proj-tabs{display:flex;gap:0;margin-bottom:64px;border-bottom:1px solid var(--line)} .proj-tab{flex:1;padding:22px 16px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,235,220,.45);text-align:center;cursor:pointer;border:none;background:transparent;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .25s,border-color .25s,background .25s;display:flex;flex-direction:column;align-items:center;gap:6px;white-space:nowrap;font-weight:500} .proj-tab:hover{color:var(--bone);background:rgba(255,255,255,.03)} .proj-tab.active{color:var(--bone);border-bottom-color:var(--copper)} .proj-tab-count{font-size:9px;opacity:.55;letter-spacing:.12em;font-weight:400} .proj-cat{display:none} .proj-cat.active{display:block;animation:projFadeIn .45s var(--ease-out)} @keyframes projFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media(max-width:640px){.proj-tab{padding:14px 6px;font-size:9px;letter-spacing:.1em}.proj-tab-count{font-size:8px}} .nav-dd .dd-cat > a{font-weight:600} .nav-dd .dd-sub > a{padding-left:24px;font-size:12px;color:rgba(242,235,220,.45);letter-spacing:.04em} .nav-dd .dd-sub > a:hover{color:var(--copper);background:rgba(214,40,40,.06)} .nav-dd .dd-sep{height:1px;background:rgba(242,235,220,.1);margin:4px 8px;pointer-events:none} @media(max-width:768px){.proj-sec-nav{gap:6px}.proj-sec-btn{padding:8px 14px;font-size:10px}} /* ===== CHANNEL PARTNERS PAGE ===== */ .cp-intro{background:var(--ink);padding:140px 0} .cp-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center} .cp-intro-img{position:relative;aspect-ratio:4/5;overflow:hidden} .cp-intro-img img{width:100%;height:100%;object-fit:cover} .cp-intro-img-frame{ position:absolute;inset:auto -8% -8% auto;width:60%;height:60%; border:1px solid var(--copper);z-index:-1; } .cp-benefits{background:var(--bone);padding:140px 0;color:var(--ink-3)} .cp-benefits .eyebrow{color:var(--copper-d)} .cp-ben-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .cp-ben{ background:#FAF6EC;border:1px solid rgba(10,10,10,.08);padding:40px 30px; display:flex;flex-direction:column;gap:18px; transition:transform .5s var(--ease-out); } .cp-ben:hover{transform:translateY(-6px)} .cp-ben-n{ font-family:var(--serif);font-size:42px;font-weight:300;color:var(--copper); font-style:italic;line-height:1;letter-spacing:-.02em; font-variation-settings:'opsz' 96; } .cp-ben h4{font-family:var(--serif);font-size:20px;font-weight:400;color:var(--ink-3);letter-spacing:-.005em} .cp-ben p{font-size:14px;line-height:1.7;color:var(--mute-d)} @media(max-width:1024px){.cp-ben-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.cp-ben-grid{grid-template-columns:1fr}} .cp-process{background:var(--ink);padding:140px 0} .cp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)} .cp-step{ padding:48px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line); display:flex;flex-direction:column;gap:18px;position:relative; } .cp-step:last-child{border-right:none} .cp-step-n{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--copper)} .cp-step h4{font-family:var(--serif);font-size:24px;font-weight:400;color:var(--bone);letter-spacing:-.01em} .cp-step p{font-size:14px;line-height:1.7;color:rgba(242,235,220,.7)} @media(max-width:1024px){.cp-steps{grid-template-columns:repeat(2,1fr)}.cp-step:nth-child(2n){border-right:none}} @media(max-width:600px){.cp-steps{grid-template-columns:1fr}.cp-step{border-right:none}} .cp-form-sec{background:var(--bone);padding:140px 0;color:var(--ink-3)} .cp-form-sec .eyebrow{color:var(--copper-d)} .cp-form-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:start} .cp-form-text{display:flex;flex-direction:column;gap:24px;position:sticky;top:120px} .cp-form-text .body{color:var(--mute-d)} .cp-form-list{display:flex;flex-direction:column;gap:14px;margin-top:14px} .cp-form-list li{ display:flex;gap:14px;align-items:start;font-size:14px;color:var(--mute-d); padding-left:22px;position:relative; } .cp-form-list li::before{ content:'';position:absolute;left:0;top:9px;width:12px;height:1px;background:var(--copper); } @media(max-width:1024px){.cp-form-grid{grid-template-columns:1fr;gap:60px}.cp-form-text{position:static}} /* ===== CONTACT / SUPPLIERS / FORMS ===== */ .contact-page{background:var(--ink);padding:140px 0} .contact-grid{display:grid;grid-template-columns:.85fr 1fr;gap:90px;align-items:start} .contact-info{display:flex;flex-direction:column;gap:32px;position:sticky;top:120px} .ci-list{display:flex;flex-direction:column;gap:0;margin-top:8px} .ci-item{ display:grid;grid-template-columns:48px 1fr;gap:20px;align-items:start; padding:24px 0;border-top:1px solid var(--line); } .ci-item:last-child{border-bottom:1px solid var(--line)} .ci-icon{ width:44px;height:44px;border:1px solid var(--copper); display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:14px;color:var(--copper); } .ci-text h3{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,235,220,.55);margin-bottom:8px;font-weight:500} .ci-text p{font-size:15px;color:rgba(242,235,220,.85);line-height:1.55} .ci-text a:hover{color:var(--copper)} .contact-hrs{padding:24px 0;border-top:1px solid var(--line)} .contact-hrs h3{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--copper);margin-bottom:18px} .hrs-row{display:flex;justify-content:space-between;padding:8px 0;font-size:13px;color:rgba(242,235,220,.7)} .hrs-row strong{font-weight:500;color:var(--bone)} @media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:60px}.contact-info{position:static}} /* Forms */ .form-box{ background:var(--ink-2);border:1px solid var(--line);padding:48px 44px; } .form-box.bone{background:#FAF6EC;border-color:rgba(10,10,10,.08);color:var(--ink-3)} .form-box.bone label{color:var(--mute-d)} .form-box.bone input,.form-box.bone select,.form-box.bone textarea{ color:var(--ink-3);border-color:rgba(10,10,10,.15); } .form-box.bone input::placeholder,.form-box.bone textarea::placeholder{color:rgba(10,10,10,.3)} .form-box.bone input:focus,.form-box.bone select:focus,.form-box.bone textarea:focus{border-color:var(--copper-d)} .form-box.bone .form-submit{background:var(--ink);color:var(--bone)} .form-box.bone .form-submit:hover{background:var(--copper);color:#fff} /* File input on bone form */ .form-box.bone input[type="file"]{ padding:14px 0 12px;cursor:pointer;font-family:var(--mono);font-size:12px; color:var(--mute-d); } .form-box.bone input[type="file"]::file-selector-button{ margin-right:14px;padding:9px 16px; background:var(--ink);color:var(--bone); border:none;font-family:var(--mono);font-size:12px; letter-spacing:.14em;text-transform:uppercase;font-weight:500; cursor:pointer;transition:background .3s var(--ease), color .3s var(--ease); } .form-box.bone input[type="file"]::file-selector-button:hover{ background:var(--copper);color:#fff; } /* Inline form hint text */ .form-hint{ display:block;margin-top:8px; font-family:var(--sans);font-size:12px; color:var(--mute-d);font-style:italic;letter-spacing:.01em; } .form-box:not(.bone) .form-hint{color:rgba(245,239,227,.5)} .form-box h3{ font-family:var(--serif);font-size:28px;font-weight:400;line-height:1; margin-bottom:8px;letter-spacing:-.01em;color:inherit; } .form-sub{font-size:13px;color:rgba(242,235,220,.6);margin-bottom:32px} .form-box.bone .form-sub{color:var(--mute-d)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px} .form-g{display:flex;flex-direction:column;gap:8px;margin-bottom:18px} .form-g label{ font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:rgba(242,235,220,.55);font-weight:500; } .form-g input,.form-g select,.form-g textarea{ background:transparent;border:none;border-bottom:1px solid var(--line); padding:14px 0;font-size:15px;color:var(--bone); font-family:var(--sans);outline:none;width:100%; transition:border-color .35s var(--ease); } .form-g input::placeholder,.form-g textarea::placeholder{color:rgba(242,235,220,.3)} .form-g input:focus,.form-g select:focus,.form-g textarea:focus{border-color:var(--copper)} .form-g textarea{resize:vertical;min-height:120px} .form-g select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23D62828' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 8px center;padding-right:28px; } .form-box.bone select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23A8201F' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); } .form-submit{ margin-top:14px;width:100%;padding:18px 28px; background:var(--copper);color:#fff; font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; display:flex;align-items:center;justify-content:center;gap:14px; transition:background .35s var(--ease);cursor:pointer; } .form-submit:hover{background:var(--copper-2);color:#fff} .form-submit .arrow{ width:20px;height:1px;background:currentColor;display:inline-block;position:relative; } .form-submit .arrow::after,.form-submit .arrow::before{ content:'';position:absolute;right:0;top:50%;width:7px;height:1px;background:currentColor; } .form-submit .arrow::after{transform:translateY(-50%) rotate(45deg);transform-origin:right} .form-submit .arrow::before{transform:translateY(-50%) rotate(-45deg);transform-origin:right} .form-msg{ display:none;margin-top:18px;padding:14px 18px;background:rgba(214,40,40,.08); border-left:2px solid var(--copper);font-size:13px;color:var(--bone); } .form-msg.show{display:block;animation:fadeIn .4s var(--ease)} .form-box.bone .form-msg{color:var(--ink-3)} @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} @media(max-width:600px){.form-row{grid-template-columns:1fr;gap:18px}.form-box{padding:36px 28px}} /* Suppliers */ .sup-page{background:var(--ink);padding:140px 0} .sup-grid{display:grid;grid-template-columns:.85fr 1fr;gap:90px;align-items:start} .sup-text{display:flex;flex-direction:column;gap:24px;position:sticky;top:120px} .sup-list{display:flex;flex-direction:column;gap:0;margin-top:14px} .sup-list .row{ display:grid;grid-template-columns:42px 1fr;gap:18px;align-items:start; padding:22px 0;border-top:1px solid var(--line); } .sup-list .row:last-child{border-bottom:1px solid var(--line)} .sup-list .num{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--copper);padding-top:2px} .sup-list h3{font-family:var(--serif);font-size:18px;font-weight:400;color:var(--bone);margin-bottom:6px;letter-spacing:-.005em} .sup-list p{font-size:13px;color:rgba(242,235,220,.65);line-height:1.6} @media(max-width:1024px){.sup-grid{grid-template-columns:1fr;gap:60px}.sup-text{position:static}} /* ===== REVEAL ANIMATIONS ===== */ .reveal{ opacity:0;transform:translateY(36px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay:var(--d, 0ms); } .reveal.in{opacity:1;transform:translateY(0)} .reveal-r{ opacity:0;transform:translateX(-36px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay:var(--d, 0ms); } .reveal-r.in{opacity:1;transform:translateX(0)} .reveal-l{ opacity:0;transform:translateX(36px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay:var(--d, 0ms); } .reveal-l.in{opacity:1;transform:translateX(0)} .reveal-scale{ opacity:0;transform:scale(.96); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay:var(--d, 0ms); } .reveal-scale.in{opacity:1;transform:scale(1)} /* Mask reveal */ .mask{position:relative;overflow:hidden;display:inline-block} .mask>*{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ease-out);transition-delay:var(--d, 0ms)} .mask.in>*{transform:translateY(0)} /* Image reveal (clip) */ .img-reveal{position:relative;overflow:hidden} .img-reveal::after{ content:'';position:absolute;inset:0;background:var(--copper); transform-origin:left; transform:scaleX(1); transition:transform 1.1s var(--ease-out); z-index:2; } .img-reveal img{transform:scale(1.15);transition:transform 1.4s var(--ease-out)} .img-reveal.in::after{transform:scaleX(0);transform-origin:right} .img-reveal.in img{transform:scale(1)} /* ===== UTILS ===== */ .center{text-align:center} .mt-0{margin-top:0!important} .mt-sm{margin-top:14px} .mt-md{margin-top:32px} .mt-lg{margin-top:64px} .mb-md{margin-bottom:32px} .flex{display:flex}.flex-c{display:flex;align-items:center}.flex-b{display:flex;justify-content:space-between;align-items:center} .gap-sm{gap:14px}.gap-md{gap:32px} @media(max-width:600px){ .section{padding:90px 0} .about-h,.services-h,.projects-h,.why,.cta,.story,.mvv,.values,.team-sec,.quote-sec,.svc-page,.proj-page,.cp-intro,.cp-benefits,.cp-process,.cp-form-sec,.contact-page,.sup-page{padding:90px 0} .sec-head{margin-bottom:48px} } /* ========================================================= STORY MODE — chapter rail, scroll progress, chapter intros ========================================================= */ /* Scroll progress bar (top of page) */ .scroll-progress{ position:fixed;top:0;left:0;right:0;height:2px;z-index:1100; background:rgba(245,239,227,.06);transform-origin:left; } .scroll-progress::after{ content:'';position:absolute;inset:0; background:linear-gradient(90deg, var(--copper), var(--copper-2)); transform:scaleX(var(--p,0));transform-origin:left; transition:transform .12s linear; } /* Chapter rail — fixed on left edge, minimal & refined */ .chapter-rail{ position:fixed;left:36px;top:50%;transform:translateY(-50%); z-index:900;display:flex;flex-direction:column;gap:0; pointer-events:none; } .chapter-rail::before{ content:'';position:absolute;top:18px;bottom:18px;left:5px;width:1px; background:rgba(245,239,227,.10); } .chapter-rail li{ position:relative;display:flex;align-items:center;gap:16px; padding:12px 0;cursor:pointer;pointer-events:auto; transition:opacity .35s var(--ease-out); } .chapter-rail .ch-dot{ width:11px;height:11px;border-radius:50%; background:transparent;border:1px solid rgba(245,239,227,.30); transition:all .4s var(--ease-out);position:relative;z-index:1; display:flex;align-items:center;justify-content:center; } .chapter-rail .ch-dot::after{ content:'';width:3px;height:3px;border-radius:50%;background:var(--copper); opacity:0;transform:scale(.4);transition:all .35s var(--ease-out); } .chapter-rail .ch-meta{ display:flex;flex-direction:column;gap:2px; opacity:0;transform:translateX(-10px); transition:all .4s var(--ease-out); pointer-events:none; } .chapter-rail .ch-n{ font-family:var(--mono);font-size:9px;letter-spacing:.18em; color:rgba(245,239,227,.5);text-transform:uppercase; } .chapter-rail .ch-name{ font-family:var(--serif);font-size:14px;color:var(--bone);font-style:italic; font-weight:400;letter-spacing:-.005em; } .chapter-rail li:hover .ch-meta, .chapter-rail li.on .ch-meta{opacity:1;transform:translateX(0)} .chapter-rail li.on .ch-dot{border-color:var(--copper);transform:scale(1.15)} .chapter-rail li.on .ch-dot::after{opacity:1;transform:scale(1)} .chapter-rail li.on .ch-n{color:var(--copper)} /* Hide rail on light section pages by default — show only on dark sections via JS toggle */ .chapter-rail.light .ch-dot{border-color:rgba(20,20,20,.35)} .chapter-rail.light::before{background:rgba(20,20,20,.12)} .chapter-rail.light .ch-n{color:rgba(20,20,20,.5)} .chapter-rail.light .ch-name{color:var(--ink)} @media (max-width:1240px){.chapter-rail{display:none}} /* Chapter intro band — sits above each chapter */ .chapter-intro{ display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:end; padding:0 0 56px 0;margin-bottom:64px; border-bottom:1px solid var(--line); } .section.bone .chapter-intro, .bone .chapter-intro, .projects-h .chapter-intro, .mvv .chapter-intro, .team-sec .chapter-intro, .cp-benefits .chapter-intro, .cp-form-sec .chapter-intro{border-bottom:1px solid rgba(20,20,20,.12)} .chapter-intro .ch-num{ font-family:var(--serif);font-weight:300; font-size:clamp(64px, 10vw, 168px); line-height:.85;letter-spacing:-.04em; color:var(--copper);font-style:italic; font-variation-settings:'opsz' 144; } .chapter-intro .ch-meta-line{ display:flex;flex-direction:column;gap:18px;padding-bottom:8px; } .chapter-intro .ch-tag{ font-family:var(--mono);font-size:12px;letter-spacing:.22em; text-transform:uppercase;color:var(--copper); display:inline-flex;align-items:center;gap:14px; } .chapter-intro .ch-tag::before{ content:'';width:32px;height:1px;background:var(--copper); } .chapter-intro .ch-title{ font-family:var(--serif);font-weight:700;font-style:normal; font-size:clamp(36px, 5vw, 64px);line-height:1.05;letter-spacing:-.018em; font-variation-settings:'opsz' 96;color:var(--bone); } .chapter-intro .ch-title em{font-style:normal;color:var(--copper);font-weight:700} .section.bone .chapter-intro .ch-title, .bone .chapter-intro .ch-title, .projects-h .chapter-intro .ch-title, .mvv .chapter-intro .ch-title, .team-sec .chapter-intro .ch-title, .cp-benefits .chapter-intro .ch-title, .cp-form-sec .chapter-intro .ch-title{color:var(--ink)} .chapter-intro .ch-deck{ font-size:15px;color:rgba(245,239,227,.7);max-width:62ch;line-height:1.6; } .section.bone .chapter-intro .ch-deck, .bone .chapter-intro .ch-deck, .projects-h .chapter-intro .ch-deck, .mvv .chapter-intro .ch-deck, .team-sec .chapter-intro .ch-deck, .cp-benefits .chapter-intro .ch-deck, .cp-form-sec .chapter-intro .ch-deck{color:var(--mute-d)} @media(max-width:680px){ .chapter-intro{grid-template-columns:1fr;gap:14px;padding-bottom:40px;margin-bottom:48px} .chapter-intro .ch-num{font-size:72px} } /* Section becomes a "chapter" wrapper */ .chapter{position:relative} .chapter[data-chapter]::before{ content:attr(data-chapter-marker); position:absolute;top:48px;right:48px; font-family:var(--mono);font-size:12px;letter-spacing:.2em; text-transform:uppercase;color:rgba(245,239,227,.3); pointer-events:none; } .section.bone.chapter[data-chapter]::before, .bone.chapter[data-chapter]::before{color:rgba(20,20,20,.3)} @media(max-width:1100px){.chapter[data-chapter]::before{display:none}} /* ========================================================= LIGHT MODE — premium cream canvas, charcoal ink, red accent Editorial magazine layout: light body, dark hero/CTA/footer ========================================================= */ /* Page baseline */ body{background:var(--bone);color:var(--ink-3)} /* Body text on light */ .lead{color:var(--ink-3)} .lead.dim{color:var(--mute-d)} .body{color:var(--mute-d)} /* Nav: transparent over hero (dark image) — switches to cream on scroll */ .nav-link{color:rgba(245,239,227,.85)} .nav-link:hover, .nav-link.active{color:#fff} .nav-link.active::after{background:#fff} .nav-logo, .nav-logo em{color:var(--copper)} .burger span{background:var(--bone)} .nav.scrolled{ background:rgba(245,239,227,.92); border-bottom-color:rgba(20,20,20,.08); } .nav.scrolled .nav-link{color:var(--mute-d)} .nav.scrolled .nav-link:hover, .nav.scrolled .nav-link.active{color:var(--ink)} .nav.scrolled .nav-link.active::after{background:var(--copper)} .nav.scrolled .nav-logo, .nav.scrolled .nav-logo em{color:var(--copper)} .nav.scrolled .burger span{background:var(--ink)} .nav.scrolled .nav-dd{background:rgba(255,255,255,.97);border-color:rgba(20,20,20,.08)} .nav.scrolled .nav-dd li a{color:var(--mute-d)} .nav.scrolled .nav-dd li a:hover{color:var(--copper);background:rgba(214,40,40,.06)} /* Hero — softer, brighter; gradients protect text + fold into cream below */ .hero-bg::after{ background: linear-gradient(90deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,.25) 40%, rgba(20,20,20,.05) 75%, rgba(20,20,20,0) 100%), linear-gradient(180deg, rgba(20,20,20,.05) 0%, rgba(20,20,20,.2) 45%, rgba(20,20,20,.55) 78%, rgba(20,20,20,.8) 90%, var(--bone) 100%); } .hero{color:var(--bone)} .hero .h-display, .hero .h-1, .hero h1{color:#fff} .hero .lead{color:rgba(245,239,227,.92)} .hero .eyebrow{color:var(--bone)} .hero .eyebrow::before{background:var(--bone)} .hero-meta .meta-row{border-bottom-color:rgba(245,239,227,.22)} .hero-meta .meta-k{color:rgba(245,239,227,.65)} .hero-meta .meta-v{color:#fff} .scroll-cue{color:rgba(245,239,227,.7)} /* Page hero — solid dark, sharp transition into cream below */ .pg-hero-bg::after{ background: linear-gradient(90deg, rgba(20,20,20,.75) 0%, rgba(20,20,20,.5) 40%, rgba(20,20,20,.2) 80%, rgba(20,20,20,0) 100%), linear-gradient(180deg, rgba(20,20,20,.45) 0%, rgba(20,20,20,.7) 60%, rgba(20,20,20,.92) 100%); } .pg-hero{color:var(--bone)} .pg-hero .h-display, .pg-hero h1, .pg-hero .h-1{color:#fff} .pg-hero .lead{color:rgba(245,239,227,.9)} .pg-hero .crumb, .pg-hero .crumb a{color:rgba(245,239,227,.65)} .pg-hero .crumb a:hover{color:var(--copper-2)} .pg-hero .crumb span{color:rgba(245,239,227,.35)} .pg-hero .eyebrow{color:var(--copper-2)} .pg-hero .eyebrow::before{background:var(--copper-2)} /* CTA — closing dark scene; bright text */ .cta{color:var(--bone)} .cta .h-1, .cta .h-display, .cta h2{color:#fff} .cta .lead, .cta .lead.dim{color:rgba(245,239,227,.78)} .cta .eyebrow{color:var(--copper-2)} .cta .eyebrow::before{background:var(--copper-2)} /* Stats — slight cream-2 for layered depth */ .stats{ background:var(--bone-2); border-top-color:rgba(20,20,20,.08); border-bottom-color:rgba(20,20,20,.08); } .stat{border-left-color:rgba(20,20,20,.10)} .stat-l{color:var(--mute-d)} /* About-h on cream */ .about-h{background:var(--bone)} .pillar{ border-color:rgba(20,20,20,.15);color:var(--ink-3); } .pillar:hover{border-color:var(--copper);color:var(--ink)} /* Services-h: cream section with editorial dark card tiles inside */ .services-h{background:var(--bone)} .svc-grid{border-top-color:rgba(20,20,20,.10)} .svc-card{ background:var(--ink); border-right-color:rgba(20,20,20,.10); border-bottom-color:rgba(20,20,20,.10); } .svc-card:hover{background:var(--ink-2)} /* Why on cream */ .why{background:var(--bone)} .why-feat{border-top-color:rgba(20,20,20,.12)} .why-feat:last-child{border-bottom-color:rgba(20,20,20,.12)} .why-feat h4{color:var(--ink)} .why-feat p{color:var(--mute-d)} .why-img-frame{border-color:var(--copper)} /* Chapter-intro variants for newly light sections */ .about-h .chapter-intro, .services-h .chapter-intro, .why .chapter-intro{border-bottom:1px solid rgba(20,20,20,.12)} .about-h .chapter-intro .ch-title, .services-h .chapter-intro .ch-title, .why .chapter-intro .ch-title{color:var(--ink)} .about-h .chapter-intro .ch-deck, .services-h .chapter-intro .ch-deck, .why .chapter-intro .ch-deck{color:var(--mute-d)} /* Chapter marker (top-right floating "Chapter X / Five") on light */ .about-h.chapter[data-chapter]::before, .services-h.chapter[data-chapter]::before, .why.chapter[data-chapter]::before{color:rgba(20,20,20,.3)} /* Other top-level light page sections (so all pages flip to light) */ .story, .svc-page, .proj-page, .contact-page, .sup-page, .cp-intro, .cp-process, .values{background:var(--bone)} .values{color:var(--ink-3)} .values .h-2{color:var(--ink-3)} .val-card{border-color:rgba(20,20,20,.12)} .val-card:hover{border-color:var(--copper)} .val-n{color:rgba(20,20,20,.18)} .val-card:hover .val-n{color:var(--copper)} .val-t{color:var(--ink)} .val-card p{color:var(--mute-d)} /* Story page (about) */ .story-text p{color:var(--mute-d)} /* Team page — featured founder layout */ .team-feature{ display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center; margin-bottom:120px; } .team-feature-photo{ position:relative;aspect-ratio:4/5;background:linear-gradient(135deg,var(--ink),#2a2520); display:flex;align-items:center;justify-content:center;overflow:hidden; } .team-feature-photo::before{ content:'';position:absolute;inset:0; background:radial-gradient(circle at 30% 30%, rgba(214,40,40,.18), transparent 60%); } .team-feature-photo .init{ font-family:var(--serif);font-size:200px;font-weight:600;color:var(--copper); font-style:italic;letter-spacing:-.04em;line-height:1;position:relative;z-index:1; } .team-feature-photo img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center top;z-index:1; } .team-feature-frame{ position:absolute;inset:auto -6% -6% auto;width:55%;height:55%; border:1px solid var(--copper);z-index:-1; } .team-feature-text{display:flex;flex-direction:column;gap:18px} .team-feature-text .role{ font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase; color:var(--copper-d); } .team-feature-text .name{ font-family:var(--serif);font-size:clamp(40px,5.5vw,72px); font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:1; } .team-feature-text .name em{font-style:italic;color:var(--copper);font-weight:800} .team-feature-text p{font-size:15px;line-height:1.8;color:var(--mute-d)} .team-feature-text .creds{ margin-top:8px;padding-top:18px;border-top:1px solid rgba(20,20,20,.12); font-size:12px;color:var(--mute-d);font-style:italic; } @media(max-width:900px){ .team-feature{grid-template-columns:1fr;gap:48px;margin-bottom:80px} } /* Two-up secondary team */ .team-duo{display:grid;grid-template-columns:repeat(2,1fr);gap:32px} @media(max-width:780px){.team-duo{grid-template-columns:1fr}} /* Quote section can keep cream too with dark italic — feels editorial */ .quote-sec{background:var(--bone)} .quote-sec::before{color:rgba(214,40,40,.06)} .quote-text{color:var(--ink)} .quote-role{color:var(--mute-d)} /* Services page (svc-page) detail rows: light section needs dark text + dark dividers */ .svc-page .svc-detail{border-bottom-color:rgba(20,20,20,.10)} .svc-page .svc-d-text li{color:var(--mute-d)} /* Projects page filters and blocks on cream */ .proj-page .proj-filter{border-bottom-color:rgba(20,20,20,.10)} .proj-page .f-btn{border-color:rgba(20,20,20,.15);color:var(--mute-d)} .proj-page .f-btn:hover{color:var(--ink);border-color:rgba(20,20,20,.35)} .proj-page .f-btn.on{background:var(--copper);color:#fff;border-color:var(--copper)} .proj-page .proj-block-head{border-bottom-color:rgba(20,20,20,.12)} .proj-page .proj-block-h{color:var(--ink)} .proj-page .proj-block-c{color:var(--mute-d)} .proj-page .proj-grid .proj-card .proj-name{color:var(--ink)} .proj-page .proj-grid .proj-card .proj-meta{color:var(--mute-d)} /* Overseas list on cream */ .proj-page .overseas-list{border-top-color:rgba(20,20,20,.12)} .proj-page .overseas-row{border-bottom-color:rgba(20,20,20,.12);border-right-color:rgba(20,20,20,.12)} .proj-page .overseas-row:hover{background:rgba(214,40,40,.04)} .proj-page .overseas-name{color:var(--ink)} .proj-page .overseas-meta{color:var(--mute-d)} /* Proj category sections on cream */ .proj-page .proj-sec-nav{border-bottom-color:rgba(20,20,20,.1)} .proj-page .proj-sec-btn{color:rgba(20,20,20,.55);border-color:rgba(20,20,20,.15)} .proj-page .proj-sec-btn:hover{color:var(--ink);border-color:rgba(20,20,20,.4);background:rgba(0,0,0,.03)} .proj-page .proj-cat-head{border-bottom-color:rgba(20,20,20,.1)} .proj-page .proj-cat-label{color:rgba(20,20,20,.35)} .proj-page .proj-cat-title{color:var(--ink)} .proj-page .proj-cat-desc{color:var(--mute-d)} .proj-page .proj-cat-divider{background:rgba(20,20,20,.08)} .proj-page .proj-tabs{border-bottom-color:rgba(20,20,20,.1)} .proj-page .proj-tab{color:rgba(20,20,20,.45)} .proj-page .proj-tab:hover{color:var(--ink);background:rgba(0,0,0,.03)} .proj-page .proj-tab.active{color:var(--ink);border-bottom-color:var(--copper)} /* nav.scrolled dd hierarchy */ .nav.scrolled .nav-dd .dd-cat > a{color:var(--ink)} .nav.scrolled .nav-dd .dd-sub > a{color:rgba(20,20,20,.45)} .nav.scrolled .nav-dd .dd-sub > a:hover{color:var(--copper);background:rgba(214,40,40,.06)} .nav.scrolled .nav-dd .dd-sep{background:rgba(20,20,20,.1)} /* Channel partners pages on cream */ .cp-intro-img-frame{border-color:var(--copper)} .cp-process .cp-steps{border-top-color:rgba(20,20,20,.12)} .cp-process .cp-step{border-right-color:rgba(20,20,20,.12);border-bottom-color:rgba(20,20,20,.12)} .cp-process .cp-step h4{color:var(--ink)} .cp-process .cp-step p{color:var(--mute-d)} /* Contact page — info side on cream */ .contact-page .ci-item{border-top-color:rgba(20,20,20,.12)} .contact-page .ci-item:last-child{border-bottom-color:rgba(20,20,20,.12)} .contact-page .ci-text h3{color:var(--mute-d)} .contact-page .ci-text p{color:var(--ink)} .contact-page .contact-hrs{border-top-color:rgba(20,20,20,.12)} .contact-page .hrs-row{color:var(--mute-d)} .contact-page .hrs-row strong{color:var(--ink)} /* Suppliers page — info side on cream */ .sup-page .sup-list .row{border-top-color:rgba(20,20,20,.12)} .sup-page .sup-list .row:last-child{border-bottom-color:rgba(20,20,20,.12)} .sup-page .sup-list h3{color:var(--ink)} .sup-page .sup-list p{color:var(--mute-d)} /* Forms in dark form-box need light text inputs — keep as-is for the dark form variant */ /* The dark form-box is now used on contact + suppliers — keep it dark for contrast against cream bg */ /* (.form-box is var(--ink-2) bg with bone text — looks like a sharp contrast panel on cream) */ /* Page heroes — keep them dark/cinematic with image overlays */ /* (.pg-hero already dark, no override needed) */ .pg-hero-bg::after{ background:linear-gradient(180deg,rgba(20,20,20,.55),rgba(245,239,227,.4) 92%,var(--bone) 100%); } /* Image-reveal wipe color stays red — matches accent */ .img-reveal::after{background:var(--copper)} /* Footer stays dark — closing anchor */ /* CTA stays dark — closing scene */ /* Loader stays dark — brand entry */ /* Scroll progress bar background more visible on light */ .scroll-progress{background:rgba(20,20,20,.06)} /* ========================================================= WORD REVEAL — story-mode line-by-line, word-by-word. The hero H1 is the LCP element on every page, so we MUST not gate it behind a long animation. Only word elements that the JS has explicitly marked as `.armed` start hidden — those are the ones below the fold which will animate in on scroll. Above-the-fold reveal-words paint at full opacity instantly, then play a shorter transform-only flourish so it still feels animated. ========================================================= */ .reveal-words{display:block} .reveal-words .w{ display:inline-block;overflow:hidden;vertical-align:top; line-height:1.25; padding:.12em .06em .18em; margin:-.12em -.06em -.18em; } /* Default: visible. LCP fires immediately for above-the-fold reveal-words. */ .reveal-words .w > *{ display:inline-block; } /* Below-the-fold reveals get .armed via JS — they start hidden, then animate to visible when .in is added by the IntersectionObserver. */ .reveal-words.armed .w > *{ transform:translateY(110%) skewY(5deg); opacity:0; transition:transform .7s var(--ease-out), opacity .55s var(--ease-out); transition-delay:calc(var(--i, 0) * 55ms); } .reveal-words.armed.in .w > *{ transform:translateY(0) skewY(0); opacity:1; } /* ========================================================= TRUSTED PARTNERS — scrolling logo marquee ========================================================= */ .trusted{ background:var(--bone);padding:120px 0 140px; position:relative;overflow:hidden; } .trusted-head{ text-align:center;margin-bottom:64px;display:flex;flex-direction:column;gap:18px;align-items:center; } .trusted-head .body{margin:0 auto} .logo-marquee{ position:relative;width:100%;overflow:hidden; padding:24px 0; mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); } .logo-track{ display:flex;gap:0;width:max-content; animation:logoScroll 38s linear infinite; will-change:transform; } .logo-marquee:hover .logo-track{animation-play-state:paused} @keyframes logoScroll{to{transform:translateX(-50%)}} .logo-card{ flex:none;width:240px;height:140px; display:flex;align-items:center;justify-content:center; position:relative; margin:0 12px; background:#fff; border:1px solid rgba(20,20,20,.08); transition:border-color .4s var(--ease), transform .4s var(--ease-out), box-shadow .4s var(--ease-out); } .logo-card:hover{ border-color:var(--copper); transform:translateY(-4px); box-shadow:0 20px 40px -16px rgba(20,20,20,.18); } .logo-card .logo-img{ max-width:78%;max-height:74px;width:auto;height:auto; object-fit:contain; transition:transform .4s var(--ease-out), filter .4s var(--ease); } .logo-card:hover .logo-img{transform:scale(1.04)} .logo-card .logo-fallback{ display:none; flex-direction:column;align-items:center;gap:8px; font-family:var(--serif);font-size:18px;font-weight:600;font-style:italic;color:var(--ink); letter-spacing:-.01em;text-align:center;line-height:1.1;padding:0 16px; } .logo-card.no-img .logo-img{display:none} .logo-card.no-img .logo-fallback{display:flex} @media(max-width:600px){ .logo-card{width:180px;height:110px} .logo-card .logo-img{max-height:56px} } /* ========================================================= STORY-MODE UNFOLD — sections lift over hero with rounded tops ========================================================= */ .fold{ position:relative;z-index:5; margin-top:-72px; border-top-left-radius:48px;border-top-right-radius:48px; box-shadow:0 -32px 80px -24px rgba(20,20,20,.35); overflow:hidden; } @media(max-width:768px){ .fold{margin-top:-48px;border-top-left-radius:32px;border-top-right-radius:32px} } /* Subsequent chapters get a softer fold cue */ .chapter-fold{ position:relative;z-index:3; margin-top:-32px; border-top-left-radius:36px;border-top-right-radius:36px; } /* Hero content gets parallax — JS will set --hp / --ho on .hero. Disabled on .hero-scroll because that variant uses sticky positioning and its own scroll-driven transforms via .scrubbed. */ .hero{ --hp:0px; --ho:1; } .hero:not(.hero-scroll) .hero-content{ transform:translateY(calc(var(--hp) * -0.6)); opacity:var(--ho); transition:transform .1s linear, opacity .1s linear; will-change:transform, opacity; } .hero:not(.hero-scroll) .hero-meta{ transform:translateY(calc(var(--hp) * -0.3)); opacity:var(--ho); transition:transform .1s linear, opacity .1s linear; } .hero:not(.hero-scroll) .hero-bg{ transform:translateY(calc(var(--hp) * 0.35)); } /* Chapter intro — number scales as user enters */ .chapter-intro .ch-num{ transition:transform 1.2s var(--ease-out), color .6s var(--ease); } .chapter.in-view .chapter-intro .ch-num{ transform:scale(1.04); } /* ========================================================= EXTRA ANIMATIONS — atmosphere & reading rhythm ========================================================= */ /* Floating decorative dots — subtle ambient motion */ .atmos{ position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0; } .atmos span{ position:absolute;border-radius:50%;background:var(--copper);opacity:0; filter:blur(.5px); } .atmos .d1{width:6px;height:6px;left:8%;top:20%;animation:float1 9s ease-in-out infinite} .atmos .d2{width:4px;height:4px;left:78%;top:35%;animation:float2 11s ease-in-out infinite} .atmos .d3{width:8px;height:8px;left:42%;top:75%;animation:float3 13s ease-in-out infinite} .atmos .d4{width:3px;height:3px;left:18%;top:62%;animation:float1 10s ease-in-out infinite reverse} .atmos .d5{width:5px;height:5px;left:88%;top:78%;animation:float2 12s ease-in-out infinite reverse} .atmos .d6{width:4px;height:4px;left:32%;top:18%;animation:float3 8s ease-in-out infinite} @keyframes float1{ 0%,100%{transform:translate(0,0);opacity:0} 50%{transform:translate(40px,-30px);opacity:.4} } @keyframes float2{ 0%,100%{transform:translate(0,0);opacity:0} 50%{transform:translate(-30px,40px);opacity:.5} } @keyframes float3{ 0%,100%{transform:translate(0,0);opacity:0} 50%{transform:translate(20px,-50px);opacity:.3} } @media(prefers-reduced-motion:reduce){.atmos span{animation:none;display:none}} @media(max-width:900px){ .atmos span{animation:none;display:none} .hero .btn-primary{animation:none} .chapter-rail li.on .ch-dot{animation:none} } /* Drawing-in rule — used on hero / section dividers */ .rule.draw{ width:0;animation:drawRule 1.4s var(--ease-out) .3s forwards; } .rule.draw.c{margin-left:auto;margin-right:auto;animation-name:drawRuleC} @keyframes drawRule{to{width:48px}} @keyframes drawRuleC{to{width:48px}} /* Tilt card — subtle 3D + spotlight */ [data-tilt]{ transform-style:preserve-3d; transition:transform .6s var(--ease-out); position:relative; } [data-tilt] .proj-img{ transition:transform .6s var(--ease-out); } [data-tilt]:hover .proj-img{ transform:translateZ(40px) scale(1.02); } /* Soft pulse on chapter-rail active dot */ .chapter-rail li.on .ch-dot{ animation:dotPulse 3s ease-in-out infinite; } @keyframes dotPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(214,40,40,.18)} 50%{box-shadow:0 0 0 5px rgba(214,40,40,0)} } /* Hero CTA — subtle attention pulse on initial load */ .hero .btn-primary{ animation:heroBtnPulse 3s ease-out 2s infinite; } @keyframes heroBtnPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(214,40,40,.45)} 20%{box-shadow:0 0 0 14px rgba(214,40,40,0)} } /* Hover-glow on stat numbers */ .stat:hover .stat-n{ text-shadow:0 0 30px rgba(214,40,40,.3); transform:translateY(-2px); } .stat-n{ transition:transform .4s var(--ease-out), text-shadow .4s var(--ease); } /* Pillars — animated red bar slides in on hover */ .pillar{position:relative;overflow:hidden} .pillar::after{ content:'';position:absolute;left:0;top:0;height:100%;width:0; background:linear-gradient(90deg, transparent, rgba(214,40,40,.06)); transition:width .5s var(--ease-out);z-index:0; } .pillar:hover::after{width:100%} .pillar > *{position:relative;z-index:1} /* MVV / val cards — subtle border pulse on entry into view */ .mvv-card.in.reveal::before{width:100%;transition:width 1.2s var(--ease-out) .3s} /* Project card — caption slides up on hover */ .proj-card .proj-info{ transition:transform .5s var(--ease-out); } .proj-card:hover .proj-info{ transform:translateY(-2px); } /* Subtle hover scale on logo cards */ /* will-change intentionally NOT set here: promoting all 16 logo cards to permanent GPU layers for a transform that only fires briefly on hover cost more than it saved. The browser composites the small hover lift fine. */ /* Drawing line for big section heads */ .section-line{ display:block;width:0;height:1px;background:var(--copper); margin:32px 0;transition:width 1.4s var(--ease-out); } .section-line.in, .in .section-line{width:80px} /* Subtle background color shift on chapters as they enter view */ .about-h.in-view, .services-h.in-view, .why.in-view{ background:linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%); } /* ===== REDUCED MOTION ===== */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} .hero-bg{animation:none;transform:scale(1.05)} } /* ===== FLOATING WHATSAPP BUTTON ===== */ .wa-float{ position:fixed;right:24px;bottom:24px;z-index:9500; width:56px;height:56px;border-radius:50%; background:#25D366;color:#fff; display:flex;align-items:center;justify-content:center; box-shadow:0 10px 30px -8px rgba(37,211,102,.55), 0 4px 12px rgba(0,0,0,.18); transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out); animation:waPop .5s var(--ease-bounce) 1.6s both; } .wa-float:hover{ transform:scale(1.08); box-shadow:0 16px 36px -8px rgba(37,211,102,.7), 0 6px 16px rgba(0,0,0,.22); } .wa-float svg{width:28px;height:28px;display:block;fill:#fff} .wa-float::after{ content:'';position:absolute;inset:-6px;border-radius:50%; border:2px solid #25D366;opacity:0; animation:waRing 2.6s ease-out 2.2s infinite; } @keyframes waPop{ 0%{transform:scale(0) translateY(20px);opacity:0} 100%{transform:scale(1) translateY(0);opacity:1} } @keyframes waRing{ 0%{transform:scale(.85);opacity:.7} 100%{transform:scale(1.4);opacity:0} } @media(max-width:600px){ .wa-float{right:16px;bottom:16px;width:52px;height:52px} .wa-float svg{width:26px;height:26px} } @media(prefers-reduced-motion:reduce){ .wa-float{animation:none} .wa-float::after{animation:none;display:none} } /* ========================================================= ===== MOBILE LAYOUT POLISH ===== The site was designed desktop-first and most sections used 140px+ vertical padding everywhere. On a phone that's wasteful whitespace and pushes content way below the fold. The rules below tighten spacing, stack the hero meta cleanly, make CTAs easier to tap, and shrink page-hero padding on inner pages. ========================================================= */ /* Tablets and below: cut major section padding by ~40% */ @media(max-width:900px){ .section, .about-h, .services-h, .projects-h, .why, .story, .mvv, .values, .team-sec, .quote-sec, .cp-intro, .cp-benefits, .cp-process, .cp-form-sec, .contact-page, .sup-page, .svc-page, .proj-page{padding:90px 0} .cta{padding:90px 0} .pg-hero{padding:140px 0 60px;min-height:auto} .trusted{padding:80px 0 90px} .footer{padding-top:80px} } /* Phones */ @media(max-width:600px){ .container,.container-wide,.container-narrow{padding:0 20px} /* Sections tighter still */ .section, .about-h, .services-h, .projects-h, .why, .story, .mvv, .values, .team-sec, .quote-sec, .cp-intro, .cp-benefits, .cp-process, .cp-form-sec, .contact-page, .sup-page, .svc-page, .proj-page, .cta{padding:64px 0} .pg-hero{padding:120px 0 48px} .trusted{padding:56px 0 64px} .footer{padding-top:64px} /* Hero on phones: tighter content, stack the meta as full-width rows instead of the 2-col flex that overflowed at 375px */ .hero{padding:120px 0 56px} .hero-content{gap:24px} .hero-meta{gap:16px} .hero-meta .meta-row{flex:1 1 100%;min-width:0;padding-bottom:10px} .hero-meta .meta-v{font-size:15px} /* Stack the two hero CTAs and make them full-width — much easier to tap */ .hero-actions{flex-direction:column;gap:10px;width:100%;align-items:stretch} .hero-actions .btn{justify-content:center;padding:16px 22px} /* Chapter intro: number a bit smaller, tighter spacing */ .chapter-intro{padding-bottom:28px;margin-bottom:36px} .chapter-intro .ch-num{font-size:64px;line-height:1} /* Section heading rule: less space above and below */ .sec-head{margin-bottom:32px} .sec-head + *{margin-top:0} /* Buttons: a bit more compact globally so they don't feel oversized */ .btn{padding:16px 22px;font-size:12px} /* Forms: reduce form-box padding so it doesn't overflow gutter */ .form-box{padding:28px 20px} .form-g{margin-bottom:18px} .form-g label{font-size:12px;margin-bottom:8px} .form-g input,.form-g select,.form-g textarea{font-size:15px;padding:12px 14px} /* Project filter buttons: smaller and tighter */ .proj-filter{gap:6px;margin-bottom:36px;padding-bottom:20px} .f-btn{padding:8px 14px;font-size:11px} /* Footer bar slightly tighter */ .f-bar{padding-top:24px;font-size:11px;flex-wrap:wrap;gap:8px} } /* ===== MOBILE FIXES (round 2) ===== Issues caught during a focused mobile audit. Each block targets a specific element identified as broken or awkward at phone widths. */ /* Issue 1: hero H1 was 44px min — too big for narrow screens. Drop the minimum so 'From the ground up.' fits on a single phone screen. */ @media(max-width:600px){ .h-display{font-size:clamp(34px, 9vw, 64px)} .h-1{font-size:clamp(30px, 7vw, 56px)} .h-2{font-size:clamp(26px, 6vw, 44px)} .h-3{font-size:clamp(20px, 4.5vw, 28px)} } /* Issue 2: burger button was always light/cream. When nav is in .scrolled mode (dark blurred backdrop appears) the bone-on-dark contrast is fine. But over the page on inner pages with cream sections directly behind, light burger on cream is invisible. Force burger color to follow the nav state. */ .nav.scrolled .burger span{background:var(--ink)} @media(max-width:600px){ .burger{width:44px;height:44px} /* tap target */ } /* Issue 3: story section image + text gap was 80px on stacked mobile. That's a lot of empty vertical space between the photo and the copy. */ @media(max-width:900px){ .story-grid{gap:36px} .story-floater{bottom:-16px;right:8px;padding:18px 22px} .story-floater .n{font-size:40px} } /* Issue 4: service detail blocks (image + text) — gap and the big '01' numeral both crowded the small screen. */ @media(max-width:900px){ .svc-detail{gap:32px;padding:48px 0} .svc-d-num{font-size:48px;top:16px;left:16px} .svc-d-img{aspect-ratio:5/4} /* less tall on phones */ } /* Issue 5: project block heading was 48px serif italic — dominated the small screen. Pull it back. */ @media(max-width:600px){ .proj-block-h{font-size:clamp(36px,9vw,52px)} .proj-block-head{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:32px} } /* Issue 6: nav-link tap targets were ~36px tall. Bump padding so each menu item has the recommended 44px touch surface on mobile. */ @media(max-width:1024px){ .nav-link{padding:14px 0;min-height:44px} } /* Issue 7: founder feature on team page (large initials photo + text) was a 2-col grid even on mobile because team-feature wasn't covered by an explicit stack rule. Fix layout. */ @media(max-width:900px){ .team-feature{grid-template-columns:1fr;gap:36px} .team-feature-photo .init{font-size:96px} } /* Issue 9: WhatsApp button overlapping the bottom-of-page CTA buttons. Add a bottom margin-equivalent shadow on the floating WA so it sits higher when there are CTAs near the bottom. Cleaner: just lift it slightly on mobile so it doesn't sit ON TOP of buttons users tap. */ @media(max-width:600px){ .wa-float{right:14px;bottom:14px;width:48px;height:48px} .wa-float svg{width:24px;height:24px} /* Add a safe area below the CTA section so the WA button doesn't overlap the primary buttons on short scrolling pages */ .cta-actions{padding-bottom:40px} } /* Issue 10: quote section text — clamp lower bound was too large */ @media(max-width:600px){ .quote-text{font-size:clamp(20px,5.5vw,28px)} .quote-author{font-size:18px;margin-top:24px} } /* Issue 11 already addressed inside the main 600px block above (form-g, label, input padding/sizes bumped). */ /* Issue 12: footer bar layout — at narrow widths the copyright line ran into the link list. Stack and gap. */ @media(max-width:600px){ .f-bar{align-items:flex-start} .f-bar > div{display:flex;flex-direction:column;gap:6px;margin-left:0} .f-bar a{margin-left:0} } /* Generic touch-target bump for footer + nav-cta on mobile */ @media(max-width:600px){ .f-links a{padding:6px 0;min-height:36px;display:inline-flex;align-items:center} .nav-cta{padding:14px 22px} } /* Hero meta panel — when it stacks on phones, give each row a clearer separator and tighter rhythm */ @media(max-width:600px){ .hero-meta{flex-direction:column;flex-wrap:nowrap;gap:0} .hero-meta .meta-row{ padding:12px 0;border-bottom:1px solid var(--line);width:100%; flex:0 0 auto; } .hero-meta .meta-row:last-child{border-bottom:none} } /* ========================================================= MINIMAL LUXURY POLISH (v=20260608) Refinement layer, loaded last so it wins the cascade without disturbing the rules above. Goal: a calmer, more premium feel that sits naturally beside the red+charcoal logo: 1. crisp white cards that lift off the warm-white canvas 2. the brand red used a little more confidently 3. restrained motion (drop the salesy pulses/floating dots) 4. a few accessibility fixes that are pure CSS ========================================================= */ /* 1. Cards: true white + real elevation (fixes the "everything is the same cream" flatness). Originals stay sharp-cornered = architectural. */ .mvv-card, .mvv-card:first-child, .team-card, .cp-ben, .form-box.bone, .logo-card{ background:var(--paper); border:1px solid var(--line-d); box-shadow:var(--shadow-sm); } .mvv-card:hover, .team-card:hover, .cp-ben:hover, .logo-card:hover{box-shadow:var(--shadow-md)} /* Nav glass tuned to the refined warm-white */ .nav.scrolled{background:rgba(245,243,238,.9)} /* 2. A more confident red: a slightly bolder eyebrow tick + section rule, and a deeper, classier hover for the primary actions (no candy-bright). */ .eyebrow::before{width:30px;height:2px} .rule{height:2px} .btn-primary:hover, .nav-cta:hover, .form-submit:hover{background:var(--copper-d);color:#fff} /* 3. Restraint: remove the gimmicky ambient motion. Subtle hovers stay. */ .atmos{display:none} .hero .btn-primary{animation:none} .chapter-rail li.on .ch-dot{animation:none} .stat:hover .stat-n{text-shadow:none} .about-h.in-view,.services-h.in-view,.why.in-view{background:var(--bone)} /* 4. Accessibility (CSS-only): keyboard users can open the desktop Projects dropdown; the mobile panel leaves the tab order when closed; lift a muted label that failed contrast. */ .has-dd:focus-within .nav-dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} @media(max-width:1024px){ .nav-links{visibility:hidden;transition:right .5s var(--ease-out), visibility 0s linear .5s} .nav-links.open{visibility:visible;transition:right .5s var(--ease-out)} } .proj-page .proj-cat-label{color:rgba(21,18,16,.55)} /* Form status message: green for success, red for errors */ .form-msg{border-left-color:var(--copper)} .form-msg:not(.is-error){background:rgba(31,122,74,.10);border-left-color:#1F7A4A} .form-msg.is-error{background:rgba(214,40,40,.09);border-left-color:var(--copper)} .form-box.bone .form-msg{color:var(--ink-3)} /* ========================================================= CONCRETE & CLAY (theme v=20260608b) A full overhaul: warm concrete canvas with a faint grain, plaster cards edged in terracotta clay, slate ink, logo-red reserved for the primary actions, warm-graded photography that pops to full colour on hover, Fraunces display serif, and soft tactile corners. Loaded last so it owns the cascade. ========================================================= */ /* --- Concrete grain over the whole page (very subtle, filmic) --- */ body::after{ content:'';position:fixed;inset:0;z-index:60;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"); background-size:180px 180px;opacity:.05;mix-blend-mode:multiply; } /* --- Primary actions = logo red. Clay stays the decorative accent. --- */ .btn-primary,.nav-cta,.form-submit,.form-box.bone .form-submit{background:var(--red);color:#fff} .btn-primary:hover,.nav-cta:hover,.form-submit:hover,.form-box.bone .form-submit:hover{background:var(--red-d);color:#fff} .proj-card .proj-arrow{background:var(--red)} /* --- Tactile corners on cards, images and buttons --- */ .btn,.form-submit,.svc-card,.form-box, .mvv-card,.team-card,.cp-ben,.logo-card, .about-h-img,.why-img,.story-img,.svc-d-img,.cp-intro-img, .proj-card .proj-img,.team-photo,.team-feature-photo,.tech-img .img-reveal{ border-radius:var(--radius); } /* --- Plaster cards, each edged with a clay top rule (material sample) --- */ .mvv-card,.team-card,.cp-ben{ background:var(--paper); border:1px solid var(--line-d); border-top:3px solid var(--clay); box-shadow:var(--shadow-sm); } .mvv-card:hover,.team-card:hover,.cp-ben:hover{box-shadow:var(--shadow-md)} /* --- Warm photo grade: desaturated + warm at rest, true colour on hover --- */ .proj-card .proj-img-bg, .why-img img,.about-h-img img,.story-img img,.svc-d-img img, .team-photo img,.team-feature-photo img,.tech-img img,.cp-intro-img img{ filter:saturate(.86) contrast(1.03) sepia(.14) brightness(.99); /* Only the zoom (transform) is animated — it runs on the GPU and stays buttery. The colour grade snaps to full colour on hover instead of animating `filter`, which was repainting the whole image every frame (the jank you saw on hover, worst on the tilting project cards). */ transition:transform 1.6s var(--ease-out); } .proj-card:hover .proj-img-bg, .about-h-img:hover img,.why-img:hover img,.story-img-wrap:hover .story-img img, .svc-d-img:hover img,.team-card:hover .team-photo img,.cp-intro-img:hover img, .tech-img:hover img{filter:none} /* --- Warm slate hero scrim that melts into concrete --- */ .hero-bg::after{ background: linear-gradient(90deg, rgba(34,30,25,.62) 0%, rgba(34,30,25,.30) 42%, rgba(34,30,25,.06) 78%, rgba(34,30,25,0) 100%), linear-gradient(180deg, rgba(34,30,25,.06) 0%, rgba(34,30,25,.24) 45%, rgba(34,30,25,.62) 78%, rgba(34,30,25,.86) 90%, var(--bone) 100%); } .pg-hero-bg::after{ background:linear-gradient(180deg, rgba(34,30,25,.55) 0%, rgba(34,30,25,.42) 55%, rgba(232,227,216,.45) 92%, var(--bone) 100%); } .pg-hero-bg{filter:brightness(.5) contrast(1.04) sepia(.12)} /* --- Nav glass tuned to concrete --- */ .nav.scrolled{background:rgba(232,227,216,.9);border-bottom-color:var(--line-d)} /* --- Light "plaster" loader so the colour logo blends, with a clay bar --- */ .loader{background:var(--bone)} .loader::before{background:radial-gradient(ellipse 800px 600px at center, rgba(214,40,40,.08), transparent 60%)} .loader::after{color:rgba(34,30,25,.4)} .loader-tag{color:var(--mute-d)} .loader-bar{background:rgba(34,30,25,.12)} .loader-bar::before{background:var(--clay)} /* --- Fraunces wants a touch more weight at small sizes to feel "set" --- */ .svc-title,.proj-name,.proj-card .proj-name,.team-name,.overseas-name, .mvv-ttl,.cp-ben h4,.why-feat h4,.cp-step h4,.sup-list h3,.form-box h3{ font-weight:500; } /* --- Section heads on concrete: a clay rule reads as a material edge --- */ .rule{background:var(--clay)} .eyebrow::before{background:var(--clay)} /* --- Buttons: a hair more presence for the new type --- */ .btn{font-size:13px;letter-spacing:.12em} .btn-ghost-dk{border-color:rgba(34,30,25,.22);color:var(--ink-3)} .btn-ghost-dk:hover{border-color:var(--clay);color:var(--clay)} /* --- Spam honeypot: hidden from people, visible to naive bots. Kept out of the layout and the tab order without display:none, which some bots skip on purpose. --- */ .hp{ position:absolute !important; left:-9999px; width:1px;height:1px; opacity:0; pointer-events:none; } /* =========================================================== PHONE FIELD (country code + number) AND VALIDATION FEEDBACK =========================================================== */ /* --- Country code sits beside the number, sharing the underline row --- */ .tel-group{display:flex;align-items:flex-end;gap:12px} .tel-group .tel-cc{ flex:0 0 auto;width:132px;cursor:pointer; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .tel-group input[type="tel"]{flex:1 1 auto;min-width:0} @media(max-width:420px){ .tel-group{gap:8px} .tel-group .tel-cc{width:104px;font-size:14px} } /* --- Invalid field --- The underline thickens via box-shadow rather than border-width so the field does not shift by a pixel when the error appears. The wash is anchored to the underline, which keeps the eye on the problem. --- */ .form-g.is-invalid input:not(.tel-cc), .form-g.is-invalid select:not(.tel-cc), .form-g.is-invalid textarea{ border-bottom-color:#C4271F; box-shadow:0 1px 0 #C4271F; background-image:linear-gradient(to top, rgba(196,39,31,.12), rgba(196,39,31,0) 62%); } /* The select already uses background-image for its arrow, so it needs both. */ .form-g.is-invalid select:not(.tel-cc){ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23C4271F' d='M6 8L0 0h12z'/%3E%3C/svg%3E"), linear-gradient(to top, rgba(196,39,31,.12), rgba(196,39,31,0) 62%); background-repeat:no-repeat,no-repeat; background-position:right 8px center,center; } .form-g.is-invalid label{color:#C4271F} .field-err{ display:none;align-items:center;gap:8px; font-family:var(--sans);font-size:12.5px;line-height:1.35; color:#C4271F;letter-spacing:.01em; } .form-g.is-invalid .field-err{display:flex;animation:errIn .3s var(--ease-out)} .field-err::before{ content:'!';flex:0 0 auto; width:16px;height:16px;border-radius:50%; background:#C4271F;color:#fff; font-family:var(--sans);font-size:11px;font-weight:700; line-height:16px;text-align:center; } @keyframes errIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}} /* On the dark form panel the same red would disappear, so lift it. */ .form-box:not(.bone) .form-g.is-invalid input:not(.tel-cc), .form-box:not(.bone) .form-g.is-invalid select:not(.tel-cc), .form-box:not(.bone) .form-g.is-invalid textarea{ border-bottom-color:#FF8B7E;box-shadow:0 1px 0 #FF8B7E; } .form-box:not(.bone) .form-g.is-invalid label, .form-box:not(.bone) .field-err{color:#FF8B7E} .form-box:not(.bone) .field-err::before{background:#FF8B7E;color:var(--ink)} /* One nudge, so the eye lands on the first thing to fix. */ .form-g.shake{animation:fieldShake .42s var(--ease)} @keyframes fieldShake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 45%{transform:translateX(5px)} 70%{transform:translateX(-3px)} 88%{transform:translateX(2px)} } @media(prefers-reduced-motion:reduce){ .form-g.shake{animation:none} .form-g.is-invalid .field-err{animation:none} }