/* ==========================================================================
   about-listing.css
   /about-listing/ — "About Us". A light editorial adaptation of the Divi
   Movies about layout: a left-aligned masthead, an "All the Perks" split
   (copy left · framed feature grid right), and a centred "Our Story". Closes
   on the shared dark footer.

   DESIGN MATH (why every number is what it is)
   - Palette: the FAQ / chauffeur light system — warm off-white (#f3f1ed)
     canvas, near-black text, ONE canary accent (#e5ff00). Canary reads poorly
     as text on off-white, so it appears only as SHAPES (eyebrow bars, feature
     ticks, the button) never as body copy.
   - Spacing: everything snaps to the 8px scale in tokens.css.
   - Type:    sizes come from the fluid --fs-* scale; hierarchy is weight + size.
     Headings mix a light 600 with a bold 800 span (mirrors the reference's
     "All the Perks" heading treatment).
   - Zero JS: no scripts beyond a 1-line footer-year enhancement in the markup.
   ========================================================================== */

/* Vendored display face for the brand wordmark (mirrors the homepage logo). */
@font-face {
  font-family: 'Plaster';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/assets/fonts/plaster.woff2') format('woff2');
}

:root {
  --accent: #e5ff00;

  /* LIGHT SURFACE OVERRIDE (page-scoped): loads after tokens.css and re-points
     the neutral tokens so ONLY /about-listing/ is warm off-white with dark
     text. The canary accent stays; global dark tokens are untouched. */
  --color-bg: #f3f1ed;
  --color-text: #0d0d0d;
  --color-text-muted: #4a4a4a;
  --color-text-faint: #8a8a8a;
  --color-line: rgba(0, 0, 0, 0.14);
  --color-bg-raised: rgba(0, 0, 0, 0.05);

  /* --- Page layout constants (the "math") ------------------------------ */
  --gutter: var(--container-pad);          /* shared L/R page gutter: 20→48px */
  --wrap-max: 70rem;                        /* main content column: 1120px     */
  --prose-max: 46rem;                       /* centred reading measure: 736px  */
  --card-radius: var(--radius-md);          /* 12px                            */

  /* Light text tints for the dark footer band. */
  --on-dark:        #f4f5f7;
  --on-dark-muted:  rgba(244, 245, 247, 0.66);
  --on-dark-faint:  rgba(244, 245, 247, 0.42);
  --on-dark-line:   rgba(244, 245, 247, 0.14);
}

/* Border-box so padding never fights track widths. This page loads only
   tokens.css (which sets no reset), so it must own this itself. */
*, *::before, *::after { box-sizing: border-box; }

.about-page {
  margin: 0;
  min-height: 100svh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
}
/* Content region grows so the footer band sits at the bottom on tall screens. */
.about-page > main { flex: 1 1 auto; }

/* Keyboard skip target. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--accent);
  color: #000;
  padding: var(--space-xs) var(--space-sm);
  font-weight: 700;
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

/* ------------------------------------------------------------- top bar -----
   Ported verbatim from /vip-transport/ + /faqs/ (the shared "chauffeur nav"):
   brand mark left, a mini section-nav right that lifts to canary on hover. */
.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  /* STANDARD BAR (site-wide): one exact size on every light page —
     --header-h (4.5rem) tall, --container-pad inline gutter; content
     centers inside the fixed band. box-sizing is pinned here because some of
     these pages set a global border-box reset and others don't — without it
     the same min-height + padding renders 72px on one page and 96px on
     another. Keep this block in sync across
     vehicles / bosnia-tours / vip-transport / faqs / about-listing. */
  box-sizing: border-box;
  min-height: var(--header-h);
  padding: var(--space-sm) var(--container-pad);
}
.topbar__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55ch;
  line-height: 1;
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight, -0.01em);
  white-space: nowrap;
}
.topbar__brand strong {
  font-family: 'Plaster', var(--font-display, sans-serif);
  font-weight: 400;
  font-size: calc(var(--fs-400) * 1.2);
  text-transform: uppercase;
}
.topbar__brand span {
  font-size: calc(var(--fs-100) * 1.35);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps, 0.12em);
  text-transform: uppercase;
  /* Tiger-flame (the intro orange) instead of canary: on the light page
     background the canary sub-line has almost no contrast. */
  color: var(--color-accent-hi);
}
.topbar__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
}
.topbar__link {
  font-size: var(--fs-100);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.topbar__link:hover,
.topbar__link:focus-visible { color: var(--accent); }
.topbar__link[aria-current="page"] {
  color: var(--color-text);
  position: relative;
}
.topbar__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.5em;
  height: 2px;
  background: var(--accent);
}

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

/* Eyebrow = a short canary bar + an uppercase label. Canary is the SHAPE (the
   bar); the label stays dark so it's legible on the off-white page. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--accent);
  flex: none;
}

/* Headings that mix a light lead with a bold span. */
.h-mixed {
  margin: 0;
  font-family: "Raleway", var(--font-display, var(--font-sans));
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-wrap: balance;
}
.h-mixed b { font-weight: 800; }

/* Canary pill button (the reference's CTA, recoloured). Black text on canary is
   the highest-contrast pairing; hover shifts to the tiger-flame highlight. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  background: var(--accent);
  color: #0d0d0d;
  font-weight: var(--fw-bold);
  font-size: var(--fs-200);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  text-decoration: none;
  box-shadow: 0 10px 24px -8px rgba(13, 13, 13, 0.28);
  transition: transform var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.btn-primary:hover {
  background: var(--color-accent-hi, #ff5a1f);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -8px rgba(13, 13, 13, 0.34);
}
.btn-primary:active { transform: translateY(1px); }
.btn-primary svg { width: 1.05em; height: 1.05em; flex: none; }

/* ================================================================= hero =====
   Left-aligned masthead: eyebrow, big "ABOUT US" (bold + muted span), CTA. */
.hero {
  padding: clamp(var(--space-2xl), 9vw, var(--space-4xl)) 0
           clamp(var(--space-2xl), 7vw, var(--space-3xl));
}
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  max-width: 44rem;
}
.hero__title {
  margin: 0;
  font-family: "Raleway", var(--font-display, var(--font-sans));
  font-weight: 800;
  font-size: var(--fs-900);                /* 3→6.5rem display */
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.hero__title span {                        /* the "US" — lighter + muted */
  font-weight: 600;
  color: rgba(13, 13, 13, 0.34);
}
.hero__lead {
  margin: 0;
  max-width: 42ch;
  color: var(--color-text-muted);
  font-size: var(--fs-400);
  line-height: 1.6;
}

/* ================================================================ perks =====
   Split: copy column left, framed feature grid right. Stacks under 54rem. */
.perks {
  padding-block: clamp(var(--space-xl), 5vw, var(--space-3xl));
}
.perks__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-xl), 4vw, var(--space-2xl));
  align-items: start;
}
@media (min-width: 54rem) {
  .perks__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr); }
}

.perks__copy { display: flex; flex-direction: column; gap: var(--space-md); }
.perks__title { font-size: var(--fs-700); }   /* 2→3rem */
.perks__text {
  margin: var(--space-xs) 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-300);
  line-height: 1.65;
  max-width: 34ch;
}

/* The framed box (reference's bordered panel), recoloured: white surface, dark
   hairline, soft lift. The canary lives in the feature ticks inside. */
.perks__box {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px -24px rgba(13, 13, 13, 0.22);
  padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
}
.perks__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-lg), 2.4vw, var(--space-xl));
}
@media (min-width: 32rem) {
  .perks__list { grid-template-columns: 1fr 1fr; }
}
.perk__name {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 0 var(--space-2xs);
  font-family: "Raleway", var(--font-display, var(--font-sans));
  font-weight: 700;
  font-size: var(--fs-400);
  letter-spacing: -0.01em;
}
.perk__name::before {                      /* canary square tick */
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  background: var(--accent);
  flex: none;
}
.perk__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-200);
  line-height: 1.55;
}

/* ================================================================ story =====
   Centred narrow column of prose under a centred eyebrow. */
.story {
  padding-block: clamp(var(--space-2xl), 6vw, var(--space-4xl));
  text-align: center;
}
.story__inner {
  max-width: var(--prose-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}
.story__inner .eyebrow { justify-content: center; }
.story__body { display: flex; flex-direction: column; gap: var(--space-md); }
.story__body p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-400);
  line-height: 1.7;
  text-wrap: pretty;
}

/* =============================================================== footer =====
   Dark band under the light page (mirrors /faqs/), with the canary brand mark. */
.footer {
  flex: 0 0 auto;
  background: #0d0d0d;
  color: var(--on-dark);
  padding: var(--space-3xl) var(--gutter) var(--space-xl);
}
.footer__inner { max-width: var(--container-max); margin-inline: auto; }
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}
@media (min-width: 48rem) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-xl); }
}
.footer__name {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-500);
  letter-spacing: var(--tracking-tight);
}
.footer__name .mark { color: var(--accent); }
.footer__desc {
  margin: 0 0 var(--space-md);
  max-width: 32ch;
  color: var(--on-dark-muted);
  font-size: var(--fs-200);
  line-height: 1.6;
}
.footer__contact {
  font-style: normal;
  font-size: var(--fs-200);
  line-height: 1.7;
  color: var(--on-dark-muted);
}
.footer__contact a { color: var(--on-dark); text-decoration: none; }
.footer__contact a:hover { color: var(--accent); }
.footer__col-title {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--on-dark-faint);
  font-weight: var(--fw-semibold);
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.footer__list a {
  color: var(--on-dark-muted);
  text-decoration: none;
  font-size: var(--fs-200);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__list a:hover { color: var(--on-dark); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--on-dark-line);
  font-size: var(--fs-100);
  color: var(--on-dark-faint);
}

/* --------------------------------------------------- entrance --------------
   The site's signature on-load reveal (opacity 0→1, 30px rise, 0.6s ease-out),
   staggered in reading order. Scoped to `no-preference` so the hidden pre-state
   is NEVER applied under reduced motion or if the animation can't run — content
   then just renders at rest, fully visible. Only the above-the-fold hero rises;
   lower sections render at rest to avoid animating off-screen. */
@media (prefers-reduced-motion: no-preference) {
  .topbar,
  .hero .eyebrow,
  .hero__title,
  .hero__lead,
  .hero__cta {
    animation: about-rise 0.6s var(--ease-out) both;
  }
  .topbar       { animation-delay: 0.05s; }
  .hero .eyebrow{ animation-delay: 0.13s; }
  .hero__title  { animation-delay: 0.21s; }
  .hero__lead   { animation-delay: 0.29s; }
  .hero__cta    { animation-delay: 0.37s; }
}
@keyframes about-rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------- responsive ------------ */
@media (max-width: 30rem) {
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  .topbar__nav { justify-content: flex-start; }
}

/* --------------------------------------------------- reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .topbar__link { transition: none; }
}