: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:86vh; display:flex; align-items:flex-end; overflow:hidden; } .hero img{ position:absolute; inset:0; filter: brightness(.42) saturate(.74); } .hero:after{ content:""; position:absolute; inset:0; background: linear-gradient( 90deg, rgba(0,0,0,.94), rgba(0,0,0,.42) 55%, rgba(0,0,0,.12) ); } .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; max-width:1000px; font-family:var(--serif); font-size:clamp(68px,9vw,138px); font-weight:400; line-height:.9; letter-spacing:-.045em; } .hero p{ max-width:650px; margin-top:28px; color:#ddd4ca; font-family:var(--serif); font-size:19px; line-height:1.7; } .story{ padding:110px 0; background:var(--paper); color:#171717; } .story-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start; } .story h2{ margin:0; font-family:var(--serif); font-size:clamp(48px,6vw,84px); font-weight:400; line-height:.95; letter-spacing:-.03em; } .story-copy{ max-width:680px; } .story p{ margin-top:0; color:#4e4942; font-family:var(--serif); font-size:18px; line-height:1.8; } .visual-story{ background:var(--paper); padding:0 0 110px; } .visual-grid{ display:grid; grid-template-columns:1.15fr .85fr; grid-template-rows:330px 330px; gap:14px; } .visual-item{ position:relative; overflow:hidden; background:#222; } .visual-item:first-child{ grid-row:1/3; } .visual-item img{ transition:transform .9s ease; } .visual-item:hover img{ transform:scale(1.045); } .visual-item:after{ content:""; position:absolute; inset:0; background: linear-gradient( transparent 50%, rgba(0,0,0,.72) ); } .visual-label{ position:absolute; z-index:2; left:25px; bottom:22px; color:#fff; } .visual-label small{ display:block; margin-bottom:7px; color:var(--gold-light); font-size:8px; letter-spacing:.2em; } .visual-label strong{ font-family:var(--serif); font-size:25px; font-weight:400; } .values{ padding:110px 0; background:#0b0e10; } .values-head{ display:grid; grid-template-columns:1fr .7fr; gap:70px; align-items:end; margin-bottom:50px; } .values-head h2{ margin:0; font-family:var(--serif); font-size:clamp(48px,6vw,82px); font-weight:400; line-height:.95; } .values-head p{ margin:0; color:#aaa299; font-family:var(--serif); font-size:17px; line-height:1.75; } .value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .value{ min-height:370px; padding:38px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid rgba(255,255,255,.1); background:#0e1113; transition:.35s; } .value:hover{ transform:translateY(-6px); border-color:rgba(200,165,107,.45); background:#111518; } .value span{ color:var(--gold); font-size:9px; letter-spacing:.2em; } .value h3{ margin:0 0 12px; font-family:var(--serif); font-size:36px; font-weight:400; } .value p{ margin:0; color:#aaa299; font-family:var(--serif); font-size:15px; line-height:1.7; } .cinematic{ min-height:760px; position:relative; display:flex; align-items:center; overflow:hidden; } .cinematic img{ position:absolute; inset:-5%; width:110%; height:110%; filter: brightness(.36) saturate(.78); } .cinematic:after{ content:""; position:absolute; inset:0; background: linear-gradient( 90deg, rgba(0,0,0,.83), rgba(0,0,0,.18), rgba(0,0,0,.65) ); } .cinematic-content{ position:relative; z-index:2; width:min(1100px,90vw); margin:auto; display:grid; grid-template-columns:1fr .8fr; gap:70px; align-items:end; } .cinematic h2{ margin:0; font-family:var(--serif); font-size:clamp(50px,6vw,88px); font-weight:400; line-height:.95; } .cinematic p{ margin:0; color:#ddd4ca; font-family:var(--serif); font-size:18px; line-height:1.75; } .work-cta{ padding:95px 0; background:var(--paper); color:#171717; } .work-cta-inner{ display:flex; justify-content:space-between; align-items:center; gap:50px; } .work-cta h2{ margin:0; font-family:var(--serif); font-size:clamp(42px,5vw,70px); font-weight:400; line-height:.96; } .button{ display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 23px; background:#171717; color:#fff; font-size:10px; font-weight:700; letter-spacing:.1em; transition:.3s; } .button:hover{ background:var(--gold); color:#17120d; 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; } .story-grid, .values-head, .cinematic-content{ grid-template-columns:1fr; gap:35px; } .visual-grid{ grid-template-columns:1fr 1fr; grid-template-rows:450px 300px; } .visual-item:first-child{ grid-column:1/3; grid-row:auto; } .value-grid{ grid-template-columns:1fr; } .work-cta-inner{ flex-direction:column; align-items:flex-start; } .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:58px; } .hero p{ font-size:16px; } .story{ padding:75px 0; } .story h2{ font-size:47px; } .story p{ font-size:16px; } .visual-story{ padding-bottom:75px; } .visual-grid{ display:flex; flex-direction:column; gap:10px; } .visual-item, .visual-item:first-child{ width:100%; height:360px; } .values{ padding:75px 0; } .values-head h2{ font-size:47px; } .values-head p{ font-size:16px; } .value{ min-height:290px; padding:28px; } .cinematic{ min-height:650px; } .cinematic-content{ width:88vw; } .cinematic h2{ font-size:47px; } .cinematic p{ font-size:16px; } .work-cta{ padding:75px 0; } .work-cta h2{ font-size:45px; } .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}