/* ============================================================================
   Investor page — V4 redesign (Figma node 13917:9341 / component 13954:28783)
   Built 2026-07-20. Loaded automatically for tpl-investor-v4.php.

   Design tokens taken from the Figma file:
     ink            #120d0d      grey text      #63666a
     hairline       #dadada      yellow tile    #ffe399
     orange accent  #f96815      CTA band       #cdeff8
   Typography: Poppins (400/500/600) + Source Serif 4 italic for emphasis.
   ========================================================================= */

.inv4 {
  --inv-hairline: #dadada;
  --inv-grey: #63666a;
  --inv-ink: #120d0d;
  --inv-yellow: #ffe399;
  --inv-orange: #f96815;
  --inv-cta-bg: #cdeff8;
  font-family: 'Poppins', sans-serif;
}

/* --------------------------------------------------------------------------
   1. Banner
   The theme sets a global `h1{display:inline;font-family:CenturyGothStd}`
   reset, so the hero heading MUST re-declare display + font-family or it
   collapses to an inline Century Gothic run. (Documented theme gotcha.)
   -------------------------------------------------------------------------- */
/* 720px, NOT the Figma's literal 595px. In the Figma the banner sits at
   top:99px beneath a 99px nav band, so it ends at y=694. On the live site the
   nav is 70px and position:fixed (it overlays), so every other page banner is
   720px starting at y=0 — 26px from the faithful translation. Matching 720px
   keeps the investor page in rhythm with the other ten banners. */
.inv4-banner {
  position: relative;
  height: 720px;
  background-color: #000;
  overflow: hidden;
}
/* Photo is sized by HEIGHT with its own aspect ratio, anchored right, so the
   full frame is visible — nothing cropped top or bottom. Filling a region wider
   than the photo's 3:2 (as object-fit:cover over the Figma's 71% band did) chops
   the top of the shot off at 720px tall. */
.inv4-banner__media {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  height: 100%;
  aspect-ratio: 1600 / 1066;   /* the exported photo's native ratio */
  max-width: 100%;
  /* Because the photo no longer spans to the text, its left edge would read as
     a hard vertical seam against the dark side. Feather it so it dissolves into
     the background, echoing the soft blend in the Figma. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%);
  mask-image: linear-gradient(to right, transparent 0%, #000 22%);
}
.inv4-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* box already matches the ratio, so this is a no-op crop */
  object-position: center;
  display: block;
}
/* Dark wash so the white headline stays legible over the photo. Angle and
   stops copied from the Figma gradient fill. */
.inv4-banner__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(257.63deg, rgba(0, 0, 0, 0) 9.22%, rgb(0, 0, 0) 67.52%);
  pointer-events: none;
}
/* Breadcrumb + title live inside the site container rather than being pinned
   at a hard-coded left offset, so they track the same gutter as every other
   page's content instead of drifting apart at other widths. */
/* Top-aligned with the same 150px offset the other studio heroes use, so the
   breadcrumb lands on the same baseline when you navigate between pages.
   (Centring inside 720px pushed it ~100px lower than every other banner.) */
.inv4-banner__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  z-index: 2;
}
/* Same grid as every section below (intro / tabs / CTA): a 1440px max-width
   column centred in the viewport with a 100px gutter. Without the max-width the
   banner text stayed pinned at left:100 while the content below shifted right
   with the centred grid — 240px out of alignment at 1920, 80px at 1600. */
.inv4-banner__content > .container-fluid {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 100px;
}
.inv4-banner__inner {
  width: 622px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.inv4-crumb {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.42px;
  color: #fff;
}
.inv4-crumb a,
.inv4-crumb span { color: #fff; text-decoration: none; }
.inv4-crumb .inv4-crumb__home { display: inline-flex; align-items: center; gap: 4px; opacity: .78; }
.inv4-crumb .inv4-crumb__home img { width: 14px; height: 14px; display: block; }
.inv4-crumb .inv4-crumb__sep { opacity: .78; padding: 0 8px; }

.inv4-banner h1.inv4-banner__title {
  display: block;                       /* beats the global inline h1 reset */
  font-family: 'Poppins', sans-serif;   /* beats the global CenturyGothStd  */
  font-size: 56px;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  margin: 0;
  max-width: 536px;
}
.inv4-banner h1.inv4-banner__title em {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   2. Intro — copy left, existing investor video right
   -------------------------------------------------------------------------- */
.inv4-intro {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  max-width: 1440px;
  margin: 0 auto;
  padding: 90px 100px;
}
.inv4-intro__col {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 610px;
  flex: 0 0 610px;
}
.inv4-intro__heading {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  color: #000;
  margin: 0;
}
.inv4-intro__heading .inv4-accent {
  display: block;
  color: var(--inv-orange);
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 400;
}
.inv4-intro__body { font-size: 18px; line-height: 1.5; color: #000; margin: 0; }
.inv4-intro__media { width: 610px; flex: 0 0 610px; }
.inv4-intro__media video { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   3. Investor documents — tabbed panel
   -------------------------------------------------------------------------- */
.inv4-docs { padding: 0 100px 90px; display: flex; justify-content: center; }
.inv4-tabs {
  display: flex;
  gap: 20px;
  align-items: stretch;
  width: 100%;
  max-width: 1240px;
  background: #fff;
  border: 1px solid var(--inv-hairline);
  padding: 42px;
}

/* --- tab list (left rail) --- */
.inv4-tabs__list {
  width: 322px;
  flex: 0 0 322px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 24px;
  border-right: 1px solid var(--inv-hairline);
}
.inv4-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: #000;
  transition: background-color .18s ease, color .18s ease;
}
.inv4-tab__icon { flex: 0 0 24px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.inv4-tab__icon img { width: 21px; height: 21px; display: block; }
.inv4-tab__label { flex: 1 1 auto; font-size: 18px; font-weight: 400; line-height: 1.2; }
.inv4-tab__count {
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--inv-hairline);
  font-size: 14px;
  line-height: 1;
  color: #000;
}
.inv4-tab:hover { background: #f6f6f6; }
.inv4-tab[aria-selected="true"] { background: #000; color: #fff; }
.inv4-tab[aria-selected="true"] .inv4-tab__label { font-weight: 600; }
/* the exported glyphs are stroked black — invert them on the active row */
.inv4-tab[aria-selected="true"] .inv4-tab__icon img { filter: invert(1) brightness(2); }
.inv4-tab:focus-visible { outline: 2px solid var(--inv-orange); outline-offset: -2px; }

/* --- panels (right) --- */
.inv4-tabs__panels { flex: 1 1 auto; min-width: 0; }
.inv4-panel { display: flex; flex-direction: column; gap: 42px; }
.inv4-panel[hidden] { display: none; }
.inv4-panel__head { display: flex; flex-direction: column; gap: 20px; }
.inv4-panel__title {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  color: #000;
  margin: 0;
}
.inv4-panel__rule { height: 1px; background: var(--inv-hairline); border: 0; margin: 0; }
.inv4-panel__grid { display: flex; flex-wrap: wrap; gap: 20px; }
.inv4-panel__empty { font-size: 16px; color: var(--inv-grey); margin: 0; }

/* --- document card (whole card is the link) --- */
.inv4-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 386px;
  max-width: 100%;
  padding: 12px;
  border: 1px solid var(--inv-hairline);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.inv4-card:hover,
.inv4-card:focus-visible {
  border-color: #000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
  text-decoration: none;
  color: inherit;
}
.inv4-card:focus-visible { outline: 2px solid var(--inv-orange); outline-offset: 2px; }
.inv4-card__icon {
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  background: var(--inv-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
}
.inv4-card__icon img { width: 15px; height: 15px; display: block; }
.inv4-card__body { display: flex; flex-direction: column; min-width: 0; }
.inv4-card__title { font-size: 18px; font-weight: 500; line-height: 1.5; color: #000; }
.inv4-card__date {
  padding-top: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .84px;
  text-transform: uppercase;
  color: var(--inv-grey);
}

/* --------------------------------------------------------------------------
   4. CTA band
   -------------------------------------------------------------------------- */
.inv4-cta { background: var(--inv-cta-bg); }
.inv4-cta__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 97px;
  padding: 62px 101px;
}
.inv4-cta__text { width: 701px; flex: 1 1 701px; display: flex; flex-direction: column; gap: 24px; }
.inv4-cta__copy { font-size: 24px; font-weight: 500; line-height: 1.5; color: var(--inv-ink); margin: 0; }
.inv4-cta__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 22px;
  border: 1px solid var(--inv-ink);
  background: transparent;
  color: var(--inv-ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.inv4-cta__btn:hover,
.inv4-cta__btn:focus-visible { background: var(--inv-ink); color: #fff; text-decoration: none; }
.inv4-cta__media { flex: 0 0 auto; max-width: 468px; }
.inv4-cta__media img { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   5. Responsive
   Breakpoints follow the theme's existing 991/768/575 ladder.
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .inv4-intro { padding: 64px 40px; gap: 32px; }
  .inv4-intro__col, .inv4-intro__media { width: auto; flex: 1 1 0; }
  .inv4-docs { padding: 0 40px 64px; }
  .inv4-cta__inner { padding: 48px 40px; gap: 40px; }
  .inv4-cta__text { width: auto; }
  .inv4-banner__content > .container-fluid { padding: 0 40px; }
}

@media (max-width: 991px) {
  .inv4-banner { height: 420px; }
  .inv4-banner__content > .container-fluid { padding: 0 24px; }
  /* stacked/mobile: full-bleed cover is fine — the text sits over a vertical
     scrim rather than beside the photo, so edge cropping isn't noticeable */
  .inv4-banner__media { left: 0; right: 0; aspect-ratio: auto; max-width: none;
    -webkit-mask-image: none; mask-image: none; }
  .inv4-banner__scrim { background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.72) 100%); }
  .inv4-banner h1.inv4-banner__title { font-size: 40px; max-width: 100%; }

  .inv4-intro { flex-direction: column; padding: 48px 24px; }
  .inv4-intro__heading { font-size: 32px; }
  /* stacked: both columns span the full width (flex-basis:0 from the wider
     breakpoint would otherwise shrink the video to its intrinsic size) */
  .inv4-intro__col,
  .inv4-intro__media { width: 100%; flex: 0 0 auto; }

  .inv4-docs { padding: 0 24px 48px; }
  .inv4-tabs { flex-direction: column; padding: 24px; gap: 24px; min-width: 0; }
  /* Rail becomes a horizontal scroller above the panel.
     width/min-width must be pinned or the flex item sizes to its CONTENT and
     pushes the document wider instead of scrolling inside itself. */
  .inv4-tabs__list {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 0 1 auto;
    flex-direction: row;
    overflow-x: auto;
    padding-right: 0;
    padding-bottom: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--inv-hairline);
    -webkit-overflow-scrolling: touch;
  }
  .inv4-tabs__panels { width: 100%; }
  .inv4-tab { width: auto; flex: 0 0 auto; white-space: nowrap; }
  .inv4-tab__label { font-size: 16px; }
  .inv4-card { width: 100%; }

  .inv4-cta__inner { flex-direction: column; align-items: stretch; padding: 40px 24px; gap: 28px; }
  /* flex-basis becomes a HEIGHT once the container is a column, so the desktop
     `flex:1 1 701px` was forcing a 701px-tall text block — ~500px of dead space
     between the button and the image. Reset it to content height. */
  .inv4-cta__text { flex: 0 0 auto; width: 100%; gap: 20px; }
  .inv4-cta__copy { font-size: 20px; }
  .inv4-cta__btn { align-self: flex-start; }
  /* the artwork carries transparent padding, so cap it and centre rather than
     letting it stretch edge-to-edge */
  .inv4-cta__media { flex: 0 0 auto; width: 100%; max-width: 360px; margin: 0 auto; }
}

@media (max-width: 575px) {
  .inv4-banner { height: 360px; }
  .inv4-banner h1.inv4-banner__title { font-size: 32px; }
  .inv4-intro__heading { font-size: 28px; }
  .inv4-intro__body { font-size: 16px; }
  .inv4-tabs { padding: 16px; }
  .inv4-card__title { font-size: 16px; }
}

/* BSE filings: cards with no PDF render as visibly non-clickable (not a link) */
.inv4-card--nolink { cursor: default; opacity: .68; }
.inv4-card--nolink:hover { transform: none !important; box-shadow: none !important; border-color: var(--inv-hairline) !important; }
.inv4-card__note { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .85; }

/* BSE filings: recognisable red PDF icon (Bootstrap Icons filetype-pdf, MIT, recoloured red).
   Shown without the yellow chip so it reads as a standard PDF file mark; larger for legibility.
   Chip footprint (29px) unchanged so cards do not shift. */
#inv4-panel-bse-announcement .inv4-card__icon { background: transparent; }
#inv4-panel-bse-announcement .inv4-card__icon img { width: 24px; height: 24px; }