# Video CTA

Schema: Design Details SECTION.md v3.2
Website: Sentient
Source: https://sentient.foundation/
Source section IDs: a1ca6fd0-266c-4861-923c-397f6b9fcea7
Status: AI analysed; vocabulary promotion is automated

## Classification

- Type: cta
- Layout: split layout with text, links, and media
- Styles: minimal, photographic
- Confidence: 95%

## Purpose and structure

A call-to-action section featuring text about joining a collective, a list of roles, and a vertically oriented video loop of a person running.

Visual signature: Text about a growing collective, a stacked list of roles, and a vertical video block of someone running in a field.

## Components

- video loop
- link list
- typography

## Typography

- Display: Neurialgrotesk — 65px 500
- Heading: Neurialgrotesk — 40px 500
- Body: Neurialgrotesk — 14px 500
- Mono: Geistmono — 12px 400

## Functional palette

- Canvas: canvas #F9F8F6
- Text: text #0E0C0C
- Border: border #000000
- Surface: surface #718698

## Motion evidence

- 12.0–16.0s — The particle shape disperses and fades. New text and a video of a person running fade in from the bottom. (92% confidence)

## Section quality

Overall: 61.15/100 (Good)
Scored coverage: 100%

- Typography: 62 — Clean large display type with controlled slate-blue color against off-white canvas, paired with monospace bracketed labels for secondary links; clear hierarchy between heading, list items, and mono CTAs, but the heading uses a single standard weight/size with no distinctive type craft beyond scale. Next tier: No typographic invention (custom cuts, optical adjustments, expressive pairing) beyond a large grotesque heading and mono labels to push past polished/good.
- Composition: 66 — Asymmetric split layout balances a left text/list column against a tall right-aligned portrait video with generous negative space; divider lines in the role list create rhythm and the rounded image corner softens the grid. Alignment and spacing feel deliberate and restrained. Next tier: The split-with-image CTA pattern is common; nothing in the arrangement (e.g. overlap, scale contrast, unexpected grid break) elevates it beyond a well-executed standard template.
- Motion: 58 — Gemini's timestamped moment (12-16s) describes a dispersing particle shape fading into this text and video entering from the bottom, indicating one clear entrance transition, which is a straightforward fade/slide reveal rather than a sustained or inventive motion system. Next tier: Only a single entrance fade is documented; no secondary motion (hover states, scroll-linked parallax, looping video interplay) is evidenced to justify a higher score.
- Content: 60 — Text content (collective statement, role list, join CTAs) is tightly matched to the cinematic running video, reinforcing a recruiting narrative; the vertical portrait video format suits the mobile-feeling aspirational imagery without feeling forced. Next tier: The pairing is sensible but generic for a 'join us' CTA; no unique content device (data, testimonial, interactive element) makes the integration feel singular.
- Originality: 55 — The layout, bracketed mono links, and stock-style aspirational nature-running video are familiar conventions seen across many startup/AI sites; nothing here is a distinctive invention. Next tier: Relies on a recognizable split CTA template and stock-feeling lifestyle footage; no unexpected structural or visual idea differentiates it from peers.
- Adaptability: 64 — Deterministic facts show a clean two-column structure, a single rounded image/video card with fixed aspect ratio, consistent font tokens, and simple divider-based list — all of which are clearly separable from the specific photographic/video asset and copy. Next tier: Skin and structure are separable, but the emotional impact depends heavily on the specific cinematic video asset, which is a dependency outside the component logic itself.

Strengths:
- Clear two-column hierarchy separating statement, role list, and visual proof
- Restrained use of color (slate text on off-white) keeps focus on imagery
- Mono bracketed CTA labels add a consistent secondary-action style
- Vertical video aspect ratio with rounded corner integrates naturally into the grid

Weaknesses:
- Relies on a familiar split CTA + lifestyle video template
- Single entrance fade is the only documented motion, no sustained interaction
- Role list uses plain text rows with no visual differentiation beyond dividers
- Heading typography lacks distinctive craft beyond size and color

Why it does not reach the next tier: The section is composed and legible but every element (split layout, bracketed CTA, aspirational video) is a known convention; without a distinctive compositional twist, richer motion, or an original content device, it stays at a polished-but-ordinary tier rather than reaching memorable or wow.

## Adaptation guidance

- Effort: Low
- Guidance: Swap the video/photo asset and role list copy while keeping the grid proportions, divider list styling, and mono bracket CTA pattern; apply equivalent weight/size tokens if the typeface is unavailable.

What transfers:
- Two-column split with text+list on one side and tall media card on the other
- Mono bracketed CTA link style
- Divider-separated role list pattern
- Rounded-corner image/video card treatment

Dependencies:
- The specific cinematic running video asset drives the emotional tone
- Neurialgrotesk/Geistmono font pairing for intended visual character
- Slate-blue text color against off-white canvas for brand feel

## Living vocabulary

- No reusable vocabulary candidates were supported by this section.

Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented.

## Provenance and limitations

- Section boundaries and naming: Gemini Pro visual observation
- Motion observations: Gemini Pro direct-video analysis
- Quality judgment: Claude
- Exact design facts: browser/CSS extraction at website scope
- Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%)
- Motion scoring based only on a single Gemini-described entrance transition, not full animation parameters
- No evidence of hover or interactive states for CTA links
- Cannot verify exact video loop behavior or duration beyond the described fade-in

## Usage guidance

Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly.

## Build blueprint v3.2

### Purpose and classification

- Canonical type: cta
- Source type: cta
- Structure: two-column
- Layout: split layout with text, links, and media
- Styles: minimal, photographic
- Components: video loop, link list, typography
- Purpose: A call-to-action section featuring text about joining a collective, a list of roles, and a vertically oriented video loop of a person running.
- Visual signature: Text about a growing collective, a stacked list of roles, and a vertical video block of someone running in a field.

### Crop and composition

- Crop: 1440×777px; aspect ratio 1.853:1
- Page bounds: 3965–4742px of 12930px
- Guidance: Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions.

### Exact typography evidence

The sectionScale values were measured inside this crop. The siteRoles values explain how those faces function across the source website; they must not replace section measurements.

```json
{
  "sectionScale": [
    {
      "role": "section heading",
      "family": "Neurialgrotesk",
      "stack": "Neurialgrotesk, Arial, sans-serif",
      "size": "40px",
      "weight": "500",
      "lineHeight": "44px",
      "letterSpacing": "normal",
      "sample": "We empower the development of open-source artificial intelligence that is aligned with humanity and",
      "element": "h1",
      "occurrences": 5,
      "sourceId": "font-1"
    },
    {
      "role": "UI/supporting text",
      "family": "Geistmono",
      "stack": "Geistmono, Arial, sans-serif",
      "size": "12px",
      "weight": "400",
      "lineHeight": "15px",
      "letterSpacing": "normal",
      "sample": "import dspy",
      "element": "span",
      "occurrences": 124,
      "sourceId": "font-7"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "65px",
      "family": "Neurialgrotesk",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-3: computed CSS at 1440×1000; AI role: Large 65px Neurialgrotesk used for major section headings ('Where AI learns to feel...', 'Open AGI Summit').",
      "sampleId": "font-3",
      "confidence": 0.9,
      "lineHeight": "71.5px",
      "letterSpacing": "-0.6px"
    },
    {
      "role": "heading",
      "size": "40px",
      "family": "Neurialgrotesk",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: 40px Neurialgrotesk used for primary narrative text and subtitles in the hero and other sections.",
      "sampleId": "font-1",
      "confidence": 0.9,
      "lineHeight": "44px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "14px",
      "family": "Neurialgrotesk",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-6: computed CSS at 1440×1000; AI role: 14px Neurialgrotesk used for general descriptive body text.",
      "sampleId": "font-6",
      "confidence": 0.8,
      "lineHeight": "16.8px",
      "letterSpacing": "normal"
    },
    {
      "role": "mono",
      "size": "12px",
      "family": "Geistmono",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-7: computed CSS at 1440×1000; AI role: 12px Geistmono used extensively for code snippets and secondary information.",
      "sampleId": "font-7",
      "confidence": 0.95,
      "lineHeight": "15px",
      "letterSpacing": "normal"
    }
  ]
}
```

### Exact color evidence

The section samples record where each computed value was used. Functional roles come from the website-level classifier and remain separate.

```json
{
  "sectionUsage": [
    {
      "value": "#718698",
      "cssValue": "rgb(113, 134, 152)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "text"
      ],
      "occurrences": 25,
      "sourceId": "color-2"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#F9F8F6",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(249, 248, 246); AI role: Off-white #F9F8F6 used as the primary background color when canvas elements are not covering the viewport (e.g., news and footer sections).",
      "sampleId": "color-1",
      "confidence": 0.9
    },
    {
      "hex": "#0E0C0C",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-9: computed rgb(14, 12, 12); AI role: Near-black #0E0C0C used for text in the light-themed lower sections (footer).",
      "sampleId": "color-9",
      "confidence": 0.9
    },
    {
      "hex": "#000000",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-8: computed rgb(0, 0, 0); AI role: Black #000000 used for borders in the news feed list.",
      "sampleId": "color-8",
      "confidence": 0.85
    },
    {
      "hex": "#718698",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-2: computed rgb(113, 134, 152); AI role: Slate blue #718698 associated with canvas containers and text over specific backgrounds.",
      "sampleId": "color-2",
      "confidence": 0.7
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Buttons appear fully rounded (pill shape), while most structural elements and images have sharp, 0px border-radii.",
  "density": "Very low density overall, prioritizing visual impact and motion over information density.",
  "evidence": "Observation of layout crops and DOM facts: use of '.layout_grid' for full viewport control, minimal button styles, and wide distribution of text nodes.",
  "borderStyle": "Thin, solid, 1px lines used sparingly as dividers in lists (news feed, footer).",
  "buttonStyle": "Minimalist outline style (pill-shaped) for primary actions, or simple inline text with brackets for secondary actions.",
  "cornerStyle": "Mix of sharp corners (bracketed links, general layout) and pill shapes (header button).",
  "contentWidth": "Full-bleed for media backgrounds, with text elements often constrained to specific columns or wide margins spanning the full viewport width.",
  "spacingRhythm": "Sparse and expansive. Content is often placed at edges or vertically centered with massive amounts of negative space to allow background visuals to take precedence."
}
```

### Reconstruction specification

This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions.

- Root: 1440×657px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px.
- Observed gaps: 8px.
- Representative content widths: 696, 523px.
- Layout containers: 0; cards/surfaces: 1; media elements: 1; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 3965,
      "bottom": 4742,
      "pageHeight": 12930
    }
  },
  "container": {
    "size": "1440×657px",
    "position": "x 0px, y 4006px",
    "display": "block",
    "positionMode": "relative",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "rgba(0, 0, 0, 0)",
    "radius": "0px",
    "border": "0px none rgb(42, 40, 31)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      8
    ],
    "representativeContentWidthsPx": [
      696,
      523
    ]
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [
    {
      "element": "img · join_img",
      "size": "523×749px",
      "position": "x 933px, y 3907px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "20px",
      "border": "0px none rgb(113, 134, 152)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    }
  ],
  "surfaces": {
    "radii": [
      "20px"
    ],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · join_img",
    "size": "523×749px",
    "position": "x 933px, y 3907px",
    "aspectRatio": 0.7,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "20px",
    "overflow": "clip",
    "source": "https://sentient.foundation/assets/698daec2aaf157233be32038_join_img1-p-500.webp"
  }
]
```

#### Browser-exposed animation parameters

```json
[]
```

### Measured geometry, surfaces, media, and animation

These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values.

```json
{
  "root": {
    "id": "ld-171",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 4006,
      "width": 1440,
      "height": 657
    },
    "role": null,
    "label": "We are a growing collective of researchers, engineers, thinkers exploring the frontier of artificial",
    "border": "0px none rgb(42, 40, 31)",
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "radius": "0px",
    "shadow": "none",
    "columns": null,
    "display": "block",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "overflow": "visible",
    "position": "relative",
    "background": "rgba(0, 0, 0, 0)"
  },
  "cards": [
    {
      "id": "ld-189",
      "tag": "img",
      "rect": {
        "x": 933,
        "y": 3907,
        "width": 523,
        "height": 749
      },
      "role": null,
      "label": "join_img",
      "border": "0px none rgb(113, 134, 152)",
      "radius": "20px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    }
  ],
  "media": [
    {
      "id": "ld-189",
      "tag": "img",
      "rect": {
        "x": 933,
        "y": 3907,
        "width": 523,
        "height": 749
      },
      "role": null,
      "label": "join_img",
      "media": {
        "alt": "Person in white outfit running through a field of tall grass or wildflowers during sunset or dusk.",
        "src": "https://sentient.foundation/assets/698daec2aaf157233be32038_join_img1-p-500.webp",
        "naturalWidth": 115,
        "naturalHeight": 138
      },
      "radius": "20px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.7,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 3965,
    "bottom": 4742,
    "pageHeight": 12930
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [],
  "spacing": {
    "gapsPx": [
      8
    ],
    "representativeContentWidthsPx": [
      696,
      523
    ]
  },
  "coverage": {
    "cards": 1,
    "media": 1,
    "animations": 0,
    "elementsInSection": 15
  },
  "surfaces": {
    "radii": [
      "20px"
    ],
    "borders": [],
    "shadows": []
  },
  "animations": [],
  "capturedAt": "2026-10-21T17:55:08.406Z",
  "limitations": [
    "Values describe the captured desktop viewport and may change at other breakpoints.",
    "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.",
    "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent."
  ],
  "viewportWidth": 1440
}
```

### Observed motion

1. **observed sequence** — The particle shape disperses and fades. New text and a video of a person running fade in from the bottom. (12s–16s; 92% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values.

The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing.

### Responsive contract

- Measured viewport: 1440px wide.
- Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed.
- Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints.

### Structure versus visual skin

- Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose.
- Adapt: brand colors, font family, copy, imagery, icons, decorative details.
- Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details.

### Adaptation and dependencies

- Effort: low
- What transfers: Two-column split with text+list on one side and tall media card on the other; Mono bracketed CTA link style; Divider-separated role list pattern; Rounded-corner image/video card treatment
- Dependencies: The specific cinematic running video asset drives the emotional tone; Neurialgrotesk/Geistmono font pairing for intended visual character; Slate-blue text color against off-white canvas for brand feel
- Guidance: Swap the video/photo asset and role list copy while keeping the grid proportions, divider list styling, and mono bracket CTA pattern; apply equivalent weight/size tokens if the typeface is unavailable.

### Evidence readiness

- Coverage: 7/7
- Can build: Yes
- Missing facts: None


### Agent implementation prompt

Create an original cta section inspired by the design evidence titled “Video CTA”.

Purpose: A call-to-action section featuring text about joining a collective, a list of roles, and a vertically oriented video loop of a person running.

Structure: two-column. Source layout label: split layout with text, links, and media. Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions.

Visual signature to preserve at the pattern level: Text about a growing collective, a stacked list of roles, and a vertical video block of someone running in a field.

Components: video loop, link list, typography.

Style direction: minimal, photographic.

Observed crop: 1440×777px (1.853:1). Treat this as evidence of composition, not a mandatory output size.

Typography evidence: {"role":"display","size":"65px","family":"Neurialgrotesk","source":"computed","traits":"Regular","weight":"500","evidence":"font-3: computed CSS at 1440×1000; AI role: Large 65px Neurialgrotesk used for major section headings ('Where AI learns to feel...', 'Open AGI Summit').","sampleId":"font-3","confidence":0.9,"lineHeight":"71.5px","letterSpacing":"-0.6px"} {"role":"heading","size":"40px","family":"Neurialgrotesk","source":"computed","traits":"Regular","weight":"500","evidence":"font-1: computed CSS at 1440×1000; AI role: 40px Neurialgrotesk used for primary narrative text and subtitles in the hero and other sections.","sampleId":"font-1","confidence":0.9,"lineHeight":"44px","letterSpacing":"normal"} {"role":"body","size":"14px","family":"Neurialgrotesk","source":"computed","traits":"Regular","weight":"500","evidence":"font-6: computed CSS at 1440×1000; AI role: 14px Neurialgrotesk used for general descriptive body text.","sampleId":"font-6","confidence":0.8,"lineHeight":"16.8px","letterSpacing":"normal"} {"role":"mono","size":"12px","family":"Geistmono","source":"computed","traits":"Regular","weight":"400","evidence":"font-7: computed CSS at 1440×1000; AI role: 12px Geistmono used extensively for code snippets and secondary information.","sampleId":"font-7","confidence":0.95,"lineHeight":"15px","letterSpacing":"normal"}

Color evidence: {"hex":"#F9F8F6","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(249, 248, 246); AI role: Off-white #F9F8F6 used as the primary background color when canvas elements are not covering the viewport (e.g., news and footer sections).","sampleId":"color-1","confidence":0.9} {"hex":"#0E0C0C","name":"text","role":"text","source":"computed","evidence":"color-9: computed rgb(14, 12, 12); AI role: Near-black #0E0C0C used for text in the light-themed lower sections (footer).","sampleId":"color-9","confidence":0.9} {"hex":"#000000","name":"border","role":"border","source":"computed","evidence":"color-8: computed rgb(0, 0, 0); AI role: Black #000000 used for borders in the news feed list.","sampleId":"color-8","confidence":0.85} {"hex":"#718698","name":"surface","role":"surface","source":"computed","evidence":"color-2: computed rgb(113, 134, 152); AI role: Slate blue #718698 associated with canvas containers and text over specific backgrounds.","sampleId":"color-2","confidence":0.7}

Typography measured inside this section: {"id":"font-1","size":"40px","count":5,"family":"Neurialgrotesk","traits":"Regular","weight":"500","contexts":[{"tag":"h1","top":624,"text":"We empower the development of open-source artificial intelligence that is aligned with humanity and ","property":"font"},{"tag":"h2","top":1516,"text":"A neutral, transparent steward of the open AGI ecosystem, with a mandate spanning research, governan","property":"font"},{"tag":"h2","top":3998,"text":"We are a growing collective of researchers, engineers, thinkers exploring the frontier of artificial","property":"font"}],"fontStack":"Neurialgrotesk, Arial, sans-serif","lineHeight":"44px","letterSpacing":"normal"} {"id":"font-7","size":"12px","count":124,"family":"Geistmono","traits":"Regular","weight":"400","contexts":[{"tag":"span","top":4558,"text":"import dspy","property":"font"},{"tag":"span","top":4573,"text":"from roma_dspy import Aggregator, Atomizer, Executor, Planner, Verifier, SubTask","property":"font"},{"tag":"span","top":4588,"text":"from roma_dspy.types import TaskType","property":"font"}],"fontStack":"Geistmono, Arial, sans-serif","lineHeight":"15px","letterSpacing":"normal"}

Colors measured inside this section: {"id":"color-2","hex":"#718698","alpha":1,"count":25,"contexts":[{"tag":"header","top":0,"text":".canvas-container { aspect-ratio: 1920 / 1302; z-index: 2; } #canvas { width: 100%; height: 100%; di","property":"background"},{"tag":"h2","top":3998,"text":"We are a growing collective of researchers, engineers, thinkers exploring the frontier of artificial","property":"text"},{"tag":"span","top":4008,"text":"Joit;{=","property":"text"}],"cssValue":"rgb(113, 134, 152)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":4006,"width":1440,"height":657},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[8],"representativeContentWidthsPx":[696,523]}; surfaces {"radii":["20px"],"borders":[],"shadows":[]}; media [{"tag":"img","rect":{"x":933,"y":3907,"width":523,"height":749},"aspectRatio":0.7,"objectFit":"cover","objectPosition":"50% 50%","radius":"20px"}]

Motion evidence: observed sequence: The particle shape disperses and fades. New text and a video of a person running fade in from the bottom. (92% confidence)

Transfer these principles: Two-column split with text+list on one side and tall media card on the other; Mono bracketed CTA link style; Divider-separated role list pattern; Rounded-corner image/video card treatment.

Dependencies: The specific cinematic running video asset drives the emotional tone; Neurialgrotesk/Geistmono font pairing for intended visual character; Slate-blue text color against off-white canvas for brand feel.

Adaptation guidance: Swap the video/photo asset and role list copy while keeping the grid proportions, divider list styling, and mono bracket CTA pattern; apply equivalent weight/size tokens if the typeface is unavailable.

Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.