/* =========================================================
   jCypher · Concept 08 "Slate"
   Swiss minimalism — whitespace, hairlines, one blue
   ========================================================= */
:root{
  --paper:#FFFFFF;
  --ink:#16181D;
  --gray:#5C6470;
  --faint:#9AA1AC;
  --blue:#1E5EF3;
  --blue-deep:#1348C4;
  --hair:#E6E8EC;
  --dark:#101216;
  --font:'Archivo',system-ui,sans-serif;
  --mono:'IBM Plex Mono',monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.container{max-width:1080px;margin:0 auto;padding:0 28px}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

h1,h2,h3{letter-spacing:-.025em;line-height:1.08;font-weight:700}
h1{font-size:clamp(2.6rem,6vw,4.4rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
.accent{color:var(--blue)}

.label{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin-bottom:22px;
}
.label-light{color:rgba(255,255,255,.5)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:700;font-size:1.1rem;text-decoration:none;letter-spacing:-.02em}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{
  text-decoration:none;font-size:.9rem;font-weight:500;color:var(--gray);
  transition:color .2s;
}
.nav-links a:hover{color:var(--ink)}
.nav-cta{
  color:var(--blue) !important;font-weight:600 !important;
}
.nav-cta:hover{color:var(--blue-deep) !important}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:transform .3s,opacity .3s}

/* ---------- hero ---------- */
.hero{padding:110px 0 90px}
.lede{
  font-size:1.12rem;color:var(--gray);max-width:52ch;margin:30px 0 40px;
}
.hero-actions{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.link-btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;
  font-weight:600;font-size:1rem;color:#fff;background:var(--blue);
  padding:.85rem 1.6rem;border:0;border-radius:2px;font-family:var(--font);
  transition:background .2s,gap .25s;
}
.link-btn:hover{background:var(--blue-deep);gap:16px}
.link-btn.light{background:#fff;color:var(--dark)}
.link-btn.light:hover{background:#E9EDF5}
.link-plain{
  font-weight:600;font-size:.95rem;text-decoration:none;color:var(--ink);
  border-bottom:2px solid var(--hair);padding-bottom:2px;
  transition:border-color .2s,color .2s;
}
.link-plain:hover{color:var(--blue);border-color:var(--blue)}

/* ---------- numbers ---------- */
.numbers{border-block:1px solid var(--hair)}
.numbers-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.n{padding:34px 26px 34px 0}
.n + .n{border-left:1px solid var(--hair);padding-left:26px}
.n-val{
  display:block;font-weight:700;font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-.03em;
}
.n-cap{font-size:.84rem;color:var(--faint)}

/* ---------- sections ---------- */
.section{padding:100px 0}
.section-line{border-top:1px solid var(--hair)}
.sec-head{margin-bottom:60px}

/* services */
.svc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--hair);border-left:1px solid var(--hair);
}
.svc{
  padding:34px 30px 40px;
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  transition:background .25s;
}
.svc:hover{background:#FAFBFD}
.svc-no{
  font-family:var(--mono);font-size:.72rem;color:var(--blue);
  display:block;margin-bottom:34px;
}
.svc h3{font-size:1.12rem;margin-bottom:10px}
.svc p{font-size:.9rem;color:var(--gray)}

/* method */
.method-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;align-items:start}
.method-note{color:var(--gray);margin-top:22px;max-width:40ch}
.method-list{list-style:none;border-top:1px solid var(--hair)}
.method-list li{
  display:flex;align-items:baseline;gap:22px;
  padding:19px 4px;border-bottom:1px solid var(--hair);
  font-weight:600;font-size:1.02rem;
  transition:padding-left .25s,color .25s;
}
.method-list li:hover{padding-left:14px;color:var(--blue)}
.method-list span{font-family:var(--mono);font-weight:400;font-size:.74rem;color:var(--faint)}

/* clients */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-left:1px solid var(--hair)}
.q{padding:0 34px;border-right:1px solid var(--hair)}
.q blockquote{font-size:1rem;line-height:1.65;color:var(--ink);margin-bottom:22px}
.q figcaption{font-weight:600;font-size:.9rem}
.q figcaption span{font-weight:400;font-size:.8rem;color:var(--faint)}
.client-row{
  display:flex;gap:38px;flex-wrap:wrap;margin-top:64px;padding-top:26px;
  border-top:1px solid var(--hair);
}
.client-row span{font-weight:700;font-size:.98rem;color:#C3C9D3;transition:color .25s}
.client-row span:hover{color:var(--blue)}

/* ---------- CTA ---------- */
.cta{background:var(--dark);color:#fff;padding:100px 0}
.cta h2{color:#fff}
.cta-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:start}
.cta-form{display:grid;gap:22px;margin-bottom:26px}
.cta-form label{
  display:grid;gap:8px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.cta-form input,.cta-form textarea{
  font-family:var(--font);font-size:.98rem;color:#fff;
  background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.28);
  padding:.6rem 0;resize:vertical;border-radius:0;
}
.cta-form input::placeholder,.cta-form textarea::placeholder{color:rgba(255,255,255,.3)}
.cta-form input:focus,.cta-form textarea:focus{outline:none;border-bottom-color:var(--blue)}
.cta-form button{justify-self:start;margin-top:6px}
.cta-alt{font-size:.88rem;color:rgba(255,255,255,.55)}
.cta-alt a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.cta-alt a:hover{border-color:#fff}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--hair);padding:26px 0}
.footer-inner{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:.82rem;color:var(--faint);
}
.footer .brand{font-size:1rem}

/* ---------- concept switcher ---------- */
.switcher{
  position:fixed;bottom:22px;right:22px;z-index:60;
  display:flex;gap:4px;padding:6px;
  background:var(--dark);border-radius:999px;
  box-shadow:0 12px 32px rgba(16,18,22,.35);
}
.switcher a{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  color:#8A93A3;text-decoration:none;font-weight:600;font-size:.8rem;
  transition:background .2s,color .2s;
}
.switcher a:hover{background:rgba(255,255,255,.12);color:#fff}
.switcher a.active{background:var(--blue);color:#fff}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .quotes{grid-template-columns:1fr;border-left:0}
  .q{border-right:0;border-left:1px solid var(--hair);padding:22px 28px;margin-bottom:8px}
  .method-grid,.cta-grid{grid-template-columns:1fr;gap:48px}
}
@media (max-width:820px){
  .nav-toggle{display:block}
  .nav-links{
    position:fixed;inset:64px 0 auto 0;z-index:49;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--hair);
    box-shadow:0 20px 36px rgba(16,18,22,.1);
    max-height:0;overflow:hidden;transition:max-height .4s ease;
  }
  .nav-links.open{max-height:380px}
  .nav-links a{padding:16px 28px;border-top:1px solid var(--hair)}
  .svc-grid{grid-template-columns:1fr 1fr}
  .numbers-grid{grid-template-columns:1fr 1fr}
  .n:nth-child(3){border-left:0;padding-left:0}
  .n:nth-child(1),.n:nth-child(2){border-bottom:1px solid var(--hair)}
  .section{padding:70px 0}
  .hero{padding:80px 0 64px}
}
@media (max-width:560px){
  .container{padding:0 20px}
  .svc-grid{grid-template-columns:1fr}
  .switcher{bottom:14px;right:14px;gap:3px}
  .switcher a{width:28px;height:28px;font-size:.74rem}
}