# Fast Retailing Careers — Style Reference

> Cinematic recruitment stories followed by a precise, spacious corporate information system.

**Website:** [Fast Retailing Careers](https://www.fastretailing.com/careers/ja/)
**Original URL:** https://www.fastretailing.com/careers/ja/
**Final URL:** https://www.fastretailing.com/careers/ja/
**Inspected:** October 2, 2026, at 02:59 JST; supplied browser retrieval timestamp: October 1, 2026, `17:59:21.123Z`.
**Viewports:** desktop `1440 × 1000` and mobile `390 × 844` CSS pixels.
**Theme:** white and pale gray information surfaces, black typography, and white text over photographic media; red, blue, and magenta distinguish movie controls.
**Scope:** the current Japanese recruitment homepage. Visual evidence covers the desktop opening, one employee-story scene, the lower information section, and mobile information cards, image tiles, and footer. Rendered DOM evidence additionally covers recruitment navigation, job categories, and the CEO message. Linked pages, expanded menus, movie playback, and cookie settings were not inspected.

This is a corporate recruitment hub with several routes into employment information. Its opening uses an expansive film frame, a large Japanese statement, and a compact movie button. Subsequent stories give the work and its people similar visual prominence. The interface then becomes quieter: a job-category directory, an editorial CEO message, three company-information cards, three square image links, and a minimal legal footer.

The distinctive relationship is between scale and restraint. Photographs fill the screen, while navigation remains small. Strong Japanese headlines sit beside narrow English labels. Information cards have square corners and generous internal space; conspicuously rounded shapes are reserved for a few actions. On mobile, the lower content becomes a clear vertical sequence rather than a compressed desktop grid.

## How to Read This Reference

- **Measured** means a value appears in the supplied rendered DOM or computed-style evidence.
- **Derived** means a value is calculated from measured bounds, such as the distance between cards or a heading's inset inside its card.
- **Visual estimate** means a dimension, treatment, or color relationship is inferred from the supplied current-page captures. It is not a sampled stylesheet value.
- **Recommendation** means an implementation choice for a new site. The CSS starter includes such choices and does not reproduce an unverified scroll-animation system.
- Token names in this document are descriptive aliases, except the explicitly identified source custom properties.
- A computed font stack identifies declared families, not proof that every named font supplied the rendered glyphs. Font files and licensing were not examined.
- Coordinates belong to different scroll states. The mobile DOM snapshot was collected after scrolling; negative coordinates are not negative layout margins.
- Menu items and duplicate story controls can have measurable bounds while not appearing in the captured screen. Their bounds do not establish visibility or an opened state.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| White | `#ffffff` | `--color-white` | Measured body, header, footer, and recruitment-section background; visually also the company-card surface |
| Near White | `#f9f9f9` | `--color-soft` | Measured CEO and company-information section background, open-position pill, and mobile job-menu trigger |
| Black | `#000000` | `--color-ink` | Measured normal text and navigation color |
| Reversed White | `#ffffff` | `--color-on-media` | Measured employee-story heading and detail-link color |
| Opening Red | `#e90000` | `--color-movie-main` | Measured `color` on the opening movie-button wrapper; the capture shows a red pill |
| Digital Blue | `#256af4` | `--color-movie-digital` | Measured `color` on the movie control associated with the digital-transformation story |
| Marketing Magenta | `#e60073` | `--color-movie-marketing` | Measured `color` on the marketing-story movie control; a magenta pill is visible in the story capture |

The movie wrappers report transparent backgrounds and zero border radius. Their visible pill artwork therefore cannot be attributed to those wrapper properties alone. The starter uses the measured accent colors as direct CSS fills, which is an adaptation, not a claim about the original internal artwork.

The logo is visibly bright red, but its asset fill was not extracted. Preserve an authorized logo asset instead of recoloring it to an assumed sampled value.

### Color Assignment

White and near white provide most of the interface structure. Red is concentrated in the identity and opening movie action; magenta and blue identify other film contexts. They are not a general-purpose rainbow of navigation badges.

The opening image contains cool glass, steel, and deep shadow. The employee scene combines blue-gray office light with dark clothing and foreground silhouettes. These photographic colors are content, not additional interface tokens.

A darkening treatment is visible over the story imagery, particularly near the top and text area. Its opacity and implementation were not measured. Any gradient in the starter is a recommended readability treatment.

## Tokens — Typography

### Japanese Interface Text

**Measured body stack:** `"Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif`.

The body defaults to `16px / 24px`, weight `400`. Header and several navigation elements use the shorter stack `"Noto Sans JP", sans-serif`. This is the neutral layer for navigation, explanatory text, and utility links.

The root HTML element reports Times, but visible body content overrides it. Times is not evidence of a serif design direction.

### Japanese Display Headings

Employee-story headings declare `YakuHanJP, "Midashi Go MB31", sans-serif`. Other headings use a longer stack containing `"Midashi Go MB31"`, Noto Sans JP, YuGothic variants, Hiragino, and Meiryo.

Measured story headings use weight `600`. Company-card headings use weight `400`, giving them a quieter tone even though they share the display-family declaration.

The very large opening slogan is visible in the screenshot but was not captured as an ordinary text heading in the supplied element sample. Its exact font, font size, and rendering mechanism are unverified. Preserve its heavy Japanese appearance without claiming that it shares the measured story-heading declaration.

### Editorial Message

The CEO paragraph declares `YakuHanJP, "Futo Go B101", "Noto Sans JP", YuGothic_Local, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif`.

Its generous leading is as important as its size: `24px / 44.4px` on desktop and `18px / 33.3px` on mobile. Desktop tracking is `2.4px`, reducing to `0.54px` on mobile. This creates a deliberate reading passage between the recruitment directory and company links.

### English Labels and Brand Names

`UniqloRegular, sans-serif` is measured on `MESSAGE FROM THE CEO` and `WHO WE ARE`. The captures show compact, narrow English lettering in section labels and image-tile captions.

The visible `WORK AT FAST RETAILING` label has a similar narrow appearance, but the sampled H2 for that phrase is a visually hidden `1 × 1px` element. Its computed body font must not be used to identify the visible label's typography.

`Roboto, "Noto Sans JP", sans-serif` is declared for Latin brand and country names in menu content. It is not the measured family for all English text on the page.

### Type Scale

| Role | Desktop | Mobile | Weight / tracking | Evidence |
| --- | --- | --- | --- | --- |
| Base body | `16 / 24px` | `16 / 24px` | `400`, normal | Measured |
| Header site title | `18 / 18px` | `14 / 14px` | `400`, `0.8px` tracking | Measured; visible mobile wording shortens to `採用情報` |
| Header job trigger | `14 / 14px` | `14 / 14px` | `400`, `0.8px` | Measured |
| Language trigger | `12 / 12px` | `12 / 12px` | `400`, `0.8px` | Measured |
| Opening slogan | Approximately `72px`, about `100–108px` line pitch | Not visually supplied | Heavy white lettering | Desktop visual estimate only |
| Employee-story heading | `48 / 60px` | `24 / 36px` | `600`; `2.4px` → `1.2px` tracking | Measured |
| Employee-story detail link | `18 / 18px` | `16 / 16px` | `400`; `0.9px` → `0.8px` | Measured |
| Recruitment heading | `24 / 36px` | `18 / 27px` | `600` | Measured |
| CEO English section label | `32 / 32px` | `24 / 24px` | `400`; `1.12px` → `0.84px` | Measured |
| CEO Japanese heading | `40 / 60px` | `24 / 36px` | `600` | Measured |
| CEO paragraph | `24 / 44.4px` | `18 / 33.3px` | `400`; `2.4px` → `0.54px` | Measured |
| Company-section English label | `32 / 51.2px` | `24 / 38.4px` | `400`; `0.64px` → `0.48px` | Measured |
| Company-card heading | `24 / 36px` | `20 / 30px` | `400`; normal → `4px` tracking | Measured |
| Company-card paragraph | About `20 / 31–32px` | About `16 / 28px` | Regular | Visual estimate; descendant style not supplied |
| Image-tile caption | About `22px` | About `22px` | Narrow white lettering | Visual estimate |
| Footer policy and cookie controls | `18 / 18px` | `12 / 12px` | `400`; policy tracking `0.9px` → `0.6px` | Measured |
| Footer copyright | About `14px` | About `10px` | Regular, lightly tracked | Visual estimate |

The strongest responsive typography change is the halving of story headlines from 48px to 24px. Another distinctive detail is the increased tracking on mobile company-card headings: `4px`, or `0.2em` at 20px. Do not apply that spacing indiscriminately to paragraphs or navigation.

## Tokens — Spacing & Shapes

**Density:** compact navigation, expansive media, and spacious editorial content.
**Geometry:** square information surfaces and image tiles; pill-shaped movie and open-position actions.

### Source Viewport Properties

| Source property | Desktop value | Mobile value | Interpretation |
| --- | --- | --- | --- |
| `--fvh` | `10px` | `8.44px` | Equals one percent of the sampled viewport height; update behavior is unverified |
| `--vh` | `10px` | `8.44px` | Same sampled value as `--fvh`; their intended distinction is not established |
| `--header-height` | `68px` | `56px` | Matches measured header height |
| `--footnav-height` | `0px` | `calc(50px + 0px)` | Indicates a mobile auxiliary-navigation allowance; does not prove a continuously visible bottom bar |

### Spacing Scale

These are recurring observed values, not evidence of a single source spacing system.

| Use | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Header horizontal inset | `32px` each side | `11px` left, `19px` right | Measured padding |
| Main story text inset | `32px` | `22px` | Measured heading bounds |
| Company-card horizontal inset | `24px` | `16px` | Derived from card and heading bounds |
| Company-card top inset | `32px` | `24px` | Derived from card and heading bounds |
| Company-card gap | `32px` | `14px` | Derived |
| Information cards to image tiles | About `80px` | About `30px` | Capture geometry |
| Image-tile gap | About `32px` | About `14px` | Capture geometry |
| Final image row to footer | About `120px` | About `40px` | Visible whitespace, not the section's outer padding alone |
| Footer side inset | `32px` | `16px` | Measured control positions |
| Footer top to policy row | `32px` | `80px` | Derived from footer and control bounds |

### Border Radius

| Element | Treatment | Evidence |
| --- | --- | --- |
| Header and footer | Square | Measured |
| Company-information cards | Square | Captures and sampled anchor geometry |
| Editorial image tiles | Square | Captures |
| Movie controls | Fully rounded pill | Visible artwork; wrapper radius itself is `0px` |
| Open-position link | Fully rounded pill | Measured radius `1000px` desktop and `844px` mobile |
| Play symbol enclosure | Circular outline | Captures |

The very large open-position radii simply ensure a capsule shape. A reusable implementation can use `999px`; the observed values do not imply a need for viewport-sized corner calculations.

### Layout Measurements

| Element | Desktop at 1440px | Mobile at 390px |
| --- | --- | --- |
| Header | `1440 × 68px` | `390 × 56px` |
| Logo link box | `86 × 42px`, at `x:32` | `70 × 34px`, at `x:11` |
| Movie-button wrapper | `199 × 56px` | `154 × 40px` |
| Story heading width | `900px` | `346px` |
| Job-category links | Five approximately `250 × 287px` boxes | Five stacked `390 × 122.3px` boxes |
| Open-position link | About `224.3 × 68px` | About `205.9 × 63px` |
| CEO paragraph column | `800px`, starting at `x:320` | `346px`, starting at `x:22` |
| Company-card group | Derived width `903.06px` | `346px` |
| Individual company card | `279.69 × 359.5px` | `346 × 236px`, `346 × 236px`, `346 × 208px` |
| Editorial image tile | Visually about `280 × 280px` | Visually about `346 × 346px` |
| Footer | About `82.4px` high | About `136.6px` high |
| Entire document | About `8890.5px` high | About `8851.4px` high |

Document heights describe the captured content and state, not dimensions to hardcode. The comparable total heights conceal substantial differences in how individual sections reflow.

## Components

### Site Header

**Role:** establish the recruitment-site identity and expose the main employment routes.

The desktop header is a white, 68px strip. A red logo occupies an 86 × 42px link box with 32px left clearance. The site-title H1 begins at `x:150`, leaving a measured 32px gap after the logo. It reads `ファーストリテイリング採用情報` in restrained 18px text.

The right side contains `職種一覧`, `新卒採用`, `インターン`, `店舗スタッフ採用`, and a globe/language control labeled `JP`. Dropdown indicators are small downward chevrons. Navigation is black text without prominent borders or filled desktop tabs.

At 390px, the header is 56px high. The logo becomes 70 × 34px, and the visible identity contracts to `採用情報`. The job trigger becomes a pale-gray, full-height block approximately 101px wide. The language button remains at the right. Graduate, internship, and store-staff routes exist elsewhere in the mobile navigation evidence.

The header is absent from the supplied scrolled captures. Do not describe it as permanently sticky: neither the supplied positioning properties nor a tested scroll sequence establish that behavior.

### Conditional Navigation Panels

**Role:** provide job-family, store-brand, and country/language choices.

The rendered DOM contains three substantial navigation groups. Their geometry is measurable, but their expanded appearance and opening interactions were not captured.

| Group | Desktop geometry | Mobile geometry | Content |
| --- | --- | --- | --- |
| Job families | `360px` wide; `64px` rows | `390px` wide; `64px` rows | Five professional disciplines below a recruitment label |
| Store brands | `367px` wide; `65px` rows | `390px` wide; `65px` rows | UNIQLO, GU, PLST, THEORY, and COMPTOIR DES COTONNIERS |
| Country/language choices | `367px` wide; `48px` row boxes with roughly `49px` pitch | `390px` wide | Country links and some half-width language choices |

Job rows have 22px left padding and 16px text. Country rows use `17px 32px 15px 22px` padding. Some country-specific language links occupy half the group width: 183.5px on desktop and 195px on mobile.

Do not infer the panels' background colors from transparent child-anchor backgrounds. Likewise, differently colored text in the DOM is insufficient to reconstruct complete category artwork. A new implementation should use explicit disclosure buttons and define its own verified open, close, and keyboard behavior.

### Opening Film Scene

**Role:** communicate the recruitment proposition before the directory content.

The supplied desktop frame shows a glass-fronted UNIQLO setting with large red Japanese and Latin wordmarks. Reflections, metal framing, and a blurred foreground object give the image depth. The visible image starts beneath the 68px header and fills the remaining capture.

A large white statement sits low at the left:

`服を変え、常識を変え、`

`世界を変えていく「人」へ。`

Its left edge is approximately 32px from the viewport edge. Two substantial lines occupy the lower quarter of the composition. A red `WATCH THE MOVIE` pill sits at the lower right. Its wrapper is measured at `x:1161`, `y:864`, with a 199 × 56px box: 80px from the right and bottom of this viewport.

Keep the slogan and action legible over the image without enclosing them in cards. The exact headline artwork, media asset, overlay alpha, and opening scroll behavior are not available. The mobile opening was not included as a current visual capture, although its movie control measures 154 × 40px and starts at `x:22` in the supplied DOM state.

### Employee-Story Scene

**Role:** connect a specific discipline to a person and a meaningful work statement.

The visually supplied marketing story is a full-screen office photograph. A seated person occupies the right side; dark foreground equipment and broad negative space provide a text area at the left. The visible anatomy is:

1. `WORK AT FAST RETAILING` near the top-left corner.
2. A two-line Japanese headline below it.
3. Two smaller lines describing the person's executive role.
4. A magenta movie pill at the right, approximately centered vertically.
5. A white discipline-detail link at the lower left, ending in a small right-pointing marker.

The measured headline is `48px / 60px`, weight `600`, with `2.4px` tracking and a 900px box. In the capture, it begins roughly 170px below the top. The supporting role text appears around 20px; its exact style was not sampled.

The digital-transformation story also appears in the DOM, with its own headline and blue movie-control color. Its photographic composition was not supplied, so no imagery should be inferred for it.

On mobile, both sampled story headings become `24px / 36px`, with a 346px width and 22px side insets. Movie wrappers are horizontally centered at `x:118`; their associated detail links are centered as well. This is a structural change from the desktop's right-side action and left-side detail link.

### Movie Control

**Role:** provide an explicit entry into a film.

The visible component combines a colored capsule, a thin white circular outline, a white right-pointing play triangle, and the condensed uppercase label `WATCH THE MOVIE`.

Desktop bounds are 199 × 56px; mobile bounds are 154 × 40px. The desktop play-circle diameter appears to be approximately 36px. Button-label size and internal spacing are visual estimates, not sampled text metrics.

The original control's extracted text is empty, even though its visual label is clear. The evidence does not include its accessible name, so this is not proof of an accessibility failure. A reusable version should provide a name that identifies the film, rather than relying only on decorative artwork.

No activation was recorded. Modal presentation, external navigation, autoplay, sound, captions, and close behavior remain unverified.

### Recruitment Directory

**Role:** turn the editorial introduction into navigable job categories.

The section uses a white background and the heading `中途採用募集職種一覧`. Desktop padding is measured as `80px 0 32px`; mobile padding is `40px 0 55px`.

Five links cover marketing/business management, supply-chain management, digital transformation, creative work, and corporate functions. Their desktop boxes form a single row, approximately 250px wide each, with 32px between them. On mobile, the boxes become full-width rows approximately 122.3px high. The supplied screenshots do not show their internal artwork, so only this geometry and content are established.

Below the categories, `オープンポジション` appears as a pale-gray pill. Desktop graduate, internship, and store-staff routes sit toward the right. Mobile places the open-position pill centrally, then graduate and internship links on one row and the store-staff trigger below.

An additional unlabeled control measures 54 × 50px on desktop and 50 × 50px on mobile. Its purpose is not established; do not invent a carousel or view-toggle interaction from its presence.

### CEO Message

**Role:** provide a slower editorial passage explaining the company's ambition and invitation to candidates.

The section background is measured `#f9f9f9`. A narrow English label, `MESSAGE FROM THE CEO`, introduces the Japanese heading `これからの社会に、意味のある仕事を。`.

The heading is 40px on desktop and 24px on mobile. The mobile text explicitly breaks into two lines. The main paragraph is centered in an 800px desktop column and expands to the 346px mobile content width.

The paragraph's measured 1.85 line-height ratio gives the message a spacious cadence. An 80px desktop gap separates the heading box from the paragraph; the corresponding mobile gap is 50px. The source text ends with the company name, executive title, and `柳井 正`.

Only DOM measurements were provided for this section. There is a substantial region between the English label and the Japanese heading, but its visual content is not established by the attached current captures. Do not invent a portrait composition to fill it.

### Company-Information Cards

**Role:** offer three broad routes into understanding the business.

The `WHO WE ARE` region continues the near-white background. Its English heading sits closer to the page edge than the centered card group: desktop `x:72` for the label versus `x:268` for the first card.

Each card is a whole-card link containing a Japanese H3, an explanatory paragraph, and a detail label with a small triangular arrow. The cards are `事業紹介`, `ブランド紹介`, and `会社情報`. Their destinations are respectively the careers business page, group-brand page, and company-information page.

Desktop anatomy:

- Approximately 280px wide and 359.5px high.
- Three columns separated by 32px.
- White, square surface with no visible border or elevation shadow.
- Heading inset 24px horizontally and 32px vertically.
- 24px heading, approximately 20px explanatory copy, and a smaller detail link.
- Detail labels align near the bottom despite different paragraph lengths.

Mobile anatomy:

- One column, 346px wide, with 22px page margins.
- 14px between cards.
- 16px internal horizontal inset and 24px top inset.
- 20px headings with distinct 4px tracking.
- Content-driven heights: the first two cards are 236px high; the shorter company-information card is 208px high.

Do not preserve equal desktop heights on mobile. The shorter final card is a measured part of the responsive composition.

### Editorial Image Tiles

**Role:** link the corporate information to broader brand and workplace themes.

Three square tiles follow the information cards in the same column alignment:

| Label | Visible image | Linked destination in original-page DOM |
| --- | --- | --- |
| LifeWear | A cut-paper-like illustration of overlapping people in warm earth-toned clothing | UNIQLO LifeWear Magazine |
| Sustainability | Blue jeans hanging in an industrial setting, with tags and production context | UNIQLO sustainability content |
| Diversity & Inclusion | A close grid of brightly colored, textured felt-like forms | Fast Retailing diversity content |

The labels are white, narrow English text centered over the imagery. The image supplies almost all of each component's visual weight. There are no separate white caption panels.

Desktop tiles are approximately 280px square with 32px gaps. Mobile tiles are approximately 346px square, stacked with 14px gaps. The first tile starts about 30px below the last mobile information card.

The sampled tile anchors have 16px-high inline boxes. Those boxes are not the visual image dimensions; use the captures to establish the square artwork area.

### Legal Footer

**Role:** provide privacy and cookie controls plus a quiet ownership line.

The footer returns to white. On desktop, the policy link and cookie-settings button sit on the left, separated by a vertical bar; the copyright line is right aligned. The overall height is approximately 82.4px, with 32px side and top clearances around the policy row.

On mobile, the footer becomes approximately 136.6px high. The legal row starts 80px below the footer top, at a 16px left inset. Its text reduces to 12px. The smaller copyright line follows beneath it rather than remaining at the right.

This intentionally open footer should not be replaced with a dense multi-column sitemap. Cookie settings are represented by a button, but the resulting interface was not exercised.

## Tokens — Motion & Interaction

### Measured Transition Declarations

| Element | Supplied declaration | What is established |
| --- | --- | --- |
| Logo link | `opacity 0.15s, filter 0.15s` | Short visual transitions are declared; endpoint states are not supplied |
| Header title and main navigation | `color 0.15s` | Text-color transition duration |
| Language control | `opacity 0.1s` | Short opacity transition |
| Store-brand and country links | `background 0.1s` | Background transition duration within menu content |
| Store-staff trigger | `opacity 0.1s` | Short opacity transition |
| Footer privacy and cookie controls | `color 0.15s` | Text-color transition duration |
| Skip link | `transform 0.2s` | Transform transition on the offscreen skip-link element |

Many other sampled elements report only `transition: all`. Without a duration or an observed change, this is not evidence of a visible animation. Sampled `animation: none` values also do not rule out video playback, ancestor transforms, or script-driven motion.

### Media and Scroll Evidence

The page exposes movie controls and a text alternative stating that a video's content is also described in text. The supplied captures establish media compositions, but not playback duration, frame rate, loop behavior, audio defaults, or transitions between scenes.

The inspection process waited for layout and image readiness, traversed intermediate scroll positions, and could accept settled snap positions. That process does not itself establish that this page uses CSS scroll snapping. Repeated story labels and overlapping control bounds likewise do not prove a carousel.

For a new implementation, use native document scrolling unless a separate motion specification is available. The CSS starter recreates the visible hierarchy and responsive endpoints without claiming a source pinning timeline, parallax effect, or reveal sequence.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Header and footer | White with black text | Clear navigation and legal framing |
| Film scenes | Edge-to-edge imagery with white type | Emotional introduction and employee narratives |
| Movie action | Solid accent capsule with white artwork | Explicit film entry |
| Recruitment section | White | Practical job-family navigation |
| CEO and company region | `#f9f9f9` | A calm editorial and informational field |
| Company card | White rectangle on near white | Separates linked information without shadow |
| Editorial tile | Square image with centered white label | Topic identity and onward navigation |
| Open-position link | Near-white capsule on white | A secondary recruitment route |

There is no visible general elevation system in the supplied card and footer captures. Separation comes from background changes, space, typography, and image boundaries.

## Imagery

The opening and employee scene use recognizable workplaces and retail environments. Their compositions leave space for overlaid text while keeping architectural or human subjects large. Cool photographic tones and deep shadows contrast with bright red branding and the magenta movie action.

The lower tiles introduce different material qualities: illustrated clothing silhouettes, industrial denim, and colorful fibers. Their shared square format and centered labels unify these otherwise different images. Preserve that variety rather than applying one generic color wash to every image.

Use smooth photographic rendering. Nothing in the captures suggests pixelated image scaling, halftone filters, or a decorative texture over the whole page.

### Observed Asset References

The supplied evidence does not expose image, video, logo, or font-file URLs. The entries below identify visible subjects, not downloadable asset paths.

| Asset subject | Evidence | Practical treatment |
| --- | --- | --- |
| Fast Retailing logo | Desktop opening capture; measured desktop/mobile link boxes | Use an authorized asset at the measured proportions |
| UNIQLO exterior/glass scene | Desktop opening capture | Full-width cover crop with enough lower-left contrast for the statement |
| Seated employee in an office | Desktop story capture | Keep the person on the right and the left text area readable |
| LifeWear illustration | Desktop and mobile lower-section captures | Square crop retaining the overlapping clothing silhouettes |
| Hanging denim | Desktop and mobile lower-section captures | Square crop with the vertical garment rhythm intact |
| Colorful fiber forms | Desktop and mobile lower-section captures | Square crop retaining dense texture and color variation |
| Play, globe, chevron, and arrow symbols | Current captures | Small geometric controls; no icon-library identity is established |

For extensions, use authorized company imagery or appropriately licensed replacement assets. The starter does not invent source asset paths.

## Layout & Responsive Behavior

The page is a long scrolling recruitment document. The major sequence established by the DOM is opening media, employee stories, job categories, CEO message, company information, editorial links, and footer.

Two width systems coexist. Media and the recruitment directory use nearly the full desktop width. Editorial reading and company-card content use narrower centered columns. The 800px CEO paragraph and approximately 903px company grid should remain distinct; forcing every section into one universal container would erase the original rhythm.

| Behavior | Desktop observation | Mobile observation |
| --- | --- | --- |
| Identity | Full Japanese recruitment-site title | Short visible title `採用情報` |
| Header | 68px high, several navigation entries | 56px high, prominent job trigger and language control |
| Story headline | 48px type in a 900px box | 24px type in a 346px box |
| Story movie control | Right side of scene | Centered wrapper in the sampled mobile state |
| Story detail link | Left aligned | Centered |
| Recruitment categories | Five boxes across | Five full-width rows |
| Open-position action | Left side of lower recruitment row | Centered above other recruitment routes |
| CEO paragraph | 800px column, 24px type | 346px column, 18px type |
| Company cards | Three equal-height columns | One column with content-dependent heights |
| Editorial tiles | Three squares across | Three larger squares stacked |
| Footer | Legal controls left, copyright right | Two text rows aligned left |

At 390px, the repeated 22px inset yields `390 − 44 = 346px` of content width. Mobile card copy is therefore wider than an individual desktop card's copy area, even though the page is narrower overall. This explains why the cards can become shorter after stacking.

No intermediate viewport or source media-query declaration was supplied. The starter uses a recommended `64rem` breakpoint; this is not an observed original breakpoint. Mobile film cropping and intermediate header wrapping require separate visual validation.

The mobile `--footnav-height` value suggests a 50px allowance. However, the sampled auxiliary links lie below the viewport in that state, and no persistent bottom bar appears in the attached lower-page captures. Do not add a permanently fixed bar solely from that variable.

## Do’s and Don’ts

### Do

- Preserve the transition from expansive film scenes to calm corporate information.
- Use white, near white, and black as the structural palette.
- Associate the red, blue, and magenta movie accents with their specific story contexts.
- Keep desktop navigation compact beside the large visual opening.
- Preserve 48px desktop and 24px mobile story-heading scales where the content permits.
- Maintain separate widths for full-screen media, the 800px editorial paragraph, and the approximately 903px information grid.
- Keep company cards square and free of visible elevation shadows.
- Align desktop detail labels near the card bottoms, then allow natural mobile card heights.
- Preserve the square imagery and centered white labels of the final three tiles.
- Treat the 22px mobile content inset and 14px card gaps as important responsive proportions.
- Retain the source's distinction between links, disclosure buttons, and movie buttons.

### Don't

- Don't reduce the recruitment hub to a single campaign headline and application button.
- Don't make every component a rounded card; the pills are selective accents.
- Don't turn photographic blues or textile colors into arbitrary interface categories.
- Don't assume the opening slogan's font from the measured employee-story headings.
- Don't treat invisible menu geometry as a verified open-menu design.
- Don't infer a carousel, snap system, or fixed header from repeated elements or large document offsets.
- Don't use the 16px inline anchor bounds as the image-tile height.
- Don't keep the three company cards in equal-height columns on a 390px screen.
- Don't shrink the desktop navigation indiscriminately until it fits on mobile.
- Don't reproduce the footer's small mobile text without considering the needs of the new implementation.
- Don't invent media assets or source URLs for sections represented only by DOM evidence.

## Recommended Implementation Additions

These are recommendations for a new implementation, not verified features of the inspected page:

- Preserve the existing skip-link concept and test that it becomes visible on keyboard focus and moves focus to the main content.
- Give movie buttons film-specific accessible names. A decorative play triangle and visible image label should not be the only naming mechanism.
- Implement menus with explicit expanded states, keyboard access, Escape handling, and sensible focus return. Validate these behaviors separately from their visual dimensions.
- Supply captions or transcripts for films and a useful static poster. Respect reduced-motion preferences and provide a way to pause any ongoing decorative video.
- Use meaningful accessible names for image-only topic links. Avoid nesting a second link inside a whole-card anchor.
- Consider a minimum 44px touch target around the observed 40px mobile movie button and small footer controls. Preserve the visual label size independently of the hit area.
- Validate white-text contrast across actual movie frames, not just the supplied still. The overlay strength may need to vary by asset.
- Test font fallbacks and long Japanese text before locking line breaks or minimum card heights.
- Keep mobile content reachable with browser chrome and safe-area changes; do not assume the sampled viewport-height properties remain constant.

## Agent Prompt Guide

### Quick Color Reference

- Structural white: `#ffffff`.
- Editorial field and secondary pill: `#f9f9f9`.
- Normal type and utility icons: `#000000`.
- Type over media: `#ffffff`.
- Opening movie accent: measured wrapper color `#e90000`.
- Digital-story movie accent: measured wrapper color `#256af4`.
- Marketing-story movie accent: measured wrapper color `#e60073`.
- Media darkening: asset-dependent; no original alpha value is established.

### Overall Prompt

“Create a Japanese corporate recruitment homepage inspired by the current Fast Retailing Careers structure. Begin with a restrained white header and an expansive photographic film scene, a large white Japanese statement low at the left, and a small red movie pill. Follow with employee stories using 48px Japanese headings, narrow English section labels, and context-specific blue or magenta movie actions. Transition into a five-category recruitment directory, a spacious CEO reading section on #f9f9f9, three square-cornered white information cards in a centered approximately 904px group, and three square editorial image links. Use black interface text, generous space, and minimal borders. At 390px, use a 56px header, 22px content margins, 24px story headings, stacked 346px cards and image tiles, and a two-row legal footer. Treat motion and playback as separately specified functionality.”

### Example Component Prompts

1. **Header:** “Build a 68px white desktop recruitment header with an 86 × 42px logo box, an 18px Japanese site title, compact 14px navigation, small chevrons, and a globe/language control. At the mobile endpoint, use a 56px header, a 70 × 34px logo, the short label 採用情報, and a full-height pale-gray job trigger. Do not assume sticky behavior.”
2. **Employee story:** “Compose a full-width office scene with the person on the right and dark negative space on the left. Place a narrow uppercase section label at the upper left, a white 48/60px Japanese headline below, a smaller role description, a magenta 199 × 56px movie pill on the right, and a white detail link near the lower left. Use 24/36px headlines and centered lower actions on mobile.”
3. **Company cards:** “Create three white rectangular whole-card links on #f9f9f9. Use approximately 280 × 360px desktop cards, 32px gaps, 24px side padding, 32px top padding, a 24px Japanese heading, readable copy, and a bottom-aligned detail label with a tiny triangle. On mobile use 346px width, 14px gaps, 16px side padding, 20px headings with 4px tracking, and natural heights.”
4. **Editorial tiles:** “Create three square image links showing a clothing illustration, hanging denim, and colorful textured fibers. Center a narrow white English label on each image. Align the desktop tiles to the company-card columns; stack them as 346px squares with 14px gaps at the mobile endpoint. Keep corners square and omit separate caption panels.”
5. **CEO passage:** “Set a restrained English section label above a Japanese statement and an 800px centered reading column. Use #f9f9f9, a 40/60px heading, and 24/44.4px body text with 2.4px tracking. On mobile use a 346px column, 24/36px heading, and 18/33.3px copy with 0.54px tracking. Leave unspecified media composition to the supplied assets.”

## Quick Start

### CSS Custom Properties

This starter uses measured endpoint dimensions and declared font-family names. Company-card paragraph metrics, the opening headline, overlays, and the breakpoint are visual approximations or recommendations. It normalizes section spacing to reproduce the visible composition rather than copying unseen nested wrappers.

The optional branded fonts must already be available through an authorized setup; these declarations do not load them. Noto Sans JP and system sans-serif fallbacks keep the structure usable.

Expected anatomy: a `.career-page` contains `.site-header`, a normal-flow `main`, and `.site-footer`. A `.film` contains an image or video with class `.film__media`, overlaid text, and a `.movie-button`. Information grids contain whole-card anchors; each card contains a heading, paragraph, and a non-interactive detail-label span.

```css
:root {
  /* Measured structural colors */
  --color-white: #ffffff;
  --color-soft: #f9f9f9;
  --color-ink: #000000;
  --color-on-media: #ffffff;

  /* Measured wrapper colors, adapted as CSS button fills */
  --color-movie-main: #e90000;
  --color-movie-digital: #256af4;
  --color-movie-marketing: #e60073;

  /* Declared source families; font files are not supplied */
  --font-body: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  --font-display: YakuHanJP, 'Midashi Go MB31', 'Noto Sans JP',
    YuGothic_Local, YuGothic, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  --font-editorial: YakuHanJP, 'Futo Go B101', 'Noto Sans JP',
    YuGothic_Local, YuGothic, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  --font-english: UniqloRegular, sans-serif;

  --header-size: 68px;
  --page-inset: 32px;
  --reading-width: 800px;
  --information-width: 904px; /* Rounded from the measured 903.06px */
  --grid-gap: 32px;
  --card-inline: 24px;
  --card-block: 32px;
  --radius-pill: 999px;
  --motion-fast: 100ms;
  --motion-link: 150ms;
}

* {
  box-sizing: border-box;
}

.career-page {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-white);
  font: 400 16px/1.5 var(--font-body);
}

.career-page a {
  color: inherit;
  text-decoration: none;
}

.career-page button {
  font: inherit;
  cursor: pointer;
}

.career-page :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  z-index: 100;
  inset: 0 auto auto 0;
  padding: 10px 20px;
  color: var(--color-white);
  background: var(--color-ink);
  transform: translateY(-150%);
  transition: transform 200ms;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 32px;
  min-block-size: var(--header-size);
  padding-inline: 32px;
  background: var(--color-white);
  letter-spacing: 0.8px;
}

.site-logo {
  flex: 0 0 86px;
  inline-size: 86px;
  block-size: 42px;
  transition: opacity 150ms, filter 150ms;
}

.site-logo img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.site-brand {
  margin: 0;
  font: 400 18px/1 var(--font-body);
  white-space: nowrap;
}

.site-brand__short {
  display: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-inline-start: auto;
  font-size: 14px;
  line-height: 1;
}

.site-nav button {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
}

.site-nav a,
.site-nav button {
  transition: color var(--motion-link);
}

.site-nav .language-trigger {
  padding: 10px;
  font-size: 12px;
  transition: opacity var(--motion-fast);
}

/* Normal-flow reconstruction; no source pinning behavior is assumed. */
.film {
  position: relative;
  isolation: isolate;
  min-block-size: 100vh;
  min-block-size: 100svh;
  overflow: hidden;
  color: var(--color-on-media);
  background: #151b1e;
}

.film--hero {
  min-block-size: calc(100svh - var(--header-size));
}

.film__media,
.film::before {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.film__media {
  z-index: -2;
  object-fit: cover;
}

.film::before {
  /* Recommended readability overlay; original alpha is unknown. */
  z-index: -1;
  content: '';
  background:
    linear-gradient(180deg, rgb(0 0 0 / 35%), transparent 35%),
    linear-gradient(0deg, rgb(0 0 0 / 48%), rgb(0 0 0 / 8%) 70%);
}

.hero-title {
  position: absolute;
  inset-inline: 32px auto;
  inset-block-end: 80px;
  max-inline-size: min(980px, calc(100% - 64px));
  margin: 0;
  /* Visual approximation: opening typography was not sampled. */
  font: 600 72px/1.48 var(--font-display);
}

.film__eyebrow {
  position: absolute;
  inset: 40px auto auto 32px;
  margin: 0;
  font: 400 32px/1 var(--font-english);
  letter-spacing: 0.035em;
}

.film__copy {
  position: relative;
  inline-size: min(900px, calc(100% - 64px));
  padding-block-start: 164px;
  margin-inline-start: 32px;
}

.film__headline {
  margin: 0;
  font: 600 48px/1.25 var(--font-display);
  letter-spacing: 0.05em;
}

.film__role {
  margin: 20px 0 0;
  font-size: 20px; /* Visual estimate */
  line-height: 1.4;
}

.movie-button {
  --movie-accent: var(--color-movie-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  inline-size: 199px;
  block-size: 56px;
  padding: 10px;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-white);
  background: var(--movie-accent);
  font: 400 14px/1 var(--font-english);
  white-space: nowrap;
}

.movie-button--digital {
  --movie-accent: var(--color-movie-digital);
}

.movie-button--marketing {
  --movie-accent: var(--color-movie-marketing);
}

.movie-button__icon {
  display: grid;
  flex: 0 0 36px;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.movie-button__icon::after {
  content: '';
  margin-inline-start: 3px;
  border-block: 5px solid transparent;
  border-inline-start: 8px solid currentColor;
}

.film > .movie-button {
  position: absolute;
  inset-inline-end: 80px;
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.film--hero > .movie-button {
  inset-block-start: auto;
  inset-block-end: 80px;
  transform: none;
}

.film__detail {
  position: absolute;
  inset-inline-start: 32px;
  inset-block-end: 32px;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.05em;
}

.detail-arrow::after {
  display: inline-block;
  content: '';
  margin-inline-start: 8px;
  border-block: 5px solid transparent;
  border-inline-start: 5px solid currentColor;
}

/* Geometry only: category artwork was not visually supplied. */
.roles {
  padding: 80px 32px 32px;
  background: var(--color-white);
}

.roles__title {
  margin: 0;
  font: 600 24px/1.5 var(--font-display);
}

.roles__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px;
  margin-block-start: 32px;
}

.role-card {
  display: block;
  min-block-size: 287px;
}

.open-position {
  display: inline-block;
  padding: 25px 16px 25px 24px;
  border-radius: var(--radius-pill);
  background: var(--color-soft);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.03em;
}

.message {
  padding-block: 40px 104px;
  background: var(--color-soft);
}

.message__label {
  margin: 0;
  padding-inline: 32px;
  font: 400 32px/1 var(--font-english);
  letter-spacing: 0.035em;
}

.message__title {
  margin: 0 64px;
  font: 600 40px/1.5 var(--font-display);
}

.message__copy {
  inline-size: min(800px, calc(100% - 64px));
  margin: 80px auto 0;
  font: 400 24px/1.85 var(--font-editorial);
  letter-spacing: 0.1em;
}

/* Any media region before the message title needs its own specification. */
.who {
  padding-block: 70px 120px;
  background: var(--color-soft);
}

.who__label {
  margin: 0 72px;
  font: 400 32px/1.6 var(--font-english);
  letter-spacing: 0.02em;
}

.information-grid,
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  inline-size: min(var(--information-width), calc(100% - 64px));
  margin-inline: auto;
}

.information-grid {
  margin-block-start: 62px;
}

.info-card {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 359.5px;
  padding: var(--card-block) var(--card-inline);
  background: var(--color-white);
}

.info-card__title {
  margin: 0 0 24px;
  font: 400 24px/1.5 var(--font-display);
}

.info-card__copy {
  margin: 0 0 24px;
  font-size: 20px; /* Capture-based approximation */
  line-height: 1.575;
}

.info-card__more {
  margin-block-start: auto;
  font-size: 18px; /* Capture-based approximation */
  line-height: 1.5;
}

.tile-grid {
  margin-block-start: 80px;
}

.editorial-tile {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  color: var(--color-white);
  background: #444;
}

.editorial-tile img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.editorial-tile__label {
  position: relative;
  padding-inline: 12px;
  color: var(--color-white);
  font: 400 22px/1.2 var(--font-english);
  text-align: center;
  text-shadow: 0 1px 4px rgb(0 0 0 / 60%);
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px;
  background: var(--color-white);
}

.site-footer__links {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 18px;
  line-height: 1.022;
}

.site-footer__links button {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
}

.site-footer__copyright {
  margin: 0;
  font-size: 14px; /* Visual estimate */
  line-height: 1.3;
  letter-spacing: 0.05em;
}

/* Recommended breakpoint; only 1440px and 390px were inspected. */
@media (max-width: 64rem) {
  :root {
    --header-size: 56px;
    --page-inset: 22px;
    --grid-gap: 14px;
    --card-inline: 16px;
    --card-block: 24px;
  }

  .site-header {
    gap: 16px;
    padding-inline: 11px 19px;
  }

  .site-logo {
    flex-basis: 70px;
    inline-size: 70px;
    block-size: 34px;
  }

  .site-brand {
    font-size: 14px;
  }

  .site-brand__full,
  .site-nav__desktop-only {
    display: none;
  }

  .site-brand__short {
    display: inline;
  }

  .site-nav {
    gap: 6px;
  }

  .site-nav .jobs-trigger {
    min-block-size: 56px;
    padding-inline: 16px 26px;
    background: var(--color-soft);
  }

  .hero-title {
    /* Mobile opening composition is recommended, not captured. */
    inset-inline: 22px;
    inset-block-end: 130px;
    max-inline-size: none;
    font-size: 32px;
    line-height: 1.5;
  }

  .film__eyebrow {
    inset-inline-start: 22px;
    font-size: 24px;
  }

  .film__copy {
    inline-size: calc(100% - 44px);
    margin-inline-start: 22px;
    padding-block: 140px 240px;
  }

  .film__headline {
    font-size: 24px;
    line-height: 1.5;
  }

  .film__role {
    font-size: 16px; /* Recommended mobile supporting size */
  }

  .movie-button {
    inline-size: 154px;
    block-size: 40px;
    padding: 6px;
    gap: 6px;
    font-size: 11px;
  }

  .movie-button__icon {
    flex-basis: 28px;
    inline-size: 28px;
    block-size: 28px;
  }

  .film > .movie-button {
    inset-inline: 50% auto;
    inset-block: auto 110px;
    transform: translateX(-50%);
  }

  .film--hero > .movie-button {
    inset-inline-start: 22px;
    inset-block-end: 54px;
    transform: none;
  }

  .film__detail {
    inset-inline: 22px;
    inset-block-end: 54px;
    text-align: center;
    font-size: 16px;
  }

  .roles {
    padding: 40px 0 55px;
  }

  .roles__title {
    padding-inline: 22px;
    font-size: 18px;
  }

  .roles__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .role-card {
    min-block-size: 122.3px;
  }

  .open-position {
    padding: 23px 18px 24px 24px;
    font-size: 16px;
  }

  .message {
    padding-block-end: 38px;
  }

  .message__label {
    padding-inline: 22px;
    font-size: 24px;
  }

  .message__title {
    margin-inline: 22px;
    font-size: 24px;
  }

  .message__copy {
    inline-size: calc(100% - 44px);
    margin-block-start: 50px;
    font-size: 18px;
    letter-spacing: 0.03em;
  }

  .who {
    padding-block: 30px 40px;
  }

  .who__label {
    margin-inline: 22px;
    font-size: 24px;
  }

  .information-grid,
  .tile-grid {
    grid-template-columns: 1fr;
    inline-size: calc(100% - 44px);
  }

  .information-grid {
    margin-block-start: 26px;
  }

  .info-card {
    min-block-size: 0;
  }

  .info-card__title {
    font-size: 20px;
    letter-spacing: 0.2em;
  }

  .info-card__copy {
    font-size: 16px;
    line-height: 1.75;
  }

  .info-card__more {
    margin-block-start: 0;
    font-size: 16px;
    line-height: 1.625;
  }

  .tile-grid {
    margin-block-start: 30px;
  }

  .site-footer {
    display: block;
    padding: 80px 16px 14px;
  }

  .site-footer__links {
    gap: 12px;
    font-size: 12px;
    line-height: 1;
  }

  .site-footer__copyright {
    margin-block-start: 16px;
    font-size: 10px;
    line-height: 1.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .career-page *,
  .career-page *::before,
  .career-page *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
```

The reduced-motion rule handles CSS effects only. Video pausing, poster selection, menu operation, and any movie dialog require their own implementation. Essential disclosure controls should remain in the document and usable at each breakpoint; `.site-nav__desktop-only` is intended only for routes also provided in the mobile navigation.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This does not imply that the inspected site uses Tailwind. Define the properties above before this mapping.

```css
@theme inline {
  --color-page: var(--color-white);
  --color-surface-soft: var(--color-soft);
  --color-text-main: var(--color-ink);
  --color-film-red: var(--color-movie-main);
  --color-film-blue: var(--color-movie-digital);
  --color-film-magenta: var(--color-movie-marketing);

  --font-sans: var(--font-body);
  --font-heading: var(--font-display);
  --font-message: var(--font-editorial);
  --font-label: var(--font-english);

  --spacing-page: var(--page-inset);
  --spacing-card-gap: var(--grid-gap);
  --spacing-card-inline: var(--card-inline);
  --spacing-header: var(--header-size);

  --radius-action: var(--radius-pill);
}
```

## Sources & Evidence

- **Original and final page:** [Fast Retailing Japanese Careers](https://www.fastretailing.com/careers/ja/). The supplied browser record reports HTTP `200` with no URL change.
- **Capture time:** October 1, 2026, `17:59:21.123Z`, corresponding to October 2, 2026, `02:59:21.123` in Japan.
- **Desktop evidence:** `1440 × 1000` viewport; current opening scene, marketing-story scene, and lower company-information/image-link/footer captures; rendered text, link targets, bounds, computed typography, colors, and selected transitions.
- **Mobile evidence:** `390 × 844` viewport; current lower company-card and image-tile/footer captures; rendered DOM and computed styles covering the broader page. The supplied mobile element snapshot has a scrolled coordinate origin.
- **Measured document heights:** approximately `8890.5px` desktop and `8851.4px` mobile. These are capture-state measurements.
- **Inspection process:** the supplied record describes an initial observation of at least five seconds, readiness checks for layout and visible images, and traversal through intermediate scroll positions. Perpetual animations were temporarily paused during readiness checks and resumed afterward. SharedWorkers and service workers were disabled.
- **Interaction limits:** no recorded movie-button activation, expanded navigation state, cookie-settings dialog, keyboard-focus sequence, or linked-page visit. Hover endpoints, media timing, sound behavior, exact scroll choreography, and delayed content remain unverified.
- **Asset limits:** source media paths, font-file URLs, rendered-font resolution, and internal movie-button artwork were not supplied. The opening slogan and several smaller labels are described visually where their own computed styles are unavailable.

This reference describes the current supplied page evidence. Values identified as recommendations, visual estimates, or reconstructed CSS should be validated with the intended assets and content before use.