/* Shared styles for every page except the homepage: same fonts and colors, reading typography, service-page blocks. */
@font-face { font-family:'Archivo Exp'; font-weight:700; font-stretch:125%; font-display:swap; src:url('/fonts/archivo-exp-700-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F; }
@font-face { font-family:'Archivo Exp'; font-weight:700; font-stretch:125%; font-display:swap; src:url('/fonts/archivo-exp-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family:'Geist'; font-weight:100 900; font-display:swap; src:url('/fonts/geist-var-latin.woff2') format('woff2'); }
@font-face { font-family:'Geist Mono'; font-weight:100 900; font-display:swap; src:url('/fonts/geist-mono-var-latin.woff2') format('woff2'); }
:root {
  --bg:#0b0a09; --panel:#100e0c; --line:#1e1c19; --line-2:#282520;
  --fg:#f2efe9; --fg-2:#a8a29a; --muted:#8a857c; --text:#d9d4cc;
  --brand:#ff641c; --ink:#180700;
  --mono:'Geist Mono', ui-monospace, Menlo, Consolas, monospace;
  --sans:'Geist', system-ui, sans-serif;
  --display:'Archivo Exp', var(--sans);
  --pad:clamp(16px,4vw,48px);
}
* { box-sizing:border-box; }
html { scroll-padding-top:80px; }
body {
  margin:0; color:var(--text); font:17px/1.75 var(--sans); -webkit-font-smoothing:antialiased;
  background:radial-gradient(900px 520px at 80% 0, rgba(255,100,28,.09), transparent 75%) no-repeat, var(--bg);
}
a { color:var(--brand); text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--brand); outline-offset:3px; border-radius:4px; }
.nav { position:sticky; top:0; z-index:40; border-bottom:1px solid var(--line); background:rgba(11,10,9,.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.nav .in { max-width:1240px; margin:0 auto; padding:0 var(--pad); display:flex; align-items:center; gap:18px; min-height:60px; }
.nav .name { margin-right:auto; font-family:var(--display); font-size:.86rem; text-transform:uppercase; color:var(--fg); white-space:nowrap; }
.nav .name:hover { text-decoration:none; }
/* section links read as buttons: outlined pills, same family as the secondary .btn */
.nav .link {
  font:500 .9rem var(--sans); color:var(--fg); min-height:40px; padding:0 16px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.02); display:flex; align-items:center;
  white-space:nowrap; transition:border-color .2s, background-color .2s;
}
.nav .link:hover { border-color:var(--brand); background:rgba(255,100,28,.07); text-decoration:none; }
.nav .cta { font:600 .78rem var(--mono); color:var(--ink); background:var(--fg); border-radius:999px; padding:0 16px; min-height:40px; display:flex; align-items:center; white-space:nowrap; }
.nav .cta:hover { background:#fff; text-decoration:none; }
/* phones lose "writing" first, then "services"; the footer always has both */
@media (max-width:640px) { .nav .link.minor { display:none; } }
@media (max-width:389px) { .nav .link { display:none; } }
article { max-width:740px; margin:0 auto; padding:clamp(40px,7vw,88px) var(--pad) 32px; }
h1 {
  font-family:var(--display); font-weight:700; text-transform:uppercase; color:#f7f5f1;
  font-size:clamp(1.9rem,5vw,3.1rem); line-height:.98; letter-spacing:-.035em; margin:0 0 22px; text-wrap:balance;
}
.dek { font-size:clamp(1.08rem,2.4vw,1.25rem); line-height:1.55; color:var(--fg-2); margin:0 0 18px; text-wrap:pretty; }
.meta { font:.78rem var(--mono); color:var(--muted); margin:0 0 44px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.lede { font-size:1.14rem; color:var(--fg); }
h2 {
  font-family:var(--display); font-weight:700; text-transform:uppercase; color:#f7f5f1;
  font-size:clamp(1.15rem,2.6vw,1.45rem); line-height:1.1; letter-spacing:-.02em; margin:56px 0 16px; text-wrap:balance;
}
h3 { font:600 1.12rem/1.3 var(--sans); color:var(--fg); margin:36px 0 10px; letter-spacing:-.01em; }
p, li { text-wrap:pretty; }
p { margin:0 0 18px; }
ul, ol { padding-left:1.3em; margin:0 0 20px; }
li { margin:0 0 10px; }
li::marker { color:var(--brand); }
strong { color:var(--fg); font-weight:600; }
code { font:.88em var(--mono); background:#17140f; border:1px solid var(--line); border-radius:5px; padding:.08em .35em; color:#e9e4dc; overflow-wrap:anywhere; }
figure.code { margin:22px 0 28px; }
figure.code figcaption { font:.72rem var(--mono); color:var(--muted); letter-spacing:.06em; margin:0 0 6px; }
/* font + line-height live on pre: an inline code inside can't shrink the line box below pre's own */
pre { margin:0; background:#0e0c0a; border:1px solid var(--line-2); border-radius:12px; padding:16px 18px; overflow-x:auto; font:.82rem/1.6 var(--mono); }
pre code { background:none; border:0; padding:0; font:inherit; color:#d6d2cb; overflow-wrap:normal; white-space:pre; }
.cta-box {
  margin:64px 0 0; padding:clamp(22px,4vw,34px); border-radius:18px; color:var(--ink);
  background:radial-gradient(120% 160% at 0% 0%, #ff7833 0%, var(--brand) 42%, #f45b14 100%);
}
.cta-box h2 { color:var(--ink); margin:0 0 10px; }
.cta-box p { color:rgba(24,7,0,.86); margin:0 0 20px; max-width:52ch; }
.cta-box a.btn { display:inline-flex; align-items:center; gap:10px; min-height:50px; padding:0 22px; border-radius:999px; background:var(--ink); color:var(--brand); font:600 .9rem var(--mono); transition:transform .3s cubic-bezier(.16,1,.3,1); }
.cta-box a.btn:hover { text-decoration:none; transform:translateY(-1px); }
.cta-box a.btn:active { transform:translateY(1px) scale(.98); }
footer { max-width:740px; margin:0 auto; padding:28px var(--pad) 56px; font:.76rem var(--mono); color:var(--muted); display:flex; flex-wrap:wrap; gap:10px 22px; }
@media (prefers-reduced-motion:reduce) { .cta-box a.btn { transition:none; } }

/* index list */
.posts { list-style:none; padding:0; margin:36px 0 0; border-top:1px solid var(--line); }
.posts li { margin:0; border-bottom:1px solid var(--line); }
.posts a { display:grid; gap:4px; padding:22px 0; color:inherit; }
.posts a:hover { text-decoration:none; }
.posts a:hover .t { color:var(--brand); }
.posts time { font:.74rem var(--mono); color:var(--brand); }
.posts .t { font:600 1.2rem/1.35 var(--sans); color:var(--fg); letter-spacing:-.01em; transition:color .2s; }
.posts .s { color:var(--fg-2); font-size:.98rem; }
.nav .link[aria-current="page"] { border-color:var(--fg-2); background:rgba(255,255,255,.07); }

/* ---- service pages ---- */
main.svc { max-width:1040px; margin:0 auto; padding:clamp(40px,7vw,96px) var(--pad) 0; }
main.svc ~ footer { max-width:1040px; }
/* "INFRASTRUCTURE" is ~11em wide in this face and can't wrap: size by viewport so it fits 320px */
.svc-hero h1 { font-size:clamp(1.5rem,8vw,4.1rem); max-width:17ch; margin-bottom:22px; }
.svc-hero .lead { font-size:clamp(1.08rem,2.4vw,1.28rem); line-height:1.55; color:var(--fg-2); max-width:56ch; margin:0 0 30px; }
.actions { display:flex; flex-wrap:wrap; gap:10px; }
.btn {
  min-height:50px; display:inline-flex; align-items:center; gap:10px; padding:0 22px; border-radius:999px;
  font:.9rem var(--mono); border:1px solid var(--line-2); color:var(--fg); background:rgba(255,255,255,.015);
  transition:transform .35s cubic-bezier(.16,1,.3,1), background-color .25s, border-color .25s;
}
.btn:hover { text-decoration:none; border-color:var(--brand); transform:translateY(-1px); }
.btn:active { transform:translateY(1px) scale(.98); transition-duration:.08s; }
.btn .p { color:var(--brand); }
.btn.primary { background:var(--brand); border-color:var(--brand); color:var(--ink); font-weight:600; }
.btn.primary .p { color:rgba(24,7,0,.55); }
.btn.primary:hover { background:#ff7c3e; }
.cta-box a.btn { border-color:var(--ink); }
.cta-box .note { font:.8rem var(--mono); opacity:.75; margin-top:-10px; }
.svc-sec { margin-top:clamp(64px,9vw,112px); }
.svc-sec > h2 { font-size:clamp(1.5rem,3.6vw,2.3rem); margin:0 0 28px; }
.problems { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 40px; }
.problems li { margin:0; padding-top:16px; border-top:1px solid var(--line-2); color:var(--fg); font-size:1.05rem; line-height:1.6; }
.deliver { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.deliver .card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px 24px; transition:border-color .25s; }
.deliver .card:hover { border-color:var(--line-2); }
.deliver a.card { display:block; color:inherit; }
.deliver a.card:hover { border-color:var(--brand); text-decoration:none; }
.deliver a.card:hover h3 { color:var(--brand); }
.services-list { margin-top:8px; }
/* an odd count would leave an empty cell: the last card takes the full row */
.deliver .card:last-child:nth-child(odd) { grid-column:1 / -1; }
.deliver h3 { margin:0 0 6px; font:600 1.08rem/1.3 var(--sans); color:var(--fg); }
.deliver p { margin:0; color:var(--fg-2); font-size:.98rem; line-height:1.6; }
.svc-steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }
.svc-steps li { margin:0; border-top:2px solid var(--brand); padding-top:16px; }
.svc-steps h3 { font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:1.08rem; letter-spacing:-.02em; margin:0 0 8px; color:var(--fg); }
.svc-steps p { margin:0; font-size:.95rem; line-height:1.6; color:var(--muted); }
.proof { list-style:none; padding:0; margin:0 0 26px; display:grid; gap:18px; }
.proof li { margin:0; border-left:2px solid var(--brand); padding:2px 0 2px 18px; color:var(--fg); font-size:1.05rem; line-height:1.6; max-width:68ch; }
.proof a { font:.84rem var(--mono); }
.tags { display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0; list-style:none; }
.tags li { margin:0; font:500 .72rem/1 var(--mono); color:var(--muted); border:1px solid var(--line-2); border-radius:6px; padding:7px 9px; }
.others { margin:clamp(56px,8vw,96px) 0 0; }
.others h2 { font-size:1rem; margin:0 0 14px; }
.others ul { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.others li { margin:0; }
.others a { display:inline-flex; min-height:44px; align-items:center; padding:0 18px; border:1px solid var(--line-2); border-radius:999px; font:.84rem var(--mono); color:var(--fg-2); transition:border-color .2s, color .2s; }
.others a:hover { border-color:var(--brand); color:var(--fg); text-decoration:none; }
.nav .lang { font:.8rem var(--mono); color:var(--muted); min-width:34px; min-height:44px; display:flex; align-items:center; justify-content:center; }
.nav .lang:hover { color:var(--fg); text-decoration:none; }
@media (max-width:760px) {
  .problems, .deliver { grid-template-columns:1fr; }
  .svc-steps { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) { .svc-steps { grid-template-columns:1fr; } }
@media (max-width:480px) {
  .nav .link { border:0; background:none; padding:0 4px; font-size:.88rem; }
  .nav .in { gap:8px; }
  .nav .cta { padding:0 12px; font-size:.72rem; }
}
@media (prefers-reduced-motion:reduce) { .btn, .deliver .card, .others a { transition:none; } }