/* ==========================================================================
   About page — assets/about.css
   Page-specific layout for about.html / about-ar.html. Loads after home.css,
   which supplies the shared primitives (.hm-wrap, .hm-eyebrow, .hm-title,
   .hm-lede, .hm-btn*, .hm-link, .hm-section*, .hm-cta*, .rv). Everything
   here is prefixed .ab- and uses logical properties for RTL.
   ========================================================================== */

/* --- Statement hero (white) ------------------------------------------------- */

.ab-hero {
  padding-top: clamp(9rem, 16vh, 12rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: var(--bg-primary);
}

.ab-crumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
}
.ab-crumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.3s ease;
}
.ab-crumb a:hover { color: var(--accent-gold); }
.ab-crumb span[aria-current] { color: var(--accent-gold); }
.ab-crumb .sep { opacity: 0.5; }

.ab-hero-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.ab-hero h1 {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(2.5rem, 5.6vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  text-wrap: balance;
  max-width: 16ch;
}

.ab-hero h1 em {
  font-style: normal;
  color: var(--accent-gold);
}

.ab-hero .hm-lede {
  margin-top: 1.5rem;
  max-width: 32rem;
}

.ab-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.25rem;
}

/* Two overlapping photographs. The main one is a portrait; the second sits
   over its lower start corner. */
.ab-collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  aspect-ratio: 4 / 4.6;
  max-width: 34rem;
  margin-inline: auto;
}

.ab-collage figure {
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-secondary);
}

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

.ab-collage-main {
  grid-column: 3 / 13;
  grid-row: 1 / 11;
  box-shadow: var(--shadow-card);
}

.ab-collage-second {
  grid-column: 1 / 8;
  grid-row: 7 / 13;
  box-shadow: var(--shadow-card-hover);
  border: 6px solid var(--bg-primary);
  z-index: 1;
}

.ab-collage-tag {
  display: none;
  position: absolute;
  inset-inline-end: 0;
  bottom: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  writing-mode: vertical-rl;
}
[dir="rtl"] .ab-collage-tag { writing-mode: vertical-rl; }

@media (min-width: 900px) {
  .ab-hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 4rem;
  }
  .ab-collage { margin-inline: 0 0 0 auto; }
  .ab-collage-tag { display: block; }
  [dir="rtl"] .ab-collage { margin-inline: auto 0 0 0; }
}

/* --- Facts band --------------------------------------------------------------- */

.ab-facts {
  background: var(--bg-secondary);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  padding-block: clamp(2rem, 4vw, 3rem);
  contain-intrinsic-size: 0 220px;
}

.ab-facts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 1.5rem;
}

.ab-fact {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-inline-start: 1rem;
  border-inline-start: 1px solid var(--rule-strong);
}

.ab-fact-num {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1;
  color: var(--text-primary);
}
.ab-fact-num b {
  font-weight: 300;
  color: var(--accent-gold);
}

.ab-fact-label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (min-width: 760px) {
  .ab-facts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
}

/* --- Story ----------------------------------------------------------------------- */

.ab-story {
  display: grid;
  gap: 2.5rem;
}

.ab-quote {
  margin: 2rem 0 0;
  padding-inline-start: 1.25rem;
  border-inline-start: 2px solid var(--accent-gold-bright);
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.4;
  color: var(--text-primary);
  text-wrap: balance;
}

.ab-story-body p {
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.8;
  color: var(--text-secondary);
}
.ab-story-body p + p { margin-top: 1.25rem; }
.ab-story-body p:first-child::first-letter {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 3.4em;
  line-height: 0.8;
  float: inline-start;
  padding-inline-end: 0.12em;
  padding-top: 0.08em;
  color: var(--accent-gold);
}
[dir="rtl"] .ab-story-body p:first-child::first-letter { font-size: 1em; float: none; padding: 0; color: inherit; }

.ab-story-visual {
  margin: 2.5rem 0 0;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bg-secondary);
}
.ab-story-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 900px) {
  .ab-story {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 5rem;
    align-items: start;
  }
  .ab-story-intro { position: sticky; top: 8rem; }
}

/* --- Principles ------------------------------------------------------------------- */

.ab-principles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.ab-principle {
  background: var(--bg-primary);
  border: 1px solid var(--rule-soft);
  border-radius: var(--hm-radius);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.6s var(--hm-ease), box-shadow 0.6s ease;
}
.ab-principle:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.ab-principle-num {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 2rem;
  line-height: 1;
  color: var(--accent-gold);
  margin-bottom: 0.5rem;
}

.ab-principle h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--text-primary);
}

.ab-principle p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

@media (min-width: 640px) {
  .ab-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (min-width: 1100px) {
  .ab-principles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ab-principle { padding: 2rem 1.75rem; }
}

/* --- What we do (list) ------------------------------------------------------------- */

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

.ab-service {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  grid-template-areas:
    "num title arrow"
    ".   desc  .";
  gap: 0.35rem 1rem;
  align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: padding-inline-start 0.5s var(--hm-ease);
}
.ab-service:hover { padding-inline-start: 0.5rem; }

.ab-service-num {
  grid-area: num;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--accent-gold);
}

.ab-service h3 {
  grid-area: title;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--text-primary);
  transition: color 0.3s ease;
}
.ab-service:hover h3 { color: var(--accent-gold); }

.ab-service p {
  grid-area: desc;
  margin-top: 0.3rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.ab-service .hm-arrow {
  grid-area: arrow;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--accent-gold);
  transition: transform 0.5s var(--hm-ease);
}
.ab-service:hover .hm-arrow { transform: translateX(4px); }
[dir="rtl"] .ab-service:hover .hm-arrow { transform: scaleX(-1) translateX(4px); }

@media (min-width: 900px) {
  .ab-service {
    grid-template-columns: 3.5rem minmax(0, 18rem) minmax(0, 1fr) auto;
    grid-template-areas: "num title desc arrow";
    padding: 2rem 0;
  }
  .ab-service p { margin-top: 0; }
  .ab-service h3 { font-size: 1.4rem; }
}

/* --- Where we work --------------------------------------------------------------- */

.ab-where {
  display: grid;
  gap: 2.5rem;
}

.ab-cities {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.ab-city {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
}

.ab-city-name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--text-primary);
}
.ab-city-name small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-inline-start: 0.6rem;
}

.ab-city-count {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
}

.ab-address {
  font-style: normal; /* <address> defaults to italic */
  margin-top: 1.75rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-light);
}
.ab-address strong {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-gold);
  font-weight: 500;
  margin-bottom: 0.3rem;
}

.ab-map {
  border-radius: var(--hm-radius);
  overflow: hidden;
  border: 1px solid var(--rule);
  aspect-ratio: 4 / 3;
  background: var(--bg-primary);
  min-height: 18rem;
}
.ab-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(100%) contrast(0.95);
}

@media (min-width: 900px) {
  .ab-where {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 5rem;
    align-items: stretch;
  }
  .ab-map { aspect-ratio: auto; height: 100%; }
}

/* --- Motion preferences ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .ab-principle, .ab-service, .ab-service .hm-arrow { transition: none; }
}