:root{--navy:#031e42;--green:#005c41;--violet:#2b002c;--electric:#3e3eff;--blue:#6b90c2;--mint:#6edbba;--pink:#a955ab;--muted:#9aaec6;--line:rgba(158,196,223,.2)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#031e42;color:#f6fbff;font-family:Montserrat,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.site-shell{max-width:1600px;margin:auto;min-height:100vh;padding:0 5.2%}.header{height:94px;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:48px}.brand{font-weight:800;font-size:27px;letter-spacing:-1.4px;white-space:nowrap}.brand-icon{display:inline-flex;width:33px;height:33px;border:2px solid var(--mint);border-radius:50%;align-items:center;justify-content:center;color:var(--mint);font-size:24px;margin-right:10px}.brand-period,.mint{color:var(--mint)}.nav{display:flex;gap:32px;margin:auto}.nav a{font-size:11px;font-weight:800;letter-spacing:1.3px;color:#a9bcd3;transition:color .2s}.nav a:hover,.nav a.active{color:var(--mint)}.header-note{font-size:9px;font-weight:700;letter-spacing:1.4px;color:var(--muted);white-space:nowrap}.menu-toggle{display:none;background:transparent;border:0;color:white;font-size:24px}.hero{min-height:550px;position:relative;padding:100px 0 80px;overflow:hidden}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2.2px;color:var(--mint);margin-bottom:23px}.pulse-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mint);margin-right:8px;box-shadow:0 0 16px var(--mint)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(44px,6.6vw,94px);line-height:1.04;letter-spacing:-4px;font-weight:800;margin-bottom:30px;position:relative;z-index:1}.gradient-text{background:linear-gradient(105deg,#6edbba 4%,#6b90c2 48%,#a955ab 74%,#3e3eff);background-clip:text;-webkit-background-clip:text;color:transparent}.lead{max-width:550px;color:#b8c9dd;font-size:15px;line-height:1.9;font-weight:500;position:relative;z-index:1}.actions{display:flex;gap:20px;align-items:center;margin-top:30px;flex-wrap:wrap;position:relative;z-index:1}.btn{padding:16px 22px;font-size:11px;font-weight:800;letter-spacing:1px;border-radius:3px}.btn.primary{background:var(--mint);color:#031e42}.btn.ghost{border:1px solid var(--line);color:white}.btn:hover{transform:translateY(-2px)}.hero-orbit{position:absolute;width:430px;height:430px;right:0;top:55px;opacity:.72}.orbit{position:absolute;border:1px solid rgba(110,219,186,.3);border-radius:50%;inset:10px}.orbit-one{transform:rotate(-34deg) scaleY(.55)}.orbit-two{transform:rotate(40deg) scaleY(.65);border-color:rgba(169,85,171,.45)}.orbit-core{position:absolute;inset:115px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:145px;font-weight:800;color:var(--mint);background:radial-gradient(circle,#084c60,#031e42 72%);box-shadow:0 0 110px #3e3eff33}.orbit-core span{position:absolute;font-size:45px;color:#a955ab;right:34px;top:55px}.intro-strip{display:flex;justify-content:space-between;gap:16px;padding:25px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:10px;letter-spacing:1.6px;font-weight:800;color:#8fa9c3}.page-hero{padding:85px 0 65px}.page-hero h1{font-size:clamp(40px,5.7vw,76px)}.info-grid,.service-grid{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);margin-bottom:70px}.info-card,.service-card{border:1px solid var(--line);background:linear-gradient(135deg,rgba(110,219,186,.05),rgba(62,62,255,.04));padding:35px}.card-number{font-size:10px;letter-spacing:2px;color:var(--mint);font-weight:800}.info-card h3,.service-card h3{font-size:19px;line-height:1.35;margin:25px 0 14px}.info-card p,.service-card p,.contact-copy p{color:#9fb5cd;font-size:13px;line-height:1.9;max-width:460px}.service-grid{grid-template-columns:repeat(3,1fr)}.service-icon{font-size:42px;color:var(--mint)}.game-section{padding:60px 0 85px}.game-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}.game-heading .eyebrow{margin-bottom:12px}.game-heading h2{font-size:25px;letter-spacing:-.7px;margin-bottom:8px}.game-heading p{color:var(--muted);font-size:12px;margin:0;line-height:1.6}.control-hint{border:1px solid var(--line);border-radius:30px;padding:12px 17px;color:var(--mint);font-size:10px;font-weight:800;letter-spacing:1px;text-align:center}.game-frame{border:1px solid #6b90c250;background:#061b36;overflow:hidden}.game-frame canvas{display:block;width:100%;height:auto;max-height:400px;touch-action:none;cursor:pointer}.game-bottom{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:13px 18px;font-size:10px;letter-spacing:1.3px;font-weight:700;color:var(--muted)}.reset-game{background:transparent;color:var(--mint);border:0;cursor:pointer;font-size:10px;font-weight:800;letter-spacing:1px}.reset-game:hover{color:white}.contact-hero{padding-bottom:65px}.placeholder-warning{font-size:11px;color:var(--muted)}.contact-lower{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:start;padding:40px 0 100px;border-top:1px solid var(--line)}.contact-copy h2{font-size:30px;line-height:1.25}.dart-panel .game-heading h2{font-size:22px}.footer{border-top:1px solid var(--line);padding:30px 0 45px;display:flex;justify-content:space-between;gap:20px;font-size:10px;font-weight:800;letter-spacing:1.3px;color:#91a8c2}@media(max-width:900px){.header{gap:20px}.header-note{display:none}.hero-orbit{opacity:.22;right:-150px}.contact-lower{grid-template-columns:1fr}.service-grid{grid-template-columns:1fr}}@media(max-width:620px){.site-shell{padding:0 5%}.header{height:75px;justify-content:space-between}.menu-toggle{display:block}.nav{display:none;position:absolute;top:74px;left:0;right:0;background:#031e42;z-index:30;flex-direction:column;padding:26px;gap:24px;border-bottom:1px solid var(--line)}.nav.open{display:flex}.hero{min-height:470px;padding:80px 0 40px}.hero-orbit{right:-260px;top:80px}.page-hero{padding:60px 0 45px}h1{letter-spacing:-2px}.intro-strip{flex-direction:column}.info-grid{grid-template-columns:1fr}.game-heading{display:block}.control-hint{display:inline-block;margin-top:16px}.game-section{padding:45px 0 65px}.footer{flex-direction:column}.info-card,.service-card{padding:24px}}

/* Arcade v2: viewport-locked layout, with low-key games integrated into the bottom edge. */
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
.site-shell{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.header{height:72px;min-height:72px;flex-shrink:0}
.site-shell main{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;overflow:hidden}
.footer{flex-shrink:0;padding:10px 0 12px;font-size:9px}
.hero{min-height:0;flex:1;padding:clamp(20px,6vh,90px) 0 5px;overflow:hidden}
.hero h1{font-size:clamp(33px,min(6.2vw,9vh),88px)}
.hero-orbit{width:min(35vw,42vh);height:min(35vw,42vh);top:6%;right:2%}
.orbit-core{inset:26%;font-size:clamp(40px,9vw,100px)}
.orbit-core span{font-size:26px;right:10px;top:25px}
.page-hero{flex:0 1 auto;padding:clamp(16px,5vh,56px) 0 18px}
.page-hero h1{font-size:clamp(32px,min(5.4vw,7.5vh),73px);margin-bottom:12px}
.page-hero .eyebrow,.hero .eyebrow{margin-bottom:12px}
.lead{font-size:clamp(11px,1.15vw,14px);line-height:1.55;margin-bottom:12px}
.actions{margin-top:16px}
.btn{padding:12px 16px}
.intro-strip{padding:12px 0;flex-shrink:0}
.info-grid,.service-grid{margin-bottom:0;min-height:0;flex:1;align-content:start}
.info-card,.service-card{padding:clamp(13px,2.2vh,26px)}
.info-card h3,.service-card h3{margin:12px 0 8px;font-size:clamp(13px,1.3vw,19px)}
.info-card p,.service-card p{font-size:clamp(10px,1vw,13px);line-height:1.5;margin-bottom:0}
.service-icon{font-size:26px}
.game-dock{position:relative;flex-shrink:0;height:clamp(100px,21vh,185px);border-top:1px solid rgba(110,219,186,.23);margin-top:auto;overflow:hidden;background:linear-gradient(180deg,transparent,rgba(4,22,45,.28));}
.dock-label{height:27px;display:flex;gap:20px;align-items:center;justify-content:flex-start;font-size:9px;font-weight:800;letter-spacing:1.2px;color:#8caac8}
.dock-label span:first-child{color:var(--mint)}
.dock-label .reset-game{margin-left:auto;font-size:16px}
.game-dock canvas{display:block;width:100%;height:calc(100% - 27px);touch-action:none;cursor:pointer;outline:none}
.game-dock canvas:focus-visible{outline:2px solid var(--mint);outline-offset:-2px}
.contact-hero{flex:0 1 auto;padding-bottom:12px}
.contact-lower{flex:1;min-height:0;padding:12px 0;gap:25px;grid-template-columns:1fr minmax(270px,420px);align-items:center}
.contact-copy h2{font-size:clamp(17px,2vw,30px)}
.dart-panel{min-height:0;max-height:100%;display:flex;flex-direction:column}
.dart-panel .game-heading{margin-bottom:8px}
.dart-panel .game-heading .eyebrow{margin-bottom:3px}
.dart-panel .game-heading h2{font-size:16px;margin:0}
.dart-panel .game-heading p{font-size:10px}
.dart-panel .game-frame{min-height:0}
.dart-panel canvas{max-height:min(40vh,310px)}
.dart-panel .game-bottom{padding:7px 10px}
@media(max-width:900px){.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.contact-lower{grid-template-columns:1fr minmax(230px,390px)}.hero-orbit{right:0;opacity:.3}}
@media(max-width:620px){.site-shell{padding:0 4%}.header{height:57px;min-height:57px}.nav{top:57px}.brand{font-size:21px}.hero{padding:clamp(14px,4vh,35px) 0 0}.hero h1,.page-hero h1{font-size:clamp(27px,9vw,45px);letter-spacing:-1.5px}.hero-orbit{right:-35%;top:18%;width:65vw;height:65vw;opacity:.16}.lead{font-size:11px;line-height:1.45;max-width:94%}.eyebrow{font-size:9px}.page-hero{padding:clamp(12px,3vh,25px) 0 8px}.intro-strip{padding:8px 0;flex-direction:row;flex-wrap:wrap;font-size:8px;gap:6px}.info-grid{grid-template-columns:1fr;gap:8px}.service-grid{grid-template-columns:1fr;gap:7px}.info-card,.service-card{padding:10px 13px}.info-card h3,.service-card h3{font-size:12px;margin:5px 0}.info-card p,.service-card p{font-size:10px;line-height:1.35}.service-icon{display:none}.game-dock{height:clamp(100px,22vh,155px)}.dock-label{font-size:8px;gap:8px}.footer{font-size:8px;padding:7px 0}.footer span:last-child{display:none}.contact-lower{grid-template-columns:1fr;gap:6px;padding:8px 0}.contact-copy{display:none}.dart-panel .game-heading p{display:none}.dart-panel canvas{max-height:min(40vh,250px)}.contact-hero{padding-bottom:6px}}
@media(max-height:650px){.header{height:52px;min-height:52px}.footer{padding:5px 0}.hero{padding-top:15px}.page-hero{padding:12px 0 8px}.game-dock{height:clamp(86px,22vh,140px)}.info-card,.service-card{padding:9px}.info-card p,.service-card p{line-height:1.25}.hero h1,.page-hero h1{font-size:clamp(25px,6vh,48px);margin-bottom:8px}.lead{line-height:1.3}.btn{padding:8px 12px}}

/* v3: Preserve the canvas native 4:1 game aspect ratio; never stretch it. */
.game-dock{display:flex;flex-direction:column;align-items:flex-start}
.game-dock .dock-label{width:100%;flex:none}
.game-dock canvas{width:auto!important;height:auto!important;max-width:100%;max-height:calc(100% - 27px);aspect-ratio:4 / 1;object-fit:contain;align-self:center;flex:none}
/* Darts remains a full-size side game, rather than a compressed bottom strip. */
.contact-lower{grid-template-columns:minmax(220px,1fr) minmax(420px,660px);gap:24px}
.dart-panel{width:100%;max-height:none}
.dart-panel .game-frame{width:100%;flex:none}
.dart-panel .game-frame canvas{width:100%;height:auto;max-height:none;aspect-ratio:5 / 2;object-fit:contain}
@media(max-width:900px){.contact-lower{grid-template-columns:minmax(160px,1fr) minmax(360px,60%);gap:12px}}
@media(max-width:620px){.contact-lower{display:flex;flex-direction:column;justify-content:center}.dart-panel{width:min(100%,600px)}.dart-panel .game-frame canvas{max-height:min(48vh,320px);width:100%;height:auto}}

/* v4: supplied Loomiq visual identity */
body{background:#031e42 url('/images/loomiq_bg_only.png') center center / cover no-repeat fixed}
.site-shell{background:transparent}
.brand{display:flex;align-items:center;line-height:1}
.brand-logo{display:block;width:auto;height:45px;max-width:180px;object-fit:contain}
/* Contact form and tighter 800x400 darts layout */
.contact-hero{padding-top:clamp(12px,3.5vh,38px);padding-bottom:8px}
.contact-hero h1{font-size:clamp(30px,min(4.7vw,6.5vh),65px);margin-bottom:8px}
.contact-hero .lead{margin-bottom:0}
.contact-lower{grid-template-columns:minmax(270px,1fr) minmax(390px,570px);gap:clamp(15px,3vw,45px);align-items:center;padding:10px 0 20px}
.contact-form-panel{max-width:520px;width:100%;padding:clamp(14px,2vw,26px);border:1px solid rgba(110,219,186,.25);background:rgba(3,20,44,.6);backdrop-filter:blur(10px);border-radius:8px;min-height:0}
.contact-form-panel .eyebrow{margin-bottom:8px}
.contact-form-panel h2{font-size:clamp(18px,2vw,29px);margin-bottom:12px}
.contact-form{display:flex;flex-direction:column;gap:7px}
.contact-form label{font-size:9px;letter-spacing:1.3px;font-weight:800;color:var(--mint)}
.contact-form input,.contact-form textarea{width:100%;min-width:0;border:1px solid rgba(158,196,223,.3);background:rgba(2,14,34,.68);border-radius:4px;color:white;font:500 12px Montserrat,Arial,sans-serif;padding:10px 12px;outline:none}
.contact-form textarea{resize:none;min-height:66px}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--mint)}
.contact-form .btn{align-self:flex-start;cursor:pointer;margin-top:5px}
.form-note{font-size:9px;line-height:1.5;color:#b5c7d8;margin:2px 0 0}
.dart-panel{max-width:570px;width:100%;justify-self:end}
.dart-panel .game-frame{background:rgba(4,21,44,.74)}
.dart-panel .game-frame canvas{width:100%;height:auto;aspect-ratio:2/1;max-height:none}
@media(max-width:900px){.contact-lower{grid-template-columns:minmax(220px,1fr) minmax(330px,53%);gap:12px}.brand-logo{height:38px}}
@media(max-width:620px){.brand-logo{height:34px;max-width:140px}.contact-hero{padding-top:12px}.contact-hero h1{font-size:clamp(24px,7vw,40px)}.contact-hero .lead{font-size:10px}.contact-lower{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;padding:5px 0;overflow:hidden}.contact-form-panel{display:block;max-width:none;padding:10px 12px}.contact-form-panel h2{font-size:17px;margin-bottom:6px}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px}.contact-form label{font-size:8px}.contact-form input{padding:7px 8px;font-size:11px}.contact-form label[for="contactMessage"],.contact-form textarea,.contact-form .btn,.contact-form .form-note{grid-column:1/-1}.contact-form label[for="contactName"]{grid-column:1;grid-row:1}.contact-form label[for="contactEmail"]{grid-column:2;grid-row:1}.contact-form input#contactName{grid-column:1;grid-row:2}.contact-form input#contactEmail{grid-column:2;grid-row:2}.contact-form textarea{min-height:43px;height:43px;padding:6px 8px}.contact-form .btn{padding:7px 12px;font-size:9px;margin:0}.form-note{font-size:8px}.dart-panel{width:100%;max-width:520px;margin:auto}.dart-panel .game-heading{margin-bottom:4px}.dart-panel .game-frame canvas{max-height:min(31vh,230px)}}
@media(max-height:730px) and (min-width:621px){.contact-form-panel{padding:12px 16px}.contact-form{gap:4px}.contact-form input,.contact-form textarea{padding:7px 10px}.contact-form textarea{min-height:50px;height:50px}.contact-hero{padding-top:10px}.contact-hero h1{font-size:clamp(28px,5.6vh,50px)}}

/* v6: centred homepage identity */
.hero-home{display:flex;justify-content:center;align-items:flex-start;text-align:center;padding:clamp(12px,3.5vh,38px) 0 8px}
.home-branding{display:flex;flex-direction:column;align-items:center;width:100%;max-width:970px;margin:0 auto;min-height:0}
.home-title-logo{display:block;width:clamp(210px,34vw,430px);height:auto;max-height:clamp(65px,17vh,155px);object-fit:contain;margin:0 auto clamp(10px,2vh,22px)}
.hero-home h1{font-size:clamp(29px,min(5vw,7vh),70px);letter-spacing:-2.5px;line-height:1.08;margin-bottom:clamp(9px,2vh,20px)}
.hero-home .eyebrow{margin-bottom:clamp(8px,1.5vh,18px)}
.hero-home .lead{max-width:740px;font-size:clamp(11px,1.1vw,15px);line-height:1.65;margin:0 auto}
.hero-home .actions{justify-content:center;margin-top:clamp(10px,2vh,24px)}
@media(max-width:620px){.hero-home{padding-top:clamp(12px,3vh,25px)}.home-title-logo{width:min(68vw,310px);max-height:15vh;margin-bottom:12px}.hero-home h1{font-size:clamp(25px,7.5vw,39px);letter-spacing:-1px}.hero-home .lead{font-size:11px;line-height:1.45}.hero-home .actions{gap:8px}.hero-home .btn{padding:9px 10px;font-size:9px}}
@media(max-height:650px){.home-title-logo{max-height:12vh;width:auto;max-width:55vw;margin-bottom:7px}.hero-home h1{font-size:clamp(23px,5vh,45px);margin-bottom:7px}.hero-home .lead{line-height:1.3}.hero-home .actions{margin-top:8px}}