/* xyzmgmt.net — site styles.
   Monochrome only: black, white and the greys below (values from the XYZ web kit, v1.0).
   No web fonts, no scripts, no third-party requests. */

:root{
  --bg:#000000; --surface:#0D0D0D; --surface-2:#141414; --surface-3:#1A1A1A;
  --ink:#FFFFFF; --ink-soft:#CCCCCC; --ink-mute:#999999; --ink-faint:#8E8E8E;
  --rule:#333333; --rule-mid:#666666;
  --font:"Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
  --wrap:1120px; --gutter:24px; --radius:2px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ color-scheme:dark; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; }
a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ text-decoration-thickness:2px; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }

.skip{ position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--bg); padding:8px 14px; z-index:10; }
.skip:focus{ left:12px; top:12px; }

/* ---------------------------------------------------------------- header -- */
.site-header{ border-bottom:1px solid var(--rule); }
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:72px; flex-wrap:wrap; }
.wordmark{ font-weight:800; font-size:20px; letter-spacing:.14em; text-decoration:none; text-transform:uppercase; }
.site-nav{ display:flex; gap:28px; flex-wrap:wrap; }
.site-nav a{ text-decoration:none; color:var(--ink-soft); font-size:15px; letter-spacing:.04em; padding:6px 0; border-bottom:2px solid transparent; }
.site-nav a:hover{ color:var(--ink); }
.site-nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--ink); }

/* ------------------------------------------------------------------ type -- */
h1,h2,h3{ font-weight:800; line-height:1.12; margin:0 0 16px; letter-spacing:-.02em; }
h1{ font-size:clamp(36px, 6vw, 64px); }
h2{ font-size:clamp(24px, 3vw, 32px); }
h3{ font-size:20px; letter-spacing:-.01em; }
p{ margin:0 0 16px; }
.lede{ font-size:clamp(18px, 2vw, 21px); color:var(--ink-soft); max-width:720px; }
.eyebrow,.label{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color:var(--ink-faint); margin:0 0 12px;
}
.muted{ color:var(--ink-mute); }

/* -------------------------------------------------------------- sections -- */
.hero{ padding:96px 0 80px; border-bottom:1px solid var(--rule); }
.hero h1{ max-width:900px; }
.page-head{ padding:72px 0 40px; border-bottom:1px solid var(--rule); }
.section{ padding:64px var(--gutter); }
.section + .section{ border-top:1px solid var(--rule); }
.section > h2{ padding-bottom:14px; border-bottom:2px solid var(--ink); margin-bottom:28px; }
.prose{ max-width:760px; }
.prose h2{ font-size:24px; margin-top:40px; padding-bottom:10px; border-bottom:1px solid var(--rule-mid); }
.prose ul,.prose ol{ padding-left:22px; margin:0 0 16px; }
.prose li{ margin-bottom:6px; }

/* ---------------------------------------------------------------- buttons -- */
.actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }
.btn{
  display:inline-block; padding:14px 22px; border:1px solid var(--ink); border-radius:var(--radius);
  background:var(--ink); color:var(--bg); text-decoration:none; font-weight:700; letter-spacing:.03em;
}
.btn:hover{ background:var(--ink-soft); border-color:var(--ink-soft); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--surface-3); border-color:var(--ink); }

/* ------------------------------------------------------------------ cards -- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; }
.card{ background:var(--surface-2); border:1px solid var(--rule-mid); border-radius:var(--radius); padding:24px; }
.card h3{ margin-bottom:10px; }
.card p{ color:var(--ink-soft); margin:0; }

.steps{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; counter-reset:step; }
.steps li{ counter-increment:step; border-top:2px solid var(--ink); padding-top:16px; }
.steps li::before{ content:"0" counter(step); display:block; font-size:12px; letter-spacing:.18em; font-weight:700; color:var(--ink-faint); margin-bottom:8px; }
.steps h3{ margin-bottom:8px; }
.steps p{ color:var(--ink-soft); margin:0; }

/* -------------------------------------------------------------- services -- */
.service{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr); gap:32px; padding:40px 0; border-bottom:1px solid var(--rule); }
.service:last-child{ border-bottom:0; }
.service h2{ font-size:26px; margin:0; }
.service .num{ display:block; font-size:12px; letter-spacing:.18em; font-weight:700; color:var(--ink-faint); margin-bottom:10px; }
.service p{ color:var(--ink-soft); }
.service ul{ margin:0; padding-left:20px; color:var(--ink-soft); }
.service li{ margin-bottom:6px; }

/* ----------------------------------------------------------- detail list -- */
.details{ display:grid; grid-template-columns:200px minmax(0, 1fr); border-top:1px solid var(--rule-mid); margin:0 0 24px; }
.details dt,.details dd{ margin:0; padding:14px 0; border-bottom:1px solid var(--rule); }
.details dt{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ink-faint); padding-top:17px; }
.details dd{ color:var(--ink); }
.details address{ font-style:normal; }

.panel{ background:var(--surface-2); border:1px solid var(--rule-mid); border-left:4px solid var(--ink); padding:20px 24px; margin:24px 0; max-width:760px; }
.panel p:last-child{ margin-bottom:0; }

.cta{ text-align:left; }

/* ---------------------------------------------------------------- footer -- */
.site-footer{ border-top:1px solid var(--rule); margin-top:32px; padding:48px 0 32px; }
.foot-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:28px; }
.foot-name{ font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; }
.foot-text{ color:var(--ink-soft); font-size:15px; font-style:normal; margin:0; }
.copy{ color:var(--ink-mute); font-size:14px; border-top:1px solid var(--rule); margin:36px 0 0; padding-top:20px; }

/* unfilled site.json values show up loudly in previews; release builds refuse them */
.todo{ outline:2px dashed var(--ink); padding:0 4px; }

@media (max-width:720px){
  body{ font-size:16px; }
  .hero{ padding:64px 0 56px; }
  .page-head{ padding:48px 0 28px; }
  .section{ padding:48px var(--gutter); }
  .service{ grid-template-columns:1fr; gap:12px; }
  .details{ grid-template-columns:1fr; }
  .details dt{ border-bottom:0; padding-bottom:0; }
  .site-nav{ gap:20px; }
}

.more{ margin-top:24px; }