:root { --navy:#0b1f33; --teal:#27d8b1; --pale:#d9fff5; --mist:#f4fbfa; --ink:#122f42; --muted:#60808d; --line:#cfdfdf; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); font-family:Manrope,Arial,sans-serif; background:var(--mist); } a { color:inherit; text-decoration:none; } .skip-link { position:absolute; left:-999px; } .skip-link:focus { left:16px; top:16px; z-index:99; padding:10px; background:white; }
.site-header { height:84px; width:100%; margin:0; padding:0 max(24px,calc((100% - 1280px) / 2)); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:20; background:rgba(244,251,250,.93); backdrop-filter:blur(12px); box-shadow:0 7px 20px rgba(12,42,52,.04); }.brand { display:flex; align-items:center; gap:10px; font-size:10px; font-weight:800; letter-spacing:.06em; }.brand-mark { display:grid; place-items:center; width:34px; height:34px; color:var(--navy); background:var(--teal); border-radius:9px; font-size:21px; font-weight:800; letter-spacing:0; }.brand-text > span,.brand-text b,.brand-text small { display:block; }.brand-text b { font-size:8px; letter-spacing:.12em; }.brand-text small { margin-top:2px; color:#5d8084; font:600 5.4px "DM Mono",monospace; letter-spacing:.03em; white-space:nowrap; }.main-nav { display:flex; align-items:center; gap:28px; font-size:12px; font-weight:700; }.main-nav a:not(.nav-cta):hover { color:#078a6e; }.nav-cta { padding:11px 15px; background:var(--navy); color:white; border-radius:99px; }.nav-cta span { color:var(--teal); margin-left:5px; }.menu-toggle { display:none; border:0; background:transparent; padding:8px; }.menu-toggle span { display:block; height:2px; width:24px; margin:5px; background:var(--navy); }
.main-nav a.current { color:#078a6e; }
.main-nav .header-phone { color:var(--navy); font-size:11px; white-space:nowrap; }.main-nav .header-phone:hover { color:#078a6e; }
.main-nav .gallery-nav-link { padding:10px 14px; border-radius:99px; color:var(--navy); background:var(--teal); box-shadow:0 4px 0 #0b9276; }.main-nav .gallery-nav-link span { margin-left:4px; font-size:14px; }.main-nav .gallery-nav-link:hover,.main-nav .gallery-nav-link.current { color:var(--navy); background:#78eed3; box-shadow:0 2px 0 #0b9276; transform:translateY(2px); }
.hero { min-height:630px; width:min(1180px,calc(100% - 48px)); margin:0 auto; display:grid; grid-template-columns:1.03fr .97fr; align-items:center; gap:40px; padding:55px 0 70px; }.eyebrow { color:#287463; font-family:"DM Mono",monospace; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; gap:9px; }.eyebrow span { width:21px; height:2px; background:var(--teal); display:inline-block; }.hero h1,.section h2,.contact h2 { font-size:clamp(42px,5.1vw,74px); line-height:.99; letter-spacing:-.065em; margin:18px 0 22px; max-width:650px; }.hero h1 em,.section h2 em,.contact h2 em,blockquote em { color:#068f72; font-style:normal; }.hero-text { max-width:430px; line-height:1.7; font-size:15px; color:#456574; }.hero-actions { margin:31px 0 41px; display:flex; align-items:center; gap:27px; }.button { border:0; cursor:pointer; display:inline-flex; align-items:center; gap:18px; border-radius:4px; padding:15px 18px; font:800 11px Manrope,sans-serif; letter-spacing:.02em; transition:transform .2s,background .2s; }.button:hover { transform:translateY(-3px); }.button-primary { color:var(--navy); background:var(--teal); }.button-primary span { font-size:17px; }.text-link { font-size:11px; font-weight:800; border-bottom:1px solid var(--navy); padding-bottom:3px; }.text-link span { margin-left:5px; }.hero-proof { display:flex; align-items:center; gap:11px; }.hero-proof p { margin:0; font-size:10px; line-height:1.55; color:#63808a; }.hero-proof strong { color:var(--navy); }.avatars { display:flex; padding-left:7px; }.avatars i { margin-left:-7px; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; border:2px solid var(--mist); color:white; font:700 9px Manrope; background:#e2796d; }.avatars i:nth-child(2) { background:#f1af4d; }.avatars i:nth-child(3) { background:#608db0; }
.hero-visual { position:relative; height:420px; display:grid; place-items:center; }.visual-glow { width:360px; height:360px; background:var(--teal); border-radius:50%; filter:blur(1px); opacity:.18; position:absolute; }.browser-card { z-index:1; width:min(100%,455px); border:8px solid white; border-radius:10px; overflow:hidden; box-shadow:0 25px 50px #11354a2b; transform:rotate(2.5deg); background:white; }.browser-bar { height:27px; display:flex; align-items:center; gap:4px; padding:0 10px; background:#e7f1ef; }.browser-bar i { width:6px; height:6px; border-radius:50%; background:#aac2c3; }.browser-bar span { margin-left:7px; color:#789295; font:6px "DM Mono"; }.browser-content { height:267px; background:#f4fbfa; padding:20px; }.preview-nav { font-size:6px; color:#698187; display:flex; justify-content:space-between; }.preview-nav b { color:var(--navy); }.preview-hero { margin-top:35px; padding:18px 20px 25px; background:var(--navy); color:white; }.preview-hero p { color:var(--teal); letter-spacing:.18em; font:6px "DM Mono"; margin:0 0 11px; }.preview-hero h2 { margin:0 0 15px; font-size:25px; line-height:1.03; letter-spacing:-.07em; }.preview-hero h2 em { color:var(--teal); font-style:normal; }.preview-hero b { display:inline-block; padding:7px 8px; color:var(--navy); background:var(--teal); font-size:6px; }.preview-stripe { margin:16px 0 0; height:10px; width:65%; background:var(--teal); }.speed-note { position:absolute; right:0; bottom:13px; z-index:2; width:151px; padding:13px 14px; background:var(--teal); color:var(--navy); transform:rotate(-5deg); box-shadow:0 12px 20px #16354423; }.speed-note span { font-size:18px; float:right; }.speed-note b { display:block; font:800 10px "DM Mono"; letter-spacing:.05em; }.speed-note small { font-size:8px; line-height:1.35; }.sparkle { position:absolute; color:var(--teal); font-size:23px; z-index:2; }.sparkle.one { left:8%; top:10%; }.sparkle.two { right:2%; top:7%; font-size:15px; }
.trust-strip { background:var(--navy); padding:18px 24px; display:flex; align-items:center; justify-content:center; gap:37px; color:var(--pale); }.trust-strip p { margin:0; font:700 9px "DM Mono"; letter-spacing:.12em; }.trust-icons { color:var(--teal); display:flex; gap:20px; font-size:13px; }
.section { width:min(1180px,calc(100% - 48px)); margin:auto; }.steps { padding:113px 0 115px; }.section-heading { display:grid; grid-template-columns:1.2fr 1fr; column-gap:55px; align-items:end; }.section-heading .eyebrow { grid-column:1 / -1; }.section h2 { font-size:clamp(38px,4.4vw,60px); margin:14px 0 0; }.section-heading > p:last-child,.faq-intro > p:last-child { max-width:315px; color:#567581; font-size:14px; line-height:1.7; }.step-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:55px; }.step-card { min-height:240px; padding:22px; position:relative; border:1px solid var(--line); background:#fafffe; }.step-card.featured { color:white; background:var(--navy); border-color:var(--navy); }.step-number { font:10px "DM Mono"; color:#5d8a82; }.featured .step-number { color:var(--teal); }.step-icon { position:absolute; right:21px; top:16px; color:var(--teal); font-size:30px; }.step-card h3 { font-size:18px; letter-spacing:-.045em; margin:82px 0 8px; }.step-card p { font-size:12px; color:#64808b; line-height:1.65; margin:0; }.featured p { color:#b9d1d5; }
.services { padding-bottom:117px; }.service-panel { min-height:265px; padding:42px 46px; background:var(--teal); display:flex; justify-content:space-between; align-items:end; }.service-panel h2 { margin:15px 0 0; color:var(--navy); }.service-panel h2 em { color:white; }.eyebrow.light { color:#0c6d60; }.eyebrow.light span { background:var(--navy); }.button-light { align-self:flex-end; color:white; background:var(--navy); }.service-list { display:grid; grid-template-columns:repeat(4,1fr); background:white; }.service-item { min-height:191px; padding:27px 21px; border-right:1px solid var(--line); }.service-item:last-child { border:0; }.service-item span { color:#56a995; font:10px "DM Mono"; }.service-item h3 { margin:43px 0 8px; letter-spacing:-.04em; font-size:16px; }.service-item p { color:#66808b; font-size:11px; line-height:1.55; margin:0; }
.gallery-teaser { overflow:hidden; display:grid; grid-template-columns:1fr 1fr; min-height:390px; margin-bottom:117px; background:var(--navy); color:white; }.gallery-teaser-copy { padding:54px 52px; }.gallery-teaser-copy .eyebrow { color:var(--teal); }.gallery-teaser-copy .eyebrow span { background:var(--teal); }.gallery-teaser-copy h2 { margin:17px 0 16px; font-size:clamp(35px,4vw,54px); }.gallery-teaser-copy h2 em { color:var(--teal); }.gallery-teaser-copy > p:last-of-type { max-width:360px; color:#adc3c9; font-size:13px; line-height:1.7; }.gallery-teaser-copy .button { margin-top:18px; align-self:auto; padding:17px 22px; color:var(--navy); background:var(--teal); box-shadow:0 9px 0 #087e68; font-size:12px; }.gallery-teaser-copy .button:hover { background:#7af0d4; box-shadow:0 5px 0 #087e68; transform:translateY(4px); }.gallery-teaser-preview { position:relative; min-height:390px; background:#d8f3ed; overflow:hidden; }.mini-card { position:absolute; display:grid; place-items:end start; width:250px; aspect-ratio:16 / 9; padding:15px; overflow:hidden; border:5px solid white; box-shadow:0 16px 28px #0d273341; font:800 14px/.97 Manrope; letter-spacing:-.06em; background-position:center top; background-size:cover; }.mini-card::before { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,22,31,.72),rgba(5,22,31,.02) 65%); }.mini-card span { position:relative; z-index:1; text-shadow:0 2px 7px rgba(0,0,0,.4); }.mini-card.one { top:64px; left:48px; z-index:3; color:white; background-image:url("assets/gallery/website-01.png"); transform:rotate(-8deg); }.mini-card.two { top:55px; left:252px; z-index:2; color:white; background-image:url("assets/gallery/website-02.png"); transform:rotate(6deg); }.mini-card.three { top:194px; left:152px; z-index:4; color:white; background-image:url("assets/gallery/website-06.png"); transform:rotate(-1deg); }.gallery-teaser-preview > p { position:absolute; right:25px; bottom:21px; z-index:5; color:#216e60; font:700 9px "DM Mono"; letter-spacing:.09em; }.gallery-teaser-preview > p b { font-size:16px; margin-left:8px; }
.promise { position:relative; text-align:center; padding:103px 40px 105px; background:#e6f7f3; max-width:none; width:100%; }.promise .eyebrow { justify-content:center; }.promise blockquote { max-width:850px; margin:23px auto 16px; font-size:clamp(29px,4vw,55px); font-weight:800; line-height:1.06; letter-spacing:-.06em; }.quote-by { color:#4d7475; margin:0; font:700 9px "DM Mono"; letter-spacing:.1em; }.promise-sticker { position:absolute; top:53px; right:9%; width:97px; height:97px; display:grid; place-content:center; border-radius:50%; color:var(--navy); background:var(--teal); box-shadow:7px 7px 0 var(--navy); font:800 9px/1.3 "DM Mono"; letter-spacing:-.04em; transform:rotate(12deg); }
.faq { padding:110px 0; display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; }.faq-intro h2 { font-size:53px; }.faq-list details { border-top:1px solid #afc8c8; padding:19px 0; }.faq-list details:last-child { border-bottom:1px solid #afc8c8; }.faq-list summary { display:flex; justify-content:space-between; list-style:none; cursor:pointer; font-size:15px; font-weight:800; letter-spacing:-.03em; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary span { color:#0e9f80; font-size:22px; font-weight:400; line-height:.6; }.faq-list details[open] summary span { transform:rotate(45deg); }.faq-list details p { max-width:520px; color:#66808b; font-size:12px; line-height:1.7; margin:13px 30px 0 0; }
.contact { background:var(--navy); color:white; padding:27px max(24px,calc((100% - 1120px) / 2)) 76px; }.contact-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:21px; border-bottom:1px solid #3c5263; }.contact-top .eyebrow { color:var(--teal); }.contact-top > span { color:#82a0a4; font:10px "DM Mono"; }.contact-content { display:grid; grid-template-columns:.8fr .55fr 1.05fr; gap:42px; padding-top:49px; }.contact h2 { font-size:56px; margin:0 0 18px; }.contact h2 em { color:var(--teal); }.contact-content > div > p { max-width:335px; color:#a8c0c8; line-height:1.7; font-size:13px; }.direct-contact { display:flex; flex-direction:column; align-self:center; gap:13px; padding-left:22px; border-left:1px solid #496470; }.direct-contact a { color:var(--pale); font-size:12px; font-weight:700; }.direct-contact a:hover { color:var(--teal); }.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:17px; }.contact-form label { color:#b6cbd0; font:700 9px "DM Mono"; letter-spacing:.06em; text-transform:uppercase; }.contact-form label:nth-of-type(3),.contact-form label:nth-of-type(4) { grid-column:1 / -1; }.contact-form input,.contact-form textarea { width:100%; display:block; margin-top:8px; border:0; border-bottom:1px solid #66828d; border-radius:0; padding:8px 0; resize:vertical; outline:0; color:white; background:transparent; font:13px Manrope; }.contact-form input:focus,.contact-form textarea:focus { border-color:var(--teal); }.contact-form input::placeholder,.contact-form textarea::placeholder { color:#66828d; }.contact-form .button { justify-self:start; margin-top:4px; }.form-note { grid-column:1/-1; color:#91abb5; margin:0; font-size:10px; }.site-footer { width:min(1180px,calc(100% - 48px)); min-height:100px; display:flex; justify-content:space-between; align-items:center; margin:auto; font-size:10px; color:#5d7a82; }.site-footer > a:last-child { color:var(--navy); font-weight:800; }.studio-mark { display:flex; align-items:center; gap:7px; color:#5d7a82; font:600 8px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.02em; }.studio-mark img { display:block; width:37px; height:37px; object-fit:cover; border-radius:50%; }.footer-contact { display:flex; flex-direction:column; gap:4px; font-size:9px; }.footer-contact a:hover { color:#078a6e; }
.gallery-hero { position:relative; overflow:hidden; min-height:395px; padding:96px max(24px,calc((100% - 1120px) / 2)) 85px; background:var(--navy); color:white; }.gallery-hero .eyebrow { color:var(--teal); }.gallery-hero h1 { position:relative; z-index:1; margin:18px 0 17px; font-size:clamp(47px,6.2vw,80px); line-height:.93; letter-spacing:-.07em; }.gallery-hero h1 em,.gallery-callout h2 em { color:var(--teal); font-style:normal; }.gallery-hero > p:last-of-type { position:relative; z-index:1; max-width:400px; color:#b8d0d2; font-size:14px; line-height:1.7; }.gallery-orbit { position:absolute; display:grid; place-items:center; border:1px solid #2e5361; border-radius:50%; color:var(--teal); }.orbit-one { width:440px; height:440px; right:10%; top:-195px; font-size:43px; }.orbit-two { width:240px; height:240px; right:18%; top:123px; font-size:26px; }.gallery-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; padding:74px 0 100px; }.project-card { background:white; border:1px solid #d7e4e2; }.featured-project { grid-column:1 / -1; display:grid; grid-template-columns:1.16fr .84fr; }.project-image { position:relative; min-height:270px; overflow:hidden; display:grid; place-items:center; }.featured-project .project-image { min-height:390px; }.project-image img { position:absolute; inset:0; display:none; height:100%; width:100%; object-fit:cover; }.project-image.has-image img { display:block; }.project-image.has-image .image-placeholder { display:none; }.dark-preview { background:var(--navy); color:var(--teal); }.teal-preview { background:var(--teal); color:var(--navy); }.cream-preview { background:#f3e7d3; color:#be6050; }.coral-preview { background:#d97164; color:white; }.sky-preview { background:#a4d7e6; color:var(--navy); }.image-placeholder { width:73%; height:69%; border:1px solid currentColor; padding:21px; display:flex; flex-direction:column; justify-content:space-between; }.image-placeholder span { font:10px "DM Mono"; opacity:.75; }.image-placeholder b { font-size:clamp(18px,2vw,30px); letter-spacing:-.06em; line-height:.95; }.image-placeholder small { font:9px "DM Mono"; opacity:.8; }.project-meta { padding:28px; }.featured-project .project-meta { display:flex; flex-direction:column; justify-content:center; padding:48px; }.project-meta > span { color:#288e76; font:9px "DM Mono"; letter-spacing:.08em; }.project-meta h2 { margin:13px 0 9px; color:var(--navy); font-size:clamp(20px,2.6vw,34px); letter-spacing:-.06em; line-height:1.05; }.project-meta p { color:#67808c; font-size:12px; line-height:1.65; margin:0; }.gallery-callout { text-align:center; padding:87px 24px; background:#e2f6f1; }.gallery-callout .eyebrow { justify-content:center; }.gallery-callout h2 { margin:17px auto 27px; color:var(--navy); font-size:clamp(35px,4.7vw,61px); line-height:.99; letter-spacing:-.065em; }
.project-link { display:inline-block; margin-top:17px; border-bottom:1px solid var(--navy); color:var(--navy); font-size:11px; font-weight:800; padding-bottom:3px; }.project-link:hover { color:#078a6e; border-color:#078a6e; }
.demo-project { grid-column:1 / -1; width:min(100%,980px); justify-self:center; display:grid; grid-template-columns:1.14fr .86fr; }.demo-project .project-image { min-height:425px; }.demo-project .project-meta { display:flex; flex-direction:column; justify-content:center; padding:54px; }.demo-project .project-link { align-self:flex-start; margin-top:25px; border:0; border-radius:4px; padding:15px 20px; background:var(--navy); color:white; font-size:14px; }.demo-project .project-link:hover { color:var(--navy); background:var(--teal); }
.reveal { opacity:1; transform:none; }.delay-1 { transition-delay:.1s; }.delay-2 { transition-delay:.2s; }.delay-3 { transition-delay:.3s; }
@media (max-width:760px) { .site-header { width:100%; height:70px; padding:0 16px; }.main-nav { display:none; position:absolute; left:0; right:0; top:62px; padding:17px; gap:16px; align-items:flex-start; flex-direction:column; background:white; box-shadow:0 15px 30px #1234; }.main-nav.open { display:flex; }.menu-toggle { display:block; }.hero { width:calc(100% - 32px); grid-template-columns:1fr; padding:51px 0 35px; min-height:auto; gap:15px; }.hero h1 { font-size:50px; }.hero-visual { height:330px; }.browser-card { width:90%; }.speed-note { right:0; bottom:4px; }.trust-strip { gap:12px; flex-direction:column; text-align:center; }.trust-icons { gap:12px; }.steps { padding:76px 0; }.section { width:calc(100% - 32px); }.section-heading,.faq,.contact-content { grid-template-columns:1fr; gap:25px; }.section-heading > p:last-child { margin:0; }.step-grid,.service-list { grid-template-columns:1fr; }.step-grid { margin-top:35px; }.step-card { min-height:190px; }.step-card h3 { margin-top:53px; }.service-panel { padding:34px 26px; min-height:280px; display:block; }.service-panel .button { margin-top:25px; }.service-item { min-height:150px; border-right:0; border-bottom:1px solid var(--line); }.service-item h3 { margin-top:23px; }.gallery-teaser { grid-template-columns:1fr; min-height:650px; margin-bottom:76px; }.gallery-teaser-copy { padding:38px 27px; }.gallery-teaser-preview { min-height:310px; }.mini-card { width:185px; padding:12px; font-size:11px; }.mini-card.one { top:49px; left:7%; }.mini-card.two { top:42px; left:39%; }.mini-card.three { top:142px; left:24%; }.promise { padding:77px 22px; }.promise-sticker { top:22px; right:22px; width:73px; height:73px; font-size:7px; }.faq { padding:76px 0; }.faq-intro h2 { font-size:44px; }.contact { padding:24px 16px 60px; }.contact-content { padding-top:37px; }.contact h2 { font-size:48px; }.direct-contact { align-self:auto; padding:0; border:0; }.contact-form { grid-template-columns:1fr; }.contact-form label:nth-of-type(3),.contact-form label:nth-of-type(4) { grid-column:auto; }.site-footer { width:calc(100% - 32px); min-height:195px; align-items:flex-start; justify-content:center; flex-direction:column; gap:12px; }.site-footer p { margin:0; } }
@media (max-width:760px) { .gallery-hero { min-height:350px; padding:69px 16px 65px; }.gallery-hero h1 { font-size:51px; }.orbit-one { right:-135px; top:-150px; }.orbit-two { right:-13px; top:150px; }.gallery-grid { grid-template-columns:1fr; padding:48px 0 64px; gap:18px; }.featured-project { grid-column:auto; display:block; }.featured-project .project-image { min-height:310px; }.project-image { min-height:235px; }.project-meta,.featured-project .project-meta { padding:23px; }.gallery-callout { padding:66px 20px; } }
@media (max-width:760px) { .demo-project { grid-column:auto; display:block; width:100%; }.demo-project .project-image { min-height:290px; }.demo-project .project-meta { padding:24px; }.demo-project .project-link { font-size:13px; padding:14px 17px; } }