/* 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 /site-assets/westkite-6eeaa366d0d3.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;
  --wk-header-height: 56px;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body.home {
  margin: 0;
  overflow-x: clip;
  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: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  height: var(--wk-header-height);
  margin: 0 0 calc(-1 * var(--wk-header-height));
  padding: 0 32px;
  border: 1px solid transparent;
  border-radius: 0;
  /* Clear at rest, so the bar is the same sky as the hero behind it; the floating state
     below brings in its own surface. */
  background: transparent;
  color: var(--wk-text, #f7f6f5);
  overflow: visible;
  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 calc(-1 * var(--wk-header-height));
  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 rect {
  transition: fill 280ms ease-in-out;
}

.lockup:hover .lk-mark rect,
.lockup:focus-visible .lk-mark rect {
  fill: var(--wk-slate, #737373);
}

.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;
}

/* Dashboard: white with the brand's thin grey border on every page. */
.site-actions .wk-btn-secondary,
.site-actions .wk-btn-secondary:hover {
  border-color: var(--wk-border);
}

.site-actions .wk-btn-secondary:hover { background: #f1f1f1; }

.site-actions .wk-btn-primary {
  background: #000;
  border-color: #000;
  color: #fff;
}

.site-nav {
  display: flex;
  align-self: stretch;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  min-width: 0;
  padding-inline: 28px;
}

.nav-group {
  display: flex;
  align-items: center;
}

.nav-trigger {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  z-index: 1;
  height: 36px;
  padding: 0 12px;
  border-radius: 4px;
  border: 0;
  background: transparent;
  color: inherit;
  font: 500 15px/1 var(--wk-sans, "Inter", system-ui, sans-serif);
  letter-spacing: -0.035em;
  cursor: pointer;
}

.nav-trigger svg {
  display: block;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-group.is-open .nav-trigger svg {
  transform: rotate(180deg);
}

/* Floating cards share the header coordinate space; their pointer follows the trigger. */
.nav-trigger:hover,
.nav-group.is-open > .nav-trigger { color: #292929; }
.nav-highlight {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  height: 36px;
  border-radius: 4px;
  background: #f1f1f1;
  opacity: 0;
  pointer-events: none;
}
.nav-highlight.is-ready {
  transition: transform 280ms cubic-bezier(.16, 1, .3, 1),
    width 280ms cubic-bezier(.16, 1, .3, 1), opacity 150ms ease;
}
.nav-highlight.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .nav-highlight.is-ready { transition: none; }
}
.mega-panel {
  --menu-surface: #f1f1f1;
  position: absolute;
  top: calc(100% + 14px);
  left: var(--menu-left, 24px);
  width: min(380px, calc(100% - 48px));
  z-index: 20;
  padding: 4px 4px 0;
  border: 1px solid #dedede;
  border-radius: 4px;
  background: var(--menu-surface);
  transition: background-color 160ms ease;
  color: #292929;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22), 0 4px 12px rgba(0, 0, 0, .12);
  visibility: hidden;
  pointer-events: none;
}
/* Transparent bridge lets the pointer cross the visual gap without closing the card. */
.mega-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}
.mega-pointer {
  position: absolute;
  top: -12px;
  left: calc(var(--menu-pointer, 50%) - 16px);
  width: 32px;
  height: 14px;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}
.mega-pointer-fill { fill: var(--menu-surface); transition: fill 160ms ease; }
.mega-pointer-edge { fill: none; stroke: #dedede; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.nav-group.is-open .mega-panel { visibility: visible; pointer-events: auto; }
.mega-panel-inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 0;
  border-radius: 3px;
  max-height: calc(100dvh - 150px);
  overflow-y: auto;
}
#panel-product,
#panel-resources { width: min(760px, calc(100% - 48px)); }

.mega-overview {
  color: #000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  min-height: 36px;
  padding: 8px 31px;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.mega-panel:has(.mega-overview:hover),
.mega-panel:has(.mega-overview:focus-visible) { --menu-surface: #e2e2e2; }
.mega-panel-inner > .mega-links {
  margin: 0;
  padding: 19px;
  border: 1px solid #dedede;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.mega-overview span { transition: transform 180ms ease; }
.mega-overview:hover span { transform: translateX(3px); }

.mega-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 2px 16px;
}

.mega-links a,
.mega-links button {
  display: grid;
  align-content: start;
  gap: 4px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.mega-links a:hover,
.mega-links a:focus-visible,
.mega-links button:hover,
.mega-links button:focus-visible {
  background: rgba(41, 41, 41, 0.045);
}

.mega-links strong {
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.0125em;
}

.mega-links span {
  color: var(--wk-slate, #737373);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.0125em;
}

/* Product links fill two columns, with one overview link below. */
#panel-product .mega-panel-inner { grid-template-columns: 1fr; gap: 0; }
#panel-product .mega-links,
#panel-resources .mega-links { gap: 4px 20px; }
.mega-links a:has(.mega-icon), .mega-links button:has(.mega-icon) { grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; padding: 8px 12px; }
.mega-links a:has(.mega-icon) > :not(.mega-icon), .mega-links button:has(.mega-icon) > :not(.mega-icon) { grid-column: 2; }
.mega-icon { grid-row: 1 / span 2; width: 20px; height: 20px; margin-top: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: #000; }


/* 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: calc(100% + 8px);
  left: 12px;
  right: 12px;
  z-index: 5;
  /* Only small screens lay the menu out. Hidden but present, it would hang below the sticky
     header and stretch the page past the footer. */
  display: none;
  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 .wk-btn-primary { background: #000; border-color: #000; color: #fff; }
.contact-form .wk-btn-primary:hover { background: #000; border-color: #000; }

.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/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAQFA//EACQQAAEEAQMDBQAAAAAAAAAAAAEAAgMRBBIhMQVxkRMUMlGB/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAQD/8QAHBEAAgICAwAAAAAAAAAAAAAAAAECAxEhIkFR/9oADAMBAAIRAxEAPwCZHEKWojC0e9jRTcY99RSUuS6OWhqaPp26oViIXRL0ZMYR7KSVmpoFXVk0tMUnILQ3l3juqk+iONrG7NaKCTnhaFdWXyIMj3X8j5SeQT6nKELErK/ReJfxN5JOyEIOz//Z"); }
@media (orientation: portrait) { .hero-video { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAA5ACADASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAwUBBAYA/8QAJhAAAgIBAgUEAwAAAAAAAAAAAQIAAxEhUQUSMUGBBBQyYVKR0f/EABkBAAIDAQAAAAAAAAAAAAAAAAABAgMEBf/EABwRAAMBAAIDAAAAAAAAAAAAAAABAhEDEiFBYf/aAAwDAQACEQMRAD8AUIsKFnIIULNiOUwRWCdZaIgnWDBBEEJiAouSzQEhvxOhliCY2mn5IxJp9P7i3kPwGrn628/2d4z9DvGtFHt6ApxznVj9yF1iLOKNemWpZXwDGNTNjlc5I1B3EUVDuDkRt6MNfyIvz6Z2G/jEqmsZq5Y7T9GHDaC9xub4V6IN27nxL9hkoq1VKiDCqMCCtbQxN69CZ6rDF0vqM/vvNBwYjmsO69pm64/4H0siLPQ7ZtJWteEbpKtkGJH/2Q=="); } }
/* 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;
}

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

/* 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;
  border-top: 1px solid var(--wk-hairline, #ebeae9);
}

.uses-col {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 32px 56px;
  border-left: 1px solid var(--wk-hairline, #ebeae9);
  border-right: 1px solid var(--wk-hairline, #ebeae9);
  text-align: center;
}

.uses-label {
  margin: 8px 0 24px;
  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, 64px) * 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, 64px) * 3.5);
  left: 0;
  right: 0;
  margin-top: calc(var(--uses-step, 64px) / -2);
  height: var(--uses-step, 64px);
  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 {
    grid-template-columns: auto minmax(0, 1fr) auto;
    height: var(--wk-header-height);
    margin-bottom: calc(-1 * var(--wk-header-height));
    padding: 0 20px;
  }

  .site-head.is-floating {
    top: 8px;
    margin: 0 12px calc(-1 * var(--wk-header-height));
    padding: 0 12px;
  }

  .site-actions,
  .site-nav {
    display: none;
  }

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

  .site-menu {
    top: calc(100% + 8px);
    max-height: calc(100dvh - 112px);
    overflow-y: auto;
    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;
  }

  /* Phone menu: four large rows; Product and Resources slide in as their own screen. */
  .site-menu {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
  }

  .mobile-menu-view {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-menu-root,
  .mobile-menu-sub {
    display: grid;
    align-content: start;
    padding: 8px;
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
  }

  .mobile-menu-sub {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    transform: translateX(100%);
  }

  .mobile-menu-sub.is-current {
    position: relative;
    height: auto;
    overflow: visible;
    opacity: 1;
    transform: none;
  }

  .is-sub .mobile-menu-root {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-25%);
  }

  .site-menu .mobile-menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 12px;
    border-radius: 0;
    font-size: 16px;
    letter-spacing: -0.035em;
  }

  .site-menu .mobile-menu-row + .mobile-menu-row {
    border-top: 1px solid var(--wk-hairline, #ebeae9);
  }

  .mobile-menu-chevron,
  .mobile-menu-back svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-menu-chevron {
    color: var(--wk-slate, #737373);
  }

  .mobile-menu-subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .site-menu .mobile-menu-back,
  .site-menu .mobile-menu-overview {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: auto;
    padding: 10px 12px;
    font-size: 14px;
  }

  .site-menu .mobile-menu-back {
    color: var(--wk-slate, #737373);
  }

  .site-menu .mobile-menu-overview {
    color: var(--wk-cobalt, #093acd);
  }

  .mobile-menu-subtitle {
    margin: 4px 12px 6px;
    font-family: var(--wk-display, "Newsreader", Georgia, serif);
    font-size: 26px;
    font-weight: var(--wk-display-weight, 375);
    line-height: 1.1;
    letter-spacing: -0.03em;
  }

  .site-menu .mobile-menu-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3px;
    padding: 12px;
  }

  .site-menu .mobile-menu-item:has(.mega-icon) {
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 12px;
  }

  .mobile-menu-item:has(.mega-icon) > :not(.mega-icon) {
    grid-column: 2;
  }

  .mobile-menu-item strong {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
  }

  .mobile-menu-item span {
    color: var(--wk-slate, #737373);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.02em;
  }

  .mobile-menu-actions {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--wk-hairline, #ebeae9);
    background: var(--wk-paper, #ffffff);
  }

  .site-menu .mobile-menu-actions .wk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid var(--wk-border, #d1cfce);
    background: #ffffff;
    color: var(--wk-ink, #292929);
    font-size: 15px;
    text-align: center;
  }

  .site-menu .mobile-menu-actions .wk-btn-primary {
    border-color: #000000;
    background: #000000;
    color: #ffffff;
  }

  .site-menu .mobile-menu-actions .wk-btn-primary:hover {
    background: #222222;
  }

  /* 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: 24px 16px 36px;
  }

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

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

/* 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) {
  .lk-mark rect {
    transition: none;
  }

  .hero-video video {
    display: none;
  }

  .uses-list li {
    transition: none;
  }

  .menu-toggle,
  .menu-line,
  .site-menu,
  .site-head,
  .mobile-menu-root,
  .mobile-menu-sub {
    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; }

/* Keep the direct Blog link clear of the account actions on smaller desktops. */
@media (min-width: 901px) and (max-width: 1100px) {
  .site-head { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; }
  .site-nav { padding-inline: 0; gap: 8px; }
}