.connection-page { background: var(--paper); }
.connection-header {
  position: relative;
  background: rgba(7,17,26,.98);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.connection-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 76% 24%, rgba(200,149,76,.18), transparent 30%),
    radial-gradient(circle at 18% 70%, rgba(62,93,117,.25), transparent 36%),
    linear-gradient(125deg,#07111a 0%,#0d1b28 54%,#09131d 100%);
}
.connection-hero::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.1;
  background-image: linear-gradient(120deg,transparent 0 48%,rgba(255,255,255,.07) 50%,transparent 52%);
  background-size:190px 190px;
}
.connection-hero-layout {
  position:relative;
  z-index:1;
  min-height:720px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.7fr);
  gap:76px;
  align-items:center;
  padding-block:82px 92px;
}
.connection-hero-copy h1 {
  max-width:760px;
  margin:0;
  color:#fff;
  font-size:clamp(4rem,6vw,7.1rem);
  line-height:.93;
}
.connection-hero-copy .lede {
  max-width:690px;
  margin:28px 0 0;
  color:rgba(255,255,255,.78);
  font-size:clamp(1.06rem,1.4vw,1.28rem);
  line-height:1.7;
}
.connection-hero-actions { display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; }
.connection-hero-note {
  margin-top:34px;
  color:rgba(255,255,255,.55);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.connection-cover-wrap { position:relative; justify-self:end; width:min(100%,500px); }
.connection-cover-wrap::before {
  content:'';
  position:absolute;
  inset:8% -8% -8% 8%;
  border:1px solid rgba(224,181,110,.34);
}
.connection-cover {
  position:relative;
  z-index:1;
  width:100%;
  box-shadow:0 34px 80px rgba(0,0,0,.38);
}

.connection-thesis { padding:88px 0; background:linear-gradient(120deg,#f6f1e7,#fff 72%); }
.connection-thesis-layout {
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:82px;
  align-items:start;
}
.connection-thesis h2,
.connection-topics h2,
.connection-story h2,
.connection-listen h2 {
  margin:0;
  font-size:clamp(2.9rem,4.6vw,5rem);
  line-height:.99;
}
.connection-thesis-copy > p { margin:0 0 18px; color:#505e68; line-height:1.78; }
.connection-thesis-copy blockquote {
  margin:34px 0 0;
  padding-left:24px;
  border-left:2px solid var(--gold);
  color:#172634;
  font-family:var(--serif);
  font-size:clamp(1.5rem,2.25vw,2.25rem);
  font-style:italic;
  line-height:1.35;
}

.relationship-path { padding:0 0 92px; background:linear-gradient(120deg,#f6f1e7,#fff 72%); }
.relationship-path-grid {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.relationship-path-grid article {
  min-height:184px;
  padding:28px 22px;
  border-left:1px solid var(--rule);
  background:rgba(255,255,255,.42);
}
.relationship-path-grid article:first-child { border-left:0; }
.relationship-path-grid span {
  color:var(--gold-dark);
  font-size:.7rem;
  font-weight:850;
  letter-spacing:.11em;
}
.relationship-path-grid h3 { margin:48px 0 0; color:#13212e; font-size:1.45rem; }

.connection-topics { padding:92px 0 98px; background:#fff; }
.connection-section-heading {
  display:grid;
  grid-template-columns:1fr .78fr;
  gap:70px;
  align-items:end;
  margin-bottom:48px;
}
.connection-section-heading > p { margin:0 0 8px; color:#56616a; line-height:1.75; }
.connection-topic-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--rule);
  border-left:1px solid var(--rule);
}
.connection-topic-grid article {
  min-height:300px;
  padding:36px 38px 40px;
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.connection-topic-grid .topic-number {
  color:var(--gold-dark);
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.13em;
}
.connection-topic-grid h3 { margin:74px 0 14px; color:#10202e; font-size:clamp(2rem,2.8vw,3rem); line-height:1.03; }
.connection-topic-grid p { margin:0; color:#5b6670; line-height:1.72; }

.connection-story {
  position:relative;
  padding:94px 0;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(130deg,#0e1d2a,#07111a 78%);
}
.connection-story::after {
  content:'';
  position:absolute;
  inset:0;
  opacity:.11;
  pointer-events:none;
  background-image:linear-gradient(120deg,transparent 0 48%,rgba(255,255,255,.06) 50%,transparent 52%);
  background-size:190px 190px;
}
.connection-story-layout {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:70px;
  align-items:center;
}
.connection-story-copy h2 { color:#fff; }
.connection-story-copy > p:not(.kicker) { color:rgba(255,255,255,.7); line-height:1.76; }
.connection-story-copy .story-line {
  margin-top:30px;
  color:var(--gold-bright);
  font-family:var(--serif);
  font-size:clamp(1.5rem,2.2vw,2.2rem);
  font-style:italic;
  line-height:1.36;
}
.connection-story-mosaic {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:300px 220px;
  gap:14px;
}
.connection-story-mosaic figure { margin:0; overflow:hidden; border:1px solid rgba(224,181,110,.22); }
.connection-story-mosaic figure:first-child { grid-row:1 / 3; }
.connection-story-mosaic img { width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.03); }
.connection-story-mosaic figure:first-child img { object-position:center 30%; }
.connection-story-mosaic figure:nth-child(2) img { object-position:center 30%; }
.connection-story-mosaic figure:nth-child(3) img { object-position:center 27%; }

.connection-pullquote { padding:84px 0; background:#efe8dd; }
.connection-pullquote blockquote {
  max-width:1080px;
  margin:0 auto;
  color:#112231;
  text-align:center;
  font-family:var(--serif);
  font-size:clamp(2.2rem,4vw,4.4rem);
  line-height:1.08;
}
.connection-pullquote cite {
  display:block;
  margin-top:22px;
  color:var(--gold-dark);
  text-align:center;
  font-size:.72rem;
  font-style:normal;
  font-weight:850;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.connection-listen { padding:92px 0 98px; background:#fff; }
.connection-listen-layout {
  display:grid;
  grid-template-columns:minmax(240px,360px) 1fr;
  gap:72px;
  align-items:center;
}
.connection-listen-cover { box-shadow:var(--shadow); }
.connection-listen-copy > p:not(.kicker) { max-width:690px; color:#56616a; line-height:1.75; }
.connection-listen-actions { display:flex; flex-wrap:wrap; gap:15px; margin-top:28px; }
.connection-note { margin-top:18px; color:#7a8288; font-size:.82rem; }

@media (max-width: 1000px) {
  .connection-hero-layout,
  .connection-thesis-layout,
  .connection-story-layout,
  .connection-listen-layout { grid-template-columns:1fr; }
  .connection-cover-wrap { justify-self:start; max-width:420px; }
  .connection-section-heading { grid-template-columns:1fr; gap:18px; }
  .relationship-path-grid { grid-template-columns:repeat(3,1fr); }
  .relationship-path-grid article:nth-child(4) { border-left:0; border-top:1px solid var(--rule); }
  .relationship-path-grid article:nth-child(n+5) { border-top:1px solid var(--rule); }
}

@media (max-width: 680px) {
  .connection-hero-layout { min-height:0; padding-block:64px 72px; gap:48px; }
  .connection-hero-copy h1 { font-size:clamp(3.6rem,16vw,5rem); }
  .connection-hero-actions .button { width:100%; }
  .connection-thesis,.connection-topics,.connection-story,.connection-listen,.connection-pullquote { padding-block:64px; }
  .relationship-path { padding-bottom:64px; }
  .relationship-path-grid { grid-template-columns:1fr 1fr; }
  .relationship-path-grid article { min-height:160px; border-top:1px solid var(--rule); }
  .relationship-path-grid article:nth-child(odd) { border-left:0; }
  .relationship-path-grid article:nth-child(1), .relationship-path-grid article:nth-child(2) { border-top:0; }
  .connection-topic-grid { grid-template-columns:1fr; }
  .connection-topic-grid article { min-height:240px; }
  .connection-topic-grid h3 { margin-top:45px; }
  .connection-story-mosaic { grid-template-columns:1fr 1fr; grid-template-rows:300px 190px; }
  .connection-story-mosaic figure:first-child { grid-column:1 / -1; grid-row:1; }
  .connection-story-mosaic figure:nth-child(2) { grid-column:1; grid-row:2; }
  .connection-story-mosaic figure:nth-child(3) { grid-column:2; grid-row:2; }
  .connection-listen-layout { gap:42px; }
}