:root { --ink:#173c36; --paper:#f7f4ed; --orange:#ef6a45; --yellow:#f1c75b; --mint:#d9e8d6; --muted:#66756e; --line:rgba(23,60,54,.2); --mono:'DM Mono',monospace; --sans:'Plus Jakarta Sans',sans-serif; --display:'Space Grotesk',sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); overflow-x:hidden; } a { color:inherit; text-decoration:none; } button,input,select,textarea { font:inherit; } .section-pad { padding-left:8.5vw; padding-right:8.5vw; }
.site-header { align-items:center; display:flex; justify-content:space-between; padding:25px 5vw; position:absolute; top:0; width:100%; z-index:5; } .wordmark { font-family:var(--display); font-size:18px; font-weight:700; letter-spacing:-.04em; } .wordmark span { color:var(--orange); font-family:var(--mono); font-size:9px; letter-spacing:.08em; margin-left:5px; } .desktop-nav { display:flex; gap:32px; margin-left:auto; margin-right:6vw; } .desktop-nav a,.header-cta,.eyebrow,.heading-note,.trust-row,.service-tail,.form-note { font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; } .desktop-nav a { padding:6px 0; } .desktop-nav a:hover,.desktop-nav a.active { color:var(--orange); } .header-cta { border-bottom:1px solid var(--ink); padding-bottom:6px; } .header-cta span,.button span,.text-link span { color:var(--orange); font-size:16px; margin-left:8px; } .menu-button { background:none; border:0; display:none; }
.hero { display:grid; grid-template-columns:48% 52%; min-height:740px; padding-top:154px; } .eyebrow { margin:0; } .status-dot { background:var(--orange); border-radius:50%; display:inline-block; height:7px; margin-right:8px; width:7px; } h1,h2,h3 { font-family:var(--display); } .hero h1 { font-size:clamp(52px,6.5vw,100px); font-weight:600; letter-spacing:-.075em; line-height:.93; margin:47px 0 28px; } em { color:var(--orange); font-style:normal; } .hero-intro { font-size:16px; line-height:1.7; margin:0; max-width:390px; } .hero-actions { align-items:center; display:flex; gap:25px; margin-top:39px; } .button { align-items:center; border:1px solid transparent; display:inline-flex; font-family:var(--mono); font-size:10px; justify-content:center; padding:16px 20px; text-transform:uppercase; transition:transform .25s,background .25s; } .button:hover { transform:translateY(-3px); } .button-dark { background:var(--ink); color:var(--paper); } .button-dark span { color:var(--yellow); } .button-outline { border-color:var(--ink); } .quiet-link,.text-link { border-bottom:1px solid currentColor; font-family:var(--mono); font-size:10px; padding-bottom:7px; text-transform:uppercase; } .quiet-link span { color:var(--orange); margin-left:8px; } .trust-row { border-top:1px solid var(--line); display:flex; gap:35px; justify-content:space-between; margin-top:72px; max-width:540px; padding-top:13px; } .hero-visual { background:url('https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=1300&q=85') center/cover; min-height:530px; overflow:hidden; position:relative; } .hero-visual::after { background:linear-gradient(150deg,rgba(23,60,54,.12),rgba(239,106,69,.15)); content:''; inset:0; position:absolute; } .image-tag,.visual-footer { color:var(--paper); font-family:var(--mono); font-size:10px; line-height:1.5; position:absolute; text-transform:uppercase; z-index:1; } .tag-top { left:27px; top:25px; } .visual-footer { bottom:25px; display:flex; justify-content:space-between; left:27px; right:27px; } .map-pin { align-items:center; background:var(--orange); border:8px solid rgba(247,244,237,.8); border-radius:50%; color:var(--paper); display:flex; font-family:var(--display); font-size:30px; height:64px; justify-content:center; left:51%; position:absolute; top:43%; width:64px; z-index:2; } .review-card { background:var(--paper); color:var(--ink); display:grid; gap:5px; padding:17px 20px; position:absolute; bottom:52px; right:27px; width:220px; z-index:2; } .review-card .stars { color:var(--orange); font-size:12px; letter-spacing:2px; } .review-card strong { font-family:var(--display); font-size:14px; line-height:1.15; } .review-card small { color:var(--muted); font-family:var(--mono); font-size:9px; }
.problem { background:var(--ink); color:var(--paper); padding-bottom:130px; padding-top:122px; } .section-kicker { align-items:center; display:flex; justify-content:space-between; } .section-kicker span { color:var(--yellow); font-family:var(--mono); font-size:10px; text-transform:uppercase; } .problem .eyebrow { color:var(--yellow); } .problem-grid { display:grid; gap:10%; grid-template-columns:58% 32%; margin-top:70px; } .problem h2 { font-size:clamp(42px,5vw,76px); font-weight:500; letter-spacing:-.07em; line-height:.96; margin:0; } .problem h2 span { color:var(--yellow); } .problem-grid div { align-self:end; } .problem-grid p { color:#cad4c7; font-size:15px; line-height:1.75; margin:0 0 30px; }
.services { background:var(--mint); padding-bottom:125px; padding-top:122px; } .section-heading { align-items:end; display:flex; justify-content:space-between; } .section-heading h2 { font-size:clamp(43px,5vw,76px); font-weight:500; letter-spacing:-.07em; line-height:.95; margin:35px 0 0; } .heading-note { color:var(--muted); line-height:1.5; text-align:right; } .service-grid { display:grid; gap:13px; grid-template-columns:repeat(4,1fr); margin-top:72px; } .service-card { background:var(--paper); min-height:302px; padding:22px 22px 25px; position:relative; transition:transform .25s; } .service-card:hover { transform:translateY(-7px); } .service-card.featured { background:var(--orange); color:var(--ink); } .service-number { font-family:var(--mono); font-size:10px; } .service-icon { font-family:var(--display); font-size:42px; margin:30px 0 24px; } .service-card h3 { font-size:25px; letter-spacing:-.06em; line-height:1; margin:0; } .service-card p { font-size:13px; line-height:1.55; margin:13px 0 23px; } .service-card a { border-bottom:1px solid currentColor; font-family:var(--mono); font-size:10px; padding-bottom:5px; text-transform:uppercase; } .service-tail { align-items:center; border-top:1px solid var(--line); display:flex; justify-content:space-between; margin-top:25px; padding-top:19px; } .service-tail .button { font-size:9px; padding:12px 16px; }
.about { align-items:center; display:grid; gap:10%; grid-template-columns:43% 47%; padding-bottom:140px; padding-top:140px; } .about-photo { background:url('https://images.unsplash.com/photo-1556740749-887f6717d7e4?auto=format&fit=crop&w=1000&q=85') center/cover; height:550px; position:relative; } .photo-label { background:var(--yellow); bottom:25px; font-family:var(--mono); font-size:10px; left:25px; line-height:1.5; padding:12px 15px; position:absolute; text-transform:uppercase; } .about-copy h2 { font-size:clamp(42px,5vw,70px); font-weight:500; letter-spacing:-.07em; line-height:.96; margin:38px 0; } .about-copy p { color:var(--muted); font-size:15px; line-height:1.7; max-width:450px; } .about-copy .text-link { display:inline-block; margin-top:20px; } .process { background:var(--yellow); padding-bottom:100px; padding-top:88px; } .process-grid { border-top:1px solid var(--ink); display:grid; grid-template-columns:repeat(4,1fr); margin-top:60px; } .process-grid>div { border-right:1px solid var(--line); padding:24px 22px 0 0; } .process-grid>div:not(:first-child) { padding-left:22px; } .process-grid>div:last-child { border:0; } .process-grid span { font-family:var(--mono); font-size:10px; } .process-grid h3 { font-size:30px; letter-spacing:-.06em; margin:39px 0 10px; } .process-grid p { font-size:13px; line-height:1.5; margin:0; max-width:160px; }
.contact { background:var(--orange); display:grid; gap:10%; grid-template-columns:42% 48%; padding-bottom:125px; padding-top:115px; } .contact h2 { font-size:clamp(51px,6vw,90px); font-weight:500; letter-spacing:-.08em; line-height:.9; margin:55px 0 25px; } .contact-intro>p:not(.eyebrow) { font-size:15px; line-height:1.7; max-width:370px; } .contact-details { display:grid; gap:10px; margin-top:50px; } .contact-details a,.contact-details span { font-family:var(--mono); font-size:10px; text-transform:uppercase; } .contact-details a { border-bottom:1px solid var(--ink); justify-self:start; padding-bottom:6px; } .audit-form { background:var(--paper); display:grid; gap:19px; grid-template-columns:1fr 1fr; padding:31px; } label { display:grid; font-family:var(--mono); font-size:10px; gap:8px; text-transform:uppercase; } input,select,textarea { background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; color:var(--ink); outline:0; padding:10px 0; width:100%; } textarea { resize:vertical; } input:focus,select:focus,textarea:focus { border-color:var(--orange); } .wide { grid-column:1/-1; } .audit-form .button { border:0; cursor:pointer; justify-self:start; } .form-note { color:var(--muted); margin:0; } .whatsapp { align-items:center; background:#239b66; bottom:22px; color:white; display:flex; gap:10px; padding:12px 17px; position:fixed; right:22px; z-index:4; } .whatsapp span { border:1px solid rgba(255,255,255,.5); border-radius:50%; font-size:18px; height:25px; line-height:23px; text-align:center; width:25px; } .whatsapp b { font-family:var(--mono); font-size:10px; font-weight:400; text-transform:uppercase; } .site-footer { background:var(--orange); border-top:1px solid var(--line); display:flex; font-family:var(--mono); font-size:9px; justify-content:space-between; padding:22px 5vw; text-transform:uppercase; }
.reveal { animation:rise .8s both; } .reveal-delay { animation-delay:.15s; } @keyframes rise { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
@media (max-width:820px) { .site-header { padding:20px 6vw; } .desktop-nav,.header-cta { display:none; } .menu-button { display:grid; gap:5px; padding:8px 0 8px 8px; } .menu-button span { background:var(--ink); display:block; height:1px; width:22px; } .desktop-nav.is-open { background:var(--paper); display:flex; flex-direction:column; gap:22px; left:0; margin:0; padding:84px 6vw 25px; position:absolute; top:0; width:100%; z-index:-1; } .section-pad { padding-left:6vw; padding-right:6vw; } .hero { display:block; min-height:auto; padding-top:125px; } .hero h1 { font-size:56px; } .hero-visual { margin-top:62px; min-height:430px; } .trust-row { gap:10px; margin-bottom:50px; } .trust-row span:last-child { text-align:right; } .problem-grid,.about,.contact { display:block; } .problem-grid { margin-top:45px; } .problem-grid div { margin-top:38px; } .services,.problem { padding-bottom:85px; padding-top:85px; } .section-heading { align-items:start; display:block; } .heading-note { margin-top:28px; text-align:left; } .service-grid { grid-template-columns:1fr 1fr; margin-top:48px; } .service-card { min-height:285px; } .service-tail { align-items:start; flex-direction:column; gap:18px; } .about { padding-bottom:85px; padding-top:85px; } .about-photo { height:400px; } .process { padding-bottom:75px; padding-top:75px; } .process-grid { grid-template-columns:1fr 1fr; } .process-grid>div:nth-child(2) { border-right:0; } .process-grid>div:nth-child(3),.process-grid>div:nth-child(4) { border-top:1px solid var(--line); } .process-grid>div:nth-child(3) { padding-left:0; } .contact { padding-bottom:85px; padding-top:85px; } .audit-form { margin-top:55px; } }
@media (max-width:500px) { .hero h1 { font-size:49px; } .hero-actions { align-items:start; flex-direction:column; gap:18px; } .hero-visual { min-height:390px; } .review-card { bottom:45px; right:15px; width:200px; } .service-grid { display:block; } .service-card { margin-bottom:10px; min-height:240px; } .service-icon { margin:17px 0; } .process-grid { display:block; } .process-grid>div,.process-grid>div:not(:first-child) { border-bottom:1px solid var(--line); border-right:0; padding:20px 0; } .process-grid h3 { margin:14px 0 8px; } .audit-form { display:block; padding:22px; } .audit-form label { margin-bottom:19px; } .audit-form .button { width:100%; } .whatsapp { bottom:13px; right:13px; } .whatsapp b { display:none; } .site-footer { flex-wrap:wrap; gap:12px; } .site-footer span:nth-child(2) { order:3; width:100%; } }