/* NXT Holding — shared base.
   Ported from the Claude Design artboards; the runtime's `style-hover`
   attribute is expressed here as real CSS. */

:root{
  --ink-light:#EFEDE8;
  --ink-dark:#1A1A18;
  --muted:#8A8880;
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --ease-inout:cubic-bezier(0.65,0,0.35,1);
  --gutter:40px;
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  -webkit-font-smoothing:antialiased;
  font-family:'Valley Sans','Hanken Grotesk',Helvetica,Arial,sans-serif;
}

a{text-decoration:none;color:inherit}

img,video{max-width:100%}

/* The artboards hid the scrollbar; keep that, but never at the cost of
   being able to scroll. */
::-webkit-scrollbar{width:0;height:0}

/* ---- underline-on-hover link (was style-hover="background-size:100% 1px") ---- */
.ul{
  display:inline-block;
  padding-bottom:6px;
  color:inherit;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  transition:background-size .5s var(--ease-out);
}
.ul:hover,
.ul:focus-visible,
.ul[aria-current="page"]{background-size:100% 1px}

.ul--btn{border:0;background:none;padding:0 0 6px;font:inherit;cursor:pointer}

:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---- shared footer ---- */
.foot{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding:22px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  font-size:13px;letter-spacing:-0.005em;color:var(--muted);
}
.foot__left{display:flex;align-items:center;gap:clamp(28px,5vw,80px)}
.foot__mail{display:inline-flex;align-items:center;gap:9px;color:var(--ink-dark);transition:color .6s var(--ease-inout)}
.foot__diamond{width:6px;height:6px;background:currentColor;transform:rotate(45deg);flex:none}
.foot__legal{display:flex;align-items:center;gap:20px}
.foot__legal .ul{font-size:12px;padding-bottom:4px}

/* ---- 16-col layout debug overlay: append ?grid=1 to any page ---- */
.grid-overlay{
  position:fixed;inset:0;z-index:999;pointer-events:none;
  padding:0 var(--gutter);
  display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:24px;
}
.grid-overlay > i{height:100%;background:rgba(255,60,90,.16);outline:1px solid rgba(255,60,90,.3)}
.grid-overlay__label{
  position:fixed;left:12px;bottom:12px;z-index:1000;pointer-events:none;
  font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.04em;
  color:#EFEDE8;background:rgba(0,0,0,.55);padding:4px 8px;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---- narrow screens ------------------------------------------------
   The artboards are desktop compositions on a fixed 16-column grid.
   These rules keep every page legible and scrollable on a phone; they
   are a fallback, not a designed mobile layout. */
@media (max-width:860px){
  :root{--gutter:20px}
  /* A fixed bar would sit on top of the stacked page content, so let the
     footer flow at the end instead. Pages that own a full-height final
     panel (the home page) keep their own positioning. */
  .foot{
    position:static;
    flex-direction:column;align-items:flex-start;gap:10px;
    padding:28px var(--gutter) 32px;font-size:11px;line-height:1.5;
    border-top:1px solid rgba(138,136,128,.3);
  }
  .foot__left{flex-direction:column;align-items:flex-start;gap:6px}
  .foot__legal{flex-wrap:wrap;gap:14px}
  .foot__legal .ul{font-size:11px}
  .grid-overlay{display:none}
}