/* Built on the West Kite Design System 1.10 · https://westkite.com/brand · wk-78fa6fe5 */
/* Landing page. Tokens, fonts, buttons, form fields and the dialog come from /westkite.css. */

:root {
  color-scheme: light;
  /* The shell gutter from the product: structure is shown by the ground, never by a stroke.
     Panes are Paper sheets on the Linen ground, held apart by this much ground. */
  --wk-shell-gutter: 2px;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body.home {
  margin: 0;
  overflow-x: hidden;
  display: grid;
  background: var(--wk-paper, #ffffff);
  color: var(--wk-text, #292929);
  font-family: var(--wk-sans, "Inter", system-ui, -apple-system, sans-serif);
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--wk-accent, #093acd);
  outline-offset: 2px;
}

/* Header: lockup, two actions. Collapses to a menu button on small screens. At the top of the
   page it is fully transparent and lies over the hero footage (the negative bottom margin pulls
   the hero up under it), in the on-carbon palette, with one shell gutter of Stone ground drawn
   beneath it to hold the header band and the hero apart. Once the page scrolls it becomes a
   floating glass bar: translucent Paper over a blur, one Ash hairline, the system's 4px corner
   and the 22px inset, back in the light palette. Sticky keeps its place in the flow, so nothing
   below it jumps when it changes. No shadow, no gradient. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  height: 72px;
  margin: 0 0 -72px;
  padding: 0 32px;
  border: 1px solid transparent;
  border-radius: 0;
  /* A light Carbon wash over a soft blur of the footage, so the lockup and buttons hold up
     against the brighter frames. No line, no gradient. */
  background: rgba(28, 28, 28, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--wk-text, #f7f6f5);
  transition: margin 200ms ease, padding 200ms ease, border-color 200ms ease,
    border-radius 200ms ease, background-color 200ms ease, top 200ms ease;
}

/* The gutter: ground between the header band and the hero, only while the header is at the top. */
.site-head::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: calc(100% + 1px);
  height: var(--wk-shell-gutter);
  background: var(--wk-stone, #d1cfce);
}

.site-head.is-floating {
  top: 12px;
  margin: 0 22px -72px;
  padding: 0 24px;
  border-color: var(--wk-hairline, #ebeae9);
  border-radius: var(--wk-radius, 4px);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  /* Back to the light palette: the same tokens on-carbon flips, as :root sets them. */
  --wk-text: var(--wk-ink);
  --wk-text-muted: var(--wk-slate);
  --wk-border: var(--wk-stone);
  --wk-hairline: var(--wk-ash);
  --wk-hover: var(--wk-gray-100);
  --wk-gray-100: #f4f2ef;
}

.site-head.is-floating::after {
  display: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-head {
    background: rgba(28, 28, 28, 0.55);
  }

  .site-head.is-floating {
    background: rgba(255, 255, 255, 0.94);
  }
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-self: start;
  text-decoration: none;
}

.lk-mark {
  display: block;
  width: 30px;
  height: 24px;
}

.lk-word {
  display: block;
  height: 23px;
  width: auto;
}

/* The wordmark follows the header's text colour: Linen over the footage, Ink on the glass bar. */
.lk-word path {
  fill: currentColor;
}

.site-actions {
  display: flex;
  gap: 8px;
  justify-self: end;
}

/* Menu: three lines, at the navigation icon size the system asks for. */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  justify-self: end;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  border-radius: var(--wk-radius, 4px);
  background: none;
  color: var(--wk-text, #292929);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.menu-toggle:hover,
.menu-toggle[aria-expanded="true"] {
  background: var(--wk-gray-100, #f4f2ef);
}

.menu-toggle svg {
  display: block;
  width: 20px;
  height: 20px;
}

.menu-line {
  transform-box: view-box;
  transform-origin: 10px 10px;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 140ms ease;
}

.menu-toggle[aria-expanded="true"] .menu-line-top {
  transform: translateY(5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-line-middle {
  opacity: 0;
  transform: scaleX(0.25);
}

.menu-toggle[aria-expanded="true"] .menu-line-bottom {
  transform: translateY(-5px) rotate(-45deg);
}

.site-menu {
  position: absolute;
  top: 60px;
  left: 12px;
  right: 12px;
  z-index: 5;
  display: grid;
  padding: 8px;
  border: 1px solid var(--wk-hairline, #ebeae9);
  border-radius: var(--wk-radius, 4px);
  background: var(--wk-paper, #ffffff);
  box-shadow: 0 14px 36px rgba(28, 28, 28, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(0.985);
  transform-origin: top right;
  /* A Paper sheet, whatever palette the header is in. */
  --wk-text: var(--wk-ink);
  --wk-hairline: var(--wk-ash);
  --wk-gray-100: #f4f2ef;
}

.site-menu[hidden] {
  display: none;
}

.site-menu a,
.site-menu button {
  display: block;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: var(--wk-radius, 4px);
  background: none;
  color: var(--wk-text, #292929);
  font: 500 15px/1.2 var(--wk-sans, "Inter", system-ui, sans-serif);
  letter-spacing: -0.04em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.site-menu a:hover,
.site-menu button:hover {
  background: var(--wk-gray-100, #f4f2ef);
}


/* Contact dialog: the system dialog with a stacked form. */
.contact-dialog {
  max-width: 420px;
}

.contact-form {
  display: grid;
  gap: 14px;
}

.contact-form .wk-dialog-actions {
  margin-top: 6px;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Hero: fills the first screen, running up behind the header; the copy centres in the room
   below the header and its gutter. Flush with both screen edges, footage edge to edge. */
.hero {
  position: relative;
  margin: 0;
  height: 100svh;
  padding-top: calc(72px + var(--wk-shell-gutter));
  padding-bottom: 72px;   /* room for the "Built for" strip, so the copy centres above it */
  min-height: 632px;
  background: var(--wk-carbon, #1c1c1c);
  color: var(--wk-text, #f7f6f5);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The footage: a poster is the first paint, and the loop fades in over it once it is playing.
   Both cover the hero edge to edge. The blurred stand-in (build_home.py inlines it below)
   shows until the poster lands, so the hero is never flat Carbon. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--wk-carbon, #1c1c1c) center / cover no-repeat;
}

.hero-video picture,
.hero-video img,
.hero-video video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video video {
  opacity: 0;
  transition: opacity 600ms ease;
}

.hero-video video.is-playing {
  opacity: 1;
}

/* hero:generated:start (build_home.py writes the blurred stand-in) */
.hero-video { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAASACADASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAECAwQG/8QAIBAAAgMAAgIDAQAAAAAAAAAAAQIAAxEEQSExEjJCcf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAMAwEAAhEDEQA/AOVt5tnzZK7cQHAVGHP7MhtVeXWPyx0sxmKy4sS2kMTuD1IHWZQASxkI0nlMtzAPtZJ0DsSqpkFy6fHZMpH28+Iu4IRkkJVtUkED2IQlC7gPcIQP/9k="); }
@media (orientation: portrait) { .hero-video { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAA5ACADASIAAhEBAxEB/8QAGgAAAwEBAQEAAAAAAAAAAAAAAQIEAAMFBv/EACQQAAICAQUAAQUBAAAAAAAAAAECAAMRBBIhMUEFIjNRYXGB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/xAAXEQEBAQEAAAAAAAAAAAAAAAAAAREx/9oADAMBAAIRAxEAPwD4ReuSBO9PIYbsjiSW37WKqigj9S349jajsQOCBiSJeOFrCuwDbwAD3MmqRDgqQIuvBGo6x9IkhglG37rc+z0PjLqqqLDY4U7gQPTxPNsLbiD3NngQqrV3rdcWG7GAOR+JMSM+xYIwNYcuZh0Ip7jDkSgH+wGH/IIGlemtppoZ7Kw9mSFBPmPRJV7gkD2uLLGYKFB8XoRIRAZR/9k="); } }
/* hero:generated:end */

/* One centred column: headline, lead and button stacked on the centre line of the screen,
   with the 32px page gutter from the brand guide (20px on a phone). */
.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  --hero-h1: clamp(48px, 5.6vw, 72px);
  width: 100%;
  padding: 64px 32px;
  text-align: center;
  /* One soft shadow for edge definition against the footage; the grade in the video does
     the rest of the work. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hero-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 32px;
}

.hero-aside .demo-link {
  text-shadow: none;
}

/* Who it is for: one row of plain Linen text along the foot of the hero, at the same inset
   as the copy. The label is muted, the list is full Linen. The list contributes its items
   straight to the row, so label and items share one gap; home.js widens that gap as the
   page scrolls, until the row is spread evenly across the hero as it leaves the screen. */
.hero-foot {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px var(--hero-foot-gap, 44px);
  margin: 0 32px;
  padding: 0 0 32px;
  font-family: var(--wk-sans, "Inter", system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: var(--wk-sans-track, -0.04em);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hero-foot-label {
  margin: 0;
  color: var(--wk-text-muted, rgba(255, 255, 250, 0.6));
}

.hero-foot-list {
  display: contents;
  color: var(--wk-text, #f7f6f5);
}

.hero-foot-list li {
  list-style: none;
}

.hero h1 {
  /* Above Display XL for the landing hero: up to 108/1, display tracking, balanced over
     two or three centred lines. */
  margin: 0;
  max-width: 11em;
  font-family: var(--wk-display, "Newsreader", Georgia, serif);
  font-weight: var(--wk-display-weight, 375);
  font-variation-settings: var(--wk-display-vs, "opsz" 28);
  font-size: var(--hero-h1);
  line-height: 1;
  letter-spacing: var(--wk-display-track, -0.03em);
  text-wrap: balance;
}

/* Keep "Commercial real estate," on one line wherever it fits, so the phrase never splits.
   Only the narrowest phones let it wrap. */
.hero h1 .nb {
  white-space: nowrap;
}

@media (max-width: 400px) {
  .hero h1 .nb {
    white-space: normal;
  }
}

/* The two calls to action sit side by side under the lead, and stack on narrow screens. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.hero-actions .wk-btn {
  text-shadow: none;
}

.lead {
  /* Body from the website scale, 16/1.4 in the text face. */
  margin: 0 0 28px;
  max-width: 32em;
  font-family: var(--wk-sans, "Inter", system-ui, -apple-system, sans-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  /* Full Linen, not the muted step: the footage behind it is busy and the 60 percent white
     of the muted token disappears against the brighter clips. */
  color: var(--wk-text, #f7f6f5);
  text-wrap: balance;
}

/* What people use West Kite for: a column between two hairlines, with the list cycling one
   line at a time. Only opacity and position change, and the whole thing holds still under
   reduced motion. The script drives it through the CSSOM; the content policy allows no
   style attributes. */
.uses {
  padding: 0 32px;
}

.uses-col {
  max-width: 1080px;
  margin: 0 auto;
  /* Less room above than below, so the label sits a little higher than centre. */
  padding: 64px 32px 96px;
  border-left: 1px solid var(--wk-hairline, #ebeae9);
  border-right: 1px solid var(--wk-hairline, #ebeae9);
  text-align: center;
}

.uses-label {
  margin: 16px 0 48px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--wk-sans-track, -0.04em);
  color: var(--wk-text-muted, #737373);
}

.uses-window {
  position: relative;
  height: calc(var(--uses-step, 74px) * 7);
  overflow: hidden;
}

.uses-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.uses-list li {
  position: absolute;
  /* Three and a half rows down: five rows on show, plus a row at each end where a line
     finishes fading out in full view rather than being cut off by the window edge. */
  top: calc(var(--uses-step, 74px) * 3.5);
  left: 0;
  right: 0;
  margin-top: calc(var(--uses-step, 74px) / -2);
  height: var(--uses-step, 74px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wk-display, "Newsreader", Georgia, serif);
  font-weight: var(--wk-display-weight, 375);
  font-variation-settings: var(--wk-display-vs, "opsz" 28);
  font-size: 54px;
  line-height: 1;
  letter-spacing: var(--wk-display-track, -0.03em);
  color: var(--wk-text, #292929);
  white-space: nowrap;
  opacity: 0;
  transition: transform 700ms ease, opacity 700ms ease;
}

.uses-list li.is-near {
  opacity: 0.26;
}

.uses-list li.is-far {
  opacity: 0.1;
}

.uses-list li.is-active {
  opacity: 1;
}

.uses-cta {
  /* The empty row under the list is the gap; the button needs none of its own. */
  margin-top: 0;
}

@media (max-width: 900px) {
  .site-head {
    height: 64px;
    margin-bottom: -64px;
    padding: 0 20px;
  }

  .site-head.is-floating {
    top: 8px;
    margin: 0 12px -64px;
    padding: 0 12px;
  }

  .site-actions {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .site-menu {
    top: 56px;
    transition: opacity 160ms ease,
      transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 220ms;
  }

  .site-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
  }

  /* The hero still reaches the bottom of the first screen. */
  .hero {
    padding-top: calc(64px + var(--wk-shell-gutter));
    padding-bottom: 104px;
    min-height: 584px;
  }

  .hero-foot {
    margin: 0 20px;
    padding: 0 0 28px;
    gap: 8px var(--hero-foot-gap, 24px);
    font-size: 13px;
  }

  .hero-copy {
    padding: 36px 20px 28px;
  }

  .hero-aside {
    margin-top: 24px;
  }

  .hero h1 {
    font-size: clamp(30px, 8.6vw, 44px);
  }

  .lead {
    max-width: 24em;
    font-size: 16px;
  }

  .demo-link,
  .hero-actions .wk-btn {
    min-height: 44px;
    padding: 0 20px;
    font-size: 15px;
  }

  .uses {
    padding: 0 20px;
  }

  .uses-col {
    padding: 32px 16px 56px;
  }

  .uses-list li {
    font-size: 32px;
  }

  .uses-window {
    --uses-step: 46px;
  }
}

/* Phones: the lockup keeps the mark and drops nothing, but the wordmark can crowd the button. */
@media (max-width: 400px) {
  .site-head {
    padding: 0 16px;
  }

  .hero-copy {
    padding: 28px 16px 24px;
  }

  .lk-word {
    height: 20px;
  }
}

/* A short window, mostly a phone held sideways: let the hero size itself and scroll. */
@media (max-width: 900px) and (max-height: 560px) {
  .hero {
    height: auto;
    min-height: 0;
  }

  .hero-copy {
    padding: 24px 20px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video video {
    display: none;
  }

  .uses-list li {
    transition: none;
  }

  .menu-toggle,
  .menu-line,
  .site-menu,
  .site-head {
    transition: none;
  }
}

/* Public catalog and demo entry points share the existing button system. */
.wk-home-listing-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }