/* netbase4web: an editorial identity built around the 4 in the name. */
:root { --paper:#f4f3ed; --line:#d8dbd2; }
.header { border-bottom:0; height:104px; }
.brand { font-size:29px; }
.nav-contact { border:0; border-bottom:1px solid #c1ef7c70; border-radius:0; padding:11px 0; }
.hero-kicker { max-width:1280px; margin:auto; padding:22px 0; border-top:1px solid #ffffff22; display:flex; justify-content:space-between; font:10px/1.6 Consolas,monospace; letter-spacing:1.3px; color:#aebdb6; }
.hero-inner { grid-template-columns:1.4fr 1fr; padding:60px 0 42px; gap:15px; align-items:center; }
h1 { font-size:clamp(60px,6.4vw,91px); font-weight:400; line-height:1.01; letter-spacing:-4.4px; margin-bottom:35px; }
h1>span { font-family:Georgia,'Times New Roman',serif; font-style:italic; letter-spacing:-4px; }
.hero-summary { display:flex; align-items:flex-start; gap:25px; }
.editorial-line { width:45px; height:1px; background:var(--lime); margin-top:12px; flex-shrink:0; }
.hero-summary p { margin:0; max-width:460px; font-size:16px; line-height:1.8; color:#c4cdcf; }
.hero-project-link { display:inline-flex; align-items:center; gap:42px; margin:30px 0 0 70px; padding:10px 0; border-bottom:1px solid #c1ef7c80; font-size:13px; }
.hero-project-link span { color:var(--lime); font-size:23px; }
.hero-project-link:hover { color:var(--lime); }
.brand-study { position:relative; padding:0 0 28px; margin:0 -12px 0 20px; }
.brand-four { width:100%; height:auto; display:block; max-height:490px; }
.brand-study-label { display:flex; justify-content:space-between; color:#8d9e97; font:8px/1.5 Consolas,monospace; letter-spacing:1px; padding:18px 12px 0; }
.hero-bottom { padding:26px 0 31px; align-items:center; }
.hero-bottom p { font-size:12px; line-height:1.65; letter-spacing:.1px; margin:0; color:#b5c1c5; }
.hero-bottom p span { color:#fff; }
.hero-bottom a { font-size:11px; }
.section { padding-top:104px; padding-bottom:100px; }
.section-top { margin-bottom:40px; }
.eyebrow { font-family:Consolas,monospace; font-size:10px; font-weight:400; }
.section-heading { grid-template-columns:1.1fr 1fr; gap:140px; margin-bottom:55px; }
h2,.section h2 { font-size:48px; font-weight:400; letter-spacing:-2px; }
h2>span { font-family:Georgia,'Times New Roman',serif; font-style:italic; color:#657653; }
.section-heading>p { font-size:15px; line-height:1.85; }
.service { grid-template-columns:50px 1.05fr 1fr; padding:35px 0; gap:25px; }
.service-number { font-size:12px; }
.service h3 { font-size:24px; font-weight:400; margin-bottom:11px; }
.service-title>span { font-size:12px; }
.service>p { font-size:13px; max-width:430px; }
.showcases { padding-top:0; }
.showcase-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:55px; align-items:start; }
.showcase:nth-child(2) { margin-top:0; }
.demo { border-radius:0; height:365px; }
.demo-website { padding:30px; background:#e7e3d8; }
.demo-app { padding:27px; background:#e3e8e4; }
.showcase-caption { border-top:1px solid var(--line); margin-top:20px; padding-top:17px; }
.showcase h3 { font-size:19px; font-weight:400; line-height:1.4; }
.project-kind { font:9px/1.6 Consolas,monospace; letter-spacing:.8px; }
.architecture-text { font-size:40px; }
.architecture-window { height:210px; width:95px; }
.approach { padding:95px 0; }
.approach h2 { font-size:43px; }
.approach-mark { font-size:85px; }
.approach-intro>p:not(.eyebrow),.steps p { font-size:14px; line-height:1.85; }
.steps h3 { font-size:22px; }
.faq h2 { font-size:42px; }
summary { font-size:14px; padding:25px 0; }
.contact { background:#e9edde; border-top:1px solid #c9d2bc; padding:80px 0; }
.contact .status-dot { display:none; }
.contact .eyebrow { margin-bottom:40px; }
.contact h2 { font-size:64px; letter-spacing:-2.5px; }
.contact-grid { grid-template-columns:1.15fr 1fr; gap:100px; }
.contact-grid>div>p { font-size:14px; line-height:1.85; }
.button { border-radius:0; }
.dark-button { padding:17px 22px; font-size:12px; }
.contact-details>a { font-size:25px; padding:22px 0; border-bottom:1px solid #89967965; }
.contact-details>span { font:9px Consolas,monospace; letter-spacing:1px; }
.direct-contact-note { display:flex; gap:17px; padding:25px 0 4px; align-items:start; }
.note-rule { width:26px; height:1px; background:#748964; flex-shrink:0; margin-top:10px; }
.direct-contact-note p { margin:0; font-size:13px; color:#4d5e42; line-height:1.85; max-width:330px; }
.contact-grid>.contact-details>p { color:#65705c; margin-top:21px; }
.footer-top { padding-bottom:35px; }
@media(max-width:1420px) {
 .hero-kicker { margin-left:6%; margin-right:6%; }
 .hero-inner { padding-top:54px; padding-bottom:45px; }
 .section-heading { gap:100px; }
}
@media(max-width:1100px) {
 .header { height:88px; }
 h1 { font-size:64px; letter-spacing:-3px; }
 h1>span { letter-spacing:-3px; }
 .hero-summary p { font-size:14px; }
 .brand-study-label { font-size:6px; }
 .section { padding-top:80px; padding-bottom:80px; }
 .showcases { padding-top:0; }
 .section-heading { gap:70px; }
 h2,.section h2 { font-size:41px; }
 .service h3 { font-size:21px; }
 .service>p { font-size:12px; }
 .showcase-grid { gap:35px; }
 .demo { height:320px; }
 .contact h2 { font-size:52px; }
 .contact-grid { gap:65px; }
 .contact-details>a { font-size:21px; }
 .approach h2 { font-size:36px; }
}
@media(max-width:780px) {
 .header { height:76px; }
 .hero-kicker { font-size:7px; padding:17px 0; letter-spacing:.6px; }
 .hero-kicker>span:last-child { display:none; }
 .hero-inner { grid-template-columns:1fr; padding-top:38px; padding-bottom:20px; gap:0; }
 h1 { font-size:clamp(48px,9vw,70px); letter-spacing:-2.8px; margin-bottom:28px; }
 h1>span { letter-spacing:-2.8px; }
 .hero-summary { gap:17px; }
 .editorial-line { width:25px; }
 .hero-summary p { font-size:14px; }
 .desktop-break { display:none; }
 .hero-project-link { margin-left:42px; font-size:12px; gap:28px; margin-top:20px; }
 .brand-study { width:min(65%,310px); margin:25px 0 0 auto; padding:0 0 5px; }
 .brand-four { max-height:290px; }
 .brand-study-label { font-size:6px; gap:15px; padding:14px 0 0; }
 .hero-bottom { padding:20px 0; gap:22px; }
 .hero-bottom p { font-size:10px; }
 .hero-bottom a { font-size:9px; }
 .section { padding-top:60px; padding-bottom:60px; }
 .section-top { margin-bottom:25px; }
 .section-heading { grid-template-columns:1fr; gap:22px; margin-bottom:32px; }
 h2,.section h2 { font-size:36px; letter-spacing:-1.4px; }
 .section-heading>p { font-size:14px; }
 .service { grid-template-columns:25px 1fr; padding:26px 0; gap:12px; }
 .service h3 { font-size:21px; }
 .service-title>span { font-size:11px; }
 .service>p { grid-column:2; font-size:13px; }
 .showcases { padding-top:0; }
 .showcase-grid { grid-template-columns:1fr; gap:34px; }
 .showcase:nth-child(2) { margin-top:0; }
 .demo { height:330px; }
 .demo-website { padding:23px; }
 .demo-app { padding:22px; }
 .architecture-text { font-size:34px; }
 .architecture-window { width:80px; height:180px; }
 .showcase h3 { font-size:17px; }
 .approach { padding:60px 0; }
 .approach h2 { font-size:34px; }
 .steps h3 { font-size:21px; }
 .approach-intro>p:not(.eyebrow),.steps p { font-size:13px; }
 .contact { padding:55px 0; }
 .contact .eyebrow { margin-bottom:25px; }
 .contact h2 { font-size:48px; letter-spacing:-1.8px; }
 .contact-grid { grid-template-columns:1fr; gap:40px; }
 .contact-details>a { font-size:24px; }
 .contact-details { max-width:none; }
 .direct-contact-note p { max-width:none; }
}
@media(max-width:420px) {
 h1 { font-size:42px; letter-spacing:-2.5px; }
 .hero-summary p { font-size:13px; }
 .brand-study { width:72%; }
 .hero-bottom a span { margin-left:7px; }
 .hero-bottom p { font-size:9px; }
 .demo { height:292px; }
 .demo-app { padding:17px; }
 .architecture-text { font-size:30px; }
 .architecture-window { width:75px; height:165px; }
 .contact h2 { font-size:44px; }
 .contact-details>a { font-size:22px; }
}