/* ═══════════════════════════════════════════════════════════
   OKENWA LABS — design system
   Shared stylesheet for all pages
   ═══════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

:root{
  --bone:       #FAFAF7;
  --bone-2:     #F2F2ED;
  --bone-3:     #ECEBE5;
  --ink:        #111112;
  --ink-2:      #1A1A1C;
  --t1:         #2A2A2D;
  --t2:         #5A5A5F;
  --t3:         #8A8A90;
  --rule:       rgba(17,17,18,0.09);
  --rule-strong:rgba(17,17,18,0.18);
  --signal:     #E54D1A;
  --signal-dim: rgba(229,77,26,0.08);

  --fs: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --fm: 'JetBrains Mono', ui-monospace, monospace;
  --fd: 'Fraunces', Georgia, serif;

  --maxw: 1280px;
  --cols: 12;
  --gutter: 24px;
  --edge: 40px;
}

body{
  font-family:var(--fs);
  background:var(--bone);
  color:var(--t1);
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.005em;
  overflow-x:hidden;
}

/* ─── typography utilities ─── */
.mono{font-family:var(--fm);font-size:11px;letter-spacing:.02em;color:var(--t3);font-weight:500;}
.mono-ink{font-family:var(--fm);font-size:11px;color:var(--ink);font-weight:500;letter-spacing:.02em;}
.mono-sig{font-family:var(--fm);font-size:11px;color:var(--signal);font-weight:500;letter-spacing:.02em;}

/* ─── grid scaffold ─── */
.shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--edge);position:relative;}
.grid-12{
  display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  gap:var(--gutter);
}

/* ═══════════════════════════════════════════════════════════
   WORDMARK LOGO
   ═══════════════════════════════════════════════════════════ */

.wordmark{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  text-decoration:none;
  font-family:var(--fd);
  line-height:1;
  color:var(--ink);
}
.wordmark-primary{
  font-weight:500;
  letter-spacing:-.028em;
  color:var(--ink);
  font-variation-settings:"opsz" 48;
}
.wordmark-secondary{
  font-weight:300;
  font-style:italic;
  letter-spacing:-.028em;
  color:var(--signal);
  font-variation-settings:"opsz" 48,"SOFT" 100;
}

/* wordmark sizes */
.wordmark-sm .wordmark-primary,
.wordmark-sm .wordmark-secondary{font-size:19px;}

.wordmark-md .wordmark-primary,
.wordmark-md .wordmark-secondary{font-size:26px;}

.wordmark-lg .wordmark-primary,
.wordmark-lg .wordmark-secondary{font-size:36px;}

/* dark-surface variant */
.wordmark-on-dark .wordmark-primary{color:var(--bone);}
.wordmark-on-dark .wordmark-secondary{color:var(--signal);}

/* ─── top bar ─── */
.topbar{
  position:sticky;top:0;z-index:100;
  background:rgba(250,250,247,0.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}
.topbar-inner{
  max-width:var(--maxw);margin:0 auto;padding:14px var(--edge);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.tb-nav{display:flex;align-items:center;gap:6px;}
.tb-nav a{
  font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:.02em;
  color:var(--t2);text-decoration:none;padding:8px 12px;border-radius:4px;
  transition:background .15s,color .15s;
}
.tb-nav a:hover,.tb-nav a.active{background:var(--rule);color:var(--ink);}
/* CSS-only fallback for in-page anchor menu items (e.g. Engagement → #engagement). */
/* When the URL hash targets a section, style the matching menu link. Works without JS */
/* in any browser supporting :has() (Chrome/Edge 105+, Safari 15.4+, Firefox 121+). */
body:has(#engagement:target) .tb-nav a[href$="#engagement"]:not(.tb-cta){background:var(--rule);color:var(--ink);}
.tb-cta{
  font-family:var(--fm);font-size:11px;font-weight:500;color:var(--bone);
  background:var(--ink);padding:9px 14px;border-radius:4px;text-decoration:none;
  transition:background .2s;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:8px;
}
.tb-cta:hover{background:var(--signal);}
.tb-cta .dot{width:6px;height:6px;border-radius:50%;background:var(--signal);}
.tb-cta:hover .dot{background:var(--bone);}
.tb-cta--in-nav{display:none;}
.tb-burger{
  display:none;flex-direction:column;align-items:center;justify-content:center;
  width:36px;height:36px;padding:8px;
  background:transparent;border:none;border-radius:4px;cursor:pointer;
  transition:background .15s;
}
.tb-burger:hover{background:var(--rule);}
.tb-burger > span{
  display:block;width:18px;height:1.5px;background:var(--ink);
  border-radius:1px;transition:transform .2s,opacity .2s;
}
.tb-burger > span + span{margin-top:4px;}
.topbar.is-open .tb-burger > span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.topbar.is-open .tb-burger > span:nth-child(2){opacity:0;}
.topbar.is-open .tb-burger > span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

/* ─── buttons ─── */
.btn-primary{
  font-family:var(--fm);font-size:12px;font-weight:500;color:var(--bone);
  background:var(--ink);padding:14px 22px;border-radius:4px;text-decoration:none;
  display:inline-flex;align-items:center;gap:12px;transition:background .2s;
  letter-spacing:.02em;cursor:pointer;border:none;
}
.btn-primary:hover{background:var(--signal);}
.btn-primary .arr{transition:transform .2s;}
.btn-primary:hover .arr{transform:translateX(3px);}
.btn-ghost{
  font-family:var(--fm);font-size:12px;font-weight:500;color:var(--ink);
  padding:14px 18px;text-decoration:none;
  display:inline-flex;align-items:center;gap:10px;letter-spacing:.02em;
  border-bottom:1px solid var(--ink);border-radius:0;
  transition:color .15s,border-color .15s;background:transparent;cursor:pointer;
}
.btn-ghost:hover{color:var(--signal);border-color:var(--signal);}

/* ─── section header pattern ─── */
.sec{padding:100px 0;border-top:1px solid var(--rule);}
.sec-shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--edge);}
.sec-head{
  display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:var(--gutter);
  padding-bottom:40px;border-bottom:1px solid var(--rule);margin-bottom:48px;
}
.sec-idx{grid-column:1 / 3;display:flex;flex-direction:column;gap:8px;}
.sec-idx .num{font-family:var(--fm);font-size:13px;color:var(--ink);font-weight:600;}
.sec-idx .cat{font-family:var(--fm);font-size:11px;color:var(--t3);font-weight:500;letter-spacing:.04em;text-transform:uppercase;}
.sec-title-block{grid-column:3 / 10;}
.sec-title{
  font-family:var(--fs);font-weight:500;
  font-size:clamp(28px,3.4vw,44px);
  line-height:1.04;letter-spacing:-.025em;color:var(--ink);
  margin-bottom:16px;
}
.sec-sub{font-size:16px;color:var(--t2);line-height:1.55;max-width:56ch;font-weight:400;}

/* ─── footer ─── */
footer{padding:60px 0 36px;border-top:1px solid var(--rule);background:var(--bone);margin-top:80px;}
.foot-shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--edge);}
.foot-top{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:40px;border-bottom:1px solid var(--rule);
}
.foot-top h3{font-family:var(--fm);font-size:10px;color:var(--t3);font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px;}
.foot-top ul{list-style:none;display:flex;flex-direction:column;gap:9px;}
.foot-top a,.foot-top li{font-family:var(--fs);font-size:13px;color:var(--t1);text-decoration:none;transition:color .15s;}
.foot-top a:hover{color:var(--signal);}
.foot-brand p{font-size:13px;color:var(--t2);line-height:1.6;max-width:36ch;margin-top:14px;}
.foot-brand .wordmark{margin-bottom:10px;}
.foot-bottom{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-top:24px;flex-wrap:wrap;gap:16px;
}

/* ─── reveal (no-op) ─── */
/* .rev / .vis classes are kept for legacy markup but no longer hide content. */
/* Content is now always visible regardless of JS state — the previous opacity-0 */
/* default caused entire sections to disappear if JS failed, was deferred late, */
/* or was blocked by CSP. Keeping the class for backward compatibility. */
.rev,.rev.vis{opacity:1;transform:none;}

/* ─── responsive base ─── */
@media(max-width:1024px){
  :root{--edge:28px;--gutter:20px;}
  .sec-idx{grid-column:1 / 4;}
  .sec-title-block{grid-column:4 / -1;}
}
@media(max-width:720px){
  :root{--edge:20px;}
  .topbar-inner{padding:12px var(--edge);gap:12px;}
  .tb-nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(250,250,247,0.98);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--rule);
    padding:8px var(--edge) 20px;
  }
  .topbar.is-open .tb-nav{display:flex;}
  .tb-nav a:not(.tb-cta){padding:14px 12px;font-size:13px;}
  .tb-nav .tb-cta{margin-top:10px;align-self:flex-start;}
  .tb-cta--top{display:none;}
  .tb-cta--in-nav{display:inline-flex;}
  .tb-burger{display:inline-flex;}
  .sec{padding:64px 0;}
  .sec-head{padding-bottom:28px;margin-bottom:32px;}
  .sec-idx{grid-column:1 / -1;flex-direction:row;gap:16px;align-items:center;}
  .sec-title-block{grid-column:1 / -1;}
  .sec-title{font-size:28px;}
  .sec-sub{font-size:14px;}
  .foot-top{grid-template-columns:1fr;gap:28px;}
  .foot-bottom{flex-direction:column;align-items:flex-start;}
  .btn-primary,.btn-ghost{font-size:11px;padding:12px 18px;}
  .wordmark-sm .wordmark-primary,
  .wordmark-sm .wordmark-secondary{font-size:17px;}
}

/* ─── a11y utilities ─── */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ─── focus visibility (keyboard) ─── */
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:3px;}
.cap:focus-visible,.btn-primary:focus-visible,.tb-cta:focus-visible{outline-offset:4px;}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.subscribe-row input:focus-visible{outline-offset:0;}