:root{
    --slate:#0d1012;
    --chalk:#f2efe6;
    --chalk-muted:#b4b0a4;
    --hairline:rgba(242,239,230,.16);
    --accent:#d9c7a3;
    --panel:rgba(17,21,24,.56);
    --scrim:rgba(8,10,12,.66);
    --display:"Zilla Slab",Georgia,serif;
    --body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    --measure:62ch;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  html:not(.js) .reveal{opacity:1;transform:none}
  html.js .reveal{opacity:0;transform:translateY(16px)}
  html.js .reveal.in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s ease}
  body{
    margin:0;
    font-family:var(--body);
    color:var(--chalk);
    background:var(--slate);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  /* fixed running background */
  .bg{position:fixed;inset:0;z-index:-2;background:#0d1012 url("assets/background.jpg") center center / cover no-repeat}
  .bg::after{content:"";position:absolute;inset:0;background:var(--scrim);z-index:-1}

  a{color:inherit}
  img{max-width:100%;display:block}
  .wrap{width:min(1080px,92vw);margin-inline:auto}
  .section{padding:clamp(4.5rem,9vw,8rem) 0}

  /* nav */
  header.nav{position:sticky;top:0;z-index:10;backdrop-filter:blur(6px);
    background:linear-gradient(rgba(8,10,12,.55),rgba(8,10,12,0));
    border-bottom:1px solid transparent;transition:border-color .3s ease,background .3s ease}
  header.nav.scrolled{background:rgba(8,10,12,.82);border-bottom-color:var(--hairline)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;
    width:min(1080px,92vw);margin-inline:auto;padding:1.1rem 0}
  .brand{font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:.02em;
    text-decoration:none;color:var(--chalk)}
  .nav-links{display:flex;gap:1.6rem}
  .nav-links a{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--chalk-muted);
    text-decoration:none;padding:.3rem 0;transition:color .25s ease}
  .nav-links a:hover,.nav-links a:focus-visible{color:var(--chalk)}

  /* hero */
  .hero{min-height:88vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
    text-align:center;padding:6rem 0 4rem}
  .hero-logo{width:min(440px,72vw);margin-bottom:1.8rem;
    filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))}
  .eyebrow{font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);
    margin:0 0 1.1rem}
  .hero h1{font-family:var(--display);font-weight:500;font-size:clamp(2rem,4.6vw,3rem);
    line-height:1.12;margin:.2rem 0 1.1rem;text-shadow:0 1px 10px rgba(0,0,0,.5)}
  .hero p.lede{max-width:54ch;margin:0 auto 2.2rem;color:var(--chalk);font-size:1.08rem;
    text-shadow:0 1px 8px rgba(0,0,0,.45)}
  .btn{display:inline-block;font-family:var(--body);font-size:.92rem;letter-spacing:.04em;
    color:var(--chalk);text-decoration:none;border:1px solid rgba(242,239,230,.45);
    padding:.85rem 1.9rem;border-radius:3px;background:transparent;cursor:pointer;
    transition:background .3s ease,border-color .3s ease,color .3s ease}
  .btn:hover,.btn:focus-visible{background:var(--chalk);color:var(--slate);border-color:var(--chalk)}

  /* divider */
  .rule{border:0;height:1px;width:min(1080px,92vw);margin-inline:auto;
    background:rgba(242,239,230,.32)}

  /* services */
  .eyebrow-section{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
    color:var(--accent);margin:0 0 .8rem}
  .section h2{font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,3.4vw,2.4rem);
    margin:0 0 2.6rem;line-height:1.15}
  .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
  .card{background:var(--panel);border:1px solid var(--hairline);border-radius:6px;
    padding:2rem 1.9rem;backdrop-filter:blur(3px);
    transition:border-color .3s ease,transform .3s ease,background .3s ease}
  .card:hover{border-color:rgba(242,239,230,.34);transform:translateY(-3px);background:rgba(17,21,24,.7)}
  .card h3{font-family:var(--display);font-weight:600;font-size:1.22rem;margin:0 0 .7rem;letter-spacing:.01em}
  .card p{margin:0;color:var(--chalk-muted);font-size:.98rem;line-height:1.65}

  /* platform band */
  .platform{text-align:center}
  .platform .inner{max-width:60ch;margin-inline:auto}
  .platform h2{margin-bottom:1.4rem}
  .platform p{color:var(--chalk-muted);font-size:1.06rem;margin:0 auto}
  .platform .pulse{font-family:var(--display);color:var(--chalk)}

  /* contact */
  .contact .lead{color:var(--chalk-muted);max-width:48ch;margin:0 0 2.4rem;font-size:1.04rem}
  form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;max-width:640px}
  .field{display:flex;flex-direction:column;gap:.45rem}
  .field.full{grid-column:1/-1}
  label{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--chalk-muted)}
  input,textarea{font-family:var(--body);font-size:1rem;color:var(--chalk);
    background:rgba(8,10,12,.45);border:1px solid var(--hairline);border-radius:4px;
    padding:.8rem .9rem;transition:border-color .25s ease,background .25s ease}
  input:focus,textarea:focus{outline:none;border-color:var(--accent);background:rgba(8,10,12,.65)}
  textarea{resize:vertical;min-height:130px}
  .form-actions{grid-column:1/-1;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:.4rem}
  .form-actions .alt{font-size:.92rem;color:var(--chalk-muted)}
  .form-actions .alt a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s}
  .form-actions .alt a:hover{border-bottom-color:var(--accent)}
  .form-note{grid-column:1/-1;color:var(--accent);font-size:.95rem;margin:.3rem 0 0;min-height:1.2em}

  /* footer */
  footer{border-top:1px solid var(--hairline);padding:2.6rem 0;background:rgba(8,10,12,.78)}
  .foot-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
    font-size:.86rem;color:var(--chalk-muted)}
  .foot-inner .brand{font-size:1rem}
  .foot-inner a{color:var(--chalk-muted);text-decoration:none}
  .foot-inner a:hover{color:var(--chalk)}

  :focus-visible{outline:2px solid var(--accent);outline-offset:3px}

  @media (max-width:720px){
    .grid{grid-template-columns:1fr}
    form{grid-template-columns:1fr}
    .nav-links{gap:1.1rem}
    .nav-links a{font-size:.74rem}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    html.js .reveal,html.js .reveal.in{opacity:1;transform:none;transition:none}
    .card:hover{transform:none}
  }