@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#090909;
  --surface:#10100f;
  --surface-2:#151513;
  --text:#f2f1ec;
  --soft:#b7b5ae;
  --faint:#74726c;
  --rule:#292925;
  --rule-strong:#3b3b35;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--text)}
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
::selection{background:var(--text);color:var(--bg)}
a{color:inherit}

.home{
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
}
.site-header{
  min-height:86px;
  padding:0 clamp(24px,5vw,72px);
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--rule);
}
.brand{
  display:flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
}
.brand img{
  width:66px;
  height:66px;
  object-fit:contain;
  filter:brightness(0) invert(1);
}
.brand-name{
  font-family:"Barlow Condensed",Inter,sans-serif;
  font-size:1.35rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.home-main{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);
  gap:clamp(48px,8vw,120px);
  align-items:center;
  padding:clamp(64px,9vw,128px) 0;
}
.hero-kicker,.section-kicker,.legal-kicker{
  margin:0 0 12px;
  font-family:"Barlow Condensed",Inter,sans-serif;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--faint);
}
.hero-title{
  margin:0;
  font-family:"Barlow Condensed",Inter,sans-serif;
  font-size:clamp(4.8rem,10vw,9.5rem);
  line-height:.78;
  font-weight:500;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.hero-quote{
  margin:26px 0 0;
  max-width:520px;
  color:var(--soft);
  font-size:1rem;
  line-height:1.7;
}
.hero-quote strong{color:var(--text);font-weight:500}
.services{
  border-top:1px solid var(--rule-strong);
}
.service{
  min-height:104px;
  display:grid;
  grid-template-columns:52px 1fr auto;
  gap:18px;
  align-items:center;
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  transition:background .15s ease,color .15s ease;
}
.service{
  position:relative;
  isolation:isolate;
}
.service::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  right:0;
  bottom:0;
  left:70px;
  background:var(--text);
  opacity:0;
  transition:opacity .15s ease;
}
.service:hover{background:transparent;color:var(--text)}
.service:hover::before{opacity:1}
.service:hover .service-copy,
.service:hover .service-arrow{color:var(--bg)}
.service-icon{
  width:42px;height:42px;
  display:grid;place-items:center;
  border:1px solid currentColor;
}
.service-icon svg{width:20px;height:20px;stroke:currentColor}
.service-title{
  font-family:"Barlow Condensed",Inter,sans-serif;
  font-size:1.5rem;
  font-weight:500;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.service-desc{
  margin-top:3px;
  color:var(--faint);
  font-size:.72rem;
  letter-spacing:.05em;
}
.service:hover .service-desc{color:inherit;opacity:.7}
.service-arrow{
  font-family:"Barlow Condensed",Inter,sans-serif;
  font-size:1.5rem;
  padding-right:18px;
}
.service-copy{
  padding-left:18px;
}
.site-footer{
  min-height:70px;
  padding:0 clamp(24px,5vw,72px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--rule);
  color:var(--faint);
  font-size:.72rem;
}
.site-footer nav{display:flex;gap:20px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--text)}

.legal-page{
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
}
.legal-main{
  width:min(820px,calc(100% - 48px));
  margin:0 auto;
  padding:clamp(64px,9vw,120px) 0;
}
.legal-title{
  margin:0 0 44px;
  font-family:"Barlow Condensed",Inter,sans-serif;
  font-size:clamp(3.4rem,7vw,6.4rem);
  line-height:.84;
  font-weight:500;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.legal-rule{height:1px;background:var(--rule-strong);margin:0 0 36px}
.legal-copy p{
  margin:0 0 22px;
  color:var(--soft);
  font-size:.95rem;
  line-height:1.8;
}
.legal-copy p strong{color:var(--text)}
.legal-back{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:30px;
  padding:10px 0;
  text-decoration:none;
  font-family:"Barlow Condensed",Inter,sans-serif;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  border-bottom:1px solid var(--rule-strong);
}
.legal-back:hover{border-color:var(--text)}
.legal-meta{
  margin-top:44px;
  padding-top:18px;
  border-top:1px solid var(--rule);
  color:var(--faint);
  font-size:.72rem;
}

@media(max-width:820px){
  .home-main{grid-template-columns:1fr;gap:56px}
  .hero-title{font-size:clamp(4.2rem,20vw,7rem)}
}
@media(max-width:560px){
  .site-header{min-height:72px;padding:0 18px}
  .brand img{width:52px;height:52px}
  .home-main,.legal-main{width:min(100% - 32px,1180px)}
  .home-main{padding:56px 0}
  .service{grid-template-columns:44px 1fr auto;gap:12px}
  .service-title{font-size:1.25rem}
  .site-footer{padding:18px;align-items:flex-start;flex-direction:column}
}

.service-copy{
  display:flex;
  align-items:baseline;
  gap:9px;
  min-width:0;
  flex-wrap:wrap;
}
.service-copy .service-desc{margin-top:0}
/* Dawwin public project page */
.about-main{position:relative}
.about-mark{width:76px;height:76px;margin:0 0 26px;display:grid;place-items:center}
.about-mark img{width:68px;height:68px;object-fit:contain}
.about-copy h2{margin:54px 0 16px;padding-top:22px;border-top:1px solid var(--rule);font-family:"Barlow Condensed",Inter,sans-serif;font-size:1.55rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.about-lede{font-size:1.08rem!important;color:var(--text)!important}
.about-list{border-top:1px solid var(--rule-strong);margin:26px 0 8px}
.about-list>div{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--rule)}
.about-list strong,.support-item strong{font-family:"Barlow Condensed",Inter,sans-serif;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.about-list span,.support-item span{color:var(--soft);font-size:.86rem;line-height:1.65}
.support-links{border-top:1px solid var(--rule-strong);margin:26px 0 8px}
.support-item{display:grid;grid-template-columns:190px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--rule);text-decoration:none}
a.support-item:hover strong{color:#fff}a.support-item:hover span{color:var(--text)}
.about-actions{display:flex;gap:28px;flex-wrap:wrap}
.about-copy a{color:var(--text);text-decoration-color:var(--rule-strong);text-underline-offset:3px}
@media(max-width:560px){.about-list>div,.support-item{grid-template-columns:1fr;gap:6px}.about-mark{width:64px;height:64px}.about-mark img{width:58px;height:58px}}