/* ==========================================================================
   KB Imaging Solutions LLC — site stylesheet
   --------------------------------------------------------------------------
   Adapted from the BiggSky stylesheet so the two properties read as one
   company: same tokens, same components, same spacing rhythm. The parts
   BiggSky needs and this site does not (slideshow, gallery, lightbox,
   licence forms, documentation viewer) have simply been left out.

   Edit colours in the :root block below.
   ========================================================================== */

:root {
  /* Shared brand colours — identical to biggsky.com */
  --orange:      #ef6c1f;
  --orange-dark: #cf5710;
  --orange-soft: #fdf1e8;
  --blue:        #1a8fce;
  --blue-dark:   #0f6c9e;
  --blue-soft:   #ecf6fc;
  --blue-line:   #cbe6f6;
  --blue-lift:   #4fb3e8;   /* bright enough to read on the night background */

  /* --------------------------------------------------------------------
     Which of the two carries the site.

     KB Imaging leads in blue; BiggSky leads in orange. Both palettes are
     defined above so the BiggSky spotlight and the links that point at it
     can stay orange on an otherwise blue page — that contrast is doing a
     job, it is not an oversight. Everything site-level goes through the
     --accent tokens, so re-pointing them here re-colours the whole site.
     -------------------------------------------------------------------- */
  --accent:      var(--blue);
  --accent-dark: var(--blue-dark);
  --accent-soft: var(--blue-soft);
  --accent-line: var(--blue-line);

  /* Neutrals */
  --ink:      #101720;
  --ink-2:    #47566a;
  --ink-3:    #6b7a8d;
  --bg:       #ffffff;
  --bg-2:     #f4f7fa;
  --bg-3:     #eaeff5;
  --line:     #dde5ee;
  --line-2:   #c9d5e2;
  --night:    #0a1018;
  --night-2:  #131c28;

  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(16, 23, 32, .06), 0 1px 3px rgba(16, 23, 32, .07);
  --shadow-md: 0 2px 4px rgba(16, 23, 32, .05), 0 8px 20px rgba(16, 23, 32, .08);
  --shadow-lg: 0 4px 8px rgba(16, 23, 32, .06), 0 20px 48px rgba(16, 23, 32, .13);

  --container: 1180px;
  --header-h:  68px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; }
img { display: block; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); }
h3 { font-size: 1.2rem; letter-spacing: -.01em; }
h4 { font-size: 1.02rem; letter-spacing: 0; }

p  { margin: 0 0 1.1em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--accent-dark); text-decoration: none; }
a:hover { color: var(--orange-dark); text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

code, kbd, samp { font-family: var(--mono); font-size: .88em; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem; z-index: 2000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------- primitives -- */

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
.container--narrow { max-width: 820px; }

.section { padding: 4.5rem 0; }
.section--tight { padding: 3rem 0; }
.section--alt  { background: var(--bg-2); border-block: 1px solid var(--line); }

.section-head { max-width: 720px; margin: 0 auto 2.75rem; text-align: center; }
.section-head p { color: var(--ink-2); font-size: 1.08rem; margin: 0; }
.section-head--left { margin-inline: 0; text-align: left; }

.eyebrow {
  display: inline-block;
  font-size: .76rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-dark);
  margin-bottom: .7rem;
}

.lede { font-size: 1.15rem; color: var(--ink-2); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.6rem;
  border-radius: var(--radius-sm);
  font-weight: 600; font-size: 1rem; line-height: 1.2;
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--accent-dark); color: #fff; box-shadow: var(--shadow-md); }

/* Buttons that lead to BiggSky wear BiggSky's colour, not this site's. */
.btn--biggsky { background: var(--orange); color: #fff; box-shadow: var(--shadow-sm); }
.btn--biggsky:hover { background: var(--orange-dark); color: #fff; box-shadow: var(--shadow-md); }

.btn--secondary { background: var(--bg); color: var(--ink); border-color: var(--line-2); }
.btn--secondary:hover { background: var(--bg-2); border-color: var(--ink-3); color: var(--ink); }

.btn--ghost { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.45); }
.btn--ghost:hover { background: rgba(255,255,255,.2); color: #fff; }

.btn--sm { padding: .5rem 1rem; font-size: .9rem; }
.btn--lg { padding: .95rem 2.1rem; font-size: 1.08rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; gap: .85rem; flex-wrap: wrap; }

.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--accent-soft); color: var(--accent-dark);
  border: 1px solid var(--accent-line);
  padding: .3rem .8rem; border-radius: 999px;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
}
.pill--orange { background: var(--orange-soft); color: var(--orange-dark); border-color: #f7dcc7; }

/* ------------------------------------------------------------- header -- */

.site-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  min-height: var(--header-h);
  display: flex; align-items: center; gap: 1.5rem;
}

/* The brand is set in type rather than as an image, so there is no logo file
   to keep in step. .brand-mark is an inline SVG: a blurred point resolving to
   a sharp one, which is the whole business in one glyph. */
.brand { display: flex; align-items: center; gap: .65rem; flex: 0 0 auto; color: var(--ink); }
.brand:hover { text-decoration: none; color: var(--ink); }
.brand-mark { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 9px; display: block; }
.brand-word {
  font-size: 1.1rem; font-weight: 700; letter-spacing: -.025em;
  line-height: 1.15; white-space: nowrap;
}
.brand-word .fade { color: var(--ink-3); font-weight: 600; }
.brand-sub {
  display: block; font-size: .66rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dark);
}

@media (max-width: 460px) {
  .brand-mark { width: 32px; height: 32px; flex-basis: 32px; }
  .brand-word { font-size: .98rem; }
  .brand-sub { display: none; }
}

.primary-nav { margin-left: auto; }
.primary-nav ul {
  display: flex; align-items: center; gap: .25rem;
  list-style: none; margin: 0; padding: 0;
}
.primary-nav a {
  display: block; padding: .55rem .85rem;
  border-radius: var(--radius-sm);
  font-size: .95rem; font-weight: 600; color: var(--ink-2);
}
.primary-nav a:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.primary-nav a[aria-current="page"] { color: var(--accent-dark); background: var(--accent-soft); }

.header-cta { flex: 0 0 auto; margin-left: .5rem; }

.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; background: var(--ink);
  border-radius: 2px; margin-inline: auto; transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top:  6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .primary-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md); padding: .75rem 1.5rem 1.25rem;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav a { padding: .8rem .6rem; border-radius: var(--radius-sm); }
  .header-cta { display: none; }
  .primary-nav .nav-cta { display: block; margin-top: .75rem; }
}
@media (min-width: 901px) { .primary-nav .nav-cta { display: none; } }

/* --------------------------------------------------------------- hero -- */

/* biggsky.com opens on a photographic slideshow. There is no equivalent image
   library here, so the hero is that same dark stage rendered with the night
   gradient and a drawn point spread function instead of a photograph. */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--night) 0%, #16273a 100%);
  color: #cfd9e6;
  padding: 4.75rem 0 4.25rem;
}

.hero-figure {
  position: absolute; top: 50%; right: -5rem; transform: translateY(-50%);
  width: 40rem; height: 40rem; pointer-events: none; opacity: .55;
}
@media (max-width: 1120px) { .hero-figure { right: -14rem; opacity: .3; } }
@media (max-width: 780px)  { .hero-figure { display: none; } }

.hero-inner { position: relative; z-index: 1; max-width: 40rem; }
.hero h1 { color: #fff; margin-bottom: .6rem; }
.hero .eyebrow { color: var(--blue-lift); }
.hero .lede { color: #c6d3e1; font-size: 1.2rem; }
.hero .hero-note { color: #8ba0b6; font-size: .92rem; }

/* Strip directly under the hero, as on biggsky.com */
.hero-strip {
  background: var(--night-2);
  border-top: 1px solid rgba(255,255,255,.07);
  color: #aebccc; font-size: .9rem;
}
.hero-strip .container {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: .6rem 2rem; padding-block: .85rem;
}
.hero-strip span { display: inline-flex; align-items: center; gap: .45rem; }
.hero-strip .tick { color: #58c07f; font-weight: 700; }

/* -------------------------------------------------------------- cards -- */

/* min(..., 100%) stops the track minimum from overflowing narrow phones. */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card h3 { margin-bottom: .4rem; }
.card p  { color: var(--ink-2); font-size: .97rem; margin: 0 0 .8rem; }
.card p:last-child { margin-bottom: 0; }

a.card:hover, .card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-2);
  text-decoration: none;
}
a.card { color: inherit; display: block; }
a.card h3 { color: var(--accent-dark); }

.card-icon {
  width: 42px; height: 42px; margin-bottom: 1rem;
  display: grid; place-items: center;
  border-radius: 10px; background: var(--accent-soft); color: var(--accent-dark);
}
.card-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.card-icon--orange { background: var(--orange-soft); color: var(--orange-dark); }
/* Filled variant, for the one card in a group that should carry more weight. */
.card-icon--solid { background: var(--accent); color: #fff; }

/* Feature list with ticks */
.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li {
  position: relative; padding-left: 1.85rem; margin-bottom: .6rem;
  color: var(--ink-2); font-size: .98rem;
}
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 1.05rem; height: .55rem;
  border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}
.tick-list--orange li::before { border-color: var(--orange); }

/* --------------------------------------------------------------- work -- */

/* One row per project: a rule down the left, a period, a title, a paragraph.
   Reads as a record of work rather than as a product grid. */
.work-list { list-style: none; margin: 0; padding: 0; }

.work-item {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 2.5rem;
  border-left: 3px solid var(--line);
}
.work-item:last-child { margin-bottom: 0; }
.work-item--current { border-left-color: var(--accent); }

.work-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-bottom: .4rem;
}
.work-year {
  font-family: var(--mono); font-size: .8rem; font-weight: 600;
  letter-spacing: .04em; color: var(--ink-3);
}
.work-item h3 { margin-bottom: .35rem; }
.work-item p  { color: var(--ink-2); font-size: .99rem; margin-bottom: .7rem; }

/* Small link row under a work item */
.linkrow { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-size: .93rem; font-weight: 600; }
.linkrow a { display: inline-flex; align-items: center; gap: .35rem; }
.linkrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Publication references */
.cite-list { list-style: none; margin: 0; padding: 0; }
.cite-list li {
  border-top: 1px solid var(--line);
  padding: 1.1rem 0;
  color: var(--ink-2); font-size: .96rem;
}
.cite-list li:first-child { border-top: 0; padding-top: 0; }
.cite-list .cite-title { color: var(--ink); font-weight: 600; display: block; }
.cite-list .cite-where { font-style: italic; }

/* ------------------------------------------------------- BiggSky panel -- */

/* Stands in for a screenshot until there is one worth using. */
.spotlight-tile {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(150deg, #0a1018 0%, #16273a 100%);
  box-shadow: var(--shadow-lg);
  padding: 2.75rem 2rem;
  text-align: center; color: #cfd9e6;
  min-height: 18rem;
  display: grid; align-content: center; justify-items: center; gap: .4rem;
}
.spotlight-stars { position: absolute; inset: 0; pointer-events: none; }
.spotlight-tile > *:not(.spotlight-stars) { position: relative; z-index: 1; }
.spotlight-name { font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em; color: #fff; }
.spotlight-sub  { font-size: .95rem; color: #9fb2c6; margin: 0; }

/* ---------------------------------------------------------- utilities -- */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.75rem; }
.mt-4 { margin-top: 2.5rem; }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: 1.75rem; }
.muted { color: var(--ink-3); font-size: .9rem; }

.callout {
  background: var(--orange-soft); border: 1px solid #f7dcc7;
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.35rem; color: var(--ink-2); font-size: .95rem;
}
.callout strong { color: var(--ink); }
.callout--blue { background: var(--accent-soft); border-color: var(--accent-line); border-left-color: var(--accent); }

.split { display: grid; gap: 3rem; grid-template-columns: 1fr 1fr; align-items: center; }
.split > * { min-width: 0; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 2rem; } }

.cta-band {
  background: linear-gradient(135deg, var(--night) 0%, #16273a 100%);
  color: #fff; text-align: center; padding: 4rem 0;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #b4c3d3; max-width: 55ch; margin: 0 auto 2rem; font-size: 1.08rem; }
.cta-band .btn-row { justify-content: center; }

/* ------------------------------------------------------------- footer -- */

.site-footer {
  background: var(--night); color: #9aabbd;
  padding: 3.5rem 0 2rem;
  font-size: .93rem;
}
.footer-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1.6fr 1fr 1fr;
  margin-bottom: 2.5rem;
}
/* Grid items default to min-content width; without this a wide child (a long
   link, a row of icons) stretches its track past the viewport. */
.footer-grid > * { min-width: 0; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; } }

.footer-brand .brand { color: #fff; }
.footer-brand .brand-word { color: #fff; }
.footer-brand .brand-word .fade { color: #7d8e9f; }
.footer-brand .brand-sub { color: var(--blue-lift); }
.footer-brand p { color: #7d8e9f; max-width: 34ch; font-size: .9rem; margin-top: .95rem; }

.site-footer h4 {
  color: #fff; font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: .9rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: #9aabbd; }
.site-footer a:hover { color: #fff; text-decoration: none; }

.footer-social { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.footer-social a {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 8px; background: rgba(255,255,255,.07); color: #cfd9e6;
}
.footer-social a:hover { background: var(--accent); color: #fff; }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  justify-content: space-between; align-items: center;
  color: #6f8093; font-size: .85rem;
}

/* --------------------------------------------------------------- misc -- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover, .card:hover, a.card:hover, .card--link:hover { transform: none; }
}