.hero2-brand{align-items:center}
.hero2-brand-logo{display:block;width:156px;height:auto}
.hero2-brand-mark{display:none;width:38px;height:38px;object-fit:contain}
.hero2-langs a{display:grid;place-items:center;width:39px;height:38px;background:#fff;font:700 8px "IBM Plex Mono",monospace}
.hero2-langs a.active{background:#111927;color:#fff}
.hero2-header-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
.hero2-menu{display:none;width:40px;height:38px;border:1px solid #e6e1da;background:#fff}
.hero2-menu i{display:block;width:17px;height:1px;background:#111927;margin:4px auto}
.hero-mobile-link{display:none}
.client-copy .client-link{display:inline-flex;background:var(--purple);color:#fff;border:0;padding:15px 20px;border-radius:5px;font-size:13px;font-weight:700}
.quick a{border:1px solid var(--line);background:#fff;border-radius:3px;padding:9px;font-size:10px;text-align:center}
.cta-stats:empty{min-height:64px}

@media(max-width:1300px){
  .hero2-brand-logo{width:145px}
  .hero2-nav{position:absolute;left:0;right:0;top:76px;display:none;flex-direction:column;align-items:flex-start;margin:0;padding:22px;background:#fff;border-bottom:1px solid var(--line);gap:17px;box-shadow:0 18px 35px rgba(17,25,39,.08)}
  .hero2-nav.open{display:flex}
  .hero2-nav a,.hero-mobile-link{display:block;padding:0;font-size:12px}
  .hero2-nav a::after{display:none}
  .hero2-menu{display:block}
  .hero-tool-label{display:none}
  .hero2-header-btn{width:40px;padding:0}
  .hero2-header-btn:last-of-type{width:auto;padding:0 9px}
}

@media(max-width:700px){
  .hero2-header{height:62px}
  .hero2-nav{top:62px}
  .hero2-brand-logo{display:none}
  .hero2-brand-mark{display:block}
  .hero2-header-actions{gap:4px}
  .hero2-langs a{width:29px;height:34px;font-size:9px}
  .hero2-header-btn,.hero2-menu{height:34px;width:34px}
  .hero2-header-btn:last-of-type{padding:0 6px}
}

/* 3SD Studio / November 2026: three-service editorial system */
:root{--studio-ink:#111927;--studio-muted:#5c6778;--studio-rule:#e7eaf0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
.hero2-header{z-index:100}
.hero2-nav.open{z-index:150;max-height:calc(100dvh - 64px);overflow-y:auto}
.hero2-copy .hero2-lead{max-width:570px;margin:20px 0 0;color:#485468;font-size:clamp(15px,1.4vw,19px);line-height:1.7;font-weight:500}
.hero2-copy h1{letter-spacing:-.055em;line-height:1.04}
.hero2-cta:focus-visible,.service-btn:focus-visible,.hero7-circle:focus-visible,.hero2-nav a:focus-visible,.hero2-menu:focus-visible{outline:3px solid #ff6d33;outline-offset:4px}
.three-services-intro{display:flex;align-items:end;justify-content:space-between;gap:36px;padding:32px 0 24px;border-top:1px solid var(--studio-rule)}
.three-services-intro>div{max-width:750px}
.three-services-kicker,.three-process-heading>span{font:700 11px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#ff5b0b}
.three-services-intro h2{font-size:clamp(28px,3.3vw,51px);line-height:1.1;letter-spacing:-.045em;margin:14px 0 0;color:var(--studio-ink)}
.three-services-intro>p{max-width:385px;font-size:15px;line-height:1.65;color:var(--studio-muted);margin:0}
.services .service-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}
.services .service-card{height:580px!important;border-radius:14px!important;border-color:#e1e5eb!important;box-shadow:0 10px 35px rgba(17,25,39,.035);transition:transform .25s ease,box-shadow .25s ease}
.services .service-card:hover{transform:translateY(-5px);box-shadow:0 22px 42px rgba(17,25,39,.095)}
.services .service-head{padding:28px 29px 0!important}
.services .service-head h2{font-size:clamp(35px,3vw,52px)!important;line-height:1.05!important;letter-spacing:-.04em}
.services .service-head p{font-size:15px!important;line-height:1.55!important;min-height:72px!important;max-width:370px}
.services .service-card ul{padding:0 29px!important;margin:12px 0!important}
.services .service-card li{font-size:13px!important;line-height:1.4!important;margin:8px 0!important}
.services .service-card .service-btn{left:29px!important;bottom:24px!important;height:45px!important;padding:0 18px!important;font-size:12px!important}
.services .service-art{height:47%;background-position:center}
.three-process{background:#111927;color:#fff;padding:76px 0}
.three-process-inner{display:grid;grid-template-columns:minmax(250px,.85fr) minmax(0,1.4fr);gap:65px;align-items:start}
.three-process-heading h2{font-size:clamp(32px,3.2vw,50px);letter-spacing:-.04em;line-height:1.1;margin:15px 0 18px}
.three-process-heading p{font-size:15px;line-height:1.7;color:#acb8c8;max-width:410px}
.three-process-heading>a{display:inline-flex;gap:20px;align-items:center;color:#fff;text-decoration:none;font-weight:700;font-size:13px;margin-top:22px;border-bottom:1px solid #ff5b0b;padding-bottom:8px}
.three-process-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.three-process-steps article{min-height:245px;padding:26px 23px;background:#1b283a;border:1px solid #324157;border-radius:11px}
.three-process-steps span{font:700 12px 'IBM Plex Mono',monospace;color:#ff8b55}
.three-process-steps h3{font-size:21px;line-height:1.2;margin:37px 0 12px;color:#fff;letter-spacing:-.02em}
.three-process-steps p{font-size:13px;line-height:1.65;color:#b8c3d1}
.sticker-shop{scroll-margin-top:80px}
@media(max-width:1100px){
 .services .service-grid{gap:12px!important}
 .services .service-card{height:610px!important}
 .services .service-head{padding:22px 20px 0!important}
 .services .service-card ul{padding:0 20px!important}
 .services .service-card .service-btn{left:20px!important}
 .three-process-inner{grid-template-columns:1fr;gap:35px}
}
@media(max-width:800px){
 .three-services-intro{display:block;padding:26px 0 18px}
 .three-services-intro>p{margin-top:14px;font-size:14px}
 .services .service-grid{grid-template-columns:1fr!important;gap:16px!important}
 .services .service-card{height:520px!important}
 .services .service-head{padding:24px 24px 0!important}
 .services .service-head p{min-height:0!important;font-size:14px!important}
 .services .service-card ul{padding:0 24px!important;margin:12px 0!important}
 .services .service-card li{font-size:12px!important;margin:6px 0!important}
 .services .service-art{height:44%}
 .services .service-card .service-btn{left:24px!important}
 .three-process{padding:55px 0}
 .three-process-steps{grid-template-columns:1fr}
 .three-process-steps article{min-height:0}
 .three-process-steps h3{margin-top:15px}
}
@media(max-width:450px){
 .hero2-copy .hero2-lead{font-size:14px;margin-top:12px}
 .hero2-copy h1{font-size:clamp(34px,8.8vw,48px)!important;overflow-wrap:normal}
 .services .service-card{height:535px!important}
 .three-services-intro h2{font-size:30px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .services .service-card{transition:none}
 .services .service-card:hover{transform:none}
}
/* Serve the true hosting illustration format without a misleading .jpg extension. */
.services .srv-host{background-image:url('../images/srv-host-optimized.webp')!important}