/* ---- tokens.css ---- */

/* Design tokens. Everything visual resolves to a value in this file. */

/* ==========================================================================
   BRAND — the whole identity, in one block

   Taken from the group's logo: a ring of faceted azure rays around an open
   centre, with a single gold ray, under "BARAKA" in navy and "HOLDING" in a
   lighter periwinkle.

   These are the only colours chosen rather than derived. Everything below is
   calculated from them, so re-matching the site to the logo means editing here
   and nowhere else. After any change run `npm run check:contrast`.

   On the gold: in the logo it is one ray in twenty-four. It is a highlight, not
   an accent — at 1.6:1 on white it can never carry text. `--brand-highlight` is
   for graphic marks only; `--brand-accent` is the colour that has to stay
   readable.
   ========================================================================== */

:root {
  --brand-ink: #1f2e5f; /* the navy of "BARAKA" */
  --brand-ink-lift: #22518f; /* deeper azure, for gradient mid-stops */
  --brand-accent: #1a6698; /* the rays' azure, darkened until it can carry text */
  --brand-accent-on-dark: #7fc9ec; /* the pale ray tips, for dark grounds */
  /* The rays' azure undarkened. Display weights only — the three readings of
     the name and the six acronym words, which are set large. Below about 24px
     these fall short of AA on a light ground; `check-contrast.mjs` lists them
     so the shortfall is on the record rather than lost. */
  --brand-accent-light: #3fa3dc;
  --brand-accent-bright: #00a3dc;
  --brand-highlight: #ffc72c; /* the single gold ray — graphic use only */
  /* The two blues of the printed wordmark. They set the group's own name and
     nothing else: WCAG 1.4.3 exempts text that is part of a logo or brand name
     from the contrast minimum, which is why the lighter one is allowed here and
     is never used for running text. `check-contrast.mjs` records the exception
     rather than skipping it silently. */
  --brand-wordmark: #014a94; /* "BARAKA" */
  --brand-wordmark-light: #0090d7; /* "HOLDING" */
  --brand-ground: #f1f4f9; /* a cool off-white, biased toward the blues */
  --brand-paper: #ffffff;
}

/* ==========================================================================
   Derived tokens — reference the brand block, never a raw hex
   ========================================================================== */

:root {
  /* Ink and surface */
  --ink: var(--brand-ink);
  --ink-soft: var(--brand-ink-lift);
  --text: #1a2438;
  --text-muted: #546480;
  --surface: var(--brand-paper);
  --surface-muted: var(--brand-ground);
  --surface-deep: var(--brand-ink);
  --line: #dde3ec;
  --line-strong: #c3ccda;

  /* Accent. `--accent-strong` is the hover/text weight; `--accent-soft` is the
     tint used behind small labels. */
  --accent: var(--brand-accent);
  --accent-strong: color-mix(in srgb, var(--brand-accent) 80%, #000);
  --accent-on-dark: var(--brand-accent-on-dark);
  --accent-soft: color-mix(in srgb, var(--brand-accent) 12%, var(--brand-paper));
  --highlight: var(--brand-highlight);

  /* Status colours on project cards. Semantic, deliberately outside the brand
     hue — a status must not read as decoration. */
  --status-selling: #2f6b4f;
  --status-leasing: #1f5c86;
  --status-delivered: #55677a;
  --status-planning: #8a6a2f;
  --status-sold: #2f6b4f;

  /* Slide tones. Each is a hue laid over the brand ink, so the carousel stays
     within the identity while the panels stay distinguishable.

     Not gold: spread across a whole panel at low opacity it goes khaki against
     the navy. The gold only works the way the logo uses it — one small
     saturated mark — so it stays on the rule above each eyebrow. */
  --tone-deep: var(--brand-ink-lift);
  --tone-valley: #2f7a58;
  --tone-industrial: var(--brand-accent-on-dark);
  --tone-markets: #6b4f9a;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia,
    ui-serif, serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.75vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --step-4: clamp(2.1rem, 1.65rem + 2.2vw, 3.4rem);

  /* Space and shape */
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --measure: 62ch;
  --wrap: 1180px;
  --wrap-narrow: 780px;
  --radius: 4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(31, 46, 95, 0.06), 0 2px 8px rgba(31, 46, 95, 0.04);
  --shadow-md: 0 2px 6px rgba(31, 46, 95, 0.08), 0 12px 28px rgba(31, 46, 95, 0.1);

  /* Tall enough for the stacked lockup — mark above wordmark — to sit whole. */
  --header-height: 156px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ---- base.css ---- */

/* Reset, document defaults, and the accessibility floor from CONTRIBUTING.md. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: var(--step-4);
}
h2 {
  font-size: var(--step-3);
}
h3 {
  font-size: var(--step-1);
}
h4 {
  font-size: var(--step-0);
}

p,
ul,
ol {
  margin: 0 0 1.15em;
}

ul,
ol {
  padding-left: 1.25em;
}

li + li {
  margin-top: 0.35em;
}

a {
  color: var(--accent-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--ink);
}

img,
svg,
picture {
  max-width: 100%;
  height: auto;
  display: block;
}

strong {
  font-weight: 650;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

/* Visible focus, everywhere, always. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -100%;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 0.15s var(--ease);
}

.skip-link:focus {
  top: 0.5rem;
  color: #fff;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .nav-toggle,
  .hero__actions {
    display: none !important;
  }
}


/* ---- layout.css ---- */

/* Page shell: wrapper, sections, header, mobile navigation, footer. */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Keeps the outer gutter of a full wrap, so narrow copy lines up under the
   page heading rather than floating to the middle of the viewport. */
.wrap--narrow > * {
  max-width: var(--wrap-narrow);
}

.section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.section--tight {
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}

.section--muted {
  background: var(--surface-muted);
}

.section--deep {
  background: var(--surface-deep);
  color: #d8dee6;
}

.section--deep h2,
.section--deep h3 {
  color: #fff;
}

.section__head {
  max-width: var(--measure);
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.section__head > :last-child {
  margin-bottom: 0;
}

.eyebrow {
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.section--deep .eyebrow {
  color: var(--accent-on-dark);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: var(--measure);
}

.section--deep .lede {
  color: #b9c4d0;
}

.prose {
  max-width: var(--measure);
}

.prose > :last-child {
  margin-bottom: 0;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}

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

/* The group's own lockup: the mark standing above the name, not beside it. */
.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  text-decoration: none;
  color: var(--ink);
  padding-block: 0.6rem;
}

.brand__mark {
  flex: none;
  width: clamp(88px, 12vw, 124px);
  height: clamp(88px, 12vw, 124px);
  object-fit: contain;
}

/* A supplied full lockup carries the name itself, so it is sized by height and
   allowed to be as wide as it needs. */
.brand__logo {
  flex: none;
  width: auto;
  height: clamp(52px, 7vw, 74px);
  max-width: min(70vw, 340px);
  object-fit: contain;
}

/* Mirrors the printed wordmark: "BARAKA" in the deeper blue, "HOLDING" tracked
   wider in the lighter one, set solid as one word. */
.brand__name {
  position: relative;
  padding-bottom: 0.3rem;
  font-family: var(--font-serif);
  font-size: clamp(0.88rem, 2.6vw, 1.1rem);
  line-height: 1;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.brand__name b {
  font-weight: 600;
  color: var(--brand-wordmark);
  letter-spacing: 0.1em;
}

.brand__name i {
  font-style: normal;
  font-weight: 400;
  color: var(--brand-wordmark-light);
  letter-spacing: 0.16em;
  transition: color 0.24s var(--ease);
}

/* A gold rule the width of the wordmark, drawn on hover — the logo's one warm
   mark, used as the only movement in the header. */
.brand__name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--highlight);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.32s var(--ease);
}

.brand:hover .brand__name::after,
.brand:focus-visible .brand__name::after {
  transform: scaleX(1);
}

.brand:hover .brand__name i {
  color: var(--brand-ink);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
}

.nav-toggle__bars {
  position: relative;
  width: 18px;
  height: 12px;
}

.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.22s var(--ease), opacity 0.15s linear;
}

.nav-toggle__bars span:nth-child(1) {
  top: 0;
}
.nav-toggle__bars span:nth-child(2) {
  top: 5px;
}
.nav-toggle__bars span:nth-child(3) {
  top: 10px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: block;
  text-decoration: none;
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.site-nav a:hover {
  color: var(--accent-strong);
}

.site-nav a[aria-current="page"] {
  color: var(--ink);
}

/* Mobile first: the nav is a panel that opens under the header. */
@media (max-width: 899px) {
  .site-nav {
    position: fixed;
    inset: var(--header-height) 0 auto 0;
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease),
      visibility 0s linear 0.18s;
  }

  .site-nav[data-open="true"] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .site-nav ul {
    padding: 0.5rem var(--gutter) 1.25rem;
  }

  .site-nav li + li {
    margin-top: 0;
    border-top: 1px solid var(--line);
  }

  .site-nav a {
    padding-block: 1rem;
    font-size: 1.05rem;
  }

  .site-nav a[aria-current="page"] {
    color: var(--accent-strong);
  }
}

@media (min-width: 900px) {
  .nav-toggle {
    display: none;
  }

  .site-nav ul {
    display: flex;
    align-items: center;
    gap: clamp(1.1rem, 2.4vw, 2rem);
  }

  /* The panel's dividing rules and spacing are a mobile arrangement; across the
     breakpoint the same items are a single row. */
  .site-nav li,
  .site-nav li + li {
    margin: 0;
  }

  .site-nav a {
    position: relative;
    padding-block: 0.4rem;
  }

  /* The same gold rule the current page carries, drawn on hover — so hovering
     shows what choosing would look like. */
  .site-nav a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.15rem;
    height: 2px;
    background: var(--highlight);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.26s var(--ease);
  }

  .site-nav a:hover::before {
    transform: scaleX(1);
  }

  .site-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.15rem;
    height: 2px;
    background: var(--highlight);
  }
}

body[data-nav-open="true"] {
  overflow: hidden;
}

@media (min-width: 900px) {
  body[data-nav-open="true"] {
    overflow: visible;
  }
}

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

.site-footer {
  background: var(--surface-deep);
  color: #98a7b6;
  font-size: var(--step--1);
  padding-block: clamp(2.75rem, 6vw, 4rem) 2rem;
}

.site-footer h2 {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin-bottom: 1rem;
}

.site-footer a {
  color: #dbe3ea;
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li + li {
  margin-top: 0.6rem;
}

.footer-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  }
}

.footer-brand p {
  max-width: 34ch;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8rem;
}

.footer-bottom p {
  margin: 0;
}


/* ---- components.css ---- */

/* Reusable pieces: buttons, cards, grids, stats, timeline, forms. */

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.7rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease),
    color 0.16s var(--ease), transform 0.16s var(--ease);
}

.button:hover {
  background: var(--accent-strong);
  color: #fff;
  transform: translateY(-1px);
}

.button--ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--ink);
}

.button--ghost:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.button--on-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.button--on-dark:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

/* Text link with a trailing arrow. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--step--1);
  font-weight: 650;
  text-decoration: none;
  color: var(--accent-strong);
}

.link-arrow::after {
  content: "→";
  transition: transform 0.16s var(--ease);
}

.link-arrow:hover::after {
  transform: translateX(3px);
}

/* ---------- Grids ---------- */

.grid {
  display: grid;
  gap: clamp(1.15rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

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

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease),
    transform 0.18s var(--ease);
}

/* The card itself holds still: the mark on its tile is what answers the hover,
   and a card that also lifts turns one gesture into two competing ones. */
.card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.6rem;
  padding: clamp(1.25rem, 3vw, 1.6rem);
}

.card__body > :last-child {
  margin-top: auto;
  margin-bottom: 0;
}

.card__title {
  margin: 0;
  font-size: var(--step-1);
}

/* The whole card is clickable, with the real link still the accessible target. */
.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card__title a {
  text-decoration: none;
  color: var(--ink);
}

.card {
  position: relative;
}

.card__meta {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.card__text {
  margin: 0;
  color: var(--text-muted);
}

/* Monogram tile standing in for company photography. */
.card__mark {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
  color: #fff;
  overflow: hidden;
}

.card__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(255, 255, 255, 0.16) 1px,
    transparent 0
  );
  background-size: 14px 14px;
  opacity: 0.5;
}

.card__mark span {
  position: relative;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  letter-spacing: 0.08em;
}

/* ---------- Stat band ---------- */

.stats {
  display: grid;
  gap: 1.5rem clamp(1rem, 3vw, 2.5rem);
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 760px) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stats dt {
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.section--deep .stats dt {
  color: #9fb0c0;
}

.stats dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-2);
  color: var(--ink);
  line-height: 1.1;
}

.section--deep .stats dd {
  color: #fff;
}

/* ---------- Fact list ---------- */

.facts {
  display: grid;
  gap: 0;
  margin: 0 0 1.5rem;
  border-top: 1px solid var(--line);
}

.facts > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  justify-content: space-between;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.facts dt {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.facts dd {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}

.as-of {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-muted);
}

/* ---------- Status pill ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem;
  border-radius: 100px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.pill--selling {
  background: #e6f0ea;
  color: var(--status-selling);
}
.pill--leasing {
  background: #e4eef5;
  color: var(--status-leasing);
}
.pill--sold {
  background: #e6f0ea;
  color: var(--status-sold);
}
.pill--delivered {
  background: #eceff2;
  color: var(--status-delivered);
}
.pill--planning {
  background: #f5eddb;
  color: var(--status-planning);
}

/* ---------- Timeline ---------- */

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

.timeline__era + .timeline__era {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}

.timeline__era-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 0;
}

.timeline__era-head h3 {
  margin: 0;
  font-size: var(--step-2);
}

.timeline__era-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--step--1);
}

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

.timeline__item {
  position: relative;
  padding: 1.5rem 0 1.5rem 1.75rem;
  border-bottom: 1px solid var(--line);
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.timeline__item::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 2.6rem;
  bottom: -1px;
  width: 1px;
  background: var(--line);
}

.timeline__item:last-child::after {
  display: none;
}

.timeline__date {
  display: block;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.3rem;
}

.timeline__item h4 {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  margin-bottom: 0.4rem;
}

/* Twelve entries of several paragraphs each is a wall of text, so each folds.
   `<details>` rather than a scripted panel: it opens without JavaScript, is
   keyboard-operable and findable by in-page search, and browsers announce its
   state without being told to. */
.timeline__detail {
  min-width: 0;
}

.timeline__detail summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
  cursor: pointer;
  padding-block: 0.15rem;
}

.timeline__detail summary::-webkit-details-marker {
  display: none;
}

.timeline__detail summary h4 {
  margin: 0;
}

.timeline__detail summary:hover h4 {
  color: var(--accent-strong);
}

.timeline__chevron {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
  transition: transform 0.24s var(--ease);
}

.timeline__detail[open] .timeline__chevron {
  transform: rotate(45deg);
}

/* A `0fr`/`1fr` grid row rather than max-height: the panel animates to its own
   height, whatever that is, instead of to a guess that clips or lags. */
.timeline__reveal {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.42s var(--ease), opacity 0.32s var(--ease);
}

.timeline__reveal-inner {
  min-height: 0;
  overflow: hidden;
}

.timeline__detail:not([open]) .timeline__reveal {
  grid-template-rows: 0fr;
  opacity: 0;
}

.timeline__item p {
  margin: 0.7rem 0 0;
  color: var(--text-muted);
  max-width: var(--measure);
}

.timeline__item p + p {
  margin-top: 0.7rem;
}

/* The company or project the entry is about, set beside it. */
.timeline__logo {
  height: 46px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  object-position: left center;
  margin-top: 0.9rem;
}

@media (min-width: 760px) {
  .timeline__item {
    display: grid;
    grid-template-columns: 9rem 1fr auto;
    align-items: start;
    gap: 0 2rem;
    padding-left: 1.75rem;
  }

  .timeline__date {
    margin-bottom: 0;
    padding-top: 0.25rem;
  }

  .timeline__logo {
    height: 66px;
    max-width: 220px;
    margin-top: -0.4rem;
    object-position: right center;
  }
}

/* ---------- Values ---------- */

.values {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .values {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .values {
    grid-template-columns: repeat(5, 1fr);
  }
}

.values li {
  margin: 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--surface);
}

.values h3 {
  font-size: var(--step-1);
  margin-bottom: 0.4rem;
}

.values p {
  margin: 0;
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* ---------- Form ---------- */

.form {
  display: grid;
  gap: 1.25rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field label {
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--ink);
}

.field .hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 400;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem; /* 16px keeps iOS from zooming on focus */
}

.field textarea {
  min-height: 150px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
}

.field--honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

/* ---------- Callout ---------- */

.callout {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--surface-muted);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.callout > :last-child {
  margin-bottom: 0;
}

/* ---------- Breadcrumb ---------- */

.breadcrumb {
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--text-muted);
}

/* The trail is one line, so the list spacing that separates stacked items would
   only push the separators off the baseline. */
.breadcrumb li {
  display: flex;
  align-items: center;
  line-height: 1.2;
}

.breadcrumb li + li {
  margin-top: 0;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.6rem;
  color: var(--line-strong);
}

.breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}


/* ---- slideshow.css ---- */

/* Home page rotating panel. See src/components/hero-slideshow.mjs. */

.hero-slideshow {
  position: relative;
  background: var(--surface-deep);
  isolation: isolate;
}

.slideshow__viewport {
  position: relative;
  display: grid;
}

/* Every slide occupies the same cell, so the section is as tall as the tallest
   one and a crossfade never changes the page height. */
.slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(27rem, 70vh, 42rem);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s var(--ease), visibility 0s linear 0.7s;
}

.slide[data-active="true"] {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  z-index: 1;
}

/* A soft light that drifts across the panel while it holds, so a slide is never
   a still frame. Slow and low-contrast: felt, not noticed. */
.slide::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(38% 46% at 30% 42%, rgba(255, 255, 255, 0.16) 0%, transparent 70%);
  opacity: 0;
}

.slide[data-theme="light"]::after {
  background: radial-gradient(38% 46% at 30% 42%, rgba(255, 255, 255, 0.75) 0%, transparent 70%);
}

.slide[data-active="true"]::after {
  animation: slide-sheen 26s var(--ease) infinite alternate,
    slide-sheen-in 2s linear forwards;
}

@keyframes slide-sheen {
  from {
    translate: 0 0;
  }
  to {
    translate: 14% 4%;
  }
}

@keyframes slide-sheen-in {
  to {
    opacity: 1;
  }
}

/* ---------- Tones ----------
   Backdrops until photography is supplied, and the scrim behind it once it is.
   Named for what they are, since the slides no longer map to project types. */

.slide[data-tone="ice"] {
  /* The pale slide: navy type on an ice ground, as on the site this replaces. */
  background: radial-gradient(120% 120% at 85% 10%, #ffffff 0%, transparent 55%),
    linear-gradient(155deg, #e8f2fb 0%, #d6e9f8 60%, #e9f4fc 100%);
}

.slide[data-tone="azure"] {
  background: radial-gradient(110% 100% at 78% 12%, #2ca3dd 0%, transparent 62%),
    linear-gradient(155deg, var(--brand-ink) 0%, #126ca8 55%, #0f5b90 100%);
}

.slide[data-tone="cyan"] {
  background: radial-gradient(115% 105% at 72% 18%, #35b6e6 0%, transparent 60%),
    linear-gradient(150deg, #0f5b90 0%, #1c8cc4 55%, var(--brand-ink) 100%);
}

/* ---------- Themes ----------
   A slide is set on a light ground or a dark one; every colour inside it keys
   off that rather than being set per slide. */

.slide[data-theme="dark"] {
  --slide-ink: #ffffff;
  --slide-lead: var(--brand-accent-on-dark);
  --slide-body: #d3e2ee;
  --slide-conjunction: rgba(255, 255, 255, 0.32);
  --slide-watermark: rgba(255, 255, 255, 0.09);
}

.slide[data-theme="light"] {
  --slide-ink: var(--brand-ink);
  --slide-lead: var(--brand-accent);
  --slide-body: var(--text-muted);
  --slide-conjunction: rgba(31, 46, 95, 0.22);
  --slide-watermark: rgba(31, 46, 95, 0.07);
}

.slide__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Slow drift on the active slide — enough to feel alive, not enough to notice
   as an effect. Disabled entirely under reduced motion, below. */
.slide[data-active="true"] .slide__image {
  animation: slide-drift 16s ease-out forwards;
}

@keyframes slide-drift {
  from {
    transform: scale(1.06);
  }
  to {
    transform: scale(1);
  }
}

/* Only does anything when a photograph is present; the tones are already
   composed for legibility on their own. */
.slide__image ~ .slide__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(8, 22, 40, 0.9) 0%,
    rgba(8, 22, 40, 0.62) 45%,
    rgba(8, 22, 40, 0.25) 100%
  );
}

.slide[data-theme="light"] .slide__image ~ .slide__scrim {
  background: linear-gradient(
    100deg,
    rgba(240, 246, 252, 0.94) 0%,
    rgba(240, 246, 252, 0.7) 45%,
    rgba(240, 246, 252, 0.3) 100%
  );
}

/* ---------- The group's mark, oversized behind the text ---------- */

.slide__watermark {
  position: absolute;
  right: 3%;
  top: 50%;
  translate: 0 -50%;
  /* Sized against the panel's height as well as its width, so no ray is ever
     clipped by an edge on a short viewport. */
  width: min(clamp(18rem, 38vw, 34rem), 62vh);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  color: var(--slide-watermark);
}

.slide__watermark-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Held far back: a watermark, not a second logo arguing with the header. */
  opacity: 0.16;
}

.slide[data-theme="light"] .slide__watermark-art {
  opacity: 0.14;
}

.slide[data-active="true"] .slide__watermark-art {
  animation: slide-turn 90s linear infinite, slide-mark-in 1.6s var(--ease) backwards;
}

@keyframes slide-mark-in {
  from {
    opacity: 0;
    scale: 0.9;
  }
}

@keyframes slide-turn {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Copy ---------- */

.slide__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(4rem, 9vw, 6rem) clamp(6.5rem, 12vw, 8.5rem);
  max-width: min(56rem, 100%);
  margin-inline: auto;
  width: 100%;
  color: var(--slide-ink);
}

/* Text rises as the slide comes in. One movement, on the group, not four. */
.slide[data-active="true"] .slide__inner > * {
  animation: slide-rise 0.65s var(--ease) backwards;
}

.slide[data-active="true"] .slide__inner > :nth-child(2) {
  animation-delay: 0.07s;
}
.slide[data-active="true"] .slide__inner > :nth-child(3) {
  animation-delay: 0.14s;
}
.slide[data-active="true"] .slide__inner > :nth-child(4) {
  animation-delay: 0.21s;
}

@keyframes slide-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.slide__lead {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 0.85rem;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 400;
  color: var(--slide-lead);
}

/* The gold rule that opens every slide, drawn rather than simply present. */
.slide__lead::before {
  content: "";
  flex: none;
  width: clamp(1.5rem, 4vw, 3rem);
  height: 2px;
  border-radius: 2px;
  background: var(--highlight);
  transform-origin: left;
}

.slide[data-active="true"] .slide__lead::before {
  animation: rule-draw 0.7s var(--ease) 0.15s backwards;
}

@keyframes rule-draw {
  from {
    transform: scaleX(0);
  }
}

/* The headline: a light weight set against a bold one, in caps, with the
   conjunction hung to the left of both lines. */
.slide__title {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0 clamp(0.5rem, 1.6vw, 1.5rem);
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  /* Capped so the longest line — BRILLIANT VISIONS — stays whole beside the
     hung conjunction rather than breaking onto a third line. */
  font-size: clamp(2.05rem, 5.9vw, 4.15rem);
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--slide-ink);
  text-wrap: initial;
}

.slide__title b {
  font-weight: 700;
}

.slide[data-active="true"] .slide__conjunction {
  animation: conjunction-in 1.1s var(--ease) 0.1s backwards;
}

@keyframes conjunction-in {
  from {
    opacity: 0;
    transform: translateX(-0.15em);
  }
}

.slide__conjunction {
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 300;
  line-height: 0.8;
  text-transform: lowercase;
  color: var(--slide-conjunction);
}

.slide__lines {
  display: grid;
  gap: 0.02em;
}

/* Each line clears its own edge as it rises. `overflow: clip` with a margin
   rather than `hidden`: descenders and the odd accent sit outside the line box
   and would otherwise be shaved off once the animation settles. */
.slide__lines > * {
  display: block;
  overflow: clip;
  overflow-clip-margin: 0.16em;
}

.slide[data-active="true"] .slide__line {
  animation: line-clear 0.9s var(--ease) backwards;
}

.slide[data-active="true"] .slide__line:nth-child(2) {
  animation-delay: 0.14s;
}

.slide[data-active="true"] .slide__line:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes line-clear {
  from {
    opacity: 0;
    transform: translateY(0.5em);
  }
}

.slide__text {
  margin: 1.25rem 0 0;
  max-width: 40ch;
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.55;
  color: var(--slide-body);
}

.slide__actions {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* The gold call to action, carried over from the site this replaces. Filled
   rather than outlined: gold on a blue ground is about 2:1 as an outline, and
   gold behind the group's navy clears AA comfortably. */
.button--gold {
  background: var(--highlight);
  border-color: var(--highlight);
  color: var(--brand-ink);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(31, 46, 95, 0.12);
  transition: background-color 0.18s var(--ease), box-shadow 0.24s var(--ease),
    transform 0.24s var(--ease);
}

.button--gold:hover {
  background: #ffd75c;
  border-color: #ffd75c;
  color: var(--brand-ink);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(31, 46, 95, 0.22);
}

.button--gold::after {
  content: "›";
  font-size: 1.2em;
  line-height: 1;
  translate: 0 -0.05em;
  transition: translate 0.24s var(--ease);
}

/* The arrow leans the way the button goes. */
.button--gold:hover::after {
  translate: 0.18em -0.05em;
}

/* ---------- Controls ---------- */

.slideshow__controls {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(1.5rem, 3vw, 2.25rem);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.slideshow__arrow,
.slideshow__pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 100px;
  background: rgba(8, 22, 40, 0.42);
  backdrop-filter: blur(6px);
  color: #fff;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease);
}

/* On the pale slide the same controls need the opposite treatment. */
.slide[data-active="true"][data-theme="light"] ~ .slideshow__controls,
.hero-slideshow:has(.slide[data-active="true"][data-theme="light"]) .slideshow__arrow,
.hero-slideshow:has(.slide[data-active="true"][data-theme="light"]) .slideshow__pause {
  border-color: rgba(31, 46, 95, 0.28);
  background: rgba(255, 255, 255, 0.6);
  color: var(--brand-ink);
}

.slideshow__arrow span {
  font-size: 1.5rem;
  line-height: 1;
  translate: 0 -0.08em;
}

.slideshow__arrow:hover,
.slideshow__pause:hover {
  background: rgba(8, 22, 40, 0.78);
  border-color: rgba(255, 255, 255, 0.6);
}

.hero-slideshow:has(.slide[data-active="true"][data-theme="light"]) .slideshow__arrow:hover,
.hero-slideshow:has(.slide[data-active="true"][data-theme="light"]) .slideshow__pause:hover {
  background: #ffffff;
  border-color: var(--brand-ink);
}

.slideshow__pause {
  margin-left: 0.25rem;
}

.slideshow__pause-icon {
  width: 9px;
  height: 11px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

/* Pressed means "playback is paused", so the icon becomes the play triangle. */
.slideshow__pause[aria-pressed="true"] .slideshow__pause-icon {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-left: 10px solid currentColor;
  border-right: 0;
}

.slideshow__tabs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-inline: 0.25rem;
}

/* A bar that fills over the dwell time, so the reader can see how long a slide
   has left rather than being surprised by the change. */
.slideshow__tab {
  position: relative;
  width: clamp(30px, 7vw, 56px);
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.slideshow__tab::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  translate: 0 -50%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.34);
}

.hero-slideshow:has(.slide[data-active="true"][data-theme="light"]) .slideshow__tab::before {
  background: rgba(31, 46, 95, 0.2);
}

.slideshow__tab-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 3px;
  width: 0;
  translate: 0 -50%;
  border-radius: 2px;
  /* The logo's one gold ray, doing the same job here: a single warm mark
     against the blues. Graphic only — it never carries text. */
  background: var(--highlight);
}

.slideshow__tab[aria-current="true"] .slideshow__tab-fill {
  width: 100%;
  transition: width var(--slide-duration, 6s) linear;
}

.slideshow__tab[aria-current="true"][data-paused="true"] .slideshow__tab-fill,
.slideshow__tab[aria-current="true"][data-instant="true"] .slideshow__tab-fill {
  transition: none;
}

@media (max-width: 599px) {
  /* Arrows go; swipe and the tabs carry navigation at this width. */
  .slideshow__arrow {
    display: none;
  }

  .slideshow__controls {
    justify-content: space-between;
    width: 100%;
    padding-inline: var(--gutter);
  }

  .slideshow__tabs {
    flex: 1;
  }

  .slideshow__tab {
    flex: 1;
  }

  .slide__watermark {
    right: 2%;
    opacity: 0.7;
  }
}

/* Reduced motion: no drift, no turn, no crossfade, no automatic advance. The
   controls stay, so the carousel is still fully usable — just reader-driven. */
@media (prefers-reduced-motion: reduce) {
  .slide {
    transition: none;
  }

  /* The sheen stays — it is a soft light, and removing it flattens the panel.
     What goes is its drift: shown at rest rather than not shown at all. */
  .slide[data-active="true"]::after {
    animation: none;
    opacity: 1;
  }

  .slide[data-active="true"] .slide__image,
  .slide[data-active="true"] .slide__watermark-art,
  .slide[data-active="true"] .slide__lead::before,
  .slide[data-active="true"] .slide__conjunction,
  .slide[data-active="true"] .slide__line,
  .slide[data-active="true"] .slide__inner > * {
    animation: none;
  }

  .slideshow__tab[aria-current="true"] .slideshow__tab-fill {
    transition: none;
    width: 100%;
  }
}


/* ---- pages.css ---- */

/* Page-specific composition. */

/* ---------- Page header (interior pages) ---------- */

.page-header {
  background: var(--surface-muted);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.page-header h1 {
  margin-bottom: 0.6rem;
}

.page-header p {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--step-1);
  color: var(--text-muted);
}

.page-header--dark {
  background: var(--surface-deep);
  border-bottom: 0;
  color: #c3cfdb;
}

.page-header--dark h1 {
  color: #fff;
}

.page-header--dark p {
  color: #b9c4d0;
}

/* ---------- Home: news split ---------- */

.news-split {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .news-split {
    grid-template-columns: repeat(2, 1fr);
  }
}

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.news-list li {
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.news-item {
  position: relative;
  display: block;
  padding-block: 1.35rem;
  text-decoration: none;
  color: inherit;
}

.news-item:hover .news-item__title {
  color: var(--accent-strong);
}

.news-item__date {
  display: block;
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

.news-item__title {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  color: var(--ink);
  margin: 0 0 0.4rem;
  transition: color 0.16s var(--ease);
}

.news-item__excerpt {
  margin: 0;
  color: var(--text-muted);
  max-width: 56ch;
}

.empty-note {
  padding: 1.5rem 0;
  color: var(--text-muted);
  font-style: italic;
}

/* ---------- Company detail ---------- */

.company-head {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .company-head {
    grid-template-columns: 1.55fr 1fr;
  }
}

.company-aside {
  padding: clamp(1.35rem, 3vw, 1.75rem);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.company-aside h2 {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.company-aside .facts {
  margin-bottom: 1.25rem;
}

.company-aside .facts > div:last-child {
  border-bottom: 0;
}

/* ---------- Company index rail ---------- */

.company-rail {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.company-rail a {
  flex: none;
  padding: 0.55rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.company-rail a:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.company-rail a[aria-current="page"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ---------- Article ---------- */

.article {
  max-width: var(--measure);
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 1.5rem;
  font-size: var(--step--1);
  color: var(--text-muted);
}

.article__body > :last-child {
  margin-bottom: 0;
}

.article-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: 1.35fr 1fr;
  }
}

.contact-details {
  font-style: normal;
}

.contact-details dt {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.contact-details dd {
  margin: 0 0 1.5rem;
  font-size: var(--step-0);
}

.contact-details dd:last-child {
  margin-bottom: 0;
}

/* ---------- 404 ---------- */

.notfound {
  display: grid;
  place-items: center;
  min-height: 55vh;
  text-align: center;
  padding-block: clamp(3rem, 8vw, 5rem);
}

.notfound p {
  max-width: 48ch;
  margin-inline: auto;
  color: var(--text-muted);
}

/* ---------- Project photograph ----------
   A site photograph directly under the page header, before the detail. Fixed
   aspect so the band's depth is the same on every project page whether the
   image has loaded yet or not. */

.project-shot {
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  width: min(100% - 2 * var(--gutter), 580px);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 2px;
  background: var(--surface-muted);
}

.project-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 640px) {
  .project-shot {
    aspect-ratio: 4 / 3;
  }
}


/* ---- decor.css ---- */

/* Decoration: the sunburst motif, richer page headers, and reveal-on-scroll.
   Loaded after the component styles so it can lift them without being fought. */

/* ==========================================================================
   The burst

   The mark itself, standing large behind the copy — the real artwork, in its
   own colours, not an approximation of it in CSS. A redrawing of the geometry
   was close, but the rays are faceted and unevenly weighted and the one gold
   ray sits at a particular angle; at this size the difference showed.

   `--still` is for a company's own logo, which must not spin. Only the group's
   radiating mark turns, and then slowly enough to read as light rather than as
   motion.
   ========================================================================== */

.burst {
  position: absolute;
  aspect-ratio: 1;
  width: auto;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}

.burst--still {
  filter: brightness(1.15);
}

@media (prefers-reduced-motion: no-preference) {
  .burst--turning {
    animation: burst-turn 120s linear infinite;
  }
}

@keyframes burst-turn {
  to {
    rotate: 360deg;
  }
}

/* ==========================================================================
   Page headers

   Every interior page used to open with the same pale band and a wide empty
   right-hand side. They now open on the group's blue, with the burst filling
   the space the copy never used.
   ========================================================================== */

.page-header {
  position: relative;
  /* Deep enough that the mark beside the heading is a full disc rather than a
     sliver, even where the heading is one short word. */
  min-height: 320px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(150deg, var(--brand-ink) 0%, #145d95 62%, #0f4f80 100%);
  border-bottom: 0;
  color: #cfe0ee;
  padding-block: clamp(3rem, 7vw, 5rem);
}

.page-header::after {
  /* A soft light source behind the burst, so the band is not a flat field. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(90% 130% at 82% 8%, rgba(127, 201, 236, 0.4) 0%, transparent 60%);
}

/* A company page takes its own colour flat, without the group's wash over it. */
.page-header--brand::after {
  background: none;
}

/* Sized to the band's height and held inside it, so no ray is cut by an edge. */
.page-header .burst {
  right: 3%;
  top: 50%;
  translate: 0 -50%;
  height: 100%;
  max-height: 100%;
  z-index: -1;
  opacity: 0.26;
}

/* A company's own logo is the point of its page, not a texture behind it, so it
   stands at full strength where the group's mark is held back to a watermark. */
.page-header .burst--still {
  opacity: 1;
}

.page-header h1 {
  color: #fff;
}

.page-header p {
  color: #bcd4e6;
}

/* The gold rule from the slides, tying the interior pages to the home panel. */
.page-header h1::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
  border-radius: 2px;
  background: var(--highlight);
}

/* The breadcrumb sits directly above the band, so it takes the same ground. */
.breadcrumb {
  background: var(--brand-ink);
  border-bottom: 0;
  color: #91a8c0;
}

.breadcrumb ol {
  color: #91a8c0;
}

.breadcrumb a {
  color: #b8cbdd;
}

.breadcrumb a:hover {
  color: #fff;
}

.breadcrumb li + li::before {
  color: rgba(255, 255, 255, 0.3);
}

.breadcrumb [aria-current="page"] {
  color: #fff;
}

/* ==========================================================================
   Section rhythm
   ========================================================================== */

/* The same gold rule above every eyebrow, so the sections read as one family. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: var(--highlight);
}

/* The muted ground gains a little depth rather than sitting flat. */
.section--muted {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-muted) 22%, var(--surface-muted) 100%);
}

/* A prose section with a wide empty flank gets the burst rather than nothing. */
.section--flanked {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.section--flanked .burst {
  right: 2%;
  top: 50%;
  translate: 0 -50%;
  height: 74%;
  max-height: 22rem;
  z-index: -1;
  opacity: 0.14;
}

/* ==========================================================================
   Cards

   Six identical navy tiles read as a table of contents. Each company now takes
   a distinct place on the brand's blue range, and the tile carries the burst.
   ========================================================================== */

.card__mark {
  background: linear-gradient(
    142deg,
    hsl(var(--card-hue, 210) 62% 26%) 0%,
    hsl(calc(var(--card-hue, 210) + 8) 68% 40%) 100%
  );
}

.card__mark::after {
  /* The dot grid is gone; the mark is a real element, below. */
  background-image: none;
}

/* The artwork on a tile: whole, never cropped by the frame, and lifted enough
   to hold its own against the tile's colour without drowning the name. */
.card__mark-art {
  position: absolute;
  top: 50%;
  right: 4%;
  translate: 0 -50%;
  height: 92%;
  width: auto;
  max-width: none;
  filter: brightness(1.3);
  opacity: 0.82;
  transform-origin: center;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  pointer-events: none;
}

/* A company's own logo needs holding within the tile rather than filling it —
   these are lockups and wordmarks, not a radial mark that reads at any crop. */
.card__mark-art--own {
  height: auto;
  width: auto;
  object-fit: contain;
  right: 5%;
  max-height: 62%;
  max-width: 40%;
}

/* Per-company adjustments. Each of these logos is a different shape and a
   different weight against its tile, so each is set rather than averaged. */
.card__mark-art--baladac {
  filter: brightness(1.25) saturate(1.15);
}

.card__mark-art--rawa {
  max-height: 70%;
  max-width: 46%;
  filter: brightness(1.35) saturate(1.15);
}

/* The Invest lockup is navy artwork on a navy tile, so it is lifted to read as
   a white watermark, and tucked below the tile name rather than behind it. */
.card__mark-art--baraka-invest {
  right: 4%;
  top: auto;
  bottom: 22%;
  translate: 0 0;
  max-height: 60%;
  filter: brightness(1.65) saturate(1.2);
}

/* Every tile mark answers a hover the same way, whatever its resting weight. */
.card:hover .card__mark-art,
.card:focus-within .card__mark-art {
  opacity: 1;
  transform: scale(1.04);
}

.card__mark span {
  text-shadow: 0 1px 12px rgba(8, 22, 40, 0.35);
  white-space: nowrap;
}

/* A gold rule that draws itself across the card's foot on hover. */
.card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--highlight);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease);
}

.card:hover::after,
.card:focus-within::after {
  transform: scaleX(1);
}

/* ==========================================================================
   Stats
   ========================================================================== */

.stats > div {
  position: relative;
  padding-top: 1.1rem;
  border-top: 3px solid var(--highlight);
}

.stats dd {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  color: var(--brand-ink);
}

/* ==========================================================================
   Values
   ========================================================================== */

.values li {
  position: relative;
  transition: background-color 0.24s var(--ease), transform 0.24s var(--ease);
}

.values li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}

.values li:hover::before {
  transform: scaleX(1);
}

.values li:hover {
  background: #fbfdff;
}

.values h3 {
  color: var(--accent);
}

/* ==========================================================================
   Timeline
   ========================================================================== */

.timeline__item::before {
  width: 11px;
  height: 11px;
  background: var(--highlight);
  box-shadow: 0 0 0 4px rgba(255, 199, 44, 0.18);
  rotate: 45deg;
  border-radius: 2px;
  transition: box-shadow 0.24s var(--ease);
}

.timeline__item:hover::before {
  box-shadow: 0 0 0 7px rgba(255, 199, 44, 0.22);
}

.timeline__era-head {
  border-bottom-color: var(--accent);
}

/* ==========================================================================
   News list
   ========================================================================== */

.news-item {
  padding-inline: 0.9rem;
  margin-inline: -0.9rem;
  border-radius: var(--radius);
  transition: background-color 0.22s var(--ease), padding-left 0.22s var(--ease);
}

.news-item:hover {
  background: var(--surface-muted);
  padding-left: 1.4rem;
}

/* ==========================================================================
   Reveal on scroll

   The attribute is only ever added by JavaScript, so a page without it renders
   everything visible rather than blank — the failure mode that makes
   scroll animation a liability.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
  }

  [data-reveal][data-revealed="true"] {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   The BARAKA acronym

   The band beneath the home slideshow. Each letter sits behind its word as a
   large, very faint serif character — the name spelling itself out. The letters
   are `aria-hidden`: read aloud they would interrupt the words with single
   characters, and they carry nothing the words do not.
   ========================================================================== */

.acronym {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem) clamp(0.5rem, 2vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 720px) {
  .acronym {
    grid-template-columns: repeat(6, auto);
    justify-content: space-between;
    align-items: center;
  }
}

.acronym__item {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  padding-block: clamp(0.5rem, 1.5vw, 1rem);
}

.acronym__letter {
  grid-area: 1 / 1;
  font-family: var(--font-serif);
  font-size: clamp(3.4rem, 7vw, 5.4rem);
  line-height: 1;
  color: var(--brand-ink);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}

.acronym__word {
  grid-area: 1 / 1;
  font-size: clamp(0.78rem, 1.5vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-accent-bright);
  white-space: nowrap;
}

/* The word settles out of a wider tracking as it arrives. */
@media (prefers-reduced-motion: no-preference) {
  .acronym__item[data-reveal] .acronym__letter {
    opacity: 0;
    transform: scale(0.86);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    transition-delay: calc(var(--reveal-delay, 0ms) + 120ms);
  }

  .acronym__item[data-revealed="true"] .acronym__letter {
    opacity: 0.07;
    transform: none;
  }

  .acronym__item[data-reveal] .acronym__word {
    opacity: 0;
    transform: translateY(6px);
    letter-spacing: 0.3em;
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease),
      letter-spacing 0.7s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .acronym__item[data-revealed="true"] .acronym__word {
    opacity: 1;
    transform: none;
    letter-spacing: 0.1em;
  }
}

/* ==========================================================================
   Meaning and values
   ========================================================================== */

.meanings {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.75rem, 3vw, 2.5rem);
  list-style: none;
  margin: 0 0 clamp(2.5rem, 6vw, 4rem);
  padding: 0 0 clamp(1.75rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.meanings li {
  position: relative;
  isolation: isolate;
  margin: 0;
  padding-inline: clamp(0.5rem, 2vw, 1.75rem);
  font-size: clamp(1.15rem, 2.6vw, 1.85rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-accent-light);
}

/* The mark, drained to grey, standing behind each reading of the name. */
.meanings li::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -58%;
  width: clamp(5.5rem, 9vw, 8rem);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  background: url("/static/img/logo-mark.6ce75dd3.png") no-repeat center / contain;
  filter: grayscale(1);
  opacity: 0.16;
}

/* The meanings are additive, not alternatives — the group is all three. */
.meanings li + li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 50%;
  translate: -50% -50%;
  font-size: 0.7em;
  font-weight: 300;
  color: var(--line-strong);
}

.values-head {
  text-align: center;
  max-width: none;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.values-head h3 {
  font-family: var(--font-sans);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Gold, as the group sets this heading in its own material. It is the one
     place the highlight carries type; see the note in tokens.css. */
  color: var(--highlight);
  margin-bottom: 0.4rem;
}

.values-head p {
  margin: 0;
  color: var(--text-muted);
}

.value-discs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.value-discs li {
  display: grid;
  justify-items: center;
  gap: 1rem;
  margin: 0;
}

.value-disc {
  display: grid;
  place-items: center;
  width: clamp(7rem, 13vw, 9.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 25%, #3fb6ec 0%, #0f8fd0 60%, #0d7cb8 100%);
  color: #fff;
  font-size: clamp(0.8rem, 1.4vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(15, 143, 208, 0.22);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.value-discs li:hover .value-disc {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(15, 143, 208, 0.3);
}

.value-discs p {
  margin: 0;
  max-width: 22ch;
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* The disc scales up, then its line follows. */
@media (prefers-reduced-motion: no-preference) {
  .value-discs li[data-reveal] .value-disc {
    opacity: 0;
    transform: scale(0.82);
    transition: opacity 0.55s var(--ease),
      transform 0.65s cubic-bezier(0.22, 1.2, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .value-discs li[data-revealed="true"] .value-disc {
    opacity: 1;
    transform: none;
  }

  .value-discs li[data-reveal] p {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
    transition-delay: calc(var(--reveal-delay, 0ms) + 160ms);
  }

  .value-discs li[data-revealed="true"] p {
    opacity: 1;
    transform: none;
  }
}