/* Tripp Partners HOME (Kasey 2026-10-07, from her Design mock "Tripp Partners
   v3"): ONE night screen. Tokens, the brand lockup and .btn come from
   partners.css; this sheet is everything the home adds. Loaded after it.
   Measures are the mock's own, to the pixel. */

body[data-surface="partners-home"] { --gutter: clamp(24px, 5vw, 48px); --rail: calc(var(--gutter) - 16px);
  --band: clamp(70px, 12vw, 190px);
  font-weight: 300; font-size: 17px; line-height: 1.5; color: var(--bone-dim); overflow-x: hidden; }

/* The stage: header and hero fill the first screen on their own (Kasey
   2026-10-07: "make this section larger, it should be its own page"); the
   wordmark band is the start of the next one. The dots and the two rails sit
   behind all three. */
.home-stage { position: relative; min-height: calc(100vh + var(--band)); display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto; }
.home-dots { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }
.home-rails { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* The rails run the whole way down beside the wordmark's letters, to the
   footer's line (Kasey 2026-10-07): .home-ext, the room the letters hang
   into, carries the same two lines. */
.home-rails::before, .home-rails::after, .home-ext::before, .home-ext::after { content: ""; position: absolute;
  top: 0; bottom: 0; width: 1px; background: rgba(240,235,225,0.1); }
.home-rails::before, .home-ext::before { left: var(--rail); }
.home-rails::after, .home-ext::after { right: var(--rail); }

/* Header: lockup, the nav, Apply. A hairline closes it, rail to rail. */
.home-head { position: relative; z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 14px clamp(16px, 2.6vw, 32px); padding: 22px var(--gutter); }
.home-head::after { content: ""; position: absolute; left: var(--rail); right: var(--rail); bottom: 0; height: 1px;
  background: rgba(240,235,225,0.1); }
.home-head .brand:hover { color: var(--bone); }
.home-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 30px;
  font-weight: 500; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
.home-nav a { color: var(--grey); white-space: nowrap; }
.home-nav a:hover { color: var(--bone); }
.nav-apply-btn { display: inline-block; padding: 11px 18px; font-weight: 500; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; background: linear-gradient(120deg, var(--champagne-light), var(--champagne-deep));
  color: #17150f; white-space: nowrap; }
.nav-apply-btn:hover { color: #17150f; filter: brightness(1.06); }

/* Hero: one line of display, the two-line sub, two doors; centred in what
   the screen has left. */
.home-hero { position: relative; z-index: 2; min-height: 0; display: flex; align-items: center;
  padding: 4vh var(--gutter) 6vh; }
.hero-copy { position: relative; z-index: 1; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.hero-h { margin: 0; font-weight: 300; font-size: clamp(44px, 6.4vw, 104px); line-height: 0.98; letter-spacing: -0.045em;
  color: var(--bone); white-space: nowrap; }
.hero-sub { margin: clamp(12px, 2vh, 22px) 0 0; font-weight: 300; font-size: clamp(24px, 3.4vw, 54px); line-height: 1.08;
  letter-spacing: -0.035em; color: var(--grey); max-width: 28ch; text-wrap: pretty; }
.home-hero .cta-row { gap: 14px; margin-top: clamp(28px, 5vh, 52px); }
.home-hero .btn { padding: 17px 28px; font-size: 13px; letter-spacing: 0.08em; white-space: nowrap; border-radius: 0; }
.home-hero .btn-line { color: var(--bone); box-shadow: inset 0 0 0 1px rgba(240,235,225,0.2); }
.home-hero .btn-line:hover { box-shadow: inset 0 0 0 1px var(--champagne); }

/* The wordmark: set along the bottom of the stage, fitted rail to rail by
   home.js, so faint it is texture rather than text. Its glyphs run on past
   the stage; .home-ext (sized by the same script) keeps the footer below
   them instead of across them. */
.home-word-band { position: absolute; left: 0; right: 0; bottom: 0; height: var(--band); overflow: visible;
  pointer-events: none; z-index: 1; }
.home-word { position: absolute; left: var(--rail); top: -0.1em; font-weight: 300; font-size: 32vw; line-height: 1;
  letter-spacing: 0.1em; color: rgba(240,235,225,0.055); white-space: nowrap; user-select: none; }
.home-word-space { position: relative; z-index: 2; height: var(--band); margin: 0 var(--rail);
  box-shadow: inset 0 1px 0 rgba(240,235,225,0.1); }
.home-ext { position: relative; height: 0; }

.home-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 40px;
  padding: 34px var(--gutter) 40px; font-weight: 500; font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--grey); box-shadow: inset 0 1px 0 rgba(240,235,225,0.1); }
.home-foot .foot-left, .home-foot .foot-links { display: flex; flex-wrap: wrap; gap: 10px 40px; }
.home-foot a { color: var(--grey); }
.home-foot a:hover { color: var(--bone); }

/* Phones: the mock is a desktop screen; below it the display line wraps and
   the nav keeps Docs and Apply. */
@media (max-width: 860px) {
  .home-nav .nav-hide-sm { display: none; }
  .hero-h { white-space: normal; }
}
@media (max-width: 560px) {
  .home-head { gap: 14px 12px; }
  .brand-tag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-dots { display: none; }
}