/* ==========================================================================
   KHWARAZM - components
   One visual system for the public site and the administration panel. Values
   mirror the approved prototype; the panel differs only in density.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 12px 20px;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  background: none;
  color: var(--ink);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }

.btn--primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }

.btn--outline { border-color: var(--border-2); color: var(--ink); background: none; }
.btn--outline:hover { border-color: var(--navy); background: var(--surface-2); color: var(--ink); }

.btn--surface { background: var(--surface); border-color: var(--border); color: var(--ink); }
.btn--surface:hover { border-color: var(--border-2); }

.btn--danger { background: var(--error); border-color: var(--error); color: #fff; }
.btn--danger:hover { filter: brightness(.92); color: #fff; }

.btn--quiet { color: var(--ink-2); }
.btn--quiet:hover { background: var(--surface-2); color: var(--ink); }

/* On a navy band the outline button reads against the dark surface. */
.btn--on-navy { background: transparent; border-color: var(--on-navy-border-2); color: #fff; }
.btn--on-navy:hover { border-color: #fff; background: var(--on-navy-fill-2); color: #fff; }

.btn--lg { padding: 14px 24px; min-height: 48px; font-size: 15px; }
.btn--sm { padding: 8px 14px; min-height: 38px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* Inline "view details" action: the arrow is a separate element so it can
   mirror with the text direction instead of being baked into a string. */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 10px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
}
.btn-link:hover { color: var(--blue-hover); }
.btn-link .icon { width: 16px; height: 16px; }
[dir="rtl"] .btn-link .icon { transform: scaleX(-1); }

.icon-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  color: var(--ink-2);
  flex: none;
}
.icon-btn:hover { border-color: var(--border-2); color: var(--ink); }
.icon-btn--sm { width: 34px; height: 34px; }
.icon-btn--danger:hover { color: var(--error); border-color: var(--error); }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 36px);
  height: var(--header-h);
}

.brand {
  display: flex;
  color: inherit;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}
.brand__name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ink);
}
.brand__tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .20em;
  color: var(--muted);
  text-transform: uppercase;
}

.main-nav {
  display: none;
  align-self: stretch;
  align-items: stretch;
  gap: clamp(14px, 2vw, 30px);
  margin-inline-start: 10px;
}
/* The links stretch to the full header height so the active underline sits on
   the header's own bottom edge. The prototype achieved that with 26px of
   vertical padding on a button; an anchor is stretched instead, which keeps
   the same look without depending on the exact line height of the typeface. */
.main-nav__link {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .01em;
}
.main-nav__link:hover { color: var(--ink); }
.main-nav__link.is-active {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--blue);
}

.header-actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The language switcher keeps EN, فارسی, العربية in this order in both
   directions - the list is a fixed sequence, not a mirrored layout. */
.lang-switch {
  display: flex;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
}
.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .04em;
}
.lang-switch__btn:hover { color: var(--ink); }
.lang-switch__btn.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}


@media (min-width: 960px) {
  .main-nav { display: flex; }
  .nav-toggle { display: none; }
  .header-cta { display: inline-flex; }
}

/* Below the navigation breakpoint the bar carries the name and one control,
   and nothing else. The language switch, the theme button and the call to
   action were what pushed it past the edge of a phone; they now live at the
   foot of the drawer, where there is room for them. */
@media (max-width: 959px) {
  .header-cta { display: none; }
  .site-header .lang-switch,
  .site-header [data-theme-toggle] { display: none; }
  .site-header__inner { gap: 12px; }
}
@media (max-width: 420px) {
  .brand__tag { display: none; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--navy);
  color: var(--on-navy);
  padding-block: clamp(40px, 5vw, 64px) 0;
}
.site-footer a { color: var(--navy-mute); }
.site-footer a:hover { color: #fff; }
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.site-footer__title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy-mute);
  margin-bottom: 14px;
  display: block;
}
.site-footer__bar {
  margin-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid rgba(255, 255, 255, .10);
  padding-block: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--navy-mute);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--navy);
  color: var(--on-navy);
  overflow: hidden;
}
/* The photograph sits under a heavy navy wash. The wash is not decoration:
   the headline is white, and without it the contrast against a bright sky or a
   pale floor drops below anything readable. A portrait crop is used on narrow
   screens, where a landscape one would show almost nothing of the subject. */
.hero__photo {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(160deg, rgba(10, 34, 64, .88) 0%, rgba(10, 34, 64, .93) 45%, rgba(18, 49, 89, .90) 100%),
    url("../img/hero-landscape.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  pointer-events: none;
}
@media (max-width: 720px) {
  .hero__photo {
    background-image:
      linear-gradient(170deg, rgba(10, 34, 64, .89) 0%, rgba(10, 34, 64, .94) 55%, rgba(18, 49, 89, .92) 100%),
      url("../img/hero-portrait.jpg");
  }
}
[data-theme="dark"] .hero__photo {
  background-image:
    linear-gradient(160deg, rgba(8, 18, 29, .90) 0%, rgba(8, 18, 29, .95) 45%, rgba(16, 33, 49, .92) 100%),
    url("../img/hero-landscape.jpg");
}
@media (max-width: 720px) {
  [data-theme="dark"] .hero__photo {
    background-image:
      linear-gradient(170deg, rgba(8, 18, 29, .91) 0%, rgba(8, 18, 29, .96) 55%, rgba(16, 33, 49, .93) 100%),
      url("../img/hero-portrait.jpg");
  }
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .9;
  pointer-events: none;
}
.hero__ring {
  position: absolute;
  inset-inline-end: -120px;
  top: -120px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 50%;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 104px) clamp(56px, 7vw, 96px);
}
.hero__title { font-size: var(--fs-display); line-height: 1.08; letter-spacing: -.02em; color: #fff; margin-top: 20px; }
.hero__sub { margin-top: 22px; max-width: 56ch; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.65; color: var(--navy-mute); }
.hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }

.pill-marker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-sm);
  padding: 6px 11px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy-mute);
}
.pill-marker__dot {
  width: 6px;
  height: 6px;
  background: var(--teal);
  border-radius: 50%;
  animation: khwPulse 2.4s ease-in-out infinite;
}

/* Capability strip under the hero. */
.strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: center;
  padding-block: 18px;
}
.strip__label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.strip__item {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .10em;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.card--pad { padding: 22px; }
.card--hover { transition: border-color .15s ease, box-shadow .15s ease; }
.card--hover:hover { border-color: var(--border-2); box-shadow: var(--shadow); }
.card__body { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card__title { margin: 0; font-size: 18px; font-weight: 650; line-height: 1.35; }
.card__text { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.card__head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card__foot { padding: 14px 18px; border-top: 1px solid var(--border); }

.service-card__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--navy);
  margin-bottom: 4px;
}
.service-card__icon .icon { width: 24px; height: 24px; }

/* Image slots. Ratios are fixed by the design: 16:10 cards, 21:9 project
   header, 4:3 gallery and company photography. */
.slot {
  position: relative;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, var(--surface-3) 0 10px, var(--surface-2) 10px 20px);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.slot--16x10 { aspect-ratio: 16 / 10; }
.slot--21x9 { aspect-ratio: 21 / 9; }
.slot--4x3 { aspect-ratio: 4 / 3; }
.slot--framed { border: 1px solid var(--border); border-radius: var(--radius-md); }
.slot__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 12px;
  text-align: center;
}
.slot__tag {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--navy);
  color: #fff;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
}
.slot__img { width: 100%; height: 100%; object-fit: cover; }

/* Technology tag. */
.tag {
  font-family: var(--mono);
  font-size: 10.5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  color: var(--ink-2);
  background: var(--surface-2);
}
.tag--on-navy { border-color: rgba(255, 255, 255, .16); color: #fff; background: none; font-size: 11px; padding: 4px 9px; }

/* --------------------------------------------------------------------------
   Status, badges, notices
   -------------------------------------------------------------------------- */

/* Status always carries a text label; colour is never the only signal. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: none; }
.status--progress .status__dot { background: var(--warning); }
.status--pilot .status__dot { background: var(--info); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  color: var(--ink-2);
  white-space: nowrap;
}
.badge--ok { color: var(--success); border-color: var(--success); }
.badge--warn { color: var(--warning); border-color: var(--warning); }
.badge--err { color: var(--error); border-color: var(--error); }
.badge--info { color: var(--info); border-color: var(--info); }
.badge--solid-ok { background: var(--success-bg); }
.badge--solid-warn { background: var(--warning-bg); }
.badge--solid-err { background: var(--error-bg); }
.badge--solid-info { background: var(--info-bg); }

/* A featured record is marked by the brand diamond, not by a colour swap. */
.diamond {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--blue);
  transform: rotate(45deg);
}

.notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-inline-start-width: 3px;
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 14px 16px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.notice__title { font-weight: 650; color: var(--ink); display: block; margin-bottom: 2px; }
.notice .icon { margin-top: 2px; }
.notice--ok { border-color: var(--success); background: var(--success-bg); }
.notice--warn { border-color: var(--warning); background: var(--warning-bg); }
.notice--err { border-color: var(--error); background: var(--error-bg); }
.notice--info { border-color: var(--info); background: var(--info-bg); }

/* Sample-content marker. Demonstration records are always labelled. */
.demo-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--warning);
  border: 1px dashed var(--warning);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}

/* --------------------------------------------------------------------------
   Chips, segmented controls, tabs
   -------------------------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  flex: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: var(--fs-xs);
  color: var(--ink-2);
  min-height: 38px;
  display: inline-flex;
  align-items: center;
}
.chip:hover { border-color: var(--border-2); color: var(--ink); }
.chip.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }

.seg {
  display: inline-flex;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
}
.seg__btn {
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.seg__btn.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.tab {
  background: none;
  border: 0;
  padding: 13px 18px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  min-height: 46px;
}
.tab:hover { color: var(--ink); }
.tab.is-active {
  color: var(--ink);
  background: var(--surface);
  box-shadow: inset 0 -2px 0 var(--blue);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--muted);
  padding-block: 16px;
}
.breadcrumb .icon { width: 14px; height: 14px; }
[dir="rtl"] .breadcrumb .icon { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }

/* Labels are always visible. A placeholder is never the only label. */
.field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.field__optional { font-weight: 400; color: var(--muted); font-size: 12px; }

.input,
.select,
.textarea {
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.input, .select { height: 46px; padding-inline: 12px; }
.textarea { padding: 12px 14px; resize: vertical; line-height: 1.6; min-height: 140px; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--ring);
  background: var(--surface);
}
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--error);
}
.input--sm, .select--sm { height: 40px; font-size: 13.5px; padding-inline: 10px; border-color: var(--border); }

.field__hint { font-size: 12px; color: var(--muted); }
.field__error {
  font-size: 12.5px;
  color: var(--error);
  display: flex;
  align-items: center;
  gap: 6px;
}
.field__error .icon { width: 14px; height: 14px; }

.checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
}
.checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--blue);
  flex: none;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding-inline: 12px;
  height: 46px;
  min-width: 0;
}
.search-box .icon { color: var(--muted); width: 17px; height: 17px; }
.search-box__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-size: var(--fs-sm);
  height: 100%;
  color: var(--ink);
}
.search-box--sm { height: 38px; }
.search-box--sm .search-box__input { font-size: 13.5px; }

/* Filter bars align on the control row; hints go underneath so a single hint
   cannot push one control out of line with its neighbours. */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.filters__note { margin-top: 8px; font-size: 12px; color: var(--muted); }

/* The CAPTCHA image and its input never mirror. */
.captcha { display: flex; gap: 10px; align-items: center; direction: ltr; }
.captcha__img {
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--surface-2);
  height: 46px;
  width: 150px;
  flex: none;
}
.captcha__input { text-transform: uppercase; letter-spacing: .3em; font-family: var(--mono); }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  min-width: 0;
}
.table { width: 100%; border-collapse: collapse; }
.table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 11px 14px;
  text-align: start;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.table tbody tr { border-bottom: 1px solid var(--border); }
.table tbody tr:last-child { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table td { padding: 12px 14px; font-size: var(--fs-sm); color: var(--ink-2); vertical-align: middle; }
.table td.is-primary { color: var(--ink); font-weight: 600; }

/* Identifiers, dates, sizes and counts stay left-to-right in every language. */
.table td.is-numeric,
.cell-mono {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  direction: ltr;
  text-align: start;
}
.table__actions { display: flex; gap: 6px; justify-content: flex-end; }
.table__thumb {
  width: 46px;
  height: 34px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(135deg, var(--surface-3) 0 8px, var(--surface-2) 8px 16px);
  object-fit: cover;
}

.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: var(--info-bg);
  border: 1px solid var(--info);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.pager {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.pager__item {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  color: var(--ink-2);
  font-size: 14px;
  padding-inline: 10px;
}
.pager__item:hover { border-color: var(--border-2); color: var(--ink); }
.pager__item.is-active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.pager__item[aria-disabled="true"] { opacity: .45; pointer-events: none; }
/* Page numbers read left-to-right inside their row in every language. */
.pager__numbers { display: flex; gap: 6px; direction: ltr; }

/* --------------------------------------------------------------------------
   Page states
   -------------------------------------------------------------------------- */

.state {
  margin-top: 42px;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: clamp(40px, 6vw, 72px) 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.state__icon {
  width: 46px;
  height: 46px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--muted);
}
.state__title { margin: 8px 0 0; font-size: 20px; font-weight: 650; }
.state__body { margin: 0; color: var(--muted); max-width: 46ch; }
.state--error {
  border-style: solid;
  border-color: var(--error);
  background: var(--error-bg);
  padding-block: clamp(32px, 5vw, 56px);
}
.state--error .state__icon { border: 0; color: var(--error); }
.state--error .state__title { color: var(--error); }
.state--error .state__body { color: var(--ink-2); }

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-2);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: khwSpin .8s linear infinite;
  display: block;
  flex: none;
}
.loading-row {
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
}
.skeleton { background: var(--surface-3); border-radius: var(--radius-xs); animation: khwPulse 1.6s ease-in-out infinite; }
.skeleton--media { aspect-ratio: 16 / 10; border-radius: 0; }
.skeleton--line { height: 10px; }
.skeleton--title { height: 16px; }

/* --------------------------------------------------------------------------
   Modal and toast
   -------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(10, 18, 29, .55);
  display: grid;
  place-items: center;
  padding: 20px;
  animation: khwFade .14s ease both;
}
.modal[hidden] { display: none; }
.modal__dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  width: min(520px, 100%);
  padding: 24px;
  animation: khwRise .18s ease both;
}
.modal__title { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.modal__body { color: var(--ink-2); font-size: var(--fs-sm); }
.modal__actions { margin-top: 22px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

.toast-stack {
  position: fixed;
  inset-block-end: 20px;
  inset-inline-end: 20px;
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(420px, calc(100vw - 40px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--blue);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 13px 16px;
  font-size: var(--fs-sm);
  animation: khwRise .2s ease both;
}
.toast--ok { border-inline-start-color: var(--success); }
.toast--warn { border-inline-start-color: var(--warning); }
.toast--err { border-inline-start-color: var(--error); }

/* --------------------------------------------------------------------------
   Figures and key/value rows
   -------------------------------------------------------------------------- */

.figure-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
}
.figure__value {
  font-family: var(--mono);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.02em;
  direction: ltr;
  display: block;
}
.figure__label { font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; display: block; }

.kv { display: grid; gap: 0; }
.kv__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.kv__row:last-child { border-bottom: 0; }
.kv__key { color: var(--muted); }
.kv__value { color: var(--ink); font-weight: 600; }

/* Numbered steps are used only where the content is a real sequence. */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.step { border-top: 2px solid var(--navy); padding-top: 14px; }
.step__no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--blue);
  display: block;
  margin-bottom: 8px;
}
.step__title { font-size: 15px; font-weight: 650; margin-bottom: 6px; }
.step__body { font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Administration shell
   -------------------------------------------------------------------------- */

.admin { min-height: 100vh; display: flex; align-items: stretch; background: var(--bg); }
.admin__sidebar {
  width: var(--admin-side-w);
  flex: none;
  background: var(--navy);
  color: var(--on-navy);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.admin__brand {
  flex: none;
  padding: 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin__brand-name { font-size: 13.5px; font-weight: 700; letter-spacing: .14em; color: #fff; display: block; }
.admin__brand-tag { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; color: var(--navy-mute); display: block; }
.admin__nav { flex: 1; overflow: auto; padding: 14px 10px; display: flex; flex-direction: column; gap: 18px; }
.admin__group-title {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--navy-mute);
  padding: 4px 10px 8px;
  display: block;
}
.side-link {
  display: flex;
  align-items: center;
  gap: 11px;
  background: none;
  border: 0;
  border-radius: var(--radius);
  padding: 10px;
  font-size: 14px;
  color: var(--navy-mute);
  text-align: start;
  width: 100%;
  min-height: 42px;
}
.side-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.side-link.is-active { background: var(--navy-2); color: #fff; }
.side-link .icon { width: 18px; height: 18px; }

.admin__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin__topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  padding-inline: clamp(14px, 2vw, 24px);
  height: var(--admin-header-h);
}
.admin__main { flex: 1; padding: clamp(18px, 2.5vw, 32px); min-width: 0; }
.admin-user { display: flex; align-items: center; gap: 9px; padding-inline-start: 10px; border-inline-start: 1px solid var(--border); }
.admin-user__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  flex: none;
}
.admin-user__name { font-size: 13px; font-weight: 600; display: block; }
.admin-user__role { font-size: 11px; color: var(--muted); display: block; }

.page-head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 22px;
}
.page-head__title { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.page-head__sub { margin-top: 6px; font-size: var(--fs-sm); color: var(--muted); }

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  min-width: 0;
}
.stat-card__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}
.stat-card__value {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-top: 10px;
  display: block;
  direction: ltr;
  text-align: start;
}

/* --------------------------------------------------------------------------
   Admin sign-in screen
   -------------------------------------------------------------------------- */

.login {
  min-height: 100vh;
  background: var(--navy);
  display: grid;
  place-items: center;
  padding: 32px 16px;
  position: relative;
  overflow: hidden;
}
.login__card {
  position: relative;
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(24px, 4vw, 34px);
}
.login__note {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--muted);
  line-height: 1.7;
  text-align: center;
}

/* --------------------------------------------------------------------------
   System pages (diagnostics, style guide, errors)
   -------------------------------------------------------------------------- */

.sys-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.sys-header__inner { display: flex; align-items: center; gap: 16px; height: var(--admin-header-h); }
.sys-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}
.sys-section { margin-top: 56px; }
.sys-section__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  border-top: 2px solid var(--navy);
  padding-top: 16px;
}
.check-list { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.check {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.check:last-child { border-bottom: 0; }
.check__name { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; }
.check__detail { color: var(--muted); font-family: var(--mono); font-size: 12px; direction: ltr; }

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.swatch { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.swatch__chip { height: 56px; display: block; }
.swatch__name { padding: 8px 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--muted); display: block; direction: ltr; }

.error-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  text-align: center;
}
.error-page__code {
  font-family: var(--mono);
  font-size: clamp(56px, 12vw, 96px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -.04em;
}
[data-theme="dark"] .error-page__code { color: var(--blue); }

/* Swatch fills for the style guide. Inline style attributes are blocked by the
   Content-Security-Policy, so each token gets a named class. */
.swatch-navy { background: var(--navy); }
.swatch-navy-2 { background: var(--navy-2); }
.swatch-blue { background: var(--blue); }
.swatch-blue-hover { background: var(--blue-hover); }
.swatch-teal { background: var(--teal); }
.swatch-bg { background: var(--bg); }
.swatch-bg-alt { background: var(--bg-alt); }
.swatch-surface { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.swatch-surface-2 { background: var(--surface-2); }
.swatch-surface-3 { background: var(--surface-3); }
.swatch-ink { background: var(--ink); }
.swatch-ink-2 { background: var(--ink-2); }
.swatch-muted { background: var(--muted); }
.swatch-border { background: var(--border); }
.swatch-border-2 { background: var(--border-2); }
.swatch-success { background: var(--success); }
.swatch-warning { background: var(--warning); }
.swatch-error { background: var(--error); }
.swatch-info { background: var(--info); }

/* The style guide renders one navy panel to check contrast of on-navy parts. */
.band--navy.card--pad { border-radius: var(--radius-md); }

/* ==========================================================================
   Phase 2 - public layer
   ========================================================================== */

/* The design separates cells with a hairline rather than a gap: the grid is
   filled with the border colour and each cell paints its own surface over it.
   One rule, no per-cell borders, and no doubled line where two cells meet. */
.rule-grid {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.rule-grid--140 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.rule-grid--150 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rule-grid--280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rule-grid--300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rule-grid__cell { background: var(--surface); min-width: 0; }

/* Section heading block: eyebrow, title, and an optional link on the far end. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
}
.section-head__title {
  margin-top: 14px;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.18;
  letter-spacing: -.015em;
  font-weight: 700;
}
.section-head__lead { margin-top: 18px; color: var(--ink-2); max-width: 60ch; }
.eyebrow--blue { color: var(--blue); }

.link-more {
  background: none;
  border: 0;
  padding: 8px 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.link-more:hover { color: var(--blue-hover); }
.link-more .icon { width: 15px; height: 15px; }
[dir="rtl"] .link-more .icon { transform: scaleX(-1); }

/* Service tile: flat, ruled, full-cell click target. */
.tile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: start;
  background: var(--surface);
  border: 0;
  padding: 30px 26px 28px;
  min-height: 220px;
  color: inherit;
  width: 100%;
}
.tile:hover { background: var(--surface-2); }
.tile__icon {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--navy);
  flex: none;
}
[data-theme="dark"] .tile__icon { color: var(--blue); }
.tile__title { font-size: 18px; font-weight: 650; color: var(--ink); line-height: 1.3; }
.tile__text { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.tile__more {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tile__more .icon { width: 13px; height: 13px; }
[dir="rtl"] .tile__more .icon { transform: scaleX(-1); }

/* Compact variant used on the about page expertise list. */
.tile--row {
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  min-height: 0;
  padding: 24px 22px;
}
.tile--row .icon { margin-top: 2px; color: var(--navy); }
[data-theme="dark"] .tile--row .icon { color: var(--blue); }

/* Figures. The placeholder marker is required by the brief: a sample number
   must never be mistaken for a real one. */
.stat-block { padding: 24px 20px; }
.stat-block__value {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--navy);
  display: block;
  direction: ltr;
  text-align: start;
}
[data-theme="dark"] .stat-block__value { color: var(--blue); }
.stat-block__label { margin-top: 6px; font-size: 13px; color: var(--ink-2); font-weight: 500; display: block; }
.stat-block__note {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}

.industry {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px 14px;
  font-size: 14px;
  font-weight: 550;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 10px;
}
.industry__mark {
  width: 5px;
  height: 5px;
  background: var(--blue);
  transform: rotate(45deg);
  flex: none;
}

/* Inner-page header band (about, services, projects, contact). */
.page-band {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(32px, 4vw, 56px) clamp(36px, 5vw, 64px);
}
.page-band__title {
  margin-top: 22px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 700;
  max-width: 20ch;
}
.page-band__lead {
  margin-top: 18px;
  font-size: clamp(16px, 1.2vw, 18px);
  color: var(--ink-2);
  max-width: 62ch;
}
.crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--blue); }

.value-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 22px;
}
.value-card__mark { display: block; width: 10px; height: 10px; background: var(--blue); transform: rotate(45deg); }
.value-card__title { margin-top: 20px; font-size: 17px; font-weight: 650; }
.value-card__text { margin-top: 10px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }

.pane { padding: clamp(28px, 3vw, 40px); }
.pane__text { margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--ink); }

/* Closing call to action on a navy band. */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  padding-block: clamp(48px, 6vw, 80px);
}
.cta-band__title {
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.2;
  letter-spacing: -.015em;
  font-weight: 700;
  max-width: 24ch;
  color: #fff;
}
.cta-band__body { margin-top: 14px; color: var(--navy-mute); max-width: 52ch; }

/* --------------------------------------------------------------------------
   Hero topology figure
   A schematic of the layered architecture the company works on. It is a
   diagram, not decoration, so it never mirrors: dir="ltr" is fixed on it.
   -------------------------------------------------------------------------- */
.topology {
  min-width: 0;
  direction: ltr;
  background: var(--on-navy-fill);
  border: 1px solid var(--on-navy-border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.topology__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy-mute);
}
.topology__live { color: var(--teal); }
.topology__body { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.topology__layer {
  border: 1px solid var(--on-navy-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: rgba(255, 255, 255, .03);
}
.topology__layer--active {
  border-color: rgba(46, 189, 181, .35);
  background: rgba(14, 143, 137, .10);
}
.topology__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--navy-mute);
}
.topology__layer--active .topology__label { color: var(--teal); }
.topology__tags { margin-top: 9px; display: flex; gap: 8px; flex-wrap: wrap; }
.topology__links { display: flex; justify-content: center; gap: 44px; }
.topology__link { width: 1px; height: 18px; background: rgba(255, 255, 255, .22); display: block; }
.topology__bars { margin-top: 10px; height: 34px; display: flex; align-items: flex-end; gap: 3px; }
.topology__bar { flex: 1; background: rgba(46, 189, 181, .55); display: block; }
.topology__bar--peak { background: var(--teal); }
.topology__bar-1 { height: 40%; } .topology__bar-2 { height: 70%; }
.topology__bar-3 { height: 55%; } .topology__bar-4 { height: 90%; }
.topology__bar-5 { height: 45%; } .topology__bar-6 { height: 65%; }
.topology__bar-7 { height: 35%; } .topology__bar-8 { height: 80%; }
.topology__bar-9 { height: 50%; } .topology__bar-10 { height: 72%; }
.topology__bar-11 { height: 38%; } .topology__bar-12 { height: 60%; }
.topology__grid { margin-top: 10px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.topology__cell {
  height: 26px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-xs);
  display: grid;
  place-items: center;
}
.topology__dot { width: 6px; height: 6px; background: var(--teal); border-radius: 50%; display: block; }
.topology__dot--idle { background: rgba(255, 255, 255, .25); }

/* A navigation entry whose page has not been built yet. It is shown, because
   the menu should describe the finished site, but it is plainly inert. */
.main-nav__link.is-pending {
  color: var(--muted);
  opacity: .55;
  cursor: default;
}

/* ==========================================================================
   Phase 4 - listing and detail pages
   ========================================================================== */

/* Result counter above a filtered list. */
.results-line {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--muted);
}

/* Project meta strip: client, year, duration, role. */
.meta-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--border);
  border-block: 1px solid var(--border);
}
.meta-strip__cell { background: var(--surface); padding: 18px 20px; }
.meta-strip__key {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}
.meta-strip__value { margin-top: 7px; font-size: 15px; font-weight: 600; color: var(--ink); display: block; }

/* Architecture stack on a project page. Read top-down as layers, so it keeps
   left-to-right order in every language - it is a diagram, not prose. */
.arch { display: flex; flex-direction: column; gap: 8px; direction: ltr; }
.arch__layer {
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--navy);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px 16px;
}
.arch__layer:nth-child(2) { border-inline-start-color: var(--blue); }
.arch__layer:nth-child(3) { border-inline-start-color: var(--teal); }
.arch__layer:nth-child(4) { border-inline-start-color: var(--border-2); }
.arch__title {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
}
.arch__body { margin-top: 6px; font-size: 13.5px; color: var(--muted); display: block; }

/* Image gallery. */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.gallery__item { min-width: 0; }
.gallery__caption { margin-top: 8px; font-size: 12.5px; color: var(--muted); }

/* Numbered capability and benefit lists on a service page. */
.check-lines { display: grid; gap: 12px; }
.check-line {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
}
.check-line .icon { color: var(--teal); margin-top: 3px; }

/* Contact information cards. */
.info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.info-card__icon {
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--navy);
}
[data-theme="dark"] .info-card__icon { color: var(--blue); }
.info-card__key {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}
.info-card__value { margin-top: 6px; font-size: 15px; color: var(--ink); display: block; }

/* The honeypot is never shown and never announced to assistive technology. */
.trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Fallback translation marker, shown on a record not yet written in this
   language so the reader knows why the text is in another one. */
.lang-fallback {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}

/* A panel section that has not been built yet: listed so the menu describes
   the finished product, but plainly inert. */
.side-link.is-pending {
  opacity: .45;
  cursor: default;
}
.side-link.is-pending:hover { background: none; color: var(--navy-mute); }

/* The sign-in screen sits on the navy field; the grid overlay needs to be
   clipped to the section rather than the page. */
.login > .hero__grid { position: absolute; inset: 0; }
.login__card { z-index: 1; }

/* --------------------------------------------------------------------------
   Phase 6 - content management
   -------------------------------------------------------------------------- */

/* File picker. Radio and checkbox inputs stay in the markup and are styled
   through :checked, so selection needs no script at all. */
.picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.picker__item {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 6px;
  cursor: pointer;
  min-width: 0;
}
.picker__item input { position: absolute; opacity: 0; pointer-events: none; }
.picker__item:hover { border-color: var(--border-2); }
.picker__item:has(input:checked) {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--ring);
}
.picker__item:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ring); }
.picker__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-xs);
  background: var(--surface-3);
  display: block;
}
.picker__name {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picker__none {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-xs);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 4px;
}

/* Editor section card. */
.editor-section { margin-top: 24px; }
.editor-section__head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  border-top: 2px solid var(--navy);
  padding-top: 14px;
  margin-bottom: 4px;
}
.editor-section__title { font-size: 17px; font-weight: 650; }
.editor-section__hint { font-size: 12.5px; color: var(--muted); }

/* Sticky action bar at the foot of an editor. */
.editor-actions {
  position: sticky;
  bottom: 0;
  margin-top: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow);
  z-index: 20;
}

/* Media library grid and detail pane. */
.library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.library__item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  display: block;
  color: inherit;
}
.library__item:hover { border-color: var(--border-2); }
.library__item.is-active { border-color: var(--blue); box-shadow: 0 0 0 2px var(--ring); }
.library__thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-3); display: block; }
.library__meta { padding: 9px 10px; }
.library__name { font-size: 12.5px; color: var(--ink); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library__size { font-family: var(--mono); font-size: 10.5px; color: var(--muted); display: block; margin-top: 3px; direction: ltr; }

/* Drop zone. Also a plain file input, so it works without scripting. */
.dropzone {
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  padding: 22px;
  text-align: center;
}
.dropzone__hint { margin-top: 8px; font-size: 12.5px; color: var(--muted); }

/* Message reading pane. */
.message-body {
  white-space: pre-wrap;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
  margin-top: 14px;
}

/* The tail of the log on the security screen. Left-to-right and scrollable:
   these lines are machine output, not prose. */
.log-tail {
  display: grid;
  gap: 6px;
  max-height: 320px;
  overflow: auto;
}
.log-tail__line {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 7px 10px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ==========================================================================
   Slide-out panel
   Used by the site header on a narrow screen, and by the panel sidebar below
   its own breakpoint. Closed state uses visibility rather than display, so the
   transition runs and the links stay out of the tab order while hidden.
   ========================================================================== */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(10, 18, 29, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

/* The page behind must not scroll under an open panel. */
.has-drawer { overflow: hidden; }

.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 85;
  width: min(320px, 86vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-inline-start: 1px solid var(--border);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  /* Which edge it comes from depends on the writing direction, and a
     transform cannot be expressed logically - hence the variable. */
  --drawer-from: 100%;
  transform: translateX(var(--drawer-from));
  transition: transform .22s ease, opacity .22s ease, visibility .22s ease;
}
[dir="rtl"] .drawer { --drawer-from: -100%; }
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--header-h);
  padding-inline: 16px;
  border-bottom: 1px solid var(--border);
  flex: none;
}
.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drawer__link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-2);
  border-inline-start: 2px solid transparent;
}
.drawer__link:hover { background: var(--surface-2); color: var(--ink); }
.drawer__link.is-active {
  background: var(--surface-3);
  color: var(--ink);
  border-inline-start-color: var(--blue);
}
.drawer__link.is-pending { opacity: .45; cursor: default; }
.drawer__link.is-pending:hover { background: none; color: var(--ink-2); }

.drawer__group {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 12px 6px;
  display: block;
}

.drawer__foot {
  flex: none;
  border-top: 1px solid var(--border);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface-2);
}
.drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.drawer__label { font-size: 13px; color: var(--muted); }

/* The panel sidebar is navy, so its drawer is too. */
.drawer--navy { background: var(--navy); border-inline-start-color: rgba(255, 255, 255, .10); }
.drawer--navy .drawer__head { border-bottom-color: rgba(255, 255, 255, .10); }
.drawer--navy .drawer__foot { background: var(--navy-2); border-top-color: rgba(255, 255, 255, .10); }
.drawer--navy .drawer__label { color: var(--navy-mute); }

/* Above the navigation breakpoint the site has no drawer at all. Scoped to
   .site-drawer on purpose: the panel keeps its own up to a wider breakpoint,
   and a rule on .drawer-backdrop here would switch that one off too. */
@media (min-width: 960px) {
  .site-drawer { display: none; }
}

/* --------------------------------------------------------------------------
   Panel: the sidebar becomes the drawer below its breakpoint
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .admin__sidebar {
    display: flex;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    z-index: 85;
    width: min(300px, 86vw);
    height: 100%;
    opacity: 0;
    visibility: hidden;
    --drawer-from: -100%;
    transform: translateX(var(--drawer-from));
    transition: transform .22s ease, opacity .22s ease, visibility .22s ease;
    box-shadow: var(--shadow);
  }
  [dir="rtl"] .admin__sidebar { --drawer-from: 100%; }
  .admin__sidebar.is-open { opacity: 1; visibility: visible; transform: none; }
}

@media (min-width: 1024px) {
  .admin__sidebar { opacity: 1; visibility: visible; transform: none; }
  /* The sidebar carries language, theme, the account and sign-out at every
     width, so nothing here is hidden and the top bar holds none of it. */
  .admin__toggle { display: none; }
}

.admin__sidebar-foot {
  flex: none;
  border-top: 1px solid rgba(255, 255, 255, .10);
  background: var(--navy-2);
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Two short actions share a row so the foot does not eat the space the
   navigation needs on a short screen. */
.admin__sidebar-actions { display: flex; gap: 8px; }
.admin__sidebar-actions > * { flex: 1; min-width: 0; }
.admin__sidebar-actions form { display: flex; }
.admin__sidebar-actions form .btn { width: 100%; }
.admin__sidebar-foot .drawer__label { color: var(--navy-mute); font-size: 12.5px; }
.admin__sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}