/* SiteComms craft layer. Layout, copy and sizes come from each page's canvas styles;
   this file adds the motion, cursor and states, using the V4 timing tokens. */
:root{
  --ink:#000000;--bg:#ffffff;--card:#f7f7f7;--deep:#0f1a1f;--signal:#F46A22;--hair:rgba(0,0,0,.1);
  --e-kt:cubic-bezier(.22,1,.36,1);--e-out:cubic-bezier(.22,.61,.36,1);--e-soft:cubic-bezier(.32,.72,.28,1);
  --t-fast:140ms;--t-base:240ms;--t-slow:420ms;--t-page:640ms;--t-kt:720ms;--kt-stagger:75ms;--t-step:70ms;
}
@font-face{font-family:"Aspekta";src:url(../assets/fonts/Aspekta-Variable.woff2) format("woff2");font-weight:50 1000;font-display:swap}
@font-face{font-family:"Inter";src:url(../assets/fonts/Inter-Variable.woff2) format("woff2");font-weight:400 700;font-display:swap}
html{background:#ffffff;-webkit-text-size-adjust:100%}
body{background:#ffffff;overflow-x:clip}
img{max-width:100%}
::selection{background:#000000;color:#ffffff}
:focus-visible{outline:2px solid #000000;outline-offset:3px}
a,button,label{-webkit-tap-highlight-color:transparent}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;background:#000;color:#fff !important;font-family:'Inter',sans-serif;font-size:15px;text-decoration:none}
.skip:focus{top:12px}

/* ---- header ---- */
.hdr{transition:background-color var(--t-base) var(--e-out)}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair);opacity:0;pointer-events:none;transition:opacity var(--t-base) var(--e-out)}
body.scrolled .hdr::after{opacity:1}
.nv[aria-current],.nv[aria-current]:hover{background:#000000 !important;color:#ffffff !important}
.menu-btn{transition:background var(--t-fast) var(--e-out)}
.menu-btn:hover{background:#f2f2f2 !important}
.menu-btn svg path{transition:d var(--t-base) var(--e-out)}
.call{transition:background var(--t-base) var(--e-out)}
.call:hover{background:rgba(0,0,0,.8) !important}

/* ---- buttons (V4: primary hover ink-80, secondary .05 to .09) ---- */
.btn{transition:background var(--t-base) var(--e-out),color var(--t-base) var(--e-out)}
.btn[style*="background: #000000"]:hover{background:rgba(0,0,0,.8) !important}
.btn[style*="rgba(0,0,0,0.05)"]:hover{background:rgba(0,0,0,.09) !important}
.sx-btn:active{transform:scale(.96)}
.sx-btn{transition:background var(--t-fast) var(--e-out),opacity var(--t-base),transform var(--t-fast) var(--e-out)}

/* ---- footer links ---- */
.ft-l a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--t-base) var(--e-out)}
.ft-l a:hover{background-size:100% 1px}

/* ---- custom cursor (V4) ---- */
@media (hover:hover) and (pointer:fine){
  html.cur-on,html.cur-on *{cursor:none !important}
  .cur{position:fixed;left:0;top:0;z-index:2147483000;width:10px;height:10px;margin:-5px 0 0 -5px;pointer-events:none;transform:translate3d(-100px,-100px,0);opacity:0;transition:opacity 120ms linear}
  .cur i{display:block;width:100%;height:100%;background:#000;transform:scale(1);transition:transform 160ms cubic-bezier(.34,1.4,.64,1),background-color 140ms linear}
  .cur.w i{background:#fff}
  .cur.lg i{transform:scale(1.6)}
  .cur.dn i{transform:scale(1.25)}
  html.cur-on .cur.live{opacity:1}
}
.cur{display:none}
@media (hover:hover) and (pointer:fine){html.cur-on .cur{display:block}}

/* ---- heading word reveal (V4 .pk) ---- */
html.js-pre .h1{opacity:0}
.pk-m{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .04em .26em;margin:-.14em -.04em -.26em}
.pk-w{display:inline-block;will-change:transform,opacity,filter}
.pk-pre .pk-w{opacity:0;transform:translateY(20px);filter:blur(6px)}
.pk-go .pk-w{opacity:1;transform:none;filter:blur(0);transition:opacity var(--t-kt) var(--e-kt),transform var(--t-kt) var(--e-kt),filter var(--t-kt) var(--e-kt);transition-delay:calc(var(--k,0) * var(--kt-stagger))}

/* ---- section reveal (V4 .sec) — only armed by JS, only below the fold ---- */
.rv{opacity:0;transform:translateY(18px);transition:opacity var(--t-page) var(--e-out),transform var(--t-page) var(--e-out)}
.rv.in{opacity:1;transform:none}
@keyframes rise{from{opacity:0}to{opacity:1}}
@keyframes riseUp{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.rv:not(.in) .stg>*{opacity:0}
.rv.in .stg>*{animation:rise var(--t-slow) var(--e-out) backwards}
.rv.in .stg>*:nth-child(2){animation-delay:var(--t-step)}
.rv.in .stg>*:nth-child(3){animation-delay:calc(var(--t-step) * 2)}
.rv.in .stg>*:nth-child(4){animation-delay:calc(var(--t-step) * 3)}
.rv.in .stg>*:nth-child(5){animation-delay:calc(var(--t-step) * 4)}
.rv.in .stg>*:nth-child(n+6){animation-delay:calc(var(--t-step) * 5)}
/* map pin cards rise after the map */
.rv:not(.in) .pm-card{opacity:0}
.rv.in .pm-card{animation:riseUp var(--t-slow) var(--e-kt) backwards;animation-delay:calc(260ms + var(--d,0ms))}

/* ---- hero media: V4's scroll-driven film, adapted so the resting frame is the canvas frame:
   the picture settles deeper and slower as the page moves past it ---- */
html.js .vg img,html.js .vg video{transform:translate3d(0,calc(var(--p,0) * 3.5%),0) scale(calc(1 + var(--p,0) * .08));will-change:transform}

/* ---- word light (V4 .wl) ---- */
.wl-w{transition:color var(--t-slow) var(--e-out)}
html.js .wl .wl-w{color:rgba(0,0,0,.2)}
html.js .wl .wl-w.on{color:#000000}

/* ---- page transition: the page leaves before the next one arrives ---- */
.pg{transition:opacity var(--t-base) var(--e-out),transform var(--t-base) var(--e-out)}
html.leaving .pg{opacity:0;transform:translateY(-6px)}

/* ---- projects: floating image follows the pointer along the row ---- */
.pr-i{translate:var(--fx,0px) 0}

/* ---- overlay menu (V4 .menu) ---- */
.menu{position:fixed;inset:0;z-index:90;background:#ffffff;color:#000000;overflow-y:auto;scrollbar-width:none;opacity:0;visibility:hidden;transform:translateY(8px);
  font-family:'Aspekta','Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.02em;-webkit-font-smoothing:antialiased;
  transition:opacity var(--t-base) var(--e-out),transform var(--t-base) var(--e-soft),visibility 0s linear var(--t-base)}
.menu::-webkit-scrollbar{display:none}
body.menu-open .menu{opacity:1;visibility:visible;transform:none;transition:opacity var(--t-base) var(--e-out),transform var(--t-base) var(--e-soft),visibility 0s}
body.menu-open{overflow:hidden}
.mn-d{position:relative;min-height:100%;max-width:1440px;margin:0 auto;box-sizing:border-box;padding-bottom:84px}
.mn-m{display:none}
.mn-links a{transition:opacity var(--t-base) var(--e-out)}
.mn-links:hover a:not(:hover){opacity:.3}
.mn-links a>span{display:inline-block}
body.menu-open .mn-links a>span{animation:riseUp var(--t-slow) var(--e-kt) backwards}
body.menu-open .mn-links a:nth-child(2)>span{animation-delay:var(--t-step)}
body.menu-open .mn-links a:nth-child(3)>span{animation-delay:calc(var(--t-step) * 2)}
body.menu-open .mn-links a:nth-child(4)>span{animation-delay:calc(var(--t-step) * 3)}
body.menu-open .mn-aside{animation:rise var(--t-slow) var(--e-out) 120ms backwards}
.mn-close{transition:background var(--t-fast) var(--e-out)}
.mn-close:hover{background:#f2f2f2 !important}
.mn-call{transition:background var(--t-base) var(--e-out)}
.mn-call:hover{background:rgba(0,0,0,.8) !important}
.mn-sw[aria-checked="true"] span{transform:translateX(18.6px) !important}
.mn-tel{transition:opacity var(--t-base) var(--e-out)}
.mn-tel:hover{opacity:.6}
@media (max-width:899px){
  .mn-d{display:none}
  .mn-m{display:flex;flex-direction:column;min-height:100%}
}

/* ---- contact form states ---- */
.fl input[aria-invalid="true"]{border-bottom-color:#F46A22 !important}
.fl-err{display:flex;align-items:center;gap:8px;min-height:0;font-family:'Inter',sans-serif;font-weight:500;font-size:14px;line-height:1.35;color:rgba(255,255,255,.85)}
.fl-err:empty{display:none}
.fl-err::before{content:"";flex:none;width:6px;height:6px;background:#F46A22}
.ct-st{margin:-16px 0 0 0;font-family:'Inter',sans-serif;font-size:14px;line-height:1.45;color:rgba(255,255,255,.62)}
.ct-st:empty{display:none}
.pl:hover{background:rgba(255,255,255,.16) !important}
.pl[aria-pressed="true"]{background:#ffffff !important;color:#000000 !important}
.pl[aria-pressed="false"]{background:rgba(255,255,255,.08);color:#ffffff}
.ct-go{transition:background var(--t-base) var(--e-out)}
.ct-go:hover{background:rgba(255,255,255,.86) !important}
.ct-copy{transition:background var(--t-base) var(--e-out)}
.ct-copy:hover{background:rgba(0,0,0,.8)}
.ct-tel,.ct-em,.ct-mail{transition:opacity var(--t-base) var(--e-out)}
.ct-tel:hover,.ct-em:hover,.ct-mail:hover{opacity:.6}
.fl input:-webkit-autofill{-webkit-text-fill-color:#ffffff;-webkit-box-shadow:0 0 0 40px #0f1a1f inset;caret-color:#ffffff}
.fl input,.fl textarea{caret-color:#ffffff}
.fl input::placeholder{color:rgba(255,255,255,.3)}

/* ---- no JavaScript: the slider becomes a scroller so every card stays reachable ---- */
html:not(.js) .sx-vp{overflow-x:auto}

/* ---- reduced motion (V4 blanket) ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important;scroll-behavior:auto !important}
  .pk-pre .pk-w{transform:none;filter:none}
  .rv{opacity:1;transform:none}
  .rv .stg>*,.rv .pm-card{opacity:1 !important;animation:none !important}
  html.js .vg img,html.js .vg video{transform:none}
  html.js .wl .wl-w{color:#000000}
  .mq{overflow-x:auto}
}

/* phone: the black row bar meets the screen edge instead of running past it */
@media (max-width:899px){.pr::before,.nx::before{inset:0 -15px !important;border-radius:0 !important}}