/* =========================================================================
   IRVx Softlabs : components.css
   Shared building blocks for every page (loaded after base.css): page heroes,
   the split layout, the blue-dot list, stat rows, the people cards, the
   partner logo strip, the dotted map with pins, form fields, the closing
   band, the legal document layout, and the motion starting states. Flat
   colour only.
   ========================================================================= */

/* ------------------------------------------------------------ Page heroes */
/* Light by default; --dark for a navy hero (set body.dark-top on the page so the
   header sits over it in white at the top); --photo for a full-bleed photo under a flat tint. */
.page-hero { position: relative; padding: calc(var(--header-h) + 3.5rem) 0 clamp(48px, 6vw, 80px); background: var(--bg-soft); overflow: hidden; }
.page-hero--dark { background: var(--ink); color: var(--on-dark); }
.page-hero--photo { min-height: clamp(520px, 64vh, 760px); display: flex; align-items: flex-end; }
.page-hero__bg { position: absolute; inset: -30px 0; z-index: 0; }   /* bleeds by the parallax distance */
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 50% 50%); display: block; }
.page-hero__tint { position: absolute; inset: 0; z-index: 0; background: rgba(5, 8, 15, .58); }
.page-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 4rem; align-items: end; }
.page-hero__inner--single { grid-template-columns: minmax(0, 1fr); }
.page-hero h1 { font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.4rem); max-width: 16ch; margin: 0 0 1rem; }
.page-hero--dark h1 { color: var(--white); }
.page-hero__lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); max-width: 40rem; margin: 0; }
.page-hero--dark .page-hero__lead { color: var(--on-dark); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.page-hero__aside { justify-self: end; width: 100%; max-width: 480px; }
.page-hero__aside figure { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.page-hero__aside figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 991.98px) {
  .page-hero__inner { grid-template-columns: 1fr; }
  .page-hero__aside { justify-self: start; max-width: 560px; }
}
@media (max-width: 575.98px) { .page-hero__bg img { object-position: var(--hero-pos-m, var(--hero-pos, 50% 50%)); } }

/* --------------------------------------------------------------- Layout */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem 4rem; align-items: start; }
.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.section--tight { padding: clamp(48px, 5vw, 72px) 0; }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark p { color: var(--on-dark); }
.lead { font-size: 1.12rem; }
@media (max-width: 991.98px) {
  .split, .split--even { grid-template-columns: 1fr; gap: 2rem; }
}

/* -------------------------------------------------------- Blue-dot list */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.checks li { display: flex; gap: .7rem; align-items: flex-start; }
.checks li::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--blue-bright); margin-top: .55rem; }

/* ------------------------------------------------------------ People cards */
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.pcard { margin: 0; }
.pcard__ph { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); }
.pcard__ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.pcard:hover .pcard__ph img { transform: scale(1.05); }
.pcard figcaption { padding: .9rem .1rem 0; }
.pcard__label { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: .3rem; }
.section--dark .pcard__label { color: var(--blue-on-dark); }
.pcard__text { display: block; font-family: var(--display); font-weight: 700; font-size: .98rem; line-height: 1.35; color: var(--ink); letter-spacing: -.01em; }
.section--dark .pcard__text { color: var(--white); }
@media (max-width: 991.98px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
/* Phones: the four cards stay two by two */
@media (max-width: 575.98px) { .people { gap: .85rem; } }

/* ---------------------------------------------------------- Partner logos */
/* Real logo files at their own display height (--h on the img) so the row reads evenly */
.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.7fr); gap: 2rem 1.5rem; align-items: center; }
.logos li { display: flex; align-items: center; justify-content: center; min-height: 56px; }
.logos img { display: block; height: var(--h, 36px); width: auto; max-width: 100%; object-fit: contain; }
.logos li.logos__more { justify-content: flex-start; flex-wrap: wrap; border-left: 1px solid var(--line-strong); padding-left: 1.25rem; gap: .5rem 1.1rem; }
.logos__other { font-size: .82rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 991.98px) {
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
  .logos li.logos__more { grid-column: 1 / -1; justify-content: center; border-left: 0; padding-left: 0; }
}
@media (max-width: 575.98px) {
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .logos img { height: calc(var(--h, 36px) * .8); }
  /* An odd logo before "and other partners" would sit alone in its row: centre it across both columns */
  .logos li:nth-last-child(2):nth-child(odd) { grid-column: 1 / -1; }
}

/* ------------------------------------------------------ The world map */
/* The dots are an SVG image; the arcs and pins sit on top. Each pin IS the dot,
   anchored on the city coordinate; its label sits above or below the dot. */
.wmap { position: relative; aspect-ratio: 2000 / 801; }
.wmap img { display: block; width: 100%; height: 100%; }
.wmap__arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wmap__arcs path { fill: none; stroke: var(--blue-bright); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: var(--blue-bright); border: 2px solid var(--white); box-shadow: 0 0 0 4px rgba(47, 124, 246, .25); }
.pin::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--blue-bright); opacity: 0; }
.pin__label { position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; line-height: 1.1; white-space: nowrap; padding: .2rem .45rem; border-radius: 6px; background: rgba(11, 18, 32, .82); }
.pin--top .pin__label { bottom: calc(100% + 8px); }
.pin--bottom .pin__label { top: calc(100% + 8px); }
.pin__label b { color: var(--white); font-family: var(--display); font-weight: 700; font-size: clamp(.8rem, .65rem + .5vw, 1rem); }
.pin__label small { color: rgba(255, 255, 255, .78); font-size: clamp(.75rem, .65rem + .2vw, .8rem); }
@media (max-width: 575.98px) { .pin__label small { display: none; } }

/* ------------------------------------------------------------------- Form */
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; font-size: .92rem; color: var(--ink); }
.field small { color: var(--muted); font-size: .82rem; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; color: var(--ink); background: var(--white);
  border: 1px solid var(--line-strong); border-radius: 12px; padding: .8rem 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--blue); }
/* Keyboard focus keeps the site-wide ring; a pointer focus only turns the border blue */
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (max-width: 575.98px) { .form__row { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- Subline */
/* Titles stay short; the longer line that belongs with them sits right under, in display type */
.subline, .statement p.subline { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.4; letter-spacing: -.015em; color: var(--ink); max-width: 32ch; margin-top: 0; margin-bottom: .9rem; }
.section--dark .statement p.subline, .section--dark .subline { color: var(--white); }

/* ------------------------------------------------------------ Closing band */
.cta-band { position: relative; overflow: hidden; background: var(--ink); color: var(--white); padding: clamp(64px, 8vw, 120px) 0; }
.cta-band__bg { position: absolute; inset: -60px 0; z-index: 0; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; display: block; }
.cta-band__tint { position: absolute; inset: 0; z-index: 0; background: rgba(8, 11, 18, .6); }
.cta-band__inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem 3rem; }
.cta-band h2 { color: var(--white); font-size: clamp(1.9rem, 1.25rem + 2vw, 3rem); max-width: 16ch; margin: 0 0 .8rem; }
.cta-band h2 .w { display: inline-block; }
.cta-band p { color: var(--on-dark); font-size: 1.05rem; max-width: 38rem; margin: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --------------------------------------------------------- Legal documents */
.read-progress { position: fixed; inset: 0 0 auto 0; z-index: 1040; height: 3px; background: var(--blue-bright); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.doc { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 3rem 4rem; align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + 1rem); padding: 1.25rem; border-radius: 16px; background: var(--bg-soft); }
.toc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary small { font-size: inherit; font-weight: 600; letter-spacing: .08em; color: var(--muted); }
@media (min-width: 992px) { .toc summary { pointer-events: none; } .toc summary small { display: none; } }
/* Phones and tablets: the contents fold into one row above the text, opened on demand */
@media (max-width: 991.98px) {
  .toc summary { min-height: 44px; margin: 0; cursor: pointer; color: var(--ink); }
  .toc summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--blue-bright); border-bottom: 2px solid var(--blue-bright); transform: rotate(45deg) translateY(-2px); transition: transform .3s ease; flex: 0 0 auto; }
  .toc details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
  .toc details[open] summary { margin-bottom: .4rem; }
  .toc summary small { margin-left: auto; }
}
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.toc a { display: flex; align-items: center; min-height: 44px; padding: .45rem .6rem; border-radius: 8px; color: var(--body); font-size: .9rem; }
.toc a:hover, .toc a.is-current { color: var(--blue-700); background: var(--white); }
.doc__body { max-width: 72ch; }
.doc__body h2 { font-size: 1.5rem; margin: 2.4rem 0 .8rem; scroll-margin-top: calc(var(--header-h) + 16px); }
.doc__body h2:first-child { margin-top: 0; }
.doc__body h3 { font-size: 1.1rem; margin: 1.4rem 0 .5rem; }
.doc__body ul { padding-left: 1.2rem; }
.doc__body li { margin-bottom: .35rem; }
.doc__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.doc__meta span { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: var(--radius-pill); background: var(--white); border: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
@media (max-width: 991.98px) { .doc { grid-template-columns: 1fr; } .toc { position: static; padding: .6rem 1.25rem; } }

/* ------------------------------------------------- Motion: starting states */
html.has-motion .m-up    { opacity: 0; transform: translateY(40px); }
html.has-motion .m-left  { opacity: 0; transform: translateX(-48px); }
html.has-motion .m-right { opacity: 0; transform: translateX(48px); }
html.has-motion .m-fade  { opacity: 0; }   /* fade only: for anchor targets, whose box must never be offset */
html.has-motion .m-line  { transform: scaleX(0); }
html.has-motion [data-words] .w { opacity: 0; transform: translateY(.6em); }
html.has-motion .wmap__arcs path { stroke-dashoffset: 1; }
html.has-motion .wmap.is-in .wmap__arcs path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.16, 1, .3, 1); }
html.has-motion .wmap.is-in .wmap__arcs path:nth-child(2) { transition-delay: .9s; }
html.has-motion .pin { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
html.has-motion .wmap.is-in .pin { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: opacity .6s ease, transform .8s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(.25s + var(--i, 0) * .45s); }
html.has-motion .wmap.is-in .pin::after { animation: pin-pulse 2.6s ease-out infinite; animation-delay: calc(1.2s + var(--i, 0) * .45s); }
@keyframes pin-pulse { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }

/* Photo reveals: the image wipes open once its figure is in view. The clip sits on
   the image, not the figure (a fully clipped figure would never be observed). */
html.has-motion [data-wipe] img { clip-path: inset(0 0 100% 0); transition: clip-path .7s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); }
html.has-motion [data-wipe].is-in img { clip-path: inset(0 0 0 0); }

/* ------------------------------------------------- Spacing utilities (last, so they win) */
.mt-2 { margin-top: 1.25rem !important; }
.mt-3 { margin-top: 2rem !important; }