/* azzari.digital — one stylesheet for every page.
   Shipped with a short cache (see scripts/deploy.sh); the HTML is short-lived too,
   so the pair stays in step. */

:root{
  --void:#060708;
  --slab:#0b0d0f;
  --slab-2:#101316;
  --line:#1b2025;
  --line-hot:#272d33;
  --bone:#E6E8EA;
  --ash:#7A8188;
  --ash-dim:#4E555B;
  --signal:#C8341C;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: "Helvetica Neue", Helvetica, Inter, "Segoe UI", Arial, sans-serif;
}

*{box-sizing:border-box}
/* A display rule outranks the UA's [hidden] sheet — .form is a grid. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── ambient: grain + scanlines ───────────────────────────── */
body::before{
  content:"";
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.018) 0px,
    rgba(255,255,255,.018) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode:overlay;
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

.micro{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ash);
}

/* ── utility bar ──────────────────────────────────────────── */
.util{
  border-bottom:1px solid var(--line);
  background:var(--slab);
  position:sticky; top:0; z-index:60;
  backdrop-filter:saturate(120%) blur(6px);
}
.util-in{
  display:flex; align-items:center; gap:20px;
  height:34px; justify-content:space-between;
}
.util .dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--signal); margin-right:8px;
  box-shadow:0 0 0 0 rgba(200,52,28,.55);
  animation:pulse 2.6s ease-out infinite;
  vertical-align:middle;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(200,52,28,.5)}
  70%{box-shadow:0 0 0 7px rgba(200,52,28,0)}
  100%{box-shadow:0 0 0 0 rgba(200,52,28,0)}
}
.util-left,.util-right{white-space:nowrap}
.util a{color:var(--ash);text-decoration:none}
.util a:hover{color:var(--bone)}
.nav{display:flex;gap:22px}

/* ── masthead ─────────────────────────────────────────────── */
header.mast{
  border-bottom:1px solid var(--line);
  padding:64px 0 48px;
}
.mark{
  font-weight:700;
  letter-spacing:-.03em;
  line-height:.92;
  font-size:clamp(40px,8.4vw,104px);
  text-transform:uppercase;
  margin:0;
}
.mark a{color:inherit;text-decoration:none}
.mark .l2{display:block;color:var(--ash);font-size:.42em;letter-spacing:.06em;font-weight:600;margin-top:14px}
.mark sup{
  font-size:.16em; letter-spacing:.28em; vertical-align:super;
  color:var(--ash-dim); font-weight:500; margin-left:.6em;
}
.mast-meta{
  margin-top:34px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px 34px;
}

/* Sub-pages get a smaller masthead: a wordmark that links home, then a title. */
header.page{border-bottom:1px solid var(--line);padding:44px 0 38px}
.page .crumb{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:baseline}
.page .crumb a{color:var(--ash);text-decoration:none}
.page .crumb a:hover{color:var(--bone)}
.page h1{
  margin:20px 0 0;font-size:clamp(30px,5.4vw,62px);font-weight:700;
  letter-spacing:-.028em;line-height:1.02;text-transform:uppercase;
}
.page .sub{margin:16px 0 0;color:var(--ash);max-width:58ch;font-size:15.5px}

/* ── section chrome ───────────────────────────────────────── */
section{border-bottom:1px solid var(--line)}
.sec-head{
  display:flex; align-items:baseline; gap:16px;
  padding:18px 0; border-bottom:1px solid var(--line);
}
.sec-head .n{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  color:var(--signal);
}
.sec-head h2{
  margin:0; font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  font-weight:600; color:var(--bone);
}

/* ── statement ────────────────────────────────────────────── */
.statement{padding:92px 0 104px}
.lede{
  font-size:clamp(30px,6.4vw,80px);
  line-height:1.04;
  letter-spacing:-.028em;
  font-weight:700;
  margin:0;
  text-transform:uppercase;
  max-width:17ch;
}

/* ── two-column block (company, products, support) ────────── */
.holding{display:grid;grid-template-columns:1.15fr 1fr}
.holding .a{padding:64px 40px 64px 0}
.holding .b{
  padding:64px 0 64px 40px;border-left:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;
}
.h-name{
  font-size:clamp(30px,5vw,58px);font-weight:700;letter-spacing:-.025em;
  text-transform:uppercase;margin:0;line-height:1;
}
.h-name a{color:inherit;text-decoration:none;border-bottom:2px solid var(--line-hot)}
.h-name a:hover{border-bottom-color:var(--signal)}
.body{color:var(--ash);max-width:52ch;font-size:15.5px;margin:22px 0 0}
.body strong{color:var(--bone);font-weight:600}
.body a{color:var(--bone);text-decoration:none;border-bottom:1px solid var(--line-hot)}
.body a:hover{border-bottom-color:var(--signal)}
.fallback{margin-top:30px;font-size:14px}
.stamp{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line-hot);padding:6px 12px;margin-top:26px;
}
.stamp .sq{width:6px;height:6px;background:var(--signal);flex:none}
.kv{display:grid;grid-template-columns:auto 1fr;gap:0;margin:0}
.kv dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash-dim);
  padding:13px 22px 13px 0;border-top:1px solid var(--line);
}
.kv dd{
  margin:0;font-family:var(--mono);font-size:11.5px;color:var(--bone);
  padding:13px 0;border-top:1px solid var(--line);text-align:right;
  letter-spacing:.06em;word-break:break-word;
}
.kv dd a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-hot)}
.kv dd a:hover{border-bottom-color:var(--signal)}

/* Big bordered link — the support call to action. */
.cta{
  display:inline-block;
  font-family:var(--mono);
  font-size:clamp(13px,2.4vw,17px);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bone);
  text-decoration:none;
  border:1px solid var(--line-hot);
  padding:18px 30px;
  margin-top:30px;
  transition:border-color .2s ease,background .2s ease;
}
.cta:hover{border-color:var(--signal);background:var(--slab-2)}

/* ── form ─────────────────────────────────────────────────── */
.form{display:grid;gap:16px}
.field{display:grid;gap:8px}
.field label{cursor:pointer}
input,textarea{
  width:100%;
  background:var(--slab);
  border:1px solid var(--line-hot);
  border-radius:0;
  color:var(--bone);
  font-family:var(--mono);
  font-size:13.5px;
  line-height:1.5;
  padding:12px 13px;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .18s ease,background .18s ease;
}
input:focus,textarea:focus{
  outline:none;border-color:var(--signal);background:var(--slab-2);
}
input::placeholder,textarea::placeholder{color:var(--ash-dim)}
textarea{min-height:150px;resize:vertical}
/* Chrome paints autofilled fields white, which is unreadable on the slab. */
input:-webkit-autofill,input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--bone);
  -webkit-box-shadow:0 0 0 1000px var(--slab) inset;
  caret-color:var(--bone);
}

/* Honeypot: off-screen for people, plain-old-visible to a form-filling bot. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cf{min-height:65px}
.btn{
  justify-self:start;
  background:none;
  border:1px solid var(--line-hot);
  color:var(--bone);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:15px 30px;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
}
.btn:hover:not(:disabled){border-color:var(--signal);background:var(--slab-2)}
.btn:disabled{color:var(--ash-dim);cursor:not-allowed}
.status{
  margin:0;min-height:17px;color:var(--ash);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;
}
.status[data-state="error"]{color:var(--signal)}
.sent{border:1px solid var(--line-hot);padding:26px}
.sent p{margin:0}
.sent .t{
  margin-top:12px;font-family:var(--mono);font-size:13px;
  letter-spacing:.05em;line-height:1.55;color:var(--bone);
}

/* ── long-form text (legal pages) ─────────────────────────── */
.prose{padding:56px 0 72px;max-width:74ch;color:var(--ash);font-size:15.5px}
.prose h2{
  margin:44px 0 0;font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  font-weight:600;color:var(--bone);
}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{margin:14px 0 0;line-height:1.65}
.prose ul{margin:10px 0 0;padding-left:20px}
.prose li::marker{color:var(--ash-dim)}
.prose strong{color:var(--bone);font-weight:600}
.prose a{color:var(--bone);text-decoration:none;border-bottom:1px solid var(--line-hot)}
.prose a:hover{border-bottom-color:var(--signal)}
.prose .stamp{margin-top:0}

/* ── footer ───────────────────────────────────────────────── */
footer{background:var(--slab);border-top:1px solid var(--line)}
.foot-in{
  padding:30px 0;display:flex;flex-wrap:wrap;gap:14px 40px;
  align-items:center;justify-content:space-between;
}
.foot-in a{color:var(--ash);text-decoration:none}
.foot-in a:hover{color:var(--bone)}
.foot-nav{display:flex;flex-wrap:wrap;gap:12px 26px}

/* ── responsive ───────────────────────────────────────────── */
@media (max-width:860px){
  .wrap{padding:0 20px}
  .holding{grid-template-columns:1fr}
  .holding .a{padding:44px 0 34px}
  .holding .b{padding:0 0 44px;border-left:0}
  .util-in{height:auto;padding:8px 0;flex-wrap:wrap;gap:6px 16px}
  .nav{gap:16px}
  .sec-head{flex-wrap:wrap;gap:6px 14px;padding:16px 0}
  header.mast{padding:44px 0 34px}
  .statement{padding:56px 0 64px}
  .lede{max-width:none}
  .prose{padding:40px 0 56px}
}
@media (prefers-reduced-motion:reduce){
  .util .dot{animation:none}
  *{transition:none !important}
}