/* ─── About page — scoped styles ────────────────────────────────────────────
   Relies on style.css for: .navbar, .final-cta__*, .site-footer__* shared tokens.
   Everything here is prefixed .abt- to avoid collisions.
──────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Rothefight';
  src: url('assets/fonts/ROTHEFIGHT.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* Accent palette — lifted directly from the home page's reviews__center-blob
   (periwinkle/rose/violet/cyan) so this page reads as the same brand, not a
   new one. Kept off gold/caramel on purpose. */
:root {
  --abt-blue:   #4f7dff;
  --abt-violet: #9b6bff;
  --abt-pink:   #ff4fa3;
  --abt-cyan:   #2fc2e8;
}

.abt-hero,
.abt-section,
.abt-story,
.abt-stats,
.abt-team,
.final-cta {
  font-family: 'Inter', sans-serif;
}

/* ─── Hero: photo, darkened, heading on top ─────────────────────────────── */

.abt-hero {
  position: relative;
  /* Runs full-bleed behind the fixed navbar (body has no top padding on this
     page) — extra height keeps plenty of photo visible below the overlap. */
  height: clamp(420px, 48vw, 620px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('assets/images/hero/aerial-drone-real-estate-photography-wooded-neighborhood-about-hero.jpg');
  background-size: cover;
  /* Bottom-anchored: crops from the top first, keeps the bottom of the
     photo (the house and driveway) always in frame at any viewport size. */
  background-position: center bottom;
  overflow: hidden;
}

/* Dark wash over the photo so it reads as moody background texture and the
   white heading stays legible on top of it. */
.abt-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(17, 15, 14, 0.52);
}

.abt-hero__heading {
  position: relative;
  z-index: 1;
  font-family: 'Rothefight', sans-serif;
  font-weight: normal;
  font-size: clamp(64px, 15vw, 180px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0;
  user-select: none;
}

/* ─── Shared section shell ───────────────────────────────────────────────── */

.abt-section {
  position: relative;
  background: #fff;
  padding: calc(3vw + 24px) 24px;
}

.abt-section__eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #2e2c2c;
  opacity: 0.4;
  margin-bottom: 1.25rem;
  text-align: center;
}

.abt-section__heading {
  position: relative;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(1.9rem, 3.2vw, 3.2rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #2e2c2c;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3.5rem;
}

/* ─── Story ──────────────────────────────────────────────────────────────── */

.abt-story {
  padding: calc(4vw + 32px) 24px;
}

.abt-story__wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.abt-story__image-wrap {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.abt-story__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.abt-story__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #2e2c2c;
  opacity: 0.4;
  margin-bottom: 1.5rem;
}

.abt-story__heading {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(2rem, 2.8vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #2e2c2c;
  margin-bottom: 2rem;
}

.abt-story__body {
  font-size: 0.975rem;
  line-height: 1.8;
  color: #2e2c2c;
  opacity: 0.62;
  margin-bottom: 1.1rem;
}

/* ─── Values grid ────────────────────────────────────────────────────────── */

.abt-values__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.abt-value-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 0;
  border: 1px solid #1a1a1a;
  padding: 2rem 1.75rem;
  transition: transform 0.25s ease;
}

.abt-value-card:hover {
  transform: translateY(-3px);
}

.abt-value-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1a1a1a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

/* Black-and-white badge to match the checklist icon style; the accent
   palette moves to a glow behind the badge instead of tinting it. */
.abt-value-card__icon--blue   { box-shadow: 0 0 0 6px rgba(79, 125, 255, 0.18), 0 8px 24px -6px rgba(79, 125, 255, 0.65); }
.abt-value-card__icon--violet { box-shadow: 0 0 0 6px rgba(155, 107, 255, 0.18), 0 8px 24px -6px rgba(155, 107, 255, 0.65); }
.abt-value-card__icon--pink   { box-shadow: 0 0 0 6px rgba(255, 79, 163, 0.18), 0 8px 24px -6px rgba(255, 79, 163, 0.65); }
.abt-value-card__icon--cyan   { box-shadow: 0 0 0 6px rgba(47, 194, 232, 0.18), 0 8px 24px -6px rgba(47, 194, 232, 0.65); }

.abt-value-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #2e2c2c;
  margin-bottom: 0.6rem;
}

.abt-value-card__body {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #2e2c2c;
  opacity: 0.6;
}

/* ─── Stat strip ─────────────────────────────────────────────────────────── */

.abt-stats {
  background: #fff;
}

.abt-stats__row {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.abt-stat {
  text-align: center;
  padding: 0 1.5rem;
  border-left: 1px solid rgba(46, 44, 44, 0.1);
}

.abt-stat:first-child { border-left: none; }

.abt-stat__num {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  letter-spacing: -0.02em;
  color: #2e2c2c;
  line-height: 1;
  margin-bottom: 0.6rem;
}

.abt-stat__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2e2c2c;
  opacity: 0.45;
}

/* Topographic-line texture — moved here from the (now-removed) "How It
   Works" section per feedback. Opacity/stroke pushed way up from the
   original barely-there pass so it actually reads as a pattern behind the
   value cards, not just texture. */
/* No overflow:hidden here on purpose — top is a negative offset so the
   pattern bleeds up into the Story section above instead of getting a hard
   clipped edge at this section's boundary. */
.abt-section--values::before {
  content: '';
  position: absolute;
  top: -22%;
  left: 0;
  right: 0;
  width: 100%;
  height: clamp(420px, 44vw, 620px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 580' fill='none'%3E%3Cg stroke='%232e2c2c'%3E%3Cpath stroke-width='1.5' stroke-opacity='0.05' d='M-80 90 C 300 10, 560 10, 760 70 S 1180 130, 1400 50 S 1600 20, 1680 80'/%3E%3Cpath stroke-width='1.8' stroke-opacity='0.06' d='M-80 170 C 320 90, 580 90, 780 150 S 1200 210, 1420 130 S 1620 100, 1700 160'/%3E%3Cpath stroke-width='2.1' stroke-opacity='0.08' d='M-80 240 C 340 160, 600 160, 800 220 S 1220 280, 1440 200 S 1640 170, 1700 230'/%3E%3Cpath stroke-width='2.4' stroke-opacity='0.095' d='M-80 310 C 360 230, 620 230, 820 290 S 1240 350, 1460 270 S 1650 240, 1700 300'/%3E%3Cpath stroke-width='2.8' stroke-opacity='0.11' d='M-80 380 C 380 300, 640 300, 840 360 S 1260 420, 1480 340 S 1660 310, 1700 370'/%3E%3Cpath stroke-width='3.2' stroke-opacity='0.125' d='M-80 450 C 400 370, 660 370, 860 430 S 1280 490, 1500 410 S 1670 380, 1700 440'/%3E%3Cpath stroke-width='3.6' stroke-opacity='0.14' d='M-80 520 C 420 440, 680 440, 880 500 S 1300 560, 1520 480 S 1680 450, 1700 510'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
}

.abt-section--values > * {
  position: relative;
  z-index: 1;
}

/* ─── Team + Final CTA zone ──────────────────────────────────────────────────
   Wraps both sections (see about.html) so the blob below can bleed from Team
   down across the section boundary into the CTA — same technique as style.css's
   .work-reviews-zone, which wraps Our Work + Reviews on the home page for the
   same reason. clip-path (not overflow:hidden) clips the zone normally on
   top/left/right but leaves the bottom wide open, so it doesn't clip the CTA's
   own negative-margin image/footer bleed defined in style.css. */
.abt-team-cta-zone {
  position: relative;
  background: #fff;
  z-index: 0;
  clip-path: inset(0 0 -400px 0);
}

/* Blue/pink/violet blob — same palette as the home page's reviews__center-blob.
   Dialed back to roughly the midpoint between the original barely-there pass
   and the too-strong one that followed it. Sized with a fixed clamp (not a
   percentage of this element) so it stays anchored to the Team section
   regardless of how tall the CTA below it is. */
.abt-team-cta-zone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(520px, 58vw, 820px);
  z-index: 0;
  filter: blur(65px);
  pointer-events: none;
  background:
    radial-gradient(ellipse 44% 60% at 50% 44%, rgba(110, 140, 255, 0.36) 0%, transparent 68%),
    radial-gradient(ellipse 32% 42% at 26% 66%, rgba(255,  90, 160, 0.30) 0%, transparent 65%),
    radial-gradient(ellipse 30% 40% at 74% 36%, rgba(180, 100, 255, 0.29) 0%, transparent 64%),
    radial-gradient(ellipse 26% 32% at 68% 74%, rgba( 70, 195, 245, 0.24) 0%, transparent 60%);
}

.abt-team-cta-zone > * {
  position: relative;
  z-index: 1;
}

/* ─── Team ───────────────────────────────────────────────────────────────── */

.abt-team {
  background: transparent;
}

.abt-team__grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}

.abt-team-card {
  text-align: center;
}

.abt-team-card__avatar {
  width: 84px;
  height: 84px;
  border-radius: 24px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  overflow: hidden;
}

/* Real headshot instead of initials */
.abt-team-card__avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.abt-team-card__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #2e2c2c;
  margin-bottom: 0.25rem;
}

.abt-team-card__role {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2e2c2c;
  opacity: 0.45;
}

/* ─── Final CTA ──────────────────────────────────────────────────────────── */
/* Transparent, not #fff — this section is inside .abt-team-cta-zone now, so
   an opaque background here would repaint over the blob bleeding down from
   Team and hide it. The zone itself supplies the white backdrop. */
.final-cta {
  background: transparent;
}

/* Shared .final-cta__heading is white-space: nowrap by default (fine for the
   short strings other pages use). Our heading is longer, so allow it to wrap
   instead of forcing horizontal overflow on narrow viewports. */
.final-cta__heading {
  white-space: normal;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .abt-story__wrap {
    grid-template-columns: 1fr;
  }
  .abt-story__image-wrap {
    aspect-ratio: 16 / 9;
  }
  .abt-values__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .abt-team__grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 2rem;
  }
  .abt-process__grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

@media (max-width: 560px) {
  .abt-values__grid {
    grid-template-columns: 1fr;
  }
  .abt-stats__row {
    grid-template-columns: 1fr;
    row-gap: 2rem;
    padding: 2.5rem 2rem;
  }
  .abt-stat {
    border-left: none;
    padding: 0;
  }
  .abt-team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .abt-section__heading {
    margin-bottom: 2.5rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   RTL OVERRIDES — Arabic (applied when <html dir="rtl">)
   ───────────────────────────────────────────────────────────────────────────── */

[dir="rtl"] .abt-hero__heading {
  font-family: 'Noto Naskh Arabic', serif;
  font-size: clamp(2.4rem, 8vw, 6rem);
  letter-spacing: 0;
}