/* Runi Services parent visual system — relationship first. */
/* Design tokens moved to assets/css/runi-tokens.css — this file is the
   homepage's section styles, not the place colours are defined. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  overflow-x: clip;
  background: var(--rs-paper);
  color: var(--rs-ink);
  font-family: var(--rs-serif);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-image: url('/assets/bg-texture.png');
  background-size: 1100px auto;
  background-blend-mode: multiply;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

.rs-shell { width: min(calc(100% - 64px), var(--rs-max)); margin-inline: auto; }
.rs-kicker {
  color: var(--rs-red);
  font: 700 0.7rem/1 var(--rs-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rs-section-heading {
  max-width: 920px;
  font: 600 clamp(2.7rem, 6vw, 5.8rem)/0.96 var(--rs-sans);
  letter-spacing: -0.065em;
}
.rs-section-intro {
  max-width: 700px;
  color: rgba(21, 19, 17, 0.7);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
}
.rs-arrow { font-family: var(--rs-sans); }

/* Selected direction: the inhabited room. */
.home-hero {
  border-bottom: 1px solid var(--rs-line);
  background: var(--rs-paper);
}
.home-hero__grid {
  min-height: min(790px, calc(100svh - 134px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.home-hero__copy {
  min-width: 0;
  container-type: inline-size;
  padding: clamp(56px, 5vw, 80px) clamp(32px, 5vw, 80px) clamp(56px, 5vw, 80px) max(32px, calc((100vw - var(--rs-max)) / 2));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home-hero h1 {
  max-width: 12ch;
  margin: 24px 0 28px;
  font: 650 clamp(3rem, 5.8vw, 6rem)/1.02 var(--rs-sans);
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.home-hero__lede {
  max-width: 520px;
  color: rgba(21, 19, 17, 0.76);
  font-size: clamp(1.15rem, 1.8vw, 1.42rem);
  line-height: 1.48;
}
.home-hero__statement {
  max-width: 490px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 2px solid var(--rs-red);
  color: var(--rs-navy);
  font: 650 0.78rem/1.55 var(--rs-sans);
  letter-spacing: 0.02em;
}
.home-hero__figure {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  border-left: 1px solid var(--rs-line);
  background: #c8c2b7;
}
.home-hero__image-wrap { min-height: 0; overflow: hidden; }
.home-hero__image {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: 57% center;
  filter: saturate(0.78) contrast(1.03) sepia(0.08);
}
.home-hero__caption {
  min-height: 68px;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(21, 19, 17, 0.32);
  background: var(--rs-paper-deep);
  color: rgba(21, 19, 17, 0.72);
  font: 600 0.67rem/1.4 var(--rs-sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.origin {
  padding: clamp(90px, 12vw, 170px) 0;
  border-bottom: 1px solid var(--rs-line);
}
.origin__heading { margin: 24px 0 40px; }
.origin__opening {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.55fr);
  gap: clamp(52px, 9vw, 130px);
  align-items: end;
}
.origin__prose { max-width: 690px; font-size: clamp(1.25rem, 2.35vw, 1.75rem); line-height: 1.46; }
.origin__prose p + p { margin-top: 1em; }
.origin__aside {
  padding-top: 24px;
  border-top: 2px solid var(--rs-red);
  color: rgba(21, 19, 17, 0.68);
  font-size: 1rem;
}
.origin__evidence {
  margin-top: clamp(70px, 9vw, 120px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.64fr);
  gap: 20px;
  align-items: stretch;
}
.origin__evidence figure { position: relative; overflow: hidden; background: #d1cabd; }
.origin__evidence img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; filter: saturate(0.72) contrast(1.04) sepia(0.08); }
.origin__evidence figure:first-child img { object-position: center; }
.origin__evidence figure:last-child img { object-position: 64% center; }
.origin__evidence figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 46px 20px 18px;
  background: linear-gradient(transparent, rgba(11, 19, 32, 0.86));
  color: var(--rs-paper);
  font: 600 0.68rem/1.35 var(--rs-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.why {
  background: var(--rs-navy);
  color: var(--rs-paper);
}
.why__grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 500px; }
.why__statement,
.why__explanation { padding: clamp(68px, 9vw, 120px); display: flex; flex-direction: column; justify-content: center; }
.why__statement { border-right: 1px solid var(--rs-line-light); }
.why__statement h2 {
  max-width: 10ch;
  margin-top: 28px;
  font: 600 clamp(3rem, 5.5vw, 6rem)/0.96 var(--rs-sans);
  letter-spacing: -0.06em;
}
.why__explanation { color: rgba(246, 243, 234, 0.72); font-size: clamp(1.15rem, 1.8vw, 1.38rem); }
.why__explanation strong { display: block; margin-top: 28px; color: var(--rs-paper); font-family: var(--rs-sans); }
.why .rs-kicker { color: var(--rs-copper-light); }

/* OFFER TILES — the slim half of the overview.
   The four full .product-card blocks used to live here. They moved to
   /products/ on 26 Aug because the same overview existed in two places and
   the front page's was the better of the two. What stayed is a slim tile per
   offer: the same artwork and the same first line, without the For whom /
   What you get / First step detail the full card carries.

   Two up rather than four, so the artwork is ~600px wide and the two
   detailed illustrations (Measure, Fabric) still read. Four across would
   have been slimmer and shown nothing. Total height is roughly 780px
   against the ~1880px the four full cards took. */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.offer-tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rs-line);
  background: var(--rs-paper);
  color: inherit;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.offer-tile:hover { transform: translateY(-3px); box-shadow: 0 24px 60px rgba(11, 19, 32, 0.1); }

.offer-tile__art {
  height: 216px;
  overflow: hidden;
  border-bottom: 1px solid var(--rs-line);
  background: var(--rs-navy);
}

.offer-tile__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.offer-tile:hover .offer-tile__art img { transform: scale(1.018); }

/* Same per-offer art treatment the full cards use: the two photographs are
   cropped, the two diagrams are contained on their own paper so nothing is
   cut off the edge of a drawing. */
.offer-tile--governor .offer-tile__art img { object-position: center; filter: saturate(0.72) contrast(1.04) sepia(0.08); }
.offer-tile--hugin .offer-tile__art img { object-position: center; }
.offer-tile--measure .offer-tile__art { background: #efe6d6; }
.offer-tile--measure .offer-tile__art img { object-fit: contain; padding: 3%; }
/* Fabric's asset is a schematic plate where the other three are pictures.
   Contained at tile size it was 1600x900 of labelled boxes shrunk to 8px
   type — a diagram you cannot read is just texture. Cropped into instead:
   `scale` is a separate property from `transform`, so it composes with the
   hover scale rather than fighting it, and 2.1 brings the Fabric Builder
   and GitHub cards and the red thread between them up to readable size.
   The full plate is still on /products/, contained, where there is room. */
.offer-tile--fabric .offer-tile__art { background: #f6f3ea; }
.offer-tile--fabric .offer-tile__art img {
  object-fit: cover;
  /* Horizontal object-position is inert here: cover already fits the width
     exactly, so there is nothing to slide. The frame is chosen with
     transform-origin instead, which is what `scale` scales about. 11% keeps
     the Engineer card in shot — the whole claim of this product is that a
     human directs it, and a crop that loses the human loses the claim. */
  transform-origin: 11% 50%;
  scale: 1.9;
}

.offer-tile__copy {
  flex: 1 1 auto;
  padding: 32px clamp(26px, 3vw, 40px) 34px;
  display: flex;
  flex-direction: column;
}

.offer-tile__index { color: var(--rs-red); font: 700 0.68rem/1 var(--rs-sans); letter-spacing: 0.16em; text-transform: uppercase; }

.offer-tile h3 {
  margin: 18px 0 12px;
  color: var(--rs-navy);
  font: 650 clamp(1.5rem, 2.2vw, 2.1rem)/1.06 var(--rs-sans);
  letter-spacing: -0.035em;
}

.offer-tile p {
  margin-bottom: 22px;
  color: rgba(21, 19, 17, 0.68);
  font-size: 1.02rem;
}

.offer-tile__link {
  margin-top: auto;
  color: var(--rs-red);
  font: 650 0.72rem/1 var(--rs-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.offer-tile__link .rs-arrow { display: inline-block; transition: transform 180ms ease; }
.offer-tile:hover .offer-tile__link .rs-arrow { transform: translateX(4px); }

.offer-index__more {
  display: inline-block;
  margin-top: 44px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--rs-red);
  color: var(--rs-navy);
  font: 650 0.74rem/1 var(--rs-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.offer-index__more:hover { color: var(--rs-red); }

.products { padding: clamp(95px, 12vw, 165px) 0; background: var(--rs-paper-deep); border-block: 1px solid var(--rs-line); }
.products__head { display: flex; justify-content: space-between; gap: 50px; align-items: end; margin-bottom: 70px; }
.products__head .rs-section-heading { margin-top: 24px; }
.writing { padding: clamp(95px, 12vw, 165px) 0; }
.writing__head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 62px; }
.writing__head .rs-section-heading { margin-top: 24px; }
.writing__all { color: var(--rs-red); font: 650 0.73rem/1 var(--rs-sans); letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; }
.writing__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rs-line); }
.writing-card { min-height: 290px; padding: 32px 28px; display: flex; flex-direction: column; border-right: 1px solid var(--rs-line); text-decoration: none; }
.writing-card:last-child { border-right: 0; }
.writing-card__kind { color: var(--rs-red); font: 700 0.66rem/1 var(--rs-sans); letter-spacing: 0.15em; text-transform: uppercase; }
.writing-card h3 { margin: 26px 0 14px; color: var(--rs-navy); font: 650 clamp(1.5rem, 2.6vw, 2.25rem)/1.05 var(--rs-sans); letter-spacing: -0.04em; }
.writing-card p { color: rgba(21, 19, 17, 0.65); }
.writing-card__read { margin-top: auto; padding-top: 28px; color: var(--rs-red); font: 650 0.68rem/1 var(--rs-sans); letter-spacing: 0.08em; text-transform: uppercase; }

.closing { padding: clamp(90px, 12vw, 160px) 0; background: var(--rs-red); color: var(--rs-paper); }
.closing__grid { display: grid; grid-template-columns: 1fr 0.55fr; gap: 80px; align-items: end; }
.closing h2 { max-width: 850px; font: 650 clamp(3rem, 6.5vw, 6.7rem)/0.92 var(--rs-sans); letter-spacing: -0.065em; }
.closing__aside { font-size: 1.15rem; }
.closing__aside a { display: inline-block; margin-top: 28px; padding-bottom: 6px; border-bottom: 1px solid currentColor; font: 650 0.76rem/1 var(--rs-sans); letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }

.rs-js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 650ms ease, transform 650ms ease; }
.reveal.visible { opacity: 1; transform: none; }  /* .visible, not .is-visible: the shared controller in
   runi-public-shell.js uses .visible, and the article and blog families
   already depend on that name. Renaming here rather than in the script. */

:focus-visible {
  outline: 2px solid var(--rs-paper);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--rs-red);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1040px) {
  .home-hero h1 { font-size: clamp(3rem, 5.8vw, 6rem); }
  .closing__grid { grid-template-columns: 1fr 0.7fr; gap: 48px; }
}

@media (max-width: 860px) {.rs-shell,
    .home-hero__grid { min-height: auto; grid-template-columns: 1fr; }
  .home-hero__copy { min-height: 0; padding: 64px 32px; }
  .home-hero h1 { font-size: clamp(3.4rem, 8vw, 5rem); }
  .home-hero__figure { border-left: 0; border-top: 1px solid var(--rs-line); }
  .home-hero__image { min-height: 520px; }
  .origin__opening, .closing__grid { grid-template-columns: 1fr; gap: 42px; }
  .origin__evidence { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: 1fr; }
  .why__statement { border-right: 0; border-bottom: 1px solid var(--rs-line-light); }
  .products__head { align-items: flex-start; flex-direction: column; }
  .offer-grid { grid-template-columns: 1fr; }
  .offer-tile__art { height: 260px; }
  .writing__grid { grid-template-columns: 1fr; }
  .writing-card { min-height: 230px; border-right: 0; border-bottom: 1px solid var(--rs-line); }
  .writing-card:last-child { border-bottom: 0; }
}

@media (max-width: 560px) {
  /* .rs-shell was grouped into this selector, so every homepage section
     container took hero padding and a 505px min-height at phone width:
     content indented to 52px while the header wordmark sat at 20px, and the
     closing section became 505px of mostly dead space. Hero copy only.
     (The same grouping at the 860px block is left alone — min-height:auto
     and grid-template-columns are harmless or wanted on .closing__grid.) */
  .home-hero__copy { min-height: 0; padding: 48px 20px; }
  .home-hero h1 { margin: 20px 0 24px; font-size: clamp(2.6rem, 12vw, 4rem); }
  .home-hero__lede { font-size: 1.1rem; }
  .home-hero__image { min-height: 360px; object-position: 57% center; }
  .home-hero__caption { min-height: 74px; padding: 16px; flex-direction: column; gap: 4px; }
  .origin__evidence img { min-height: 310px; }
  .why__statement, .why__explanation { padding: 62px 24px; }
  .offer-grid { gap: 20px; }
  .offer-tile__art { height: 200px; }
  .offer-tile__copy { padding: 26px 22px 28px; }
  /* At ~310px the plate's crop is height-driven, so the same 1.9 leaves the
     labels at 9px. Zoom further and re-frame onto the engineer and the
     builder — the two boxes the red thread runs between. */
  .offer-tile--fabric .offer-tile__art img { transform-origin: 26% 44%; scale: 2.9; }
  .products__head, .writing__head { margin-bottom: 48px; }
  .writing__head { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}