:root { --ink:#03080b; --panel:#071016; --white:#f6f8fb; --muted:#b7c1c9; --blue:#087cf9; --line:rgba(223,233,242,.24); }
* { box-sizing: border-box; }
html { scroll-behavior:smooth; scroll-padding-top:78px; }
body { margin:0; overflow-x:hidden; color:var(--white); background:var(--ink); font-family:Manrope,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { position:sticky; z-index:20; top:0; height:76px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 clamp(22px,4vw,42px); border-bottom:1px solid var(--line); background:rgba(3,8,11,.94); backdrop-filter:blur(16px); }
.brand { font-size:22px; letter-spacing:-.04em; }.brand strong { font-weight:800; }.site-header nav { display:flex; height:100%; gap:36px; align-items:center; }.site-header nav a { position:relative; display:grid; height:100%; place-items:center; color:#f8f8f8; font-size:12px; font-weight:700; }.site-header nav a::after { position:absolute; right:0; bottom:9px; left:0; height:2px; content:""; background:var(--blue); transform:scaleX(0); transition:transform .22s ease; }.site-header nav a:hover::after,.site-header nav a.active::after { transform:scaleX(1); }.header-button { justify-self:end; }
.button { display:inline-flex; min-height:40px; align-items:center; justify-content:center; gap:11px; padding:0 20px; border:1px solid transparent; color:#fff; font-size:12px; font-weight:800; transition:transform .2s ease,background .2s ease,box-shadow .2s ease; }.button:hover { transform:scale(1.05); }.button-outline { border-color:var(--blue); color:#6fb1ff; }.button-outline:hover { background:rgba(8,124,249,.15); box-shadow:0 0 22px rgba(8,124,249,.22); }.button-blue { background:var(--blue); box-shadow:0 9px 27px rgba(8,124,249,.25); }.button-blue:hover { background:#2b93ff; }
.hero { position:relative; min-height:clamp(570px,68vw,720px); overflow:hidden; }.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,7,10,.93) 0%,rgba(2,7,10,.7) 31%,rgba(2,7,10,.08) 66%),linear-gradient(0deg,rgba(2,7,10,.6),transparent 37%); }.hero-copy { position:relative; z-index:1; max-width:1240px; margin:auto; padding:clamp(135px,16vw,190px) clamp(28px,4vw,42px) 70px; }.kicker { margin:0 0 19px; color:#f8fbff; font-size:10px; font-weight:700; letter-spacing:.5em; text-transform:uppercase; }.hero h1,.section-row h2,.process h2,.follow-heading h2 { margin:0; font-family:"Barlow Condensed",Arial,sans-serif; font-weight:700; letter-spacing:-.04em; }.hero h1 { font-size:clamp(60px,8vw,100px); line-height:.89; }.hero-tagline { margin:7px 0 29px; font-size:clamp(31px,4vw,50px); font-weight:400; letter-spacing:-.045em; }.coverage { margin:0 0 22px; font-size:10px; font-weight:700; letter-spacing:.48em; text-transform:uppercase; }.hero-note { position:absolute; z-index:1; bottom:32px; margin:0; color:#e7edf2; font-size:9px; font-weight:700; line-height:1.8; letter-spacing:.38em; text-transform:uppercase; }.hero-note-left { left:clamp(28px,4vw,42px); }.hero-note-right { right:clamp(28px,4vw,42px); text-align:right; }
.services { display:grid; grid-template-columns:1fr 1fr; }.service-card { position:relative; min-height:360px; overflow:hidden; }.service-image { position:absolute; inset:0; background-image:url("assets/services-blue-v3.png"); background-size:200% 100%; background-repeat:no-repeat; transition:transform .5s ease; }.service-card:hover .service-image { transform:scale(1.04); }.correction-image { background-position:left center; }.coating-image { background-position:right center; }.service-overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(3,8,11,.92),transparent 64%); }.service-top,.service-bottom { position:absolute; right:clamp(27px,4vw,42px); left:clamp(27px,4vw,42px); z-index:1; }.service-top { top:25px; display:flex; align-items:center; gap:14px; color:var(--blue); font-size:13px; font-weight:800; }.service-top i { width:34px; height:1px; background:#d8e5ee; }.service-bottom { bottom:30px; display:flex; align-items:end; justify-content:space-between; }.service-bottom h2 { margin:0; font-family:"Barlow Condensed",Arial,sans-serif; font-size:clamp(42px,5vw,61px); line-height:.9; letter-spacing:-.03em; }.service-bottom p { margin:0; color:#edf5fa; font-size:9px; font-weight:700; line-height:1.8; letter-spacing:.32em; text-transform:uppercase; }
.section { max-width:1240px; margin:auto; padding:72px clamp(28px,4vw,42px); }.section-row { display:flex; min-height:52px; align-items:center; gap:24px; }.section-row h2 { font-size:clamp(46px,5.5vw,64px); }.blue-rule { display:inline-block; width:34px; height:2px; flex:0 0 auto; background:var(--blue); }.section-row > p { margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.42em; text-transform:uppercase; }.gallery-controls { display:flex; gap:9px; margin-left:20px; }.gallery-controls button { width:33px; height:33px; border:1px solid var(--line); color:#fff; background:transparent; cursor:pointer; font-size:16px; transition:transform .2s ease,border-color .2s ease,background .2s ease; }.gallery-controls button:hover { border-color:var(--blue); background:rgba(8,124,249,.15); transform:scale(1.08); }.gallery-window { margin-top:23px; overflow:hidden; }.gallery-track { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }.gallery-track::-webkit-scrollbar { display:none; }.gallery-item { position:relative; flex:0 0 calc(25% - 8px); min-height:280px; margin:0; overflow:hidden; scroll-snap-align:start; background-image:url("assets/gallery-blue-v3.png"); background-size:300% 100%; background-repeat:no-repeat; }.gallery-item::after { position:absolute; inset:0; content:""; background:linear-gradient(0deg,rgba(3,8,11,.66),transparent 35%); }.gallery-item figcaption { position:absolute; z-index:1; bottom:15px; left:15px; opacity:0; color:#fff; font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; transition:opacity .2s ease; }.gallery-item:hover figcaption { opacity:1; }.gallery-rear { background-position:left center; }.gallery-wheel { background-position:center center; }.gallery-light { background-position:right center; }.gallery-front { background-image:url("assets/hero-blue-v3.png"); background-size:cover; background-position:87% center; }
.process { display:grid; grid-template-columns:315px 1fr; gap:45px; align-items:start; }.process-intro .kicker { margin-bottom:11px; }.process-intro .blue-rule { margin-bottom:20px; }.process h2 { font-size:clamp(42px,5vw,61px); line-height:.9; }.process-intro > p:last-child { max-width:265px; color:var(--muted); font-size:13px; line-height:1.5; }.process-list { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:10px 0 0; padding:0; list-style:none; }.process-list li { position:relative; border-top:1px solid var(--blue); padding-top:29px; }.process-list li::before { position:absolute; top:-17px; left:0; display:grid; width:32px; height:32px; place-items:center; border:1px solid var(--blue); border-radius:50%; content:""; background:var(--ink); }.process-list span { position:relative; z-index:1; display:block; margin-top:-40px; margin-bottom:27px; padding-left:9px; color:#fff; font-size:9px; }.process-list h3 { margin:0 0 10px; font-family:"Barlow Condensed",Arial,sans-serif; font-size:23px; letter-spacing:.04em; text-transform:uppercase; }.process-list p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }
.social-section { display:grid; grid-template-columns:1fr minmax(330px,1.15fr) 1fr; min-height:380px; background:#061016; }.social-visual { min-height:380px; background:url("assets/gallery-blue-v3.png") left center/300% 100% no-repeat; filter:brightness(.67); }.social-visual-right { position:relative; background-position:right center; }.social-visual-right::after { position:absolute; inset:0; content:""; background:rgba(1,5,7,.24); }.social-visual-right p { position:absolute; z-index:1; right:30px; bottom:44px; margin:0; color:#eef7ff; font-size:10px; font-weight:700; line-height:1.9; letter-spacing:.36em; text-align:right; text-transform:uppercase; }.social-panel { padding:40px; }.follow-heading { display:flex; align-items:center; gap:18px; }.follow-heading h2 { font-size:29px; }.social-links { display:grid; gap:10px; margin-top:18px; }.social-links a { display:grid; grid-template-columns:1fr 1.45fr auto; align-items:center; min-height:48px; padding:0 15px; border:1px solid rgba(224,235,244,.32); transition:transform .2s ease,border-color .2s ease,background .2s ease; }.social-links a:hover { border-color:var(--blue); background:rgba(8,124,249,.12); transform:translateX(4px); }.social-links span { font-size:12px; font-weight:800; }.social-links small { color:#b5c0c9; font-size:11px; }.social-links b { color:#fff; font-size:18px; }.social-signoff { margin:28px 0 0; color:#9eabb4; font-size:9px; font-weight:700; letter-spacing:.38em; text-transform:uppercase; }
@media (max-width:800px) { .site-header { grid-template-columns:1fr auto; height:66px; }.site-header nav { display:none; }.hero { min-height:570px; }.hero-image { object-position:61% center; }.hero-copy { padding-top:165px; }.hero-shade { background:linear-gradient(90deg,rgba(2,7,10,.89),rgba(2,7,10,.33)),linear-gradient(0deg,rgba(2,7,10,.55),transparent); }.services { grid-template-columns:1fr; }.service-card { min-height:330px; }.section-row { flex-wrap:wrap; gap:14px; }.section-row > p { display:none; }.gallery-controls { margin-left:auto; }.gallery-item { flex-basis:calc(76% - 8px); min-height:300px; }.process { grid-template-columns:1fr; }.process-list { grid-template-columns:repeat(2,1fr); gap:30px 20px; }.social-section { grid-template-columns:1fr; }.social-visual { display:none; }.social-panel { padding:45px 28px; }.social-links a { grid-template-columns:1fr auto; }.social-links small { grid-column:1; }.social-links b { grid-column:2; grid-row:1 / span 2; }.hero-note-right { display:none; } }
@media (max-width:460px) { .brand { font-size:19px; }.header-button { min-height:34px; padding:0 13px; font-size:10px; }.hero h1 { font-size:58px; }.hero-tagline { font-size:31px; }.coverage { letter-spacing:.3em; }.section { padding:53px 21px; }.service-top,.service-bottom { right:21px; left:21px; }.process-list { grid-template-columns:1fr; }.social-panel { padding:37px 21px; }.social-links a { padding:13px; }.social-signoff { letter-spacing:.25em; } }

.process-list li { min-height:154px; padding-top:32px; }
.process-list span { position:absolute; top:-10px; left:0; margin:0; }
.social-links .social-title { display:flex; position:static; align-items:center; gap:10px; font-size:12px; font-weight:800; }
.social-title em { font-style:normal; }
.social-icon { width:21px; height:21px; flex:0 0 21px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.instagram-icon { color:#f04c90; }.tiktok-icon { color:#74e9f0; }.whatsapp-icon { color:#44d679; }.facebook-icon { color:#61a4ff; }.email-icon { color:#d6e3ed; }
.facebook-icon { fill:currentColor; stroke:none; }
.social-links a { column-gap:16px; row-gap:4px; }
.mobile-gallery-front-image { display:none; }
@media (max-width:800px) { .gallery-item figcaption { opacity:1; text-shadow:0 2px 12px rgba(0,0,0,.72); }.gallery-front { background-image:none; background-color:#071018; }.mobile-gallery-front-image { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:87% center; } }