:root { --ink:#11213a; --blue:#167c9d; --electric:#1b5dca; --line:#cbd4dd; --muted:#52616f; --white:#fff; --navy:#041a36; --serif:'Playfair Display', Georgia, serif; --sans:'DM Sans', Arial, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--white); font-family:var(--sans); } a { color:inherit; text-decoration:none; } .wrap { width:min(1400px, calc(100% - 80px)); margin:0 auto; }
.site-header { width:min(1400px, calc(100% - 80px)); margin:0 auto; min-height:110px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--ink); } .brand { display:flex; align-items:center; gap:17px; font-size:27px; font-weight:600; letter-spacing:-1.3px; } .brand-mark { width:42px; height:42px; display:block; border:4px solid var(--ink); border-right-color:transparent; } nav { display:flex; gap:55px; font-size:17px; } nav a:hover, .text-link:hover { color:var(--electric); }
.hero { min-height:720px; display:grid; grid-template-columns:49% 51%; align-items:center; } .hero-copy { padding:80px 68px 80px 32px; } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(58px,6.1vw,96px); line-height:.99; letter-spacing:-5px; margin-bottom:35px; max-width:750px; } .hero-copy p { font-size:24px; line-height:1.45; max-width:560px; color:#324155; } .hero-actions { display:flex; align-items:center; gap:35px; margin-top:47px; } .button { cursor:pointer; border:0; font:600 17px var(--sans); padding:20px 29px; transition:transform .2s, background .2s; } .button:hover { transform:translateY(-2px); } .button-primary { background:var(--blue); color:#fff; } .text-link { color:var(--electric); font-size:18px; border-bottom:2px solid currentColor; padding-bottom:6px; } .text-link span { font-size:25px; margin-left:10px; } .hero-image { height:610px; margin:0; overflow:hidden; } .hero-image img { width:100%; height:100%; object-fit:cover; object-position:63% center; }
.services { display:grid; grid-template-columns:27% 45% 28%; gap:56px; padding:145px 0 115px; align-items:start; } .service-image { height:610px; margin:0; border:1px solid var(--ink); padding:16px; } .service-image img { width:100%; height:100%; object-fit:cover; } h2 { font:500 clamp(46px,4.2vw,70px)/1.05 var(--serif); letter-spacing:-2.5px; margin-bottom:38px; } .lead { color:#283b55; font-size:22px; line-height:1.45; max-width:540px; } .service-list { list-style:none; padding:27px 0 0; margin:0; } .service-list li { display:flex; gap:40px; align-items:center; padding:26px 0; border-bottom:1px solid var(--ink); font:500 28px var(--serif); } .service-list span { color:var(--electric); font:500 43px var(--serif); } .quote-panel { border:1px solid var(--ink); border-radius:9px; padding:34px; display:grid; gap:22px; } label { display:grid; gap:9px; font-size:15px; font-weight:600; } input,select,textarea { width:100%; padding:13px; border:1px solid var(--ink); border-radius:3px; background:#fff; color:var(--ink); font:16px var(--sans); } textarea { resize:vertical; } .form-status { min-height:20px; margin:0; color:var(--blue); font-size:14px; }
.process { border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); } .process-grid { display:grid; grid-template-columns:repeat(3,1fr); } .process-grid article { padding:60px 56px 64px 0; } .process-grid article + article { border-left:1px solid var(--ink); padding-left:56px; } .process-number { display:block; color:var(--electric); font:500 31px var(--serif); margin-bottom:35px; } h3 { font:500 42px var(--serif); letter-spacing:-1.5px; margin-bottom:16px; } .process-grid p { color:#465568; font-size:18px; line-height:1.5; max-width:330px; }
.work { display:grid; grid-template-columns:66% 34%; gap:58px; padding:145px 0; align-items:center; } .work-media { display:grid; grid-template-columns:58% 42%; gap:14px; height:480px; } .work-media img { width:100%; height:100%; object-fit:cover; } .work-media img:first-child { object-position:65% center; } .work-copy { max-width:370px; } .work-copy h2 { font-size:58px; } .work-copy p { color:#465568; font-size:21px; line-height:1.45; margin-bottom:36px; }
.contact { background:var(--navy); color:#fff; padding:105px 0 34px; } .contact-grid { display:grid; grid-template-columns:42% 58%; gap:75px; align-items:center; } .contact h2 { font-size:62px; margin:0; } .contact-actions { border-left:1px solid rgba(255,255,255,.45); padding-left:64px; display:grid; gap:30px; } .contact-button { border:1px solid rgba(255,255,255,.9); min-height:100px; border-radius:8px; padding:25px 30px; display:flex; align-items:center; gap:22px; font-size:22px; transition:background .2s,color .2s; } .contact-button b { margin-left:auto; color:#59b6d1; font-size:35px; font-weight:400; } .contact-button:hover { background:#fff; color:var(--navy); } .email-link { color:#fff; font-size:20px; text-decoration:underline; text-underline-offset:7px; } footer { margin-top:85px !important; border-top:1px solid rgba(255,255,255,.45); padding-top:34px; display:flex; justify-content:space-between; font:500 22px var(--serif); } footer div { display:flex; gap:50px; font:400 17px var(--sans); }
@media (max-width:900px) { .wrap,.site-header { width:min(100% - 40px, 680px); } .site-header { min-height:82px; } .brand { font-size:21px; } .brand-mark { width:31px; height:31px; border-width:3px; } nav { gap:18px; font-size:14px; } .hero { grid-template-columns:1fr; min-height:0; padding:65px 0 0; } .hero-copy { padding:0 0 48px; } h1 { font-size:clamp(50px,14vw,76px); letter-spacing:-3px; } .hero-copy p { font-size:20px; } .hero-image { height:450px; } .services { grid-template-columns:1fr; gap:42px; padding:85px 0; } .service-image { height:420px; max-width:360px; } h2 { font-size:47px; } .quote-panel { max-width:520px; } .process-grid { grid-template-columns:1fr; } .process-grid article,.process-grid article + article { padding:42px 0; border-left:0; border-bottom:1px solid var(--ink); } .process-grid article:last-child { border-bottom:0; } .work { grid-template-columns:1fr; gap:50px; padding:85px 0; } .work-media { height:380px; } .work-copy h2 { font-size:49px; } .contact { padding:80px 0 30px; } .contact-grid { grid-template-columns:1fr; gap:40px; } .contact h2 { font-size:52px; } .contact-actions { border-left:0; border-top:1px solid rgba(255,255,255,.45); padding:32px 0 0; } footer { margin-top:60px !important; flex-direction:column; gap:25px; } footer div { gap:25px; flex-wrap:wrap; } }
@media (max-width:520px) { .hero-actions { align-items:flex-start; flex-direction:column; gap:24px; } .hero-image { height:330px; } .work-media { height:290px; grid-template-columns:1fr 1fr; } .contact-button { font-size:18px; min-height:86px; padding:20px; } }