/* Silentis — site styles. Brand: near-black + single gold accent, Inter + IBM Plex Mono.
   Treatment-led (monochrome, mono tracked labels, thin gold rules, hard grid). */

/* ---- self-hosted fonts (Fontsource latin woff2) ---- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/inter-800.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/plex-mono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/plex-mono-600.woff2') format('woff2')}

:root{
  --bg:#040404; --panel:#0E0E10; --panel-2:#141417;
  --gold:#B79643; --gold-deep:#443B27;
  --tan:#A0967B; --text:#EDEDED; --muted:#8A8A8A; --white:#FFFFFF;
  --line:#1E1E22;
  --maxw:1120px;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--gold); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}

.wrap{
  max-width:var(--maxw); margin:0 auto;
  padding-left:max(1.5rem, env(safe-area-inset-left));
  padding-right:max(1.5rem, env(safe-area-inset-right));
}

/* ---- type ---- */
h1,h2,h3{font-family:var(--sans); font-weight:800; letter-spacing:-.01em; line-height:1.08; margin:0; text-wrap:balance}
h1{font-size:clamp(2rem,5vw,3.2rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.5rem); font-weight:700}
h3{font-size:1.15rem; font-weight:700}
p{margin:0 0 1rem}
.lede{font-size:clamp(1.05rem,1.8vw,1.3rem); color:#D6D6D6; max-width:60ch}

.kicker{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.3em;
  font-size:.7rem; color:var(--gold); margin:0 0 1.1rem; font-weight:500;
}
.kicker--muted{color:var(--tan)}
.rule{width:56px; height:1px; background:var(--gold); border:0; margin:1.4rem 0}
.rule--center{margin-left:auto; margin-right:auto}

/* ---- header ---- */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(4,4,4,.82);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:.7rem}
.brand img{height:40px; width:auto}
.brand .wordmark{
  font-weight:800; letter-spacing:.16em; font-size:1.1rem; color:var(--white);
}
.nav{display:flex; gap:1.6rem; align-items:center}
.nav a{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.16em;
  font-size:.72rem; color:var(--text);
}
.nav a:hover{color:var(--gold); text-decoration:none}
.nav a[aria-current="page"]{color:var(--gold)}
.nav-toggle{display:none}

/* ---- buttons ---- */
.btn{
  display:inline-block; font-family:var(--mono); text-transform:uppercase;
  letter-spacing:.18em; font-size:.74rem; font-weight:500;
  padding:.85rem 1.5rem; border:1px solid var(--gold); color:var(--gold);
  background:transparent; cursor:pointer; transition:background .15s,color .15s;
}
.btn:hover{background:var(--gold); color:#040404; text-decoration:none}
.btn--solid{background:var(--gold); color:#040404}
.btn--solid:hover{background:#cfa94f; border-color:#cfa94f}

/* ---- tap targets: WCAG 2.2 Target Size (2.5.8), 44px ---- */
.brand{min-height:44px}
.nav a{display:inline-flex; align-items:center; min-height:44px}
.nav-toggle{min-height:44px; min-width:44px; padding:.7rem .6rem}
.field input,.field textarea{min-height:44px}
.contact-direct a{display:inline-flex; align-items:center; min-height:44px}
.card .arrow{display:inline-flex; align-items:center; min-height:44px}

/* ---- sections ---- */
section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.section-head{max-width:62ch}
.section-head h2{margin-bottom:1rem}

/* ---- hero ---- */
.hero{position:relative; padding:0; border-bottom:1px solid var(--line); overflow:hidden}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:2rem;
  min-height:min(78vh,680px);
}
.hero-copy{padding:clamp(3rem,7vw,5rem) 0}
.hero-copy h1{margin-bottom:1.3rem}
.hero-copy .cta{margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap}
.hero-media{position:relative; height:100%; min-height:340px}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:center}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(4,4,4,.25) 28%,rgba(4,4,4,0) 60%);
}

/* ---- mission cards ---- */
.cards{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-top:2.5rem}
.card{
  position:relative; display:block; padding:2rem 1.9rem; background:var(--panel);
  border:1px solid var(--line); transition:border-color .15s,transform .15s;
}
.card:hover{border-color:var(--gold-deep); text-decoration:none; transform:translateY(-2px)}
.card .kicker{margin-bottom:.8rem}
.card h3{color:var(--white); font-size:1.4rem; margin-bottom:.5rem}
.card p{color:var(--muted); margin:0}
.card .arrow{margin-top:1.2rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold)}

/* ---- spec rows (smart core) ---- */
.specs{border-top:1px solid var(--line); margin-top:2.5rem}
.spec{
  display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:baseline;
  padding:1.5rem 0; border-bottom:1px solid var(--line);
}
.spec .no{font-family:var(--mono); color:var(--gold); font-size:.8rem; letter-spacing:.1em}
.spec h3{color:var(--white); margin-bottom:.4rem}
.spec p{color:var(--muted); margin:0; max-width:64ch}

/* ---- host tiles ---- */
.hosts{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2.5rem}
.host{position:relative; border:1px solid var(--line); background:var(--panel); overflow:hidden}
.host .ph{aspect-ratio:4/3; width:100%; overflow:hidden; background:var(--panel-2)}
.host .ph img{width:100%; height:100%; object-fit:cover}
.host .ph.contain img{object-fit:contain; padding:1.2rem; background:#0a0a0c}
.host .meta{padding:1rem 1.1rem 1.2rem}
.host .meta .t{font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em;
  font-size:.7rem; color:var(--gold); display:block; margin-bottom:.35rem}
.host .meta .d{color:var(--muted); font-size:.86rem}

/* ---- feature list (what the box does) ---- */
.features{display:grid; grid-template-columns:1fr 1fr; gap:.6rem 2.5rem; margin-top:2rem}
.features li{list-style:none; padding:.9rem 0; border-bottom:1px solid var(--line);
  color:var(--text); display:flex; gap:.8rem}
.features li::before{content:"—"; color:var(--gold)}
.features.single{grid-template-columns:1fr}

/* ---- proof / stat figures ---- */
.proof{background:var(--panel)}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem}
.stats.two{grid-template-columns:1fr 1fr}
.stat{border-left:2px solid var(--gold-deep); padding:.2rem 0 .2rem 1.3rem}
.stat .fig{font-size:1.5rem; font-weight:800; color:var(--white); display:block; margin-bottom:.4rem}
.stat .fig em{color:var(--gold); font-style:normal}
.stat p{color:var(--muted); font-size:.9rem; margin:0}
.stat .where{font-family:var(--mono); text-transform:uppercase; letter-spacing:.16em;
  font-size:.6rem; color:var(--tan); display:block; margin-bottom:.45rem}

/* ---- integrate panel ---- */
.panel{background:var(--panel); border:1px solid var(--line); padding:clamp(2rem,5vw,3.5rem)}
.panel .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:2rem}
.panel .grid h3{color:var(--white); font-size:1rem; margin-bottom:.5rem}
.panel .grid p{color:var(--muted); font-size:.9rem; margin:0}

/* ---- cta band ---- */
.cta-band{text-align:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.cta-band h2{margin-bottom:1.6rem}

/* ---- contact ---- */
.contact-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:3rem; align-items:start}
.contact-direct .line{margin-bottom:1.6rem}
.contact-direct .t{font-family:var(--mono); text-transform:uppercase; letter-spacing:.16em;
  font-size:.68rem; color:var(--tan); display:block; margin-bottom:.3rem}
.contact-direct a{font-size:1.05rem}
.field{margin-bottom:1.2rem}
.field label{font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em;
  font-size:.68rem; color:var(--tan); display:block; margin-bottom:.5rem}
.field input,.field textarea{
  width:100%; background:var(--panel); border:1px solid var(--line); color:var(--text);
  font-family:var(--sans); font-size:1rem; padding:.8rem .9rem; border-radius:0;
}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--gold)}
.field textarea{min-height:130px; resize:vertical}
.check{display:flex; gap:.7rem; align-items:flex-start; margin-bottom:1.5rem; color:var(--muted); font-size:.9rem}
.check input{margin-top:.25rem; accent-color:var(--gold)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---- footer ---- */
.site-footer{border-top:1px solid var(--line); padding:2.5rem 0; color:var(--muted)}
.site-footer .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.site-footer .fmono{font-family:var(--mono); text-transform:uppercase; letter-spacing:.22em; font-size:.62rem; color:#4a4a4a}
.site-footer a{color:var(--tan)}

/* ---- centred page (submitted) ---- */
.center-screen{min-height:70vh; display:flex; align-items:center; justify-content:center; text-align:center}

/* ---- responsive ---- */
@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr; min-height:0}
  .hero-media{min-height:300px; height:48vw; max-height:420px}
  .hero-media::after{background:linear-gradient(0deg,var(--bg) 0%,rgba(4,4,4,0) 55%)}
  .hosts{grid-template-columns:1fr 1fr}
  .stats,.stats.two,.panel .grid{grid-template-columns:1fr}
  .cards,.features{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr; gap:2rem}
  .nav{display:none}
  .nav.open{display:flex; position:absolute; top:64px; left:0; right:0; flex-direction:column;
    background:var(--bg); border-bottom:1px solid var(--line); padding:1.2rem 1.5rem; gap:1.1rem}
  .nav-toggle{display:block; background:none; border:0; color:var(--gold); font-family:var(--mono);
    text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; cursor:pointer}
}
@media(max-width:480px){
  .hosts{grid-template-columns:1fr}
}

/* ---- loading splash ---- */
.splash-inner{text-align:center; transform:translateY(-3%)}
.splash-crest{height:80px; width:auto; margin:0 auto 1.4rem; display:block; opacity:.96}
.splash-word{font-family:var(--sans); font-weight:800; color:var(--white);
  font-size:clamp(1.7rem,7vw,2.8rem); letter-spacing:.18em; text-indent:.18em; margin:0}
.splash-bar{display:block; width:120px; height:2px; margin:1.5rem auto 0;
  background:var(--line); position:relative; overflow:hidden}
.splash-bar i{position:absolute; top:0; bottom:0; left:0; width:40%;
  background:var(--gold); animation:splashScan 1.05s ease-in-out infinite}
@keyframes splashScan{
  0%{transform:translateX(-110%)} 100%{transform:translateX(310%)}
}
@media(prefers-reduced-motion:reduce){
  .splash{transition:none}
  .splash-bar i{animation:none; width:100%; opacity:.55}
}

/* ---- pointer-aware affordances ---- */
@media (hover: none){
  /* no sticky hover lift / underline on touch */
  .card:hover{transform:none; border-color:var(--line)}
  a:hover{text-decoration:none}
}
@media (max-width:360px){
  .wrap{
    padding-left:max(1.15rem, env(safe-area-inset-left));
    padding-right:max(1.15rem, env(safe-area-inset-right));
  }
}