:root{ --bg:#080a0b; --bg2:#0b0e10; --paper:#f2eee7; --text:#f5f0e9; --gold:#c8a56b; --gold-light:#e4c693; --muted:#aaa299; --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; z-index:1000; top:0; left:0; right:0; height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 4vw; background:rgba(6,8,9,.90); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .logo{ position:relative; z-index:1100; font-size:22px; font-weight:800; letter-spacing:.1em; white-space:nowrap; } .logo small{ display:block; margin-top:5px; color:#999; font-size:7px; letter-spacing:.42em; } .desktop-menu{ display:flex; align-items:center; gap:30px; font-size:11px; letter-spacing:.08em; } .desktop-menu a{ position:relative; opacity:.82; transition:.3s; } .desktop-menu a:hover, .desktop-menu a.active{ opacity:1; color:var(--gold); } .desktop-menu a:after{ content:""; position:absolute; left:0; bottom:-9px; width:0; height:1px; background:var(--gold); transition:.3s; } .desktop-menu a:hover:after, .desktop-menu a.active:after{ width:100%; } .menu-toggle{ display:none; position:relative; z-index:1100; width:42px; height:42px; 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; min-height:82vh; display:flex; align-items:flex-end; overflow:hidden; } .hero img{ position:absolute; inset:0; filter: brightness(.43) saturate(.76); } .hero:after{ content:""; position:absolute; inset:0; background: linear-gradient( 90deg, rgba(0,0,0,.95), rgba(0,0,0,.43) 48%, rgba(0,0,0,.14) ); } .hero-content{ position:relative; z-index:2; width:min(1180px,92vw); margin:auto; padding:160px 0 90px; } .kicker{ color:var(--gold); font-size:10px; letter-spacing:.34em; margin-bottom:22px; text-transform:uppercase; } .hero h1{ margin:0; font-family:var(--serif); font-size:clamp(74px,9vw,145px); font-weight:400; line-height:.88; letter-spacing:-.045em; } .hero p{ max-width:650px; margin-top:28px; color:#ddd4ca; font-family:var(--serif); font-size:19px; line-height:1.7; } .intro{ padding:105px 0; background:var(--paper); color:#171717; } .intro-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:end; } .intro h2{ margin:0; font-family:var(--serif); font-size:clamp(48px,6vw,84px); font-weight:400; line-height:.95; letter-spacing:-.03em; } .intro p{ margin:0; color:#4e4942; font-family:var(--serif); font-size:18px; line-height:1.8; } .projects{ padding:0 0 115px; background:var(--paper); color:#171717; } .project-list{ display:grid; gap:24px; } .project{ min-height:650px; display:grid; grid-template-columns:1.25fr .75fr; overflow:hidden; background:#0b0e10; color:white; transition:.4s; } .project:nth-child(even){ grid-template-columns:.75fr 1.25fr; } .project:nth-child(even) .project-image{ order:2; } .project:nth-child(even) .project-copy{ order:1; } .project-image{ position:relative; overflow:hidden; } .project-image img{ transition: transform .95s ease, filter .5s ease; filter:saturate(.84); } .project:hover .project-image img{ transform:scale(1.045); filter:saturate(1); } .project-copy{ min-height:650px; padding:55px 50px; display:flex; flex-direction:column; justify-content:space-between; } .project-number{ color:var(--gold); font-size:9px; letter-spacing:.25em; } .project-title-area{ max-width:430px; } .project-title-area .project-type{ margin-bottom:16px; color:#baaa96; font-size:9px; letter-spacing:.22em; } .project h2{ margin:0; font-family:var(--serif); font-size:clamp(45px,4.5vw,66px); font-weight:400; line-height:.95; } .project p{ margin:22px 0 0; color:#aaa39a; font-family:var(--serif); font-size:16px; line-height:1.75; } .view{ display:inline-flex; align-items:center; gap:13px; margin-top:28px; color:var(--gold-light); font-size:10px; letter-spacing:.12em; } .view-circle{ width:37px; height:37px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.3); border-radius:50%; transition:.35s; } .project:hover .view-circle{ background:#fff; color:#111; } .project-strip{ padding:100px 0; background:#0b0e10; } .strip-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .strip-card{ position:relative; height:420px; overflow:hidden; } .strip-card img{ filter:brightness(.68); transition:.8s ease; } .strip-card:hover img{ transform:scale(1.055); filter:brightness(.57); } .strip-card:after{ content:""; position:absolute; inset:0; background: linear-gradient( transparent 32%, rgba(0,0,0,.84) ); } .strip-content{ position:absolute; z-index:2; left:25px; right:25px; bottom:25px; } .strip-content small{ color:var(--gold-light); font-size:9px; letter-spacing:.2em; } .strip-content h3{ margin:10px 0 0; font-family:var(--serif); font-size:31px; font-weight:400; } .cta{ padding:105px 0; background:#111416; } .cta-inner{ display:grid; grid-template-columns:1fr .55fr; gap:60px; align-items:end; } .cta h2{ margin:0; font-family:var(--serif); font-size:clamp(48px,6vw,82px); font-weight:400; line-height:.95; } .cta-right{ display:flex; flex-direction:column; align-items:flex-start; } .cta p{ margin:0 0 25px; color:#aaa299; font-family:var(--serif); font-size:17px; line-height:1.75; } .button{ 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:.08em; transition:.3s; } .button:hover{ background:var(--gold-light); transform:translateY(-3px); } .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:.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:.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; } .intro-grid{ grid-template-columns:1fr; gap:35px; } .project, .project:nth-child(even){ grid-template-columns:1fr; } .project:nth-child(even) .project-image, .project:nth-child(even) .project-copy{ order:initial; } .project-image{ height:500px; } .project-copy{ min-height:390px; } .strip-grid{ grid-template-columns:1fr 1fr; } .strip-card:first-child{ grid-column:1/3; } .cta-inner{ grid-template-columns:1fr; gap:35px; } .trusted-logos{ grid-template-columns:1fr 1fr; } .footer-grid{ grid-template-columns:1fr 1fr; } } @media(max-width:560px){ .header{ height:72px; padding:0 20px; } .logo{ font-size:18px; } .logo small{ font-size:5px; letter-spacing:.34em; } .hero{ min-height:680px; } .hero-content{ padding:125px 0 70px; } .hero h1{ font-size:64px; } .hero p{ font-size:16px; } .intro{ padding:75px 0; } .intro h2{ font-size:47px; } .intro p{ font-size:16px; } .projects{ padding-bottom:75px; } .project-list{ gap:12px; } .project-image{ height:380px; } .project-copy{ min-height:350px; padding:34px 26px; } .project h2{ font-size:44px; } .project p{ font-size:15px; } .project-strip{ padding:75px 0; } .strip-grid{ grid-template-columns:1fr; } .strip-card, .strip-card:first-child{ grid-column:auto; height:340px; } .cta{ padding:75px 0; } .cta h2{ font-size:47px; } .cta p{ font-size:16px; } .button{ width:100%; } .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-grid{ grid-template-columns:1fr; gap:28px; } .mobile-nav a{ font-size:31px; } } @media(max-width:380px){ .trusted-logos{ grid-template-columns:1fr; } } @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}