/* Buttons. Architectural edges, no shadow, sans face, sentence case.
   Primary is an ink fill that shifts to olive on hover. */
.kb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kb-space-2xs);
  min-block-size: 52px;
  padding: 14px 28px;
  border: var(--kb-border-width) solid var(--kb-border-strong);
  border-radius: var(--kb-radius);
  background: var(--kb-charcoal);
  color: var(--kb-ivory);
  font-family: var(--kb-font-structure);
  font-size: 15px;
  font-weight: var(--kb-weight-structure);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
}

.kb-button:hover,
.kb-button:focus-visible {
  background: var(--kb-olive);
  border-color: var(--kb-olive);
  color: var(--kb-ivory);
}

/* Secondary is an ink outline on transparent. */
.kb-button--outline {
  background: transparent;
  color: var(--kb-charcoal);
}

.kb-button--outline:hover,
.kb-button--outline:focus-visible {
  background: var(--kb-charcoal);
  border-color: var(--kb-charcoal);
  color: var(--kb-ivory);
}

/* On an ink ground the outline inverts. */
.kb-section--inverse .kb-button--outline,
.kb-hero .kb-button--outline {
  border-color: var(--kb-ivory);
  color: var(--kb-ivory);
}

.kb-section--inverse .kb-button--outline:hover,
.kb-hero .kb-button--outline:hover {
  background: var(--kb-ivory);
  color: var(--kb-charcoal);
}

/* The long arrow is the only link glyph. There is no icon set. */
.kb-button--arrow::after,
.kb-arrow-link::after {
  content: "\2192";
  font-family: var(--kb-font-structure);
  transition: transform var(--kb-dur-hover) var(--kb-ease-settle);
}

.kb-button--arrow:hover::after,
.kb-arrow-link:hover::after {
  transform: translateX(4px);
}

.kb-arrow-link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--kb-space-2xs);
  font-family: var(--kb-font-structure);
  font-size: 15px;
  font-weight: var(--kb-weight-structure);
  color: var(--kb-accent-text);
  text-decoration: none;
}

.kb-arrow-link:hover {
  color: var(--kb-link-hover);
}

/* Form primitives. Strong 1px ink borders, zero radius, no shadow. */
.kb-input,
.kb-textarea,
.kb-select {
  inline-size: 100%;
  padding: 14px 16px;
  border: var(--kb-border-width) solid var(--kb-border-strong);
  border-radius: var(--kb-radius);
  background: var(--kb-white);
  color: var(--kb-text-body);
  font-family: var(--kb-font-structure);
  font-size: 16px;
  line-height: 1.4;
  box-shadow: none;
}

.kb-input::placeholder,
.kb-textarea::placeholder {
  color: var(--kb-text-secondary);
  opacity: 1;
}

.kb-textarea {
  min-block-size: 160px;
  resize: vertical;
}

.kb-field {
  display: flex;
  flex-direction: column;
  gap: var(--kb-space-2xs);
}

/* Specification and availability lists replace tables and plot selectors. */
.kb-spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-block-start: var(--kb-border-width) solid var(--kb-border-hairline);
}

.kb-spec__item {
  padding-block: var(--kb-space-sm);
  border-block-end: var(--kb-border-width) solid var(--kb-border-hairline);
  padding-inline-end: var(--kb-space-md);
}

.kb-spec__label {
  display: block;
  font-family: var(--kb-font-structure);
  font-size: var(--kb-size-label);
  font-weight: var(--kb-weight-structure-strong);
  letter-spacing: var(--kb-track-label);
  text-transform: uppercase;
  color: var(--kb-text-secondary);
  margin-block-end: var(--kb-space-2xs);
}

.kb-spec__value {
  font-family: var(--kb-font-voice);
  font-size: var(--kb-size-lead);
  font-weight: var(--kb-weight-voice-light);
  color: var(--kb-text-body);
}

/* Availability rows. Status is a word, not a badge. */
.kb-availability {
  border-block-start: var(--kb-border-width) solid var(--kb-border-hairline);
}

.kb-availability__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kb-space-sm);
  padding-block: var(--kb-space-sm);
  border-block-end: var(--kb-border-width) solid var(--kb-border-hairline);
}

.kb-availability__status {
  font-family: var(--kb-font-structure);
  font-size: var(--kb-size-label);
  font-weight: var(--kb-weight-structure-strong);
  letter-spacing: var(--kb-track-label);
  text-transform: uppercase;
  color: var(--kb-text-secondary);
}

.kb-availability__status--available {
  color: var(--kb-accent-text);
}

/* The eyebrow rule is a 24x1 bronze hairline. Elementor's container base style
   applies a minimum height to every flex container, which turns it into a
   square, so the intended dimensions are restated here. A dot or square before
   a label is exactly the decorative tell the design system rules out. */
.kb-page .elementor [class*="-eb-rule"] {
  inline-size: 24px !important;
  block-size: 1px !important;
  min-inline-size: 24px !important;
  min-block-size: 1px !important;
  max-block-size: 1px !important;
  padding: 0 !important;
  align-self: center;
}

/* Elementor pads every container by 10px so empty ones stay selectable in the
   editor. The design system sets its own spacing on every section, so that
   default shows up as an unwanted inset, most visibly as a frame of ground
   colour around full-bleed photography. Zeroing the variable leaves the
   explicit padding on each section intact. */
.kb-page .elementor {
  --e-con-padding: 0px;
}

.kb-page .elementor [class*="-media"] {
  padding: 0;
}

/* Flex children default to min-width:auto, so a long unbroken string (an email
   address in a specification cell) pushes past its column and overlaps its
   neighbour instead of wrapping. */
.kb-page .elementor .e-con,
.kb-page .elementor .e-atomic-element {
  min-inline-size: 0;
}

.kb-page .elementor h1,
.kb-page .elementor h2,
.kb-page .elementor h3,
.kb-page .elementor p,
.kb-page .elementor span,
.kb-page .elementor a {
  overflow-wrap: break-word;
}

/* Inherited image chrome. Astra and Elementor both add a frame, radius or
   shadow to images by default. The design system has none of those: a
   photograph is a flat rectangle with architectural edges. */
.kb-page .elementor img,
.kb-page .elementor figure {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  background: none;
}

/* Atomic image widgets should fill their block, not sit inside it. */
.kb-page .elementor .e-atomic-element > img {
  display: block;
}

/* Video plate. The film covers its block; the poster image sits beneath it as a
   real element, so suppressing the video reveals a still rather than a gap. */
.kb-page [class*="-videoplate"],
.kb-page [class*="-videoplate"] video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 0;
  pointer-events: none;
}

/* No autoplaying film on phones, where it would be pulled over cellular for a
   decorative background, and none when the visitor has asked for less motion.
   The poster underneath takes over in both cases. */
@media (max-width: 782px), (prefers-reduced-motion: reduce) {
  .kb-page [class*="-videoplate"] {
    display: none !important;
  }
}

/* Media blocks. Photography is its own block and never sits behind text. */
.kb-media {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: var(--kb-radius);
}

.kb-figure {
  margin: 0;
}

.kb-figure figcaption {
  margin-block-start: var(--kb-space-xs);
  font-family: var(--kb-font-structure);
  font-size: 14px;
  color: var(--kb-text-secondary);
}

/* Declared placeholder. On-palette flat block, composed like the final image.
   Every instance is marked so it can be found and swapped. */
.kb-placeholder {
  position: relative;
  display: block;
  inline-size: 100%;
  background: var(--kb-stone);
  border: var(--kb-border-width) solid var(--kb-border-hairline);
  aspect-ratio: 16 / 10;
}

.kb-placeholder::after {
  content: attr(data-kb-placeholder);
  position: absolute;
  inset-block-end: var(--kb-space-xs);
  inset-inline-start: var(--kb-space-xs);
  font-family: var(--kb-font-structure);
  font-size: var(--kb-size-label);
  font-weight: var(--kb-weight-structure-strong);
  letter-spacing: var(--kb-track-label);
  text-transform: uppercase;
  color: var(--kb-text-secondary);
}