:root { --red:#df151c; --ink:#111; --paper:#f7f4ef; --muted:#716e69; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:88px; padding:0 clamp(24px,5vw,76px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #dedad4; background:rgba(247,244,239,.94); position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:12px; font-size:14px; letter-spacing:.2em; font-weight:800; }
.brand img { width:48px; height:48px; border-radius:50%; object-fit:cover; }
.brand b { color:var(--red); }
nav { display:flex; align-items:center; gap:34px; font-size:14px; font-weight:700; }
nav a:not(.nav-cta):hover { color:var(--red); }
.nav-cta { border:1px solid var(--ink); padding:13px 20px; transition:.2s; }
.nav-cta:hover { color:#fff; background:var(--ink); }
.hero { min-height:calc(100vh - 88px); display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:5vw; padding:70px clamp(24px,7vw,110px); overflow:hidden; }
.hero-copy { max-width:720px; position:relative; z-index:2; }
.eyebrow { display:flex; align-items:center; gap:12px; text-transform:uppercase; letter-spacing:.19em; font-weight:800; font-size:12px; }
.eyebrow span { display:block; width:34px; height:3px; background:var(--red); }
h1 { margin:24px 0; max-width:740px; font-size:clamp(52px,6vw,94px); line-height:.94; letter-spacing:-.06em; }
h1 em { color:var(--red); font-style:normal; }
.hero-text { max-width:640px; color:#57534e; font-size:clamp(18px,1.5vw,22px); line-height:1.65; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:24px; padding:18px 24px; font-weight:800; border:1px solid var(--ink); transition:.2s ease; }
.button.primary { background:var(--red); border-color:var(--red); color:#fff; }
.button.primary:hover { background:#b90e14; transform:translateY(-2px); }
.button.secondary:hover { background:var(--ink); color:#fff; }
.location { margin-top:32px; font-size:13px; color:#77736d; }
.hero-visual { min-height:620px; position:relative; display:grid; place-items:center; }
.logo-card { width:min(31vw,430px); aspect-ratio:1; border-radius:50%; overflow:hidden; background:#fff; box-shadow:0 30px 90px rgba(17,17,17,.14); position:relative; z-index:2; }
.logo-card img { width:100%; height:100%; object-fit:cover; }
.red-orbit { position:absolute; width:min(39vw,550px); aspect-ratio:1; border:2px solid var(--red); border-radius:50%; transform:translate(30px,-8px); }
.red-orbit:after { content:""; position:absolute; top:18%; right:-6px; width:13px; height:13px; border-radius:50%; background:var(--red); }
.metric { position:absolute; z-index:3; background:#fff; box-shadow:0 12px 40px rgba(0,0,0,.12); padding:18px 22px; display:flex; flex-direction:column; min-width:190px; }
.metric b { font-size:17px; }.metric span { font-size:12px; color:#777; margin-top:5px; }
.metric-one { left:0; top:22%; }.metric-two { right:0; bottom:18%; }
.section { padding:110px clamp(24px,7vw,110px); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:54px; }
.section-heading h2,.approach h2,.contact h2 { font-size:clamp(38px,4.5vw,68px); line-height:1.02; letter-spacing:-.045em; margin:22px 0 0; }
.section-heading>p { max-width:420px; color:var(--muted); line-height:1.7; font-size:17px; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #ccc6bd; border-bottom:1px solid #ccc6bd; }
.service-card { padding:36px 34px 42px 0; min-height:320px; position:relative; }
.service-card+ .service-card { border-left:1px solid #ccc6bd; padding-left:34px; }
.service-number { color:var(--red); font-weight:800; font-size:13px; }
.service-card h3 { font-size:25px; margin:50px 0 14px; }.service-card p { color:var(--muted); line-height:1.65; max-width:330px; }
.card-line { position:absolute; bottom:-1px; left:0; width:0; height:3px; background:var(--red); transition:.3s; }.service-card:hover .card-line { width:100%; }
.work { background:#fff; }
.project-card { display:grid; grid-template-columns:1.25fr .75fr; border:1px solid #d8d3cb; min-height:560px; }
.project-preview { padding:44px; padding-top:86px; background:#d9d6d0; display:flex; align-items:stretch; position:relative; min-width:0; }
.browser-bar { position:absolute; display:flex!important; align-items:center; gap:7px; top:44px; left:44px; right:44px; height:42px; padding:0 15px; background:#181818; border-radius:8px 8px 0 0; z-index:2; }
.browser-bar i { width:8px; height:8px; border-radius:50%; background:#686868; }.browser-bar i:first-child { background:var(--red); }
.browser-bar span { margin-left:12px; color:#aaa; font-size:10px; letter-spacing:.07em; }
.project-preview iframe { width:100%; min-height:480px; border:0; background:#fff; box-shadow:0 22px 55px rgba(0,0,0,.16); }
.project-details { padding:clamp(38px,5vw,74px); display:flex; flex-direction:column; justify-content:center; }
.project-type { margin:0; color:var(--red); font-size:11px; letter-spacing:.14em; font-weight:800; }
.project-details h3 { margin:18px 0; font-size:clamp(30px,3vw,47px); letter-spacing:-.035em; }
.project-details>p:not(.project-type) { color:var(--muted); line-height:1.7; }
.project-details ul { display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; padding:24px 0; margin:0; border-top:1px solid #dedad4; border-bottom:1px solid #dedad4; list-style:none; font-size:13px; font-weight:700; }
.project-details li:before { content:"✓"; color:var(--red); margin-right:8px; }
.project-note { margin-top:26px; color:var(--ink)!important; font-size:12px; font-weight:800; }
.approach { background:#111; color:#fff; display:grid; grid-template-columns:.9fr 1.1fr; gap:10vw; }
.eyebrow.light { color:#ddd; }.approach-copy>p:not(.eyebrow) { color:#aaa; line-height:1.75; font-size:17px; max-width:560px; }
.text-link { display:inline-flex; gap:22px; margin-top:30px; color:#fff; font-weight:800; border-bottom:2px solid var(--red); padding-bottom:8px; }
.steps { margin:0; padding:0; list-style:none; }.steps li { display:grid; grid-template-columns:64px 1fr; gap:20px; padding:28px 0; border-top:1px solid #3c3c3c; }.steps li:last-child { border-bottom:1px solid #3c3c3c; }
.steps b { color:var(--red); font-size:13px; }.steps h3 { margin:0 0 10px; font-size:23px; }.steps p { margin:0; color:#999; line-height:1.55; }
.contact { text-align:center; display:flex; flex-direction:column; align-items:center; }.contact .eyebrow { justify-content:center; }.contact h2 { max-width:900px; margin-bottom:42px; }.contact-links { display:flex; gap:28px; margin-top:38px; color:var(--muted); }.contact-links a:hover { color:var(--red); }
footer { background:#111; color:#999; padding:34px clamp(24px,7vw,110px); display:flex; justify-content:space-between; align-items:center; font-size:12px; }.footer-brand { color:#fff; }.footer-brand img { width:38px; height:38px; }
@media (max-width:900px) { nav>a:not(.nav-cta){display:none}.hero{grid-template-columns:1fr;padding-top:54px}.hero-visual{min-height:470px}.logo-card{width:min(65vw,390px)}.red-orbit{width:min(75vw,470px)}.metric-one{left:4%}.metric-two{right:3%}.section-heading,.approach,.project-card{grid-template-columns:1fr}.section-heading{align-items:start;flex-direction:column}.approach{gap:60px}.service-grid{grid-template-columns:1fr}.service-card+.service-card{border-left:0;border-top:1px solid #ccc6bd;padding-left:0}.service-card{min-height:250px}.service-card h3{margin-top:28px}.project-preview{min-height:500px}.project-details{padding:48px}}
@media (max-width:560px) { .site-header{height:74px}.brand{font-size:11px;gap:8px}.brand img{width:38px;height:38px}.nav-cta{padding:11px 12px;font-size:12px}.hero{min-height:auto;padding-top:60px}.hero-visual{min-height:390px}.metric{padding:12px 15px;min-width:145px}.metric-one{top:12%;left:0}.metric-two{bottom:8%;right:0}.section{padding-top:80px;padding-bottom:80px}.service-card{padding-right:0}.contact-links{flex-direction:column;gap:12px}footer{flex-direction:column;gap:20px;text-align:center}.hero-actions .button{width:100%}.project-preview{padding:60px 18px 18px;min-height:390px}.browser-bar{top:18px;left:18px;right:18px}.project-preview iframe{min-height:430px}.project-details{padding:34px 24px}.project-details ul{grid-template-columns:1fr}}