/* blackgem.io, look A (Obsidian). Generated from the looks build; edit there or here with care. */
@font-face{font-family:"Bodoni Moda";src:url("/fonts/bodoni-moda.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:block}
@font-face{font-family:"Hanken Grotesk";src:url("/fonts/hanken-grotesk.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{background:var(--ground);color:var(--ink-body);font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-wrap:pretty}

a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;
  text-decoration-color:var(--underline);transition:text-decoration-color .16s ease-out;overflow-wrap:anywhere}

a:hover{text-decoration-color:currentColor}

a:focus-visible,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

h1,h2,h3{text-wrap:balance}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;
  font:600 15px/1 var(--sans);text-decoration:none;transition:background-color .2s ease-out,color .2s ease-out,border-color .2s ease-out}

.btn-primary{background:var(--gold);color:var(--on-gold)}

.btn-primary:hover{background:var(--gold-hi)}

.btn-quiet{color:var(--ink);border:1px solid var(--line-strong)}

.btn-quiet:hover{border-color:var(--ink)}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}
html{scroll-behavior:auto}
}


.wordmark{position:relative;display:inline-block;font-family:"Bodoni Moda","Didot","Times New Roman",serif;
  font-weight:400;line-height:1;letter-spacing:.08em;margin-right:-.08em;text-transform:uppercase;color:var(--ink)}

.wordmark.big{font-size:clamp(56px,10vw,96px)}

.wordmark.big::after{content:"";position:absolute;left:50%;bottom:-8px;width:40px;height:1px;transform:translateX(-50%);background:var(--gold)}

@media (max-width:380px){.wordmark.big{font-size:14vw}
}

.navmark{font-family:"Bodoni Moda","Didot","Times New Roman",serif;font-size:18px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);text-decoration:none}


.nav{position:fixed;inset:0 0 auto;z-index:20;padding-top:env(safe-area-inset-top,0px);transition:background-color .3s ease-out,border-color .3s ease-out;border-bottom:1px solid transparent}

.nav.scrolled{background:var(--nav-bg);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);border-bottom-color:var(--line)}

.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}

.nav-links{display:flex;gap:28px}

.nav-links a{font-size:15px;font-weight:500;color:var(--ink-body);text-decoration:none}

.nav-links a:hover{color:var(--ink)}

@media (max-width:520px){.nav-links{gap:18px}
.nav-links a{font-size:14px}
}

@media (max-width:400px){.nav-links a[href="#approach"]{display:none}
}


.footer{border-top:1px solid var(--line);padding:48px 0 max(40px,env(safe-area-inset-bottom,0px))}

.footer-top{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between;margin-bottom:28px}

.footer-links{display:flex;flex-wrap:wrap;gap:12px 24px}

.footer-links a{font-size:14px;color:var(--ink-body);text-decoration:none}

.footer-links a:hover{color:var(--ink)}

.copy{font-size:14px;color:var(--ink-quiet)}

.notice{margin-top:6px;font-size:13px;line-height:1.55;color:var(--ink-quiet);max-width:46em}


/* Look A, Obsidian. The wordmark leads the hero on the dark of the stone,
   warmed toward its gold. */
:root{--ground:#0E0C0B;--raised:#16120F;--ink:#F2EEE9;--ink-body:#B9B3AC;--ink-quiet:#938D86;--gold:#C4A87C;--gold-hi:#D3BA92;
  --on-gold:#17120C;--line:#26211D;--line-strong:#3A332D;--underline:rgba(242,238,233,.35);--nav-bg:rgba(14,12,11,.78);
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--max:1120px;color-scheme:dark}

.hero{padding:clamp(150px,22vh,220px) 0 clamp(120px,16vh,160px);text-align:center}

.hero .lede{margin-top:48px;font-size:clamp(24px,3.2vw,32px);line-height:1.2;font-weight:500;letter-spacing:-.01em;color:var(--ink)}

.hero .body{max-width:34em;margin:18px auto 0;font-size:18px;color:var(--ink-body)}

.hero .actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:36px}

section{padding:112px 0}

.sec-h{font-size:clamp(30px,4vw,44px);line-height:1.1;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin-bottom:40px}

.work{border-top:1px solid var(--line)}

.feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;background:var(--raised);border-radius:28px;padding:56px}

.feature-art{display:flex;justify-content:center}

.product-icon{width:min(260px,100%);height:auto;border-radius:22.37%;box-shadow:0 0 0 1px rgba(242,238,233,.10),0 24px 60px rgba(0,0,0,.45)}

.feature h3{font-size:32px;line-height:1.1;font-weight:600;letter-spacing:-.015em;color:var(--ink)}

.feature .line{margin-top:10px;font-size:19px;color:var(--ink-body)}

.specs{margin-top:28px;border-top:1px solid var(--line-strong)}

.spec{display:grid;grid-template-columns:9em 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-strong);font-size:16px}

.spec dt{color:var(--ink-quiet)}

.spec dd{color:var(--ink)}

.feature .btn{margin-top:28px}

.how-list{list-style:none;border-top:1px solid var(--line)}

.how-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px;padding:32px 0;border-bottom:1px solid var(--line)}

.how-row h3{font-size:21px;line-height:1.3;font-weight:600;color:var(--ink)}

.how-row p{font-size:18px;max-width:36em}

.contact{border-top:1px solid var(--line)}

.contact-inner{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px}

.contact .sec-h,.contact h2{font-size:clamp(30px,4vw,44px);line-height:1.1;font-weight:600;letter-spacing:-.02em;color:var(--ink)}

.contact-body p{font-size:19px;max-width:32em}

.contact-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:28px}

.contact-address{font-size:16px;color:var(--ink-quiet);user-select:all}

.contact-noora{margin-top:28px;font-size:16px!important;color:var(--ink-quiet)}

@media (max-width:820px){
  .feature{grid-template-columns:1fr;gap:36px;padding:32px 24px}

  .product-icon{width:180px}

  .how-row,.contact-inner{grid-template-columns:1fr;gap:10px}

  .contact-inner{gap:24px}

  section{padding:88px 0}

  .hero{padding:140px 0 104px}

}

@media (max-width:420px){.spec{grid-template-columns:6.5em 1fr}
.hero .body{font-size:17px}
}




/* The 404 page. */
.missing{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:96px 0}
.missing h1{margin-top:48px;font-size:clamp(30px,4vw,44px);line-height:1.1;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.missing p{margin-top:14px;font-size:18px;max-width:34em}