アイタイス inc. 5th アニバーサリー スペシャルサイト

# I-tie-S inc. 5th Anniversary — Style Reference

> A celebratory photo wall wrapped in red ribbons, with monumental lettering and a playful human cast.

**Website:** [i-tie-s.com/five](https://i-tie-s.com/five/)
**Original URL:** https://i-tie-s.com/five/
**Final URL:** https://i-tie-s.com/five/
**Theme:** light gray canvas, saturated red identity, white reversed graphics, and near-black accents.
**Inspected:** September 24, 2026, at 06:00 JST; supplied retrieval timestamp: September 23, 2026, at 21:00:04.555 UTC.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current anniversary page served with HTTP 200. Visual evidence covers the desktop opening, part of the people mosaic, desktop recruitment/footer, and mobile opening and recruitment/footer. Rendered DOM evidence also covers the introduction, chronology, anniversary comparisons, philosophy, messages, related content, and recruitment details. Those additional sections have uneven visual coverage.

The page celebrates I-tie-S through people, language, and a conspicuous red identity. Oversized red lettering sits over a deliberately faded wall of portraits. Repeating anniversary ribbons occupy the top and side edges, while a small recruitment tab stays visible at the upper right. The people return later as full-color photographs, tiny floating heads, and theatrical cutouts. Red clown noses provide a recurring connection between the portraits and the circular anniversary emblem.

This is a corporate anniversary experience with substantial editorial content and a recruitment conclusion. Its structure includes company history, relationships, values, and a representative's message. Preserve that narrative depth when reusing the design. The graphic impact comes from scale changes: enormous lettering, compact photographic labels, very small border decoration, and broad areas of empty gray.

## How to Read This Reference

- **Measured** values come from the supplied rendered DOM, computed styles, or inline SVG declarations. Bounding boxes are rounded to two decimal places where useful.
- **Visual estimates** come from the supplied original-page screenshots. They are not recovered CSS declarations or exact pixel samples.
- **Derived** values are arithmetic based on measured boxes, such as the gap between history items.
- **Recommendations** describe a new implementation. Breakpoints, accessibility additions, asset wiring, and the Quick Start are not claims about the source implementation.
- SVG artwork carries much of the display typography. A wrapper's computed `14px` font size does not describe the visible size or font of its paths.
- DOM text confirms content availability, but does not prove that every extracted paragraph was visible, expanded, or presented in a dialog.
- All named custom properties below are implementation aliases. The supplied root custom-property sample contains general font-size presets, not a complete site token system.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Anniversary Red | `#d70a2d` | `--color-red` | Measured recruitment-tab background, history dates, and inline opening-title SVG fills. Primary identity color. |
| Light Gray | `#eeeeee` | `--color-canvas` | Measured HTML/body background. Visible across the people section and through open areas of the composition. |
| Near Black | `#0e0e0e` | `--color-ink` | Measured default text, history-heading SVG fill, and a dark section background. Suitable shared token for the visually dark application button and footer. |
| White | `#ffffff` | `--color-white` | Measured introductory text and inline navigation/application SVG fills. Reversed lettering, rules, and circular plus markers. |
| Secondary Gray | `#555555` | `--color-muted` | Measured history descriptions. Keeps dense editorial text quieter than titles. |
| Coral Nose | Approximately `#ef5151` | `--color-coral` | Visual estimate for the larger circle in the anniversary emblem. Secondary graphic accent, not a separate action color. |

A small history affordance also computes to `#0c0c0c`. This is an observed near-black variation, not evidence of a separate semantic color family.

### Photographic Color Treatments

The opening portraits are nearly monochrome and heavily washed toward white. Faces remain identifiable, but they sit well below the red lettering in contrast. A grayscale image layer plus an approximately 85–90% white veil is a reasonable starting adaptation; the original filter and opacity values were not supplied.

The recruitment background reverses that hierarchy. A photographic interior is barely visible through a strong red treatment, while the headline, role labels, and slogan are white. Use a red base with a low-contrast photographic layer. The screenshot supports the appearance, but not a specific blend mode or overlay formula.

Full-color people photographs should retain natural skin, clothing, office, and workshop colors. The red nose becomes especially legible against those varied environments. Do not globally tint every image red.

## Tokens — Typography

### Japanese Body and Editorial Text

**Measured source stack:** `"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif`.

The body uses a conventional Japanese gothic stack. Regular paragraphs use weight `400`; history headings use `700`. The root computes to `10px` at both inspected widths, while the body computes to `14px`. Individual content paragraphs override that baseline with their own sizes and line heights.

The Quick Start uses the English-named entries from that stack with a conventional root size. It preserves component measurements directly instead of copying unexplained source `rem` values.

### Dates and Numeric Labels

**Measured source family:** `Prompt, sans-serif`.

Prompt is confirmed for chronology dates and the years on anniversary-comparison entries. Chronology dates are regular weight; comparison years are bold. This evidence does not establish Prompt as the font behind the enormous display lettering.

### Display Lettering as Artwork

The opening title consists of separate SVG pieces associated with `.main-copy01`, `.main-copy02`, and `.main-copy03`. Their inline fill is `#d70a2d`. The split is functional: desktop assembles `PLE` and `ASURE` into one line, while mobile separates them into two lines below `GREAT`.

Navigation lettering also uses SVG, as shown by `.toggle-label-svg`. The anniversary label and application lettering expose `.anniversary-label-svg` and `.recruit-btn-svg` respectively.

Visually, the English display lettering is extremely heavy, tightly arranged, and sans-serif. The Japanese anniversary and recruitment graphics use forceful, slanted forms. No exact font family for these graphics can be recovered from the supplied evidence. Preserve authorized vector artwork when available; otherwise describe a replacement as an approximation.

### Type and Artwork Scale

| Role | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Root font size | `10px` | `10px` | Measured computed style |
| Body baseline | `14px / 14px`, weight 400 | Same | Measured; not the paragraph reading style |
| Introduction paragraphs | `16px / 25.6px` | `14px / 22.4px` | Measured; line-height ratio 1.6 |
| History title | `18px / 23.4px`, weight 700 | `17px / 22.1px`, weight 700 | Measured |
| History description | `13px / 19.5px` | `12px / 18px` | Measured; line-height ratio 1.5 |
| History description tracking | `0.26px` | `0.24px` | Measured; both equal `0.02em` |
| History date | `10px / 10px`, Prompt 400 | Same | Measured |
| Comparison year | `12px / 12px`, Prompt 700 | `10px / 10px`, Prompt 700 | Measured font metrics; wrapper height is larger |
| Comparison person name | `17px / 22.1px`, weight 700 | `14px / 16.1px`, weight 700 | Measured |
| Comparison helper label | `11px / 11px` | `10px / 10px` | Measured |
| `GREAT` artwork | `626.67 × 141.42px` | `296.39 × 66.88px` | Measured SVG wrapper, not font size |
| Recruitment-tab lettering | `90 × 21.59px` | `70 × 16.80px` | Measured SVG wrapper |
| Recruitment headline | About `1140 × 140px` | About `350 × 44px` | Visual estimate of visible lettering |
| People name labels | About `16px` | Not visually inspected | Visual estimate |

The opening title's wrapper has a computed line height of zero because its visual content is graphic artwork. Do not transfer that line-height rule to ordinary text headings.

## Tokens — Spacing & Shapes

There is no demonstrated universal spacing unit. The page combines fixed controls, viewport-related artwork, component-specific offsets, and large photographic compositions.

### Spacing Scale

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Side ribbon width | `25px` | `10px` | Measured repeated-strip boxes |
| Top ribbon wrapper height | `25.5px` | `14px` | Measured; graphic bounds and visible fill can differ |
| Recruitment-tab top/right offset | `25px / 25px` | `10px / 10px` | Measured |
| Tab padding, top/right/bottom/left | `10 / 20 / 17 / 30px` | `11 / 12 / 11 / 17px` | Measured |
| Introduction text inset from panel left | `155px` | `20px` | Derived from panel and paragraph boxes |
| Introduction paragraph gap | About `10px` | About `10px` | Derived |
| History first-item left position | `100px` | `30px` | Measured viewport-relative position |
| History item gap | `60px` | `40px` | Derived from adjacent positions and widths |
| History date-to-title gap | `10px` | `10px` | Derived |
| History title-to-description gap | `10px` | `6px` | Derived |
| Opening section overlap into first viewport | `45px` | `30px` | Derived from introduction top at 955px / 814px |

### Border Radius

| Element | Treatment | Evidence |
| --- | --- | --- |
| Recruitment tab | Bottom-left corner only: `20px` desktop, `12px` mobile | Measured |
| Large red section entrances | Rounded top corners, about `40–45px` desktop and `20–25px` mobile | Visual estimate |
| Application button | About `12px` desktop and `8px` mobile | Visual estimate |
| People mosaic | Mostly square internal joins; selected exposed corners are rounded | Screenshot observation |
| Plus markers | Circular | Screenshot observation |
| Role strip | Square corners and fine dividing rules | Screenshot observation |
| History links | Sampled anchor radius `0px` | Measured; image-specific clipping was not supplied |

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 | Status |
| --- | --- | --- | --- |
| Document height | `9940px` | `9095px` | Reported capture-state measurements |
| Recruitment tab | `171 × 48.59px` | `121 × 38.80px` | Measured |
| Introduction section | `1390 × 762.53px`, x=25 | `370 × 684.38px`, x=10 | Measured |
| Introduction paragraph column | `658.80px`, x=180 | `330px`, x=30 | Measured |
| History section | `1440 × 972.95px` | `390 × 824.63px` | Measured |
| History item width | `324.28px` | `268.33px` | Measured |
| Sample history link box | `324.28 × 402.25px` | `268.33 × 368.88px` | Measured; text can extend beyond the anchor box |
| History heading graphic | `400 × 52.52px` | `273.89 × 36.58px` | Measured |
| Comparison entry | `252.88 × 115.19px` | `128 × 190.19px` | Measured anchor box; not a guaranteed content boundary |
| People mosaic visible width | About `1010px` | Not captured | Visual estimate |
| Typical people photo tile | About `252 × 168px`, near 3:2 | Not captured | Visual estimate |
| Recruitment role strip | About `470 × 50px` | About `332 × 35px` | Visual estimate |
| Application button | About `416 × 130px` | About `296 × 87px` | Visual estimate |
| Footer height | About `49px` | About `51px` | Visual estimate |

Document height is an observation, not an implementation target. Content changes, font rendering, open detail states, and motion can change it.

## Components

### Perimeter Anniversary Ribbons

**Role:** persistent identity at the edges of the reading experience.

Red strips occupy the top and both sides of the viewport. Tiny dark anniversary lettering repeats between small cutout heads. The left and right runs extend vertically; the upper run extends horizontally. They remain visible in the opening, people, and recruitment captures.

Desktop side strips are 25px wide. Mobile strips narrow to 10px, allowing the content to retain almost the full phone width. The repeated lettering becomes decorative at that scale. The bottom of the page is a dark footer between the side strips; the evidence does not show a matching horizontal bottom ribbon.

Build these as separate edge layers. Keep them above content without intercepting pointer input. Repeated copies should be hidden from assistive technology, with the page identity provided once in meaningful text.

### Persistent Recruitment Tab

**Role:** direct access to recruitment from any captured section.

The upper-right red tab combines a white two-bar symbol with a white `recruit` wordmark. It is attached to the inner edge of the right ribbon and has only a rounded bottom-left corner. There is no separate floating-card shadow.

The desktop box is 171 × 48.59px at x=1244, y=25. Mobile changes it to 121 × 38.80px at x=259, y=10. The label artwork shrinks from 90px to 70px wide while the control remains conspicuous.

The observed anchor has an empty `href`. This suggests a scripted control, but its click result was not exercised in the supplied evidence. Do not infer a general navigation menu from the two-bar symbol. For a new implementation, use a button if it opens recruitment details or an anchor if it navigates to a real section.

### Opening Portrait Wall

**Role:** establish that the anniversary belongs to a community of people.

A regular, tightly packed photographic field fills the opening. Portraits include people wearing round noses and occasional cats. Tiles have no visible gutters, borders, or caption cards. The desktop tiles appear roughly 167px square; mobile tiles appear roughly 94px square. These are visual estimates, and edge tiles are cropped.

The portraits are strongly faded beneath the foreground graphics. The effect should feel like a photographic wall seen through white paper, with enough facial structure retained to reward a closer look.

Use a separate photographic layer so the title stays fully saturated. Avoid lowering the opacity of the complete hero, which would also weaken its red lettering.

### Opening Title Lockup

**Role:** deliver the page's main statement as a composed graphic.

Desktop has two large lines: `GREAT`, followed by an indented `PLEASURE`. The second line is technically assembled from separate `PLE` and `ASURE` graphics. An anniversary emblem occupies the open space above the right side of that second line. The Japanese anniversary/year graphic sits below on the right, balanced by a clipped Japanese text track on the left.

Measured desktop pieces are:

| Piece | Position | Size |
| --- | --- | --- |
| `GREAT` | x=146.88, y=307.77 | `626.67 × 141.42px` |
| `PLE` | x=301.58, y=478.57 | `332.92 × 143.06px` |
| `ASURE` | x=634.50, y=478.57 | `646.25 × 143.06px` |
| Anniversary/year artwork | x=742.22, y=641.63 | `538.55 × 90.59px` |

The visible English title spans approximately 1133.88px across its offset children. Its H2 wrapper reports a smaller width, so the wrapper alone is not a reliable measurement of the entire composition.

Mobile deliberately becomes three lines: `GREAT / PLE / ASURE`. `GREAT` and `ASURE` are each 296.39px wide. `PLE` is 157.08px wide and slightly inset, leaving space for the anniversary emblem beside it. The year graphic becomes a separate 296.39px-wide row below.

This is art direction, not ordinary word wrapping. Retain the three individual pieces and provide a single accessible heading reading `GREAT PLEASURE`.

### Anniversary Emblem and Text Track

**Role:** add a small identity mark and verbal movement inside the oversized title.

The emblem combines a coral circular form with a smaller, darker red circle at its right edge. Compact anniversary lettering sits beside it. The measured emblem wrapper is 58.75 × 53.03px on desktop and 28.16 × 25.41px on mobile. The accompanying label wrapper is 176.25px wide on desktop and 84.47px on mobile.

Below the title, Japanese copy is clipped between bracket-like ends. The DOM contains repeated long strips approximately 2290–2300px wide, with negative horizontal positions. The visible text region is about 36px high at both widths. Preserve that unusually large mobile text treatment rather than shrinking it in proportion to the desktop layout.

Different captures show different fragments, but timing and direction are not established. A static clipped fallback is appropriate when animation is disabled.

### Downward Scroll Cue and Introduction

**Role:** connect the opening poster to the anniversary story.

A thin downward arrow sits over the top edge of the next red section. Its measured graphic box is 28 × 46.13px on desktop and 18 × 30.36px on mobile. Its clickable behavior was not documented.

The red introduction begins at y=955 on desktop and y=814 on mobile, so its rounded top is visible before the opening viewport ends. Inside, a small graphic label precedes a large multi-line graphic heading, followed by two white paragraphs.

Desktop places the paragraph column at x=180 with a width of 658.80px. Animated decorative face elements occupy the area to its right. Mobile uses a 330px column at x=30 and places the four sampled face elements below the paragraphs. This is a substantive rearrangement, not a scaled desktop composition.

Paragraphs use `16px / 1.6` on desktop and `14px / 1.6` on mobile. The mobile text extraction also contains additional line breaks. Allow copy-specific wrapping instead of assuming identical text geometry at both sizes.

### Dark Interlude

**Role:** a strong tonal separation before the chronology; its content type is unresolved.

The DOM measures a near-black section at 1440 × 720px on desktop and 370 × 450px on mobile. Its text extraction is empty, and the supplied screenshots do not show its contents. Do not identify it as a video player, animation, or loading state without further evidence.

### History Rail

**Role:** present twenty milestones from January 2017 through July 2023.

The section is introduced by the graphic heading `アイタイスの歴史`. Items share a vertical alignment and continue far beyond the viewport horizontally. On desktop, the first three start at x=100, 484.28, and 868.56. Mobile starts at x=30, 338.33, and 646.66. This confirms a horizontal layout at both inspected widths.

Each item has an upper visual region, a small red date, a bold Japanese title, and a muted description. The visual assets occupying the upper region were not supplied in the screenshots. Some milestones are links to company work or editorial pages; others are plain entries. Do not make every item interactive by default.

Use 324.28px-wide items with 60px gaps for the inspected desktop proportion, and 268.33px-wide items with 40px gaps for the mobile proportion. Mobile therefore shows one complete item and part of the next. The rail does not become a vertically stacked timeline in the observed geometry.

The evidence does not establish whether movement uses native scrolling, dragging, buttons, or another mechanism. A keyboard-accessible native horizontal scroller is a recommended adaptation, not a verified source behavior.

### Anniversary Comparison Entries

**Role:** add humorous comparisons with other people's five-year milestones.

Below the history items, the DOM contains eight named comparison entries. Each combines a year, a person name, a visual region, and the helper label `どんな５周年？`.

Desktop sampled entries use a horizontal flex arrangement and measure 252.88px wide. Mobile switches to a block arrangement in a 128px-wide column, producing a much taller item. Longer names receive additional line breaks on mobile.

Related explanatory text appears elsewhere in the extracted document. The entries have empty `href` values, but their activation and detail presentation were not captured. Do not invent a modal style or carousel transition for them.

### People Mosaic

**Role:** make clients and collaborators the main evidence of the company's relationships.

The desktop capture shows full-color photographs arranged on an approximately 252 × 168px module. Four columns span roughly 1010px, positioned toward the right of the page. Photos touch with no gutters. Deliberate empty regions interrupt the grid, producing a stepped, open-center composition.

This is not a conventional uniform staff directory. The surrounding gray gaps hold short underlined comments accompanied by small cutout heads. A large cutout person in a dynamic pose overlaps the open space at lower left. A vertical Japanese statement is partially visible at the far left; its complete visual arrangement is outside the capture.

The red category heading reads `corporater`, preserving the source spelling. The extracted text also includes `client`. Use category labels as editorial annotations around the mosaic rather than giving every image a colored category badge.

Only the desktop mosaic is visually supplied. Its mobile column count, ordering, and cutout placement remain unverified.

### Person Photo Tile

**Role:** identify a person and signal access to related content.

Each visible tile has three layers: an edge-to-edge environmental photograph, a compact black name strip near the lower-left corner, and a small white circular plus marker near the lower-right corner. The marker is approximately 26px in diameter. Labels appear around 16px, in bold white Japanese text.

Photographs show people reading, drawing, photographing, working at computers, or interacting in recognizable spaces. Faces and red noses remain focal points, while the environment provides character.

Most internal joins are square. Selected outer corners of the overall arrangement are rounded; applying a large radius to every tile would break the continuous mosaic.

The DOM contains testimonials, roles, social links, and related work for these people. The plus suggests disclosure, but no opened state is supplied. If implemented as a disclosure control, make the whole tile one operable target and treat the visible plus as decoration rather than a nested button.

### Philosophy, Message, and Related Content

**Role:** extend the anniversary beyond a visual celebration into company purpose and ongoing work.

The rendered text establishes `MISSION`, `VISION`, and `VALUE`, with five value statements. It also includes an anniversary message introduction, `メッセージを読む`, a long representative's statement, and links to columns, work categories, YouTube playlists, and TikTok.

These blocks are part of the current page's content scope, but the supplied screenshots do not establish their complete layouts. Their presence should inform information architecture; it should not be used to invent card shapes, numeric counters, background effects, or modal anatomy.

The labels `CLUMN` and `WORKS` occur in the original link text. Preserve source wording when documenting the page, while treating editorial corrections in a new project as a separate decision.

### Recruitment Panel

**Role:** conclude with a direct invitation to join the company's creative work.

The panel uses a red photographic background and a centered hierarchy: a small bracketed `recruit` label, oversized white `He wants You!!` lettering, a three-cell outlined role strip, a slanted Japanese slogan, a cutout portrait, and a large black application button.

The role strip reads `プロデューサー`, `ディレクター`, and `コピーライター`. It is approximately 470 × 50px on desktop and 332 × 35px on mobile. Thin white outer and internal rules distinguish the cells. There is no evidence that these labels are selectable tabs.

The slogan is `雨森の右腕となるのはキミだ!!`. It stays on one line on desktop and breaks into two emphatic lines on mobile. The white-jacket portrait overlaps the upper edge of the black button. A small `← he(彼)` annotation points toward the person, reinforcing the informal tone.

The portrait occupies a similar approximate visible height in both captures, around 235px, but takes a much larger share of the mobile composition. Preserve that relative prominence rather than scaling every element by the viewport-width ratio.

### Application Button and Recruitment Details

**Role:** move interested readers toward contact.

The button is a wide near-black rectangle with modest rounded corners, bold white `応募する` lettering, and a rightward arrow. Its estimated dimensions are 416 × 130px on desktop and 296 × 87px on mobile. It is centered beneath the portrait without a shadow.

The DOM confirms an application link to `https://i-tie-s.com/contact`. That destination was not opened during this analysis.

Separate recruitment-detail text specifies project-based support by experienced freelance producers, directors, and copywriters. It includes eligibility, compensation, duties, and application instructions. Its presentation and relationship to the persistent recruitment tab were not exercised. Do not describe the invitation as verified permanent employee hiring or assume a particular detail overlay.

### Footer

**Role:** close the page with a compact identity line.

A near-black horizontal band carries centered red copyright text: `© I-tie-S inc. all rights reserved.` It is approximately 50px high in both screenshots. The red side ribbons continue alongside it. Avoid adding an extensive sitemap or social-navigation grid to this particular closing composition.

## Tokens — Motion & Interaction

| Element or treatment | Supplied evidence | What can be concluded |
| --- | --- | --- |
| Header transform | `transform 1s cubic-bezier(0.25, 0.82, 0.355, 1)` | A one-second transform transition is declared; trigger and travel distance are unknown. |
| Recruitment tab | `0.4s` transition | A transition duration is measured; hover or open-state appearance was not captured. |
| Anniversary emblem wrapper | `transform 1s cubic-bezier(0.25, 0.82, 0.355, 1)` | Transform easing is known; exact interaction is not. |
| Introduction section | `0.7s` transition | A duration is measured; affected visual state is unresolved. |
| Decorative face elements | `2s linear infinite ameface` and `2s linear infinite ameface2` | Two repeating animations are declared. Their keyframes were not supplied. |
| History and comparison links | `0.5s` transition | Duration is known; no verified hover inversion, zoom, or fade. |
| Perimeter ribbons | Repeated strips with offscreen and offset positions | Consistent with a looping track; speed, direction, and implementation are unverified. |
| Hero text track | Repeated long strips, clipped fragments, negative x positions | A track-like layout is established; exact playback behavior is not. |
| People plus markers | Visible affordances and related detail text | Disclosure is suggested; opening, closing, focus management, and transition are unverified. |
| Recruitment destination | Contact URL present in rendered anchors | Link target is verified; submission behavior is outside scope. |

Several sampled elements report `animation: none`. That does not prove the whole page is static: movement can belong to ancestors, scripts, or other elements. Likewise, a generic `transition: all` entry without a useful duration is not evidence of a visible animation.

For reuse, motion should support the recurring people and ribbon motifs. Do not invent parallax, scroll pinning, magnetic buttons, or a spinning-logo effect as observed features. Provide a static state for decorative tracks and coordinate any JavaScript animation with reduced-motion preferences.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Base canvas | Flat `#eeeeee` | Shared editorial space and intentional gaps in the people composition |
| Opening photographic field | Faded, nearly monochrome portraits | Human texture behind the red title |
| Perimeter | Red bands with tiny dark lettering and cutout heads | Persistent anniversary identity |
| Introductory red panel | Red field, white copy, rounded upper edge | Transition from poster to narrative |
| Dark interlude | Measured `#0e0e0e` block | Tonal separation; content type unresolved |
| People tiles | Full-color photography | Individuality and relationship evidence |
| Photo name strips | Compact black fill with white text | Legibility over busy images |
| Recruitment | Red-treated photograph with white graphics | Strong closing invitation |
| Application button and footer | Near-black fill | Contrast against the red section |

No general shadow-based elevation system is visible. Hierarchy comes from color, graphic scale, photographic boundaries, selective overlap, and empty space.

## Imagery

The photographic direction is personal and humorous. Portraits vary in age, expression, clothing, and setting. Red noses create a simple repeated motif without making every photograph identical. The people section uses environments and activities, while the hero reduces the same human presence to a pale visual texture.

Cutouts are deliberately theatrical: a person appears to step or kick into the composition, small heads punctuate comments, and the recruitment portrait poses above the application button. Keep their edges clean and their silhouettes unobstructed. Their scale and placement are more important than adding ornamental effects.

Use three distinct image treatments: faded portrait tiles for the opening, natural-color environmental photographs for people, and saturated red treatment for the recruitment background. Do not apply pixelation, halftone texture, or a global monochrome filter to this design.

### Observed Asset References

No original image file URLs or SVG asset filenames were included in the supplied evidence. Do not invent them. The following references identify observed artwork or inline selectors, not downloadable paths.

| Asset or representation | Evidence | Implementation implication |
| --- | --- | --- |
| Three-piece opening title | `.main-copy01`, `.main-copy02`, `.main-copy03`; red SVG fill | Keep the pieces independently positionable. |
| Anniversary label | `.anniversary-label-svg`; red SVG fill | Preserve the compact graphic lettering. |
| Recruitment-tab wordmark | `.toggle-label-svg`; white SVG fill | Scale the graphic from 90px to 70px at the inspected endpoints. |
| Application lettering | `.recruit-btn-svg`; white SVG fill | Maintain its graphic treatment or explicitly use a text approximation. |
| Portrait-wall photographs | Original opening screenshots | Supply consistent tile crops and a separate fade layer. |
| People photographs | Original desktop people screenshot | Preserve environmental context and red-nose visibility. |
| Cutout people and heads | Original people and recruitment screenshots | Use transparent assets when authorized and available. |
| Recruitment background | Original desktop/mobile recruitment screenshots | Supply a photograph with subdued contrast under red. |

The shell can be reproduced with CSS. The exact personality depends on the photographs, cutouts, and vector lettering.

## Layout & Responsive Behavior

### Opening Composition

Desktop arranges the title across two lines with a substantial second-line indent. Mobile uses three deliberately composed lines. The mobile title width of 296.39px is approximately 76% of the viewport, leaving enough room for the border strips and the pale photographic field.

The anniversary emblem moves from the open area above the desktop second line into the space beside mobile `PLE`. The year graphic shifts from a lower-right position to a full-width row beneath `ASURE`. The Japanese text track moves below that row and keeps an approximately 36px-high graphic treatment.

### Persistent Edges and Controls

The side ribbons reduce from 25px to 10px, while the recruitment tab reduces from 171px to 121px wide. Its height decreases much less than the viewport width. This preserves the control's prominence on a phone.

The tab's mobile top offset is 10px even though the sampled top ribbon wrapper is 14px high. Do not assume every edge-related measurement uses a single shared inset.

### Editorial Sections

The introduction changes from a broad text column with decorative faces to its right into a narrow text column with the faces beneath it. Body text decreases from 16px to 14px, with the same 1.6 line-height ratio.

The history remains horizontal at both widths. Item width decreases from 324.28px to 268.33px, while the gap changes from 60px to 40px. This preserves readable cards and partial-next-item visibility instead of compressing several columns into the phone width.

Comparison entries change from horizontal flex compositions to vertically arranged blocks. Their measured width halves approximately, while their height grows.

### Recruitment

The English recruitment headline stays on one line in both captures. The Japanese slogan changes from one line to two. The three role cells remain in one row. The portrait becomes proportionally more dominant, and the application button expands to about 80% of the inner mobile panel width.

The mobile recruitment capture shows rounded upper corners and a gray gap above the panel. The desktop capture begins within the red area, so its top boundary is outside that screenshot.

### Limits of the Responsive Evidence

Only 1440px and 390px widths were supplied. The original breakpoint values, intermediate tablet behavior, landscape handling, and safe-area rules are unknown. Mobile people-grid behavior is also unverified. The Quick Start uses a recommended 767px breakpoint and a simple mobile people layout; these are adaptation choices.

## Do’s and Don’ts

### Do

- Use exact measured Anniversary Red `#d70a2d` for the main identity.
- Preserve the light gray canvas and pale portrait wall beneath fully saturated lettering.
- Keep the opening title as three independently arranged graphic pieces.
- Use the mobile `GREAT / PLE / ASURE` composition deliberately.
- Maintain narrow red perimeter ribbons and the upper-right recruitment tab.
- Retain natural-color environmental photography in the people section.
- Leave intentional empty areas inside the desktop people mosaic.
- Use compact black name strips and small white plus markers over photos.
- Keep history dates, titles, and descriptions typographically distinct.
- Preserve the horizontal history layout at the inspected desktop and mobile proportions.
- Use the cutout portrait to overlap the recruitment button visually without blocking it.
- Keep ordinary body copy readable and quieter than the graphic headings.

### Don’t

- Don't identify the SVG display lettering as Prompt or another unverified font.
- Don't interpret a graphic wrapper's `14px` font size as the visible headline size.
- Don't let the mobile opening depend on accidental browser word wrapping.
- Don't replace the stepped people composition with uniformly separated rounded cards.
- Don't wash out the red title when fading the portrait background.
- Don't tint all people photographs red or remove their environmental context.
- Don't treat the three recruitment role labels as verified tabs.
- Don't invent modal layouts, drag behavior, autoplay timing, or hover effects.
- Don't call the unidentified dark section a video player without evidence.
- Don't treat named testimonial contributors as confirmed production credits for this page.
- Don't assume the page is discontinued because its anniversary content refers to 2018–2023.

## Recommended Implementation Additions

These are recommendations for a new implementation, not verified source features:

- Provide one semantic H1 for `GREAT PLEASURE` and hide redundant decorative SVG lettering from assistive technology.
- Keep repeating ribbons and duplicate text tracks out of the reading order. Provide essential identity and copy separately.
- Give recruitment and person-detail controls explicit names and visible keyboard focus.
- Expand the mobile recruitment tab's interactive height to at least 44px while retaining its compact appearance.
- Make the full person tile operable, with the small plus acting as its visual indicator.
- If details use dialogs, implement focus containment, Escape dismissal, and focus return. If they use inline disclosure, use the corresponding expanded state and content relationship.
- Provide native keyboard-accessible horizontal navigation for the history and a clear indication that more content is available.
- Avoid fixed item heights that clip multi-line history descriptions. Some sampled text extends beyond its anchor's measured box.
- Offer static ribbon and face arrangements for reduced motion; also stop any script-driven loops.
- Verify small footer text against its dark background and enlarge or adjust it when needed.
- Reserve image dimensions before loading. Prioritize opening artwork and defer offscreen photographs without disrupting the mosaic geometry.
- Preserve recruitment terms as visible text before users proceed to contact.

## Agent Prompt Guide

### Quick Color Reference

- Main identity and headline: `#d70a2d`.
- Editorial canvas: `#eeeeee`.
- Main text and dark surfaces: `#0e0e0e`.
- Secondary history copy: `#555555`.
- Reversed lettering, borders, and plus circles: `#ffffff`.
- Larger emblem circle: approximately `#ef5151`, a visual estimate.
- Opening photography: strongly faded toward white.
- Recruitment photography: subdued beneath a saturated red treatment.

### Overall Prompt

“Create a corporate anniversary experience inspired by the inspected I-tie-S fifth-anniversary page. Use a light gray canvas, exact red `#d70a2d`, enormous tightly composed vector lettering, and a pale tiled portrait background. Frame the top and sides with thin red anniversary ribbons containing small dark lettering and cutout heads. Keep a red recruitment tab at the upper right with a rounded bottom-left corner. Compose the opening as `GREAT / PLEASURE` on desktop and `GREAT / PLE / ASURE` on mobile, with a circular anniversary emblem occupying the available gap. Continue with an editorial introduction, a horizontal history rail, and an asymmetric people mosaic with touching photographs, black name strips, white plus circles, and intentional empty spaces. End with a red photographic recruitment panel, a white headline, three outlined role cells, a cutout portrait overlapping a black application button, and a compact dark footer. Use ordinary Japanese gothic text for reading content. Treat missing assets and unverified interactions explicitly.”

### Example Component Prompts

1. **Opening lockup:** “Arrange three separate red SVG word pieces over a strongly faded portrait wall. At desktop, put `GREAT` above an indented `PLE` plus `ASURE`. At 390px, place each piece on its own row, keep `PLE` short, and position the anniversary emblem beside it. Maintain one accessible heading.”
2. **People tile:** “Create a roughly 3:2 environmental photo tile with no gutter, a small black Japanese name strip at lower left, and a 26px white plus circle at lower right. Make the entire tile one accessible control. Reserve rounding for exposed corners of the larger composition.”
3. **History rail:** “Create a horizontal chronology with 324px items and 60px gaps on desktop, changing to approximately 268px items and 40px gaps on mobile. Use small red Prompt dates, bold Japanese gothic titles, and gray descriptions with 1.5 line height. Use native scrolling as an explicitly chosen implementation.”
4. **Recruitment panel:** “Use a red-treated photograph, a huge white single-line English headline, three thinly outlined role labels, and a bold slanted Japanese slogan that becomes two lines on mobile. Center a transparent portrait so its lower edge overlaps a wide near-black application button. Keep the photo from intercepting clicks.”
5. **Evidence-aware extension:** “Extend this anniversary design using its verified red/gray palette and photographic language. Mark new layouts and motion as recommendations. Do not infer a dialog, video, font family, or production credit from missing evidence.”

## Quick Start

### CSS Custom Properties

This is an implementation scaffold calibrated to the supplied endpoints, not recovered source CSS. It uses a conventional root size, measured colors and text metrics, and approximate graphic proportions. The 767px breakpoint, native history scrolling, focus treatment, mobile people grid, image overlays, and minimum hit area are recommendations.

Supply authorized artwork through image or inline-SVG elements. The hero expects `.hero-great`, `.hero-ple`, `.hero-asure`, `.hero-badge`, `.hero-years`, and `.hero-strap` inside `.hero-lockup`. Set `--hero-collage` and `--recruit-photo` to local image URLs when assets are available; their default is `none`. Use explicit `--column` and `--row` values on desktop people tiles to preserve the mosaic's intentional gaps.

```css
:root {
  /* Measured palette, with one visually estimated accent */
  --color-red: #d70a2d;
  --color-canvas: #eeeeee;
  --color-ink: #0e0e0e;
  --color-muted: #555555;
  --color-white: #ffffff;
  --color-coral: #ef5151;

  /* Confirmed body and numeric families */
  --font-body: 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
  --font-number: Prompt, sans-serif;
  --text-intro: 16px;
  --text-history-title: 18px;
  --text-history-body: 13px;
  --text-date: 10px;

  /* Measured endpoint geometry */
  --frame-side: 25px;
  --frame-top: 25.5px;
  --tab-top: 25px;
  --history-inset: 100px;
  --history-width: 324.28px;
  --history-gap: 60px;
  --intro-width: 658.8px;

  /* Visual estimates and adaptation choices */
  --section-radius: 45px;
  --hero-overlap: 45px;
  --button-radius: 12px;
  --hero-collage: none;
  --recruit-photo: none;
  --hero-wash: 0.87;
  --recruit-photo-opacity: 0.12;

  /* Source-supported timing; triggers require implementation */
  --ease-transform: cubic-bezier(0.25, 0.82, 0.355, 1);
  --motion-transform: 1s var(--ease-transform);
  --motion-tab: 400ms ease;
  --motion-link: 500ms ease;
}

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  font: 14px/1.5 var(--font-body);
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img, svg { max-width: 100%; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.anniversary-page { margin-inline: var(--frame-side); }

/* Decorative layers: also mark these aria-hidden in markup. */
.frame {
  position: fixed;
  z-index: 100;
  overflow: hidden;
  pointer-events: none;
  color: var(--color-ink);
  background: var(--color-red);
}

.frame--top { inset: 0 0 auto; height: var(--frame-top); }
.frame--left { inset: 0 auto 0 0; width: var(--frame-side); }
.frame--right { inset: 0 0 0 auto; width: var(--frame-side); }
.frame-track { white-space: nowrap; }
.frame--left .frame-track,
.frame--right .frame-track { writing-mode: vertical-rl; }

.recruit-tab {
  position: fixed;
  z-index: 110;
  top: var(--tab-top);
  right: var(--frame-side);
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 10px 20px 17px 30px;
  border: 0;
  border-radius: 0 0 0 20px;
  color: var(--color-white);
  background: var(--color-red);
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--motion-tab);
}

.recruit-tab__bars {
  flex: 0 0 20px;
  height: 14px;
  border-block: 4px solid currentColor;
}

.recruit-tab__label {
  display: block;
  width: 90px;
  height: auto;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: max(700px, 100svh);
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero::before {
  background: var(--hero-collage) center / cover;
  filter: grayscale(1);
}

.hero::after {
  background: rgb(255 255 255 / var(--hero-wash));
}

/* Approximate composition using separate graphic assets. */
.hero-lockup {
  position: absolute;
  top: 30.8%;
  left: 49.5%;
  width: min(78.74vw, 1134px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 14% 29% 36% 21%;
  gap: 20px 0;
  align-items: start;
  color: var(--color-red);
}

.hero-lockup > img,
.hero-lockup > svg {
  display: block;
  width: 100%;
  height: auto;
}

.hero-lockup > .hero-great {
  grid-area: 1 / 1 / 2 / 4;
  width: 70%;
}
.hero-ple { grid-area: 2 / 2 / 3 / 3; }
.hero-asure { grid-area: 2 / 3 / 3 / 5; }
.hero-badge { grid-area: 1 / 4 / 2 / 5; align-self: end; }
.hero-lockup > .hero-years {
  grid-area: 3 / 3 / 4 / 5;
  justify-self: end;
  width: 83.33%;
}

.hero-strap {
  grid-area: 3 / 2 / 4 / 4;
  align-self: center;
  width: 54%;
  overflow: hidden;
  white-space: nowrap;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
}

.intro {
  position: relative;
  margin-top: calc(-1 * var(--hero-overlap));
  padding: 140px 155px;
  border-radius: var(--section-radius) var(--section-radius) 0 0;
  color: var(--color-white);
  background: var(--color-red);
}

.intro-copy { max-width: var(--intro-width); }
.intro-copy p {
  margin: 0;
  font-size: var(--text-intro);
  line-height: 1.6;
}
.intro-copy p + p { margin-top: 10px; }

/* Native scrolling is a recommended implementation choice. */
.history { margin-inline: calc(-1 * var(--frame-side)); }
.history-heading { margin-inline: var(--history-inset); }
.history-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--history-width);
  gap: var(--history-gap);
  overflow-x: auto;
  padding: 20px var(--history-inset) 24px;
  scroll-padding-inline: var(--history-inset);
  scroll-snap-type: x proximity;
}

.history-item { min-width: 0; scroll-snap-align: start; }
.history-item a { color: inherit; text-decoration: none; }
.history-date {
  color: var(--color-red);
  font: 400 var(--text-date)/1 var(--font-number);
}
.history-item h3 {
  margin: 10px 0;
  font-size: var(--text-history-title);
  line-height: 1.3;
}
.history-description {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-history-body);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* Explicit tile positions create the desktop empty regions. */
.people-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(1010px, calc(100% - 140px));
  margin-left: auto;
  margin-right: 100px;
  gap: 0;
}

.person-card {
  grid-column: var(--column, auto);
  grid-row: var(--row, auto);
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 0;
  border-radius: var(--tile-radius, 0);
  overflow: hidden;
  color: var(--color-white);
  background: var(--color-ink);
  text-align: left;
  cursor: pointer;
}

.person-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-card__name {
  position: absolute;
  left: 10px;
  bottom: 10px;
  max-width: calc(100% - 54px);
  padding: 2px 3px;
  background: var(--color-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
}

.person-card__plus {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--color-ink);
  background: var(--color-white);
  font-size: 20px;
  line-height: 1;
}

.recruit-panel {
  position: relative;
  isolation: isolate;
  padding: 100px 24px;
  border-radius: var(--section-radius) var(--section-radius) 0 0;
  color: var(--color-white);
  background: var(--color-red);
  text-align: center;
}

.recruit-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--recruit-photo) center / cover;
  opacity: var(--recruit-photo-opacity);
  pointer-events: none;
}

.recruit-eyebrow { margin: 0; font-size: 16px; }
.recruit-title {
  display: block;
  width: min(100%, 1140px);
  height: auto;
  margin: 36px auto;
}

.recruit-roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 470px;
  margin: 0 auto;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.75);
  list-style: none;
}
.recruit-roles li {
  padding: 14px 4px;
  font-size: 20px;
  font-weight: 700;
  line-height: 20px;
}
.recruit-roles li + li {
  border-left: 1px solid rgb(255 255 255 / 0.75);
}

/* Text approximation; authorized slogan artwork is preferable. */
.recruit-copy {
  margin: 40px 0 20px;
  font-size: clamp(32px, 3.34vw, 48px);
  font-weight: 900;
  font-style: italic;
  line-height: 1.15;
}

.recruit-person {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: 235px;
  max-width: 60%;
  margin: 0 auto -12px;
  object-fit: contain;
  pointer-events: none;
}

.apply-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(416px, 100%);
  min-height: 130px;
  margin: 0 auto;
  padding: 20px;
  border-radius: var(--button-radius);
  color: var(--color-white);
  background: var(--color-ink);
  font-size: 32px;
  font-weight: 700;
  text-decoration: none;
}

.anniversary-footer {
  min-height: 50px;
  padding: 16px 10px;
  color: var(--color-red);
  background: var(--color-ink);
  font-size: 12px;
  text-align: center;
}

/* Recommended focus treatment remains visible on red and gray. */
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px var(--color-white);
}

@media (max-width: 767px) {
  :root {
    --frame-side: 10px;
    --frame-top: 14px;
    --tab-top: 10px;
    --text-intro: 14px;
    --text-history-title: 17px;
    --text-history-body: 12px;
    --history-inset: 30px;
    --history-width: 268.33px;
    --history-gap: 40px;
    --intro-width: 330px;
    --section-radius: 22px;
    --hero-overlap: 30px;
    --button-radius: 8px;
  }

  .recruit-tab {
    gap: 7px;
    padding: 11px 12px 11px 17px;
    border-bottom-left-radius: 12px;
  }
  .recruit-tab__bars { flex-basis: 15px; height: 11px; border-width: 3px; }
  .recruit-tab__label { width: 70px; }

  .hero-lockup {
    top: 28.5%;
    left: 49%;
    width: 76vw;
    grid-template-columns: 4% 53% 43%;
    gap: 11px 0;
  }
  .hero-lockup > .hero-great { grid-area: 1 / 1 / 2 / 4; width: 100%; }
  .hero-ple { grid-area: 2 / 2 / 3 / 3; }
  .hero-badge { grid-area: 2 / 3 / 3 / 4; align-self: center; }
  .hero-asure { grid-area: 3 / 1 / 4 / 4; }
  .hero-lockup > .hero-years { grid-area: 4 / 1 / 5 / 4; width: 100%; }
  .hero-strap { grid-area: 5 / 1 / 6 / 4; width: 100%; margin-top: 8px; }

  .intro { padding: 68px 20px; }
  .history-item h3 { margin-bottom: 6px; }

  /* Recommended fallback; the original mobile mosaic is unverified. */
  .people-mosaic {
    width: calc(100% - 40px);
    margin-inline: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .person-card { grid-column: auto; grid-row: auto; }
  .person-card__name { left: 6px; bottom: 6px; font-size: 13px; }

  .recruit-panel { padding: 64px 19px 70px; }
  .recruit-title { margin: 28px auto 22px; }
  .recruit-roles { max-width: 332px; }
  .recruit-roles li { padding: 8px 0; font-size: 14px; line-height: 17px; }
  .recruit-copy { max-width: 310px; margin: 24px auto 20px; }
  .apply-button { width: 100%; max-width: 296px; min-height: 87px; font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .frame-track,
  .hero-strap__track,
  .face-decoration { animation: none !important; }
  .recruit-tab { transition: none; }
  .history-rail { scroll-behavior: auto; }
}
```

The scaffold intentionally does not invent the missing face keyframes or a ribbon speed. It also does not implement undisclosed detail states. Add those behaviors only with a defined interaction contract and accessible static fallbacks.

### Tailwind v4 Token Mapping

Optional aliases for a project that already uses Tailwind v4. This is not evidence that the inspected page uses Tailwind. Define the custom properties above first.

```css
@theme inline {
  --color-anniversary: var(--color-red);
  --color-canvas: #eeeeee;
  --color-ink: #0e0e0e;
  --color-muted: #555555;
  --color-coral: #ef5151;

  --font-body: 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
  --font-number: Prompt, sans-serif;

  --text-intro: var(--text-intro);
  --text-milestone: var(--text-history-title);
  --text-history: var(--text-history-body);
  --text-date-label: 10px;

  --spacing-frame: var(--frame-side);
  --spacing-history-card: var(--history-width);
  --spacing-history-gap: var(--history-gap);

  --radius-panel: var(--section-radius);
  --radius-application: var(--button-radius);
}
```

When integrating the optional mapping, give the intro utility a distinct alias such as `--text-introduction: var(--text-intro)` if the build tool emits self-referential custom properties. The plain CSS scaffold is independent of this optional mapping.

## Sources & Evidence

- [Current original page — I-tie-S fifth anniversary](https://i-tie-s.com/five/): original and final URL are identical; supplied response status is HTTP 200.
- Capture retrieval timestamp: `2026-09-23T21:00:04.555Z`, equivalent to September 24, 2026, 06:00:04.555 JST.
- Desktop evidence: 1440 × 1000 CSS-pixel viewport, reported document height 9940px, with opening, people-section, and recruitment/footer screenshots.
- Mobile evidence: 390 × 844 CSS-pixel viewport, reported document height 9095px, with opening and recruitment/footer screenshots.
- Rendered DOM and computed-style evidence: element rectangles, Japanese body font stack, Prompt numeric labels, exact palette values, inline SVG fills, link targets, transition declarations, and the two named repeating face animations.
- Observation procedure: initial observation lasted at least five seconds; capture readiness checked document loading, finite animation settling, sampled layout/text stability, and visible image decoding within bounded waits. Perpetual animations were paused for readiness checks and resumed. Intermediate scroll positions were traversed. SharedWorkers and service workers were disabled.
- Interaction limitations: no supplied activation trace demonstrates opened people details, recruitment details, comparison details, message presentation, hover states, or history navigation behavior. Contact and other linked destinations were not inspected.
- Visual limitations: intermediate sections are partly represented only by DOM text and rectangles. Full asset URLs, original breakpoint rules, display-font identities, animation keyframes, and mobile people-grid appearance were not supplied. The analysis used the provided evidence without additional browsing or file access.

This reference describes the page currently served at the inspected URL. Its 2018–2023 anniversary wording is current page content, not a reconstructed historical design.