/* ============================================================ SHIRE GROUP — industry-first holding site Light is default. Dark via . Brand palette unchanged: navy / blue / sky. ============================================================ */ :root{ /* brand constants — same in both themes */ --navy:#0A2E73; --blue:#1659C7; --sky:#38A8EB; /* light theme surfaces */ --base:#FBFCFE; --base-2:#F2F6FC; --base-3:#E9F0FA; --line:#DCE4F0; --line-2:#C6D3E6; --fg:#0A1626; --fg-2:#54637C; --fg-3:#7C8AA1; --acc:var(--blue); --acc-2:var(--navy); --acc-ink:#FFFFFF; --acc-soft:rgba(22,89,199,.07); --grid-line:rgba(10,46,115,.07); --halo:rgba(56,168,235,.20); --shadow:0 14px 34px -16px rgba(10,46,115,.24); --net:var(--navy); --maxw:1300px; --gutter:clamp(20px,5vw,72px); --font:"General Sans",system-ui,-apple-system,sans-serif; --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace; --ease:cubic-bezier(.2,.7,.2,1); } html[data-theme="dark"]{ --base:#080F1B; --base-2:#0D1725; --base-3:#132133; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --fg:#EAF0F8; --fg-2:#9AAAC1; --fg-3:#66799A; --acc:var(--sky); --acc-2:#7CC6F4; --acc-ink:#04101F; --acc-soft:rgba(56,168,235,.13); --grid-line:rgba(255,255,255,.07); --halo:rgba(56,168,235,.16); --shadow:0 20px 44px -20px rgba(0,0,0,.7); --net:#7CC6F4; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:80px;background:var(--base)} body{font-family:var(--font);background:var(--base);color:var(--fg);line-height:1.5;font-weight:450;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .35s var(--ease),color .35s var(--ease)} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} a:hover{color:var(--acc)} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)} h1,h2,h3{line-height:1.03;letter-spacing:-.03em;font-weight:600} ::selection{background:var(--acc);color:var(--acc-ink)} /* ---------- shared ---------- */ .eyebrow{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);display:inline-flex;align-items:center;gap:12px} .eyebrow::before{content:"";width:24px;height:1px;background:var(--acc);opacity:.7} .shead{max-width:760px} .shead h2{font-size:clamp(30px,4.6vw,54px);margin:20px 0 0} .shead p{margin-top:20px;font-size:clamp(16px,1.5vw,19px);color:var(--fg-2);max-width:56ch;text-wrap:pretty} .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font);font-size:15px;font-weight:550;padding:14px 24px;border-radius:2px;border:1px solid transparent;cursor:pointer;transition:all .2s var(--ease);white-space:nowrap} .btn .arr{transition:transform .22s var(--ease)} .btn:hover .arr{transform:translateX(4px)} .btn-acc{background:var(--acc);color:var(--acc-ink)} .btn-acc:hover{background:var(--acc-2);color:var(--acc-ink);transform:translateY(-2px)} .btn-line{background:transparent;color:var(--fg);border-color:var(--line-2)} .btn-line:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-2px)} /* ============ NAV ============ */ .nav{position:fixed;inset:0 0 auto 0;z-index:60;height:76px;display:flex;align-items:center;transition:background .3s var(--ease),height .3s var(--ease)} .nav::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:transparent;transition:background .3s} .nav.scrolled{height:66px;background:color-mix(in srgb,var(--base) 84%,transparent);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3)} .nav.scrolled::after{background:var(--line)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%} .brand{display:flex;align-items:center;gap:12px} .brand:hover{color:var(--fg)} .brand .name .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--acc);margin-left:3px;vertical-align:baseline;transition:transform .4s var(--ease),background .3s} .brand:hover .name .dot{transform:scale(1.4)} .brand .name{position:relative;display:inline-block;font-weight:600;font-size:17.5px;letter-spacing:.02em;padding-bottom:6px} .brand .name::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acc)} .brand .name span.s{color:var(--acc);font-weight:600} .brand .name span{color:var(--fg-3);font-weight:450} .nav-links{display:flex;align-items:center;gap:32px} .nav-links a{font-size:14px;font-weight:500;color:var(--fg-2);position:relative;transition:color .18s} .nav-links a::after{content:"";position:absolute;left:0;bottom:-7px;height:1px;width:0;background:var(--acc);transition:width .24s var(--ease)} .nav-links a:hover{color:var(--fg)} .nav-links a:hover::after{width:100%} .nav-cta{display:flex;align-items:center;gap:10px} .nav-toggle{display:none} /* theme toggle button */ .tbtn{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line-2);border-radius:2px;color:var(--fg-2);cursor:pointer;transition:all .2s var(--ease)} .tbtn:hover{border-color:var(--acc);color:var(--acc)} .tbtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .tbtn .i-moon{display:block} .tbtn .i-sun{display:none} html[data-theme="dark"] .tbtn .i-moon{display:none} html[data-theme="dark"] .tbtn .i-sun{display:block} .mmenu{position:absolute;top:100%;left:0;right:0;background:color-mix(in srgb,var(--base) 97%,transparent);backdrop-filter:blur(16px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:none;flex-direction:column;padding:6px var(--gutter) 16px} .mmenu.open{display:flex} .mmenu a{padding:15px 0;font-size:17px;font-weight:500;border-bottom:1px solid var(--line);color:var(--fg-2)} .mmenu a:last-child{border-bottom:0} /* ============ HERO ============ */ .hero{position:relative;min-height:clamp(560px,92svh,1000px);display:flex;align-items:flex-end;padding:140px 0 clamp(48px,7vw,90px);overflow:hidden} .hero .grid-bg{position:absolute;inset:0;z-index:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);mask-image:radial-gradient(ellipse 90% 70% at 70% 20%,#000 10%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse 90% 70% at 70% 20%,#000 10%,transparent 72%)} .hero .halo{position:absolute;z-index:0;width:900px;height:900px;border-radius:50%;right:-260px;top:-340px;background:radial-gradient(circle,var(--halo),transparent 62%);pointer-events:none} .hero .wrap{position:relative;z-index:1;width:100%} .hero h1{font-size:clamp(46px,9.4vw,128px);letter-spacing:-.045em;margin-top:26px;line-height:.94} .hero h1 .l2{display:block;color:var(--acc)} .hero .sub{margin-top:30px;font-size:clamp(17px,1.75vw,22px);color:var(--fg-2);max-width:50ch;text-wrap:pretty} .hero .actions{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap} .hero .scroll-hint{position:absolute;right:var(--gutter);bottom:clamp(48px,7vw,90px);font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);display:flex;align-items:center;gap:10px;z-index:1} .hero .scroll-hint i{display:block;width:1px;height:44px;background:linear-gradient(var(--acc),transparent);animation:drop 2.2s var(--ease) infinite} @keyframes drop{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* ============ STATS ============ */ .stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--base-2)} .stats .row{display:grid;grid-template-columns:repeat(4,1fr)} .stat{padding:clamp(34px,4.4vw,58px) clamp(20px,2.6vw,40px);border-left:1px solid var(--line);position:relative;overflow:hidden} .stat:first-child{border-left:0} .stat::before{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)} .stat:hover::before{transform:scaleX(1)} .stat .k{font-size:clamp(34px,4.6vw,60px);font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--navy)} html[data-theme="dark"] .stat .k{color:var(--fg)} .stat .k .suf{color:var(--acc)} .stat .k .unit{color:var(--fg-2);font-size:.34em;font-weight:500;letter-spacing:0;margin-left:.28em;vertical-align:.45em} .stat .l{margin-top:14px;font-size:14px;color:var(--fg-2);max-width:22ch;text-wrap:pretty} /* ============ STORY ============ */ .story{padding:clamp(80px,11vw,160px) 0} .story .cols{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,7vw,110px);align-items:start} .story .lead{font-size:clamp(20px,2.3vw,30px);letter-spacing:-.02em;line-height:1.28;font-weight:500;text-wrap:pretty} .story .lead b{color:var(--acc);font-weight:500} .timeline{list-style:none;position:relative} .timeline::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:var(--line-2)} .timeline li{position:relative;padding:0 0 34px 34px} .timeline li:last-child{padding-bottom:0} .timeline li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:13px;border-radius:50%;border:1px solid var(--acc);background:var(--base)} .timeline li.now::before{background:var(--acc)} .timeline .yr{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--acc)} .timeline h3{font-size:19px;margin:8px 0 0;letter-spacing:-.01em} .timeline p{color:var(--fg-2);margin-top:8px;font-size:15.5px;max-width:44ch;text-wrap:pretty} /* ============ INDUSTRIES ============ */ .industries{padding:clamp(60px,8vw,110px) 0 clamp(70px,9vw,130px);border-top:1px solid var(--line);background:var(--base-2)} .industries .shead{margin-bottom:clamp(20px,3vw,44px)} .ind{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(24px,4vw,60px);align-items:center;padding:clamp(32px,4.4vw,56px) 0;border-top:1px solid var(--line);position:relative} .ind:last-child{border-bottom:1px solid var(--line)} .ind::after{content:"";position:absolute;left:calc(var(--gutter)*-1);right:calc(var(--gutter)*-1);top:0;bottom:0;background:linear-gradient(90deg,var(--acc-soft),transparent 60%);opacity:0;transition:opacity .35s var(--ease);pointer-events:none;z-index:0} .ind:hover::after{opacity:1} .ind>*{position:relative;z-index:1} .ind .indbg{position:absolute;z-index:0;inset:0 calc(var(--gutter)*-1) 0 auto;width:min(46%,540px);overflow:hidden;pointer-events:none;mask-image:linear-gradient(to left,#000 42%,transparent 96%);-webkit-mask-image:linear-gradient(to left,#000 42%,transparent 96%)} .ind .indbg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);opacity:.13;transition:opacity .55s var(--ease),filter .55s var(--ease),transform .8s var(--ease);transform:scale(1.04)} .ind:hover .indbg img{opacity:.3;filter:grayscale(.35) contrast(1.02);transform:scale(1)} html[data-theme="dark"] .ind .indbg img{opacity:.16;mix-blend-mode:luminosity} html[data-theme="dark"] .ind:hover .indbg img{opacity:.34} @media (max-width:900px){.ind .indbg{width:56%}.ind .indbg img{opacity:.09}} @media (max-width:600px){.ind .indbg{width:100%;inset:0;mask-image:linear-gradient(to top,#000 8%,transparent 78%);-webkit-mask-image:linear-gradient(to top,#000 8%,transparent 78%)}.ind .indbg img{opacity:.07}} /* touch devices have no hover — show a little more by default, skip hover states */ @media (hover:none){ .ind .indbg img{opacity:.17;filter:grayscale(.6)} .logo{filter:grayscale(0);opacity:.85} .btn:hover::before{transform:translateY(101%)} } .ind .num{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--fg-3);align-self:start;padding-top:8px} .ind .core{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,38px);align-items:start} .ind .icon{width:56px;height:56px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--acc);flex:none;transition:border-color .3s,background .3s} .ind:hover .icon{border-color:var(--acc);background:var(--acc-soft)} .ind .icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} .ind h3{font-size:clamp(24px,3.2vw,38px)} .ind .core p{color:var(--fg-2);margin-top:14px;font-size:16.5px;max-width:52ch;text-wrap:pretty} .ind .tags{list-style:none;margin-top:18px;display:flex;flex-wrap:wrap;gap:8px} .ind .tags li{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);border:1px solid var(--line);padding:6px 11px} .ind .metric{text-align:right;min-width:150px} .ind .metric .k{font-size:clamp(26px,3.2vw,40px);font-weight:600;letter-spacing:-.035em;color:var(--acc);line-height:1} .ind .metric .l{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin-top:10px} /* ============ COMPANIES ============ */ .companies{padding:clamp(80px,11vw,150px) 0} .companies .shead{margin-bottom:clamp(36px,5vw,60px)} .carousel{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .carousel::before,.carousel::after{content:"";position:absolute;top:0;bottom:0;width:clamp(50px,10vw,140px);z-index:2;pointer-events:none} .carousel::before{left:0;background:linear-gradient(90deg,var(--base),transparent)} .carousel::after{right:0;background:linear-gradient(-90deg,var(--base),transparent)} .carousel .track{display:flex;width:max-content;animation:slide 34s linear infinite} .carousel:hover .track,.carousel:focus-within .track{animation-play-state:paused} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} .logo{flex:none;width:clamp(190px,20vw,260px);height:clamp(120px,13vw,160px);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;filter:grayscale(1);opacity:.52;transition:filter .35s var(--ease),opacity .35s var(--ease),background .35s var(--ease)} .logo:hover{filter:grayscale(0);opacity:1;background:var(--base-2);color:var(--fg)} .logo .lw{font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--acc);height:64px;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 12px} .logo img{width:clamp(120px,13vw,168px);height:64px;object-fit:contain;mix-blend-mode:multiply} html[data-theme="dark"] .logo img{mix-blend-mode:normal;background:#fff;padding:8px 10px;border-radius:2px} .logo .ls{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)} .logo .ext{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--fg-3);opacity:0;transition:opacity .3s} .logo:hover .ext{opacity:1} .logo.soon{cursor:default} /* ============ CONTACT ============ */ .contact{padding:clamp(70px,9vw,130px) 0 clamp(80px,10vw,140px);border-top:1px solid var(--line);background:var(--base-2)} .contact .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:start;margin-top:clamp(36px,5vw,56px)} .cinfo{list-style:none;display:flex;flex-direction:column;gap:26px} .cinfo li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start} .cinfo .ci{width:38px;height:38px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--acc);flex:none} .cinfo .ci svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .cinfo .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)} .cinfo .val{font-size:16.5px;margin-top:5px;color:var(--fg);text-wrap:pretty} .wa{margin-top:34px;display:inline-flex;align-items:center;gap:11px;background:#25D366;color:#04120D;font-weight:600;font-size:15.5px;padding:15px 26px;border-radius:2px;transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .wa:hover{color:#04120D;transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(37,211,102,.6)} .wa svg{width:19px;height:19px;fill:currentColor} form{display:grid;gap:16px} .f2{display:grid;grid-template-columns:1fr 1fr;gap:16px} label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);margin-bottom:9px} input,textarea,select{width:100%;font-family:var(--font);font-size:15.5px;color:var(--fg);background:var(--base);border:1px solid var(--line-2);border-radius:2px;padding:13px 15px;transition:border-color .2s,background .2s} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--acc);background:var(--base-3)} input::placeholder,textarea::placeholder{color:var(--fg-3)} textarea{resize:vertical;min-height:118px} form .btn{justify-self:start;margin-top:4px} .fnote{font-size:13.5px;color:var(--fg-3);min-height:1.2em} .fnote.ok{color:var(--acc)} .fnote.err{color:#C0392B} html[data-theme="dark"] .fnote.err{color:#FF8A7A} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} button[disabled]{opacity:.6;cursor:progress} /* ============ FOOTER ============ */ .footer{padding:clamp(56px,7vw,80px) 0 36px;border-top:1px solid var(--line)} .footer .top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(32px,5vw,64px)} .footer .blurb{color:var(--fg-2);font-size:15px;margin-top:18px;max-width:36ch;text-wrap:pretty} .footer h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);font-weight:500} .footer ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:12px} .footer ul a{font-size:15px;color:var(--fg-2)} .footer .bottom{margin-top:clamp(44px,6vw,64px);padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:13.5px;color:var(--fg-3)} /* ============ HERO MOTION ============ */ .hero .hcv{position:absolute;inset:0;z-index:0;pointer-events:none;mask-image:radial-gradient(ellipse 78% 82% at 72% 34%,#000 20%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse 78% 82% at 72% 34%,#000 20%,transparent 78%);opacity:0;animation:cvIn 2.4s var(--ease) .35s forwards} @keyframes cvIn{to{opacity:1}} .hero .grid-bg{animation:gridDrift 34s linear infinite} @keyframes gridDrift{to{background-position:clamp(60px,7vw,110px) clamp(60px,7vw,110px)}} .hero .halo{animation:breathe 11s ease-in-out infinite} @keyframes breathe{0%,100%{opacity:.75}50%{opacity:1}} .hero .beams{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;mask-image:linear-gradient(to top,transparent,#000 30%,#000 70%,transparent);-webkit-mask-image:linear-gradient(to top,transparent,#000 30%,#000 70%,transparent)} .hero .beams i{position:absolute;bottom:0;width:1px;height:46%;background:linear-gradient(to top,transparent,var(--acc),transparent);opacity:0;animation:rise 9s var(--ease) infinite} .hero .beams i:nth-child(1){left:14%;animation-delay:0s} .hero .beams i:nth-child(2){left:38%;height:62%;animation-delay:1.9s} .hero .beams i:nth-child(3){left:57%;height:38%;animation-delay:3.6s} .hero .beams i:nth-child(4){left:74%;height:70%;animation-delay:5.1s} .hero .beams i:nth-child(5){left:89%;height:50%;animation-delay:7s}@keyframes rise{0%{transform:translateY(60%) scaleY(.3);opacity:0}18%{opacity:.55}70%{opacity:.35}100%{transform:translateY(-110%) scaleY(1);opacity:0}} .hero .sweep{position:absolute;inset:-20% -40%;z-index:0;pointer-events:none;background:linear-gradient(100deg,transparent 38%,var(--halo) 50%,transparent 62%);opacity:.7;animation:sweep 13s var(--ease) infinite} @keyframes sweep{0%{transform:translateX(-38%)}55%{transform:translateX(38%)}100%{transform:translateX(-38%)}} .hero .aurora{position:absolute;z-index:0;width:min(150vw,1500px);aspect-ratio:1;right:-24%;top:-58%;pointer-events:none;opacity:.5;background:conic-gradient(from 0deg,transparent 0 18%,var(--halo) 30%,transparent 46% 68%,color-mix(in srgb,var(--navy) 26%,transparent) 80%,transparent 96%);mask-image:radial-gradient(circle,#000 24%,transparent 66%);-webkit-mask-image:radial-gradient(circle,#000 24%,transparent 66%);animation:spin 58s linear infinite;filter:blur(28px)} @keyframes spin{to{transform:rotate(360deg)}} /* ============ REVEAL ============ */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)} .reveal.in{opacity:1;transform:none} /* ============ MOTION LAYER ============ */ /* scroll progress */ .sprog{position:fixed;top:0;left:0;height:2px;width:0;z-index:70;background:linear-gradient(90deg,var(--sky),var(--acc));transform-origin:left;pointer-events:none} /* masked line reveal (hero) */ .ml{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em} .ml>span{display:block;transform:translateY(112%);transition:transform 1.15s cubic-bezier(.16,1,.3,1) var(--d,0s)} .loaded .ml>span{transform:none} .hup{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)} .loaded .hup{opacity:1;transform:none} .hero .halo{transition:transform .9s cubic-bezier(.2,.7,.2,1)} /* buttons: fill sweep */ .btn{position:relative;overflow:hidden;isolation:isolate} .btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);transition:transform .42s var(--ease)} .btn-acc::before{background:var(--acc-2)} .btn-line::before{background:var(--acc-soft)} .btn:hover::before{transform:none} .btn-acc:hover{background:var(--acc)} /* stats */ .stat .k{transition:transform .45s var(--ease)} .stat:hover .k{transform:translateY(-3px)} /* timeline live pulse */ .timeline li.now::after{content:"";position:absolute;left:-5px;top:2px;width:23px;height:23px;border-radius:50%;border:1px solid var(--acc);animation:pulse 2.8s var(--ease) infinite} @keyframes pulse{0%{transform:scale(.55);opacity:.85}70%{transform:scale(1.3);opacity:0}100%{transform:scale(1.3);opacity:0}} /* industry rows: border draw + hover glide */ .ind::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--acc);transition:width 1.1s var(--ease) .12s;z-index:2} .ind.in::before{width:100%} .ind .core,.ind .metric{transition:transform .5s var(--ease)} .ind:hover .core{transform:translateX(10px)} .ind:hover .metric{transform:translateX(-6px)} .ind .icon{transition:border-color .3s,background .3s,transform .5s var(--ease)} .ind:hover .icon{transform:rotate(-4deg) scale(1.07)} .ind .tags li{transition:border-color .3s,color .3s} .ind:hover .tags li{border-color:var(--line-2);color:var(--fg)} /* carousel logo lift */ .logo{transition:filter .35s var(--ease),opacity .35s var(--ease),background .35s var(--ease),transform .35s var(--ease)} .logo:hover{transform:translateY(-4px)} /* contact link underlines */ .cinfo .val a{border-bottom:1px solid var(--line-2);transition:border-color .2s,color .2s} .cinfo .val a:hover{border-color:var(--acc)} @media (prefers-reduced-motion:reduce){ .reveal,.hup{opacity:1;transform:none;transition:none} .ml>span{transform:none;transition:none} .ind::before{width:100%;transition:none} .carousel .track,.hero .scroll-hint i,.timeline li.now::after{animation:none} .hero .grid-bg,.hero .halo,.hero .beams i,.hero .sweep,.hero .aurora{animation:none} .hero .hcv{opacity:1;animation:none} .ind:hover .core,.ind:hover .metric,.ind:hover .icon,.logo:hover,.stat:hover .k{transform:none} .ind .indbg img,.ind:hover .indbg img{transform:none;transition:none} html{scroll-behavior:auto} } /* ============ RESPONSIVE ============ */ @media (max-width:1080px){ .ind{grid-template-columns:auto 1fr;row-gap:22px} .ind .metric{grid-column:2;text-align:left;min-width:0} .stats .row{grid-template-columns:1fr 1fr} .stat:nth-child(3){border-left:0} .stat:nth-child(n+3){border-top:1px solid var(--line)} .footer .top{grid-template-columns:1.3fr 1fr 1fr} } @media (max-width:900px){ .nav-links,.nav-cta .btn-acc{display:none} .nav-toggle{display:inline-flex} .story .cols,.contact .cols{grid-template-columns:1fr} .footer .top{grid-template-columns:1fr 1fr} .hero .scroll-hint{display:none} .hero{align-items:center;padding:118px 0 clamp(56px,9vw,90px)} .tbtn{width:44px;height:44px} .btn{padding:14px 20px} .timeline p{max-width:none} } @media (max-width:760px){ .story .lead{font-size:clamp(19px,3.4vw,26px)} .companies .shead,.industries .shead{margin-bottom:clamp(24px,5vw,40px)} .cinfo{gap:22px} .wa{width:100%;justify-content:center;margin-top:26px} } @media (max-width:600px){ .ind{grid-template-columns:1fr;padding:30px 0} .ind .num{padding-top:0} .ind .core{grid-template-columns:1fr;gap:18px} .ind .metric{grid-column:1} .ind .icon{width:48px;height:48px} .ind .icon svg{width:23px;height:23px} .ind .core p{font-size:15.5px} .stats .row{grid-template-columns:1fr 1fr} .stat{border-left:0;padding:26px 18px} .stat:nth-child(even){border-left:1px solid var(--line)} .stat:nth-child(n+3){border-top:1px solid var(--line)} .stat .l{margin-top:9px;font-size:13px} .f2{grid-template-columns:1fr} .footer .top{grid-template-columns:1fr;gap:34px} .footer .bottom{flex-direction:column;align-items:flex-start;gap:8px} .footer .blurb{max-width:none} form .btn{justify-self:stretch;justify-content:center} .logo{width:clamp(150px,44vw,200px);height:112px} .carousel::before,.carousel::after{width:40px} .mmenu a{padding:16px 0} } @media (max-width:370px){ .hero h1{font-size:clamp(38px,12vw,52px)} .stats .row{grid-template-columns:1fr} .stat:nth-child(even){border-left:0} .stat+.stat{border-top:1px solid var(--line)} .ind .tags li{font-size:10.5px;padding:5px 9px} .brand .name{font-size:16px} } /* ============ PALETTE: PURPLE (html[data-palette="purple"]) ============ */ html[data-palette="purple"]{ --navy:#3B0F70; --blue:#6D28D9; --sky:#A78BFA; --base:#FCFBFE; --base-2:#F6F3FC; --base-3:#EFE9FA; --line:#E4DCF2; --line-2:#CDBFE6; --fg:#150B26; --fg-2:#5E5177; --fg-3:#87799E; --acc-soft:rgba(109,40,217,.07); --grid-line:rgba(59,15,112,.08); --halo:rgba(167,139,250,.26); --shadow:0 14px 34px -16px rgba(59,15,112,.26); --net:var(--navy); } html[data-palette="purple"][data-theme="dark"]{ --base:#0C0718; --base-2:#150C26; --base-3:#1E1235; --fg:#EFEAF8; --fg-2:#A99CC1; --fg-3:#77689A; --acc:#A78BFA; --acc-2:#C4B5FD; --acc-ink:#120726; --acc-soft:rgba(167,139,250,.14); --halo:rgba(167,139,250,.18); --net:#C4B5FD; } html[data-palette="purple"][data-theme="dark"] .brand .mark i:nth-child(3){background:#C4B5FD} /* ============ PALETTE: BLACK & YELLOW (html[data-palette="amber"]) ============ */ html[data-palette="amber"]{ --navy:#141414; --blue:#9A7100; --sky:#FFC91E; --base:#FCFBF7; --base-2:#F5F2E9; --base-3:#EDE8D8; --line:#E2DCCA; --line-2:#C9C0A5; --fg:#141414; --fg-2:#59564C; --fg-3:#8A8578; --acc:#9A7100; --acc-2:#141414; --acc-ink:#141414; --acc-soft:rgba(255,201,30,.16); --grid-line:rgba(20,20,20,.07); --halo:rgba(255,201,30,.30); --shadow:0 14px 34px -16px rgba(20,20,20,.26); --net:#141414; } html[data-palette="amber"][data-theme="dark"]{ --base:#0A0A0A; --base-2:#121211; --base-3:#1B1A16; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20); --fg:#F5F3EC; --fg-2:#A8A499; --fg-3:#736F64; --acc:#FFC91E; --acc-2:#FFDD6B; --acc-ink:#141414; --acc-soft:rgba(255,201,30,.13); --halo:rgba(255,201,30,.16); --net:#FFC91E; } /* yellow is a fill, not a text colour — buttons carry black ink on yellow */ html[data-palette="amber"] .btn-acc{background:var(--sky);color:#141414} html[data-palette="amber"] .btn-acc::before{background:#141414} html[data-palette="amber"] .btn-acc:hover{background:var(--sky);color:#FFC91E} html[data-palette="amber"] .hero h1 .l2{color:#141414} html[data-palette="amber"] .hero h1 .l2::after{content:"";display:block;width:clamp(120px,22vw,300px);height:10px;background:var(--sky);margin-top:-.06em} html[data-palette="amber"] .brand .name .dot{background:var(--sky)} html[data-palette="amber"] .brand .name span.s,html[data-palette="amber"] .brand .name::after{color:var(--sky);background:var(--sky)} html[data-palette="amber"] .brand .name span.s{background:none} html[data-palette="amber"] .stat::before,html[data-palette="amber"] .ind::before{background:var(--sky)} html[data-palette="amber"] .timeline li.now::before{background:var(--sky);border-color:var(--sky)} html[data-palette="amber"] ::selection{background:var(--sky);color:#141414} html[data-palette="amber"][data-theme="dark"] .btn-acc:hover{color:#141414;background:var(--acc-2)} html[data-palette="amber"][data-theme="dark"] .hero h1 .l2{color:#F5F3EC}