/* Kilo Tech Ventures corporate site */

:root{
  --paper:#F4F5F0;
  --band:#24331B;
  --onband:#E7EBDC;
  --onband-dim:#A9B79A;
  --ink:#16190F;
  --stone:#5F6857;
  --rule:#BFC5B4;
  --hair:#DCDFD3;
  --link:#2E3F22;
  --edge:#24331B;
  --focus:#24331B;
  --card:#FFFFFF;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#0D1008;
    --band:#212D17;
    --onband:#E7EBDC;
    --onband-dim:#8C9781;
    --ink:#E8EBE0;
    --stone:#8C9581;
    --rule:#2E3724;
    --hair:#212A1A;
    --link:#B9C9A2;
    --edge:#415333;
    --focus:#B9C9A2;
    --card:#141A0E;
  }
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  color:var(--ink);
  font-family:"Public Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.inner{
  width:100%;
  max-width:1000px;
  margin-inline:auto;
  padding-inline:28px;
}

a{color:var(--link)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.skip{
  position:absolute;
  left:-9999px;
  background:var(--band);
  color:var(--onband);
  padding:10px 16px;
}
.skip:focus{left:8px;top:8px;z-index:10}

/* ---------- letterhead band ---------- */
.band{
  background:var(--band);
  color:var(--onband);
  padding-block:14px;
}
.band .inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px 28px;
  flex-wrap:wrap;
}
.wordmark{text-decoration:none;color:inherit;display:block}
.wordmark .en{
  display:block;
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:21px;
  font-weight:600;
  line-height:1.25;
}
.wordmark .sub{
  display:flex;
  gap:12px;
  align-items:baseline;
  flex-wrap:wrap;
  margin-top:3px;
  font-size:12.5px;
  color:var(--onband-dim);
}
.ar{font-family:"IBM Plex Sans Arabic","Public Sans",sans-serif}

.band nav{display:flex;flex-wrap:wrap}
.band nav a{
  font-size:14.5px;
  font-weight:500;
  color:var(--onband-dim);
  text-decoration:none;
  border-bottom:2px solid transparent;
  padding:2px 1px 5px;
  margin-inline-start:22px;
}
.band nav a:hover{color:var(--onband)}
.band nav a[aria-current="page"]{color:var(--onband);border-bottom-color:var(--onband)}
.band :focus-visible{outline-color:var(--onband)}

.double{border-top:3px solid var(--edge);border-bottom:1px solid var(--edge);height:3px}

/* ---------- page ---------- */
main{flex:1;padding-block:clamp(30px,5vw,54px) clamp(34px,6vw,64px)}

h1{
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:clamp(28px,4vw,42px);
  line-height:1.16;
  font-weight:600;
  letter-spacing:-.008em;
  margin:0 0 14px;
  max-width:24ch;
  text-wrap:balance;
}
.lede{
  margin:0;
  max-width:60ch;
  font-size:clamp(16px,1.6vw,18px);
  color:var(--stone);
  line-height:1.55;
}
p{max-width:68ch}

h2{
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:clamp(20px,2.4vw,25px);
  font-weight:600;
  margin:0 0 6px;
  letter-spacing:-.005em;
}
h3{font-size:16px;font-weight:600;margin:0 0 4px}

hr{border:0;border-top:1px solid var(--hair);margin:clamp(26px,4vw,40px) 0 0}

/* ---------- products: the primary visual weight ---------- */
.products{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(20px,3vw,32px);
  margin-top:clamp(16px,2.4vw,22px);
  padding:0;
  list-style:none;
}
.product{
  background:var(--card);
  border:1px solid var(--hair);
  border-top:3px solid var(--edge);
  padding:clamp(20px,2.6vw,28px);
  display:flex;
  flex-direction:column;
}
.section-heading{
  margin:clamp(26px,4vw,38px) 0 0;
  font-size:clamp(18px,2vw,21px);
}
.product h2,.product-name{
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:clamp(20px,2.4vw,25px);
  font-weight:600;
  letter-spacing:-.005em;
  margin:0 0 6px;
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}
.product h2 .ar,.product-name .ar{font-size:15px;font-weight:400;color:var(--stone)}
.product p{margin:0 0 14px;color:var(--stone);max-width:46ch}
.product .links{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  font-size:15px;
  margin-top:auto;
}
.product .links a{
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:1px;
}
.product .links a:hover{border-bottom-color:var(--link)}

/* ---------- rows ---------- */
.rows{margin-top:clamp(22px,3vw,30px)}
.row{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:2px 28px;
  padding-block:11px;
  border-top:1px solid var(--hair);
  align-items:baseline;
}
.row dt{font-weight:500;margin:0}
.row dd{margin:0;color:var(--stone);max-width:62ch}
.row dd a{text-decoration:none;border-bottom:1px solid var(--rule)}
.row dd a:hover{border-bottom-color:var(--link)}

.prose p{color:var(--stone);margin:0 0 14px}
.prose p:last-child{margin-bottom:0}
.prose h2{margin-top:clamp(24px,3vw,32px)}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--hair);
  padding-block:18px 26px;
  font-size:13.5px;
  color:var(--stone);
}
footer .inner{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px 24px;
  flex-wrap:wrap;
}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer a{text-decoration:none;border-bottom:1px solid transparent}
footer a:hover{border-bottom-color:var(--rule)}

@media (max-width:760px){
  .inner{padding-inline:20px}
  .band .inner{align-items:flex-start}
  .band nav a{margin-inline-start:0;margin-inline-end:20px}
  .row{grid-template-columns:1fr;gap:2px}
  h1{max-width:none}
}