/* Figma 311:1845. Native design: 1920 × 2160. */
:root {
  color-scheme: dark;
  --bg: #0c0c0d;
  --text: #fff;
  --muted: rgba(255,255,255,.6);
  --line: rgba(255,255,255,.1);
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --page-gutter: 24px;
  --columns: 4;
  --h1-size: clamp(36px, calc(36px + (100vw - 320px) * 8 / 447), 44px);
  --frame-top: 24px;
  --frame-bottom: 24px;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--text); font-family: var(--font); font-weight: 500; }
h1,h2,p { margin: 0; }
img { display: block; }
.hero { min-height: 100svh; background: var(--bg); }
.stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0,1fr));
  grid-template-rows: auto minmax(min-content,1fr) auto auto;
  column-gap: 24px;
  row-gap: 32px;
  align-items: center;
  width: 100%;
  min-height: 100svh;
  padding: var(--frame-top) var(--page-gutter) var(--frame-bottom);
}
.brand,.copy,.next { position: relative; z-index: 1; min-width: 0; }
.brand { grid-column: 1 / -1; grid-row: 1; width: 132px; height: 90px; overflow: hidden; }
.brand img { position: absolute; left: -18.18%; top: 0; width: 117.84%; height: 100%; max-width: none; }
.copy { grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: 740px; }
h1 { font-size: var(--h1-size); font-weight: 700; line-height: 1.25; overflow-wrap: break-word; }
.details { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 26px; color: var(--muted); font-size: 16px; line-height: 24px; }
.details p { width: 100%; }
.rule { width: 80px; height: 1px; flex-shrink: 0; background: var(--line); }
.next { grid-column: 1 / -1; grid-row: 4; width: 100%; max-width: 740px; font-size: 16px; line-height: 24px; }
.label { width: max-content; font-size: inherit; font-weight: 500; letter-spacing: .32em; white-space: nowrap; color: #62eaf9; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .label { background: linear-gradient(88.106614deg,#62eaf9 .25463%,#c2f71c 233.51%); background-clip: text; -webkit-background-clip: text; color: transparent; }
}
.next-divider { width: 48px; height: 1px; margin: 20px 0; background: var(--line); flex-shrink: 0; }
.ces { min-width: 0; color: var(--muted); }
.ces-intro,.ces-description { display: block; }
.ces-intro { line-height: 28px; }
.ces strong { font-size: 20px; font-weight: 500; line-height: 28px; color: rgba(255,255,255,.9); }
/* Compact screens show the complete photo between copy and news. */
.scene { grid-column: 1 / -1; grid-row: 3; position: relative; pointer-events: none; width: calc(100% + var(--page-gutter) * 2); margin-inline: calc(-1 * var(--page-gutter)); overflow: hidden; }
.scene picture { display: contents; }
.scene-base,.scene-fade { display: none; }
.scene-right { display: none; }
.scene-overlay { width: 100%; height: auto; }
@media (min-width: 768px) {
  :root { --page-gutter: 32px; --columns: 8; --h1-size: clamp(40px,calc(40px + (100vw - 768px) * 8 / 255),48px); }
  .stage { row-gap: 40px; }
  .next { display: flex; align-items: center; gap: 24px; }
  .label { flex-shrink: 0; }
  .next-divider { width: 1px; height: 40px; margin: 0; }
  .ces { flex: 1; }
}
@media (min-width: 1024px) {
  :root { --page-gutter: 48px; --columns: 12; --h1-size: clamp(46px,calc(46px + (100vw - 1024px) * 8 / 255),54px); }
  .stage { grid-template-rows: 90px minmax(min-content,1fr) auto; row-gap: 48px; }
  .copy { grid-column: 1 / span 9; }
  .next { grid-row: 3; }
  .scene { grid-column: auto; grid-row: auto; position: absolute; inset: 0; width: auto; margin: 0; z-index: 0; }
  .scene img { position: absolute; max-width: none; object-fit: cover; }
  .scene-base { display: block; left: 14.322917%; top: 12.5%; width: 100%; height: 100.053148%; }
  .scene-overlay { right: -4.479167%; top: calc(50% + .5px); width: 99.479167%; height: 99.537037%; transform: translateY(-50%); }
  .scene-fade { display: block; left: 5%; top: -2.962963%; width: 76.666667%; height: 103.981481%; }
}
@media (min-width: 1280px) {
  :root { --page-gutter: 8.33vw; --h1-size: clamp(54px,calc(54px + (100vw - 1280px) * 14 / 319),68px); }
  .copy { grid-column: 1 / span 8; }
}
@media (min-width: 1600px) {
  :root { --h1-size: clamp(68px,calc(68px + (100vw - 1600px) * 12 / 319),80px); }
  .copy { grid-column: 1 / span 7; }
}
@media (min-width: 1920px) {
  :root { --page-gutter: calc((100% - 1600px) / 2); --h1-size: 80px; }
}
@media (min-height: 640px) { :root { --frame-top: 32px; --frame-bottom: 40px; } }
@media (min-height: 800px) { :root { --frame-top: 48px; --frame-bottom: 64px; } }
@media (min-height: 900px) { :root { --frame-top: 80px; --frame-bottom: 120px; } }
/* Fit short desktop windows by reclaiming whitespace before reducing the heading. */
@media (min-width: 1024px) and (max-height: 639px) {
  :root {
    --frame-top: clamp(16px, calc((100svh - 480px) / 6 + 16px), 24px);
    --frame-bottom: clamp(16px, calc((100svh - 480px) / 6 + 16px), 24px);
  }
  .stage { row-gap: clamp(12px, calc((100svh - 480px) / 3), 48px); }
  h1 { font-size: min(var(--h1-size), 10svh); }
  .details {
    gap: clamp(12px, calc((100svh - 480px) / 4 + 12px), 24px);
    margin-top: clamp(14px, calc((100svh - 480px) / 4 + 14px), 26px);
  }
}
@media (forced-colors: active) {
  .label { color: CanvasText; background: none; }
  .rule,.next-divider { background: CanvasText; }
}
/* New Figma image layers scale with the existing responsive first section. */
@media (min-width: 1024px) {
  .scene-overlay { left: 11.145833%; right: auto; top: .185185%; width: 99.887091%; height: 100%; transform: none; }
  .scene-fade { left: 11.145833%; top: -2.962963%; width: 70.520833%; height: 103.240741%; }
  .scene-right { display: block; right: 0; top: 0; width: 70.520833%; height: 100.277778%; }
}
.possibilities { padding: 100px var(--page-gutter) 171px; }
.possibilities-heading { position: relative; }
.possibilities-heading .label { font-size: 16px; line-height: 24px; }
.possibilities-heading h2 { margin-top: 8px; font-size: clamp(32px,3.333333vw,64px); font-weight: 700; line-height: 100px; }
.possibilities-intro { position: absolute; right: -10px; top: 74px; width: 478px; font-size: 14px; line-height: 20px; color: var(--muted); }
.possibilities-grid { display: grid; grid-template-columns: 630fr repeat(4,226fr); gap: 16px; margin-top: 48px; }
.make-card { min-width: 0; }
/* Show each complete source image, without the Figma frame's crop offsets. */
.make-image { position: relative; }
.make-image img { width: 100%; height: auto; }
.custom-crop { display: contents; }
/* Desktop retains the five cropped design slots; narrow cards show full photos. */
@media (min-width: 1280px) {
  .make-image { height: 472px; overflow: hidden; background: rgba(255,255,255,.06); container-type: size; --crop-unit: max(1px, calc(100cqw / 226), calc(100cqh / 472)); }
  .make-image img { position: absolute; max-width: none; object-fit: cover; }
  .robotics img { left: 0; top: 0; width: 100%; height: 100%; object-position: left center; }
  .creative img { left: calc(-703 * var(--crop-unit)); top: calc(-47 * var(--crop-unit)); width: calc(1211 * var(--crop-unit)); height: calc(681 * var(--crop-unit)); }
  .prototype img { left: calc(-432 * var(--crop-unit)); top: calc(-44 * var(--crop-unit)); width: calc(1264 * var(--crop-unit)); height: calc(711 * var(--crop-unit)); }
  .education img { left: calc(-776 * var(--crop-unit)); top: calc(-87 * var(--crop-unit)); width: calc(1230 * var(--crop-unit)); height: calc(692 * var(--crop-unit)); }
  .custom-crop { display: block; position: absolute; left: calc(-252 * var(--crop-unit)); top: calc(-10 * var(--crop-unit)); width: calc(955 * var(--crop-unit)); height: calc(537 * var(--crop-unit)); overflow: hidden; }
  .custom img { left: 6.99%; top: -.04%; width: 100%; height: 100.09%; }
}
.make-copy { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.make-copy::before { content: ""; width: 20px; height: 1px; background: #62eaf9; border-radius: 4px; }
.make-copy h3 { margin: 0; font-size: 16px; font-weight: 500; line-height: 24px; color: rgba(255,255,255,.9); }
.make-copy p { font-size: 14px; line-height: 20px; color: var(--muted); }
@media (min-width: 1920px) {
  .possibilities { padding-left: calc((100% - 1598px) / 2); padding-right: calc((100% - 1598px) / 2); }
}
@media (max-width: 1279px) {
  .possibilities-intro { position: static; max-width: 478px; width: 100%; margin-top: 16px; }
  .possibilities-heading h2 { line-height: 1.3; margin-top: 16px; }
  .possibilities-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 16px; }
  .robotics { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .possibilities { padding-top: 64px; padding-bottom: 64px; }
  .possibilities-heading .label { font-size: 12px; }
  .possibilities-grid { grid-template-columns: minmax(0,1fr); margin-top: 32px; }
  .make-copy { margin-top: 20px; }
}