:root{ --bg:#080a0b; --bg2:#0b0e10; --paper:#f2eee7; --text:#f5f0e9; --muted:#b7afa4; --gold:#c8a56b; --gold-light:#e4c693; --line:rgba(255,255,255,.11); --serif:Georgia,"Times New Roman",serif; --sans:Arial,Helvetica,sans-serif; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); overflow-x:hidden; } body.menu-open{ overflow:hidden; } a{ color:inherit; text-decoration:none; } img{ display:block; width:100%; height:100%; object-fit:cover; } .wrap{ width:min(1180px,92vw); margin:auto; } .header{ position:fixed; top:0; left:0; right:0; z-index:1000; height:86px; display:flex; justify-content:space-between; align-items:center; padding:0 4vw; background: linear-gradient( to bottom, rgba(5,7,8,.94), rgba(5,7,8,.38), transparent ); transition: background .35s ease, height .35s ease; backdrop-filter:blur(7px); } .header.scrolled{ height:72px; background:rgba(6,8,9,.95); border-bottom:1px solid var(--line); } .logo{ position:relative; z-index:1100; font-size:22px; font-weight:800; letter-spacing:.11em; white-space:nowrap; } .logo small{ display:block; margin-top:5px; color:#999; font-size:6px; letter-spacing:.44em; } .menu{ display:flex; align-items:center; gap:30px; font-size:10px; letter-spacing:.1em; } .menu a{ position:relative; opacity:.84; transition:.3s; } .menu a:after{ content:""; position:absolute; left:0; bottom:-9px; width:0; height:1px; background:var(--gold); transition:.3s; } .menu a:hover, .menu a.active{ opacity:1; color:var(--gold); } .menu a:hover:after, .menu a.active:after{ width:100%; } .menu-toggle{ display:none; position:relative; z-index:1100; width:42px; height:42px; padding:0; border:0; background:transparent; cursor:pointer; } .menu-toggle span{ position:absolute; left:8px; width:26px; height:1px; background:#fff; transition:.35s; } .menu-toggle span:nth-child(1){ top:13px; } .menu-toggle span:nth-child(2){ top:21px; } .menu-toggle span:nth-child(3){ top:29px; } .menu-toggle.active span:nth-child(1){ top:21px; transform:rotate(45deg); } .menu-toggle.active span:nth-child(2){ opacity:0; } .menu-toggle.active span:nth-child(3){ top:21px; transform:rotate(-45deg); } .mobile-nav{ position:fixed; z-index:1050; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:32px; background:rgba(5,7,8,.985); opacity:0; visibility:hidden; transform:translateY(-15px); transition:.4s ease; } .mobile-nav.active{ opacity:1; visibility:visible; transform:none; } .mobile-nav a{ font-family:var(--serif); font-size:34px; opacity:.8; transition:.3s; } .mobile-nav a:hover, .mobile-nav a.active{ color:var(--gold); opacity:1; } .hero{ position:relative; height:100svh; min-height:720px; overflow:hidden; } .hero-slide{ position:absolute; inset:0; opacity:0; transform:scale(1.08); transition: opacity 1.3s ease, transform 6.5s cubic-bezier(.2,.7,.2,1); } .hero-slide.active{ opacity:1; transform:scale(1); } .hero-overlay{ position:absolute; z-index:2; inset:0; background: linear-gradient( 90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.70) 37%, rgba(0,0,0,.24) 70%, rgba(0,0,0,.12) 100% ); } .hero-overlay:after{ content:""; position:absolute; inset:0; background: linear-gradient( 0deg, rgba(0,0,0,.58), transparent 42% ); } .hero-content{ position:relative; z-index:3; height:100%; display:flex; flex-direction:column; justify-content:center; padding-left:8vw; padding-right:5vw; max-width:960px; } .kicker{ margin-bottom:22px; color:var(--gold); font-size:10px; letter-spacing:.32em; text-transform:uppercase; } .hero h1{ margin:0 0 28px; font-family:var(--serif); font-size:clamp(62px,7vw,120px); font-weight:400; line-height:.9; letter-spacing:-.045em; } .hero p{ max-width:620px; margin:0; color:#ddd4ca; font-family:var(--serif); font-size:19px; line-height:1.72; } .buttons{ display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; } .btn{ display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 23px; background:var(--gold); color:#17120d; font-size:10px; font-weight:700; letter-spacing:.09em; transition:.3s; } .btn:hover{ transform:translateY(-3px); background:var(--gold-light); } .btn.alt{ background:rgba(0,0,0,.08); color:#fff; border:1px solid rgba(255,255,255,.38); } .btn.alt:hover{ background:#fff; color:#111; } .counter{ position:absolute; z-index:4; right:4vw; bottom:6vh; font-family:var(--serif); font-size:20px; } .counter span{ color:var(--gold); } .ticker{ overflow:hidden; padding:19px 0; background:#0b0e10; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .track{ display:flex; gap:58px; width:max-content; animation:tickerMove 29s linear infinite; color:#d5cec5; font-size:10px; letter-spacing:.22em; text-transform:uppercase; } .track span:before{ content:"✦"; margin-right:15px; color:var(--gold); } @keyframes tickerMove{ to{ transform:translateX(-50%); } } .light{ padding:115px 0; background:var(--paper); color:#171717; } .intro{ display:grid; grid-template-columns:.9fr 1.35fr; gap:80px; align-items:end; } .label{ margin-bottom:20px; color:#8e724b; font-size:9px; letter-spacing:.3em; } .title{ margin:0; font-family:var(--serif); font-size:clamp(48px,6vw,86px); font-weight:400; line-height:.95; letter-spacing:-.03em; } .intro p{ margin:0; color:#4d4842; font-family:var(--serif); font-size:18px; line-height:1.8; } .cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:65px; } .card{ position:relative; height:440px; overflow:hidden; background:#222; cursor:pointer; } .card img{ filter:saturate(.82); transition: transform .9s ease, filter .5s ease; } .card:hover img{ transform:scale(1.06); filter:saturate(1); } .card:after{ content:""; position:absolute; inset:0; background: linear-gradient( transparent 28%, rgba(0,0,0,.8) ); } .card-text{ position:absolute; z-index:2; left:22px; right:22px; bottom:22px; color:#fff; } .card-number{ display:block; margin-bottom:12px; color:#d9c398; font-size:9px; letter-spacing:.2em; } .card-text h3{ margin:0 0 7px; font-family:var(--serif); font-size:27px; font-weight:400; } .card-text p{ margin:0; opacity:.77; font-size:12px; line-height:1.5; } .card-arrow{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; margin-top:18px; border:1px solid rgba(255,255,255,.45); border-radius:50%; transition:.3s; } .card:hover .card-arrow{ background:#fff; color:#111; } .story{ position:relative; min-height:720px; display:flex; align-items:center; overflow:hidden; } .story img{ position:absolute; inset:-7%; width:114%; height:114%; filter: brightness(.4) saturate(.72); } .story:after{ content:""; position:absolute; inset:0; background: linear-gradient( 90deg, rgba(0,0,0,.8), rgba(0,0,0,.18), rgba(0,0,0,.68) ); } .story-content{ position:relative; z-index:2; width:min(1100px,90vw); margin:auto; display:grid; grid-template-columns:1fr .8fr; gap:70px; align-items:end; } .story h2{ margin:0; font-family:var(--serif); font-size:clamp(50px,6vw,88px); font-weight:400; line-height:.96; } .story p{ color:#ddd4ca; font-family:var(--serif); font-size:18px; line-height:1.75; } .text-link{ display:inline-block; margin-top:20px; color:var(--gold-light); font-size:10px; letter-spacing:.12em; transition:.3s; } .text-link:hover{ color:#fff; } .projects{ padding:110px 0; background:#0b0e10; } .project-head{ display:grid; grid-template-columns:1fr .75fr; gap:60px; align-items:end; margin-bottom:45px; } .project-head h2{ margin:0; font-family:var(--serif); font-size:clamp(52px,6vw,88px); font-weight:400; line-height:.95; } .project-head p{ margin:0; color:#aaa298; font-family:var(--serif); font-size:17px; line-height:1.75; } .project-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .project-card{ position:relative; min-height:570px; overflow:hidden; background:#151719; } .project-card img{ transition: transform .9s ease, filter .5s ease; filter: brightness(.77) saturate(.82); } .project-card:hover img{ transform:scale(1.055); filter: brightness(.69) saturate(1); } .project-card:after{ content:""; position:absolute; inset:0; background: linear-gradient( transparent 28%, rgba(0,0,0,.88) ); } .project-card-content{ position:absolute; z-index:2; left:28px; right:28px; bottom:28px; } .project-tag{ display:block; margin-bottom:13px; color:#d6bd93; font-size:9px; letter-spacing:.22em; } .project-card h3{ margin:0; font-family:var(--serif); font-size:37px; font-weight:400; } .project-card p{ max-width:320px; margin:13px 0 0; color:#c4bcb1; font-family:var(--serif); font-size:14px; line-height:1.6; } .project-arrow{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin-top:20px; border:1px solid rgba(255,255,255,.35); border-radius:50%; transition:.3s; } .project-card:hover .project-arrow{ background:#fff; color:#111; } .projects-all{ display:flex; justify-content:flex-end; margin-top:32px; } .project-button{ color:var(--gold-light); font-size:10px; letter-spacing:.12em; transition:.3s; } .project-button:hover{ color:#fff; } .trusted{ position:relative; padding:85px 0 80px; overflow:hidden; background:#f4f1eb; color:#171717; border-top:1px solid #ddd7ce; } .trusted:before{ content:"TRUST"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:rgba(0,0,0,.018); font-family:var(--serif); font-size:clamp(130px,18vw,310px); pointer-events:none; } .trusted-inner{ position:relative; z-index:2; } .trusted-label{ margin-bottom:13px; text-align:center; color:#9b8057; font-size:9px; letter-spacing:.3em; } .trusted-title{ margin:0 0 50px; text-align:center; font-family:var(--serif); font-size:clamp(30px,3.3vw,45px); font-weight:400; } .trusted-logos{ display:grid; grid-template-columns:repeat(4,1fr); gap:25px; align-items:center; } .trusted-logo{ min-height:135px; display:flex; align-items:center; justify-content:center; padding:25px; background:rgba(255,255,255,.46); border:1px solid rgba(0,0,0,.055); transition: transform .35s ease, background .35s ease, box-shadow .35s ease; } .trusted-logo:hover{ transform:translateY(-6px); background:#fff; box-shadow: 0 20px 40px rgba(0,0,0,.075); } .trusted-logo img{ width:auto; height:auto; max-width:190px; max-height:82px; object-fit:contain; filter:grayscale(100%); opacity:.70; transition: filter .35s ease, opacity .35s ease, transform .35s ease; } .trusted-logo:hover img{ filter:grayscale(0); opacity:1; transform:scale(1.03); } footer{ padding:70px 0 30px; background:#060809; border-top:1px solid var(--line); } .footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:45px; } footer h4{ margin:0 0 17px; color:#aaa; font-size:9px; letter-spacing:.2em; } footer p, footer a{ color:#aaa; font-size:12px; line-height:1.9; } footer a{ transition:.3s; } footer a:hover{ color:var(--gold); } .copy{ margin-top:50px; padding-top:20px; border-top:1px solid var(--line); color:#777; font-size:9px; } .reveal{ opacity:0; transform:translateY(28px); transition: opacity .85s ease, transform .85s ease; } .reveal.show{ opacity:1; transform:none; } @media(max-width:950px){ .desktop-menu{ display:none; } .menu-toggle{ display:block; } .header{ padding:0 5vw; } .hero-content{ padding-left:6vw; padding-right:6vw; } .intro, .story-content, .project-head{ grid-template-columns:1fr; gap:35px; } .cards{ grid-template-columns:1fr 1fr; } .project-grid{ grid-template-columns:1fr 1fr; } .project-card:first-child{ grid-column:1/3; } .trusted-logos{ grid-template-columns:1fr 1fr; } .footer-grid{ grid-template-columns:1fr 1fr; } } @media(max-width:560px){ .header{ height:72px; padding:0 20px; } .header.scrolled{ height:66px; } .logo{ font-size:18px; } .logo small{ font-size:5px; letter-spacing:.34em; } .hero{ min-height:690px; } .hero-content{ padding: 105px 22px 90px; } .hero h1{ font-size: clamp( 48px, 14vw, 65px ); line-height:.94; } .hero p{ max-width:100%; font-size:16px; line-height:1.65; } .buttons{ flex-direction:column; align-items:flex-start; } .btn{ width:100%; } .counter{ right:22px; bottom:25px; } .ticker{ padding:15px 0; } .track{ gap:35px; font-size:8px; } .light{ padding:75px 0; } .title{ font-size:47px; } .intro p{ font-size:16px; } .cards{ grid-template-columns:1fr; gap:12px; margin-top:45px; } .card{ height:390px; } .story{ min-height:680px; } .story-content{ width:88vw; } .story h2{ font-size:47px; } .story p{ font-size:16px; } .projects{ padding:75px 0; } .project-head h2{ font-size:50px; } .project-grid{ grid-template-columns:1fr; } .project-card, .project-card:first-child{ grid-column:auto; min-height:480px; } .project-card h3{ font-size:32px; } .projects-all{ justify-content:flex-start; } .trusted{ padding:60px 0; } .trusted-title{ margin-bottom:30px; font-size:31px; } .trusted-logos{ grid-template-columns:1fr 1fr; gap:10px; } .trusted-logo{ min-height:105px; padding:15px; } .trusted-logo img{ max-width:130px; max-height:60px; } footer{ padding-top:55px; } .footer-grid{ grid-template-columns:1fr; gap:28px; } .mobile-nav a{ font-size:31px; } } @media(max-width:380px){ .trusted-logos{ grid-template-columns:1fr; } .trusted-logo{ min-height:100px; } } @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}} .header{z-index:1100}