:root{--navy:#101c30;--ink:#182337;--blue:#3666de;--muted:#626d7d;--paper:#f8f9fc;--line:#dfe4ec}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #6d94fa;outline-offset:5px}.skip{position:absolute;top:-100px;background:white;padding:12px;z-index:99}.skip:focus{top:0}.wrap{width:min(1180px,calc(100% - 80px));margin:auto}header{width:min(1320px,calc(100% - 64px));margin:auto;display:flex;align-items:center;justify-content:space-between;height:105px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:36px;font-weight:800;letter-spacing:-4px;line-height:1}.brand>span{border-left:1px solid #bec6d3;padding-left:12px;font-size:12px;letter-spacing:0;font-weight:500;line-height:1.3}.brand b{letter-spacing:2px;font-size:11px;text-transform:uppercase}nav{display:flex;gap:35px;font-size:14px}.button{display:inline-flex;justify-content:center;align-items:center;gap:18px;border:0;background:var(--blue);color:white;padding:17px 24px;border-radius:5px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,transform .2s}.button:hover{background:#274db0;transform:translateY(-2px)}.small{padding:12px 20px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;line-height:1.7}.dot{display:inline-block;width:7px;height:7px;background:#4779d9;border-radius:50%;margin-right:7px}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center;min-height:680px;padding:65px 0 85px}h1{font-size:clamp(48px,5.5vw,76px);line-height:1.06;font-weight:500;letter-spacing:-3.8px;margin:28px 0}em{font-family:Georgia,'Times New Roman',serif;font-weight:400;color:var(--blue)}.lead{font-size:18px;color:var(--muted);max-width:420px}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:25px;margin-top:30px}.text-link{font-size:14px;font-weight:600;border-bottom:1px solid #acb9d0;padding-bottom:5px}.note{font-size:11px;color:var(--muted);margin-top:24px}.hero-art{position:relative;padding:40px 0}.orbit{position:absolute;inset:-30px -20px;background:radial-gradient(ellipse,#dfe8fb 0,transparent 68%);z-index:-1}.browser{background:white;border:1px solid #c8d3e3;border-radius:12px;box-shadow:0 35px 70px #20345222;overflow:hidden;transform:rotate(-3deg)}.browser-bar{height:34px;border-bottom:1px solid #ddd;display:flex;align-items:center;gap:5px;padding:0 12px}.browser-bar i{width:5px;height:5px;border-radius:50%;background:#bbc4d0}.browser-bar span{margin:auto;font-size:7px;letter-spacing:1px;color:#79818d}.concept{background:#eceee5;color:#2a392c;padding:22px}.concept-nav{display:flex;justify-content:space-between;font-size:11px;font-weight:800}.concept-nav span{font-size:7px;font-weight:400}.concept-body{position:relative;padding:28px 0 42px;overflow:hidden}.concept-body .eyebrow{font-size:7px}.concept h2{font-family:Georgia,serif;font-size:41px;line-height:1.05;font-weight:400;margin:20px 0;position:relative;z-index:1}.concept-body>p:not(.eyebrow){font-size:10px}.mock-button{display:inline-block;background:#2a392c;color:white;font-size:8px;padding:10px 14px}.building{position:absolute;right:-10px;top:55px;width:45%;height:195px;background:#b8c7b4;clip-path:polygon(0 27%,60% 0,100% 17%,100% 100%,0 100%)}.building div{position:absolute;inset:65px 15px 0;background:repeating-linear-gradient(90deg,#63776b 0 25px,#233b2e 25px 30px);border-top:8px solid #344b3b}.concept-foot{border-top:1px solid #b4bcae;padding-top:16px;display:flex;justify-content:space-between;font-size:7px}.floating{position:absolute;bottom:5px;right:-10px;background:white;border:1px solid var(--line);padding:16px 22px;box-shadow:0 12px 35px #21345116;border-radius:7px;display:flex;gap:14px;font-size:12px}.floating small{display:block;font-size:10px;color:var(--muted)}.check{background:#e8eefc;color:var(--blue);border-radius:50%;padding:5px 12px}.art-caption{font-size:8px;letter-spacing:1.4px;color:var(--muted);position:absolute;bottom:-38px;left:20px}.strip{background:var(--navy);color:#e9edf5;display:flex;gap:35px;justify-content:center;padding:23px 30px;font-size:12px}.strip span:first-child{color:#93aac9;font-size:9px;letter-spacing:1.5px;align-self:center}.section{padding:95px 0}.section-top{display:grid;grid-template-columns:1fr 1fr;gap:10px 90px;align-items:center;margin-bottom:42px}.section-top>.eyebrow{grid-column:1/-1}h2{font-size:clamp(34px,3.5vw,48px);line-height:1.15;letter-spacing:-1.8px;font-weight:500;margin:12px 0 22px}.section-top>p:last-child{font-size:15px;color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.cards article{background:white;border:1px solid var(--line);padding:30px;border-radius:8px}.number{display:block;color:var(--blue);font-size:13px;margin-bottom:38px}h3{font-size:19px;font-weight:600;line-height:1.3}.cards p,.steps p{font-size:14px;color:var(--muted)}.work-section{background:#edf1f7}.projects{display:grid;grid-template-columns:1fr 1fr;gap:30px}.project{background:white;border:1px solid var(--line);border-radius:10px;overflow:hidden}.project-visual{height:280px;padding:35px;display:grid;place-items:center}.website-visual{background:#dce5f7}.mini-site{background:var(--navy);color:white;width:90%;padding:25px 28px;box-shadow:0 15px 20px #17274522;border-radius:5px}.mini-site>span{font-size:7px;letter-spacing:2px}.mini-site h3{font-family:Georgia,serif;font-weight:400;font-size:29px;margin:15px 0;line-height:1.1}.mini-line{height:5px;width:75px;background:#8cabf4}.mini-grid{display:flex;gap:10px;margin-top:20px}.mini-grid i{height:25px;flex:1;background:#2c3b54}.automation-visual{background:#14253d}.workflow{width:90%;color:#c5d5ec}.workflow>span,.workflow small{font-size:8px;letter-spacing:2px}.workflow>div{margin:12px 0;padding:11px 15px;border:1px solid #4b6486;border-radius:5px;font-size:13px;background:#213652}.workflow b{float:right;color:#8fb5ff}.project-info{padding:28px 32px 35px}.project-info p:not(.eyebrow){font-size:14px;color:var(--muted);min-height:75px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:45px}.steps article{border-top:1px solid var(--line);padding-top:22px}.steps span{font-size:12px;color:var(--blue)}.about-section{background:#e9eef5}.about{padding:90px 0;display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:center}.portrait img{width:100%;height:auto;display:block;border-radius:8px}.portrait span{display:block;font-size:11px;color:var(--muted);margin-top:12px}.about p:not(.eyebrow){font-size:15px;color:var(--muted)}.faq{max-width:850px}details{border-bottom:1px solid var(--line);padding:23px 0}summary{font-weight:600;cursor:pointer}details p{font-size:14px;color:var(--muted);max-width:700px}.contact-section{background:var(--navy);color:white}.contact{padding:85px 0;display:grid;grid-template-columns:1fr 1fr;gap:90px}.contact em{color:#95b3ff}.contact>div>p:not(.eyebrow){font-size:15px;color:#b4c1d3}.email{font-size:clamp(13px,1.6vw,20px);display:inline-block;margin-top:15px;border-bottom:1px solid #657a9b;padding-bottom:6px}form{display:grid;gap:16px}label{font-size:12px;display:grid;gap:7px;color:#d8e2f1}input,textarea{width:100%;background:#1b2a42;border:1px solid #40516c;border-radius:4px;padding:12px;color:white;font-size:14px}input::placeholder,textarea::placeholder{color:#9aaac2}input:focus,textarea:focus{outline:2px solid #93b2ff}textarea{resize:vertical}.form-note{font-size:11px;color:#a8b8ce;margin:0}#status{font-size:12px;margin:0}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:35px 0}footer p,footer>span{font-size:10px;color:var(--muted)}@media(max-width:950px){.wrap{width:calc(100% - 48px)}.hero{gap:20px;min-height:620px}h1{font-size:56px}.actions{gap:18px}.hero-art .concept h2{font-size:32px}.concept-nav span{display:none}.floating{right:0;padding:12px}.about,.contact{gap:40px}.strip{gap:20px}.cards article{padding:22px}.steps{gap:20px}}@media(max-width:700px){html{scroll-padding-top:20px}header{width:calc(100% - 36px);height:85px}nav{display:none}.brand{font-size:30px}.small{padding:11px 15px;font-size:12px}.wrap{width:calc(100% - 40px)}.hero{grid-template-columns:1fr;padding:35px 0 65px;gap:30px}.hero .eyebrow{font-size:8px}h1{font-size:54px;letter-spacing:-2.7px;margin:23px 0}.lead{font-size:17px}.hero-art{max-width:480px;width:100%;margin:auto;padding:15px 5px 40px}.orbit{inset:0}.concept{padding:20px}.hero-art .concept h2{font-size:39px}.floating{bottom:5px;right:5px}.art-caption{bottom:-18px;font-size:7px}.strip{flex-wrap:wrap;gap:12px 23px;padding:23px 20px;font-size:11px}.strip span:first-child{width:100%;text-align:center}.section{padding:65px 0}.section-top{grid-template-columns:1fr;gap:0;margin-bottom:25px}.section-top>.eyebrow{grid-column:auto}h2{font-size:36px}.cards,.projects{grid-template-columns:1fr}.number{margin-bottom:20px}.steps{grid-template-columns:1fr 1fr;gap:25px}.about,.contact{grid-template-columns:1fr;padding:60px 0;gap:35px}.portrait{max-width:400px}.project-visual{height:260px}.project-info p:not(.eyebrow){min-height:0}.email{font-size:16px}footer{flex-direction:column;align-items:flex-start;gap:10px}footer p{margin:5px 0}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}
/* Version two: editorial design, full-width photography and accessible motion. */
:root{--navy:#142028;--ink:#19272c;--blue:#406357;--muted:#64706f;--paper:#f8f7f3;--line:#dedfd8}body{font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}header{width:100%;padding:0 max(35px,calc((100vw - 1280px)/2));height:96px;background:#f8f7f3;border-bottom:none}.brand{letter-spacing:-3px}.brand b{color:#406357}nav{gap:30px}.button{border-radius:0;background:#406357;padding:18px 27px;font-weight:500}.button:hover{background:#29473b;transform:translateY(-2px)}.hero{position:relative;display:block;width:100%;min-height:740px;height:min(900px,calc(100svh - 96px));padding:0;isolation:isolate;background:#18282b;overflow:hidden}.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#091917d9 0%,#09191788 55%,#09191733 100%),linear-gradient(0deg,#07151280,transparent 35%);z-index:-2}.hero-copy{color:#fff;position:relative;padding-top:130px;height:100%}.hero .eyebrow{font-size:10px;letter-spacing:2.4px;color:#dee8df}.hero h1{font-size:clamp(48px,5.9vw,86px);line-height:1.1;letter-spacing:-3.5px;font-weight:400;margin:35px 0 26px;max-width:1000px}.hero em{color:#e2e9cd}.hero .lead{color:#e0e6e3;max-width:600px;font-size:18px;line-height:1.8}.hero .button{background:#f0eee5;color:#172a24}.hero .button:hover{background:white}.hero .text-link{color:white;border-color:#b1c0ba}.hero .actions{margin-top:35px;gap:32px}.hero-bottom{position:absolute;bottom:36px;left:0;right:0;display:flex;justify-content:space-between;gap:20px;border-top:1px solid #ffffff33;padding-top:24px;font-size:9px;letter-spacing:1.8px}.strip{padding:28px 35px;background:#e8eae1;color:#384e45}.strip span:first-child{color:#597063}.section{padding:110px 0}.section-top{gap:10px 120px;margin-bottom:55px}.section-top .eyebrow{color:#577565}h2{font-size:clamp(36px,4vw,56px);line-height:1.13;font-weight:400;letter-spacing:-2px}h3{font-weight:500}.cards{gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.cards article{border:none;border-right:1px solid var(--line);background:none;padding:40px 34px;border-radius:0}.cards article:first-child{padding-left:0}.cards article:last-child{border-right:none}.number{margin-bottom:55px}.cards h3{font-size:23px}.cards p{line-height:1.8}.work-section{background:#e9ece5}.projects{gap:40px}.project{border:none;border-radius:0;background:#f8f7f3}.project-visual{height:350px;padding:45px}.website-visual{background:#d0dacf}.mini-site{background:#23382e;width:100%;padding:35px;box-shadow:0 22px 45px #16292230}.mini-site h3{font-size:33px;max-width:300px}.mini-line{background:#bfceb6}.mini-grid i{background:#3e5748}.automation-visual{background:#1e2d30}.workflow{color:#d3dfd6}.workflow>div{border-color:#607b6b;background:#30463b;padding:16px}.workflow b{color:#c5dab4}.project-info{padding:30px 35px 40px}.project-info h3{font-size:26px}.project-info .eyebrow{font-size:9px}.pricing-section{background:#f8f7f3}.pricing{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start}.pricing>div{padding-top:45px}.pricing>div>p:last-child{color:var(--muted);max-width:430px;font-size:16px}.price-card{background:#e8ece4;border:1px solid #d5ddd0;padding:45px}.price{font-size:72px;line-height:1;letter-spacing:-3px;margin:30px 0}.price span{font-size:14px;letter-spacing:1px;color:var(--muted)}.price-intro{font-size:16px}.price-card ul{list-style:none;padding:0;margin:30px 0}.price-card li{border-bottom:1px solid #cdd7c9;padding:12px 0;font-size:14px}.price-card li:before{content:'✓';margin-right:13px;color:#406357}.price-card .button{width:100%}.price-note{font-size:11px;line-height:1.7;color:#536357;margin:18px 0 0}.process{border-top:1px solid var(--line)}.steps{margin-top:60px;gap:35px}.steps h3{font-size:21px}.about-section{background:#20332d}.about{padding:100px 0;color:#f4f3ec;gap:100px}.about h2 em{color:#d1ddbc}.about p:not(.eyebrow){color:#c1cfc4;font-size:16px}.about .eyebrow{color:#d5ddcb}.about .text-link{color:#f4f3ec;border-color:#82977e}.portrait img{border-radius:0;filter:saturate(.8)}.portrait span{color:#bac9bc}.contact-section{background:#e5e9df;color:#1e3128}.contact{gap:100px;padding:100px 0}.contact em{color:#406357}.contact>div>p:not(.eyebrow){color:#52655b}.email{border-color:#81917c}.contact label{color:#314637}input,textarea{background:#f4f5ef;color:#1b3023;border:1px solid #afbdab;border-radius:0;padding:14px}input::placeholder,textarea::placeholder{color:#7d897d}input:focus,textarea:focus{outline-color:#567562}.form-note{color:#566b5a}.faq details{padding:26px 0}.reveal{transition:opacity .75s ease,transform .75s ease}.motion-ready .reveal:not(.visible){opacity:0;transform:translateY(22px)}.reveal.visible{opacity:1;transform:none}footer{padding:45px 0} @media(min-width:1500px){.wrap{width:min(1280px,calc(100% - 100px))}}
@media(max-width:950px){.hero{min-height:660px;height:760px}.hero-copy{padding-top:110px}.hero h1{font-size:64px}.pricing{gap:45px}.price-card{padding:30px}.section-top{gap:10px 60px}.about,.contact{gap:45px}.cards article{padding:32px 22px}.project-visual{height:300px;padding:30px}}
@media(max-width:700px){header{padding:0 20px;height:82px}.hero{min-height:680px;height:calc(100svh - 82px);max-height:850px}.hero-copy{padding-top:95px}.hero-image{object-position:65% center}.hero-shade{background:linear-gradient(90deg,#091917da,#09191775),linear-gradient(0deg,#071512a0,transparent)}.hero h1{font-size:49px;line-height:1.13;letter-spacing:-2px;margin:30px 0}.hero .eyebrow{font-size:8px;letter-spacing:1.6px}.hero .lead{font-size:16px;line-height:1.8}.hero .actions{gap:24px;align-items:flex-start;flex-direction:column}.hero .button{padding:16px 24px}.hero-bottom{bottom:28px;flex-direction:column;gap:10px;font-size:8px;letter-spacing:1.2px}.section{padding:75px 0}.cards{grid-template-columns:1fr}.cards article,.cards article:first-child{padding:30px 0;border-right:none;border-bottom:1px solid var(--line)}.cards article:last-child{border-bottom:none}.number{margin-bottom:24px}.section-top{gap:0;margin-bottom:35px}.project-visual{height:290px;padding:30px}.projects{gap:25px}.project-info{padding:26px}.project-info h3{font-size:25px}.pricing{grid-template-columns:1fr;gap:30px}.pricing>div{padding-top:0}.price-card{padding:30px 25px}.price{font-size:64px}.steps{gap:25px;margin-top:35px}.about,.contact{grid-template-columns:1fr;gap:38px;padding:70px 0}.portrait{max-width:100%}.about h2{font-size:36px}.about p:not(.eyebrow){font-size:15px}h2{font-size:38px}.email{font-size:15px}.strip{padding:25px 20px}footer{padding:30px 0}}
@media(prefers-reduced-motion:reduce){.reveal,.motion-ready .reveal:not(.visible){opacity:1;transform:none;transition:none}}

.photo-break{position:relative;background:linear-gradient(90deg,#14251ed9,#14251e66),url(assets/studio.jpg) center 65%/cover;min-height:440px;display:flex;align-items:center;color:white}.photo-break .wrap{padding:80px 0}.photo-break h2{font-size:60px}.photo-break em{color:#dee7c8}.photo-break .text-link{border-color:#a8bba3}@media(max-width:700px){.photo-break{min-height:340px}.photo-break h2{font-size:43px}}