/* Main-page version of the approved tactile hero. All effects stay inside this section. */
.tactile-hero{--ink:#f4f4f5;--secondary:#a7a8b0;--line:#2c2d31;--blue:#253cec;--ease:cubic-bezier(.2,.8,.2,1);position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:calc(100svh - 102px);padding:32px max(var(--gutter),calc((100vw - 1400px)/2 + var(--gutter))) 0;color:var(--ink);font-family:'DM Sans',Arial,sans-serif;overflow:clip;background:#101113;line-height:1.5}
.tactile-hero.is-on{--secondary:#d4d8ff;--line:#ffffff30}
.tactile-hero .colour-field{position:absolute;inset:0;background:var(--blue);z-index:-1;clip-path:circle(0 at var(--origin-x,50%) var(--origin-y,65%));transition:clip-path 1.1s cubic-bezier(.65,0,.2,1);pointer-events:none;mask-image:linear-gradient(#000 calc(100% - 100px),transparent)}
.tactile-hero.is-on .colour-field{clip-path:circle(150% at var(--origin-x,50%) var(--origin-y,65%))}
.tactile-hero svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tactile-hero button{font:inherit}.tactile-hero a:focus-visible,.tactile-hero button:focus-visible{outline:3px solid #e2e8ff;outline-offset:8px}
.tactile-hero .tactile-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tactile-hero .heading-block{text-align:center;position:relative;z-index:1}.tactile-hero .eyebrow{font-size:11px;font-weight:550;letter-spacing:.13em;display:flex;align-items:center;justify-content:center;gap:9px;margin:5px 0 30px}.tactile-hero .eyebrow>span{height:5px;width:5px;background:currentColor;border-radius:50%}.tactile-hero h1{position:relative;font-weight:450;font-size:clamp(64px,7.7vw,118px);line-height:.99;letter-spacing:-.07em;margin:0}.tactile-hero h1 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.065em}.tactile-hero h1>span{display:block;transition:opacity .45s ease,transform .85s var(--ease),filter .45s ease}.tactile-hero .headline-after{position:absolute;inset:0;opacity:0;transform:translateY(18px);filter:blur(6px)}.tactile-hero.is-on .headline-after{opacity:1;transform:translateY(0);filter:blur(0)}.tactile-hero.is-on .headline-before{opacity:0;transform:translateY(-18px);filter:blur(6px)}.tactile-hero .playground{position:relative;flex:1;min-height:320px;display:flex;align-items:center;justify-content:center;padding:24px 0 30px}.tactile-hero .button-space{width:328px;height:224px;perspective:1100px;position:relative;z-index:2}.tactile-hero .button-housing{width:100%;height:100%;padding:10px;border-radius:43px;transform:rotateX(28deg) rotateZ(-8deg);background:linear-gradient(135deg,#cbcfcf,#f7f8f4 23%,#b6bcbf 70%,#e4e6e1);box-shadow:1px 1px 0 #fff inset,0 2px 1px #85898b,0 5px 0 #94999c,0 8px 0 #9fa3a4,0 10px 1px #7b8288,6px 23px 25px #171e3933;transition:transform .75s var(--ease),box-shadow .6s}.tactile-hero .feel-button{display:block;position:relative;width:100%;height:100%;border:0;background:#071457;border-radius:34px;padding:0;cursor:pointer;box-shadow:0 0 0 1px #0e1b48,0 2px 6px #0008 inset;color:#fff9e8;touch-action:manipulation;user-select:none}.tactile-hero .button-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;text-align:left;padding:22px 27px 18px;border-radius:33px;background:radial-gradient(ellipse at 10% 0,#879dff88,transparent 65%),linear-gradient(145deg,#4966f9,#243ce0 58%,#1630c5);box-shadow:inset 0 2px 1px #b2c1ffb3,inset 1px 0 1px #ffffff4d,inset 0 -2px 1px #102090,0 7px 0 #152995,0 9px 2px #061345,0 15px 16px #050b4c66;transform:translateY(-8px);transition:transform .42s cubic-bezier(.18,.9,.25,1.4),box-shadow .3s,background .6s,color .6s}.tactile-hero .button-top,.tactile-hero .button-bottom{display:flex;align-items:center;justify-content:space-between}.tactile-hero .button-top svg{width:19px;height:19px;stroke-width:1.2}.tactile-hero .led{width:7px;height:7px;border-radius:50%;background:#c8d4ff;box-shadow:0 0 6px #c5d2ff9c}.tactile-hero .button-label{font-size:33px;font-weight:500;line-height:1.07;letter-spacing:-.045em}.tactile-hero .micro-label{font-size:8px;letter-spacing:.1em;font-weight:500}.tactile-hero .button-bottom svg{width:21px;height:21px}.tactile-hero .feel-button:active .button-face,.tactile-hero .feel-button.pressed .button-face{transform:translateY(0);box-shadow:inset 0 2px 1px #ffffff60,0 1px 0 #152995,0 2px 2px #061345}.tactile-hero.is-on .button-housing{transform:rotateX(22deg) rotateZ(5deg);box-shadow:1px 1px 0 #fff inset,0 2px 1px #85898b,0 5px 0 #94999c,0 8px 0 #9fa3a4,0 10px 1px #7b8288,6px 23px 25px #030a5555}.tactile-hero.is-on .button-face{background:radial-gradient(ellipse at 10% 0,#fffbd088,transparent 65%),linear-gradient(145deg,#f6edbc,#e5d994 60%,#d2c580);color:#323323;box-shadow:inset 0 2px 1px #fffce7,inset 1px 0 1px #ffffff4d,inset 0 -2px 1px #a99c59,0 7px 0 #ae9f59,0 9px 2px #605b3c,0 15px 16px #050b4c66}.tactile-hero.is-on .feel-button:active .button-face,.tactile-hero.is-on .feel-button.pressed .button-face{box-shadow:inset 0 2px 1px #fffce7,0 1px 0 #ae9f59,0 2px 2px #605b3c}.tactile-hero.is-on .led{background:#556241;box-shadow:0 0 0 2px #d7d09c}.tactile-hero .ambient-shadow{position:absolute;left:50%;top:65%;width:290px;height:45px;transform:translateX(-50%) rotate(-8deg);border-radius:50%;background:#1724481c;filter:blur(22px);pointer-events:none}.tactile-hero .interaction-hint{position:absolute;left:calc(50% + 208px);top:57%;font:italic 19px Georgia,serif;transform:rotate(-8deg);color:var(--secondary);white-space:nowrap}.tactile-hero .interaction-hint>svg{position:absolute;width:49px;height:45px;left:-44px;top:-41px;transform:rotate(-80deg);stroke-width:1}.tactile-hero .hint-after{display:none}.tactile-hero.is-on .hint-before{display:none}.tactile-hero.is-on .hint-after{display:inline}.tactile-hero .hero-footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:91px;font-size:12px;position:relative;transition:border-color .6s}.tactile-hero .hero-footer p{display:flex;align-items:center;gap:9px;color:var(--secondary)}.tactile-hero .status-dot{width:6px;height:6px;border-radius:50%;background:#627353}.tactile-hero.is-on .status-dot{background:#ddd29a}.tactile-hero .work-link{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:26px;min-height:44px;font-size:14px}.tactile-hero .work-link svg{width:22px;transition:transform .2s}.tactile-hero .work-link:hover svg{transform:translateX(4px)}.tactile-hero .location span{margin-left:15px}@media(hover:hover) and (prefers-reduced-motion:no-preference){.tactile-hero .button-housing:hover{transform:rotateX(22deg) rotateZ(-5deg) translateY(-3px)}.tactile-hero.is-on .button-housing:hover{transform:rotateX(18deg) rotateZ(2deg) translateY(-3px)}}@media(min-height:950px) and (min-width:800px){.tactile-hero{padding-top:6vh}.tactile-hero .playground{max-height:460px;width:100%;margin:auto}.tactile-hero .hero-footer{margin-top:auto}}@media(max-width:700px){.tactile-hero .header{padding:23px 6vw}.tactile-hero .identity{font-size:12px;gap:13px}.tactile-hero .identity small{font-size:11px}.tactile-hero .monogram{font-size:39px}.tactile-hero .header nav{gap:20px;font-size:12px}.tactile-hero .header nav>a:not(.contact){display:none}.tactile-hero .contact{gap:13px}.tactile-hero{padding:34px 6vw 0;min-height:calc(100svh - 90px)}.tactile-hero .eyebrow{font-size:10px;margin-bottom:27px}.tactile-hero h1{font-size:clamp(56px,12.9vw,88px)}.tactile-hero .playground{min-height:315px;padding:25px 0 40px}.tactile-hero .button-space{width:264px;height:194px}.tactile-hero .button-housing{border-radius:37px;padding:9px}.tactile-hero .feel-button,.tactile-hero .button-face{border-radius:28px}.tactile-hero .button-face{padding:18px 22px 16px}.tactile-hero .button-label{font-size:29px}.tactile-hero .micro-label{font-size:7px}.tactile-hero .interaction-hint{left:auto;right:10%;top:auto;bottom:5px;font-size:16px}.tactile-hero .interaction-hint>svg{width:33px;height:30px;left:-36px;top:-6px;transform:rotate(-125deg)}.tactile-hero .hero-footer{min-height:90px;display:grid;grid-template-columns:1fr auto;gap:8px;font-size:10px}.tactile-hero .work-link{position:static;transform:none;font-size:12px;gap:12px}.tactile-hero .hero-footer .location{display:none}}@media(max-height:720px) and (min-width:701px){.tactile-hero .header{padding-block:18px}.tactile-hero{padding-top:12px;min-height:calc(100svh - 80px)}.tactile-hero h1{font-size:80px}.tactile-hero .eyebrow{margin-bottom:18px}.tactile-hero .playground{min-height:260px}.tactile-hero .button-space{width:290px;height:200px}.tactile-hero .hero-footer{min-height:65px}}@media(prefers-reduced-motion:reduce){.tactile-hero *,.tactile-hero *::before,.tactile-hero *::after{transition:none!important;animation:none!important}.tactile-hero .headline-after,.tactile-hero.is-on .headline-before{transform:none;filter:none}.tactile-hero .colour-field{clip-path:none;opacity:0}.tactile-hero.is-on .colour-field{opacity:1}}

/* Match the landing page's charcoal surfaces; retain the blue key and warm pressed state. */
.home-page .tactile-hero .eyebrow{font-size:11px;letter-spacing:.13em;color:#b8b9c1}
.home-page .tactile-hero.is-on .eyebrow{color:#e0e4ff}
.tactile-hero h1 em{font-style:italic;color:inherit}
.tactile-hero .button-housing{background:linear-gradient(135deg,#424652,#707787 23%,#272b36 70%,#454b59);box-shadow:1px 1px 0 #a8afbd66 inset,0 2px 1px #14171d,0 5px 0 #252b35,0 8px 0 #1d2028,0 10px 1px #080a0e,6px 23px 25px #0009}
.tactile-hero.is-on .button-housing{box-shadow:1px 1px 0 #a8afbd66 inset,0 2px 1px #14171d,0 5px 0 #252b35,0 8px 0 #1d2028,0 10px 1px #080a0e,6px 23px 25px #030a5577}
.tactile-hero .ambient-shadow{background:#0009}
.tactile-hero .status-dot{background:#c6f38a}
.tactile-hero .hero-footer p{color:#a7a8b0}
.tactile-hero .work-link{color:#f4f4f5}
@media(max-width:760px){.tactile-hero{min-height:calc(100svh - 81px);padding-inline:var(--gutter)}}
@media(min-height:950px) and (min-width:800px){.tactile-hero{padding-top:6vh}}
@media(prefers-reduced-motion:reduce){.tactile-hero .colour-field{clip-path:none;opacity:0}.tactile-hero.is-on .colour-field{opacity:1}}
@media print{.tactile-hero{min-height:0;padding:30px!important;background:white;color:black}.tactile-hero .colour-field,.tactile-hero .playground,.tactile-hero .hero-footer{display:none}.tactile-hero h1{font-size:48px}.tactile-hero .headline-before{opacity:1;transform:none;filter:none}.tactile-hero .headline-after{display:none}}
/* Align navigation content with the page while its surface spans the viewport. */
.home-page .site-header{max-width:none;padding-inline:max(var(--gutter),calc((100vw - 1400px)/2 + var(--gutter)))}
@media(max-width:700px){.tactile-hero .interaction-hint{bottom:22px}}

/* Animate one inherited number, rather than independently transitioning every
   navigation colour. All surfaces, text and borders follow the hero's timing.
   Scroll visibility multiplies this tint without restarting the animation. */
@property --hero-nav-blend{syntax:"<number>";inherits:true;initial-value:0}
.home-page{--hero-nav-blend:0;--hero-nav-presence:1;--hero-nav-mix:calc(var(--hero-nav-blend) * var(--hero-nav-presence) * 100%);transition:--hero-nav-blend 1.1s cubic-bezier(.65,0,.2,1)}
.home-page .site-header{
  background-color:color-mix(in srgb,#253cec var(--hero-nav-mix),#101113);
  transition:none;
}
.home-page .desktop-nav{
  background-color:color-mix(in srgb,#3b50ee var(--hero-nav-mix),#1a1b1f);
  border-color:color-mix(in srgb,#6374f1 var(--hero-nav-mix),#2a2b30);
  transition:none;
}
.home-page .desktop-nav a,
.home-page .desktop-nav:has([aria-current]) a:first-child:not([aria-current]){
  color:color-mix(in srgb,#e5e9ff var(--hero-nav-mix),#aaaab0);
}
.home-page .desktop-nav a[aria-current],
.home-page .desktop-nav a:first-child{
  background-color:color-mix(in srgb,#5365e8 var(--hero-nav-mix),#303136);color:#fff;
}
.home-page .desktop-nav:has([aria-current]) a:first-child:not([aria-current]){background:none}
.home-page .desktop-nav a:hover{color:#fff}
.home-page .identity-sub{
  color:color-mix(in srgb,#d4d8ff var(--hero-nav-mix),#95969d);transition:none;
}
.home-page .monogram{
  border-color:color-mix(in srgb,#8896f5 var(--hero-nav-mix),#44464e);transition:none;
}
.home-page .mobile-nav{
  background-color:color-mix(in srgb,#253cec var(--hero-nav-mix),#191a1e);
  border-color:color-mix(in srgb,#6374f1 var(--hero-nav-mix),#2c2d31);
  transition:none;
}
.home-page .mobile-nav a{border-color:color-mix(in srgb,#6374f1 var(--hero-nav-mix),#2c2d31)}
.home-page .mobile-nav a span{color:color-mix(in srgb,#d4d8ff var(--hero-nav-mix),#95969d)}

.home-page .desktop-nav a,.home-page .mobile-nav a,.home-page .mobile-nav a span{transition:none}