/* ==========================================================================
   Kenius — "Skyline" design exploration
   GIC-inspired system: warm neutral ground, pixel display face, mono labels.
   Tokens live in :root — edit here to re-skin.
   ========================================================================== */

/* self-hosted fonts (OFL) — latin subsets */
@font-face{
  font-family:'DotGothic16';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/dotgothic16-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Geist';
  font-style:normal; font-weight:400 600; font-display:swap;
  src:url('fonts/geist-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Geist Mono';
  font-style:normal; font-weight:400 500; font-display:swap;
  src:url('fonts/geistmono-latin.woff2') format('woff2');
}

:root{
  /* colour */
  --bg:        #fafafa;
  --card:      #ffffff;
  --ink:       #171717;
  --soft:      #525252;
  --faint:     #6b6b67;
  --line:      #e7e7e3;
  --live:      #16a34a;
  --live-soft: #dcf3e4;

  /* type */
  --f-pixel: 'DotGothic16', 'Courier New', monospace;
  --f-body:  'Geist', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:  'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* shadow — GIC notification-card recipe */
  --shadow-card: 0 1px 1px rgba(0,0,0,.08), 0 4px 5px rgba(0,0,0,.08);

  --wrap: 1120px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }

.skip{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:8px 14px;
  font-family:var(--f-mono); font-size:12px;
}
.skip:focus{ left:8px; top:8px; }

:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.hero :focus-visible, .foot :focus-visible{ outline-color:#fff; }

::selection{ background:var(--ink); color:var(--bg); }

/* ==========================================================================
   HERO — the sky machine
   ========================================================================== */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.sky{ position:absolute; inset:0; }
.sky-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 62%;
  opacity:0;
  image-rendering:auto;
}
.sky-img.is-on{ opacity:1; }  /* no-JS / first-paint fallback: day */

/* readability scrim: stronger at top (nav+title), gentle at bottom */
.sky-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom,
      rgba(10,14,26,.52) 0%,
      rgba(10,14,26,.28) 22%,
      rgba(10,14,26,0)  45%,
      rgba(10,14,26,0)  70%,
      rgba(10,14,26,.38) 100%);
}

/* --- nav --- */
.nav{
  position:relative; z-index:3;
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 28px;
  color:#fff;
}
.brand{
  font-family:var(--f-pixel);
  font-size:22px;
  text-decoration:none;
  letter-spacing:.02em;
  text-shadow:0 0 6px rgba(255,255,255,.55);
}
.brand sup{ font-size:.45em; vertical-align:super; }
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{
  font-family:var(--f-mono); font-size:12.5px;
  letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none;
  text-shadow:0 1px 4px rgba(0,0,0,.45);
  opacity:.92;
}
.nav-links a:hover{ opacity:1; text-decoration:underline; text-underline-offset:4px; }
.nav-links .pill{
  border:1px solid rgba(255,255,255,.75);
  border-radius:999px;
  padding:7px 15px;
  text-shadow:none;
  background:rgba(10,14,26,.25);
  backdrop-filter:blur(2px);
}
.nav-links .pill:hover{ background:#fff; color:var(--ink); text-decoration:none; }

/* --- title --- */
.hero-title{
  position:relative; z-index:2;
  text-align:center;
  padding:9svh 24px 0;
}
.kicker{
  font-family:var(--f-mono); font-size:12px;
  letter-spacing:.14em; text-transform:uppercase;
  color:#fff; opacity:.9;
  text-shadow:0 1px 5px rgba(0,0,0,.5);
  margin-bottom:14px;
}
.hero-title h1{
  font-family:var(--f-pixel);
  font-weight:400;
  font-size:clamp(1.7rem, 1.1rem + 3.4vw, 3rem);
  line-height:1.22;
  color:#fff;
  /* the GIC glow */
  text-shadow:0 0 5px rgba(255,255,255,.8), 0 2px 14px rgba(0,0,0,.25);
  text-wrap:balance;
  max-width:25ch;
  margin:0 auto;
}

/* --- live agent log --- */
/* dark glass, from the reference site's careers card: black-tint gradient
   + backdrop-blur + white/20 border. No white haze — just blurred scene. */
.agent{
  position:absolute; z-index:4;
  right:28px; bottom:96px;
  width:min(360px, calc(100vw - 48px));
  background:linear-gradient(to right, rgba(8,12,24,.34), rgba(8,12,24,.20));
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.22);
  border-radius:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  padding:14px 16px 12px;
  font-size:14px;
  font-family:var(--f-pixel);
  color:#fff;
}
@supports not (backdrop-filter:blur(16px)){
  .agent{ background:rgba(8,12,24,.78); }
}
.agent-head{
  display:flex; align-items:center; gap:10px;
  margin-bottom:11px;
}
.live-pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:3px 10px 2px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.1);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#fff;
}
.dot{
  width:7px; height:7px; border-radius:50%;
  background:#4ade80;
  box-shadow:0 0 6px rgba(74,222,128,.9);
  flex-shrink:0;
}
@media (prefers-reduced-motion: no-preference){
  .dot{ animation:blink 1.6s ease-in-out infinite; }
  @keyframes blink{
    0%,100%{ opacity:1; box-shadow:0 0 6px rgba(74,222,128,.9); }
    50%   { opacity:.45; box-shadow:0 0 2px rgba(74,222,128,.4); }
  }
}
.agent-live{
  font-family:var(--f-pixel); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.agent-clock{
  margin-left:auto;
  font-family:var(--f-pixel); font-size:15px;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
.agent-body{ min-height:44px; display:flex; align-items:center; }
.evt{
  display:flex; gap:10px; align-items:baseline;
  line-height:1.45;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:opacity .35s ease, transform .35s ease;
}
.evt.is-out{ opacity:0; transform:translateY(4px); }
@media (prefers-reduced-motion: reduce){
  .evt{ transition:none; }
  .evt.is-out{ opacity:1; transform:none; }
}
.evt-t{
  font-family:var(--f-pixel); font-size:13px;
  color:rgba(255,255,255,.6);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
/* DotGothic16 has no bold — differentiate the outcome by ink, not weight */
.evt-x{ color:rgba(255,255,255,.82); }
.evt-x b{ font-weight:400; color:#fff; }
.agent-foot{
  margin-top:10px; padding-top:8px;
  border-top:1px solid rgba(255,255,255,.22);
  font-family:var(--f-pixel); font-size:11px;
  letter-spacing:.05em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

/* --- hero lead (bottom-left) --- */
.hero-lead{
  position:relative; z-index:2;
  margin-top:auto;
  padding:0 28px 34px;
  max-width:44ch;
  color:#f3f5f2;
  font-size:15.5px; font-weight:500;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.sec{ padding:96px 0 0; }
.sec:last-of-type{ padding-bottom:96px; }

.cap{
  font-family:var(--f-mono); font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint);
}

.sec-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin-bottom:36px;
}
.sec-head h2, .sec-quote blockquote, .sec-cta h2{
  font-family:var(--f-pixel);
  font-weight:400;
}
.sec-head h2{ font-size:clamp(1.5rem, 1.2rem + 1.6vw, 2.2rem); line-height:1.2; }

/* --- engagement steps --- */
.steps{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--line);
}
.step{ padding:22px 22px 26px 0; border-top:2px solid var(--ink); margin-top:-1px; }
.step + .step{ /* keep hairline rhythm on wrap */ }
.step-t{
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.1em; color:var(--faint);
}
.step h3{
  font-family:var(--f-pixel); font-weight:400;
  font-size:1.15rem; margin:10px 0 8px;
}
.step p{ font-size:14.5px; color:var(--soft); max-width:26ch; }

/* --- service index rows --- */
.index{ border-top:1px solid var(--line); }
.row{
  display:grid;
  grid-template-columns:64px 1.1fr 1fr 28px;
  gap:18px; align-items:baseline;
  padding:20px 4px;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  transition:background .15s ease;
}
.row:hover{ background:#f2f2ef; }
.no{
  font-family:var(--f-mono); font-size:12px;
  color:var(--faint); font-variant-numeric:tabular-nums;
}
.ttl{ font-family:var(--f-pixel); font-size:1.1rem; }
.note{ font-size:13.5px; color:var(--soft); }
.note b{ font-weight:600; color:var(--ink); }
.ar{ justify-self:end; color:var(--faint); transition:transform .25s ease; }
.row:hover .ar{ transform:translateX(5px); color:var(--ink); }
@media (prefers-reduced-motion: reduce){
  .ar, .row{ transition:none; }
  .row:hover .ar{ transform:none; }
}

/* --- practice cards --- */
.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.card{
  background:var(--card);
  border-radius:14px;
  box-shadow:var(--shadow-card);
  padding:24px 22px 20px;
  display:flex; flex-direction:column; gap:12px;
}
.card-k{
  font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint);
}
.card h3{
  font-family:var(--f-pixel); font-weight:400;
  font-size:1.3rem; line-height:1.25;
}
.card p{ font-size:14.5px; color:var(--soft); }
.card-a{
  margin-top:auto; padding-top:12px;
  border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--faint);
}
.card-a b{ color:var(--ink); font-weight:500; }

/* --- quote --- */
.sec-quote .wrap{ text-align:center; max-width:820px; }
.sec-quote blockquote{
  font-size:clamp(1.35rem, 1rem + 1.9vw, 2.1rem);
  line-height:1.35;
  margin-top:18px;
  text-wrap:balance;
}
.sec-quote em{ font-style:normal; color:var(--live); }

/* --- RFI / FAQ --- */
.rfi{ border-top:1px solid var(--line); }
.rfi details{ border-bottom:1px solid var(--line); }
.rfi summary{
  display:grid;
  grid-template-columns:74px 1fr 24px;
  gap:18px; align-items:baseline;
  padding:18px 4px;
  cursor:pointer;
  list-style:none;
}
.rfi summary::-webkit-details-marker{ display:none; }
.rfi summary:hover{ background:#f2f2ef; }
.q{ font-family:var(--f-pixel); font-size:1.05rem; }
.pl{ justify-self:end; font-family:var(--f-mono); color:var(--faint); }
.rfi details[open] .pl{ transform:rotate(45deg); }
.ans{
  padding:0 4px 20px calc(74px + 18px);
  color:var(--soft); font-size:14.5px; max-width:64ch;
}
@media (max-width:640px){ .ans{ padding-left:4px; } }

/* --- CTA --- */
.sec-cta .wrap{ text-align:center; max-width:760px; }
.sec-cta h2{ font-size:clamp(1.8rem, 1.3rem + 2.6vw, 2.8rem); margin-top:16px; }
.cta-lead{ margin:16px auto 28px; color:var(--soft); max-width:44ch; }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:#fff;
  font-family:var(--f-mono); font-size:13px;
  letter-spacing:.05em; text-transform:uppercase;
  text-decoration:none;
  border-radius:999px;
  padding:13px 24px;
  transition:background .15s ease;
}
.btn:hover{ background:#000; }
.btn span{ transition:transform .25s ease; }
.btn:hover span{ transform:translateX(4px); }
.ghost{
  display:inline-flex; align-items:center;
  font-family:var(--f-mono); font-size:13px;
  color:var(--soft);
  padding:13px 10px;
  text-underline-offset:4px;
}
.ghost:hover{ color:var(--ink); }
@media (prefers-reduced-motion: reduce){
  .btn, .btn span{ transition:none; }
  .btn:hover span{ transform:none; }
}

/* ==========================================================================
   FOOTER — night, always
   ========================================================================== */

.foot{
  position:relative;
  margin-top:110px;
  min-height:340px;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.foot-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 30%;
}
.foot-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(7,10,20,.15) 0%, rgba(7,10,20,.72) 100%);
}
.foot-in{
  position:relative; z-index:1;
  width:100%;
  max-width:var(--wrap); margin:0 auto;
  padding:60px 24px 26px;
  color:#e9ecf2;
}
.foot-brand{
  font-family:var(--f-pixel); font-size:26px;
  text-shadow:0 0 6px rgba(255,255,255,.5);
  margin-bottom:20px;
}
.foot-brand sup{ font-size:.45em; }
.foot-meta{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.07em; text-transform:uppercase;
  opacity:.92;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.25);
}
.foot-meta b{ font-weight:500; }
.foot-note{
  margin-top:14px;
  font-size:11.5px; opacity:.78; max-width:70ch;
}

/* ==========================================================================
   REVEALS
   ========================================================================== */

.rv{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:900px){
  .steps{ grid-template-columns:repeat(2, 1fr); gap:0 24px; }
  .cards{ grid-template-columns:1fr; }
  .row{ grid-template-columns:48px 1fr 24px; }
  .row .note{ grid-column:2; }
  .row .ar{ grid-row:1; grid-column:3; }
}

@media (max-width:640px){
  .nav{ padding:16px 18px; }
  .nav-links{ gap:16px; }
  .nav-links a:not(.pill){ display:none; }
  .hero-title{ padding-top:7svh; }
  .agent{
    position:relative; right:auto; bottom:auto;
    margin:28px auto 0;
    z-index:2;
  }
  .hero-lead{ padding:24px 20px 30px; }
  .steps{ grid-template-columns:1fr; }
  .sec{ padding-top:72px; }
  .foot{ margin-top:80px; }
}

/* ==========================================================================
   SUBPAGES — same sky machine, shorter band; content reuses the system
   ========================================================================== */

.hero--page{ min-height:46svh; }
.hero--page .hero-title{ padding:6svh 24px 0; }
.hero--page .hero-title h1{ font-size:clamp(1.6rem, 1.1rem + 2.6vw, 2.5rem); }
.hero--page .hero-lead{ margin:18px auto 0; padding:0 24px 40px; text-align:center; }

.steps--3{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:900px){ .steps--3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .steps--3{ grid-template-columns:1fr; } }

/* check/tick lines inside cards */
.ticks{ list-style:none; display:grid; gap:7px; }
.ticks li{
  display:flex; gap:9px; align-items:baseline;
  font-size:13.5px; color:var(--soft);
}
.ticks li::before{
  content:'\2192'; /* → */
  font-family:var(--f-mono); font-size:12px;
  color:var(--live); flex-shrink:0;
}

/* prose blocks (about) */
.prose{ max-width:64ch; color:var(--soft); font-size:15.5px; }
.prose + .prose{ margin-top:14px; }
.prose b{ color:var(--ink); font-weight:600; }

/* non-link index rows (beliefs) */
div.row{ cursor:default; }
div.row:hover{ background:transparent; }

/* contact — form card */
.contact-grid{ display:grid; grid-template-columns:1.25fr .85fr; gap:24px; align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.form-card{
  background:var(--card); border-radius:14px;
  box-shadow:var(--shadow-card); padding:26px 24px;
}
.form-card h2{ font-family:var(--f-pixel); font-weight:400; font-size:1.25rem; margin-bottom:18px; }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:640px){ .f-row{ grid-template-columns:1fr; } }
.field{ display:grid; gap:6px; margin-bottom:14px; }
.field label{
  font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
}
.field input, .field select, .field textarea{
  font-family:var(--f-body); font-size:14.5px; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
  padding:11px 12px; width:100%;
}
.field select{
  appearance:none; -webkit-appearance:none; padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23525252' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:11px;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--ink); outline-offset:0; border-color:var(--ink);
}
.field ::placeholder{ color:var(--faint); }
.hp{ position:absolute; left:-9999px; }
button.btn{ border:0; cursor:pointer; font-size:13px; }
.form-note{ font-family:var(--f-mono); font-size:11.5px; color:var(--faint); margin-top:12px; }
.form-note a{ color:var(--soft); text-underline-offset:3px; }
.form-note a:hover{ color:var(--ink); }
.form-ok{
  background:var(--live-soft); border:1px solid var(--live);
  border-radius:14px; padding:24px 22px;
}
.form-ok h2{ font-family:var(--f-pixel); font-weight:400; font-size:1.25rem; margin-bottom:12px; }
.form-ok .ticks li::before{ color:var(--live); }

/* contact aside */
.cx{ display:grid; gap:12px; }
.cx .r{
  background:var(--card); border-radius:12px; box-shadow:var(--shadow-card);
  padding:14px 16px;
}
.cx .k{ font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.cx .v{ display:block; font-family:var(--f-pixel); font-size:1rem; margin-top:4px; text-decoration:none; }
.cx a.v:hover{ color:var(--live); }

/* footer nav links */
.foot-links{
  display:flex; flex-wrap:wrap; gap:8px 22px;
  margin-bottom:18px;
  font-family:var(--f-mono); font-size:11.5px;
  letter-spacing:.08em; text-transform:uppercase;
}
.foot-links a{ text-decoration:none; opacity:.85; }
.foot-links a:hover{ opacity:1; text-decoration:underline; text-underline-offset:4px; }
.foot-meta a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.nav-links a[aria-current="page"]:not(.pill){ text-decoration:underline; text-underline-offset:5px; }