:root {
  --ink:#030c09;
  --green:#00df70;
  --lime:#a8ff81;
  --white:#f1efe6;
  --muted:#a6b1a9;
  --line:#ffffff24;
  color-scheme:dark;
  font-family:"Segoe UI",Arial,sans-serif;
  background:var(--ink);
  color:var(--white)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:30px;
  overflow-x:clip;
}
body {
  margin:0;
  width:100%;
  min-width:0;
  overflow-x:hidden;
}
img { max-width:100%; }
.service-copy,.project,.about-copy,.contact-grid { min-width:0; }
button,input,select,textarea {
  font:inherit
}
a {
  color:inherit;
  text-decoration:none
}
button {
  cursor:pointer
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid var(--lime);
  outline-offset:5px
}
::selection {
  background:var(--lime);
  color:var(--ink)
}
.wrap {
  width:min(1320px,88%);
  margin-inline:auto
}
.section {
  padding-block:110px
}
.eyebrow {
  font-size:11px;
  letter-spacing:2px;
  font-weight:650;
  line-height:1.7
}
.brand {
  display:inline-flex;
  align-items:center;
  font-size:27px;
  font-weight:850;
  letter-spacing:-1.6px;
  white-space:nowrap
}
.brand span {
  color:var(--green);
  font-size:29px;
  margin:0 5px
}
.brand i {
  color:var(--green);
  font-style:normal
}
.site-header {
  padding:25px 6%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:10
}
.site-header nav {
  display:flex;
  gap:28px;
  align-items:center
}
.site-header nav>a:not(.button) {
  font-size:13px;
  color:#c5cdc7
}
.site-header nav>a:hover,.site-header nav>a[aria-current] {
  color:var(--lime)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:18px 24px;
  border:1px solid var(--green);
  background:var(--green);
  color:var(--ink);
  font-size:13px;
  font-weight:700;
  transition:background .2s,transform .2s
}
.button:hover {
  background:var(--lime);
  border-color:var(--lime);
  transform:translateY(-2px)
}
.button.small {
  padding:12px 18px
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:17px;
  background:none;
  border:0;
  border-bottom:1px solid #89968c;
  padding:7px 0;
  color:inherit;
  font-size:13px
}
.text-link:hover {
  color:var(--lime);
  border-color:var(--lime)
}
h1,h2,h3,p {
  margin-top:0
}
h2 {
  font-size:clamp(32px,4vw,56px);
  line-height:1.12;
  letter-spacing:-2px;
  font-weight:550
}
em {
  font-style:normal;
  color:var(--muted)
}
p {
  line-height:1.75
}
.menu-toggle {
  display:none
}
.skip-link {
  position:fixed;
  left:15px;
  top:-80px;
  background:var(--lime);
  color:var(--ink);
  padding:12px;
  z-index:100
}
.skip-link:focus {
  top:15px
}
.site-footer {
  padding-block:50px 25px
}
.footer-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px
}
.footer-top p {
  font-size:13px;
  color:var(--muted);
  margin:0
}
.site-footer nav {
  display:flex;
  gap:25px;
  margin:36px 0;
  font-size:13px
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  padding-top:24px;
  font-size:11px;
  color:var(--muted)
}
dialog {
  width:min(620px,90%);
  max-height:85vh;
  background:#111b17;
  color:var(--white);
  border:1px solid #456b50;
  padding:0
}
dialog::backdrop {
  background:#000b;
  backdrop-filter:blur(8px)
}
.dialog-inner {
  padding:45px
}
.dialog-close {
  float:right;
  background:none;
  color:var(--white);
  border:0;
  font-size:22px;
  padding:8px
}
.dialog-inner h2 {
  font-size:36px;
  clear:both;
  padding-top:20px
}
.dialog-inner>p,.dialog-inner li {
  color:var(--muted)
}
.dialog-inner li {
  padding-block:7px
}
.form-note {
  font-size:12px;
  line-height:1.7;
  color:var(--muted)
}

/* Editorial identity inspired by the supplied reference. */
h1,h2,.service h3 { font-family: Georgia, 'Times New Roman', serif; font-weight:400; }
em { font-style:italic; color:var(--green); }
.brand { gap:12px; letter-spacing:0; }
.brand .brand-monogram { position:relative; margin:0; color:var(--white); font-size:34px; letter-spacing:-4px; font-weight:650; }
.brand-monogram i { position:absolute; right:-4px; top:0; font-size:19px; color:var(--green); }
.brand .brand-word { margin:0; font-size:12px; letter-spacing:6px; color:var(--white); font-weight:500; }
.site-header { border:0; padding-block:26px; }
.site-header nav>a[aria-current] { border-bottom:1px solid var(--green); padding-block:8px; }
.site-header .button.small { background:transparent; color:var(--white); border-radius:30px; padding:12px 25px; font-weight:400; }
.button { border-radius:4px; }
