/* Frontend-design exploration — public homepage preview, October 2026. */
:root{--ink:#112444;--muted:#526178;--blue:#145bc1;--line:#d6dfeb;--cream:#fff;--tint:#f2f5fa}
body{background:#fff;font-size:16px}.wrap{width:calc(100% - 96px);max-width:1280px}.site-header{background:#fff;position:relative;border-bottom:0}.header-inner{height:100px}.wordmark{gap:10px}.wordmark .brand-logo{width:58px;height:58px}.wordmark .brand-name{font-size:27px}.desktop-nav{gap:30px}.desktop-nav a{font-size:14px;font-weight:500}.header-cta{font-size:13px;padding:13px 18px;background:var(--ink);border-radius:7px;color:#fff}.header-cta:hover{background:var(--blue)}
.hero.wrap{max-width:none;width:100%;background:var(--blue);color:white;padding:70px max(48px,calc((100vw - 1280px)/2)) 90px;min-height:700px;grid-template-columns:.88fr 1.12fr;gap:70px;overflow:hidden}.hero .eyebrow{color:#e2ecff;font:500 13px/1.5 Inter,sans-serif;letter-spacing:0;text-transform:none;margin-bottom:26px}.hero h1{font-size:clamp(60px,6.4vw,92px);line-height:.99;letter-spacing:-4px;color:white;margin-bottom:28px}.hero h1 span{color:#f5c75f}.hero-lead{font-size:17px;line-height:1.75;color:#e2ecff;max-width:430px}.hero-actions{margin-top:32px;gap:25px}.hero .button.primary{background:#fff;color:#0b3480;border:1px solid white;border-radius:7px;padding:17px 20px;font-size:14px}.hero .button.primary:hover{background:#f5c75f;border-color:#f5c75f}.hero .quiet-link{color:white;font-size:13px}.hero-assurance{font-size:11px;color:#d7e7ff;gap:20px;margin-top:27px}.hero-assurance svg{color:#d7e7ff}.hero-art{height:480px;transform:none}.art-backdrop{inset:8% -25% -8% 0;background:#0b3480;border-radius:160px 0 0 30px}.art-cross,.art-dots{display:none}.design-caption{top:0;left:0;color:white;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none}.hero-browser{top:12%;left:0;width:100%;border:5px solid #fff;border-radius:12px;transform:none;box-shadow:0 28px 60px #04285b40}.hero-browser:hover{transform:translateY(-4px)}.hero-browser>img{aspect-ratio:1.52;object-fit:cover;object-position:top}.browser-toolbar{height:34px}.browser-toolbar small{font-size:11px}.phone-preview{right:-4%;top:44%;width:137px;height:282px;transform:rotate(5deg);border:5px solid #102743}.art-label{left:3%;bottom:0;background:#fff;color:var(--ink);padding:14px 18px;border-radius:8px;font-size:12px;box-shadow:0 8px 24px #04285b26}.art-label small{font-size:10px;color:var(--muted)}.art-index{display:none}.capabilities{background:#0b3480;color:#fff;border:0}.capabilities>div{font-size:15px;letter-spacing:0;gap:40px;padding:22px 0}.capabilities .separator{color:#b5ccf0;font-size:16px}
.work-section{padding-block:90px;background:#f2f5fa;border:0}.eyebrow{font-size:12px!important;letter-spacing:0!important;text-transform:none!important;font-weight:500}.section-heading{margin-bottom:40px;gap:40px}.section-heading h2,h2{font-size:clamp(34px,3.2vw,48px);line-height:1.13;letter-spacing:-1.6px}.section-heading h2 span{color:var(--blue)}.quiet-link{font-size:14px}.project-featured{display:grid;grid-template-columns:1.38fr 1fr;background:#fff;border-radius:16px;overflow:hidden;border:1px solid #d6dfeb;margin-bottom:30px}.project-featured .project-image{height:410px;border-radius:0;display:flex;align-items:center;background:#dce8f8;padding:35px}.project-featured .project-browser{transform:none;width:100%;box-shadow:0 15px 30px #18304c20;border-radius:8px}.project-featured .project-copy{padding:38px;display:block;align-self:center}.project-copy h3{font-size:30px;letter-spacing:-.8px}.project-copy p,.project-description{font-size:14px!important;line-height:1.8!important}.project-tags{margin-top:18px;gap:8px}.project-tags span{font-size:11px;padding:5px 9px;background:#f4f7fc;border:0;border-radius:4px}.project-actions{margin-top:24px;justify-content:flex-start}.preview-link{font-size:13px}.project-visit{width:38px;height:38px}.project-pair{gap:30px}.advanced-projects .project-image{height:340px;border-radius:12px}.advanced-projects .project-copy{padding-top:22px}.advanced-projects .project-copy>div{max-width:470px}.compare-image .project-browser{transform:none;width:88%;border-radius:8px}.docelio-label>p{font-size:34px}.docelio-label>span{font-size:21px}.docelio-label>div{font-size:10px;letter-spacing:0}.docelio-phone{width:176px}.other-work{margin-top:45px}.other-work a{padding:15px;background:#fff;border-radius:10px}.other-work small{font-size:12px}.other-work img{width:106px;height:70px}.section{padding-block:90px}.section-intro{font-size:16px;line-height:1.8;max-width:570px}.expertise-grid{gap:0;border-top:1px solid var(--line)}.expertise-card{padding:35px 30px 20px;background:#fff;border:0;border-radius:0;box-shadow:none}.expertise-card+article{border-left:1px solid var(--line)}.expertise-card h3{font-size:25px;letter-spacing:-.7px}.expertise-card p{font-size:14px;line-height:1.8}.expertise-card ul{font-size:12px}.expertise-card .card-link{font-size:13px}.offer{border-radius:12px;padding:32px}.offer h3{font-size:27px}.offer p,.offer li{font-size:13px;line-height:1.8}.offer .price{font-size:34px}.offer .button{font-size:13px;padding:14px}.pricing-note{font-size:12px;line-height:1.8}.compact-rates{font-size:15px}.method-section{background:#f2f5fa}.method-intro p,.steps p{font-size:14px;line-height:1.8}.steps h3{font-size:19px}.faq-layout{gap:90px}.faq-list summary{font-size:16px;padding-block:22px}.faq-list p{font-size:14px;line-height:1.8}.repair-strip{background:#f2f5fa;border-radius:14px;padding:32px 40px;margin-bottom:65px}.repair-strip p{font-size:14px}.contact-section{background:#0b3480;padding-block:85px}.contact-section h2{font-size:clamp(42px,5vw,68px);letter-spacing:-2px}.contact-section p{font-size:17px}.contact-section .contact-email{font-size:18px}.footer-main{padding-block:45px}.footer-main p,.footer-links a{font-size:13px}.footer-bottom{font-size:11px}.quote-dialog,.project-dialog{border-radius:12px}.quote-dialog h2{font-size:32px}.quote-dialog label{font-size:14px}.quote-dialog input,.quote-dialog textarea,.quote-dialog select{font-size:16px}.quote-dialog .button{font-size:14px}.quote-note{font-size:13px}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.hero.wrap{padding:55px 32px 70px;gap:40px}.hero h1{font-size:72px}.hero-art{height:420px}.phone-preview{width:115px;height:240px;top:44%}.hero-actions{flex-wrap:wrap;gap:20px}.hero-assurance{flex-wrap:wrap;gap:10px}.project-featured .project-image{height:370px;padding:24px}.project-featured .project-copy{padding:28px}.desktop-nav{gap:20px}.header-cta{padding:12px}.project-featured{grid-template-columns:1.2fr 1fr}.advanced-projects .project-image{height:285px}.docelio-label>p{font-size:28px}.docelio-phone{width:145px}.faq-layout{gap:40px}}
@media(max-width:900px){.hero.wrap{gap:30px}.hero h1{font-size:60px;letter-spacing:-2.5px}.hero-art{height:350px}.hero-lead{font-size:15px}.hero .button.primary{font-size:12px;padding:14px}.hero .quiet-link{font-size:12px}.art-label{font-size:10px;padding:10px 13px}.art-label small{font-size:9px}.phone-preview{width:100px;height:209px;right:-4%;top:45%}.hero-browser{top:17%}.design-caption{font-size:12px}.capabilities>div{font-size:13px;gap:22px}.expertise-card{padding:25px 20px}.expertise-card h3{font-size:22px}.project-featured .project-image{height:320px}.project-featured .project-copy{padding:24px}.project-copy h3{font-size:26px}.project-copy p{font-size:13px!important}.offers{gap:12px}.offer{padding:24px}.offer h3{font-size:23px}}
@media(max-width:700px){.wrap{width:calc(100% - 40px)}.header-inner{height:78px}.wordmark .brand-logo{width:48px;height:48px}.wordmark .brand-name{font-size:23px}.menu-toggle{width:44px;height:44px}.mobile-nav{padding:10px 20px 22px;background:#fff}.mobile-nav a{font-size:16px;padding:13px 0}.hero.wrap{display:block;padding:38px 20px 46px;min-height:0}.hero .eyebrow{font-size:11px!important;margin-bottom:22px}.hero h1{font-size:clamp(54px,12vw,78px);letter-spacing:-2.5px;line-height:1.02;margin-bottom:22px}.hero h1 br:nth-of-type(2){display:none}.hero h1 span:before{content:' '}.hero-lead{font-size:15px;line-height:1.75}.hero-actions{margin-top:26px;gap:20px;flex-wrap:wrap}.hero .button.primary{font-size:13px;padding:15px 17px}.hero .quiet-link{font-size:12px}.hero-assurance{font-size:10px;gap:14px;margin-top:22px}.hero-art{height:350px;margin-top:35px;max-width:490px}.hero-browser{top:11%;left:0;width:94%;border:4px solid white;transform:none}.art-backdrop{inset:5% -20% 0 5%;border-radius:80px 0 0 20px}.design-caption{font-size:12px;top:0}.phone-preview{width:104px;height:220px;right:0;top:37%;transform:rotate(4deg)}.art-label{left:0;bottom:0;font-size:11px;padding:12px 15px}.art-label small{font-size:10px}.capabilities>div{display:grid;grid-template-columns:1fr 1fr;gap:14px 25px;font-size:13px;padding:23px 0}.capabilities .separator{display:none}.work-section,.section{padding-block:55px}.section-heading{display:block;margin-bottom:28px}.section-heading h2,h2{font-size:34px;letter-spacing:-1px}.section-heading .quiet-link{margin-top:22px;display:inline-flex}.project-featured{display:block;border-radius:12px;margin-bottom:26px}.project-featured .project-image{height:auto;padding:22px}.project-featured .project-copy{padding:24px}.project-pair{display:block}.project-pair>.project{margin-bottom:35px}.advanced-projects .project-image{height:280px}.advanced-projects .project-copy{padding:18px 0 0}.project-copy h3{font-size:27px}.project-copy p{font-size:14px!important}.project-tags span{font-size:10px}.docelio-phone{width:155px}.docelio-label>p{font-size:29px}.expertise-grid{display:block}.expertise-card{padding:28px 0;border-bottom:1px solid var(--line)}.expertise-card+article{border-left:0}.expertise-card h3{font-size:26px}.expertise-card p{font-size:15px}.expertise-card ul{font-size:13px}.offers{display:block}.offer{padding:28px;margin-bottom:18px}.offer h3{font-size:27px}.offer li,.offer p{font-size:14px}.method-section{padding-block:55px}.steps p{font-size:14px}.faq-layout{gap:30px}.faq-list summary{font-size:16px}.faq-list p{font-size:14px}.repair-strip{padding:25px;margin-bottom:45px;border-radius:12px}.contact-section{padding-block:55px}.contact-section h2{font-size:44px;letter-spacing:-1.6px}.contact-section p{font-size:16px}.contact-section .contact-email{font-size:16px}.footer-main{padding-block:35px}.other-work>div{gap:12px}.other-work a{padding:12px}.other-work img{width:85px;height:60px}}
@media(max-width:370px){.hero h1{font-size:53px}.hero-art{height:305px}.phone-preview{width:92px;height:194px}.hero-assurance{gap:10px;font-size:9px}.hero-actions{gap:15px}.advanced-projects .project-image{height:255px}.docelio-phone{width:130px}.docelio-label>p{font-size:25px}.hero .eyebrow{font-size:10px!important}}
.hero h1 span{color:#fff}.hero .button.primary{background:#f5c75f;border-color:#f5c75f;color:#112444}.hero .button.primary:hover{background:#ffe093;border-color:#ffe093}.capabilities.wrap{max-width:none;width:100%;padding:24px max(48px,calc((100vw - 1280px)/2));display:block}.capabilities-label{display:none}.capabilities>div{width:100%;justify-content:space-between;padding:0}.capabilities .separator{display:none}@media(max-width:1100px){.capabilities.wrap{padding:24px 32px}}@media(max-width:700px){.capabilities.wrap{padding:24px 20px}.hero-art{margin-top:28px}.hero h1{font-size:58px}}
:focus-visible{outline:3px solid #b94311;outline-offset:5px}.hero :focus-visible,.contact-section :focus-visible{outline-color:#f5c75f}@media(prefers-reduced-motion:reduce){.hero-browser,.hero-browser:hover{transform:none}}
.offer .offer-price{font:700 38px/1.2 Geist,sans-serif;letter-spacing:-1px;margin:24px 0}.offer .offer-price small{display:block;font:400 12px/1.5 Inter,sans-serif;letter-spacing:0;margin-bottom:7px}.offer .offer-price span{font:500 13px Inter,sans-serif;margin-left:6px;letter-spacing:0}.offer .offer-price.custom{font-size:32px}

.hero h1{font-size:clamp(42px,4.6vw,66px);line-height:1.08;letter-spacing:-2px;max-width:560px}@media(max-width:700px){.hero h1{font-size:42px;letter-spacing:-1.5px}}@media(max-width:370px){.hero h1{font-size:39px}}