/* ==========================================================================
   Korastel corporate site — page composition.
   Only layout and section-specific styling lives here; every colour, size and
   duration comes from the design-system token layer.
   ========================================================================== */

:root {
  --k-header-height: 4.5rem;
}

body {
  overflow-x: hidden;
}

/* ================================================================= header */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--k-z-header);
  background-color: color-mix(in srgb, var(--k-color-background) 88%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--k-duration-base) var(--k-ease-standard),
    background-color var(--k-duration-base) var(--k-ease-standard);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header {
    backdrop-filter: saturate(150%) blur(14px);
  }
}

.site-header[data-scrolled="true"] {
  border-bottom-color: var(--k-color-border);
  background-color: color-mix(in srgb, var(--k-color-background) 94%, transparent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-space-6);
  min-height: var(--k-header-height);
}

/* The lockup is short, so the link is padded out to a 44px target rather than
   being only as tall as the artwork. */
.site-header__logo {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.site-header__logo img {
  height: 1.5rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--k-space-2);
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding-inline: var(--k-space-3);
  border-radius: var(--k-radius-sm);
  color: var(--k-color-text-secondary);
  font-size: var(--k-text-sm);
  font-weight: var(--k-weight-medium);
  text-decoration: none;
  transition: color var(--k-duration-fast) var(--k-ease-standard);
}

.site-nav__link:hover {
  color: var(--k-color-text);
}

.site-nav__link[aria-current="true"] {
  color: var(--k-color-text);
}

.site-nav__link[aria-current="true"]::after {
  content: "";
  position: absolute;
  inset-inline: var(--k-space-3);
  bottom: 0.35rem;
  height: 2px;
  border-radius: var(--k-radius-pill);
  background-image: var(--k-gradient-aurora);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--k-space-3);
}

.site-header__cta {
  min-height: 2.5rem;
  padding-inline: var(--k-space-5);
  font-size: var(--k-text-sm);
}

/* ------------------------------------------------------- mobile trigger */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--k-color-border-strong);
  border-radius: var(--k-radius-md);
  color: var(--k-color-text);
}

.nav-toggle__bars {
  display: block;
  width: 1.05rem;
  height: 2px;
  border-radius: var(--k-radius-pill);
  background-color: currentColor;
  position: relative;
  transition: background-color var(--k-duration-fast) var(--k-ease-standard);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: inherit;
  background-color: currentColor;
  transition: transform var(--k-duration-base) var(--k-ease-standard);
}

.nav-toggle__bars::before {
  top: -6px;
}

.nav-toggle__bars::after {
  top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* --------------------------------------------------------- mobile panel */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--k-color-border);
  background-color: var(--k-color-background);
}

.mobile-nav[data-open="true"] {
  display: block;
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  padding-block: var(--k-space-3) var(--k-space-6);
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.25rem;
  padding-block: var(--k-space-2);
  border-bottom: 1px solid var(--k-color-border);
  color: var(--k-color-text);
  font-size: var(--k-text-xl);
  font-weight: var(--k-weight-medium);
  letter-spacing: var(--k-tracking-snug);
  text-decoration: none;
}

.mobile-nav__index {
  font-family: var(--k-font-mono);
  font-size: var(--k-text-xs);
  color: var(--k-color-text-muted);
}

.mobile-nav__cta {
  margin-top: var(--k-space-6);
}

@media (max-width: 60rem) {
  .site-nav,
  .site-header__cta {
    display: none;
  }

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

@media (max-width: 30rem) {
  .site-header__logo img,
  .site-footer__logo img {
    height: 1.25rem;
  }
}

/* =================================================================== hero */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 7rem) clamp(4rem, 8vw, 8rem);
  overflow: hidden;
}

/* Fine diagonal rules at the angle of the Core K's arms. Almost subliminal —
   it reads as texture, not pattern. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    transparent 0 46px,
    var(--k-color-graphite-100) 46px 47px
  );
  opacity: 0.5;
  mask-image: radial-gradient(120% 90% at 78% 22%, #000 0%, transparent 68%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.hero__eyebrow {
  margin-bottom: var(--k-space-6);
}

.hero__eyebrow-rule {
  width: 2.5rem;
  height: 2px;
  border-radius: var(--k-radius-pill);
  background-image: var(--k-gradient-aurora);
}

.hero__title {
  margin-bottom: var(--k-space-6);
}

.hero__lead {
  margin-bottom: var(--k-space-8);
  max-width: 34ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-3);
  margin-bottom: var(--k-space-10);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-8);
  padding-top: var(--k-space-6);
  border-top: 1px solid var(--k-color-border);
}

.hero__fact dt {
  font-size: var(--k-text-2xs);
  font-weight: var(--k-weight-semibold);
  letter-spacing: var(--k-tracking-wider);
  text-transform: uppercase;
  color: var(--k-color-text-muted);
  margin-bottom: var(--k-space-1);
}

.hero__fact dd {
  margin: 0;
  font-size: var(--k-text-md);
  font-weight: var(--k-weight-medium);
  color: var(--k-color-text);
}

/* --------------------------------------------------------- brand plate */
.brand-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--k-space-6);
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--k-color-border);
  border-radius: var(--k-radius-xl);
  background-color: var(--k-color-surface);
  box-shadow: var(--k-shadow-lg);
}

.brand-plate__lockup {
  width: min(230px, 100%);
}

.brand-plate__rule {
  width: 100%;
  max-width: 230px;
}

.brand-plate__caption {
  margin: 0;
  text-align: center;
  font-size: var(--k-text-md);
  line-height: var(--k-leading-normal);
  color: var(--k-color-text-secondary);
  text-wrap: balance;
}

/* Tablet. Once the hero stops being two columns the plate has to earn its own
   row: as a narrow left-aligned square it stranded a band of empty space beside
   it and pushed itself below the fold. It becomes a short full-width band
   instead — same content, a third of the height. */
@media (max-width: 62rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__visual {
    margin-top: var(--k-space-8);
  }

  .hero__lead {
    max-width: 46ch;
  }

  .brand-plate {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.5rem, 3vw, 2.25rem) clamp(2rem, 4vw, 3rem);
  }

  .brand-plate__lockup {
    width: min(170px, 34%);
  }

  .brand-plate__rule {
    width: 2px;
    max-width: none;
    height: auto;
    align-self: stretch;
    min-height: 3.5rem;
  }

  .brand-plate__caption {
    text-align: start;
    text-wrap: pretty;
  }
}

/* Phone. Back to the stacked plate — a row this narrow squeezes both halves. */
@media (max-width: 40rem) {
  .hero__actions .k-button {
    width: 100%;
  }

  .hero__facts {
    gap: var(--k-space-6);
  }

  .brand-plate {
    flex-direction: column;
    padding: clamp(2rem, 6vw, 2.5rem);
  }

  .brand-plate__lockup {
    width: min(200px, 62%);
  }

  .brand-plate__rule {
    width: 100%;
    max-width: 200px;
    height: 2px;
    min-height: 0;
    align-self: auto;
  }

  .brand-plate__caption {
    text-align: center;
  }
}

/* ======================================================= section headers */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-4);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head__meta {
  display: flex;
  align-items: center;
  gap: var(--k-space-4);
}

.section-head__meta::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--k-color-border);
}

.k-theme-inverse .section-head__meta::after {
  background-color: var(--k-color-border);
}

/* ============================================================ principles */
.principles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--k-color-border);
}

.principle {
  display: grid;
  grid-template-columns: 4rem minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--k-space-6);
  align-items: start;
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
  border-bottom: 1px solid var(--k-color-border);
}

.principle__title {
  margin: 0;
}

.principle__body {
  margin: 0;
}

@media (max-width: 56rem) {
  .principle {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: var(--k-space-3) var(--k-space-5);
  }

  .principle__body {
    grid-column: 2;
  }
}

/* ============================================================== DriverHQ */
.driverhq {
  position: relative;
  overflow: hidden;
}

.driverhq::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background-image: var(--k-gradient-aurora);
}

.driverhq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.driverhq__title {
  display: flex;
  align-items: center;
  gap: var(--k-space-4);
  margin-bottom: var(--k-space-5);
}

.driverhq__icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--k-radius-md);
  box-shadow: var(--k-shadow-sm);
}

.driverhq__audience {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-2);
  margin-block: var(--k-space-6);
  padding: 0;
}

.driverhq__audience li {
  padding: 0.3rem var(--k-space-4);
  border: 1px solid var(--k-color-border);
  border-radius: var(--k-radius-pill);
  font-size: var(--k-text-sm);
  color: var(--k-color-text-secondary);
}

.driverhq__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-3);
  margin-top: var(--k-space-8);
}

.driverhq__note {
  margin-top: var(--k-space-6);
  font-size: var(--k-text-sm);
  color: var(--k-color-text-muted);
  max-width: 46ch;
}

.schematic {
  width: 100%;
  height: auto;
  border: 1px solid var(--k-color-border);
  border-radius: var(--k-radius-lg);
  background-color: rgb(255 255 255 / 0.02);
}

@media (max-width: 62rem) {
  .driverhq__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .driverhq__actions .k-button {
    flex: 1 1 14rem;
  }
}

/* =========================================================== capabilities */
/* Six-column bed so five cards land as 3 + 2 instead of leaving an orphan. */
.capabilities {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--k-space-5);
}

.capability {
  grid-column: span 2;
  gap: var(--k-space-4);
  min-height: 100%;
}

.capability:nth-child(4),
.capability:nth-child(5) {
  grid-column: span 3;
}

.capability__title {
  margin: 0;
}

.capability__body {
  margin: 0;
}

.capability__status {
  margin-top: auto;
  padding-top: var(--k-space-2);
}

@media (max-width: 64rem) {
  .capabilities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capability,
  .capability:nth-child(4),
  .capability:nth-child(5) {
    grid-column: span 1;
  }

  .capability:nth-child(5) {
    grid-column: span 2;
  }
}

@media (max-width: 40rem) {
  .capabilities {
    grid-template-columns: minmax(0, 1fr);
  }

  .capability:nth-child(5) {
    grid-column: span 1;
  }
}

.capabilities__footnote {
  margin-top: var(--k-space-8);
  padding-top: var(--k-space-6);
  border-top: 1px solid var(--k-color-border);
  max-width: 68ch;
}

/* ================================================================= about */
.about {
  background-color: var(--k-color-background-sunken);
}

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.about__statements {
  display: grid;
  gap: var(--k-space-5);
  margin-top: var(--k-space-8);
}

.about__statement {
  padding-left: var(--k-space-5);
  border-left: 2px solid var(--k-color-border-strong);
}

.about__statement dt {
  font-size: var(--k-text-2xs);
  font-weight: var(--k-weight-semibold);
  letter-spacing: var(--k-tracking-wider);
  text-transform: uppercase;
  color: var(--k-color-text-muted);
  margin-bottom: var(--k-space-2);
}

.about__statement dd {
  margin: 0;
  font-size: var(--k-text-lg);
  line-height: var(--k-leading-normal);
  color: var(--k-color-text);
  text-wrap: pretty;
}

@media (max-width: 56rem) {
  .about__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =============================================================== contact */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}

.contact__aside p + p {
  margin-top: var(--k-space-4);
}

.contact-form {
  display: grid;
  gap: var(--k-space-5);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--k-color-border);
  border-radius: var(--k-radius-lg);
  background-color: var(--k-color-surface);
  box-shadow: var(--k-shadow-sm);
}

.contact-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--k-space-5);
}

.contact-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-space-4);
}

.contact-form__legal {
  margin: 0;
  max-width: 34ch;
}

@media (max-width: 56rem) {
  .contact__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  .contact-form__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-form__footer .k-button {
    width: 100%;
  }
}

/* =============================================================== updates */
.updates {
  padding-block: clamp(3rem, 6vw, 5rem);
  background-color: var(--k-color-graphite-900);
}

.updates__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.updates .section-head {
  margin-bottom: var(--k-space-5);
}

.updates-form {
  display: grid;
  gap: var(--k-space-4);
}

.updates-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--k-space-4);
}

@media (max-width: 62rem) {
  .updates__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  .updates-form__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ================================================================ footer */
.site-footer {
  padding-block: clamp(3rem, 6vw, 4.5rem) var(--k-space-8);
  background-color: var(--k-color-background-sunken);
  border-top: 1px solid var(--k-color-border);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: var(--k-space-10);
}

.site-footer__logo img {
  height: 1.5rem;
}

.site-footer__blurb {
  margin-top: var(--k-space-5);
  max-width: 34ch;
}

.footer-nav__title {
  margin-bottom: var(--k-space-4);
  font-size: var(--k-text-2xs);
  font-weight: var(--k-weight-semibold);
  letter-spacing: var(--k-tracking-wider);
  text-transform: uppercase;
  color: var(--k-color-text-muted);
}

.footer-nav__list {
  display: grid;
  gap: var(--k-space-3);
}

.footer-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-2);
  min-height: 1.75rem;
  color: var(--k-color-text-secondary);
  font-size: var(--k-text-md);
  text-decoration: none;
  transition: color var(--k-duration-fast) var(--k-ease-standard);
}

.footer-nav__link:hover {
  color: var(--k-color-text);
}

.footer-nav__tag {
  font-size: var(--k-text-2xs);
  letter-spacing: var(--k-tracking-wide);
  text-transform: uppercase;
  color: var(--k-color-text-muted);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-space-4);
  padding-top: var(--k-space-6);
  border-top: 1px solid var(--k-color-border);
}

.site-footer__copyright {
  margin: 0;
  font-size: var(--k-text-sm);
  color: var(--k-color-text-muted);
}

/* Placeholders, not links — Korastel has no published policies yet. */
.site-footer__legal {
  gap: var(--k-space-5);
  font-size: var(--k-text-sm);
  color: var(--k-color-text-secondary);
}

@media (max-width: 56rem) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}