# e-TEC / JR西日本電気テック株式会社 — Style Reference

> Railway maintenance at human scale, framed by white space, corporate blue, and small red signals.

**Website:** [www.wj-etec.co.jp](https://www.wj-etec.co.jp/)
**Original URL:** https://www.wj-etec.co.jp/
**Final URL:** https://www.wj-etec.co.jp/
**Theme:** white content surfaces, blue identity accents, dark photographic sections, and a charcoal footer.
**Inspected:** September 13, 2026, 04:30:40 JST; supplied retrieval timestamp: September 12, 2026, 19:30:40.434 UTC.
**Viewports:** desktop 1440 × 1000 CSS px; mobile 390 × 844 CSS px.
**Scope:** the current corporate homepage. Three desktop captures show the opening hero, Company section, and recruitment/footer boundary. Two mobile captures show the opening hero and the lower footer. Rendered DOM and computed styles additionally document News, services, company links, recruitment content, and navigation structures. Linked pages were not inspected.

The homepage presents a railway electrical maintenance company through the people, equipment, and working environments that support its services. Large photographs establish the subject immediately: signals, electrical cabinets, tracks, and technicians wearing blue workwear and yellow safety equipment. A dark blue photographic treatment supports a white Japanese statement, while the surrounding interface remains precise and restrained.

The page alternates immersive imagery with spacious information sections. Large English section names establish hierarchy; Japanese labels explain their meaning. Corporate blue belongs to identity and selected headings, while red appears in small markers, arrows, and carousel status. The Company section is especially characteristic: a narrow introduction faces four broad, pale gray links on desktop, then becomes a compact 2 × 2 link grid on mobile.

This is a corporate homepage with several destinations: company information, maintenance services, news, contact, and recruitment. Preserve that information architecture when reusing its visual language.

## How to Read This Reference

- **Measured** values come from the supplied rendered DOM, computed styles, or explicit source custom properties. Measurements are CSS pixels unless stated otherwise.
- **Estimated** values come from the current screenshots. They describe visible appearance without claiming access to an unsampled CSS declaration.
- **Derived** values are calculations from measured numbers. A source-rem equivalent does not establish the original selector or media-query implementation.
- **Recommended** values and behaviors belong to the reusable implementation. Breakpoints, accessibility improvements, overlay recipes, and unsampled hover endpoints are explicitly treated this way.
- **Visibility matters:** navigation subtrees and a recruitment link have DOM rectangles even though they are absent from the corresponding screenshots. Their existence does not prove that they were visible or interactive in the captured state.
- **Typography measurements apply to the sampled element.** An anchor's inherited font size does not establish the size of its nested English title, icon, or graphic.

No additional browsing, command execution, or file inspection was performed for this reference.

## Tokens — Colors

### Default Palette

| Name | Value | Source or implementation alias | Role and evidence |
| --- | --- | --- | --- |
| Corporate Blue | `#0068b7` | Source `--c-logo-blue`; alias `--brand-blue` | Exact source token. Visually consistent with the Company heading, logo blue, and recruitment button. Individual fills were not all sampled. |
| Signal Red | `#e60013` | Source `--c-logo-red`; alias `--brand-red` | Exact source token. Use for small identity marks, progress emphasis, and directional details. |
| White | `#ffffff` | Source `--c-white`; alias `--paper` | Exact source token and measured body background. Also appears in reversed text and the header surface. |
| Black | `#000000` | Source `--c-black`; alias `--ink` | Exact source token and measured primary text color. |
| Company Surface | `#f7f7f7` | Alias `--surface` | Measured background of all four Company links at both viewports. |
| Muted Gray | `#a1a1a1` | Alias `--muted` | Measured on the Google Map link. The Company subtitles look similar, but their own color was not sampled. |
| Footer Charcoal | Approximately `#353535` | Recommended alias `--footer` | Screenshot estimate. The sampled footer element itself is transparent; the actual painted background belongs to an unsampled layer. |
| Photographic Navy | Approximately `#092b3d` in darker regions | Recommended overlay reference | Visual estimate of the composited imagery. It is not an identified solid fill or source token. |
| Cool Separator | Approximately `#ced9dc` | Optional adaptation color | Visible in the strip between recruitment imagery and the desktop footer. Exact source color is unavailable. |

### Color Behavior

The primary canvas is bright white. Company links use a very small tonal step to `#f7f7f7`, so their grouping depends on alignment and spacing more than contrast. The footer makes a much stronger transition to charcoal, with white navigation and gray address text.

Photographic darkness varies with the underlying image. The hero's readable blue-black areas should be reproduced with an image-specific overlay, not by treating a sampled dark pixel as the entire section's background.

The YouTube mark has its own bright red appearance. Keep that supplied brand graphic separate from the site's exact `#e60013` identity token. No selectable color themes were evidenced.

## Tokens — Typography

### Japanese Interface and Body Text

- **Declared source stack:** `"Noto Sans JP", sans-serif`, exposed as `--f-ja`.
- **Computed use:** body copy, navigation controls, Japanese section labels, service introductions, and recruitment paragraphs.
- **Measured weights:** `400` for body/news text and `500` for navigation, Japanese headings, and introductory copy.
- **Character:** clear, moderately weighted Japanese sans-serif with generous line spacing in explanatory passages.
- **Common tracking:** `0.02em` for paragraphs, `0.04em` for desktop navigation, and `0.06em` for Japanese section headings.

### English Display and Utility Text

- **Declared source stack:** `"Figtree", sans-serif`, exposed as `--f-en`.
- **Directly measured example:** Google Map uses Figtree at weight `600`.
- **Visible display treatment:** large English section names and medium English Company link titles have a rounded, contemporary sans-serif appearance consistent with the declared English family.
- **Limitation:** the supplied measurements do not include the inner English heading spans. Their exact font size and weight remain estimates.

The site logo is a graphic wordmark. Its lettering should not be recreated by assigning a body font to plain text.

### Type Scale

| Role | Desktop | Mobile | Weight / tracking | Evidence |
| --- | --- | --- | --- | --- |
| Body default | `15.2381px` | `16px` | `400`; normal tracking | Computed body style |
| Desktop primary navigation | `14.2857px / 22.8571px` | Replaced by compact controls | `500`; `0.04em` | Computed button/link style |
| Japanese section heading | `23.8095px / 33.3333px` | `20px / 28px` | `500`; `0.06em` | Computed H2 style |
| News description | `13.3333px / 24px` | `13px / 20.8px` | `400`; `0.02em` | Computed paragraphs |
| Services introduction | `20px / 32.4px` | `17px / 30.6px` | `500`; `0.02em` | Computed paragraphs |
| Company introduction | `19.0476px / 34.2857px` | `17px / 30.6px` | `500`; `0.02em` | Computed paragraphs |
| Hero supporting line | `24.7619px / 24.7619px` | `15px / 15px` | `500`; `0.02em` | Computed paragraph |
| Recruitment paragraph | `17.1429px / 30.8571px` | `16px / 28.8px` | `500`; `0.02em` | Computed paragraphs |
| Google Map | `13.3333px / 18.6667px` | `14px / 19.6px` | Figtree `600` | Computed link |
| Hero statement | Approximately `48–50px`, two lines | Approximately `30–32px`, two lines | Medium/bold appearance | Screenshot estimate |
| English Company heading | Approximately `66–70px` | Not visually captured | Semibold appearance | Desktop screenshot estimate |
| English Company link title | Approximately `28–30px` | Not directly sampled | Semibold appearance | Desktop screenshot estimate |
| Copyright | Approximately `11–12px` | Approximately `11–12px` | Compact uppercase text | Screenshot estimate |

Do not use the `15.2381px` inherited Company anchor size for its large English title. The screenshot clearly shows multiple typographic levels inside each link.

### Source Unit Warning

The original root font size is unusually small:

- Desktop HTML font size: **`0.952381px`**, with `--base-vw: 1512` and `--vw: 1440px`.
- Mobile HTML font size: **`1px`**, with `--base-vw: 390` and `--vw: 390px`.

In this document, **1u means one source rem**. Therefore, `88u` is approximately `83.81px` on desktop. It does not mean 88 conventional 16px rem units.

The ratios `1440 / 1512` and `390 / 390` match the measured root sizes. This supports a viewport-based scaling interpretation, but the complete root formula, breakpoint, and any caps were not supplied. The Quick Start uses a separate `--u` variable so an application can retain a conventional root font size.

## Tokens — Spacing & Shapes

**Density:** sparse section composition, compact navigation, tightly grouped destination links.

**Geometry:** predominantly rectangular, with approximately 4px corner radii and fine rules. No general shadow-based elevation system is visible in the supplied captures.

### Spacing Scale

| Use | Desktop measurement | Mobile measurement | Interpretation |
| --- | --- | --- | --- |
| Header side inset | `38.0938px` | `20px` | Desktop is approximately `40u` |
| Main content width | `1120px` | `350px` | Derived from repeated content bounds |
| Main content side margins | `160px` | `20px` | Desktop and mobile layouts use different proportions |
| Desktop navigation horizontal padding | `19.0476px` per side | Not applicable | Approximately `20u` |
| Navigation label-to-plus gap | `7.61905px` | Not applicable | Approximately `8u` |
| Company link gap | Approximately `3.8px` | `4px` | Derived from adjacent link rectangles |
| Company link horizontal padding | `38.0952px` | `14px` | Computed |
| Company link vertical padding | `33.3333px` top, `29.5238px` bottom | `28px` top, `14px` bottom | Computed |
| Service label left inset | `36.1875px` | `26px` | Derived from link and paragraph rectangles |
| Service label top inset | Approximately `77.14px` | `38px` | Derived |
| Mobile footer utility-link pitch | Not applicable | Approximately `56.39px` | About `22.39px` content plus `34px` separation |

### Border Radius

| Element | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Company links | `3.80952px` | `4px` | Computed |
| Service group | Approximately `3.81px` on outer left/right corners | `4px` on outer top/bottom corners | Computed per-link corner values |
| Recruitment View More link | `4px` | `4px` | Computed |
| Mobile menu button | Not applicable | `2px` | Computed |
| Progress line and ordinary navigation | Visually square | Visually square | Screenshot observation |

The service links form a continuous group. On desktop, only the group's left and right ends are rounded. On mobile, the rounding moves to the top of the first link and bottom of the last link.

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 |
| --- | --- | --- |
| Header | `1440 × 83.7969px` | `390 × 65px` |
| Header logo link box | `262.906 × 39.25px` | `230 × 34.328px` |
| YouTube link box | `45.703 × 32.375px` | `35 × 25px` |
| Header recruitment link box | `121.891 × 32.375px` | Absent from the visible compact header |
| Menu button | Absent from the visible desktop header | `50 × 25px` |
| Carousel pause button box | `36.188 × 20.938px` | `38 × 22px` |
| One service link | `373.328 × 571.422px` | `350 × 240px` |
| One Company link | `683.797 × 91.422px` | `173 × 135px` |
| Company link arrangement | Four rows | Two columns and two rows |
| Footer | `508.328px` high | `1034.672px` high |
| Document height | `7613.641px` | `7354.172px` |

Logo measurements are link-box measurements, not native asset dimensions.

## Components

### Persistent Corporate Header

**Role:** identity, primary navigation, and recruitment access.

A white strip remains at the top in the opening, middle, and footer captures. The desktop composition places the company logo at the left, Japanese navigation across the center area, and YouTube plus a blue recruitment link at the right. The `会社概要` and `事業案内` controls are actual buttons with small plus marks. Home and contact are links.

At 1440px, the header is approximately 84px high with 38px side insets. The recruitment link is a compact blue rectangle with white text and a small diagonal arrow. Its visible height is about 32px; it does not dominate the navigation.

At 390px, the header becomes 65px high. The logo occupies 230px, followed by a 35px YouTube graphic and a 50 × 25px menu button. The menu graphic uses two thin red horizontal strokes inside a lightly outlined rectangle. Desktop navigation and the blue recruitment button are absent from this compact header.

The source declares `--z-header: 102` and `--z-menu: 101`, consistent with a header above the navigation layer. Persistent positioning is visually supported; the supplied element samples do not expose the positioning declaration itself.

### Split Photographic Hero

**Role:** establish the company's work and human presence before introducing detailed information.

The desktop hero begins immediately below the header and fills the remaining first viewport. In the captured state, a signal-equipment photograph occupies approximately 39.5% of the width, while a close view of a technician working at an electrical cabinet occupies the remaining 60.5%. The seam is around x = 569px. Treat this as the captured composition, not a verified ratio for every carousel state.

The text block is anchored near the lower left, approximately 67px from the viewport edge. The main statement appears on two lines:

> 「あした」をつなぐ。
> 「ともに」つなぐ。

A smaller line, `西には、私たちがいる`, sits below, framed by short horizontal rules. The photographs are darkened sufficiently for white text, with especially deep blue-black tones near the bottom.

The mobile capture reorganizes the media into two vertical regions. Below the 65px header, the upper photograph is approximately 484px high and shows a technician walking along railway tracks. A lower region of about 295px uses electrical-panel imagery behind the statement and controls. Text begins near x = 20px, and the supporting line drops to 15px.

The desktop and mobile captures show different carousel indices and different photographs. They establish the responsive composition, but they do not prove how an identical slide changes its image assignment between breakpoints.

### Carousel Status and Pause Control

**Role:** make the hero's sequence and playback affordance visible.

The visible status is `02 / 04` on desktop and `03 / 04` on mobile. The current number is red, while the separator and total are muted. A long, fine horizontal line follows the counter, with a red completed portion and a pale remainder. A small outlined rectangle contains the pause glyph.

On desktop, the status begins around x = 67px, the line runs approximately from x = 144px to x = 548px, and the pause button begins at x = 568px. On mobile, the group occupies roughly x = 27–280px near the bottom of the first viewport.

The four-state count and pause affordance are observed. Slide duration, transition direction, automatic advancement, progress synchronization, and the result of pressing pause were not verified. Implement those behaviors deliberately rather than deriving a timer from the photographed progress length.

### Bilingual Section Heading

**Role:** separate display hierarchy from Japanese section identification.

The Company capture shows a large blue English name above a smaller black Japanese H2. A tiny overlapping red-and-blue dot motif sits beside the Japanese label, echoing the two-color identity mark without repeating the whole logo.

The Japanese heading is measured at approximately 23.81px on desktop and 20px on mobile. The English Company word is visually around 68px on desktop. The same English/Japanese naming structure exists in the DOM for News and services, although their complete appearance is not shown in the attached section captures.

Keep the English display name, Japanese heading, and introduction as distinct elements. Do not flatten them into one uniformly sized heading.

### News Summary

**Role:** show recent corporate updates without turning the homepage into an editorial feed.

The DOM contains four dated entries, an English News label, a Japanese heading, and a View More link. The desktop paragraph rectangles form two columns and two rows. Mobile places all four descriptions at the same x coordinate in a vertical sequence.

Desktop descriptions measure approximately 355px wide and use `13.3333px / 24px` type. Mobile descriptions measure 200px wide and use `13px / 20.8px`. Their x position of 109px leaves a distinct lane to the left, consistent with the dated structure.

The View More link appears alongside the desktop heading area and below the mobile entries, aligned toward the right. Its measured horizontal extent is approximately 129px at both viewports.

A color transition is declared on description text. The supplied captures do not establish entry borders, date styling, or the final hover color.

### Services Introduction and Three-Part Link Group

**Role:** connect the company statement to its three service destinations.

The introduction describes electrical equipment maintenance and railway safety. Its computed text is white at both viewports. On desktop, the introductory paragraph is positioned toward the right, approximately 428px wide; on mobile, it spans the 350px content width beneath the heading.

The three links are labeled:

- `Inspection` / `検査`
- `Repair & Construction` / `修繕・工事`
- `Technical services & Consulting` / `技術提供・コンサルティング`

Desktop places the links side by side within the 1120px container. Each is approximately 373.33px wide and 571.42px high, with no gap between neighbors. Mobile stacks three 350 × 240px links without gaps.

The label group moves from an approximately 36px left and 77px top inset to 26px left and 38px top on mobile. The longer consulting label wraps to multiple lines.

The dimensions, text, and corner treatment are measured. The supplied screenshots do not show the service group's complete painted surfaces or imagery, so do not invent its photographic subjects, illustration style, or hover transformation.

### Company Introduction and Destination Links

**Role:** provide a calm directory of corporate information.

This is the clearest fully captured information component. A centered 1120px content area divides into a narrow introduction on the left and a wider link stack on the right. The introduction starts at x = 160px. The link stack starts at x = 595.844px, leaving a substantial gap after the approximately 302px-wide introduction.

The four destinations are:

| English title | Japanese label | Observed destination |
| --- | --- | --- |
| Greeting | `ご挨拶` | `/greeting/` |
| Philosophy | `企業理念` | `/philosophy/` |
| Information | `会社情報` | `/information/` |
| Base | `組織図・拠点一覧` | `/base/` |

Each desktop link is an approximately 684 × 91px pale gray rectangle with a 3.81px radius. Inside, a large black English title sits at the left, a smaller muted Japanese label occupies a middle lane, and a tiny red arrow sits inside a fine outlined rectangle near the right edge. In the screenshot, these lanes begin around x = 634px, x = 840px, and x = 1211px.

Vertical gaps are only about 4px. The links read as one organized directory, while the broad white section around them provides breathing room. The introduction uses four deliberate desktop lines with approximately 34px line height.

On mobile, the introduction spans 350px and occupies two lines. The links become a 2 × 2 grid of 173 × 135px tiles, separated by 4px. Their computed padding changes to 28px top and 14px sides/bottom. The mobile inner title, subtitle, and arrow positions were not individually sampled; a stacked label treatment in the Quick Start is a recommendation.

### Recruitment Image Panel

**Role:** connect recruitment with the work already presented by the homepage.

The lower desktop capture shows part of a broad photograph of a technician working with equipment. White copy and an outlined View More link occupy the right side. A thin pale blue-gray strip separates the image area from the footer below.

The recruitment paragraph uses approximately `17.14px / 30.86px` on desktop and `16px / 28.8px` on mobile. The supplied mobile text introduces additional line breaks. The link has a 4px radius and a small diagonal arrow.

The recruitment heading's sampled H2 has no text content even though Recruitment appears in the overall rendered text. Its exact rendering mechanism cannot be established from this evidence.

A separate recruitment link is present in the hero DOM with a 171px desktop box and a 120px mobile box. It is not visible in the corresponding supplied hero images. Its shape, appearance timing, and visibility rules remain unverified.

### Corporate Footer

**Role:** complete the site's navigation and provide location and group links.

The desktop footer is a charcoal field approximately 508px high. Its inner alignment returns to the same x = 160–1280px content boundaries used above. The left area contains the company wordmark, address, and Google Map link. The right area provides a home link, company links, service links, and utility links. Thin vertical rules identify the nested company and service lists.

A horizontal divider separates the upper content from a bottom row containing compact copyright text at the left and two group-related graphics at the right. The linked graphics point to the JR West website and the JRW Innovation platform.

The mobile footer is much taller: approximately 1035px. Company and services remain two adjacent groups, while news, privacy, contact, and recruitment become a generously spaced vertical list. The address and map follow, then two partner graphics share a row above the copyright divider.

The dark mobile screenshot is the lower footer, not an opened menu. It contains the address, partner graphics, and copyright. The footer logo and home link exist earlier in the measured mobile footer but sit above this bottom capture's visible area; their absence from the image does not indicate that mobile removes them.

### Navigation Layers

**Role:** expose deeper company and service destinations.

The DOM contains company and services navigation subtrees and a structure labeled `ナビゲーションメニューモーダル`. The desktop header shows plus-marked section buttons, and the mobile header shows a menu button.

No expanded navigation screenshot or button activation result was supplied. Opening direction, backdrop treatment, focus behavior, animation, dismissal rules, and scroll locking therefore remain unverified. Repeated link text in the DOM is not sufficient evidence of a rolling-text hover effect.

## Tokens — Motion & Interaction

| Treatment | Evidence | Verified value or limitation |
| --- | --- | --- |
| News description color transition | Computed paragraph styles | `color 0.4s cubic-bezier(0.19, 1, 0.22, 1)` |
| Company link background transition | Computed link styles | `background-color 0.4s cubic-bezier(0.19, 1, 0.22, 1)` |
| Footer partner-link opacity transition | Computed link styles | `opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1)` |
| Shared easing | Source `--e-out-expo` | `cubic-bezier(0.19, 1, 0.22, 1)` |
| Hero sequence | Counter and pause glyph in screenshots | Four states indicated; duration and transition mechanics unverified |
| Header persistence | Same top strip in scrolled captures | Visible persistence confirmed; exact positioning implementation unsampled |
| Company/services navigation | Buttons and destination subtrees | Expanded behavior untested |
| Mobile menu | Button and modal-related DOM | Opening, focus, and dismissal behavior untested |
| Recruitment and scroll spacing | DOM geometry | Large scroll-space relationship observed; pinning or parallax not established |

The source contains a broad easing library, including quadratic, cubic, quartic, quintic, exponential, and circular curves. Declaration alone does not establish use. The 400ms exponential ease above is the clearest reusable motion token because it is attached to specific sampled properties.

Many sampled nodes report `transition: all` and `animation: none`. The first string provides no useful duration, and the second does not rule out animated descendants, pseudo-elements, transforms controlled elsewhere, or JavaScript-driven motion.

The supplied capture process waited at least five seconds initially and used layout, text, image-decoding, and animation readiness checks. Perpetual animations were temporarily paused during readiness checks and resumed afterward. These are capture conditions, not evidence of slide timing or complete interaction coverage.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Header | Solid-looking white strip | Persistent identity and controls |
| Main information canvas | White, broad margins | News and company information |
| Company destinations | Measured `#f7f7f7`, small radius, no visible shadow | Group related navigation without heavy boxes |
| Hero imagery | Edge-to-edge photographs with dark blue tonal treatment | Emotional and occupational context |
| Recruitment imagery | Wide photograph with reversed text and outlined link | Connect recruitment with practical work |
| Footer | Estimated charcoal with white and gray content | Dense secondary navigation and corporate details |
| Fine controls | Small outlines, thin lines, red marks | Direction and sequence status |

No visible glass effect, floating card shadow, or pill-shaped button system defines the captured page. Separation comes from space, tonal contrast, photography, and fine rules.

## Imagery

The current captures use documentary workplace photography. Subjects are engaged in railway maintenance: walking along tracks, inspecting cabinets, and working beside electrical equipment. Blue uniforms and yellow helmets provide natural color accents within steel, gravel, concrete, and machinery.

Composition alternates human scale and equipment detail. The desktop opening combines a close equipment view with a worker's face and hands. The mobile opening gives a worker a full-height portrait composition before moving into a dark equipment field behind the copy.

For an adaptation, select photographs with usable text space and separate focal points for wide and narrow crops. Preserve helmets, hands, tools, and the working context. Use appropriate responsive assets or focal positioning rather than allowing a generic center crop to cut off the subject.

Keep photographs continuous and full bleed within their slots. The visual identity depends on their scale and specificity; small stock-photo cards would substantially change the result. Overlay strength should be adjusted per image to maintain readable white text while preserving equipment detail.

### Observed Asset References

No image source paths, native dimensions, or media file formats were supplied. The references below identify visible assets and known link destinations without inventing filenames.

| Asset | Current-page evidence | Known reference |
| --- | --- | --- |
| Company identity graphic | Header at both viewports; desktop footer | Home-linked graphic at `https://www.wj-etec.co.jp/` |
| Hero photograph pair | Desktop opening capture | Signal equipment and technician at an electrical cabinet |
| Mobile hero photograph pair | Mobile opening capture | Technician on tracks and electrical-panel imagery |
| Recruitment photograph | Desktop recruitment/footer capture | Technician working beside equipment |
| YouTube graphic | Both header captures | `https://www.youtube.com/channel/UCEVV_c_9aeEUwgCgsh5_TYA/videos` |
| JR West footer graphic | Both footer captures | `https://www.westjr.co.jp/` |
| JRW Innovation platform graphic | Both footer captures | `https://media.jrw-ip.jp/` |

The linked external destinations were not opened. Photographs, logos, and their exact crops require separately available, authorized assets; the CSS below supplies layout and treatment only.

## Layout & Responsive Behavior

| System | Desktop observation | Mobile observation |
| --- | --- | --- |
| Header | Logo, full navigation, YouTube, recruitment | Logo, YouTube, menu button |
| Hero media | Unequal side-by-side photographs | Vertically stacked photographs |
| Hero copy | Lower-left overlay, approximately 50px statement | Copy in lower media region, approximately 31px statement |
| Content container | 1120px wide with 160px margins | 350px wide with 20px margins |
| News | Two columns and two rows of descriptions | Four vertically stacked descriptions |
| Services introduction | Heading and paragraph occupy separated horizontal regions | Heading followed by full-width paragraph |
| Service links | Three contiguous tall columns | Three contiguous wide rows |
| Company introduction | Narrow left column with deliberate line breaks | Full-width text above links |
| Company links | Four horizontal rows | 2 × 2 tile grid |
| Footer | Wide navigation composition and bottom partner row | Two navigation groups, stacked utilities, address, partner row, copyright |

These changes are component-specific. A single rule that converts every desktop grid to one column would incorrectly reproduce the Company section and footer navigation.

### Scaling and Breakpoints

The source changes `--base-vw` from 1512 to 390 and changes its header-height declaration from `88rem` to `max(65px, 65rem)`. At the inspected viewports, those declarations align with the measured approximately 84px and 65px headers.

Only the two supplied widths were inspected. Tablet behavior, exact breakpoint thresholds, landscape phones, zoom, and wide-screen caps remain unverified. The Quick Start's 1100px breakpoint and scaling bounds are recommendations for a new implementation.

### Scroll Geometry Limitation

The desktop main rectangle ends at y = 4105.313px while the footer begins at y = 7105.313px, a difference of 3000px. The mobile difference is 2532px, exactly three 844px viewport heights. Recruitment content also extends beyond the sampled main rectangle.

These relationships suggest that ordinary document bounds alone do not explain the page's full scroll composition. They do not prove a particular pinning, reveal, or parallax implementation. Avoid reproducing these differences as arbitrary empty padding. Build readable normal-flow sections first, then add scroll choreography only when its actual behavior is specified and tested.

## Do’s and Don’ts

### Do

- Preserve the exact blue `#0068b7`, red `#e60013`, and Company surface `#f7f7f7`.
- Let large workplace photographs establish the company's subject and people.
- Pair English display labels with readable Japanese section names.
- Maintain broad desktop whitespace around the compact Company directory.
- Keep Company links tightly spaced, lightly rounded, and free of visible elevation.
- Reflow services into a vertical stack while retaining a 2 × 2 Company grid on mobile.
- Keep red concentrated in identity details, arrows, and sequence status.
- Preserve the footer's company/services hierarchy and separate utility links.
- Treat measured dimensions, screenshot estimates, and implementation choices as different evidence levels.

### Don’t

- Don't turn every section into an identical rounded-card grid.
- Don't enlarge the compact recruitment link into an unrelated oversized CTA system.
- Don't copy the source's numerical rem values into a standard 16px-root stylesheet.
- Don't use DOM-only rectangles to claim that hidden recruitment or navigation elements were visible.
- Don't describe the dark mobile footer capture as an opened menu.
- Don't infer carousel timing, parallax, or rolling-text animation from still images and duplicate text.
- Don't give every Company link its own large image; the captured directory is typographic.
- Don't replace fine outlines and small radii with pills, thick borders, or heavy shadows.
- Don't assume that missing image paths authorize invented asset names or fabricated photography credits.

## Recommended Implementation Additions

These are recommendations for a new implementation, not verified features of the original page.

- **Accessible navigation:** give the company/services buttons and mobile menu button explicit names, `aria-expanded`, and `aria-controls`. If navigation is implemented as a modal, provide focus management, Escape dismissal, and focus restoration.
- **Larger interaction areas:** retain the compact visible pause and menu graphics inside hit areas of at least 44 × 44px. The measured visual controls are substantially shorter.
- **Carousel control:** provide a functioning pause/resume control with an updated accessible name. Support a static first state and disable automatic advancement under reduced motion. Avoid repeatedly announcing decorative slide changes.
- **Text and graphics:** use meaningful alternative text for informative images and company logos. Hide decorative arrows, rules, dots, and duplicate animation labels from assistive technology.
- **Readable contrast:** test each image/copy combination. Treat pale gray descriptive text as a visual reference, then use a darker text token where contrast requires it.
- **Responsive resilience:** allow longer Japanese labels and English titles to wrap. Use minimum heights rather than text-clipping fixed heights where translated or edited content can grow.
- **Media loading:** prioritize the initial visible photograph, preserve image slot dimensions, and defer lower-page assets. Supply deliberate wide and narrow crops when available.
- **Destination validation:** verify recruitment links before reuse. The supplied homepage links mainly use `http://www.wj-etec.co.jp/recruitment/`, while one menu link contains `/recruitment/recruitment/`. Neither destination behavior was tested.

## Agent Prompt Guide

### Quick Color Reference

- Canvas and header: exact `#ffffff`.
- Primary text: exact `#000000`.
- Corporate blue: exact `#0068b7`.
- Identity red: exact `#e60013`, used sparingly.
- Company link surfaces: exact `#f7f7f7`.
- Muted map text: measured `#a1a1a1`; validate other secondary text independently.
- Footer: approximately `#353535`, an implementation estimate.
- Photography: cool dark overlays adjusted to each image, with white copy.

### Overall Prompt

“Create a Japanese railway-maintenance corporate homepage using large documentary photographs, a white persistent header, blue `#0068b7` identity accents, and small red `#e60013` details. Use Noto Sans JP for Japanese copy and Figtree for English display labels. Build a first-screen hero with unequal photographic columns on desktop and vertically stacked image regions on mobile. Place a two-line white Japanese statement near the lower left, followed by a short supporting line, a four-state counter, a fine progress line, and a compact pause control. Follow with news, three service destinations, a spacious Company directory, recruitment imagery, and a charcoal corporate footer. At 1440px, use an approximately 1120px content width. At 390px, use 20px side margins. Reflow service columns into three rows and Company links into a 2 × 2 grid. Keep corners near 4px and avoid visible card shadows. Treat carousel mechanics and expanded menus as separately specified behavior.”

### Example Component Prompts

1. **Company directory:** “On a white desktop canvas, place a large blue Company title and Japanese introduction in a narrow left column. To its right, stack four pale gray `#f7f7f7` links measuring approximately 684 × 91px with 4px gaps. Each link contains a large black English title, a smaller gray Japanese description, and a tiny red arrow inside a fine outline. On mobile, move the introduction above a 2 × 2 grid of approximately 173 × 135px links.”
2. **Responsive hero:** “Use railway workplace photography at full viewport width. At 1440px, create two unequal photographic slots beneath an approximately 84px white header. At 390px, use a 65px header, a roughly 484px upper portrait slot, and a roughly 295px lower image region containing the copy. Preserve the subject's helmet, hands, and working environment. Add an image-specific navy overlay behind white text.”
3. **Service links:** “Create three contiguous service destinations labeled Inspection, Repair & Construction, and Technical services & Consulting, each paired with its Japanese label. Use approximately 373 × 571px columns on desktop and 350 × 240px rows on mobile. Round only the outer corners of the complete group. Use supplied service artwork only; do not invent the original imagery.”
4. **Footer:** “Build a charcoal corporate footer with a white company wordmark, nested company and service links marked by thin vertical rules, gray location text, a map link, and two partner graphics. On mobile, retain company and services side by side, stack utility links below, and place partner graphics above a fine copyright divider. Keep the header independently persistent.”
5. **Interaction treatment:** “Use a 400ms `cubic-bezier(0.19, 1, 0.22, 1)` transition for restrained color, background, and opacity feedback. Add visible keyboard focus and reduced-motion support. Define hover endpoints and carousel timing explicitly as new implementation decisions.”

## Quick Start

### CSS Custom Properties

This adaptation retains a conventional root font size and uses `--u` for source-like dimensions. Exact palette values are separated from estimated footer and overlay treatments. The 1100px breakpoint, scaling bounds, mobile English title sizes, focus treatment, and hover endpoint are recommendations.

Load the declared font families separately using available font assets. No font-file URLs were supplied. The hero expects two images inside `.hero-media`, followed by `.hero-copy` and `.hero-controls`. Its progress element contains a span whose `--progress` percentage is updated by the carousel implementation. CSS alone does not implement playback or menus.

```css
:root {
  /* Exact source colors and measured surface */
  --brand-blue: #0068b7;
  --brand-red: #e60013;
  --paper: #ffffff;
  --ink: #000000;
  --surface: #f7f7f7;
  --muted: #a1a1a1;

  /* Recommended visual approximations */
  --footer: #353535;
  --secondary-text: #707070;
  --surface-hover: #eeeeee;

  /* Declared source families */
  --font-ja: 'Noto Sans JP', sans-serif;
  --font-en: 'Figtree', sans-serif;

  /* Recommended bounds; matches the sampled desktop unit */
  --u: clamp(0.85px, calc(100vw / 1512), 1.08px);
  --content-width: calc(1176 * var(--u));
  --header-height: calc(88 * var(--u));
  --radius-panel: calc(4 * var(--u));
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --duration-ui: 400ms;
  --z-header: 102;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-ja);
  font-size: max(15px, calc(16 * var(--u)));
}

img {
  display: block;
  max-width: 100%;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

.container {
  width: min(var(--content-width), calc(100% - 40px));
  margin-inline: auto;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-height);
  background: var(--paper);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  height: 100%;
  padding-inline: calc(40 * var(--u));
}

.site-logo {
  flex: 0 0 auto;
  width: calc(276 * var(--u));
}

.desktop-nav,
.header-actions {
  display: flex;
  align-items: center;
}

.desktop-nav a,
.desktop-nav button {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-height: var(--header-height);
  padding-inline: calc(20 * var(--u));
  border: 0;
  color: var(--ink);
  background: transparent;
  font-size: calc(15 * var(--u));
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.header-actions {
  gap: calc(16 * var(--u));
}

.youtube-link {
  width: calc(48 * var(--u));
}

.recruit-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(7 * var(--u));
  min-width: calc(128 * var(--u));
  min-height: calc(34 * var(--u));
  border-radius: 4px;
  color: var(--paper);
  background: var(--brand-blue);
  font-size: calc(15 * var(--u));
  text-decoration: none;
}

.menu-toggle {
  display: none;
}

.site-main {
  padding-top: var(--header-height);
}

.hero {
  position: relative;
  min-height: 700px;
  height: calc(100svh - var(--header-height));
  isolation: isolate;
  overflow: hidden;
  color: var(--paper);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  grid-template-columns: 39.5% 60.5%;
}

.hero-media img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Recommended overlay; tune against the supplied photographs */
  background: linear-gradient(
    to top,
    rgb(4 31 47 / 88%),
    rgb(4 31 47 / 18%)
  );
}

.hero-copy {
  position: absolute;
  left: calc(70 * var(--u));
  bottom: calc(112 * var(--u));
  max-width: calc(100% - 40px);
}

.hero-title {
  margin: 0 0 calc(22 * var(--u));
  font-size: calc(52 * var(--u));
  font-weight: 500;
  line-height: 1.48;
  letter-spacing: 0.02em;
}

.hero-subtitle {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  margin: 0;
  font-size: calc(26 * var(--u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}

.hero-subtitle::before,
.hero-subtitle::after {
  content: '';
  width: calc(20 * var(--u));
  height: 1px;
  background: currentColor;
}

.hero-controls {
  position: absolute;
  left: calc(70 * var(--u));
  bottom: calc(34 * var(--u));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(20 * var(--u));
  width: calc(564 * var(--u));
  max-width: calc(100% - 40px);
  font-family: var(--font-en);
  font-size: 14px;
}

.hero-index {
  display: flex;
  gap: 10px;
  color: #a8b6bd;
}

.hero-index .current {
  color: var(--brand-red);
}

.hero-progress {
  height: 1px;
  background: rgb(255 255 255 / 65%);
}

.hero-progress > span {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  background: var(--brand-red);
}

.hero-pause {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.pause-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 22px;
  border: 1px solid rgb(255 255 255 / 60%);
}

.pause-icon::before {
  content: '';
  width: 7px;
  height: 10px;
  border-inline: 2px solid currentColor;
}

.section-name {
  margin: 0 0 calc(18 * var(--u));
  color: var(--brand-blue);
  font-family: var(--font-en);
  font-size: calc(72 * var(--u));
  font-weight: 600;
  line-height: 1;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: calc(25 * var(--u));
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
}

.brand-dots {
  position: relative;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

.brand-dots::before,
.brand-dots::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.brand-dots::before {
  top: 3px;
  left: 2px;
  background: var(--brand-red);
}

.brand-dots::after {
  top: 6px;
  left: 6px;
  background: var(--brand-blue);
}

.company-section {
  padding-block: clamp(100px, 20vw, 290px);
}

.company-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, calc(718 * var(--u)));
  gap: calc(141 * var(--u));
  align-items: start;
}

.company-intro p {
  margin: calc(40 * var(--u)) 0 0;
  font-size: calc(20 * var(--u));
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.company-links {
  display: grid;
  gap: calc(4 * var(--u));
}

.company-card {
  display: grid;
  grid-template-columns: calc(216 * var(--u)) minmax(0, 1fr) calc(32 * var(--u));
  align-items: center;
  min-height: calc(96 * var(--u));
  padding: calc(35 * var(--u)) calc(40 * var(--u)) calc(31 * var(--u));
  border-radius: var(--radius-panel);
  color: var(--ink);
  background: var(--surface);
  text-decoration: none;
  transition: background-color var(--duration-ui) var(--ease-out-expo);
}

.card-title {
  font-family: var(--font-en);
  font-size: calc(30 * var(--u));
  font-weight: 600;
  line-height: 1;
}

.card-label {
  color: var(--secondary-text);
  font-size: calc(16 * var(--u));
  line-height: 1.5;
}

.card-arrow {
  display: grid;
  place-items: center;
  width: calc(32 * var(--u));
  height: calc(16 * var(--u));
  border: 1px solid #cccccc;
  border-radius: 2px;
  color: var(--brand-red);
  background: var(--paper);
  font-family: var(--font-en);
  font-size: 12px;
  line-height: 1;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border-radius: var(--radius-panel);
}

.service-card {
  min-width: 0;
  min-height: calc(600 * var(--u));
  padding: calc(81 * var(--u)) calc(38 * var(--u));
  color: inherit;
  text-decoration: none;
  /* Add supplied service artwork separately */
}

.site-footer {
  padding-block: calc(148 * var(--u)) calc(56 * var(--u));
  color: var(--paper);
  background: var(--footer);
}

.footer-main {
  display: grid;
  grid-template-columns: 2.8fr 1fr 1fr 1.7fr 1.2fr;
  gap: 32px;
}

.footer-main a {
  color: inherit;
  text-decoration: none;
}

.footer-group ul {
  margin: 14px 0 0;
  padding-left: 15px;
  border-left: 1px solid rgb(255 255 255 / 15%);
  list-style: none;
}

.footer-group li + li {
  margin-top: 14px;
}

.footer-address {
  color: var(--muted);
  font-size: 14px;
  font-style: normal;
  line-height: 1.8;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 40px;
  padding-top: 44px;
  border-top: 1px solid rgb(255 255 255 / 15%);
}

.footer-partners {
  display: flex;
  align-items: center;
  gap: 32px;
}

.footer-copyright {
  font-family: var(--font-en);
  font-size: 12px;
}

/* Recommended feedback endpoint */
@media (hover: hover) {
  .company-card:hover {
    background: var(--surface-hover);
  }
}

:where(a, button):focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 4px;
}

:where(.hero, .site-footer) :where(a, button):focus-visible {
  outline-color: var(--paper);
}

/* Recommended breakpoint; the original threshold is unknown */
@media (max-width: 1100px) {
  :root {
    --u: 1px;
    --header-height: 65px;
    --radius-panel: 4px;
  }

  .header-inner {
    gap: 12px;
    padding-inline: 20px;
  }

  .site-logo {
    width: min(230px, calc(100vw - 160px));
  }

  .desktop-nav,
  .header-actions .recruit-link {
    display: none;
  }

  .header-actions {
    gap: 12px;
  }

  .youtube-link {
    width: 35px;
  }

  .menu-toggle {
    display: grid;
    place-items: center;
    width: 50px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .menu-glyph {
    display: grid;
    place-content: center;
    gap: 3px;
    width: 50px;
    height: 25px;
    border: 1px solid #cccccc;
    border-radius: 2px;
  }

  .menu-glyph::before,
  .menu-glyph::after {
    content: '';
    width: 26px;
    height: 1px;
    background: var(--brand-red);
  }

  .hero {
    min-height: 720px;
  }

  .hero-media {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 295px;
  }

  .hero-media::after {
    background: linear-gradient(
      to top,
      rgb(4 31 47 / 90%),
      rgb(4 31 47 / 72%) 295px,
      transparent 295px
    );
  }

  .hero-copy {
    left: 20px;
    bottom: 99px;
  }

  .hero-title {
    margin-bottom: 14px;
    font-size: clamp(25px, 7.7vw, 32px);
    line-height: 1.6;
  }

  .hero-subtitle {
    gap: 9px;
    font-size: 15px;
  }

  .hero-subtitle::before,
  .hero-subtitle::after {
    width: 15px;
  }

  .hero-controls {
    left: 27px;
    bottom: 19px;
    width: 253px;
    gap: 16px;
  }

  .section-name {
    font-size: 48px;
  }

  .section-label {
    font-size: 20px;
  }

  .company-section {
    padding-block: 100px 86px;
  }

  .company-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 49px;
  }

  .company-intro p {
    margin-top: 24px;
    font-size: 17px;
    line-height: 1.8;
  }

  .company-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .company-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'title title' 'label arrow';
    align-content: start;
    gap: 28px 0;
    min-height: 135px;
    padding: 28px 14px 14px;
  }

  .card-title {
    grid-area: title;
    font-size: 22px;
  }

  .card-label {
    grid-area: label;
    font-size: 14px;
    overflow-wrap: anywhere;
  }

  .card-arrow {
    grid-area: arrow;
  }

  .service-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-card {
    min-height: 240px;
    padding: 38px 26px;
  }

  .site-footer {
    padding-block: 88px 34px;
  }

  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 20px;
  }

  .footer-brand,
  .footer-home,
  .footer-utilities,
  .footer-address {
    grid-column: 1 / -1;
  }

  .footer-brand {
    justify-self: center;
  }

  .footer-utilities {
    display: grid;
    gap: 34px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding-top: 0;
    border-top: 0;
  }

  .footer-partners {
    order: -1;
    gap: 14px;
  }

  .footer-partners > a:first-child {
    width: 160px;
  }

  .footer-partners > a:last-child {
    width: 148px;
  }

  .footer-copyright {
    margin: 0;
    padding-top: 20px;
    border-top: 1px solid rgb(255 255 255 / 15%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .company-card {
    transition: none;
  }
  /* Also disable carousel autoplay in its controlling script */
}
```

A Company link can use the following semantic structure. The two-column mobile label arrangement is an adaptation; only the mobile outer tile geometry was measured.

```html
<a class='company-card' href='/greeting/'>
  <span class='card-title' lang='en'>Greeting</span>
  <span class='card-label' lang='ja'>ご挨拶</span>
  <span class='card-arrow' aria-hidden='true'>→</span>
</a>
```

For the footer adaptation, keep address content in its own grid item after the utility group in mobile reading order. Desktop placement can be refined with named grid areas to align the address beneath the identity graphic. Do not use CSS ordering to create a keyboard sequence that conflicts with the visual hierarchy.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. These are implementation mappings; the original site's framework was not identified. Define the custom properties above first.

```css
@theme inline {
  --color-brand-blue: var(--brand-blue);
  --color-brand-red: var(--brand-red);
  --color-paper: var(--paper);
  --color-ink: var(--ink);
  --color-company-surface: var(--surface);
  --color-secondary: var(--secondary-text);
  --color-footer: var(--footer);

  --font-sans: var(--font-ja);
  --font-display: var(--font-en);

  --radius-panel: calc(4 * var(--u));
  --spacing-unit: var(--u);
  --spacing-content: calc(1176 * var(--u));
  --spacing-header: var(--header-height);
  --text-section-display: calc(72 * var(--u));
  --text-company-link: calc(30 * var(--u));
  --ease-corporate: var(--ease-out-expo);
}
```

Responsive component rules remain necessary. Token mapping alone does not create the measured service stack, Company grid, or mobile header.

## Sources & Evidence

- **Inspected original and final page:** [https://www.wj-etec.co.jp/](https://www.wj-etec.co.jp/). The supplied response status is HTTP 200, and the original and final URLs are identical.
- **Capture time:** September 12, 2026, 19:30:40.434 UTC, equivalent to September 13, 2026, 04:30:40.434 JST.
- **Desktop evidence:** three current-page images at 1440 × 1000, plus rendered text, links, custom properties, computed styles, and element rectangles. Captures cover the hero, Company section, and lower recruitment/footer area.
- **Mobile evidence:** two current-page images at 390 × 844, plus equivalent DOM and style evidence. Captures cover the hero and lower footer; service and Company reflow are additionally supported by element rectangles.
- **Identity evidence:** the original page title, visible header/footer wordmarks, company description, and a rendered corporate-name announcement identify JR西日本電気テック株式会社. No production-credit claims are established by the supplied original-page evidence.
- **Observed interaction evidence:** visible navigation and carousel controls, header persistence across scroll captures, and specific computed color/background/opacity transitions. No control activation sequence was supplied.
- **Inspection limitations:** no linked destination was opened; no expanded menu, hover endpoint, keyboard sequence, carousel timing, reduced-motion state, or scroll choreography was verified. Image paths, native dimensions, full stylesheets, exact media queries, and inner display-heading styles were not supplied.

This reference describes the current homepage supported by those captures. Measured tokens are identified explicitly; screenshot approximations and the reusable implementation remain labeled as such.