/* ============================================================
   Oh Shift BV — Signal theme
   ============================================================ */

:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --muted:#33332f;
  --faint:#6b6b66;
  --line:#111111;
  --hair:#d8d8d2;
  --band:#111111;              /* dark sections */
  --accent:oklch(0.68 0.2 42); /* signal orange */
  --accent-ink:#160a02;        /* text on accent */
  --accent-soft:oklch(0.62 0.2 40);
  --radius:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'IBM Plex Sans',sans-serif;color:var(--ink);background:var(--paper);line-height:1.5;-webkit-font-smoothing:antialiased}
.disp{font-family:'Archivo',sans-serif}
.mono{font-family:'IBM Plex Mono',monospace}
a{color:inherit;text-decoration:none}
a:hover{opacity:.72}
em{font-style:italic}
img{display:block;max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}

/* ---------- buttons ---------- */
.btn{font-family:'Archivo',sans-serif;font-weight:800;font-size:16px;padding:16px 28px;display:inline-block;border-radius:var(--radius);transition:opacity .15s,transform .15s}
.btn:hover{transform:translateY(-1px);opacity:1}
.btn--solid{background:var(--accent);color:var(--accent-ink)}
.btn--ghost-band{border:1px solid #4a4a4a;color:#fff}
.btn--onband{background:var(--accent);color:var(--accent-ink)}
.btn--onband-ghost{border:1px solid #4a4a4a;color:#fff}

/* ---------- nav ---------- */
header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:2px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:0 auto;padding:16px 40px}
nav .logo{height:44px}
nav ul{list-style:none;display:flex;align-items:center;gap:32px}
nav a.link{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;letter-spacing:.02em}
.nav-cta{font-family:'Archivo',sans-serif;font-weight:800;font-size:14px;background:var(--accent);color:var(--accent-ink);padding:11px 20px;border-radius:var(--radius);border:0;cursor:pointer;line-height:1;letter-spacing:.04em;min-width:56px;transition:opacity .15s}
.nav-cta:hover{opacity:.82}
.nav-cta:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- hero ---------- */
.hero{background:var(--band);color:#fff;padding:88px 0 78px}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:oklch(0.78 0.16 55);margin-bottom:30px}
.hero h1{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(44px,7vw,90px);line-height:0.96;letter-spacing:-.03em;max-width:15ch}
.hero p{font-size:clamp(17px,1.6vw,21px);line-height:1.55;max-width:60ch;margin-top:34px;color:#c9c9c4}
.hero .cta{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap}
.accent-word{color:var(--accent)}

.sectors{background:var(--accent)}
.sectors .wrap{display:flex;flex-wrap:wrap;gap:36px;padding-top:18px;padding-bottom:18px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--accent-ink)}

/* ---------- section shell ---------- */
section.block{padding:80px 0}
.kicker{display:flex;align-items:baseline;gap:16px;margin-bottom:44px}
.kicker span{font-family:'Archivo',sans-serif;font-size:15px;font-weight:800;color:var(--accent-soft)}
.kicker h2{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(30px,4vw,40px);letter-spacing:-.02em}
.note{font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--faint);margin:-30px 0 40px}

/* ---------- services (cards) ---------- */
.svc{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.svc-row{border:2px solid #111;border-radius:16px;padding:30px 26px;background:#fff}
.svc-row .idx{font-family:'Archivo',sans-serif;font-size:15px;font-weight:800;color:var(--accent-soft);margin-bottom:18px}
.svc-row h3{font-family:'Archivo',sans-serif;font-weight:800;font-size:23px;letter-spacing:-.01em;line-height:1.12;margin-bottom:12px}
.svc-row p{font-size:15.5px;color:var(--muted);line-height:1.6}
.svc-row.dark{background:#111;color:#fff}
.svc-row.dark p{color:#c9c9c4}
.svc-row.dark .idx{color:oklch(0.78 0.19 50)}

/* ---------- how I work ---------- */
.work{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.work .cell{padding:30px 26px;background:#f3f3ef;border-radius:16px;border-left:5px solid var(--accent)}
.work h4{font-family:'Archivo',sans-serif;font-weight:800;font-size:20px;margin-bottom:13px}
.work p{font-size:15.5px;color:var(--muted);line-height:1.6}

/* ---------- about ---------- */
.about{background:#faf8f5}
.about .grid{display:grid;grid-template-columns:1fr 1.4fr;gap:52px;align-items:center}
.about .lede{font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(22px,2.6vw,27px);line-height:1.35;letter-spacing:-.01em;max-width:34ch}
.about .body{font-size:17px;color:var(--muted);line-height:1.6;margin-top:22px;max-width:54ch}
.about .body strong{color:var(--ink);font-weight:600}
.about .sig{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--faint);margin-top:24px}
.about .figure{display:flex;justify-content:center;background:#fff;border:2px solid #111;border-radius:20px;padding:34px}
.about .figure img{height:270px}

/* ---------- contact ---------- */
.contact{background:var(--band);color:#fff;padding:88px 0}
.contact .eyebrow{color:oklch(0.78 0.16 55)}
.contact h2{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(38px,5.5vw,64px);line-height:0.99;letter-spacing:-.03em;max-width:16ch}
.contact .cta{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap}
.contact .foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;margin-top:74px;padding-top:24px;border-top:1px solid #2a2a2a;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#8a8a84;letter-spacing:.02em}

/* ---------- responsive ---------- */
@media(max-width:860px){
  nav ul li.link-item{display:none}
  .svc,.work,.about .grid{grid-template-columns:1fr}
  .about .figure{order:-1}
}