:root { --ink:#121212; --yellow:#ffe76a; --orange:#f36739; --blue:#4b95df; --paper:#f8f7f1; --line:#121212; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height:1.45; }
a { color:inherit; text-decoration:none; }
.site-header { position:absolute; inset:0 0 auto; z-index:2; display:flex; align-items:center; justify-content:space-between; width:100%; padding:28px clamp(24px,5vw,80px); }
.brand { display:inline-flex; align-items:center; gap:9px; font-family:Georgia, serif; font-size:27px; font-weight:700; letter-spacing:0; }
.brand img { display:block; width:auto; height:46px; }
nav { display:flex; gap:clamp(24px,6vw,110px); font-weight:700; }
nav a:hover { text-decoration:underline; }
.nav-cta { display:none; font-weight:700; }
.hero { position:relative; isolation:isolate; display:grid; min-height:100svh; overflow:hidden; background:var(--yellow); }
.hero-content { display:flex; z-index:1; align-items:center; flex-direction:column; justify-content:center; width:min(100% - 48px, 1000px); margin:auto; padding:130px 0 90px; text-align:center; }
.eyebrow,.section-label { margin:0; font-size:13px; font-weight:700; letter-spacing:0; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { margin:18px 0 48px; font-size:clamp(56px,9vw,136px); font-weight:400; letter-spacing:0; line-height:.93; text-transform:uppercase; }
.hero-copy { max-width:560px; margin-bottom:48px; font-size:18px; }
.button { display:inline-flex; align-items:center; gap:25px; min-height:58px; padding:0 27px; border-radius:9px; font-weight:700; }
.button-dark { color:#fff; background:var(--ink); }
.button-dark:hover { background:#333; }
.shape { position:absolute; z-index:0; width:170px; height:170px; border-radius:50%; }
.shape-blue { bottom:18%; left:-100px; background:var(--blue); }
.shape-orange { top:29%; right:-100px; background:var(--orange); }
.statement,.services { display:grid; grid-template-columns:minmax(140px,.65fr) minmax(0,2fr); gap:40px; padding:clamp(70px,11vw,170px) clamp(24px,8vw,140px); }
.statement { background:var(--ink); color:#fff; }
.statement-main { max-width:900px; }
.kicker { color:var(--yellow); font-weight:700; text-transform:uppercase; }
h2 { font-size:clamp(38px,6vw,88px); font-weight:400; letter-spacing:0; line-height:.98; text-transform:uppercase; }
.lead { max-width:720px; font-size:clamp(18px,2vw,25px); }
.lead.emphasis { margin-top:40px; color:var(--yellow); }
.numbers { padding:clamp(70px,10vw,150px) clamp(24px,8vw,140px); background:var(--blue); }
.numbers-intro { max-width:850px; margin-bottom:85px; font-size:clamp(23px,3vw,43px); line-height:1.08; }
.number-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:50px; }
.number-grid article { border-top:2px solid var(--ink); padding-top:15px; }
.number-grid strong { display:block; font-size:clamp(48px,6vw,88px); font-weight:400; line-height:1; }
.number-grid p { max-width:290px; margin-top:20px; }
.services { background:var(--paper); }
.services-intro h2 { margin-bottom:24px; }
.services-intro p { max-width:680px; font-size:22px; }
.manifesto { grid-column:2; margin:45px 0 70px; font-size:clamp(28px,3.4vw,52px); line-height:1.02; }
.manifesto p { margin-bottom:7px; }
.service-grid { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.service-card { min-height:330px; padding:24px; color:#fff; }
.service-card span { font-size:13px; font-weight:700; }
.service-card h3 { margin:70px 0 16px; font-size:46px; font-weight:400; text-transform:uppercase; }
.service-card p { max-width:280px; font-size:18px; }
.marketing { background:var(--orange); }.ux { background:var(--ink); }.software { background:var(--blue); }
.app-section { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:80px; padding:clamp(70px,11vw,150px) clamp(24px,8vw,140px); overflow:hidden; background:var(--orange); }
.app-copy h2 { margin:16px 0 28px; font-size:clamp(48px,6vw,88px); }
.app-copy > p:not(.section-label) { max-width:580px; font-size:22px; }
.app-meta { display:flex; gap:22px; margin:32px 0; font-weight:700; }
.play-link { display:inline-flex; gap:15px; align-items:center; padding:17px 20px; background:var(--ink); color:#fff; font-weight:700; }
.play-link:hover { background:#333; }
.phone-wrap { justify-self:center; display:block; width:min(100%,330px); padding:11px; border:8px solid var(--ink); border-radius:40px; background:var(--ink); box-shadow:20px 20px 0 var(--yellow); transform:rotate(5deg); }
.phone-wrap img { display:block; width:100%; border-radius:25px; }
.site-footer { display:grid; grid-template-columns:1.4fr 1fr; gap:45px; padding:55px clamp(24px,8vw,140px); background:var(--ink); color:#fff; }
.footer-brand { margin-bottom:26px; color:var(--yellow); }.site-footer p { margin:0; }.footer-contact a { color:var(--yellow); font-size:21px; font-weight:700; }.footer-contact p { margin-top:8px; }
@media (max-width:800px) { .site-header { padding:21px 24px; }.brand { font-size:22px; }.brand img { height:39px; } nav { display:none; }.nav-cta { display:block; }.hero { min-height:780px; }.hero-content { padding-top:140px; }.hero h1 { font-size:clamp(42px,12vw,56px); }.shape { width:120px; height:120px; }.shape-blue { left:-75px; bottom:15%; }.shape-orange { top:22%; right:-75px; }.statement,.services { grid-template-columns:1fr; gap:28px; padding-left:24px; padding-right:24px; }.number-grid,.service-grid,.app-section,.site-footer { grid-template-columns:1fr; }.number-grid { gap:32px; }.numbers { padding-left:24px; padding-right:24px; }.numbers-intro { margin-bottom:56px; }.manifesto { grid-column:auto; margin:15px 0 35px; }.service-card { min-height:250px; }.service-card h3 { margin-top:45px; }.app-section { gap:60px; padding-left:24px; padding-right:34px; }.phone-wrap { width:min(78vw,330px); }.site-footer { padding:45px 24px; } }