/* ===========================================================================
   Booked Wild — /about-us/

   Loaded after services.css and offer.css, which already carry the chrome,
   grid, type scale, buttons, rule treatment, .sec grounds, .hero, .close and
   the shared contact block. The supplied design reference is built on the same
   tokens as production — same ink, cream, field green, accent and the same
   three faces — so it maps onto those sheets rather than needing its own
   system.

   What this file adds is the four compositions the About page needs and no
   other page has: the asymmetric photo strip, the team list, the founder
   spread, and the journey timeline.
   =========================================================================== */

/* ---- hero ---------------------------------------------------------------- *
   The reference sets the label, an oversized H1 and a lede over a full-bleed
   landscape. .hero from services.css already does exactly that; only the label
   treatment and a balanced wrap are new. */
.hero h1 { text-wrap: balance; }
.about-lede { max-width: 46ch; }

/* "We're specialists, not generalists." now introduces the team rather than
   closing the travel section. Same display treatment it had there, in the
   accent it already used, sized to sit between the h2 and the profiles without
   adding a third block of vertical space: .team's own 60px top margin is
   reduced to 36px below it so the heading, the line and the grid read as one
   unit. */
.team__lead {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(22px, 2.1vw, 32px);
  line-height: 1.22;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--accent);
  margin: 34px 0 0;
  max-width: 30ch;
}
.team__lead + .team { margin-top: 36px; }

/* ---- the team ------------------------------------------------------------ *
   Six people, so a three-across grid on desktop. Deliberately not six identical
   cards: no panel, no border, no shadow — a portrait, a name, a role and the
   biography on the page's own ground, separated by the same hairline the rest
   of the site uses. The portraits are the team's real photographs at 260px, so
   they are rendered at 132px and never scaled beyond what they can carry. */
.team {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px 40px;
  margin: 60px 0 0;
  padding: 0;
  list-style: none;
}
.team li { border-top: 2px solid var(--line-2); padding-top: 26px; }
.team__photo {
  width: 132px; height: 132px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 0 20px;
  background: var(--tint);
}
.team__name {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(21px, 1.8vw, 27px);
  line-height: 1.1; letter-spacing: -0.03em; font-weight: 800;
  color: var(--ink);
  margin: 0;
}
.team__role {
  font-family: 'Karla', sans-serif;
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600;
  /* --accent measured 4.05:1 against white at this size — under AA. --field is
     the darker green already in the token set and clears it at 6.51:1, so the
     label keeps its colour identity without failing. */
  color: var(--field);
  margin: 8px 0 14px;
}
.team__bio {
  font-family: 'Karla', sans-serif;
  font-size: clamp(15.5px, 1.15vw, 17px);
  line-height: 1.62;
  color: var(--body);
  margin: 0;
}

/* ---- the founder --------------------------------------------------------- *
   The PDF marks "[picture of Colin]", and this is the one section the brief
   asks to carry real weight. Portrait on the left against the dark ground, the
   story beside it. Colin's photograph is 260px square, so it sits at 220px in
   a ring rather than being blown up into a large panel it cannot support. */
.founder {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.founder__aside { position: sticky; top: 112px; }
.founder__photo {
  width: 220px; height: 220px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid rgba(159, 220, 169, 0.35);
  background: var(--card);
}
.founder__name {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(26px, 2.3vw, 36px);
  line-height: 1.1; letter-spacing: -0.03em; font-weight: 800;
  color: var(--white);
  margin: 26px 0 0;
}
.founder__sub {
  font-family: 'Karla', sans-serif;
  font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.5;
  color: var(--accent-soft);
  margin: 10px 0 0;
  max-width: 26ch;
}
.founder__body p {
  font-family: 'Karla', sans-serif;
  font-size: clamp(16.5px, 1.3vw, 19px);
  line-height: 1.68;
  color: rgba(242, 246, 238, 0.88);
  margin: 0;
  /* uncapped, this column runs 913px at 1440 — roughly 82 characters a line,
     against 62 in the journey and 60 in the section ledes. It is the longest
     read on the page, so it gets the tightest measure discipline, not the
     loosest. */
  max-width: 68ch;
}
.founder__body p + p { margin-top: 22px; }

/* Seven dated entries in a single column left 700px of a 1360px band empty
   down 1500px of height. So above 1100px the milestones run in two columns,
   filled top-to-bottom rather than left-to-right, so 01->07 still reads as one
   chronology: May 2025 to Jan 2026 down the left, Mar 2026 to May 2026 down the
   right. Row gap stays 0 — the spacing lives inside each item's padding, so the
   rule down each column stays unbroken. */
/* the foot of each column carries no rule: item 4 ends the left column,
   item 7 ends the right */
/* the final milestone is the launch, so it reads as arrived rather than pending */

/* ---- hero scrim ---------------------------------------------------------- *
   The shared .hero__scrim in services.css is a vertical wash tuned for darker
   photographs. This one opens onto bright sky exactly where the label and the
   first line of the h1 sit, and measured under the real glyph rects the label
   came in at 4.38:1 — under AA — with the h1 at 3.64:1, passing large-text but
   without much room.

   The label is the binding constraint because services.css sets it at
   rgba(255,255,255,.82) rather than solid white. Rather than flatten the whole
   photograph, a horizontal wash runs under the text column only and fades out
   by 90%, so the left carries the contrast and the path and sky on the right
   stay open. Both layers use the same scrim colour, so their alphas compose
   cleanly: 1-(1-av)(1-ah).

   Safe to write unscoped — this stylesheet loads on this page alone. */
.hero__scrim {
  background:
    linear-gradient(90deg,
      rgba(6, 26, 17, 0.20) 0%, rgba(6, 26, 17, 0.14) 50%, rgba(6, 26, 17, 0) 90%),
    linear-gradient(180deg,
      rgba(6, 26, 17, 0.72) 0%, rgba(6, 26, 17, 0.30) 42%,
      rgba(6, 26, 17, 0.46) 66%, rgba(6, 26, 17, 0.92) 100%);
}
/* stacked, the copy runs the full width, so the wash has to as well */
@media (max-width: 768px) {
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(6, 26, 17, 0.20) 0%, rgba(6, 26, 17, 0.16) 100%),
      linear-gradient(180deg,
        rgba(6, 26, 17, 0.72) 0%, rgba(6, 26, 17, 0.30) 42%,
        rgba(6, 26, 17, 0.46) 66%, rgba(6, 26, 17, 0.92) 100%);
  }
}

/* ---- the hero's ghost button -------------------------------------------- *
   services.css:242 sets a:hover{color:var(--ink)} at specificity (0,1,1), which
   outranks .btn--ghost{color:var(--white)} at (0,1,0). .btn--ghost:hover on
   line 347 changes only the background, so hovering "Speak to our team" turns
   the label dark ink over a dark photograph.

   Fixed page-scoped and hero-scoped, exactly as on /lodges-log-cabins/,
   /short-term-rentals/ and /website-redesign-offer/: correcting services.css
   itself would move pages that are already signed off. The focus ring goes on
   here too, since the keyboard state had the same gap. */
.hero .btn--ghost:hover,
.hero .btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: #FFFFFF;
  color: var(--white);
}

/* ---- the close ----------------------------------------------------------- *
   services.css sets .close h2 white but leaves .lede at --body, a dark green
   built for cream grounds, which disappears on a photograph. */
.close .lede { color: rgba(242, 246, 238, 0.92); }

/* ---- reduced motion ------------------------------------------------------ *
   services.js reveals sections on scroll; the sticky founder column and the
   hero's slow drift are decorative. Anyone asking for less motion gets none. */
@media (prefers-reduced-motion: reduce) {
  .founder__aside { position: static; }
}

/* ---- responsive ---------------------------------------------------------- *
   Each breakpoint is set deliberately rather than left to collapse: the strip
   loses its portrait weighting before it gets too narrow to read, the team
   steps 3 -> 2 -> 1, and the founder stops being a spread once the column is
   too tight for a portrait beside text. */
@media (max-width: 1100px) {
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 36px; }
  /* below this the two columns are too narrow to carry the body copy, so the
     chronology returns to one column and item 4 gets its rule back */
}
@media (max-width: 1024px) {
  .founder { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .founder__aside { position: static; display: flex; align-items: center; gap: 26px; }
  .founder__photo { width: 132px; height: 132px; flex: none; }
  .founder__name { margin-top: 0; }
}
@media (max-width: 768px) {
  .team { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 44px; }
  .team__photo { width: 112px; height: 112px; margin-bottom: 16px; }
  /* three photographs across a phone would be postage stamps; the portrait
     leads at full width and the other two share a row beneath it */
  .about-claim { margin-top: 40px; font-size: 22px; max-width: none; }
  .founder__body p + p { margin-top: 18px; }
}
@media (max-width: 560px) {
  .founder__aside { flex-direction: column; align-items: flex-start; gap: 18px; }
  .founder__photo { width: 104px; height: 104px; }
}