/* ==========================================================================
   NICU Jargon Rx - pages.css
   Page-specific compositions: hero, founder, story, hospitals, contact.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HOMEPAGE HERO
   Asymmetric editorial composition. Type holds the left field; the five
   category cards fan off the right edge of the page.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* The hero closed on zero bottom padding because the category index strip
     used to sit here and provide the gap. With that strip removed the CTA row
     ran straight into the rule that opens the next section: 24px of clearance
     at 1440px and exactly 0px at 1280px, where the image column happens to end
     level with the buttons.
     This restores the breathing room on the section itself rather than on the
     buttons, and scales with the viewport so it stays proportional: about 44px
     at desktop, 40px at laptop, 30px at tablet, 24px at mobile. The narrow
     breakpoints already have room to spare, because the hero image stacks
     below the buttons there, so they get the smallest addition. */
  padding-block: clamp(3rem, 1rem + 6vw, 6.5rem) clamp(1.5rem, .6rem + 2.4vw, 2.75rem);
  overflow: hidden;
}

/* A single soft teal wash - the only atmospheric effect on the site */
.hero::before {
  content: "";
  position: absolute;
  inset-block-start: -22rem;
  inset-inline-end: -14rem;
  width: 62rem; height: 62rem;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--brand) 13%, transparent) 0%, transparent 58%);
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(2.5rem, 1rem + 5vw, 4rem);
  align-items: center;
  min-height: min(78vh, 46rem);
}
.hero__type  { grid-column: 1 / 7; }
.hero__stage { grid-column: 7 / -1; position: relative; }

@media (max-width: 1023px) {
  .hero__type  { grid-column: 1 / -1; }
  .hero__stage { grid-column: 1 / -1; }
  .hero__inner { min-height: 0; }
}

/* --- Lockup --------------------------------------------------------------- */
.hero__lockup { display: flex; flex-direction: column; gap: .35rem; }
.hero__nicu {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.1rem, .8rem + 1.5vw, 2.05rem);
  letter-spacing: .34em;
  color: var(--brand-deep);
  line-height: 1;
  text-indent: .34em;
}
.hero__logo { width: clamp(15rem, 11rem + 22vw, 30rem); height: auto; }

.hero__tagline {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3.05rem);
  font-style: italic;
  line-height: 1.08;
  letter-spacing: -.024em;
  font-variation-settings: "SOFT" 44, "WONK" 1;
  color: var(--ink);
  margin-block-start: clamp(1.25rem, .8rem + 1.6vw, 2rem);
  max-width: 15ch;
}

.hero__support {
  margin-block-start: clamp(1.1rem, .8rem + 1vw, 1.6rem);
  max-width: 42ch;
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 1.5;
  letter-spacing: -.012em;
}

.hero__actions { margin-block-start: clamp(1.6rem, 1rem + 1.8vw, 2.4rem); }

/* --- The fanned deck ------------------------------------------------------ */
.hero-fan {
  --fan-w: clamp(9.5rem, 4rem + 15vw, 19rem);
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(var(--fan-w) * 1.16);
  /* Let the fan bleed past the container's right gutter */
  margin-inline-end: calc(var(--gutter) * -1);
}

/* The fan is ~2.84x a single card wide, so at desktop it is wider than its
   column. Nudge it right by exactly half the overflow: its left edge lands on
   the column edge and every excess pixel bleeds off the right of the page,
   instead of spilling over the headline copy. */
@media (min-width: 1024px) {
  .hero-fan {
    transform: translateX(max(0px, calc((var(--fan-w) * 2.32 - 100%) / 2)));
  }
}

.hero-fan__card {
  grid-area: 1 / 1;
  width: var(--fan-w);
  transform:
    translate3d(calc((var(--i) - 2) * (var(--fan-w) * .33)),
                calc(var(--d, 0) * 1.1rem), 0)
    rotate(calc((var(--i) - 2) * 6.2deg));
  transform-origin: 50% 130%;
  transition: transform 820ms var(--ease-out), box-shadow var(--dur-3) var(--ease);
  will-change: transform;
}
.hero-fan__card:nth-child(1) { z-index: 1; }
.hero-fan__card:nth-child(2) { z-index: 2; }
.hero-fan__card:nth-child(3) { z-index: 3; }
.hero-fan__card:nth-child(4) { z-index: 2; }
.hero-fan__card:nth-child(5) { z-index: 1; }

/* Cursor parallax - pointer-fine only, driven by --mx/--my set in main.js */
@media (hover: hover) and (pointer: fine) {
  .hero-fan {
    perspective: 1400px;
  }
  .hero-fan__card {
    transform:
      translate3d(
        calc((var(--i) - 2) * (var(--fan-w) * .33) + var(--mx, 0) * (2px + (var(--i) * 1.6px))),
        calc(var(--d, 0) * 1.1rem + var(--my, 0) * 5px),
        0)
      rotate(calc((var(--i) - 2) * 6.2deg));
  }
}

/* Entrance: cards deal into the fan on load */
.hero-fan__card {
  animation: fanIn 1s var(--ease-out) both;
  animation-delay: calc(180ms + var(--i) * 90ms);
}
@keyframes fanIn {
  from { opacity: 0; transform: translate3d(0, 44px, 0) rotate(0deg) scale(.94); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fan__card { animation: none; }
}

@media (max-width: 1023px) {
  .hero-fan { --fan-w: clamp(8.5rem, 4rem + 17vw, 15rem); margin-inline-end: 0; }
}
@media (max-width: 599px) {
  .hero-fan { --fan-w: 46vw; min-height: calc(46vw * 1.25); }
  .hero-fan__card {
    transform:
      translate3d(calc((var(--i) - 2) * (var(--fan-w) * .30)),
                  calc(var(--d, 0) * .7rem), 0)
      rotate(calc((var(--i) - 2) * 5.4deg));
  }
}

/* --- Hero category index strip -------------------------------------------- */
.hero-index {
  position: relative;
  z-index: 1;
  margin-block-start: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  border-block-start: 1px solid var(--line);
  padding-block-start: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .85rem clamp(1.25rem, .5rem + 2.4vw, 2.75rem);
}
.hero-index__label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-inline-end: .5rem;
}
.hero-index__item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.004em;
}
.hero-index__item .cat-swatch { width: .5rem; height: .5rem; }

@media (max-width: 599px) {
  .hero-index { gap: .6rem 1.1rem; }
  .hero-index__item { font-size: var(--fs-xs); }
  .hero-index__label { flex: 1 0 100%; margin-block-end: .2rem; }
}

/* --------------------------------------------------------------------------
   2. THE STATEMENT - large type on ink, the emotional turn
   -------------------------------------------------------------------------- */
.statement {
  background: var(--ink);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.statement::before {
  content: "";
  position: absolute;
  inset-block-start: -20%;
  inset-inline-start: 50%;
  width: 56rem; height: 56rem;
  transform: translateX(-50%);
  background: radial-gradient(circle,
    color-mix(in srgb, var(--brand) 22%, transparent) 0%, transparent 62%);
  pointer-events: none;
}
.statement__inner { position: relative; }

.statement__text {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.1rem + 4.4vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-variation-settings: "SOFT" 18, "WONK" 0;
  text-wrap: balance;
  max-width: 20ch;
}
.statement__text em {
  font-style: italic;
  color: var(--brand-lift);
  font-variation-settings: "SOFT" 44, "WONK" 1;
}

/* Word-by-word reveal */
.reveal-words > span {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* The mask is sized to the line box, but Fraunces' descenders (g, y, p, j)
     and the Q tail extend past it, so overflow:hidden was shearing the bottom
     off those glyphs. Pad the mask and pull the padding back with an equal
     negative margin: the box gets taller, the layout does not move. */
  padding-block-end: .2em;
  margin-block-end: -.2em;
}
/* Hidden state is applied only once JS has split the words, so the text is
   always visible if JS never runs or fails. */
.reveal-words > span > span {
  display: inline-block;
  transition: transform 900ms var(--ease-out);
  transition-delay: calc(var(--w, 0) * 55ms);
}
.reveal-words.is-split > span > span { transform: translateY(105%); }
.reveal-words.is-split.is-in > span > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-words > span > span { transform: none !important; }
}

/* --------------------------------------------------------------------------
   3. FOUNDER
   -------------------------------------------------------------------------- */
.founder {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: center;
}
.founder__portrait { grid-column: 1 / 6; }
.founder__body { grid-column: 7 / 12; }
.founder--right .founder__portrait { grid-column: 8 / -1; order: 2; }
.founder--right .founder__body { grid-column: 1 / 7; order: 1; }
@media (max-width: 899px) {
  .founder__portrait, .founder__body,
  .founder--right .founder__portrait, .founder--right .founder__body {
    grid-column: 1 / -1; order: initial;
  }
  .founder__portrait { max-width: 26rem; }
}

.founder__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -.024em;
  font-variation-settings: "SOFT" 18, "WONK" 0;
}
.founder__role {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--brand-deep);
  letter-spacing: .01em;
  margin-block-start: .45rem;
}
.on-ink .founder__role { color: var(--brand-lift); }

/* Signature-style attribution rule */
.founder__sign {
  margin-block-start: var(--sp-3);
  padding-block-start: var(--sp-2);
  border-block-start: 1px solid var(--line);
}
.on-ink .founder__sign { border-block-start-color: var(--line-dark); }

/* --------------------------------------------------------------------------
   4. EDITORIAL LONG-FORM (Our Story)
   -------------------------------------------------------------------------- */
.editorial { --col: 1 / 8; }
.editorial__block { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); }
.editorial__block + .editorial__block { margin-block-start: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem); }

.editorial__aside {
  grid-column: 1 / 3;
  padding-block-start: .55rem;
}
.editorial__text { grid-column: 4 / 11; max-width: var(--measure); }

@media (max-width: 899px) {
  .editorial__aside { grid-column: 1 / -1; margin-block-end: var(--sp-2); }
  .editorial__text { grid-column: 1 / -1; }
}

.editorial__text > p + p { margin-block-start: 1.15em; }
.editorial__text p {
  font-size: clamp(1.0625rem, 1rem + .32vw, 1.1875rem);
  line-height: 1.68;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
}

/* Drop cap on the first paragraph of the story */
.dropcap::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.9em;
  line-height: .82;
  padding-inline-end: .1em;
  padding-block-start: .06em;
  color: var(--brand-deep);
  font-variation-settings: "SOFT" 16, "WONK" 0;
}

/* --------------------------------------------------------------------------
   5. HOSPITALS
   -------------------------------------------------------------------------- */
.usecases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-block-start: 1px solid var(--line);
}
.usecase {
  padding: clamp(1.25rem, .9rem + 1.4vw, 1.9rem) clamp(1rem, .6rem + 1.4vw, 1.75rem)
           clamp(1.5rem, 1rem + 1.8vw, 2.25rem) 0;
  border-block-end: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.usecase + .usecase { border-inline-start: 1px solid var(--line); padding-inline-start: clamp(1rem, .6rem + 1.4vw, 1.75rem); }
.usecase:nth-child(3n + 1) { border-inline-start: 0; padding-inline-start: 0; }
.usecase__num {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em;
  color: var(--brand-deep); font-variant-numeric: tabular-nums;
}
.usecase__title { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -.012em; }
.usecase__text { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }

@media (max-width: 899px) {
  .usecases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usecase:nth-child(3n + 1) { border-inline-start: 1px solid var(--line); padding-inline-start: clamp(1rem, .6rem + 1.4vw, 1.75rem); }
  .usecase:nth-child(2n + 1) { border-inline-start: 0; padding-inline-start: 0; }
}
@media (max-width: 599px) {
  .usecases { grid-template-columns: 1fr; }
  .usecase, .usecase:nth-child(3n + 1), .usecase:nth-child(2n + 1) {
    border-inline-start: 0; padding-inline-start: 0;
  }
}

/* Inquiry form panel */
.inquiry {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  box-shadow: var(--sh-2);
}
.inquiry__head { margin-block-end: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

/* --------------------------------------------------------------------------
   6. CONTACT
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(2.5rem, 1.5rem + 4vw, 4rem);
}
.contact-grid__form { grid-column: 1 / 8; }
.contact-grid__aside { grid-column: 9 / -1; }
@media (max-width: 899px) {
  .contact-grid__form, .contact-grid__aside { grid-column: 1 / -1; }
}

.contact-item { padding-block: var(--sp-2); border-block-start: 1px solid var(--line); }
.contact-item:last-child { border-block-end: 1px solid var(--line); }
.contact-item__label {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-block-end: .35rem;
}
.contact-item__value { font-size: var(--fs-sm); line-height: 1.5; }

/* --------------------------------------------------------------------------
   7. LEGAL / SIMPLE PAGES
   -------------------------------------------------------------------------- */
.legal { max-width: 44rem; }
.legal h2 {
  font-size: var(--fs-h3);
  margin-block: clamp(2rem, 1.2rem + 2.4vw, 3rem) var(--sp-2);
}
.legal h2:first-of-type { margin-block-start: var(--sp-4); }
.legal p, .legal li { color: color-mix(in srgb, var(--ink) 85%, transparent); }
.legal p + p { margin-block-start: 1.1em; }
.legal ul { margin-block-start: var(--sp-2); display: grid; gap: .5rem; }
.legal ul li { position: relative; padding-inline-start: 1.15rem; }
.legal ul li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .72em;
  width: .5rem; height: 1px; background: var(--brand);
}
.legal .placeholder-note {
  margin-block-start: var(--sp-4);
  padding: 1.15rem 1.35rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  font-size: var(--fs-sm);
  color: var(--muted);
  background: color-mix(in srgb, var(--bone-deep) 60%, transparent);
}

/* --------------------------------------------------------------------------
   8. 404
   -------------------------------------------------------------------------- */
.notfound {
  min-height: 62vh;
  display: grid;
  align-content: center;
  padding-block: var(--section-y);
}
.notfound__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 2rem + 12vw, 10rem);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--brand-deep);
  font-variation-settings: "SOFT" 16, "WONK" 0;
}