/* SSS Digital · Crystal. The approved raster is used without a tonal mask. */
:root{--ink:#0a0c10;--paper:#f0f0eb;--violet:#8d7bff;--acid:#c3baff;--muted:#a5a6b4;--line:#e5e3ff22;--dark-line:#e5e3ff22;--pad:clamp(24px,5.5vw,104px);--ease:cubic-bezier(.22,1,.36,1)}
html{scroll-padding-top:100px;color-scheme:dark}
body{background:#0a0c10;color:var(--paper);overflow-x:clip}
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid #c8bdff;outline-offset:6px}
::selection{background:#bcb0ff;color:#111018}
.site-header{height:80px;max-width:none;position:absolute;gap:28px;background:linear-gradient(180deg,#101118b8,#10111860);border-bottom:1px solid #e9e5ff14;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.brand{gap:12px}.brand>img{width:42px;height:42px;object-fit:contain;flex:none}
.brand .brand-wordmark{width:112px;height:32px;object-fit:contain}
.brand-description{font-size:10px;letter-spacing:.015em;color:#b1b0bd;margin-left:8px;padding-left:22px;border-left-color:#e5e3ff24}
.desktop-nav{gap:28px;margin-inline:auto}.desktop-nav a{font-size:12px;color:#bdbbc8;min-height:44px;display:flex;align-items:center;transition:color 180ms ease}
.header-cta{border:1px solid #dcd4fa40;background:linear-gradient(135deg,#ffffff09,#ffffff02);box-shadow:inset 0 1px 0 #ffffff0c;border-radius:8px;font-size:12px;min-height:44px;padding:10px 15px;gap:25px}
.header-cta span{font-size:19px}.header-cta:hover{color:#fff;background:#ffffff0e;border-color:#b8a7f580}
.hero{display:flex;min-height:790px;min-height:max(740px,100svh);max-height:1080px;padding-top:clamp(165px,17vh,210px);padding-bottom:105px;background:radial-gradient(ellipse at 80% 43%,#27203748,transparent 50%),linear-gradient(145deg,#111219,#0a0c10 70%);border-bottom:1px solid #e9e5ff14}
.hero::before{content:'';position:absolute;left:0;right:0;bottom:0;height:35%;pointer-events:none;background:linear-gradient(transparent,#0a0c10);z-index:1}
.hero-copy{max-width:59%;z-index:4;pointer-events:none}.hero-copy a{pointer-events:auto}
.hero .eyebrow{font-size:10px;font-weight:500;letter-spacing:.16em;color:#b7afca;gap:14px;line-height:1.7}
.hero .eyebrow::before{content:'';width:25px;height:1px;background:#b5a6d8}
.hero h1.company-heading{font-size:clamp(38px,4.15vw,72px);font-weight:500;line-height:1.18;letter-spacing:-.067em;margin-top:34px;white-space:normal;text-shadow:none}
.hero h1.company-heading span{color:#c0b7d1;background:linear-gradient(100deg,#f0f0eb 5%,#bcb0d3 75%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-description{font-size:17px;font-weight:400;line-height:1.75;max-width:405px;color:#b3afbd;margin-top:32px}
.hero-actions{display:flex;align-items:center;gap:28px;margin-top:34px}.hero .hero-actions a{margin-top:0}
.hero .button{min-height:55px;padding:17px 21px;gap:36px;border:1px solid #ffffffb3;border-radius:8px;font-size:13px;color:#121019;background:linear-gradient(145deg,#fff,#d5cfdf);box-shadow:inset 0 1px 0 #fff,0 6px 25px #0003;font-weight:600;transition:background 180ms ease,box-shadow 180ms ease}
.hero .button:hover{background:#fff;transform:none;box-shadow:0 7px 28px #b6a5e426}
.hero-project-link{font-size:12px;color:#cfccd6;display:inline-flex;align-items:center;gap:22px;min-height:48px;border-bottom:1px solid #e4defa35}
.hero-art{position:absolute;width:49vw;max-width:790px;right:1.2vw;top:50%;translate:0 -46%;z-index:2;pointer-events:none}
.hero-art .hero-object{width:100%;aspect-ratio:1;isolation:isolate}
.hero-art .hero-object>img{width:100%;height:auto;display:block;object-fit:contain;mask-image:none;-webkit-mask-image:none;mix-blend-mode:normal;opacity:1;filter:drop-shadow(0 35px 40px #0009);transform:none;animation:none}
.hero-aura{inset:0;background:radial-gradient(ellipse at 50% 50%,#74608915,transparent 66%);opacity:.6;filter:none}
.hero-light-mask{mask-image:url('assets/sss-crystal.webp');mask-mode:alpha;-webkit-mask-image:url('assets/sss-crystal.webp');mask-size:contain;mask-repeat:no-repeat;mask-position:center}
.hero-art .hero-specular{inset:0;background:linear-gradient(115deg,transparent 28%,#eee4ff00 40%,#eee4ff25 49%,#eee4ff00 58%,transparent 72%);opacity:.15;mix-blend-mode:screen}
#neuro-field{opacity:.2;mix-blend-mode:screen;z-index:1}
.hero-art-note{position:absolute;left:51%;bottom:9%;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#a39bad;z-index:3;pointer-events:none}
.hero-bottomline{position:absolute;bottom:33px;left:var(--pad);right:var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px;z-index:3;font-size:10px;letter-spacing:.12em;color:#8d8a99}
.hero-bottomline a{display:flex;align-items:center;gap:30px;min-height:44px;color:#c4bdce;letter-spacing:.02em;font-size:11px}.hero-bottomline a span{font-size:19px}
.kinetic-strip{display:none}
.glass-index{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-block:25px;background:#0a0c10;border-bottom:1px solid #e9e5ff14;color:#aba6b6;font-size:10px;line-height:1.6;letter-spacing:.1em;text-transform:uppercase}
.glass-index>span:first-child{color:#ebe4f5}.glass-index i{width:4px;height:4px;background:#9682bd;border-radius:50%;display:inline-block;margin-right:12px;vertical-align:middle}
.mobile-nav{background:#101118f7;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.mobile-nav a{border-color:#e9e5ff24}.mobile-nav a span{color:#b4a1d8}
.footer-top .brand .brand-wordmark{width:112px;height:32px;object-fit:contain}
@media(max-width:900px){
 .menu-open .site-header{position:fixed;background:#101118}
 .mobile-nav:not([hidden]){display:block;position:fixed;inset:76px 0 0;z-index:29;overflow:auto;padding:25px var(--pad) calc(30px + env(safe-area-inset-bottom,0px));background:#101118f7}
 .mobile-nav a{display:flex;align-items:center;justify-content:space-between;font-size:23px;min-height:74px;padding-block:24px;border-bottom:1px solid #e9e5ff24;letter-spacing:-1px}
 .mobile-nav a span{font-size:15px;color:#b4a1d8;letter-spacing:0}
 .menu-toggle{border-radius:7px}
 .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
 .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
}
@media(min-width:1800px){.hero-copy{max-width:1050px}.hero-art{right:5vw}.hero-art-note{left:59%}}
@media(max-width:1200px){.site-header{gap:22px}.brand-description{display:none}.desktop-nav{gap:22px}.hero{min-height:760px;max-height:none;padding-top:175px}.hero h1.company-heading{font-size:clamp(38px,4.2vw,54px)}.hero-art{width:51vw;right:-1vw}.hero-description{font-size:16px;max-width:350px}.hero-actions{gap:23px}.hero-art-note{bottom:13%}}
@media(max-width:900px){.site-header{height:76px}.desktop-nav{display:none}.header-cta{margin-left:auto}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;min-height:44px;padding:10px;background:transparent}.menu-toggle span{height:1px;width:22px;background:#e4ddef;display:block}.hero{padding-top:155px;min-height:700px}.hero-copy{max-width:62%}.hero h1.company-heading{font-size:clamp(33px,4.3vw,42px)}.hero-art{right:-5vw;width:53vw;translate:0 -42%}.hero-description{max-width:310px;font-size:15px}.hero-actions{gap:22px;align-items:flex-start;flex-direction:column;margin-top:27px}.hero .button{min-height:52px}.hero-project-link{min-height:38px}.hero-art-note{left:58%;bottom:17%;font-size:8px}.glass-index{font-size:9px;letter-spacing:.06em}.glass-index span:nth-child(3){display:none}.mobile-nav{top:76px}}
@media(max-width:700px){
 :root{--pad:24px}.site-header{height:72px;gap:14px}.brand{gap:9px}.brand>img{width:36px;height:36px}.brand .brand-wordmark{width:94px;height:28px}.header-cta{display:none}.menu-toggle{margin-left:auto}.mobile-nav{top:72px}
 .hero{padding-top:116px;padding-bottom:89px;min-height:0;max-height:none;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at 66% 62%,#27203750,transparent 50%),#0d0f15}
 .hero-copy{max-width:100%;pointer-events:auto}.hero .eyebrow{font-size:9px;letter-spacing:.12em;gap:11px}.hero .eyebrow::before{width:20px}
 .hero h1.company-heading{font-size:clamp(28px,6.75vw,45px);line-height:1.22;letter-spacing:-.065em;margin-top:25px}
 .hero-description{font-size:15px;line-height:1.75;max-width:365px;margin-top:23px}.hero-actions{flex-direction:row;align-items:center;gap:23px;margin-top:25px}.hero .button{font-size:12px;gap:22px;padding:16px 17px;min-height:51px}.hero-project-link{font-size:11px;gap:16px;min-height:43px}
 .hero-art{position:relative;top:auto;right:auto;width:min(100%,490px);align-self:center;translate:none;margin-top:14px;margin-bottom:-7px;max-width:none;z-index:2}.hero-art .hero-object>img{filter:drop-shadow(0 15px 20px #0008)}
 .hero-art-note{position:relative;left:auto;bottom:auto;text-align:center;font-size:8px;letter-spacing:.15em;margin-top:-6px;color:#9d93ac}
 .hero-bottomline{bottom:20px;gap:12px;left:24px;right:24px;font-size:8px;letter-spacing:.06em}.hero-bottomline a{font-size:10px;gap:12px;min-height:36px}
 #neuro-field{opacity:.12}.glass-index{padding-block:22px;gap:18px;font-size:8px;line-height:1.7;letter-spacing:.04em;justify-content:flex-start;flex-wrap:wrap}.glass-index>span:first-child{flex-basis:100%;color:#a99db9}.glass-index i{width:3px;height:3px;margin-right:8px}.glass-index>span:nth-child(3){display:inline}
}
@media(max-width:370px){:root{--pad:20px}.hero h1.company-heading{font-size:25px}.hero-description{font-size:14px}.hero-actions{gap:16px}.hero .button{font-size:11px;gap:17px;padding-inline:14px}.hero-project-link{font-size:10px;gap:10px}.hero-bottomline{left:20px;right:20px}.hero-bottomline>span{max-width:130px}.glass-index{column-gap:14px}}
@media(prefers-reduced-transparency:reduce){.site-header,.mobile-nav{background:#101118;backdrop-filter:none;-webkit-backdrop-filter:none}.hero .button{background:#ede7f4}}
@supports not (backdrop-filter:blur(1px)){.site-header,.mobile-nav{background:#101118}}
@media(prefers-reduced-motion:reduce){.hero-art .hero-specular{opacity:0!important}.hero-art .hero-object>img{animation:none}.hero-project-link,.header-cta,.hero .button{transition:none}}
