/* ==========================================================================
   LawFiq — Homepage
   Section rhythm: navy hero → paper situations → mist pathways → navy why
   → paper process → mist team → navy CTA → deep-navy footer.
   Logical properties only.
   ========================================================================== */

/* .section / .section__head / .cta-band moved to components.css —
   they are shared by every page, not just the homepage. */

/* --------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------- */
.hero {
  position: relative;
  background-color: var(--color-navy);
  --focus-color: var(--color-gold-bright);
  color: var(--color-on-navy);
  overflow: hidden;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  column-gap: clamp(3rem, 2rem + 4vw, 6rem);
  padding-block: clamp(4rem, 3rem + 4vw, 7rem);
}

.hero__content {
  max-inline-size: 46rem;
}

/* The photograph sits in a plaque-style mat: one gold rule, honest
   margins — the logo's construction applied to imagery. */
.hero__media {
  margin: 0;
  border: var(--hairline) solid var(--color-gold-bright);
  padding: clamp(0.625rem, 0.5rem + 0.5vw, 1rem);
}

.hero__media img {
  inline-size: 100%;
  block-size: auto;
}

@media (max-width: 899px) {
  .hero__grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-10);
    padding-block: clamp(3.5rem, 3rem + 3vw, 5rem);
  }
}

.hero .eyebrow {
  color: var(--color-gold-bright);
  margin-block-end: var(--space-5);
}

.hero__title {
  color: #FFFFFF;
  font-size: var(--text-display);
  margin-block-end: var(--space-6);
}

.hero__lead {
  color: var(--color-on-navy-muted);
  font-size: var(--text-lg);
  max-inline-size: 33rem;
  margin-block-end: var(--space-10);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-end: var(--space-10);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  color: var(--color-on-navy-muted);
}

.hero__meta .dot {
  inline-size: 4px;
  block-size: 4px;
  background-color: var(--color-gold-bright);
}

/* Girih lattice — the one decorative moment on the page */
.hero__lattice {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(44%, 620px);
  color: var(--color-gold-bright);
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to left, #000 35%, transparent 96%);
  mask-image: linear-gradient(to left, #000 35%, transparent 96%);
  pointer-events: none;
}

html[dir="rtl"] .hero__lattice {
  -webkit-mask-image: linear-gradient(to right, #000 35%, transparent 96%);
  mask-image: linear-gradient(to right, #000 35%, transparent 96%);
}

.hero__lattice svg {
  inline-size: 100%;
  block-size: 100%;
}

@media (max-width: 899px) {
  .hero__lattice {
    display: none;
  }
}

/* --------------------------------------------------------------------
   Situations — "What brings you here?"
   -------------------------------------------------------------------- */
.situations__list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-16);
}

@media (max-width: 767px) {
  .situations__list {
    grid-template-columns: 1fr;
  }
}

.situation-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-block-end: var(--hairline) solid var(--color-hairline);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-navy);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.situation-link::after {
  content: "\2192";
  flex-shrink: 0;
  font-family: var(--font-sans);
  color: var(--color-gold);
  transition: transform var(--duration-base) var(--ease-out);
}

html[dir="rtl"] .situation-link::after {
  content: "\2190";
}

.situation-link:hover {
  color: var(--color-action);
}

.situation-link:hover::after {
  transform: translateX(4px);
}

html[dir="rtl"] .situation-link:hover::after {
  transform: translateX(-4px);
}

/* --------------------------------------------------------------------
   Pathways — Families / Business (+ Institutions, secondary)
   -------------------------------------------------------------------- */
.paths {
  background-color: var(--color-mist);
}

.paths__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

@media (max-width: 899px) {
  .paths__grid {
    grid-template-columns: 1fr;
  }
}

.path-card {
  background-color: var(--color-paper);
  border: var(--hairline) solid var(--color-hairline);
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  display: flex;
  flex-direction: column;
}

.path-card .eyebrow {
  margin-block-end: var(--space-4);
}

.path-card h3 {
  margin-block-end: var(--space-3);
}

.path-card__promise {
  color: var(--color-ink-muted);
  margin-block-end: var(--space-6);
}

.path-card__services {
  list-style: none;
  padding: 0;
  margin-block-end: var(--space-8);
}

.path-card__services li {
  padding-block: var(--space-3);
  border-block-end: var(--hairline) solid var(--color-hairline);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
}

.path-card__cta {
  margin-block-start: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 44px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-action);
  text-decoration: none;
}

.path-card__cta::after {
  content: "\2192";
  transition: transform var(--duration-base) var(--ease-out);
}

html[dir="rtl"] .path-card__cta::after {
  content: "\2190";
}

.path-card__cta:hover {
  color: var(--color-action-deep);
}

.path-card__cta:hover::after {
  transform: translateX(4px);
}

html[dir="rtl"] .path-card__cta:hover::after {
  transform: translateX(-4px);
}

/* Institutions — visible, deliberately secondary */
.institutions-strip {
  margin-block-start: var(--space-8);
  border: var(--hairline) solid var(--color-hairline);
  padding: var(--space-6) clamp(1.25rem, 1rem + 1.5vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.institutions-strip p {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  max-inline-size: 46rem;
}

.institutions-strip p strong {
  color: var(--color-navy);
  font-weight: 600;
}

.institutions-strip a {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: var(--text-sm);
  font-weight: 600;
}

/* --------------------------------------------------------------------
   Why LawFiq — "Madinah meets Oxford", the navy authority section.
   One editorial composition that mirrors the hero: the photograph on the
   start side in the gold plaque mat, the words on the end side. The
   phrase is the headline; the Islamic cue is the girih light inside the
   photograph, never a literal building, crest or script.
   -------------------------------------------------------------------- */
.why {
  background-color: var(--color-navy);
  --focus-color: var(--color-gold-bright);
  color: var(--color-on-navy);
}

.why__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: center;
  column-gap: clamp(3rem, 2rem + 4vw, 6rem);
}

/* Same plaque mat as the hero photograph */
.why__media {
  margin: 0;
  border: var(--hairline) solid var(--color-gold-bright);
  padding: clamp(0.625rem, 0.5rem + 0.5vw, 1rem);
}

.why__media img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.why__content {
  max-inline-size: 40rem;
}

.why .eyebrow {
  color: var(--color-gold-bright);
  margin-block-end: var(--space-5);
}

.why__title {
  color: #FFFFFF;
  font-size: var(--text-display);
  margin-block-end: var(--space-6);
}

/* "meets" carries the idea: the one word set in gold italic */
.why__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-gold-bright);
}

html[lang="ar"] .why__title em {
  font-style: normal; /* Amiri has no italic; colour alone carries the stress */
}

.why__lead {
  color: var(--color-on-navy-muted);
  font-size: var(--text-lg);
  max-inline-size: 33rem;
  margin-block-end: var(--space-10);
}

/* Three proof points as a ledger: title beside sentence, hairline rows */
.why__ledger {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  border-block-start: var(--hairline) solid var(--color-gold-bright);
}

.why__ledger li {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  column-gap: var(--space-8);
  padding-block: var(--space-5);
  border-block-end: var(--hairline) solid var(--color-hairline-navy);
}

.why__ledger h3 {
  color: #FFFFFF;
  font-size: var(--text-lg);
  margin: 0;
}

.why__ledger p {
  color: var(--color-on-navy-muted);
  font-size: var(--text-md);
  margin: 0;
}

.why__note {
  color: var(--color-on-navy-muted);
  font-size: var(--text-sm);
  max-inline-size: 36rem;
}

@media (max-width: 899px) {
  .why__grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-8);
  }

  /* On one column the photograph sits directly under the headline:
     the content wrapper dissolves so its children can be ordered. */
  .why__content {
    display: contents;
  }

  .why .eyebrow {
    margin-block-end: var(--space-4);
  }

  .why__title {
    margin-block-end: 0;
  }

  .why__media {
    order: 1;
  }

  .why__lead,
  .why__ledger,
  .why__note {
    order: 2;
  }

  .why__lead {
    margin-block-end: var(--space-2);
  }

  .why__ledger {
    margin-block-end: 0;
  }
}

/* Narrow text columns (phones, and the two-column layout between 900 and
   1099px) stack each proof point: title above sentence. */
@media (max-width: 599px), (min-width: 900px) and (max-width: 1099px) {
  .why__ledger li {
    grid-template-columns: 1fr;
    row-gap: var(--space-2);
  }
}

/* Motion: the photograph settles into its mat when it scrolls into view
   (the hero's settle, but on reveal since this sits below the fold);
   the ledger rows use the shared staggered reveal. Headline and lead
   are never animated. Reduced motion: nothing here applies. */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .why__media[data-reveal] {
    transform: scale(1.025);
    transition: opacity 820ms var(--ease-out),
                transform 820ms var(--ease-out);
  }

  .js-motion .why__media[data-reveal].is-revealed {
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------
   How it works — the one legitimately numbered sequence
   -------------------------------------------------------------------- */
.how__grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-10);
}

@media (max-width: 767px) {
  .how__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.how__step {
  border-block-start: var(--hairline) solid var(--color-hairline);
  padding-block-start: var(--space-6);
}

.how__num {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-gold);
  margin-block-end: var(--space-4);
}

.how__step h3 {
  font-size: var(--text-xl);
  margin-block-end: var(--space-3);
}

.how__step p {
  color: var(--color-ink-muted);
  font-size: var(--text-md);
}

/* --------------------------------------------------------------------
   Team — real people only: name, role, one credibility line, and a link
   to the full profiles on the About page (no duplicated biographies).
   -------------------------------------------------------------------- */
.team {
  background-color: var(--color-mist);
}

.team__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12) var(--space-16);
}

@media (max-width: 767px) {
  .team__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

.team-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
}

.team-card__photo {
  inline-size: clamp(104px, 9vw + 72px, 150px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  flex-shrink: 0;
  background-color: var(--color-hairline);
}

.team-card h3 {
  font-size: var(--text-lg);
  margin-block-end: var(--space-2);
}

.team-card__role {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-gold-ink);
  margin-block-end: var(--space-3);
}

.team-card__bio {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.team__more {
  margin-block-start: var(--space-10);
  font-size: var(--text-sm);
  font-weight: 600;
}

.team__more a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

/* The booking section (.book, .book-form, chips, fields, validation)
   moved to forms.css — it is shared by the homepage and the Contact page. */