:root{color-scheme:dark;--bg:#070809;--panel:#0d0f11;--text:#f3f3f1;--muted:#92969d;--line:rgba(255,255,255,.12);--max:1280px;--accent:#d9dde5}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}.page-noise{position:fixed;inset:0;z-index:10;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.site-header{height:86px;max-width:var(--max);margin:auto;padding:0 42px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:20}.brand{display:flex;align-items:center;gap:13px;font-family:'Manrope',sans-serif;font-size:17px;font-weight:600;letter-spacing:.23em}.brand-mark{display:block;width:23px;height:23px;flex:0 0 23px;filter:invert(1);object-fit:contain}.nav{display:flex;align-items:center;gap:42px;font-size:12px;color:#b9bbc0}.nav a{transition:color .2s}.nav a:hover,.quiet-link:hover{color:#fff}.nav-contact{border:1px solid #555960;border-radius:99px;padding:12px 18px;color:#fff}.nav-contact span,.button span{margin-left:16px}.menu-toggle{display:none}
.hero{max-width:var(--max);min-height:790px;margin:auto;padding:145px 42px 28px;position:relative;display:grid;grid-template-columns:1.04fr .96fr;align-items:center;isolation:isolate}.hero-copy-wrap{position:relative;z-index:2;padding-bottom:62px}.eyebrow{font-size:9px;letter-spacing:.25em;font-weight:700;color:#a6aab2;margin:0 0 28px}.eyebrow-dot,.status-light{display:inline-block;width:6px;height:6px;border-radius:50%;background:#dfe3eb;box-shadow:0 0 12px #cbd4e8;margin-right:10px;vertical-align:1px}.hero h1,.manifesto h2,.principles-heading h2,.studio h2,.contact h2{font-family:'Manrope',sans-serif;letter-spacing:-.075em;font-weight:400}.hero h1{font-size:clamp(62px,7vw,104px);line-height:.98;margin:0}.hero h1 span,.manifesto h2 em,.principles-heading h2 em,.studio h2 em,.contact h2 em{font-style:normal;color:#858b96}.hero-copy{max-width:455px;color:#a9adb5;font-size:15px;line-height:1.9;margin:30px 0 32px}.hero-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;border-radius:99px;padding:15px 21px;font-size:12px;font-weight:600;transition:transform .25s,background .25s,color .25s}.button:hover{transform:translateY(-2px)}.button-light{background:#f2f2ef;color:#090a0c}.button-light:hover{background:#d9dbe0}.quiet-link{font-size:12px;color:#b9bbc0}.quiet-link span{margin-left:9px}.hero-index{display:flex;align-items:center;gap:13px;position:absolute;bottom:-96px;left:0;color:#777d87;font-size:9px;letter-spacing:.2em}.hero-index span:first-child{color:#f3f3f1}.hero-index i{width:48px;height:1px;background:#626770}
.hero-visual{height:570px;position:relative;display:grid;place-items:center;perspective:1100px;transform:translate(20px,-14px)}.visual-halo{position:absolute;width:75%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(117,130,158,.18),rgba(55,61,74,.06) 43%,transparent 70%);filter:blur(20px)}.core-shadow{position:absolute;width:310px;height:82px;bottom:86px;border-radius:50%;background:rgba(0,0,0,.85);filter:blur(28px);transform:rotateX(70deg)}.core-object{width:min(330px,64vw);aspect-ratio:1;position:relative;border-radius:37% 43% 39% 45%;transform:rotate(-13deg) rotateY(-19deg);background:linear-gradient(137deg,#3b4049 0%,#171a20 19%,#070809 49%,#242932 72%,#090a0c 100%);box-shadow:inset 2px 2px 2px rgba(255,255,255,.38),inset -12px -18px 35px rgba(0,0,0,.9),inset 8px 9px 25px rgba(190,203,230,.11),0 35px 75px rgba(0,0,0,.8),0 0 80px rgba(129,145,177,.1);animation:levitate 8s ease-in-out infinite;overflow:hidden}.core-object:before{content:"";position:absolute;inset:3px;border-radius:inherit;border:1px solid rgba(255,255,255,.22);background:linear-gradient(145deg,rgba(255,255,255,.13),transparent 28%,transparent 68%,rgba(255,255,255,.06));z-index:3;pointer-events:none}.core-glass{position:absolute;inset:0;background:radial-gradient(ellipse at 25% 15%,rgba(255,255,255,.27),transparent 27%),radial-gradient(ellipse at 80% 82%,rgba(125,145,181,.18),transparent 34%);mix-blend-mode:screen}.core-inner-glow{position:absolute;width:70%;height:70%;left:15%;top:15%;border-radius:50%;background:radial-gradient(ellipse,rgba(220,228,244,.13),transparent 68%);filter:blur(18px)}.core-mark{position:absolute;width:51%;height:51%;left:24.5%;top:24.5%;filter:none drop-shadow(0 0 12px rgba(255,255,255,.3));opacity:.95;transform:rotate(13deg);z-index:2}.core-reflection{position:absolute;top:-20%;left:15%;width:22%;height:150%;transform:rotate(32deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);filter:blur(10px)}.orbit{position:absolute;border:1px solid rgba(202,211,228,.17);border-radius:50%;pointer-events:none}.orbit-one{width:110%;height:39%;transform:rotate(-28deg)}.orbit-two{width:104%;height:58%;transform:rotate(55deg);border-color:rgba(202,211,228,.1)}.orbit-three{width:76%;height:112%;transform:rotate(37deg);border-color:rgba(202,211,228,.09)}.visual-caption{position:absolute;color:#737985;font-size:8px;letter-spacing:.24em}.caption-top{top:70px;right:13%}.caption-bottom{bottom:57px;left:12%}.visual-cross{position:absolute;color:#aeb6c6;font-size:15px;opacity:.65}.cross-a{top:22%;left:17%}.cross-b{right:15%;bottom:23%}.hero-bottom{position:absolute;left:42px;right:42px;bottom:26px;display:flex;justify-content:space-between;color:#737984;font-size:8px;letter-spacing:.2em}
.section{max-width:var(--max);margin:auto;padding:145px 42px}.manifesto{border-top:1px solid var(--line)}.section-kicker{display:flex;gap:18px;color:#8a909a;font-size:9px;letter-spacing:.22em}.section-kicker span:first-child{color:#f3f3f1}.manifesto-content{display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:end;margin-top:68px}.manifesto h2{font-size:clamp(48px,6.5vw,88px);line-height:1.05;margin:0}.manifesto-aside{padding:0 5px 8px;max-width:390px}.aside-rule{display:block;width:44px;height:1px;background:#d5d9e0;margin-bottom:24px}.manifesto-aside p,.studio-copy p{color:#a4a9b2;font-size:14px;line-height:2;margin:0}.aside-note{display:block;color:#727984;font-size:8px;letter-spacing:.22em;margin-top:35px}
.interlude{height:390px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 50% 50%,#171b22 0%,#090a0c 60%)}.interlude-lines{position:absolute;inset:-35% -10%;opacity:.45;background:repeating-radial-gradient(ellipse at 50% 50%,transparent 0 31px,rgba(211,221,240,.13) 32px,transparent 33px 44px);transform:rotate(-9deg);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}.interlude>p{position:relative;z-index:1;font-family:'Manrope',sans-serif;font-size:clamp(26px,4.5vw,54px);letter-spacing:-.045em;line-height:1.15}.interlude>p span{color:#858b96}.interlude-mark{position:absolute;right:8%;bottom:34px;opacity:.22}.interlude-mark img{width:35px;filter:none}
.principles{padding-top:130px}.principles-heading{display:flex;justify-content:space-between;align-items:end;margin-top:55px;gap:40px}.principles-heading h2,.studio h2{font-size:clamp(46px,6vw,76px);line-height:1.03;margin:0}.principles-heading>p{max-width:270px;color:#999fa8;font-size:13px;line-height:1.8;margin:0 0 8px}.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:70px}.principle-card{min-height:310px;padding:22px 22px 26px;border:1px solid rgba(255,255,255,.11);background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008));position:relative;display:flex;flex-direction:column;transition:transform .3s,border-color .3s}.principle-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.28)}.card-top{display:flex;justify-content:space-between;color:#858b95;font-size:8px;letter-spacing:.2em}.card-symbol{font-size:21px;color:#d9dde5}.principle-card h3{font-family:'Manrope',sans-serif;font-weight:400;font-size:34px;letter-spacing:-.055em;line-height:1.08;margin:48px 0 14px}.principle-card p{color:#9da2ab;font-size:12px;line-height:1.8;max-width:280px;margin:0 0 28px}.card-line{height:1px;width:100%;margin-top:auto;background:linear-gradient(90deg,#bfc7d6,transparent 70%);opacity:.45}
.studio{border-top:1px solid var(--line);padding-top:120px;padding-bottom:145px}.studio-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:90px;align-items:end;margin-top:62px}.studio h2{font-size:clamp(50px,6.2vw,82px)}.studio-copy{max-width:430px}.studio-copy p+p{margin-top:18px}.studio-status{display:inline-flex;align-items:center;margin-top:34px;border:1px solid rgba(255,255,255,.16);padding:12px 15px;border-radius:99px;color:#c5c9d0;font-size:8px;letter-spacing:.17em}.status-light{width:5px;height:5px;margin-right:10px;background:#c9d7c9;box-shadow:0 0 10px #c9d7c9}
.contact{min-height:620px;position:relative;overflow:hidden;display:grid;place-items:center;text-align:center;border-top:1px solid var(--line);background:radial-gradient(ellipse at 50% 100%,#20242c 0%,#0b0d10 58%)}.contact-orb{position:absolute;width:600px;height:600px;border-radius:50%;top:42%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 40% 35%,rgba(186,198,220,.12),rgba(80,91,112,.035) 40%,transparent 68%);filter:blur(10px)}.contact-content{position:relative;z-index:1;padding:90px 24px}.contact-mark{width:48px;height:48px;filter:none;margin-bottom:35px}.contact .eyebrow{margin-bottom:18px}.contact h2{font-size:clamp(58px,7vw,88px);line-height:.98;margin:0}.contact-content>p:not(.eyebrow){font-size:13px;color:#a5aab3;margin:23px 0 28px}.button-outline{border:1px solid #676d78;color:#fff}.button-outline:hover{background:#f2f2ef;color:#090a0c}.contact-coordinate{position:absolute;right:42px;bottom:32px;color:#747b86;font-size:8px;letter-spacing:.18em}
.footer{max-width:var(--max);margin:auto;min-height:105px;padding:24px 42px;display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-brand{font-size:13px}.footer-brand .brand-mark{width:23px;height:23px}.footer-note,.copyright{font-size:10px;color:#858b95}.copyright{letter-spacing:.08em}
@keyframes levitate{0%,100%{transform:translateY(0) rotate(-13deg) rotateY(-19deg)}50%{transform:translateY(-15px) rotate(-9deg) rotateY(-12deg)}}
@media(max-width:850px){.site-header{padding:0 25px}.hero{padding-left:25px;padding-right:25px;grid-template-columns:1fr 1fr;min-height:720px}.hero h1{font-size:clamp(55px,8vw,78px)}.hero-visual{transform:translate(10px,0);height:490px}.core-object{width:min(280px,62vw)}.section{padding-left:25px;padding-right:25px}.manifesto-content{gap:35px}.studio-grid{gap:45px}.hero-bottom{left:25px;right:25px}.footer{padding-left:25px;padding-right:25px}}
@media(max-width:650px){html{scroll-padding-top:72px}.site-header{height:72px;padding:0 20px}.brand{font-size:15px;gap:10px}.brand-mark{width:26px;height:26px}.menu-toggle{display:flex;width:38px;height:38px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:transparent;align-items:center;justify-content:center;flex-direction:column;gap:5px}.menu-toggle span{width:13px;height:1px;background:#fff;transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}.nav{display:none;position:absolute;top:71px;left:0;right:0;padding:24px 21px 28px;background:#0d0f11;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:24px}.nav.open{display:flex}.hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:94px 22px 58px}.hero-copy-wrap{padding:0}.eyebrow{font-size:8px;margin-bottom:24px}.hero h1{font-size:clamp(51px,13vw,76px)}.hero-copy{font-size:13px;line-height:1.85;margin:24px 0}.hero-actions{gap:20px}.button{padding:14px 18px;font-size:11px}.quiet-link{font-size:11px}.hero-index{display:none}.hero-visual{height:390px;margin-top:25px;transform:none}.core-object{width:245px}.core-shadow{bottom:48px;width:245px}.caption-top{top:32px;right:7%}.caption-bottom{bottom:24px;left:6%}.hero-bottom{position:static;margin-top:4px;font-size:7px;letter-spacing:.13em;gap:12px}.section{padding:88px 22px}.section-kicker{font-size:8px}.manifesto-content{grid-template-columns:1fr;gap:32px;margin-top:46px}.manifesto h2{font-size:clamp(43px,11vw,62px)}.manifesto-aside{padding:0;max-width:440px}.manifesto-aside p,.studio-copy p{font-size:13px}.interlude{height:290px}.interlude>p{font-size:clamp(25px,7vw,38px)}.principles{padding-top:88px}.principles-heading{display:block;margin-top:42px}.principles-heading h2,.studio h2{font-size:clamp(43px,10vw,61px)}.principles-heading>p{margin-top:22px}.principle-grid{grid-template-columns:1fr;gap:12px;margin-top:42px}.principle-card{min-height:270px;padding:20px}.principle-card h3{font-size:31px;margin-top:36px}.studio{padding-top:88px;padding-bottom:95px}.studio-grid{grid-template-columns:1fr;gap:34px;margin-top:44px}.studio-copy{max-width:none}.contact{min-height:540px}.contact-content{padding:80px 22px}.contact-mark{width:42px;height:42px}.contact h2{font-size:clamp(55px,13vw,76px)}.contact-coordinate{right:20px;bottom:22px;font-size:7px}.footer{padding:25px 22px;display:grid;grid-template-columns:1fr auto;gap:13px}.footer-note{grid-column:1/-1;grid-row:2}.copyright{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* HAPTIVO visual refinement */
:root{--bg:#08090a;--text:#f4f2ed;--muted:#a4a39f;--line:rgba(244,242,237,.10)}
body{font-family:'Inter',sans-serif;letter-spacing:-.012em}
.brand,.hero h1,.manifesto h2,.principles-heading h2,.studio h2,.contact h2,.principle-card h3,.interlude>p{font-family:'Manrope',sans-serif}
.brand{font-weight:700;letter-spacing:.20em}
.hero h1{font-weight:500;letter-spacing:-.085em}
.manifesto h2,.principles-heading h2,.studio h2,.contact h2{font-weight:500;letter-spacing:-.075em}
.eyebrow,.section-kicker,.visual-caption,.hero-bottom,.card-top,.aside-note,.studio-status,.contact-coordinate{letter-spacing:.19em}
.page-noise{opacity:.018}
.principle-card{background:rgba(255,255,255,.012);border-color:rgba(244,242,237,.10)}
.principle-card:hover{border-color:rgba(244,242,237,.24)}
.button-light{background:#f4f2ed;color:#101112}
@media(max-width:650px){.hero h1{letter-spacing:-.075em}}


/* HAPTIVO hero correction v4: show the approved monogram, not the placeholder orb */
.hero-visual{
  height:570px;
  position:relative;
  display:grid;
  place-items:center;
  perspective:1100px;
  transform:translate(20px,-14px);
}
.hero-visual .hero-mark-aura{
  position:absolute;
  width:min(470px,82%);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(155,170,198,.18) 0%,rgba(95,110,140,.08) 38%,transparent 70%);
  filter:blur(28px);
}
.hero-visual .hero-monogram{
  display:block;
  position:relative;
  z-index:2;
  width:min(390px,76%);
  height:auto;
  filter:invert(1) drop-shadow(0 24px 38px rgba(0,0,0,.42)) drop-shadow(0 0 22px rgba(220,230,248,.12));
  transform:translateY(-8px);
  animation:hero-mark-float 8s ease-in-out infinite;
}
.hero-visual .orbit,
.hero-visual .core-object,
.hero-visual .core-shadow,
.hero-visual .visual-halo{display:none!important}
@keyframes hero-mark-float{
  0%,100%{transform:translateY(-8px) rotate(-2deg)}
  50%{transform:translateY(-20px) rotate(1deg)}
}
@media(max-width:850px){
  .hero-visual{transform:translate(10px,0);height:490px}
  .hero-visual .hero-monogram{width:min(340px,76%)}
}
@media(max-width:650px){
  .hero-visual{height:340px;margin-top:25px;transform:none}
  .hero-visual .hero-monogram{width:min(270px,74%)}
}


/* HAPTIVO v5: 3D hero presentation */
.hero-visual{min-height:570px;overflow:visible;transform:translate(10px,-8px)}
.hero-3d-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;outline:none}
.hero-3d-fallback{position:absolute;z-index:1;width:min(390px,78%);aspect-ratio:1;display:grid;place-items:center;pointer-events:none}
.hero-3d-fallback img{width:100%;filter:invert(1) drop-shadow(0 22px 28px rgba(0,0,0,.35))}
.hero-visual:before{content:"";position:absolute;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(122,145,185,.15),rgba(60,75,103,.045) 48%,transparent 72%);filter:blur(24px);z-index:0}
.hero-visual .visual-caption,.hero-visual .visual-cross{z-index:3}
@media(max-width:850px){.hero-visual{transform:translate(5px,0);min-height:490px}}
@media(max-width:650px){.hero-visual{height:390px;min-height:390px;margin-top:25px;transform:none}}

/* v7: compact, visible header lockup */
.site-header .brand{display:flex;align-items:center;gap:10px;font-size:15px;line-height:1;letter-spacing:.14em;font-weight:700;white-space:nowrap}
.site-header .brand-mark{width:23px;height:23px;flex-basis:23px}
@media(max-width:650px){.site-header .brand{font-size:14px;gap:8px}.site-header .brand-mark{width:21px;height:21px;flex-basis:21px}}
/* Hide the oversized flat fallback; the WebGL sculpture is the hero artwork. */
.hero-3d-fallback{display:none!important}

/* v8: reduce the header symbol to a restrained favicon-like brand mark */
.site-header .brand{gap:7px;font-size:14px;letter-spacing:.12em;font-weight:650}
.site-header .brand-mark{width:16px!important;height:16px!important;flex:0 0 16px!important}
@media(max-width:650px){
  .site-header .brand{gap:6px;font-size:13px}
  .site-header .brand-mark{width:15px!important;height:15px!important;flex-basis:15px!important}
}

/* v9: hero is a tactile waveform sculpture, not an enlarged brand mark */
.hero-visual{min-height:570px;overflow:visible}
.hero-3d-canvas{z-index:2;position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-3d-fallback{display:none!important}
.hero-visual::before{
  content:"";position:absolute;width:72%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(ellipse,rgba(91,123,181,.16),rgba(36,49,76,.06) 48%,transparent 72%);
  filter:blur(32px);z-index:0;pointer-events:none
}
.hero-visual .visual-caption,.hero-visual .visual-cross{z-index:3}
@media(max-width:650px){.hero-visual{height:390px;min-height:390px}}