Join the hero and Graduately into one continuous layout.

Co-authored-by: Cursor <cursoragent@cursor.com>

style.css

@@ -275,8 +275,23 @@ a:hover {
   padding: 4.5rem 0;
 }
 
-.section + .section {
-  border-top: 1px solid var(--line);
+.section + .section,
+.intro + .section {
+  position: relative;
+  border-top: 0;
+}
+
+.section + .section::before,
+.intro + .section::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: min(100% - 2.5rem, var(--max));
+  height: 1px;
+  transform: translateX(-50%);
+  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
+  pointer-events: none;
 }
 
 .section-label {
@@ -309,7 +324,7 @@ a:hover {
   position: relative;
   display: grid;
   align-items: start;
-  padding: 2.75rem 0 3.5rem;
+  padding: 2.75rem 0 1.5rem;
   overflow: hidden;
 }
 
@@ -449,6 +464,7 @@ a:hover {
   --feature-shadow: rgba(0, 0, 0, 0.55);
   --feature-edge: transparent;
   --feature-word: min(11.4vw, 12rem);
+  padding-top: 1.25rem;
   overflow: hidden;
 }
 
@@ -458,7 +474,7 @@ a:hover {
 }
 
 .feature-backdrop {
-  margin: 0 calc(50% - 50vw) 1.25rem;
+  margin: 0 calc(50% - 50vw) -0.35rem;
   font-family: var(--font-display);
   font-size: var(--feature-word);
   font-weight: 800;
@@ -468,7 +484,7 @@ a:hover {
   white-space: nowrap;
   color: var(--ink);
   opacity: 0.07;
-  mask-image: linear-gradient(180deg, #000 35%, transparent 105%);
+  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 62%, transparent 100%);
   pointer-events: none;
   user-select: none;
 }
@@ -605,18 +621,9 @@ a:hover {
 }
 
 @media (min-width: 900px) {
-  .feature-grid {
-    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
-  }
-
   .feature .feature-title {
     font-size: clamp(2.25rem, 5.5vw - 0.3rem, 3.75rem);
   }
-
-  .feature-media {
-    align-self: start;
-    margin-top: calc(var(--feature-word) * -0.7);
-  }
 }
 
 @media (min-width: 1000px) {
@@ -625,6 +632,109 @@ a:hover {
   }
 }
 
+/* Hero and Graduately share one composition once the screen can hold both. */
+@media (min-width: 1080px) {
+  .intro {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 42rem) minmax(15rem, 1fr);
+    column-gap: clamp(2.25rem, 3vw, 3.25rem);
+    align-items: start;
+    justify-content: start;
+    width: auto;
+    max-width: 81rem;
+    margin-left: max(1.25rem, calc((100% - var(--max)) / 2));
+    margin-right: 3rem;
+  }
+
+  .intro::after {
+    content: "";
+    position: absolute;
+    z-index: 0;
+    top: 8%;
+    right: 0;
+    width: min(32rem, 48%);
+    height: min(32rem, 48%);
+    border-radius: 50%;
+    border: 1px solid var(--line);
+    background:
+      radial-gradient(circle at 35% 35%, var(--sheen), transparent 55%),
+      conic-gradient(from 210deg at 50% 50%, transparent 0 55%, var(--glow) 70%, transparent 100%);
+    opacity: 0.85;
+    animation: drift 18s var(--ease) infinite alternate;
+    pointer-events: none;
+  }
+
+  .intro .hero {
+    grid-column: 1;
+    grid-row: 1;
+    width: auto;
+    margin: 0;
+    padding: 2.75rem 0 0;
+    overflow: visible;
+  }
+
+  .intro .hero::after {
+    display: none;
+  }
+
+  .intro .feature,
+  .intro .feature > .wrap,
+  .intro .feature-grid {
+    display: contents;
+  }
+
+  .intro .feature-backdrop {
+    grid-column: 1 / -1;
+    grid-row: 1 / 3;
+    align-self: center;
+    justify-self: stretch;
+    min-width: 0;
+    width: auto;
+    margin: 0;
+    overflow: hidden;
+    z-index: 0;
+    mask-image:
+      linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%),
+      linear-gradient(90deg, transparent 0 46%, #000 68%);
+    mask-composite: intersect;
+    -webkit-mask-image:
+      linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%),
+      linear-gradient(90deg, transparent 0 46%, #000 68%);
+    -webkit-mask-composite: source-in;
+  }
+
+  .intro .feature-copy {
+    grid-column: 1;
+    grid-row: 2;
+    position: relative;
+    z-index: 1;
+    padding-top: 2.5rem;
+  }
+
+  .intro .feature-media {
+    grid-column: 2;
+    grid-row: 1 / 3;
+    align-self: center;
+    justify-self: start;
+    position: relative;
+    z-index: 1;
+    width: min(100%, 36rem);
+    margin: 0.5rem 0 0;
+    padding: 0 0 1.25rem;
+  }
+
+  .intro .feature-stats {
+    grid-column: 1 / -1;
+    grid-row: 3;
+    justify-self: start;
+    position: relative;
+    z-index: 1;
+    width: min(100%, var(--max));
+    margin-top: 3.25rem;
+  }
+}
+
 /* —— Services —— */
 .service-list {
   list-style: none;
@@ -1159,7 +1269,7 @@ a:hover {
   .hero {
     min-height: auto;
     padding-top: 2.5rem;
-    padding-bottom: 3.25rem;
+    padding-bottom: 1.25rem;
   }
 
   .hero::after {
@@ -1173,4 +1283,8 @@ a:hover {
   .section {
     padding: 3.25rem 0;
   }
+
+  .section.feature {
+    padding-top: 0.75rem;
+  }
 }