/* =========================================================================
   IRVx Softlabs : inner.css
   Editorial layer for the inner pages (loaded after components.css on pages
   with body class "inner"). More air, bigger type, fewer boxes: statements,
   word lists, intersections, chains, fact grids, photo strips, city lines.
   Navy, white and blue. Flat colour only.
   ========================================================================= */

/* ------------------------------------------------------------- Rhythm */
.inner .section { padding: clamp(96px, 10vw, 150px) 0; }
.inner .section--tight { padding: clamp(64px, 7vw, 100px) 0; }
.inner .page-hero { padding-top: calc(var(--header-h) + 5.5rem); padding-bottom: clamp(72px, 8vw, 120px); }
.inner .page-hero--photo { min-height: clamp(580px, 74vh, 840px); }
.inner .page-hero h1 { font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.6rem); max-width: 18ch; margin-bottom: 1.1rem; }
.inner .page-hero--long h1 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.1rem); max-width: 24ch; }
.inner .page-hero__lead { font-size: clamp(1.12rem, 1rem + .45vw, 1.35rem); max-width: 32rem; line-height: 1.55; }
.inner .page-hero__actions { margin-top: 2rem; }
.inner .sec-head h2 { font-size: clamp(1.85rem, 1.25rem + 1.8vw, 2.7rem); }
.inner .sec-head p { font-size: 1.12rem; max-width: 44ch; }
.inner .lead { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.6; max-width: 34rem; }
.inner .lead + .lead { margin-top: .25rem; }
.inner .cta-band { padding: clamp(96px, 11vw, 170px) 0; }
.inner .cta-band h2 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.2rem); }
.inner .split { gap: 3rem 5rem; }
.mt-4 { margin-top: 3rem !important; }

/* ---------------------------------------------------------- Statement */
/* One big line and one short line. The quiet centre of a section. */
.statement h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); max-width: 17ch; margin: 0 0 1.1rem; line-height: 1.06; }
.split .statement h2 { font-size: clamp(1.8rem, 1.25rem + 1.7vw, 2.6rem); max-width: 16ch; }
.statement p { font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); line-height: 1.55; max-width: 36rem; margin: 0; }
.statement .label { margin-bottom: 1.4rem; }
.statement--center { text-align: center; }
.statement--center h2, .statement--center p { margin-inline: auto; }
.statement--center .label { justify-content: center; }
.section--dark .statement h2 { color: var(--white); }
.section--dark .statement p { color: var(--on-dark); }

/* A short statement beside a long list: the statement stays in view while the list scrolls */
@media (min-width: 992px) { .split--sticky > :first-child { position: sticky; top: calc(var(--header-h) + 2rem); } }

/* ------------------------------------------------------------ Word list */
/* A big word, a short line. Rules between rows, two columns on desktop. */
.wordlist { list-style: none; margin: 0; padding: 0; }
.wordlist li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: .35rem 2.5rem; align-items: baseline; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.wordlist b { font-family: var(--display); font-weight: 800; font-size: clamp(1.2rem, .95rem + .8vw, 1.6rem); letter-spacing: -.03em; line-height: 1.15; color: var(--ink); }
.wordlist span { color: var(--body); font-size: 1.04rem; line-height: 1.5; }
.wordlist li:first-child { border-top: 2px solid var(--ink); }
.section--dark .wordlist li { border-bottom-color: var(--line-dark); }
.section--dark .wordlist li:first-child { border-top-color: rgba(255, 255, 255, .5); }
.section--dark .wordlist b { color: var(--white); }
.section--dark .wordlist span { color: var(--on-dark); }
@media (max-width: 991.98px) {
  .wordlist li { grid-template-columns: 1fr; gap: .2rem; padding: 1.1rem 0; }
}

/* ------------------------------------------------------- Intersections */
/* "Healthcare x Technology": big lines, the x in blue. */
.pairs { list-style: none; margin: 0; padding: 0; }
.pairs li { display: flex; align-items: baseline; gap: .3em; padding: .55rem 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, .9rem + 2vw, 2.8rem); letter-spacing: -.035em; line-height: 1.1; color: var(--ink); }
.pairs li:first-child { border-top: 2px solid var(--ink); }
/* The lines never clip: the size also follows the list's own width (container units), and a
   line that still does not fit wraps after the x */
.pairs { container-type: inline-size; }
.pairs li { flex-wrap: wrap; font-size: min(clamp(1.5rem, .9rem + 2vw, 2.8rem), 8.3cqi); }
.pairs i { font-style: normal; color: var(--blue-bright); font-size: .72em; }
.mono { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .6rem; padding: 2.2rem 2.6rem; border-radius: 20px; background: var(--ink); color: var(--white); }
.mono b { font-family: var(--display); font-weight: 800; font-size: clamp(3.2rem, 2rem + 3.5vw, 5rem); line-height: .9; letter-spacing: -.06em; }
.mono b i { font-style: normal; color: var(--blue-bright); }
.mono small { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-muted); }

/* ------------------------------------------------------------ Gallery */
/* Real photos: one tall beside four. Phones: the tall one full width, the rest two by two. */
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(190px, 18vw, 280px)); gap: 1rem; }
.gallery li { min-width: 0; }
.gallery li:first-child { grid-row: span 2; }
.gallery figure { height: 100%; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); }
.gallery img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 40%); display: block; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.gallery figure:hover img { transform: scale(1.04); }
.gallery__note { margin: 0 0 .35rem; font-size: .92rem; color: var(--muted); max-width: 30ch; }
.bg-soft .gallery figure { background: var(--white); }
@media (max-width: 767.98px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: .6rem; }
  .gallery li:first-child { grid-column: 1 / -1; grid-row: auto; }
  .gallery figure { height: 42vw; }
  .gallery li:first-child figure { height: 72vw; }
}

/* ------------------------------------------------------------ City line */
.cities-line { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2.5rem; }
.cities-line li { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.cities-line b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 1rem + .8vw, 1.65rem); letter-spacing: -.03em; color: var(--ink); margin-bottom: .3rem; }
.cities-line small { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: .4rem; }
.cities-line span { display: block; color: var(--body); font-size: 1rem; }
.section--dark .cities-line li { border-top-color: rgba(255, 255, 255, .5); }
.section--dark .cities-line b { color: var(--white); }
.section--dark .cities-line small { color: var(--blue-on-dark); }
.section--dark .cities-line span { color: var(--on-dark); }
.map-wide { max-width: 1100px; margin-inline: auto; }
@media (max-width: 767.98px) { .cities-line { grid-template-columns: 1fr; gap: 1.25rem; } }


/* --------------------------------------------------------------- Reach */
.reach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 3rem; }
.reach b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 1rem + .8vw, 1.65rem); letter-spacing: -.03em; color: var(--white); margin-bottom: .35rem; }
.reach span, .reach a { display: block; color: var(--on-dark); font-size: 1rem; line-height: 1.55; }
.reach a:hover { color: var(--white); }
.reach li { list-style: none; border-top: 1px solid rgba(255, 255, 255, .4); padding-top: 1.1rem; }
.reach { margin: 0; padding: 0; }
.reach__contact { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); }
.reach__contact a { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; color: var(--white); font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem); letter-spacing: -.02em; }
.reach__contact a:hover { color: var(--blue-on-dark); }
.reach__contact svg { color: var(--blue-on-dark); }
@media (max-width: 767.98px) { .reach { grid-template-columns: 1fr; gap: 1.25rem; } }

/* ------------------------------------------------------------ Form, lean */
.inner .field label { font-family: var(--display); font-size: 1rem; }
.inner .field textarea { min-height: 96px; }

/* ------------------------------------------------------------ Not found */
/* A short page: the hero fills the screen down to the footer */
.page-404 { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.page-404 main { flex: 1 0 auto; display: flex; flex-direction: column; }
.page-404 .page-hero { flex: 1 0 auto; display: flex; align-items: center; }

/* ------------------------------------------------------ Closing band */
.cta-band__inner { align-items: center; }
.cta-band__copy { max-width: 40rem; }