/* ==========================================================================
   Page: About Us — Figma 6555:10370 "About_us_new"
   ==========================================================================
   Hero (the same construction as /service/), then two content sections —
   heading · intro · media collage — with The Dragster Effect between them,
   the client marquee and the shared contact section.

   This file owns GEOMETRY ONLY — where things sit, not how they look:
     · vertical rhythm → .section      (tokens.css, --section-py 120/80/60)
     · heading + intro → the text widget, via its --tw-* knobs
     · collage rows    → case-content.css (inc/media-render.php)
   No font-size, line-height or colour is restated here; the tokens already
   scale themselves per breakpoint, so this file never repeats that either.

   The .dragster-effect base below is SHARED: sections/section-effect.css
   adds the --home modifiers on top of it for both this page and the
   homepage band. Do not rename these four classes without checking there. */

/* ── Hero ─────────────────────────────────────────────────────────────────
   Identical construction to .services-hero. The header is fixed and overlays
   the page, so clear it and add Figma's own 100px. ONE number owns both the
   widget's row gap and the gap down to the image — the hero has a single
   .container, so that number IS the gap and nothing adds to it. */
.about-hero {
  --about-hero-gap: var(--space-100);
  padding-top: calc(var(--header-h) + var(--space-100));
}

/* Only the widget's knobs. Figma 6555:10489 — heading Title/XL, intro
   Body/Medium (the size comes from body_size => 'md' at the call site, never
   from a variable pair here). */
.about-hero .text-grid {
  --tw-heading-size: var(--title-xl);
  --tw-heading-lh: var(--title-xl-lh);
  /* Figma 6555:10489: 60 between heading and intro, 100 down to the image. */
  --tw-row-gap: min(var(--space-60), var(--about-hero-gap));
  --tw-pad-bottom: 0;
}

/* Figma 6555:10371: 1320×742 at content width (16:9), 20px corners. The
   ratio is kept so the crop is the designed one at every width. */
.about-hero__media {
  margin: var(--about-hero-gap) 0 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-image);
  overflow: hidden;
}
.about-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Content sections ─────────────────────────────────────────────────────
   Text widget on top, collage rows underneath. The rows bring their OWN
   .container (or go full-bleed), which is why the media sits outside the
   text's container — same structure as single-always-on.php. One knob owns
   both the widget's internal rhythm and the gap down to the media. */
.about-section { --about-row-gap: var(--space-60); }

/* Figma pads every About section 100, not the site-wide 120 (desktop only;
   tablet and phone keep --section-py). */
@media (min-width: 1025px) {
  .section.about-section { padding-block: var(--space-100); }
}

/* Figma sets each heading on ONE line ("Your success is our business." is
   ~1030px at Title/Large, wider than three columns), so give it all four. */
.about-section .text-grid { --tw-heading-col: 1 / span 4; }

/* Collage 1+3 on this page (Figma 6941:7267 / 6571:10714): the big tile is
   exactly HALF the row (650 at 1440) and 650×810 tall; the other half splits
   into two 315 columns. The shared pattern is 0.9/0.5/0.5 with a 3:4 big tile,
   which gave 606/694 here — the cases keep that, only About changes. */
@media (min-width: 768px) {
  .about-section .case-collage--quad-left  { grid-template-columns: calc((100% - 20px) / 2) 1fr 1fr; }
  .about-section .case-collage--quad-right { grid-template-columns: 1fr 1fr calc((100% - 20px) / 2); }
  .about-section .case-collage--quad-left  .case-collage__big,
  .about-section .case-collage--quad-right .case-collage__big { aspect-ratio: 650 / 810; }
}

.about-section__text {
  padding-bottom: 0;   /* .container's own bottom padding would double it */
}
.about-section__text .text-grid {
  --tw-row-gap: var(--about-row-gap);
  --tw-pad-bottom: 0;
}

/* Section 1: the Contact section's animated trail behind the text
   (same SVG and draw-on-scroll as sections/section-contact.css). */
.about-section--trail {
  position: relative;
  overflow-x: hidden;
}
.about-section__trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.about-section__trail-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.1s linear;
}
.about-section--trail .about-section__text {
  position: relative;
  z-index: 1;
}

.about-section__media {
  margin-top: var(--about-row-gap);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── The Dragster Effect — shared base ────────────────────────────────────
   Used here and, through sections/section-effect.css, on the homepage. */
.dragster-effect {
  background: var(--bg-secondary);
  color: var(--text-light);
  padding-block: var(--section-py);
}
.dragster-effect__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: var(--space-60);
}
.dragster-effect__title {
  margin: 0;
  font-size: var(--title-lg);
  line-height: var(--title-lg-lh);
  letter-spacing: var(--title-lg-ls);
  font-weight: 400;
  color: var(--text-light);
}
.dragster-effect__lead {
  margin: 0;
  font-size: var(--body-lg);
  line-height: var(--body-lg-lh);
  letter-spacing: var(--body-lg-ls);
  color: var(--text-light);
}

/* ── Clients (marquee) ────────────────────────────────────────────────────
   Figma 6571:10867 "In good company": heading left, intro right — the same
   two-column head as the effect band, so it reuses that rule's shape. */
.clients {
  position: relative;
  overflow: hidden;
  background: var(--bg-secondary);
  color: var(--text-light);
  padding-block: var(--section-py);
}
/* Taller than a normal section, the way Lusion's own clients band is: they set
   no height at all, just viewport-relative padding (25vh top / 15vh bottom).
   A hard min-height: 100svh would be dead air that GROWS with the screen - on
   a 1440 tall display it would leave 626px of nothing. Viewport padding scales
   instead, and the content still decides the height. Clamped so it neither
   collapses on a short laptop nor runs away on a tall monitor. Measured at
   1440x900: 814px before (0.90 svh). Phones keep --section-py. */
@media (min-width: 768px) {
  /* Top = the same --section-py the Dragster Effect band uses, so the two heads sit alike (Kajsa 2026-10-15); the bottom stays vh-driven. */
  .clients { padding-block: var(--section-py) clamp(80px, 18vh, 200px); }
}
.clients__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: var(--space-60);
}
.clients__title {
  margin: 0;
  font-size: var(--title-lg);
  line-height: var(--title-lg-lh);
  letter-spacing: var(--title-lg-ls);
  font-weight: 400;
  color: var(--text-light);
}

/* Section heads (clients + The Dragster Effect): two equal halves with a 100px gutter on desktop (Kajsa 2026-10-15). This replaces the earlier 650px/1fr clients split, which was there so the heading fit one line; at half width it wraps to two, which is the intended look. Tablet keeps the 20px gap, mobile stacks. */
@media (min-width: 1025px) {
  .dragster-effect__head,
  .clients__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-100); }
  /* Same 110px below the head as the Dragster Effect band (measured at 1440). */
  .clients__head { margin-bottom: 110px; }
}
.clients__lead {
  margin: 0;
  font-size: var(--body-lg);
  line-height: var(--body-lg-lh);
  letter-spacing: var(--body-lg-ls);
  color: var(--text-light);
}
/* Figma 6571:10867 places the three rows 171px and 161px apart top-to-top;
   with rows of varying height that is ~68px of air between them. */
.clients__rows {
  position: relative;   /* the edge fades hang off THIS, not the section */
  display: flex;
  flex-direction: column;
  gap: 68px;
}
.clients__marquee { overflow: hidden; }
.clients__track {
  display: flex;
  align-items: center;
  gap: 80px;
  width: max-content;
  /* Duration and cycle length come from main.js: it repeats the row until one
     cycle is wider than the screen and then scales the time so every row moves
     at the SAME speed. The fallbacks are the old fixed values, so a no-JS page
     still gets the original two-copy loop. */
  animation: about-marquee var(--dur, 45s) linear infinite;
  will-change: transform;
}
.clients__track--rev { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) {
  .clients__track { animation: none; }
}
@keyframes about-marquee {
  from { transform: translateX(0); }
  /* --cycle is ONE set plus its trailing gap, in px. The 50% fallback is only
     correct for exactly two copies, which is what PHP renders. */
  to   { transform: translateX(calc(-1 * var(--cycle, 50%))); }
}
.clients__logo { flex-shrink: 0; }
/* Figma draws each mark at its OWN size — they run from 31px tall (West
   Pride) to 104px (GM), and that unevenness is the look. A single forced
   height blew the small wordmarks up far past the rest. The caps keep the
   biggest ones from running away with the row. */
.clients__logo img {
  width: auto;
  height: auto;
  /* Fluid, not two fixed steps: between 768 and 1024 the caps used to stay at
     the full 80/260, so a logo took far more of an 834px screen than of a
     1440 one. clamp() ramps them continuously - 80/260 at 1440, 57/184 at
     1024, 47/150 at 834, and the floor at 44/140 on a phone. */
  max-height: clamp(36px, 5.6vw, 80px);
  max-width: clamp(120px, 18vw, 260px);
  object-fit: contain;
  display: block;
}
/* Edge fades (Figma: 138px) — on the ROWS, not on the section.
   They exist to soften where the logos run off screen. Spanning the whole
   section (top: 0; bottom: 0) they also lay over the heading and the intro and
   dimmed their first characters at the left edge (Kajsa 2026-10-05). */
.clients__rows::before,
.clients__rows::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 138px;
  z-index: 1;
  pointer-events: none;
}
.clients__rows::before { left: 0;  background: linear-gradient(90deg, var(--bg-secondary), transparent); }
.clients__rows::after  { right: 0; background: linear-gradient(270deg, var(--bg-secondary), transparent); }

/* ── Tablet ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .about-hero { --about-hero-gap: 60px; }
  .about-section { --about-row-gap: 40px; }
  /* Title/XL has no tablet step of its own in tokens.css, so the hero kept
     100px/110px in a half-width column — at 834px that wrapped the headline
     onto four lines, 440px tall (measured 2026-10-05). Title/Large is the
     step down. Size and leading move together, never one without the other. */
  .about-hero .text-grid {
    --tw-heading-size: var(--title-lg);
    --tw-heading-lh: var(--title-lg-lh);
  }
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .about-hero {
    --about-hero-gap: 40px;
    padding-top: calc(var(--header-h) + 40px);
  }
  .about-hero__media {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
  }
  .dragster-effect__head,
  .clients__head { grid-template-columns: 1fr; }
  .clients__head { margin-bottom: 32px; }
  /* A floor, not a height: the band must not flatten out as the logos shrink.
     5/4 of the viewport WIDTH, so it keeps a portrait-ish proportion on a
     phone whatever ends up inside it (Kajsa 2026-10-06). At 375 that is 469px;
     the content is normally taller, so this only catches the lean cases. */
  .clients { min-height: calc(100vw * 5 / 4); }

  /* The logo wall has to be re-proportioned for a phone, not just stacked.
     At desktop sizes a 242px wordmark is a sixth of the row; on a 375px
     screen it is two thirds of it, so barely one logo was legible at a time.
     The edge fades have the same problem: 138px is 10% of 1440 but 37% of
     each side here, which washed out the logos that were actually on screen. */
  .clients__track { gap: 40px; }
  .clients__rows { gap: 40px; }
  .clients__rows::before,
  .clients__rows::after { width: 48px; }
}