/* =====================================================================
   ABOUT US — resources/views/frontend/about.blade.php

   Its own sheet, under the .abx- prefix, for two reasons: the old .ab-
   rules in style.css are no longer used by this page and are left alone
   (several sessions edit that file at once), and a page this long is
   easier to reason about when all of it sits together.

   Colours come from the site's tokens, so this page follows the theme
   and the dark mode without a rule of its own: white ground, #F4F6F7
   panels, #E3E9EC hairlines, navy #2e4755, gold #BD830D.

   Buttons follow the site's button rule — gold for the action we want,
   navy for "talk to us" — and carry data-kx-skip in the markup so
   js/buttons.js leaves them as one matched set.
   ===================================================================== */

.abx {
  --abx-ink: var(--ink, #1f3441);
  --abx-muted: var(--text-2, #5f7380);
  --abx-line: var(--border, rgba(46, 71, 85, .12));
  --abx-panel: var(--surface-2, #f4f6f7);
  --abx-navy: var(--primary, #2e4755);
  --abx-gold: var(--gold, #bd830d);
  --abx-gap: clamp(28px, 5vw, 64px);

  color: var(--abx-ink);
  background: var(--surface, #fff);
}

/* The page's own rhythm: every band breathes the same amount. */
.abx > section { padding: clamp(48px, 7vw, 104px) 0; }
.abx > section + section { padding-top: 0; }
.abx-quote, .abx-story, .abx-reviews { padding-top: clamp(48px, 7vw, 104px) !important; }

/* ------------------------------------------------------- shared bits --- */

.abx-eyebrow {
  display: block;
  margin-bottom: 10px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--abx-gold);
}

.abx-h2 {
  margin: 0 0 14px;
  font-family: var(--font-head, system-ui);
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -.01em;
}
.abx-h2 em { font-style: normal; color: var(--abx-gold); }

.abx-h3 {
  margin: 0 0 12px;
  font-family: var(--font-head, system-ui);
  font-size: clamp(1.22rem, 2.2vw, 1.6rem);
  line-height: 1.2;
  font-weight: 700;
}
/* *words* marked in the CMS read as gold emphasis here, not as italics —
   the same treatment .abx-h2 gives them, so the brand name looks the same
   whichever heading it lands in. */
.abx-h3 em { font-style: normal; color: var(--abx-gold); }

.abx-copy {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.72;
  color: var(--abx-muted);
}

.abx-head { margin-bottom: clamp(26px, 4vw, 48px); }
.abx-head--center { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.abx-head__sub { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--abx-muted); }

/* ----------------------------------------------------------- buttons --- */

.abx-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.abx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.abx-btn svg { width: 17px; height: 17px; flex: none; }

.abx-btn--gold { background: var(--abx-gold); color: #fff; }
.abx-btn--gold:hover { background: #a8740b; color: #fff; }

.abx-btn--navy { background: var(--abx-navy); color: #fff; }
.abx-btn--navy:hover { background: var(--primary-deep, #223a48); color: #fff; }

.abx-btn:focus-visible { outline: 3px solid rgba(189, 131, 13, .55); outline-offset: 2px; }

/* ====================================================== 1. THE HERO === */

.abx-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abx-gap);
  align-items: center;
}

.abx-hero__title {
  margin: 0 0 14px;
  font-family: var(--font-head, system-ui);
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: .98;
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.abx-hero__kicker {
  margin: 0 0 18px;
  max-width: 44ch;
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  line-height: 1.5;
  font-weight: 600;
}

.abx-hero__copy { margin: 0; font-size: 1rem; line-height: 1.74; color: var(--abx-muted); }

.abx-hero__media {
  margin: 0;
  border-radius: var(--radius-lg, 22px);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--abx-panel);
}
.abx-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ================================================= 2. WHO WE ARE ===== */

.abx-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abx-gap);
  align-items: start;
}

/* The right column starts lower than the left, which is what stops the
   two from reading as one flat row of boxes. */
.abx-col--offset { padding-top: clamp(0px, 5vw, 72px); }

.abx-shot {
  margin: 0 0 22px;
  border-radius: var(--radius-lg, 22px);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--abx-panel);
}
.abx-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.abx-ticks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 11px; }
.abx-ticks li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: .96rem;
  line-height: 1.55;
}
.abx-tick {
  flex: none;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--abx-navy);
  color: #fff;
}
.abx-tick svg { width: 11px; height: 11px; }

.abx-statement {
  margin: 26px 0 0;
  padding-left: 18px;
  border-left: 3px solid var(--abx-gold);
  font-family: var(--font-head, system-ui);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.3;
  font-weight: 700;
}
.abx-statement em { font-style: normal; color: var(--abx-gold); }

/* =================================================== 3. OUR EXPERTS == */

.abx-team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}

.abx-person {
  background: var(--surface, #fff);
  border: 1px solid var(--abx-line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .22s var(--ease, ease), box-shadow .22s var(--ease, ease);
}
.abx-person:hover { transform: translateY(-4px); box-shadow: var(--shadow-md, 0 18px 44px rgba(46, 71, 85, .18)); }

.abx-person__media { aspect-ratio: 3 / 4; background: var(--abx-panel); }
.abx-person__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.abx-person__body { padding: 16px 18px 20px; }
.abx-person__body h3 { margin: 0 0 4px; font-size: 1.02rem; font-weight: 700; line-height: 1.25; }
.abx-person__role { margin: 0; font-size: .84rem; font-weight: 600; color: var(--abx-gold); }
.abx-person__bio { margin: 9px 0 0; font-size: .86rem; line-height: 1.55; color: var(--abx-muted); }

/* ==================================================== 4. THE QUOTE === */

.abx-quote {
  position: relative;
  isolation: isolate;
  min-height: clamp(320px, 42vw, 480px);
  display: grid;
  align-items: center;
  overflow: hidden;
  color: #fff;
}
.abx-quote__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Dark enough that white words are readable over any photograph the
   owner swaps in, which a lighter scrim would not survive. */
.abx-quote::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(20, 34, 43, .88) 0%, rgba(20, 34, 43, .7) 55%, rgba(20, 34, 43, .45) 100%);
}

.abx-quote__inner { max-width: 760px; }
.abx-quote__mark { width: 44px; height: 44px; color: var(--abx-gold); margin-bottom: 14px; }

.abx-quote__text {
  margin: 0 0 20px;
  font-family: var(--font-head, system-ui);
  font-size: clamp(1.3rem, 3vw, 2.1rem);
  line-height: 1.3;
  font-weight: 700;
  color: #fff;
}

.abx-quote__by { margin: 0; font-size: .95rem; line-height: 1.5; }
.abx-quote__by b { display: block; font-weight: 700; }
.abx-quote__by span { color: rgba(255, 255, 255, .78); }

/* =================================================== 5. OUR STORY ==== */

.abx-time { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: clamp(26px, 4vw, 56px); }

/* The line the chapters hang off. Hidden on one column, where it would
   run down the middle of the cards instead of between them. */
.abx-time::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: repeating-linear-gradient(to bottom, var(--abx-line) 0 8px, transparent 8px 16px);
}

.abx-time__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abx-gap);
  align-items: center;
}
.abx-time__row--flip .abx-time__card { order: 2; }

.abx-time__card {
  position: relative;
  isolation: isolate;
  min-height: 190px;
  display: grid;
  place-items: center;
  padding: 26px;
  border-radius: var(--radius-lg, 22px);
  overflow: hidden;
  background: var(--abx-panel);
}
.abx-time__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.abx-time__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(20, 34, 43, .62);
}

.abx-time__era {
  font-family: var(--font-head, system-ui);
  font-size: clamp(1.3rem, 3vw, 2.1rem);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  color: #fff;
  letter-spacing: -.01em;
}

.abx-time__text h3 { margin: 0 0 9px; font-family: var(--font-head, system-ui); font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 700; line-height: 1.25; }
.abx-time__text p { margin: 0; font-size: .98rem; line-height: 1.7; color: var(--abx-muted); }

/* ============================================= 6. WHERE TO FIND US === */

.abx-visit { text-align: center; }

.abx-visit__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--abx-line);
  border: 1px solid var(--abx-line);
  border-radius: var(--radius-lg, 22px);
  overflow: hidden;
}

.abx-visit__item { padding: clamp(20px, 2.6vw, 30px) 20px; background: var(--surface, #fff); }
.abx-visit__item h3 {
  margin: 0 0 9px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--abx-gold);
}
.abx-visit__item p { margin: 0; font-size: .96rem; line-height: 1.65; }
.abx-visit__item a { color: inherit; text-decoration: none; }
.abx-visit__item a:hover { text-decoration: underline; }
.abx-visit__note { font-size: .86rem; color: var(--abx-muted); }

.abx-visit__cta { margin-top: clamp(24px, 3vw, 36px); }

/* ===================================================== 7. REVIEWS ==== */

.abx-reviews { background: var(--abx-panel); }

.abx-score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 clamp(26px, 3.5vw, 42px);
  font-size: .95rem;
  color: var(--abx-muted);
}
.abx-score__n { font-family: var(--font-head, system-ui); font-size: 1.7rem; font-weight: 800; color: var(--abx-ink); line-height: 1; }

.abx-stars { display: inline-flex; gap: 2px; color: var(--abx-gold); }
.abx-stars svg { width: 19px; height: 19px; }
.abx-stars svg.is-off { color: var(--abx-line); }
.abx-stars--sm svg { width: 15px; height: 15px; }

.abx-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }

.abx-review {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--surface, #fff);
  border: 1px solid var(--abx-line);
  border-radius: 16px;
}
.abx-review__text { margin: 0; flex: 1; font-size: .96rem; line-height: 1.7; }
.abx-review__by { margin: 0; font-size: .88rem; line-height: 1.45; }
.abx-review__by b { display: block; font-weight: 700; }
.abx-review__by span { color: var(--abx-muted); }

/* ======================================================= NARROWER ==== */

@media (max-width: 1000px) {
  .abx-team__grid { grid-template-columns: repeat(2, 1fr); }
  .abx-visit__cols { grid-template-columns: repeat(2, 1fr); }
  .abx-reviews__grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .abx-hero__grid,
  .abx-intro__grid { grid-template-columns: 1fr; }
  .abx-col--offset { padding-top: 0; }
  .abx-hero__media { aspect-ratio: 16 / 10; }

  /* One column: the dashed spine would run through the cards, and the
     flipped rows would put the picture below its own words. */
  .abx-time::before { display: none; }
  .abx-time__row,
  .abx-time__row--flip { grid-template-columns: 1fr; }
  .abx-time__row--flip .abx-time__card { order: 0; }

  .abx-quote::after { background: rgba(20, 34, 43, .78); }
  .abx-btn { width: 100%; }
}

@media (max-width: 520px) {
  .abx-team__grid { grid-template-columns: 1fr; }
  .abx-visit__cols { grid-template-columns: 1fr; }
}