*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#0E1311;color:#E8EFEA;font-family:'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:#4ADE9B}
a:focus-visible,button:focus-visible{outline:2px solid #4ADE9B;outline-offset:3px}
[hidden]{display:none !important}
img,svg{max-width:100%}
@media (max-width: 900px){
  .g{grid-template-columns:minmax(0,1fr) !important;row-gap:32px !important;column-gap:24px !important}
  h1{font-size:40px !important}
  h2{font-size:32px !important}
  [style*="height: 80px"]{height:auto !important;padding-top:16px !important;padding-bottom:16px !important;flex-wrap:wrap !important;row-gap:16px !important}
  [style*="justify-content: space-between"]{flex-wrap:wrap !important;gap:16px !important}
  [style*="padding: 48px;"]{padding:28px !important}
  [style*="padding: 96px 40px"],[style*="padding: 112px 40px"],[style*="padding: 88px 40px"]{padding-top:56px !important;padding-bottom:56px !important;padding-left:24px !important;padding-right:24px !important}
  [style*="gap: 36px"]{gap:16px 24px !important;flex-wrap:wrap !important}
}

/* ---------- motion layer ---------- */
html{scroll-padding-top:96px}
body{position:relative;overflow-x:hidden}
.site-nav{position:sticky;top:0;z-index:50;background:rgba(14,19,17,.9) !important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#progress{position:fixed;top:0;left:0;right:0;height:3px;background:#4ADE9B;transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}
.hero-bg{position:absolute;left:0;right:0;top:80px;height:860px;pointer-events:none;z-index:0;opacity:0;
  background-image:linear-gradient(#1F2925 1px,transparent 1px),linear-gradient(90deg,#1F2925 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent);mask-image:linear-gradient(to bottom,#000 30%,transparent)}
#top{position:relative;z-index:1}

/* Hidden until Motion reveals them. If Motion cannot run, the "js" class is removed and everything shows. */
.js #top > div:first-child > *,
.js [data-hero] > *,
.js #top > div:last-child,
.js #top > div:last-child > div:last-child > div,
.js .g:not(.panel):not(#top) > *,
.js .g:not(.panel) [style*="border-top: 1px solid #1F2925"],
.js h2,
.js h2 + p,
.js div:has(+ h2),
.js div[style*="letter-spacing: 0.1em"][style*="justify-content: space-between"] > *,
.js [style*="border: 1px solid #2B5A44"]{opacity:0}

@media (prefers-reduced-motion: reduce){
  .js *{opacity:1 !important}
  #progress{display:none}
}

@media (max-width: 900px){
  .site-nav{position:static}
  [style*="padding: 0 40px"]{padding-left:24px !important;padding-right:24px !important}
}

/* ---------- enquiry form ---------- */
.fld{display:flex;flex-direction:column;gap:6px;font-size:14px;color:#9AA8A1}
.fld input,.fld select,.fld textarea{font:inherit;font-size:16px;color:#E8EFEA;background:#0E1311;border:1px solid #3A4A43;border-radius:6px;padding:12px 14px;min-height:46px;width:100%;box-sizing:border-box}
.fld textarea{min-height:120px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid #4ADE9B;outline-offset:1px;border-color:#4ADE9B}
.btn-submit:disabled{opacity:.6;cursor:wait}

@media (min-width: 901px){
  #contact > div:first-child{position:sticky;top:120px}
}