:root {
  --bg:#040b06;
  --surface:#102015;
  --surface-2:#172b1b;
  --ink:#eef5e6;
  --muted:#b1bdab;
  --accent:#b8ea3c;
  --on-accent:#142006;
  --radius:4px;
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:40px;
  --space-5:64px;
  --space-6:104px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
  font-family:Onest,system-ui,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:auto;
  scroll-padding-block:24px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased
}
button,input {
  font:inherit
}
a {
  color:inherit;
  text-decoration:none
}
button,a,summary {
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent
}
button,summary {
  cursor:pointer
}
button {
  color:inherit;
  border:0
}
button:disabled {
  cursor:default
}
img {
  display:block;
  max-width:100%;
  height:auto
}
h1,h2,h3,p,figure,dl,dd {
  margin:0
}
h1,h2,h3 {
  font-weight:500;
  letter-spacing:-.04em;
  text-wrap:balance
}
h1 {
  font-size:clamp(42px,4.35vw,64px);
  line-height:1.04
}
h2 {
  font-size:40px;
  line-height:1.12
}
h3 {
  font-size:24px;
  line-height:1.25
}
p {
  line-height:1.65
}
a,button,summary {
  transition:color 180ms var(--ease),background-color 180ms var(--ease),opacity 180ms var(--ease)
}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px
}
a:hover {
  color:var(--accent)
}
::selection {
  background:var(--accent);
  color:var(--on-accent)
}
[hidden] {
  display:none!important
}
.wrap {
  width:min(1328px,calc(100% - 80px));
  margin-inline:auto
}
.skip {
  position:fixed;
  z-index:1000;
  top:-100px;
  left:20px;
  background:var(--accent);
  color:var(--on-accent);
  padding:14px 20px
}
.skip:focus {
  top:15px
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}
.brand {
  display:flex;
  align-items:center;
  width:154px;
  min-height:44px;
  flex-shrink:0
}
.brand img {
  width:100%
}
.site-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  padding-block:24px
}
.desktop-nav {
  display:flex;
  align-items:center;
  gap:28px;
  font-size:14px
}
.desktop-nav>a {
  display:flex;
  align-items:center;
  min-height:44px
}
.mobile-menu {
  display:none
}
.site-layout {
  display:grid;
  grid-template-columns:minmax(300px,.8fr) minmax(0,1.4fr);
  gap:64px;
  align-items:start;
  padding-top:24px
}
.profile-rail {
  position:sticky;
  top:32px;
  padding-left:48px;
  align-self:start;
  padding-top:16px;
  padding-bottom:40px
}
.identity .portrait {
  margin-bottom:28px
}
.portrait {
  width:112px;
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  outline:1px solid var(--accent);
  outline-offset:5px;
  background:var(--surface-2)
}
.portrait img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 34%
}
.profile-value {
  font-size:24px;
  line-height:1.4;
  letter-spacing:-.025em;
  margin-top:28px;
  max-width:23ch
}
.profile-summary {
  color:var(--muted);
  font-size:16px;
  margin-top:20px;
  max-width:36ch
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:16px 24px;
  border-radius:var(--radius);
  font-size:16px;
  line-height:1.4;
  font-weight:500;
  text-align:center
}
.primary {
  background:var(--accent);
  color:var(--on-accent)
}
.primary:hover {
  background:var(--ink);
  color:var(--bg)
}
.primary:active {
  background:var(--muted)
}
.profile-rail>.primary {
  display:flex;
  margin-top:32px;
  width:100%
}
.action-note {
  font-size:14px;
  color:var(--muted);
  margin-top:12px
}
.rail-links {
  display:flex;
  flex-wrap:wrap;
  gap:8px 28px;
  margin-top:24px
}
.rail-links>a,.text-link {
  font-size:16px;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  text-decoration:underline;
  text-underline-offset:6px;
  text-decoration-thickness:1px
}
.main-column {
  min-width:0;
  background:var(--surface);
  padding:48px
}
.block {
  scroll-margin-top:32px
}
.block+.block {
  margin-top:104px
}
.project-caption {
  color:var(--muted);
  font-size:14px;
  margin-top:16px
}
.section-lead {
  font-size:20px;
  line-height:1.5;
  letter-spacing:-.02em;
  margin-top:24px;
  max-width:40ch
}
.project-meta {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:28px;
  font-size:14px
}
.project-meta dt {
  color:var(--muted);
  margin-bottom:5px
}
.project-meta dd {
  color:var(--ink)
}
.product-view {
  margin-top:32px
}
.view-controls {
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--bg);
  padding:4px;
  gap:4px
}
.view-controls>button {
  background:transparent;
  padding:13px 8px;
  min-height:48px;
  font-size:14px;
  border-radius:var(--radius)
}
.view-controls>button[aria-pressed=true] {
  background:var(--ink);
  color:var(--bg)
}
.view-controls>button:not([aria-pressed=true]):hover {
  background:var(--surface-2)
}
.product-screen {
  margin-top:16px
}
.screen-open {
  display:block;
  background:transparent;
  padding:0;
  width:100%;
  cursor:zoom-in
}
.screen-open img {
  width:100%
}
.product-screen figcaption {
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
  margin-top:14px
}
.mobile-screen {
  background:var(--bg);
  padding:24px;
  text-align:center
}
.mobile-screen .screen-open {
  width:min(100%,250px);
  margin:auto
}
.before-after {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin-top:40px;
  align-items:stretch
}
.before-after>article {
  min-width:0;
  background:var(--bg);
  padding:24px 20px
}
.before-after>article+article {
  background:var(--surface-2)
}
.before-after h3 {
  font-size:16px;
  letter-spacing:0;
  color:var(--muted);
  line-height:1.5
}
.comparison-summary {
  font-size:20px;
  line-height:1.4;
  margin-top:16px;
  letter-spacing:-.025em;
  min-height:84px
}
.before-after p:last-child {
  font-size:16px;
  line-height:1.65;
  margin-top:24px
}
.case-role {
  margin-top:36px
}
.case-role h3 {
  font-size:20px
}
.case-role p {
  font-size:16px;
  color:var(--muted);
  margin-top:14px
}
.project-section>.text-link {
  margin-top:20px
}
.service-list {
  margin-top:28px;
  display:grid;
  gap:12px
}
.service-list details {
  background:var(--bg);
  padding:20px 24px
}
.service-list summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  list-style:none;
  font-size:20px;
  line-height:1.4;
  min-height:44px;
  font-weight:500;
  letter-spacing:-.02em
}
.service-list summary::-webkit-details-marker {
  display:none
}
.service-list summary span {
  font-size:24px;
  font-weight:400;
  transition:transform 200ms var(--ease);
  flex-shrink:0
}
.service-list details[open] summary span {
  transform:rotate(45deg)
}
.service-list details>p {
  font-size:16px;
  color:var(--muted);
  margin-top:16px
}
.presentation-section {
  background:var(--ink);
  color:var(--bg);
  padding:32px;
  margin-inline:-16px
}
.presentation-section h2 {
  font-size:32px
}
.presentation-section p {
  font-size:16px;
  margin-top:20px
}
.ink-button {
  background:var(--bg);
  color:var(--ink);
  margin-top:24px;
  width:100%
}
.ink-button:hover {
  background:var(--surface-2);
  color:var(--ink)
}
.presentation-section .text-link {
  color:var(--bg);
  margin-block:12px 20px
}
.presentation-section .text-link:hover {
  color:var(--surface-2)
}
.presentation-cover {
  display:block;
  overflow:hidden
}
.presentation-cover img {
  width:100%
}
.process {
  list-style:none;
  margin:32px 0 0;
  padding:0;
  display:grid;
  gap:28px;
  counter-reset:process
}
.process>li {
  padding-left:32px;
  position:relative
}
.process>li::before {
  counter-increment:process;
  content:counter(process)'.';
  position:absolute;
  left:0;
  top:3px;
  font-size:16px;
  color:var(--muted)
}
.process h3 {
  font-size:20px;
  letter-spacing:-.025em
}
.process p {
  color:var(--muted);
  font-size:16px;
  margin-top:10px
}
.contact-section>.primary {
  display:flex;
  margin-top:28px
}
.contact-list {
  display:grid;
  gap:12px;
  margin-top:32px
}
.contact-list>a,.email-row {
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:74px;
  padding:16px 0
}
.contact-list a>span,.email-row a>span {
  font-size:14px;
  color:var(--muted);
  display:block
}
.contact-list strong {
  font-weight:400;
  font-size:18px;
  line-height:1.5;
  overflow-wrap:anywhere
}
.contact-list>a:hover strong,.email-row>a:hover strong {
  color:var(--accent)
}
.email-row {
  align-items:flex-start
}
.email-row>a {
  min-width:0
}
.email-row>button {
  min-height:44px;
  padding:10px 12px;
  margin-left:-12px;
  background:transparent;
  font-size:14px;
  text-decoration:underline;
  text-underline-offset:5px
}
.contact-section>.text-link {
  margin-top:18px
}
.site-footer {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px 24px;
  margin-top:96px;
  padding-bottom:8px
}
.site-footer .brand {
  width:120px
}
.site-footer p {
  width:100%;
  font-size:14px;
  color:var(--muted);
  order:3
}
.site-footer>a:last-child {
  min-height:44px;
  display:flex;
  align-items:center;
  font-size:14px
}
.dialog-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 24px;
  background:var(--surface)
}
.dialog-bar h2 {
  font-size:20px;
  letter-spacing:-.02em
}
.dialog-bar button,.dialog-bar label {
  font-size:14px
}
.dialog-bar button {
  min-height:44px;
  padding:10px 16px;
  background:var(--bg);
  border-radius:var(--radius)
}
.dialog-bar label {
  display:flex;
  align-items:center;
  gap:12px
}
.dialog-bar input {
  width:100px;
  accent-color:var(--accent)
}
dialog {
  padding:0;
  color:var(--ink);
  background:var(--bg);
  border:0;
  max-width:calc(100vw - 32px);
  max-height:92dvh;
  overscroll-behavior:contain
}
dialog::backdrop {
  background:rgb(0 0 0 / .8)
}
#screen-dialog {
  width:min(1250px,calc(100vw - 32px))
}
.image-scroll {
  overflow:auto;
  max-height:calc(92dvh - 90px);
  touch-action:pan-x pan-y
}
.image-scroll img {
  max-width:none;
  width:100%;
  height:auto
}
.toast {
  position:fixed;
  z-index:1000;
  bottom:100px;
  left:50%;
  transform:translate(-50%,12px);
  background:var(--ink);
  color:var(--bg);
  max-width:calc(100vw - 40px);
  padding:14px 20px;
  font-size:14px;
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms var(--ease),transform 180ms var(--ease)
}
.toast.show {
  opacity:1;
  transform:translate(-50%,0)
}
@media(min-width:1600px) {
  .site-layout {
    gap:88px
  }
  .main-column {
    padding:56px
  }
  .profile-rail {
    padding-left:56px
  }
}
@media(max-width:1099px) {
  .wrap {
    width:calc(100% - 64px)
  }
  .site-layout {
    display:block;
    padding-top:24px
  }
  .profile-rail {
    position:static;
    padding-left:40px;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:40px;
    padding-top:0;
    padding-bottom:56px
  }
  .identity {
    grid-column:1;
    grid-row:1/5
  }
  .identity h1 {
    font-size:48px
  }
  .profile-value {
    grid-column:2;
    grid-row:1;
    margin-top:0
  }
  .profile-summary {
    grid-column:2;
    grid-row:2
  }
  .profile-rail>.primary {
    grid-column:2;
    grid-row:3;
    margin-top:24px
  }
  .profile-rail>.action-note {
    grid-column:2;
    grid-row:4
  }
  .rail-links {
    grid-column:1;
    grid-row:5;
    margin-top:20px
  }
  .main-column {
    padding:40px
  }
  .block+.block {
    margin-top:88px
  }
  .presentation-section {
    margin-inline:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    padding:28px;
    align-items:center
  }
  .presentation-section h2 {
    font-size:30px
  }
  .before-after .comparison-summary {
    min-height:58px
  }
  .dialog-bar {
    flex-wrap:wrap
  }
}
@media(max-width:600px) {
  html {
    scroll-padding-top:16px
  }
  .wrap {
    width:calc(100% - 40px)
  }
  .site-header {
    padding-block:17px;
    gap:20px
  }
  .brand {
    width:132px
  }
  .desktop-nav {
    display:none
  }
  .mobile-menu {
    display:block;
    position:relative
  }
  .mobile-menu>summary {
    list-style:none;
    min-height:44px;
    display:flex;
    align-items:center;
    padding:10px 8px;
    font-size:14px
  }
  .mobile-menu>summary::-webkit-details-marker {
    display:none
  }
  .mobile-menu>nav {
    position:absolute;
    top:52px;
    right:0;
    z-index:30;
    background:var(--surface-2);
    width:min(290px,calc(100vw - 40px));
    padding:16px
  }
  .mobile-menu>nav>a {
    display:flex;
    align-items:center;
    min-height:48px;
    padding:10px 14px;
    font-size:16px
  }
  .mobile-menu>nav>a:hover {
    background:var(--bg)
  }
  .site-layout {
    padding-top:22px
  }
  .profile-rail {
    display:block;
    padding-left:0;
    padding-bottom:48px
  }
  .identity {
    display:flex;
    align-items:center;
    gap:22px
  }
  .identity .portrait {
    width:88px;
    flex-shrink:0;
    margin:5px
  }
  .identity h1 {
    font-size:clamp(32px,9.2vw,48px);
    line-height:1.08
  }
  .profile-value {
    font-size:24px;
    line-height:1.35;
    margin-top:27px;
    max-width:25ch
  }
  .profile-summary {
    font-size:16px;
    margin-top:18px;
    max-width:40ch
  }
  .profile-rail>.primary {
    margin-top:24px
  }
  .profile-rail>.action-note {
    margin-top:12px
  }
  .rail-links {
    margin-top:14px;
    gap:10px 28px
  }
  .main-column {
    padding:28px 20px;
    margin-inline:-20px
  }
  .block {
    scroll-margin-top:24px
  }
  .block+.block {
    margin-top:72px
  }
  h2 {
    font-size:34px;
    line-height:1.15
  }
  .section-lead {
    font-size:20px;
    line-height:1.5;
    margin-top:22px
  }
  .project-caption {
    font-size:14px;
    margin-top:13px
  }
  .project-meta {
    gap:16px;
    font-size:14px;
    margin-top:23px
  }
  .product-view {
    margin-top:24px
  }
  .product-screen figcaption {
    font-size:14px;
    line-height:1.5
  }
  .view-controls>button {
    font-size:14px
  }
  .before-after {
    gap:12px;
    margin-top:28px
  }
  .before-after>article {
    padding:19px 12px
  }
  .before-after h3 {
    font-size:16px
  }
  .before-after .comparison-summary {
    font-size:18px;
    line-height:1.4;
    min-height:68px;
    margin-top:16px
  }
  .before-after p:last-child {
    font-size:16px;
    line-height:1.55;
    margin-top:19px;
    hyphens:auto;
    overflow-wrap:break-word
  }
  .case-role {
    margin-top:28px
  }
  .service-list {
    margin-top:24px;
    gap:10px
  }
  .service-list details {
    padding:18px
  }
  .service-list summary {
    font-size:20px;
    gap:14px
  }
  .presentation-section {
    display:block;
    padding:24px 20px;
    margin-inline:0
  }
  .presentation-section h2 {
    font-size:30px
  }
  .presentation-section p {
    font-size:16px;
    margin-top:18px
  }
  .presentation-section .text-link {
    margin-bottom:18px
  }
  .process {
    gap:27px;
    margin-top:28px
  }
  .process h3 {
    font-size:20px
  }
  .process li {
    padding-left:28px
  }
  .contact-list strong {
    font-size:18px
  }
  .contact-list {
    margin-top:24px;
    gap:6px
  }
  .contact-section>.primary {
    margin-top:24px
  }
  .contact-section>.text-link {
    font-size:16px
  }
  .site-footer {
    margin-top:72px;
    padding-bottom:24px
  }
  .site-footer p {
    font-size:14px
  }
  .dialog-bar {
    padding:14px 16px;
    gap:10px
  }
  .dialog-bar h2 {
    font-size:18px
  }
  .dialog-bar label {
    font-size:14px;
    gap:8px
  }
  .dialog-bar input {
    width:70px
  }
  .dialog-bar button {
    padding:10px 12px
  }
  #screen-dialog {
    max-width:100vw;
    width:100vw;
    max-height:100dvh
  }
  .image-scroll {
    max-height:calc(100dvh - 140px)
  }
  .toast {
    bottom:92px
  }
}
@media(max-width:359px) {
  .wrap {
    width:calc(100% - 32px)
  }
  .main-column {
    margin-inline:-16px;
    padding-inline:16px
  }
  .identity {
    gap:17px
  }
  .identity .portrait {
    width:72px
  }
  .identity h1 {
    font-size:32px
  }
  .profile-value {
    font-size:22px
  }
  .before-after {
    gap:10px
  }
  .before-after>article {
    padding:17px 10px
  }
  .before-after .comparison-summary {
    font-size:17px;
    min-height:78px
  }
  .before-after p:last-child {
    font-size:16px
  }
  .project-meta {
    grid-template-columns:1fr;
    gap:12px
  }
  .service-list summary {
    font-size:18px
  }
  .presentation-section h2 {
    font-size:28px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}
.mobile-evidence {
  margin-top:40px
}
.mobile-evidence>h3 {
  font-size:24px
}
.mobile-evidence>p {
  font-size:16px;
  color:var(--muted);
  margin-top:16px
}
.mobile-gallery {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:24px
}
.mobile-gallery img {
  width:100%;
  height:auto
}
.mobile-gallery figcaption {
  font-size:14px;
  color:var(--muted);
  margin-top:12px
}
@media(max-width:600px) {
  .mobile-gallery {
    gap:16px
  }
  .mobile-gallery figcaption {
    font-size:14px
  }
}
.email-row>button:hover,.mobile-menu>summary:hover,.service-list>details>summary:hover {
  color:var(--accent)
}
.dialog-bar>button:hover {
  background:var(--ink);
  color:var(--bg)
}
.case-contact {
  display:none
}
@media(max-width:600px) {
  .case-contact {
    display:flex;
    width:100%;
    margin-top:28px
  }
}