/* ==========================================================================
   Company v2 — new sections for company-2.html, built from pasted PNG
   exports (Figma Dev Mode unavailable this round). Loaded only by
   company-2.html, after company.css / detail.css, so company.html is
   untouched. Several sections reuse company.css components verbatim
   (.team, .principles, .ir-contact, .brandband) via their existing
   classes — only what's genuinely new lives here.
   ========================================================================== */

/* ---------- Hero: deep-blue ground instead of forest ----------
   hero.webm and the .hero::after legibility gradient are both baked in
   forest green (home.css targets the homepage's forest hero). Neutralising
   the video to a pure luminance map and screening it onto the deep-blue
   backdrop turns the same diamond-pattern footage into a navy-toned hero;
   the gradient needs its own deep-blue tint for the same reason. */
.hero--v2 { background-color: var(--color-deep-blue); min-height: 800px; }
/* hero.webm is forest-toned: its ground greys out to ~49/255 and its lines to
   ~199. brightness() lifted the ground too, so screening it washed the whole
   section out to slate. contrast(1.7) instead maps that ground to black —
   which screen leaves untouched — while pushing the lines to ~0.95, so the
   deep-blue stays flat and only the animation reads over it. */
.hero--v2 .hero__video {
  filter: grayscale(1) contrast(1.7);
  mix-blend-mode: screen;
  opacity: 0.5;
}
/* the design is a flat deep-blue ground with the animation over it, so drop
   home.css's legibility gradient rather than re-tinting it */
.hero--v2::after { background: none; }
@media (max-width: 768px) {
  /* home.css's mobile hero rules centre .hero__inner and flatten
     .hero__content (display:contents) for the old sidebar-stats hero.
     This hero has neither, so keep breadcrumb/title/subtitle left-aligned
     in plain source order (same fix as solutions-2 / index's hero--split). */
  .hero--v2 .hero__inner { align-items: stretch; text-align: left; }
  .hero--v2 .hero__content { display: flex; flex-direction: column; }
}

/* ---------- Our Story: label+heading, then 3 equal columns of prose ----------
   Figma 1820:6011 — 120/80 padding, the H2 at the design system's 62/0.9/
   -0.93 (not the 56/1 this section was first written at), 44px down to the
   prose, three columns on the same 32px gutter the rest of the page uses. */
/* 120/120, not 120/80: Figma's own bottom padding reads as 80, but its prose
   block carries a further 40px of its own, so the section still resolves to
   the 472px frame height only with a full 120 here. */
.story-section { background: var(--color-almost-white); padding: var(--sp-120) 0; }
.story-section__head { align-items: start; }
.story-section__head > .label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.story-section__head h2 { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-night); }
.story-section__grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
/* the copy is set to 417px inside its 437px track, which is what produces
   Figma's line breaks — letting it fill the track rewraps every column */
.story-section__grid p { max-width: 417px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }

/* ---------- Principles ----------
   Figma 1820:6025 drops the eyebrow label this component normally carries,
   but keeps the heading in the 8-column area rather than centring it, and
   tightens the section to 80/80. With the label gone the intro has to be
   pinned to the second column or the split grid pulls it back to the first. */
.principles--v2 { padding-top: var(--sp-80); padding-bottom: var(--sp-80); }
.principles--v2 .principles__intro { grid-column: 2; }

/* Distance from the container's outer edge to the viewport edge: zero until
   the viewport passes --container-max, then half the surplus. A plain
   --container-pad only reaches the container, which is why these bands
   stopped short on anything wider than 1440. 100vw counts the scrollbar, so
   the sections using it clip the few px of overshoot. */
.principles--v2,
.timeline-section,
.brandband--tiled {
  --page-bleed: calc((100vw - min(100vw, var(--container-max))) / 2);
  --bleed-x: calc(var(--container-pad) + var(--page-bleed));
  overflow-x: clip;
}

/* the slider starts flush with the container and runs off the right edge;
   scrolled to the end, its last card lands back on the container's right
   edge, so both gutters are the full bleed rather than the raw padding */
.principles--v2 .principles__slider {
  padding-left: var(--bleed-x);
  padding-right: var(--bleed-x);
}

.scroll-track {
  position: relative;
  height: 1px;
  margin: var(--sp-80) var(--bleed-x) 0;
  background: var(--color-blue-10);
}
.scroll-track__thumb {
  position: absolute;
  top: -1px;
  left: 0;
  /* Figma draws the indicator as a hairline, the same 1px as its rail */
  height: 1px;
  background: var(--color-night);
  transition: opacity 0.2s ease;
}

/* The numbered strip is the card's own colour and sits opaque over the
   artwork — it was almost-white against a blue/5 card, which read as a
   translucent band with the pattern showing through. */
.principles--v2 .principle__num { background: var(--color-blue-5); }

/* ---------- Timeline ----------
   Figma 1877:17385. The rail is ONE hairline that bleeds past the container
   to the viewport edges (Vector 1877:17391 is 1442px wide against a 1376px
   container), not a per-item border — and it runs through the centre of the
   bullets rather than under the cards. Each bullet is an 8px square centred
   in a 24px box at the item's left edge, which lands it exactly under the
   8px text inset. Item height resolves to 40 + 8 + 60 + 32 = 140px. */
.timeline-section { background: var(--color-blue-5); padding: var(--sp-120) 0; }
.timeline-section h2 { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-night); }
/* The row was drawn with four short years and shared the width equally
   between them. Real entries read "Dec 2025" and there are seven, so every
   column came out narrower than the label inside it — at 1022px the columns
   were 105px against a year needing 166, and each one sat across its
   neighbour.

   The fix is the type, not the layout. A year set at 40px needs 1466px of
   row to show seven of them, and the design's content column stops at 1376,
   so at that size they can never fit. At 36px they need 1340 and they do.
   The size is therefore tied to the column it sits in rather than fixed:
   cqw resolves against the item's own width, so the year takes the design's
   40px wherever the column is wide enough — four entries, or seven on a
   large screen — and eases down to a floor of 28px rather than colliding.
   Below that floor a year stops reading as a display figure, which is where
   the scroller takes over instead (see the 1200px query further down).

   The row keeps overflow-x for that case; main.js hides the indicator by
   itself whenever nothing overflows, so at desktop widths there is no
   scrollbar, no indicator and no sideways movement at all. */
.timeline-row {
  position: relative;
  margin-top: 80px;
  display: flex;
  gap: 32px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin-left: calc(-1 * var(--bleed-x));
  margin-right: calc(-1 * var(--bleed-x));
  padding: 0 var(--bleed-x);
  scrollbar-width: none;
  cursor: grab;
}
.timeline-row::-webkit-scrollbar { display: none; }
.timeline-row.is-dragging { cursor: grabbing; user-select: none; }
/* Columns share the width evenly. `container-type` is what lets the year
   size itself against the column rather than the viewport. */
.timeline-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 0 8px 32px;
  container-type: inline-size;
}
/* each item draws its own segment of the rail, spanning itself plus the
   gutter after it, so the segments butt up into one continuous line — and
   the line still tracks the items once the row becomes a scroller on
   mobile, which a single row-level rule could not do */
.timeline-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: -32px;
  bottom: 12px;
  height: 1px;
  background: var(--color-blue-10);
}
.timeline-item:first-child::after { left: calc(-1 * var(--bleed-x)); }
.timeline-item:last-child::after { right: calc(-1 * var(--bleed-x)); }
.timeline-item__year {
  font-family: var(--font-heading);
  font-weight: 400;
  /* cqw resolves against the column's content box, not its border box, so
     22% of it leaves the longest label a margin inside the space it has
     rather than landing exactly on the edge, where a difference in font
     metrics — a fallback face before the webfont arrives, another browser's
     rounding — would tip it into collision. At the narrowest column before
     the breakpoint the clamp holds it at the 28px floor. */
  font-size: clamp(28px, 22cqw, 40px);
  line-height: 1;
  letter-spacing: -0.4px;
  color: var(--color-night);
  white-space: nowrap;
}
/* Figma pads every caption out to three 20px lines with zero-width spaces so
   the bullets sit on one line; a min-height does the same without the hack */
.timeline-item__desc { margin-top: 8px; min-height: 60px; font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--color-blue-50); }
.timeline-item__dot { position: absolute; left: 8px; bottom: 8px; width: 8px; height: 8px; background: var(--color-night); }

/* ---------- Cycles: dark tiled-pattern CTA band, one centred line ----------
   manifesto-ascii.png was made for the forest-toned manifesto band; on this
   navy section its green tint reads as its own colour rather than texture.
   Desaturating it and blending as "screen" turns it into a pure light/dark
   map that tints toward the navy ground rather than fighting it. */
/* 600px here, against the component's 800px default tuned for company.html's
   taller tag/headline/wordmark stack — this band is a single centred line */
.brandband--solo { min-height: 600px; justify-content: center; gap: 0; }
/* the component pins the texture to a fixed 1440px, which left a bare strip
   on the right of any wider screen — cover the band instead */
.brandband--tiled .brandband__bg {
  top: 0;
  transform: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  filter: grayscale(1) brightness(0.85);
  mix-blend-mode: screen;
}

/* ---------- Leadership / Governance indents ----------
   .team indents its heading, label and "View all" by a flat 33.333%, which
   lands them at 459px; the design's 4-column block is 437px + a 32px
   gutter, so they belong at 469px like every other content track on the
   page. Scoped to this page so company.html keeps its current alignment. */
.team--v2 .team__indent,
.team--v2 .team__label,
.team--v2 .team__viewall { margin-left: calc((100% - 352px) / 3 + 128px); }
/* Six cards show on the desktop grid and four at 375; the rest are revealed
   by the toggle, which is a button rather than the component's link. */
.team--collapsible .team__grid > .team-member:nth-child(n + 7) { display: none; }
.team--collapsible.is-expanded .team__grid > .team-member { display: flex; }
.team--v2 .team__viewall {
  width: auto;
  background: none;
  text-align: left;
  cursor: pointer;
}
/* Below this the seven columns squeeze the year down to its 28px floor and
   the captions out to a fourth line — measured at 1200px the longest label
   cleared its column by 4px, which is not a margin, it is luck. So instead
   of shrinking further the row becomes what it already is on a phone: fixed
   200px columns at the full type size, swiped or dragged through. Above it
   nothing scrolls, and there is no indicator to see. */
@media (max-width: 1279px) {
  .timeline-item {
    flex: 0 0 200px;
    container-type: normal;
  }
  .timeline-item__year { font-size: 32px; letter-spacing: -0.32px; }
}

@media (max-width: 992px) {
  .team--v2 .team__indent,
  .team--v2 .team__label,
  .team--v2 .team__viewall { margin-left: 0; }
  /* four to a screen here, and the rule under the toggle runs the full width */
  .team--collapsible .team__grid > .team-member:nth-child(n + 5) { display: none; }
  .team--collapsible.is-expanded .team__grid > .team-member { display: flex; }
  .team--v2 .team__viewall { width: 100%; padding-right: 0; }
}

/* Both team bands open on 120px, where the shared component uses 80 — and
   the portrait plate is a 437x260 landscape frame (163.5x120 at 375), which
   a bare min-height cannot hold as the column width changes. */
.team--v2 { padding-top: var(--sp-120); }
.team--v2 .team-member__avatar { min-height: 0; aspect-ratio: 437.33 / 260; }

/* ---------- Governance & Board: reuses .team's card shape on a
   different ground, three members instead of six ---------- */
.team--board { background: var(--color-light-blue); padding-top: var(--sp-120); }
.team--board .team__head p,
.team--board .team-member__desc,
.team--board .team-member__role,
.team--board .team__label { color: rgba(23, 34, 58, 0.55); }
.team--board .team__label { border-bottom-color: rgba(23, 34, 58, 0.15); }
.team--board .team-member__avatar { background: rgba(23, 34, 58, 0.14); }
.team--board .team-member__avatar span { color: var(--color-night); }
.team--board .team__grid { grid-template-columns: repeat(3, 1fr); }

/* ---------- IR contact: this page's copy is short enough to fit one line
   at the component's default 84px, unlike the max-width:622px it was tuned
   for ---------- */
.ir-contact--wide { min-height: 520px; }
.ir-contact--wide .ir-contact__text h2 { max-width: none; white-space: nowrap; }
/* the standfirst runs the full content track here, not the component's 411px */
.ir-contact--wide .ir-contact__desc { max-width: none; }
/* Figma exports this artwork with its navy ground baked in and no alpha. The
   asset has that ground subtracted to pure black at build time, so `screen`
   composites it seamlessly: black leaves the backdrop untouched, and only
   the wireframe lights up. (`lighten` against the raw export left a faint
   edge wherever the ground drifted above the section colour.) */
.ir-contact__art {
  position: absolute;
  left: -181px;
  top: -4px;
  width: 521px;
  height: 520px;
  mix-blend-mode: screen;
  pointer-events: none;
}
.ir-contact__art img { display: block; width: 100%; height: 100%; max-width: none; }

/* ---------- Footer: dark ground here, so use the deep-blue variant with
   the same divider convention as the light-green footer elsewhere ---------- */
.site-footer--deep-blue { border-top: 1px solid var(--color-gray-10); }
.footer-col__contact-lead { font-family: var(--font-body); font-size: 13px; color: var(--color-gray-40); margin-bottom: 8px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .story-section__grid { grid-template-columns: 1fr; row-gap: 24px; }
}

@media (max-width: 768px) {
  .story-section { padding: var(--sp-80) 0; }
  .story-section__head { grid-template-columns: 1fr; row-gap: 16px; }
  .story-section__head h2 { font-size: 36px; letter-spacing: -0.36px; }
  .story-section__grid { margin-top: 40px; }

  .timeline-section { padding: var(--sp-80) 0; }
  .timeline-section h2 { font-size: 40px; letter-spacing: -0.6px; }
  .timeline-row {
    margin-top: 40px;
    margin-left: calc(-1 * var(--container-pad));
    margin-right: calc(-1 * var(--container-pad));
    padding: 0 var(--container-pad);
  }

  /* 80px at 375, where --sp-120 would collapse to 56 */
  .team--v2,
  .team--board { padding-top: 80px; }
  .team--v2 .team-member__avatar { aspect-ratio: 163.5 / 120; }
  .team--board .team__grid { grid-template-columns: 1fr 1fr; }

  .ir-contact--wide .ir-contact__text h2 { white-space: normal; }
  /* at 375 the artwork sits above the copy and everything centres under it */
  .ir-contact__art { left: 0; top: 0; width: 100%; height: auto; }
  .ir-contact--wide .ir-contact__inner { padding-top: 354px; }
  .ir-contact--wide .ir-contact__body { gap: 32px; }
  .ir-contact--wide .ir-contact__text { align-items: center; text-align: center; }
  .ir-contact--wide .ir-contact__buttons { width: 100%; }
  .ir-contact--wide .ir-contact__buttons .btn { flex: 1 1 0; justify-content: center; }
}