:root { --paper:#dfdedb; --surface:#d3d2ce; --ink:#26251e; --blue:#2456d6; --rule:#aaa9a1; --muted:#4e4d45; --display:"Source Serif 4",Georgia,serif; --body:"Libre Franklin",Arial,sans-serif; }
* { box-sizing:border-box }
html { scroll-behavior:smooth }
html:has(:focus-visible) { scroll-behavior:auto }
body { margin:0; background:var(--paper); color:var(--ink); font: 16px/1.55 var(--body) }
img { display:block; max-width:100%; height:auto }
a { color:inherit; text-underline-offset:.25em; transition:color .18s, transform .18s, background-color .18s }
a:hover { color:var(--blue) }
a:focus-visible { outline:3px solid var(--blue); outline-offset:4px }
.wrap { width:min(100% - 96px, 1240px); margin-inline:auto }
.skip { position:absolute; top:12px; left:12px; z-index:2; background:white; padding:12px; transform:translateY(-160%) }
.skip:focus { transform:none }
.bar { height:76px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--rule); gap:16px }
.bar a { min-height:44px; display:inline-flex; align-items:center }
.brand { gap:12px; text-decoration:none; font-weight:600 }
nav { display:flex; gap:28px }
.hero { min-height:calc(100svh - 76px); display:grid; align-items:center; padding:42px 0 54px }
.hero-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:clamp(32px,6vw,94px) }
h1,h2,h3,.statement-line { font-family:var(--display); font-weight:400; margin:0; letter-spacing:-.038em }
h1 { font-size:clamp(3rem,6.5vw,6rem); line-height:.97; max-width:10ch }
.hero-copy p { font-size:clamp(1.05rem,1.6vw,1.3rem); max-width:35ch; margin:28px 0 }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:10px 22px; background:var(--blue); color:white; border-radius:5px; text-decoration:none; font-weight:600 }
.button:hover { color:white; background:#193e9f; transform:translateY(-2px) }
.button:active { transform:translateY(1px) }
.hero-visual { position:relative; min-height:clamp(360px,46vw,650px); background:#c6c9d1; overflow:hidden; border:1px solid #a9abb5; border-radius:12px }
.hero-wide { position:absolute; width:87%; max-width:none; left:5%; top:15%; border:1px solid #999eae; border-radius:6px }
.hero-phone { position:absolute; width:30%; right:7%; bottom:7%; border:5px solid #26251e; border-radius:18px; box-shadow:0 14px 35px #252e453f }
.work-section { background:#f2f1ed; padding:70px 0 90px }
h2 { font-size:clamp(2.6rem,6vw,5.25rem); line-height:1 }
.case { display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(24px,6vw,85px); border-top:1px solid var(--rule); margin-top:30px; padding:34px 0 28px }
.case-type { color:var(--muted); margin:0 0 8px; font-size:.89rem }
h3 { font-size:clamp(2rem,3.7vw,3.6rem); line-height:1.06 }
.case-details { display:grid; gap:10px; margin:24px 0 16px }
dt { font-weight:700 }
dd { margin:2px 0 0; color:var(--muted) }
.case-links { display:flex; flex-wrap:wrap; gap:0 16px; list-style:none; padding:0; margin:0 }
.case-links a { display:inline-flex; min-height:44px; align-items:center; color:#1c47b6; font-weight:600 }
.case-images { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:12px }
.case-images figure { margin:0; min-width:0 }
.case-images a { display:block; overflow:hidden; border-radius:8px; border:1px solid var(--rule); transition:transform .18s }
.case-images a:hover { transform:translateY(-2px) }
.case-images img { width:100%; transition:transform .22s }
.case-images a:hover img { transform:scale(1.025) }
.case-images figcaption { font-size:.86rem; font-weight:600; margin-bottom:10px }
.case-samples { grid-template-columns:minmax(0,1fr) }
.case-samples figure { background:#e2e4e8; border:1px solid #b9bec8; border-radius:8px; padding:18px }
pre { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font: .88rem/1.65 Consolas,monospace }
.service-section { background:var(--surface); padding:clamp(64px,10vw,150px) 0; min-height:75svh }
.statement-line { font-size:clamp(2.1rem,5vw,4.9rem); line-height:1.06; max-width:21ch; margin:45px 0 }
.statement-line strong { color:var(--blue); font-weight:inherit }
.services { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; max-width:790px }
.services div { border-top:1px solid var(--rule); padding-top:15px }
.footer { border:0; color:var(--muted) }
@media(max-width:850px) { .wrap { width:calc(100% - 48px) } .hero-grid,.case { grid-template-columns:1fr; gap:26px } .hero { padding-top:36px } h1 { max-width:15ch } .hero-visual { min-height:0; aspect-ratio:1.55 } .hero-wide { top:9%; width:78% } .hero-phone { width:24%; right:6%; bottom:5% } }
@media(max-width:480px) { .wrap { width:calc(100% - 36px) } .bar { height:64px; font-size:.83rem; gap:9px } .brand { gap:6px } .brand img { width:23px } nav { gap:11px } .hero { min-height:calc(100svh - 64px); padding:28px 0 40px } h1 { font-size:clamp(2.65rem,11vw,3.4rem) } .hero-copy p { margin:19px 0 } .hero-visual { aspect-ratio:1.2 } .hero-wide { width:88%; left:4%; top:10% } .hero-phone { width:31%; right:5%; border-width:3px; border-radius:10px } .work-section { padding:50px 0 } .case { margin-top:22px; padding:22px 0 } .services { grid-template-columns:1fr } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto } *,*::before,*::after { transition:none!important; animation:none!important } }
.hero-grid { align-items:start }
.hero-visual { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,28%); align-items:center; gap:12px; padding:clamp(12px,2vw,30px) }
.hero-visual .hero-wide,.hero-visual .hero-phone { position:static; width:100%; max-width:100% }
.hero-visual .hero-phone { box-shadow:none }
.services { max-width:none }
.service-section .button { margin-top:18px }
@media(min-width:851px) { .hero-grid,.case { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px } }
.case-samples { align-content:start }
.contact-section { border-top:1px solid var(--rule); padding-block:clamp(48px,8vw,108px) }
.contact-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:24px }
.contact-layout p { max-width:44ch; margin:20px 0 0; color:var(--muted) }
.contact-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 22px }
.contact-actions a { scroll-margin-block:12px }
.contact-email { display:inline-flex; align-items:center; min-height:44px; color:#1c47b6; font-weight:600 }
.contact-email:hover { text-decoration-thickness:2px }
@media(max-width:850px) { .contact-layout { grid-template-columns:minmax(0,1fr) } }
@media(max-width:480px) { .contact-actions { align-items:stretch; flex-direction:column } .contact-email { justify-content:center } }