:root{
  --ink:#111111;
  --muted:#8f8f8f;
  --line:rgba(17,17,17,.13);
  --soft:rgba(17,17,17,.045);
  --gold:#c9a64b;
  --blue:#7897ff;
  --ease:cubic-bezier(.22,.8,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#fff;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{cursor:none}
button{font:inherit;color:inherit}
.loader{position:fixed;inset:0;background:#fff;display:grid;place-items:center;z-index:100;transition:opacity .7s var(--ease),visibility .7s}
.loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.windows-spinner{position:relative;width:42px;height:42px;animation:spin 1.2s linear infinite}
.windows-spinner i{position:absolute;width:5px;height:5px;border-radius:50%;background:#a6a6a6;left:50%;top:50%;transform-origin:0 0;opacity:.18}
.windows-spinner i:nth-child(1){transform:rotate(0deg) translate(16px);opacity:1}
.windows-spinner i:nth-child(2){transform:rotate(45deg) translate(16px);opacity:.88}
.windows-spinner i:nth-child(3){transform:rotate(90deg) translate(16px);opacity:.76}
.windows-spinner i:nth-child(4){transform:rotate(135deg) translate(16px);opacity:.64}
.windows-spinner i:nth-child(5){transform:rotate(180deg) translate(16px);opacity:.52}
.windows-spinner i:nth-child(6){transform:rotate(225deg) translate(16px);opacity:.4}
.windows-spinner i:nth-child(7){transform:rotate(270deg) translate(16px);opacity:.28}
.windows-spinner i:nth-child(8){transform:rotate(315deg) translate(16px);opacity:.2}
@keyframes spin{to{transform:rotate(360deg)}}
.site{height:100%;padding:28px 34px 34px;opacity:0;transform:translateY(8px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.site.is-ready{opacity:1;transform:none}
.brand{position:absolute;top:26px;left:34px;z-index:5;width:min(180px,18vw)}
.brand img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.tiles{height:100%;display:grid;grid-template-columns:1.05fr 1.35fr 1.35fr 1fr 1.25fr;gap:12px;padding-top:74px}
.tile{position:relative;overflow:hidden;border:1px solid var(--line);background:linear-gradient(145deg,#fff,#fafafa);text-align:left;padding:22px;transition:transform .5s var(--ease),background .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);outline:none}
.tile:hover,.tile:focus-visible{transform:translateY(-5px);background:#f8f8f8;border-color:rgba(17,17,17,.25);box-shadow:0 18px 50px rgba(0,0,0,.06)}
.tile-number{position:absolute;top:20px;left:21px;font-size:10px;letter-spacing:.18em;color:#a0a0a0}
.tile-title{display:block;font-size:clamp(15px,1.15vw,19px);letter-spacing:.11em;font-weight:500;line-height:1.2;max-width:230px}
.tile-os .tile-title{position:absolute;left:22px;bottom:52px}
.tile-hint{position:absolute;left:22px;bottom:23px;font-size:8px;letter-spacing:.17em;color:#9a9a9a}
.tile-arrow{position:absolute;right:20px;bottom:17px;font-size:20px;font-weight:300;transition:transform .35s var(--ease)}
.tile-os:hover .tile-arrow{transform:translate(3px,-3px)}
.tile-visual,.tile-audio{display:flex;align-items:flex-end}
.tile-visual .tile-title,.tile-audio .tile-title{position:absolute;left:22px;bottom:24px;z-index:2;transition:opacity .35s var(--ease),transform .5s var(--ease)}
.brand-cloud{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:11px;padding:40px 28px;opacity:0;transform:scale(.94);transition:opacity .55s var(--ease),transform .65s var(--ease);filter:grayscale(1)}
.brand-cloud span{font-weight:700;font-size:clamp(12px,1.15vw,19px);letter-spacing:.04em;color:#777;border:1px solid rgba(17,17,17,.13);padding:10px 13px;background:rgba(255,255,255,.6);box-shadow:0 8px 22px rgba(0,0,0,.04)}
.tile-visual:hover .brand-cloud,.tile-visual:focus .brand-cloud,.tile-audio:hover .brand-cloud,.tile-audio:focus .brand-cloud{opacity:.9;transform:scale(1)}
.tile-visual:hover .tile-title,.tile-audio:hover .tile-title{opacity:.08;transform:translateY(8px)}
.tile-about{background:#fff}
.tile-contact{background:#f4f4f4;display:flex;align-items:flex-start}
.contact-copy{position:absolute;left:22px;bottom:25px;z-index:3}
.contact-sub{display:block;font-size:8px;letter-spacing:.18em;color:#888;margin-top:8px}
.executive-wrap{position:absolute;right:-10px;bottom:-3px;width:84%;height:82%;opacity:.88;filter:grayscale(1);transition:transform .6s var(--ease),opacity .6s var(--ease)}
.executive-wrap img{width:100%;height:100%;object-fit:contain;object-position:right bottom}
.tile-contact:hover .executive-wrap{transform:translateX(-5px) scale(1.03);opacity:1}
.cursor-ring{position:fixed;left:0;top:0;width:25px;height:25px;border:1px solid rgba(17,17,17,.5);border-radius:50%;pointer-events:none;z-index:200;transform:translate(-50%,-50%);transition:width .18s,height .18s,border-color .18s,background .18s}
.cursor-ring span{position:absolute;left:50%;top:50%;width:3px;height:3px;background:#111;border-radius:50%;transform:translate(-50%,-50%)}
.cursor-ring.is-hover{width:48px;height:48px;border-color:rgba(17,17,17,.22);background:rgba(255,255,255,.35);backdrop-filter:blur(2px)}
.cursor-ring.is-hover span{width:4px;height:4px}
.os-modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center}
.os-modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(255,255,255,.78);backdrop-filter:blur(14px)}
.modal-card{position:relative;width:min(780px,calc(100vw - 40px));padding:38px;background:#fff;border:1px solid rgba(17,17,17,.15);box-shadow:0 30px 90px rgba(0,0,0,.12);animation:modalIn .55s var(--ease)}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.modal-close{position:absolute;right:18px;top:13px;border:0;background:transparent;font-size:28px;font-weight:200;cursor:none}
.modal-kicker{font-size:9px;letter-spacing:.2em;color:#999}
.modal-card h1{font-size:clamp(28px,4vw,48px);font-weight:400;letter-spacing:-.035em;margin:12px 0 30px}
.os-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.os-option{border:1px solid var(--line);background:#fff;text-align:left;padding:20px;min-height:140px;cursor:none;transition:all .35s var(--ease)}
.os-option:hover{background:#111;color:#fff;transform:translateY(-4px)}
.os-option b{display:block;font-size:9px;color:#999;margin-bottom:35px}
.os-option span{display:block;font-size:21px;font-weight:500}
.os-option small{display:block;margin-top:8px;font-size:8px;letter-spacing:.14em;opacity:.55}
@media (max-width:900px){
  body{overflow:auto;cursor:auto}.site{height:auto;min-height:100%;padding:22px}.brand{left:22px;top:20px;width:150px}.tiles{padding-top:92px;height:auto;min-height:calc(100vh - 92px);grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,minmax(220px,1fr));gap:10px}.tile-contact{grid-column:1/-1}.cursor-ring{display:none}.brand-cloud{opacity:.75;transform:none}.tile-visual .tile-title,.tile-audio .tile-title{opacity:1}.os-options{grid-template-columns:1fr}.modal-card{padding:28px}.os-option{min-height:95px}.os-option b{margin-bottom:14px}}
@media (max-width:560px){.tiles{grid-template-columns:1fr;grid-template-rows:none}.tile-contact{grid-column:auto;min-height:300px}.tile{min-height:210px}.brand-cloud{padding:55px 18px 70px}.executive-wrap{width:70%}}