/* Northkeep Software - company pages. Cold, light, northern: snowfield page, keep-stone ink, lake teal, one gold star. */
:root{
  --snow:#f1f4f6; --paper:#ffffff; --keep:#18222d; --slate:#4b5967; --lake:#0e6e73; --lake-deep:#0a5559;
  --star:#d9a441; --rule:#d3dbe1; --ring:#c6d1d9; --ground:#e5ebef; --focus:#0e6e73;
}
body{background:var(--snow);color:var(--keep)}
a{color:var(--lake)}
a:hover{color:var(--lake-deep)}

/* header */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;color:var(--keep);text-decoration:none}
.brand svg{width:46px;height:46px;flex:none}
.brand-name{font-family:"Archivo NK",system-ui,sans-serif;font-stretch:125%;font-weight:760;font-size:1.25rem;letter-spacing:.01em;line-height:1}
.brand-name span{font-weight:560;color:var(--slate)}
.site-nav{display:flex;flex-wrap:wrap;gap:6px 26px}
.site-nav a{color:var(--slate);text-decoration:none;font-weight:600;padding:4px 0;border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--keep);border-bottom-color:var(--rule)}
.site-nav a[aria-current="page"]{color:var(--keep);border-bottom-color:var(--lake)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 24px;border-radius:10px;font-weight:700;font-size:1.0625rem;text-decoration:none;line-height:1.2}
.btn-primary{background:var(--lake);color:#fff}
.btn-primary:hover{background:var(--lake-deep);color:#fff;text-decoration:none}
.btn-quiet{border:2px solid var(--keep);color:var(--keep)}
.btn-quiet:hover{background:var(--keep);color:var(--snow);text-decoration:none}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center;padding:40px 0 64px}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.4rem);font-weight:790;line-height:1.02;letter-spacing:-.012em}
.hero .lead{margin-top:24px;font-size:1.3rem;line-height:1.55;color:var(--slate);max-width:34em}
.hero-art{width:100%;max-width:540px;justify-self:end}
.hero-art .ring{fill:none;stroke:var(--ring);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ring-out 1.8s cubic-bezier(.2,.7,.2,1) both}
.hero-art .ring:nth-of-type(2){animation-delay:.12s}.hero-art .ring:nth-of-type(3){animation-delay:.24s}.hero-art .ring:nth-of-type(4){animation-delay:.36s}
.hero-art .north{font-family:"Archivo NK",system-ui,sans-serif;font-stretch:125%;font-weight:760;font-size:24px;fill:var(--keep)}
@keyframes ring-out{from{transform:scale(.35);opacity:0}to{transform:scale(1);opacity:1}}

/* sections */
.section{padding:64px 0;border-top:1px solid var(--rule)}
.section h2{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:760}
.section .intro{margin-top:14px;font-size:1.2rem;color:var(--slate);max-width:40em}

/* products: each panel wears its product's own colours */
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:24px;margin-top:34px;align-items:start}
.product{border-radius:18px;padding:32px;display:flex;flex-direction:column;gap:16px}
.product-head{display:flex;align-items:center;gap:14px}
.product-head svg{width:52px;height:52px;flex:none}
.product h3{font-size:1.75rem;font-weight:780;font-stretch:125%}
.product .tagline{font-size:1.15rem;font-weight:700}
.product ul{margin:0;padding:0 0 0 1.2em}
.product li{margin:4px 0}
.product .actions{margin-top:auto;padding-top:8px}

.product-interloper{background:#0b1220;color:#e6eef7;background-image:linear-gradient(#13203a 1px,transparent 1px),linear-gradient(90deg,#13203a 1px,transparent 1px);background-size:28px 28px;border:1px solid #1c2b44}
.product-interloper h3{letter-spacing:.14em;color:#fff}
.product-interloper .tagline{color:#7ee7f4}
.product-interloper p,.product-interloper li{color:#c3cddc}
.product-interloper .btn-primary{background:linear-gradient(135deg,#22d3ee,#14b8a6);color:#04121a}
.product-interloper .btn-primary:hover{background:#5eead4;color:#04121a}
.product-interloper .btn-quiet{border-color:#3a5274;color:#e6eef7}
.product-interloper .btn-quiet:hover{background:#e6eef7;color:#0b1220}
.product-interloper :focus-visible{outline-color:#7ee7f4}

.product-hiddenlots{background:#fffdf8;color:#1c1f1a;border:1px solid #e3d9c6}
.product-hiddenlots h3{font-family:Georgia,"Times New Roman",serif;font-stretch:100%;font-weight:700;letter-spacing:0;color:#1f4d3a}
.product-hiddenlots .tagline{color:#8a6420}
.product-hiddenlots p,.product-hiddenlots li{color:#4f4a40}
.product-hiddenlots .btn-primary{background:#1f4d3a}
.product-hiddenlots .btn-primary:hover{background:#173c2d}
.product-hiddenlots :focus-visible{outline-color:#1f4d3a}

/* principles: three short statements under a short lake-coloured rule */
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:34px}
.principle{border-top:3px solid var(--lake);padding-top:18px}
.principle h3{font-size:1.3rem;font-weight:740;font-stretch:112%}
.principle p{margin-top:10px;color:var(--slate)}

/* contact */
.contact p{margin-top:14px;font-size:1.2rem;color:var(--slate);max-width:40em}
.contact .mail{display:inline-block;margin-top:18px;font-family:"Archivo NK",system-ui,sans-serif;font-stretch:112%;font-weight:700;font-size:clamp(1.3rem,2.6vw,1.75rem);color:var(--keep);text-decoration:underline;text-decoration-color:var(--star);text-decoration-thickness:3px;text-underline-offset:.22em;overflow-wrap:anywhere}
.contact .mail:hover{color:var(--lake)}

/* documents (privacy, 404) */
.doc{max-width:46em;padding:24px 0 64px}
.doc h1{font-size:clamp(2.1rem,4.2vw,3rem);font-weight:780}
.doc h2{font-size:1.45rem;font-weight:740;font-stretch:112%;margin-top:36px}
.doc p,.doc ul{margin-top:14px;color:#2c3a47}
.doc li{margin:6px 0}
.doc .updated{color:var(--slate);font-size:1rem;margin-top:10px}

/* footer */
.site-foot{border-top:1px solid var(--rule);padding:28px 0 44px;color:var(--slate);font-size:1rem;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
.site-foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.site-foot a{color:var(--slate)}
.site-foot a:hover{color:var(--keep)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:16px}
  .hero-art{justify-self:center;max-width:420px}
  .principles{grid-template-columns:1fr;gap:26px}
}
@media (max-width:640px){
  .site-head{padding:16px 0}
  .brand-name{font-size:1.1rem}
  .hero h1{font-size:2.45rem}
  .hero .lead{font-size:1.15rem}
  .hero-art{max-width:320px}
  .section{padding:48px 0}
  .product{padding:24px}
  .actions .btn{flex:1 1 100%}
  .product-interloper h3{font-size:1.4rem;letter-spacing:.08em}
  .product h3{font-size:1.45rem}
  .contact .mail{font-size:1.15rem;font-stretch:100%}
}