:root { --ink:#25282e; --muted:#69707a; --orange:#ee883f; --blue:#82c7ed; --pale:#f4f6f7; --line:#dfe4e7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:"DM Sans",sans-serif; line-height:1.5; }
.site-header { height:92px; max-width:1300px; padding:15px 36px; margin:auto; display:flex; align-items:center; justify-content:space-between; }
.brand img { display:block; width:268px; height:auto; }
nav { display:flex; gap:29px; align-items:center; }
nav a { color:var(--ink); font-size:14px; font-weight:600; text-decoration:none; }
.nav-cta { border:1px solid var(--ink); padding:12px 17px; }
.menu-button { display:none; border:0; background:none; color:var(--ink); font:600 14px "DM Sans",sans-serif; }
.hero { min-height:630px; overflow:hidden; display:grid; grid-template-columns:1.05fr .95fr; background:linear-gradient(120deg,#f5f7f8 0%,#fff 64%); }
.hero-copy { max-width:650px; align-self:center; justify-self:end; padding:80px 60px 90px 36px; }
.eyebrow { margin:0 0 18px; color:#d87536; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
h1,h2,h3 { font-family:Manrope,sans-serif; letter-spacing:-.045em; }
h1 { max-width:600px; margin:0; font-size:clamp(48px,5vw,75px); line-height:1.04; font-weight:800; }
h1 span { color:#72bce5; }
.hero-text { max-width:490px; color:var(--muted); font-size:18px; line-height:1.65; margin:25px 0 31px; }
.hero-actions { display:flex; align-items:center; gap:25px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:22px; text-decoration:none; font-size:14px; font-weight:700; transition:transform .2s,background .2s; }
.button:hover { transform:translateY(-2px); }
.primary { padding:16px 21px; color:white; background:var(--ink); }
.primary span { color:var(--blue); font-size:20px; line-height:1; }
.text-button { color:var(--ink); border-bottom:1px solid var(--ink); padding:7px 0; }
.hero-visual { position:relative; min-height:630px; background:var(--ink); overflow:hidden; }
.hero-visual:after { content:""; position:absolute; inset:0; background:linear-gradient(140deg,rgba(255,255,255,.05),transparent 45%); }
.hero-panel { position:absolute; z-index:2; top:86px; left:62px; color:white; }
.hero-panel p { margin:0 0 8px; color:var(--blue); text-transform:uppercase; font-size:10px; letter-spacing:.15em; font-weight:700; }
.hero-panel strong { font:700 29px/1.17 Manrope,sans-serif; letter-spacing:-.04em; }
.orb { position:absolute; border-radius:50%; filter:blur(.2px); }
.orb-blue { width:440px; height:440px; top:155px; right:-25px; background:radial-gradient(circle at 28% 28%,#c2e7fa,#7bc0e7 50%,#4f9dc8); opacity:.95; }
.orb-orange { width:178px; height:178px; top:253px; right:309px; background:var(--orange); }
.outline { position:absolute; border:1px solid rgba(255,255,255,.45); transform:rotate(45deg); }
.outline-one { width:290px; height:290px; right:145px; bottom:-132px; }
.outline-two { width:177px; height:177px; right:-43px; top:59px; }
.hero-number { position:absolute; z-index:2; bottom:36px; left:62px; margin:0; color:white; font:700 15px Manrope,sans-serif; }.hero-number span { color:#8a929b; }
.section { max-width:1228px; margin:auto; padding:115px 36px; }
.intro { display:grid; grid-template-columns:26% 1fr; border-bottom:1px solid var(--line); }.intro h2,.section-heading h2,.why-copy h2 { margin:0; max-width:770px; font-size:clamp(32px,3.7vw,52px); line-height:1.13; }.intro div p { max-width:570px; margin:25px 0 0; color:var(--muted); font-size:17px; line-height:1.7; }
.services { padding-top:105px; }.section-heading { max-width:790px; }.service-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:53px; border-left:1px solid var(--line); border-top:1px solid var(--line); }.service-card { min-height:256px; padding:26px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); text-decoration:none; color:inherit; transition:background .2s; }.service-card:hover { background:#f7f9fa; }.service-card span { color:#a0a8b0; font:600 12px Manrope,sans-serif; }.service-card h3 { margin:56px 0 10px; font-size:23px; line-height:1.12; }.service-card p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }.featured { background:var(--ink); color:white; }.featured:hover { background:#343940; }.featured p { color:#d7dde1; }.quote-card { background:#e9f5fb; }.quote-card h3 { margin-top:56px; }.quote-card b { color:#e87835; font-size:20px; }
.why-us { max-width:none; padding:0; display:grid; grid-template-columns:1fr 1fr; background:var(--pale); }.why-art { position:relative; min-height:680px; overflow:hidden; background:var(--ink); }.tile { position:absolute; transform:rotate(45deg); }.tile-a { width:375px;height:375px; background:var(--orange); top:173px; left:135px; }.tile-b { width:205px;height:205px; background:var(--blue); top:76px; left:36px; }.tile-c { width:220px;height:220px; border:1px solid white; bottom:-82px; right:48px; }.why-caption { position:absolute; bottom:53px; left:58px; color:white; font:700 24px/1.25 Manrope,sans-serif; letter-spacing:-.04em; }.why-copy { align-self:center; max-width:600px; padding:80px 52px 80px 86px; }.benefit { display:grid; grid-template-columns:52px 1fr; gap:12px; padding:22px 0; border-bottom:1px solid #d9dfe2; }.benefit:first-of-type { margin-top:36px; border-top:1px solid #d9dfe2; }.benefit strong { color:var(--orange); font:700 13px Manrope,sans-serif; }.benefit p { margin:0; color:var(--muted); font-size:14px; }.benefit b { color:var(--ink); }
.contact { display:grid; grid-template-columns:1fr 1fr; gap:60px; padding:104px max(36px,calc((100vw - 1156px)/2)); background:var(--orange); color:white; }.contact .eyebrow { color:#4e7d96; }.contact h2 { margin:0; font:800 clamp(42px,4vw,61px)/1.06 Manrope,sans-serif; letter-spacing:-.05em; }.contact-details { padding-top:5px; }.contact-details>p { max-width:350px; margin:0 0 25px; font-size:17px; }.contact-link { display:block; width:max-content; max-width:100%; color:white; font:700 21px Manrope,sans-serif; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.55); padding-bottom:3px; margin:10px 0; }.light { background:white; color:var(--ink); margin-top:26px; }.light span { color:var(--orange); }
footer { max-width:1228px; min-height:140px; margin:auto; padding:36px; display:flex; align-items:center; justify-content:space-between; gap:25px; color:#7b838c; font-size:12px; } footer img { width:190px; height:auto; } footer p { margin:0; }
@media (max-width:780px) { .site-header { height:75px;padding:12px 20px; }.brand img { width:210px; } nav { display:none; } nav.open { display:flex; position:absolute; top:75px; left:0; right:0; z-index:10; flex-direction:column; align-items:stretch; gap:0; padding:15px 20px 22px; background:white; box-shadow:0 12px 24px rgba(0,0,0,.08); }.menu-button { display:block; }.nav-cta { text-align:center; margin-top:10px; }.hero { grid-template-columns:1fr; }.hero-copy { justify-self:start; padding:75px 25px 64px; }.hero-visual { min-height:390px; }.hero-panel { top:43px; left:27px; }.orb-blue { width:330px;height:330px;top:100px;right:-48px; }.orb-orange { width:132px;height:132px;top:180px;right:205px; }.hero-number { left:27px;bottom:25px; }.section { padding:72px 25px; }.intro { grid-template-columns:1fr; gap:7px; }.service-grid { grid-template-columns:1fr; margin-top:35px; }.service-card { min-height:210px; }.service-card h3,.quote-card h3 { margin-top:37px; }.why-us,.contact { grid-template-columns:1fr; }.why-art { min-height:420px; }.tile-a { width:260px;height:260px; top:119px; left:74px; }.tile-b { width:150px;height:150px; top:44px; left:20px; }.why-caption { left:27px; bottom:28px; }.why-copy { padding:68px 25px; }.contact { gap:35px; padding:73px 25px; } footer { padding:29px 25px; flex-direction:column; align-items:flex-start; gap:11px; } }