
/* ATOM website rebuild — black / red. Scoped to prevent theme leakage. */
html:has(.ar-site){scroll-behavior:smooth;scroll-padding-top:100px}
body:has(.ar-site){margin:0!important;padding:0!important;background:#090909!important}
body:has(.ar-site) .wp-site-blocks,body:has(.ar-site) .wp-block-post-content{padding:0!important;margin:0!important;max-width:none!important;width:100%}
.ar-site{--red:#ef174c;--black:#090909;--panel:#111;--white:#f7f7f7;--muted:#b3b3b3;--line:#ffffff24;background:var(--black);color:var(--white);font-family:"Helvetica Neue",Arial,"PingFang TC","Microsoft JhengHei",sans-serif;font-size:16px;font-weight:400;line-height:1.7;letter-spacing:0;margin:0!important;width:100%;overflow-x:clip}
.ar-site *,.ar-site *::before,.ar-site *::after{box-sizing:border-box}
.ar-site .is-layout-flow>*,.ar-site p,.ar-site h1,.ar-site h2,.ar-site h3,.ar-site figure{margin:0}
.ar-site a{color:inherit;text-decoration:none!important}
.ar-site button,.ar-site input,.ar-site textarea{font:inherit}
.ar-site button,.ar-site a{touch-action:manipulation}
.ar-site a:focus-visible,.ar-site button:focus-visible{outline:2px solid var(--red);outline-offset:5px}
.ar-site h1,.ar-site h2,.ar-site h3{font-family:inherit;font-style:normal;color:var(--white);text-wrap:normal}
.ar-site p{font-size:16px;line-height:1.95;color:var(--muted)}
.ar-site .ar-container{width:calc(100% - 112px);max-width:1280px;margin-inline:auto}
.ar-site .ar-header{height:100px;padding:0 max(56px,calc((100vw - 1280px)/2));display:flex;align-items:center;justify-content:space-between;gap:40px;position:sticky;top:0;background:#090909f5;border-bottom:1px solid #ffffff14;z-index:100;backdrop-filter:blur(14px)}
body.admin-bar .ar-site .ar-header{top:32px}
.ar-site .ar-brand{display:block;flex:0 0 auto}
.ar-site .ar-brand img{display:block;width:166px;height:auto;aspect-ratio:1000/366;object-fit:contain;background:none;padding:0}
.ar-site .ar-nav{display:flex;align-items:center;gap:30px;font-size:14px;line-height:1.5}
.ar-site .ar-nav>a{padding-block:9px;transition:color .2s}
.ar-site .ar-nav>a:hover{color:var(--red)}
.ar-site .ar-nav .ar-nav-cta{padding:12px 22px;background:var(--red);color:#fff}
.ar-site .ar-menu{display:none}
.ar-site .ar-hero{min-height:680px;min-height:min(760px,calc(100svh - 100px));position:relative;display:flex;align-items:center;background-image:linear-gradient(90deg,#090909d9 0%,#09090988 50%,#09090918 100%),url("https://wp.atomtechnology.com.hk/wp-content/uploads/2026/10/ATOM-original-homepage-background.jpg");background-size:cover;background-position:center}
.ar-site .ar-hero::after{content:"";position:absolute;bottom:0;left:0;width:8px;height:120px;background:var(--red)}
.ar-site .ar-hero-inner{position:relative;padding-block:72px}
.ar-site .ar-label{font-size:11px;line-height:1.6;font-weight:600;letter-spacing:2.5px;color:var(--red);margin-bottom:22px}
.ar-site .ar-hero .ar-label{color:#e0e0e0}
.ar-site h1{font-size:clamp(52px,6.5vw,94px);font-weight:750;line-height:1.05;letter-spacing:-3px;max-width:900px}
.ar-site h1 em{font-style:normal;color:var(--red);font-weight:inherit}
.ar-site .ar-hero p{margin-top:28px;font-size:17px;color:#ddd;line-height:1.85}
.ar-site .ar-actions{display:flex;gap:15px;flex-wrap:wrap;margin-top:32px}
.ar-site .ar-button{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:50px;padding:14px 22px;border:1px solid var(--red);border-radius:0;background:var(--red);color:#fff;font-size:14px;font-weight:600;line-height:1.5;cursor:pointer;transition:background .2s}
.ar-site .ar-button:hover{background:#cb103f;border-color:#cb103f}
.ar-site .ar-button.ar-outline{background:transparent;border-color:#ffffff66}
.ar-site .ar-button.ar-outline:hover{background:#ffffff12}
.ar-site .ar-scroll{margin-top:60px;font-size:10px;letter-spacing:2px;color:#bfbfbf;display:flex;gap:30px;align-items:center}
.ar-site .ar-scroll span{color:var(--red);font-size:20px}
.ar-site .ar-section{padding:90px 0}
.ar-site .ar-section-heading{margin-bottom:42px}
.ar-site .ar-section-heading .ar-label{margin-bottom:14px}
.ar-site h2{font-size:clamp(32px,3.5vw,48px);font-weight:600;line-height:1.3;letter-spacing:-.8px}
.ar-site .ar-section-heading>p{margin-top:20px;max-width:700px}
.ar-site .ar-service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line)}
.ar-site .ar-service-card{padding:32px 25px;display:flex;flex-direction:column;border-right:1px solid var(--line);background:#101010;min-width:0;transition:background .2s}
.ar-site .ar-service-card:last-child{border-right:0}
.ar-site .ar-service-card:hover{background:#181012}
.ar-site .ar-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:35px;color:#777;font-size:11px;letter-spacing:1px}
.ar-site .ar-icon{font-size:38px;color:var(--red);line-height:1}
.ar-site h3{font-size:22px;font-weight:550;line-height:1.45;letter-spacing:0}
.ar-site .ar-card-en{font-size:9px;letter-spacing:1px;line-height:1.6;color:#8d8d8d;margin-top:10px;min-height:30px}
.ar-site .ar-service-card p{font-size:14px;line-height:1.9;margin-top:20px;width:100%;max-width:none;min-width:0;padding:0;align-self:stretch;white-space:normal;text-wrap:wrap;word-break:normal;overflow-wrap:break-word;text-align:justify;text-align-last:start}
.ar-site .ar-text-link{display:flex;justify-content:space-between;gap:20px;color:#ddd;font-size:13px;padding-top:26px;margin-top:auto}
.ar-site .ar-text-link span{color:var(--red)}
.ar-site .ar-about{background:var(--red);padding:80px 0}
.ar-site .ar-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center}
.ar-site .ar-about .ar-label{color:#ffcfda}
.ar-site .ar-display{font-size:clamp(72px,9vw,130px);line-height:.9;font-weight:800;letter-spacing:-5px;color:#fff}
.ar-site .ar-display span{color:#1a0810}
.ar-site .ar-about-copy h2{font-size:clamp(30px,3vw,40px);line-height:1.5}
.ar-site .ar-about-copy p{color:#fff0f4;font-size:15px;line-height:1.95;margin-top:22px}
.ar-site .ar-capabilities{display:flex;flex-wrap:wrap;gap:10px 20px;border-top:1px solid #ffffff55;padding-top:22px;margin-top:28px}
.ar-site .ar-capabilities span{font-size:9px;line-height:1.7;letter-spacing:.8px;color:#ffe5eb}
.ar-site .ar-client-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.ar-site .ar-client-grid>span{display:flex;align-items:center;justify-content:center;min-height:112px;padding:20px 12px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);font-size:21px;font-weight:600;color:#e4e4e4;text-align:center}
.ar-site .ar-client-grid .ar-serif{font-family:Georgia,serif;font-size:25px}
.ar-site .ar-works{background:#111}
.ar-site .ar-work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.ar-site .ar-work-card{min-width:0}
.ar-site .ar-work-card figure{width:100%;height:260px;background:#e5e5e5;padding:20px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ar-site .ar-work-card figure img{width:100%;height:100%;object-fit:contain;transition:transform .4s}
.ar-site .ar-work-card:hover img{transform:scale(1.03)}
.ar-site .ar-work-info{padding-top:24px}
.ar-site .ar-work-tag{font-size:10px;letter-spacing:1px;color:var(--red);margin-bottom:10px;line-height:1.7}
.ar-site .ar-work-info h3{font-size:23px}
.ar-site .ar-work-info p{font-size:14px;line-height:1.9;margin-top:12px}
.ar-site .ar-process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.ar-site .ar-step{border-top:1px solid #555;padding-top:25px}
.ar-site .ar-step>span{font-size:32px;font-weight:300;line-height:1;color:var(--red);display:block;margin-bottom:24px}
.ar-site .ar-step h3{font-size:20px}
.ar-site .ar-step p{font-size:14px;margin-top:13px}
.ar-site .ar-contact{background:#141414;border-top:1px solid var(--line)}
.ar-site .ar-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12%;align-items:start}
.ar-site .ar-contact-copy h2{font-size:clamp(38px,4.4vw,60px);line-height:1.35}
.ar-site .ar-contact-copy p{margin-top:24px}
.ar-site .ar-contact-details{display:grid;gap:12px;margin-top:35px;font-size:15px}
.ar-site .ar-contact-details a:hover{color:var(--red)}
.ar-site .ar-form{margin:0;padding:4px 0 0}
.ar-site .ar-form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ar-site label{display:block;color:#ddd;font-size:12px;margin-bottom:8px}
.ar-site input,.ar-site textarea{width:100%;color:#fff;background:transparent;border:0;border-bottom:1px solid #666;border-radius:0;margin:0 0 24px;padding:10px 0 12px;font-size:15px;line-height:1.6;outline-offset:5px;box-shadow:none}
.ar-site textarea{resize:vertical;min-height:96px}
.ar-site input:focus,.ar-site textarea:focus{outline:none;border-color:var(--red)}
.ar-site textarea::placeholder{color:#999}
.ar-site .ar-form .ar-form-note{font-size:11px;line-height:1.8;color:#999;margin-top:18px}
.ar-site .ar-footer{padding:34px 0;background:#090909;border-top:1px solid var(--line)}
.ar-site .ar-footer-inner{display:flex;justify-content:space-between;align-items:center;gap:35px}
.ar-site .ar-footer img{display:block;width:130px;height:auto;object-fit:contain}
.ar-site .ar-footer-inner>div{display:flex;flex-direction:column;gap:5px;font-size:11px;color:#999;text-align:center;line-height:1.8}
.ar-site .ar-footer-inner>a:last-child{font-size:11px;color:#aaa}
@media(min-width:1500px){.ar-site .ar-hero{background-position:center 55%}}
@media(max-width:1050px){.ar-site .ar-nav{gap:18px;font-size:13px}.ar-site .ar-header{padding-inline:36px}.ar-site .ar-container{width:calc(100% - 72px)}.ar-site .ar-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ar-site .ar-service-card:nth-child(2){border-right:0}.ar-site .ar-service-card:nth-child(-n+2){border-bottom:1px solid var(--line)}.ar-site .ar-work-card figure{height:220px}.ar-site .ar-contact-grid{gap:8%}}
@media(max-width:800px){
html:has(.ar-site){scroll-padding-top:84px}
.ar-site .ar-container{width:calc(100% - 40px)}
.ar-site .ar-header{height:80px;padding:0 20px;gap:15px}
body.admin-bar .ar-site .ar-header{top:46px}
.ar-site .ar-brand img{width:142px}
.ar-site .ar-menu{display:flex;flex-direction:column;justify-content:center;gap:7px;background:none;border:1px solid #555;width:42px;height:42px;padding:10px;color:#fff;cursor:pointer}
.ar-site .ar-menu span{display:block;height:1px;background:#fff;width:20px}
.ar-site .ar-nav{display:none;position:absolute;top:80px;left:0;right:0;background:#090909;padding:22px 20px 28px;border-bottom:1px solid #555;flex-direction:column;align-items:stretch;gap:10px;font-size:15px}
.ar-site .ar-nav.is-open{display:flex}
.ar-site .ar-nav>a{padding:12px 0}
.ar-site .ar-nav .ar-nav-cta{padding:13px 18px;margin-top:6px;text-align:center}
.ar-site .ar-hero{min-height:590px;min-height:min(690px,calc(100svh - 80px));background-position:60% center;background-image:linear-gradient(90deg,#090909d9 0%,#09090988 50%,#09090918 100%),url("https://wp.atomtechnology.com.hk/wp-content/uploads/2026/10/ATOM-original-homepage-background-1024x576.jpg")}
.ar-site .ar-hero-inner{padding:55px 0}
.ar-site .ar-hero::after{width:5px;height:70px}
.ar-site h1{font-size:clamp(43px,10.2vw,68px);letter-spacing:-1.5px;line-height:1.08}
.ar-site .ar-hero .ar-label{font-size:9px;letter-spacing:1.7px}
.ar-site .ar-hero p{font-size:15px;line-height:1.85;margin-top:24px}
.ar-site .ar-actions{gap:10px;margin-top:26px}
.ar-site .ar-button{padding:13px 16px;gap:18px;min-height:46px;font-size:12px}
.ar-site .ar-scroll{margin-top:38px;font-size:9px}
.ar-site .ar-section{padding:56px 0}
.ar-site .ar-section-heading{margin-bottom:30px}
.ar-site .ar-label{font-size:10px;letter-spacing:1.8px;margin-bottom:16px}
.ar-site h2{font-size:32px;line-height:1.4;letter-spacing:-.5px}
.ar-site p{font-size:15px}
.ar-site .ar-section-heading>p{margin-top:16px;font-size:14px}
.ar-site .ar-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ar-site .ar-service-card{padding:22px 12px;border-right:1px solid var(--line);border-bottom:0}
.ar-site .ar-service-card:nth-child(2n){border-right:0}
.ar-site .ar-service-card:nth-child(-n+2){border-bottom:1px solid var(--line)}
.ar-site .ar-card-top{margin-bottom:16px}.ar-site .ar-icon{font-size:32px}
.ar-site .ar-service-card h3{font-size:19px;line-height:1.4}
.ar-site .ar-card-en{font-size:9px;letter-spacing:.4px;line-height:1.5;min-height:0;margin-top:7px}
.ar-site .ar-service-card p{font-size:14px;line-height:1.75;margin-top:14px;max-width:none;width:100%;letter-spacing:0}
.ar-site .ar-text-link{font-size:12px;padding-top:18px}
.ar-site .ar-about-grid{grid-template-columns:1fr;gap:35px}
.ar-site .ar-display{font-size:86px;letter-spacing:-3px}
.ar-site .ar-about-copy h2{font-size:29px}
.ar-site .ar-about-copy p{font-size:14px}
.ar-site .ar-client-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ar-site .ar-client-grid>span{min-height:90px;font-size:17px}
.ar-site .ar-client-grid .ar-serif{font-size:20px}
.ar-site .ar-work-grid{grid-template-columns:1fr;gap:34px}
.ar-site .ar-work-card figure{height:auto;aspect-ratio:1.45;padding:24px}
.ar-site .ar-work-info{padding-top:18px}
.ar-site .ar-work-info h3{font-size:22px}
.ar-site .ar-process-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
.ar-site .ar-step{padding-top:20px}.ar-site .ar-step>span{margin-bottom:18px;font-size:28px}
.ar-site .ar-step h3{font-size:19px}.ar-site .ar-step p{font-size:13px}
.ar-site .ar-contact-grid{grid-template-columns:1fr;gap:38px}
.ar-site .ar-contact-copy h2{font-size:38px}
.ar-site .ar-contact-details{margin-top:24px;font-size:14px}
.ar-site .ar-form-row{gap:20px}
.ar-site .ar-footer{padding:28px 0}
.ar-site .ar-footer-inner{display:grid;grid-template-columns:1fr auto;gap:20px}
.ar-site .ar-footer img{width:125px}
.ar-site .ar-footer-inner>div{grid-row:2;grid-column:1/-1;text-align:left;font-size:10px;gap:4px}
.ar-site .ar-footer-inner>a:last-child{grid-column:2;grid-row:1;font-size:10px}
}
@media(max-width:360px){.ar-site h1{font-size:39px}.ar-site .ar-service-grid{grid-template-columns:1fr}.ar-site .ar-service-card{border-right:0;border-bottom:1px solid var(--line)}}
@media(prefers-reduced-motion:reduce){html:has(.ar-site){scroll-behavior:auto}.ar-site *{transition:none!important}}
