/* Nimbyl — site stylesheet. Base resets, keyframes, responsive rules.
   Generated from the approved design; edit here, then run `node build.mjs`. */

html { scroll-behavior: smooth; }

body { margin: 0; background: #FFFFFF; color: #23201A; font-family: 'Figtree', 'Helvetica Neue', Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }

* { box-sizing: border-box; }

a { color: #23201A; text-decoration: none; }

a:hover { color: #B8410F; }

@keyframes nmb-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

@keyframes nmb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@keyframes nmb-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

@keyframes nmb-dash { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }

@keyframes nmb-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

@keyframes nmb-spin { to { transform: rotate(360deg); } }

@keyframes nmb-usescroll { 0%,8% { transform: translateY(0); } 11.111%,19.111% { transform: translateY(-108px); } 22.222%,30.222% { transform: translateY(-216px); } 33.333%,41.333% { transform: translateY(-324px); } 44.444%,52.444% { transform: translateY(-432px); } 55.556%,63.556% { transform: translateY(-540px); } 66.667%,74.667% { transform: translateY(-648px); } 77.778%,85.778% { transform: translateY(-756px); } 88.889%,96.889% { transform: translateY(-864px); } 100% { transform: translateY(-972px); } }

@keyframes nmb-drift { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(2%,-3%,0) scale(1.06); } }

@keyframes nmb-blink { 0%,100% { opacity: .18; transform: scale(.72); } 45% { opacity: 1; transform: scale(1); } }

@keyframes nmb-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (max-width: 1100px) {
    [data-herogrid] { grid-template-columns: minmax(0,1fr) !important; gap: 44px !important; }
    [data-herocopy] { text-align: center; }
    [data-herocopy] h1 { margin-left: auto !important; margin-right: auto !important; }
    [data-herocopy] p { margin-left: auto !important; margin-right: auto !important; }
    [data-herocopy] > div:last-child { justify-content: center; }
  }

@media (max-width: 1080px) {
    [data-app] { grid-template-columns: minmax(0,1fr) !important; }
    [data-sidebar] { display: none !important; }
  }

@media (max-width: 1000px) {
    [data-cols="4"] { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
    [data-cols="2"] { grid-template-columns: minmax(0,1fr) !important; }
    [data-cols="3"] { grid-template-columns: minmax(0,1fr) !important; }
    [data-cols="3"] > * { grid-column: auto !important; }
    [data-cols="2"] > * { grid-column: auto !important; }
    [data-dash] { grid-template-columns: minmax(0,1fr) !important; }
    [data-orbit] { display: none !important; }
    [data-orbit-grid] { display: block !important; }
    [data-navlinks] { display: none !important; }
    [data-menubtn] { display: flex !important; }
    [data-shell] { grid-template-columns: minmax(0,1fr) !important; height: auto !important; }
    [data-stage] { height: 505px !important; padding: 14px !important; }
    [data-hcols] { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 10px !important; }
    [data-side] { display: none !important; }
    [data-mid], [data-bot] { grid-template-columns: minmax(0,1fr) !important; }
    [data-hwgrid] { grid-template-columns: minmax(0,1fr) !important; }
    [data-hwtabs] { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
    [data-personagrid] { grid-template-columns: minmax(0,1fr) !important; }
    [data-trustgrid] { grid-template-columns: minmax(0,1fr) !important; gap: 40px !important; }
  }

@media (max-width: 620px) {
    [data-stagebox] { height: auto !important; display: flex !important; flex-direction: column; gap: 12px; padding: 14px; }
    [data-fcard] { position: static !important; width: 100% !important; animation: none !important; }
    [data-cursor] { display: none !important; }
  }

@media (max-width: 680px) {
    [data-kpis] { grid-template-columns: minmax(0,1fr) !important; }
    [data-hidesm] { display: none !important; }
  }

@media (max-width: 680px) {
    [data-cols="4"] { grid-template-columns: minmax(0,1fr) !important; }
    [data-pad] { padding-left: 20px !important; padding-right: 20px !important; }
  }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid #E35C24;
    outline-offset: 3px;
    border-radius: 8px;
  }

a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

[data-touch] { position: relative; }

[data-touch]::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
    min-width: 44px;
  }

@media (hover: none), (pointer: coarse) {
    [class*="scp"]:hover { transform: none !important; }
    [data-fcard]:hover, [data-touch]:hover { transform: none !important; }
  }

@media (min-width: 1041px) {
    [data-hwgrid="1"] { min-height: 560px !important; }
  }

@media (prefers-reduced-motion: reduce) {
    /* gentler, not zero: keep opacity + colour, remove movement */
    [data-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; }
    *, *::before, *::after {
      animation-name: none !important;
      transition-property: opacity, color, background-color, border-color, fill, stroke !important;
      transition-duration: .25s !important;
    }
  }

[data-reveal] { transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }

@media (max-width: 1000px) {
    [data-cols="4"] { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
    [data-cols="3"] { grid-template-columns: minmax(0,1fr) !important; }
    [data-cols="3"] > * { grid-column: auto !important; }
    [data-cols="2"] > * { grid-column: auto !important; }
    [data-mini="3"] { grid-template-columns: minmax(0,1fr) !important; }
    [data-cols="2"] { grid-template-columns: minmax(0,1fr) !important; gap: 44px !important; }
    [data-navlinks] { display: none !important; }
    [data-menubtn] { display: flex !important; }
  }

@media (max-width: 900px) {
    [data-arcbg] { width: 150vw !important; opacity: .8 !important; }
    [data-arcbg]:has(trade-globe) { width: min(88vw, 52vh) !important; }
  }

@media (hover: none), (pointer: coarse) { [data-touch]:hover { transform: none !important; } }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { transform: none !important; transition: opacity .3s ease !important; }
    *, *::before, *::after { animation-name: none !important; transition-property: opacity, color, background-color, border-color, fill, stroke !important; transition-duration: .25s !important; }
  }

@media (max-width: 1000px) {
    [data-cols="4"] { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
    [data-cols="3"] { grid-template-columns: minmax(0,1fr) !important; }
    [data-cols="3"] > * { grid-column: auto !important; }
    [data-cols="2"] > * { grid-column: auto !important; }
    [data-cols="2"] { grid-template-columns: minmax(0,1fr) !important; gap: 44px !important; }
    [data-navlinks] { display: none !important; }
    [data-menubtn] { display: flex !important; }
    [data-role] { grid-template-columns: minmax(0,1fr) !important; gap: 14px !important; }
  }

input, select, textarea { font-family: inherit; }

input::placeholder, textarea::placeholder { color: #665F56; }

input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(227,92,36,.55); box-shadow: 0 0 0 4px rgba(227,92,36,.12); }

@media (max-width: 1000px) {
    [data-cols="2"] { grid-template-columns: minmax(0,1fr) !important; gap: 44px !important; }
    [data-fields="2"] { grid-template-columns: minmax(0,1fr) !important; }
    [data-navlinks] { display: none !important; }
    [data-menubtn] { display: flex !important; }
  }

@media (max-width: 680px) {
    [data-pad] { padding-left: 20px !important; padding-right: 20px !important; }
  }

h2 { scroll-margin-top: 104px; }

@media (max-width: 1000px) {
    [data-legal] { grid-template-columns: minmax(0,1fr) !important; gap: 8px !important; }
    [data-index] { display: none !important; }
  }

a:focus-visible, button:focus-visible { outline: 2px solid #E35C24; outline-offset: 3px; border-radius: 8px; }

/* Active navigation state (was inline in the approved design) */
[data-nav][aria-current="page"] { color:#1B1813; font-weight:600; background:rgba(20,18,15,.055); }
[data-nav-mobile][aria-current="page"] { color:#1B1813; font-weight:600; }

/* Interaction states (were style-hover / style-active / style-focus in the design source) */
.nx0:hover { color:#B8410F !important;border-color:rgba(227,92,36,.3) !important;transform:translateY(-1px) !important }
.nx1:hover { color:#1B1813 !important;transform:translateY(-2px) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.16),0 3px 5px rgba(0,0,0,.32),0 22px 40px -14px rgba(0,0,0,.75) !important }
.nx2:active { transform:translateY(1px) scale(.975) !important;box-shadow:inset 0 2px 6px rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.3) !important }
.nx3:hover { color:#FFF !important;transform:translateY(-2px) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.5),0 3px 5px rgba(20,18,15,.24),0 20px 34px -14px rgba(20,18,15,.7) !important }
.nx4:active { transform:translateY(1px) scale(.975) !important;box-shadow:inset 0 2px 6px rgba(0,0,0,.55),0 1px 2px rgba(20,18,15,.3) !important }
.nx5:hover { color:#23201A !important;border-color:rgba(227,92,36,.3) !important;transform:translateY(-2px) !important }
.nx6:hover { transform:translateY(-2px) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.5),0 3px 5px rgba(20,18,15,.24),0 20px 34px -14px rgba(20,18,15,.7) !important }
.nx7:hover { color:#B8410F !important }
.nx8:hover { color:#FFF !important;transform:translateY(-2px) !important }
.nx9:active { transform:translateY(1px) scale(.975) !important }
.nxa:hover { transform:translateY(-2px) !important }
.nxb:hover { color:#1B1813 !important;background:rgba(20,18,15,.055) !important }


/* ============================================================
   Universal screen-compatibility layer
   Small phones (320px) through ultra-wide desktops.
   Appended last so it wins on equal specificity.
   ============================================================ */

html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

img { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
h1, h2, h3, h4, p, li, dd, dt, td, a { overflow-wrap: break-word; }

/* Gutters scale with the viewport below the 1360px canvas */
@media (max-width: 1400px) {
    [data-pad] { padding-left: clamp(18px, 3.6vw, 48px) !important; padding-right: clamp(18px, 3.6vw, 48px) !important; }
  }

/* Tablet portrait / large phone */
@media (max-width: 860px) {
    [data-hwtabs] { grid-template-columns: minmax(0,1fr) !important; }
    [data-hcols] { grid-template-columns: minmax(0,1fr) !important; }
    [data-stage] { height: 460px !important; }
    [style*="1fr 128px 74px"] { grid-template-columns: 1fr 96px 62px !important; }
    [style*="width:224px"], [style*="width: 224px"] { width: auto !important; flex: 1 1 40% !important; min-width: 0 !important; }
    [data-menupanel], #nmb-menu { max-height: calc(100dvh - 72px); overflow-y: auto; }
  }

/* Phones */
@media (max-width: 600px) {
    [data-cols="4"], [data-cols="3"], [data-cols="2"], [data-mini="3"],
    [data-kpis], [data-fields="2"], [data-role], [data-dash], [data-hcols],
    [data-personagrid], [data-trustgrid], [data-hwgrid], [data-legal] { grid-template-columns: minmax(0,1fr) !important; }
    [data-stage] { height: 460px !important; padding: 12px !important; }
    [data-orbit-grid] { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
    [style*="height:344px"] { height: 300px !important; }
    [style*="height:432px"] { height: 360px !important; }
    [style*="1fr 128px 74px"] { grid-template-columns: minmax(0,1fr) auto !important; }
    [style*="1fr 128px 74px"] > *:nth-child(2) { display: none !important; }
  }

/* Small phones */
@media (max-width: 400px) {
    [data-pad] { padding-left: 16px !important; padding-right: 16px !important; }
    [data-stage] { height: 460px !important; }
    [data-stagebox] { padding: 12px !important; }
  }

/* Short viewports / phones in landscape */
@media (max-height: 560px) and (orientation: landscape) {
    [data-stage] { height: 380px !important; }
    [data-menupanel], #nmb-menu { max-height: 72dvh; overflow-y: auto; }
    #nmb-req > div { max-height: 94dvh; }
  }

/* Notch / rounded-display safe areas (paired with viewport-fit=cover) */
@supports (padding: max(0px)) {
    @media (max-width: 860px) {
      [data-pad] {
        padding-left: max(clamp(18px, 3.6vw, 48px), env(safe-area-inset-left)) !important;
        padding-right: max(clamp(18px, 3.6vw, 48px), env(safe-area-inset-right)) !important;
      }
      footer[data-pad] { padding-bottom: max(48px, env(safe-area-inset-bottom)) !important; }
    }
  }

 @media (max-width: 600px) {
  header [data-req]:not([data-mobile-cta]) { display: none !important; }
  [data-cols] > *, [data-dash] > *, [data-hcols] > *, [data-hwtabs] > *, [data-personagrid] > *, [data-trustgrid] > *, [data-hwgrid] > *, [data-kpis] > *, [data-role] > *, [data-mini] > * { min-width: 0 !important; }
  [data-mobile-cta] { display: flex !important; }
    div:has(+ [data-stage]) button { min-height: 44px !important; flex: none !important; }
    div:has(+ [data-stage]) > div:first-child { flex-wrap: nowrap !important; min-width: 0 !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    div:has(+ [data-stage]) > div:first-child::-webkit-scrollbar { display: none; }
    div:has(+ [data-stage]) > div:last-child { display: none !important; }
    footer a { min-height: 44px; display: inline-flex; align-items: center; }
}

  /* ===== Mobile corrections: sticky columns, header CTA, wide mocks ===== */
  @media (max-width: 1000px) {
    [data-cols] > [style*="sticky"] { position: static !important; top: auto !important; }
  }
  @media (max-width: 860px) {
    header [data-req]:not([data-mobile-cta]) { display: none !important; }
    header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #FFFFFF !important; }
    h1 span, h2 span, h3 span { white-space: normal !important; }
    [data-mobile-cta] { display: flex !important; }
  }
  @media (max-width: 600px) {
    [style*="width:224px"], [style*="width: 224px"] { display: none !important; }
    [data-stage] [style*="left:28%"], [data-stage] [style*="left: 28%"] { left: 4% !important; }
    div:has(+ [data-stage]) > div:first-child { flex-wrap: wrap !important; overflow-x: visible !important; }
  }