/* Cyber Swiss Army Knife Squad
   Visual language: Swiss precision instrument. Cool paper, graphite ink,
   one red blade. Structure carried by rules and alignment, not cards. */

:root{
  --paper:#F2F4F5;
  --card:#FFFFFF;
  --ink:#131A21;
  --ink-2:#3D4A56;
  --steel:#6E7C89;
  --rule:#D3DADE;
  --blade:#C8102E;
  --blade-dk:#9E0C24;

  --shell:74rem;
  --step--1:clamp(.82rem,.79rem + .14vw,.9rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.09rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.5rem,1.3rem + 1vw,2.1rem);
  --step-3:clamp(2rem,1.6rem + 2vw,3.2rem);
  --step-4:clamp(2.5rem,1.8rem + 3.6vw,4.6rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--step-0);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.1;letter-spacing:-.021em;font-weight:600}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}

.shell{width:min(100% - 2.4rem,var(--shell));margin-inline:auto}
.narrow{width:min(100% - 2.4rem,54rem)}

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

/* ---------------------------------------------------------- masthead */
.masthead{
  background:var(--ink);
  color:#EDF1F3;
  position:sticky;top:0;z-index:40;
}
.head-row{display:flex;align-items:center;gap:1.5rem;min-height:4.6rem}
.wordmark{
  display:flex;align-items:center;gap:.75rem;
  text-decoration:none;margin-right:auto;
}
.wordmark-blade{
  width:.4rem;height:2.4rem;flex:none;border-radius:.2rem;
  background:linear-gradient(180deg,var(--blade) 0 62%,#EDF1F3 62% 100%);
}
.wordmark-text{
  font-size:.86rem;font-weight:600;line-height:1.15;letter-spacing:.01em;
}
.sitenav{display:flex;align-items:center;gap:1.6rem}
.sitenav a{
  text-decoration:none;font-size:var(--step--1);font-weight:500;
  color:#C3CDD4;padding:.3rem 0;border-bottom:2px solid transparent;
}
.sitenav a:hover{color:#fff}
.sitenav a[aria-current]{color:#fff;border-bottom-color:var(--blade)}
.nav-cta{
  background:var(--blade);color:#fff !important;
  padding:.55rem 1.05rem !important;border-radius:2rem;border-bottom:0 !important;
}
.nav-cta:hover{background:var(--blade-dk)}
.menu-btn{
  display:none;background:none;border:1px solid #46545F;color:#EDF1F3;
  font:inherit;font-size:var(--step--1);padding:.4rem .85rem;border-radius:.35rem;cursor:pointer;
}

/* ---------------------------------------------------------- hero */
.hero{
  background:var(--ink);
  color:#EDF1F3;
  padding:clamp(3.5rem,7vw,6.5rem) 0 clamp(3.5rem,7vw,6rem);
  position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0 0 0 auto;width:38%;
  background:
    repeating-linear-gradient(90deg,rgba(200,16,46,.5) 0 1px,transparent 1px 5.5rem),
    repeating-linear-gradient(0deg,rgba(237,241,243,.09) 0 1px,transparent 1px 5.5rem);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);
  mask-image:linear-gradient(90deg,transparent,#000 70%);
  pointer-events:none;
}
.hero .shell{position:relative;z-index:1}
.hero-kicker{
  font-size:var(--step--1);color:#9FB0BC;margin:0 0 1.1rem;
  padding-left:1rem;border-left:3px solid var(--blade);
}
.hero h1{font-size:var(--step-4);max-width:19ch;font-weight:700}
.hero-lead{
  margin:1.5rem 0 2.2rem;max-width:52ch;font-size:var(--step-1);
  color:#C7D2D9;line-height:1.5;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem}

.btn{
  display:inline-block;background:var(--blade);color:#fff;text-decoration:none;
  font-weight:600;font-size:var(--step-0);padding:.8rem 1.6rem;border-radius:2rem;
  border:0;cursor:pointer;font-family:inherit;
}
.btn:hover{background:var(--blade-dk)}
.btn-quiet{background:transparent;color:#EDF1F3;box-shadow:inset 0 0 0 1px #4A5A66}
.btn-quiet:hover{background:rgba(255,255,255,.07)}

/* ---------------------------------------------------------- bands */
.band{padding:clamp(3.2rem,6vw,5.5rem) 0}
.band-ink{background:var(--ink);color:#EDF1F3}
.band-cta{background:var(--card);border-top:1px solid var(--rule)}
.section-title{
  font-size:var(--step-2);max-width:24ch;margin-bottom:2.4rem;
  padding-bottom:1rem;border-bottom:1px solid var(--rule);
}
.band-ink .section-title{border-bottom-color:#2C3742}

/* ---------------------------------------------------------- tool index */
.tools{display:grid;gap:2.6rem}
@media(min-width:56rem){.tools{grid-template-columns:1fr 1fr;gap:3rem 3.5rem}}
.tool{border-top:2px solid var(--ink);padding-top:1.2rem}
.tool-head h3{font-size:var(--step-1)}
.tool-head p{color:var(--steel);font-size:var(--step--1);margin:.5rem 0 1.1rem;max-width:44ch}
.tool-list{border-top:1px solid var(--rule)}
.tool-list li{border-bottom:1px solid var(--rule)}
.tool-list a{
  display:block;padding:.62rem 0 .62rem 1.1rem;text-decoration:none;
  font-size:var(--step--1);color:var(--ink-2);position:relative;
  transition:padding .12s ease,color .12s ease;
}
.tool-list a::before{
  content:"";position:absolute;left:0;top:1.05em;width:.42rem;height:2px;
  background:var(--blade);
}
.tool-list a:hover{color:var(--blade);padding-left:1.4rem}

/* ---------------------------------------------------------- quotes */
.quotes{display:grid;gap:2rem}
@media(min-width:52rem){.quotes{grid-template-columns:1fr 1fr;gap:2.4rem 3rem}}
.quote{margin:0;padding-left:1.4rem;border-left:2px solid var(--blade)}
.quote p{margin:0 0 .8rem;font-size:var(--step-0);color:#D6DEE3;line-height:1.6}
.quote figcaption{font-size:var(--step--1);color:#8FA0AC}
.more{margin-top:2.4rem}
.more a{color:#fff}

/* ---------------------------------------------------------- cta row */
.cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem}
.cta-row h2{font-size:var(--step-2)}
.cta-row p{margin:.6rem 0 0;color:var(--steel);max-width:46ch}

/* ---------------------------------------------------------- page heads */
.page-head{
  background:var(--card);border-bottom:1px solid var(--rule);
  padding:clamp(2.6rem,5vw,4.2rem) 0 clamp(2.2rem,4vw,3.2rem);
}
.page-head h1{font-size:var(--step-3);max-width:20ch}
.page-head p{margin-top:1.1rem;max-width:58ch;color:var(--ink-2)}
.page-head .lede{font-size:var(--step-1);line-height:1.5}
.crumb{font-size:var(--step--1);color:var(--steel);margin:0 0 1.1rem}
.crumb a{text-decoration:none;color:var(--steel)}
.crumb a:hover{color:var(--blade)}
.crumb span{margin:0 .45rem}

/* ---------------------------------------------------------- service groups */
.svc-group{padding:clamp(2.4rem,4vw,3.6rem) 0;border-bottom:1px solid var(--rule)}
.svc-group:last-of-type{border-bottom:0}
.svc-group-head h2{font-size:var(--step-2)}
.svc-group-head p{color:var(--steel);margin:.6rem 0 2rem;max-width:52ch}
.svc-cards{display:grid;gap:1.1rem;padding-bottom:.4rem}
@media(min-width:44rem){.svc-cards{grid-template-columns:1fr 1fr}}
@media(min-width:66rem){.svc-cards{grid-template-columns:1fr 1fr 1fr}}
.svc-card{
  background:var(--card);padding:1.35rem 1.5rem;
  border:1px solid var(--rule);border-top:2px solid var(--ink);
}
.svc-card:hover{border-top-color:var(--blade)}
.svc-card h3{font-size:var(--step-0);font-weight:600}
.svc-card h3 a{text-decoration:none}
.svc-card h3 a:hover{color:var(--blade)}
.svc-card p{margin:.6rem 0 0;font-size:var(--step--1);color:var(--steel);line-height:1.55}

/* ------------------------------------------- challenge/solution/outcome */
.cso{padding:2.4rem 0;border-bottom:1px solid var(--rule)}
.cso h2{font-size:var(--step-1);margin-bottom:1.2rem}
.cso-list li{
  padding:.55rem 0 .55rem 1.9rem;position:relative;
  border-bottom:1px solid var(--rule);color:var(--ink-2);
}
.cso-list li:last-child{border-bottom:0}
.cso-list li::before{
  content:"";position:absolute;left:0;top:1.15em;
  width:.85rem;height:2px;background:var(--steel);
}
.cso-do li::before{background:var(--blade)}
.cso-out li::before{
  background:none;top:.72em;left:.1rem;width:.62rem;height:.62rem;
  border:2px solid var(--ink);border-radius:50%;
}
.prose h2{font-size:var(--step-2);margin:2.4rem 0 1rem}
.prose p{max-width:62ch;color:var(--ink-2)}
.prose strong{color:var(--ink)}

.inline-cta{padding:2.8rem 0 3.6rem}
.inline-cta h2{font-size:var(--step-2)}
.inline-cta p{margin:.7rem 0 1.6rem;color:var(--steel);max-width:52ch}
.inline-cta .btn-quiet{color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.inline-cta .btn-quiet:hover{background:rgba(19,26,33,.05)}

/* ---------------------------------------------------------- contact */
.contact-grid{display:grid;gap:3rem;padding:clamp(2.4rem,4vw,3.6rem) 0 4rem}
@media(min-width:58rem){.contact-grid{grid-template-columns:1.45fr 1fr;gap:4rem}}
.contact-form-wrap h2,.contact-side h2{font-size:var(--step-2);margin-bottom:1.6rem}
.field{margin:0 0 1.15rem}
.field label{display:block;font-size:var(--step--1);font-weight:600;margin-bottom:.4rem}
.field input[type=text],.field input[type=email],.field textarea{
  width:100%;font:inherit;font-size:var(--step-0);color:var(--ink);
  background:var(--card);border:1px solid var(--rule);border-radius:.35rem;
  padding:.7rem .85rem;
}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{
  border-color:var(--blade);outline:none;box-shadow:0 0 0 3px rgba(200,16,46,.13);
}
.field-row{display:grid;gap:0}
@media(min-width:38rem){.field-row{grid-template-columns:1fr 1fr;gap:0 1.15rem}}
.check{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:1.6rem}
.check input{margin-top:.35rem;accent-color:var(--blade)}
.check label{font-weight:400;font-size:var(--step--1);color:var(--steel);margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.direct{margin:0}
.direct dt{font-size:var(--step--1);color:var(--steel);margin-top:1.2rem}
.direct dt:first-child{margin-top:0}
.direct dd{margin:.2rem 0 0}
.direct a{color:var(--ink);text-decoration-color:var(--blade);text-underline-offset:3px}
.direct a:hover{color:var(--blade)}

.form-note{padding:2rem 0 4rem}
.form-note h1{font-size:var(--step-3)}

/* ---------------------------------------------------------- footer */
.footer{background:var(--ink);color:#A9B7C1;padding:3.4rem 0 2.4rem;font-size:var(--step--1)}
.footer-grid{display:grid;gap:2rem}
@media(min-width:46rem){.footer-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:70rem){.footer-grid{grid-template-columns:repeat(5,1fr)}}
.footer h3{font-size:var(--step--1);color:#EDF1F3;margin-bottom:.85rem;font-weight:600}
.footer li{margin-bottom:.42rem;line-height:1.45}
.footer a{color:#A9B7C1;text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer-note{
  margin:2.6rem 0 0;padding-top:1.4rem;border-top:1px solid #2C3742;color:#7B8A96;
}

/* ---------------------------------------------------------- mobile nav */
@media(max-width:60rem){
  .menu-btn{display:block}
  .head-row{position:relative}
  .sitenav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--ink);flex-direction:column;align-items:stretch;
    gap:0;padding:.6rem 1.2rem 1.4rem;border-top:1px solid #2C3742;
  }
  body.nav-open .sitenav{display:flex}
  .sitenav a{padding:.75rem 0;border-bottom:1px solid #232E38}
  .nav-cta{text-align:center;margin-top:.9rem}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ---------------------------------------------------------- proof strip */
.proof{
  display:grid;gap:1.4rem 2.4rem;margin:0 0 2.4rem;
  grid-template-columns:repeat(2,minmax(0,1fr));max-width:40rem;
}
@media(min-width:46rem){.proof{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}}
.proof li{border-top:2px solid var(--blade);padding-top:.7rem}
.proof strong{
  display:block;font-size:var(--step-2);font-weight:700;
  letter-spacing:-.03em;line-height:1;color:#fff;
}
.proof span{display:block;font-size:var(--step--1);color:#9FB0BC;margin-top:.35rem;line-height:1.35}
.section-lead{color:var(--steel);max-width:52ch;margin:-1.6rem 0 2.4rem}
.band-ink .section-lead{color:#9FB0BC}