# ASAHI — Style Reference

> Industrial cleaning expressed through translucent bubbles, pale blue space, and photographs of real work.

**Website:** [www.asahiyushi.com](https://www.asahiyushi.com/)
**Original URL:** https://www.asahiyushi.com/
**Final URL:** https://www.asahiyushi.com/
**Theme:** light, with a powder-blue canvas, a stronger blue Company/Business scene, and a white footer.
**Inspected:** September 13, 2026, at 01:48 JST. The supplied retrieval timestamp is September 12, 2026, at 16:48:01.874 UTC.
**Viewports:** desktop 1440 × 1000 and mobile 390 × 844 CSS pixels.
**Scope:** the current corporate homepage. Visual evidence covers the desktop and mobile opening, one desktop Company/Business scene, and desktop/mobile contact and footer views. Rendered DOM measurements additionally cover Products, OEM/ODM, News, recruitment, and group-company links. Destination pages and contact-form behavior were not inspected.

ASAHI presents its cleaning-agent manufacturing business through a deliberately airy visual system. The background is almost white, with a cool blue cast. Blue text and aqua accents establish the cleaning theme, while the red ASAHI wordmark provides a small, unmistakable identity anchor. Large transparent bubbles contain photographs of practical applications: a car being cleaned on desktop and metal components in the mobile opening capture.

The homepage is a long corporate introduction with several destinations: product categories, contract manufacturing, company information, business activities, news, recruitment, and contact. Its defining relationship is between open space and concentrated imagery. Large organic forms carry the atmosphere; small pills, circular arrows, fine rules, and restrained text organize navigation. Mobile preserves that identity through deliberate rearrangement and larger reading text in selected components.

## How to Read This Reference

- **Measured** values come from the supplied rendered DOM, computed styles, and custom properties. Measurements are CSS pixels; tables round long fractions where appropriate.
- **Visual estimates** describe geometry, colors, or effects visible in the original-page captures when the relevant computed property was not supplied. Estimated colors are not pixel samples.
- **Calculated** values are arithmetic derived from measured bounds, such as container proportions.
- **Recommendations** describe a reusable implementation. Breakpoints, accessibility additions, fallback behavior, and illustrative CSS are not claims about the original implementation.
- **Visibility matters:** extracted DOM includes offscreen slider items and mobile navigation links that are absent from the closed-menu screenshot. A nonzero rectangle does not establish that an element was visible.
- **Typography measurements are element-specific:** the font size of an outer heading does not necessarily describe its large English child. Similarly, a transparent anchor background does not rule out a visible gradient on a nested element or pseudo-element.

## Tokens — Colors

### Default Palette

| Name | Value | Source or implementation token | Role and evidence |
| --- | --- | --- | --- |
| Mist | `#eff3fa` | Source `--color-main-thin` | Measured body background; also used for reversed text and badge lettering |
| Service Blue | `#6b9cde` | Source `--color-main` | Measured navigation, hero copy, active application label, dates, badges, and footer links |
| Pale Line | `#cfd9e8` | Source `--color-main-line` | Measured inactive hero labels; the fine divider palette |
| Charcoal | `#25262e` | Source `--color-black` | Measured main body text and news headlines |
| White | `#ffffff` | Implementation alias `--color-white` | Measured footer, mobile menu button, and circular news buttons; visually the desktop navigation capsule |
| Brand Red | `#e8301e` | Source `--color-red` | Declared accent consistent with the red identity treatment; the logo asset's actual fill was not extracted |
| Secondary Gray | `#7c7c7c` | Source `--color-main-font` | Declared source token; its use on a specific visible component was not established |
| Button Blue | Approximately `#69afe0` | Recommended approximation `--cta-blue` | Visually estimated left side of the action gradient |
| Button Aqua | Approximately `#66ccdd` | Recommended approximation `--cta-aqua` | Visually estimated right side of the action gradient and active-dot family |

The prominent blue-to-aqua gradient belongs to actions and selected decorative accents. It is not a general background for every content block. The stronger blue Company/Business background is a separate scene treatment, visually fading toward a much lighter blue near the bottom.

The supplied custom-property collection also contains many generic editor presets. Their presence does not establish that their purple, orange, green, or shadow values are used by this homepage. Exclude them from the site's core palette.

### Section Palettes

| Area | Appearance | Evidence status |
| --- | --- | --- |
| Opening and surrounding content | Mist canvas, blue labels, charcoal reading text, transparent bubbles | Screenshot and computed-style evidence |
| Company/Business scene | Medium blue fading into pale blue; light text; aqua actions; thin white arc | Screenshot evidence; gradient stops and layering were not supplied |
| Contact panel | Blue photographic bubble treatment fading toward a very pale right edge | Screenshot evidence; exact background implementation unknown |
| Footer | White field, blue navigation and rule, red wordmark | Screenshot evidence and measured white background |

No user-selectable theme control was observed. These are section treatments within one light design.

## Tokens — Typography

### Japanese and General Interface Text

- **Source family:** `"Zen Kaku Gothic New", serif`, declared through `--font-gothic` and measured on the body.
- **Main weight:** `500`.
- **Additional measured weights:** `400` for introductory statements, category badges, and the mobile OEM/ODM paragraph.
- **Default tracking:** approximately `0.05em` on the body.
- **Character:** open, even, and lightly tracked. The Japanese headline has enough space between characters and lines to feel calm without becoming a heavy display treatment.

The desktop English navigation links also compute to this Japanese-family stack. Do not automatically assign the English display family to every Latin label.

### English Display and Supporting Copy

- **Source family:** `"Plus Jakarta Sans", serif`, declared through `--font-en`.
- **Directly measured uses:** hero application labels and the English supporting tagline.
- **Weights:** `700` for application labels; `500` for the tagline.
- **Large section lettering:** visually a light geometric sans-serif treatment. Its individual child font declarations were not included, so the CSS below uses the source English family as a recommended match.

Both source stacks explicitly end in `serif`. That is the observed fallback, even though the intended loaded faces are sans-serif. Font loading results were not independently inspected.

### Identity and Decorative Lettering

The ASAHI wordmark occupies an empty-text heading wrapper in the DOM and appears as a graphic in the screenshots. Its wrapper's font size is not a specification for recreating the logo as live text. Use an authorized identity asset.

A very large, low-contrast English phrase sits behind the main hero composition. The smaller English tagline beneath the Japanese headline remains readable and serves a different role. Treat the oversized repetition as decoration rather than the sole delivery of the message.

### Type Scale

| Role | Desktop size / line height | Mobile size / line height | Weight and tracking | Status |
| --- | --- | --- | --- | --- |
| Body and general navigation | `14.4 / 20.16px` | `14.56 / 20.38px` | `500`; about `0.05em` | Measured |
| Japanese hero headline | `41.4 / 68.4px` | `33.28 / 54.98px` | `500`; `0.07em` | Measured |
| English supporting tagline | `14.4 / 37.8px` | `14.56 / 38.22px` | `500`; `0.1em` | Measured |
| Active English application label | `23.4 / 32.76px` | `18.72 / 26.21px` | `700`; inherited tracking near `0.72px` | Measured |
| Inactive English application label | `16.2 / 22.68px` | `18.72 / 26.21px` | `700` | Measured; mobile labels share bounds |
| Japanese application label | `12.6 / 17.64px` | `13.52 / 18.93px` | `500`; `0.05em` | Measured |
| Outer section-heading element | `21.6 / 30.24px` | `21.84 / 30.58px` | `500` | Measured parent, not large English child |
| Large English section lettering | Approximately `90–96px` | Approximately `58–62px` | Visually regular/light | Visual estimate |
| Decorative hero English | Approximately `90–100px` | Approximately `44–52px` | Pale and visually light | Visual estimate |
| Section introductory statement | `27 / 46.8px` | `22.88 / 39.66px` | `400`; `0.05em` | Measured |
| Product-category link | `21.6 / 30.24px` | `20.8 / 29.12px` | `500`; `0.05em` | Measured |
| Product-category description | `14.4 / 25.2px` | `14.56 / 25.48px` | `500`; about `0.05em` | Measured |
| Company/Business paragraph | `14.4 / 25.2px` | `16.64 / 29.12px` | `500` | Measured |
| News date | `10.8 / 15.12px` | `14.56 / 20.38px` | `500` | Measured |
| News category badge | `12.6 / 12.6px` | `14.56 / 14.56px` | `400`; no tracking | Measured |
| News headline | `14.4 / 20.16px` | `16.64 / 23.30px` | `500`; inherited tracking | Measured |
| Copyright | `10.8 / 15.12px` | `10.4 / 14.56px` | `500`; roughly `0.72px` tracking | Measured |

The mobile hierarchy is selective: the main hero headline becomes smaller, while news dates, badges, headlines, and Company/Business reading text become larger. Uniformly scaling the desktop page down would miss this behavior.

## Tokens — Spacing & Shapes

**Density:** sparse composition with compact navigation and generous separation between major subjects.

**Root size:** the HTML element measures `16px` at both viewports. Fractional component values do not establish a special root-unit system. No source breakpoint formula was supplied.

### Spacing Scale

These are recurring measured distances, not a recovered universal spacing scale.

| Use | Desktop | Mobile |
| --- | --- | --- |
| Main content side inset | `162px` | About `20.8px` |
| Header logo left inset | `90px` | `24.375px` |
| Section-heading child gap | `32.4px` | `18.72px` |
| Product title-to-description separation | About `14.4px` | About `16.64px` |
| News metadata column gap | `30.6px` | `0px`; metadata receives separate columns |
| News metadata-to-headline row gap | Single row | `15.6px` |
| Standard action internal gap | `36px` | `41.6px` |
| Contact text-to-action gap | Distributed horizontal space | `24.96px` |
| News section vertical padding | `180px` | `104px` |
| Promotional-card gap | `31.5px` horizontal | About `33.27px` vertical |

### Border Radius

| Element | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Standard action pill | `100px` | `100px` | Measured |
| News category badge | `100px` | `100px` | Measured |
| Circular news buttons | `50%` | `50%` | Measured |
| Mobile menu button | — | `700px` on a square box | Measured; renders as a circle |
| Contact and promotional panels | `14.4px` | `16.64px` | Measured |
| Desktop navigation capsule | Fully rounded | Replaced by menu button | Visual evidence |
| Opening news surface | Approximately `11–12px` | Approximately `11–12px` | Visual estimate; anchor itself measures zero radius |
| Hero bubble | Irregular organic outline | Irregular organic outline | Visual evidence; mask geometry unavailable |

### Layout Measurements

| Element | At 1440 × 1000 | At 390 × 844 | Interpretation |
| --- | --- | --- | --- |
| Document height | `8882.95px` | `8303.14px` | Measured capture-state height, not a recommended fixed height |
| Main content width | `1116px` | `348.39px` | Calculated as `77.5%` and approximately `89.33%` of viewport width |
| Header top | `51.30px` | `14.55px` | Header remains at the top in supplied scrolled views |
| Header logo wrapper | `135.89 × 32.39px` | `105.03 × 25.03px` | Measured wrapper, not logo font metrics |
| Desktop navigation capsule | Approximately `616 × 51px` | — | Visual estimate |
| Header Contact action | `90 × 36px` | No exposed capsule | Measured desktop link |
| Mobile menu button | — | `49.91 × 49.91px` | Measured |
| Main hero bubble | Approximately `660 × 625px` | Approximately `325 × 315px` | Visual estimate |
| Japanese hero headline top | `486.86px` | `430.53px` | Measured at the opening position |
| Opening news surface | About `1116 × 57.94px` | About `348.39 × 120px` | Surface width combines screenshot and slider geometry |
| Visible news-link width | `1007.98px` | `283.91px` | Remaining width accommodates arrows |
| News arrow button | `23.39px` square | `20.80px` square | Measured visual control size |
| Products section top | `1093.47px` | `884.08px` | Measured document coordinate |
| Company/Business shared scene | `1080 × 1000px` | `348.39 × 844px` | Both sections report the same scene bounds |
| Promotional navigation card | `542.25 × 414.34px` | `348.39 × 187.75px` | Changes from two desktop columns to stacked, shallower mobile panels |
| Contact panel | `1116 × 374.39px` | `348.39 × 312px` | Measured |
| Contact action | `185.22 × 47.16px` | `200.83 × 55.72px` | Mobile action becomes larger |
| Footer height | `456.02px` | `400.58px` | Measured |

## Components

### Persistent Identity and Navigation

The desktop header places the red wordmark at the upper left and a separate white navigation capsule toward the upper right. The capsule contains Top, Products, Company, Business, News, Recruit, and a filled Contact action. Small blue link text, generous horizontal gaps, and the absence of a full-width header background preserve the open canvas.

The header appears in the same upper-screen region in the opening, middle, and footer screenshots. This supports persistent visual behavior; the actual `position` property was not included in the evidence.

On mobile, the full capsule is replaced by a white circular button with three fine blue lines and a small shadow. The logo is approximately 105px wide. The supplied DOM contains six bilingual destination entries arranged vertically, but the screenshots show the closed menu. Opening geometry, backdrop, focus handling, and closing behavior remain unverified.

### Application Hero

The hero has five distinct layers:

1. A full-width Mist background.
2. Small peripheral bubbles, some crisp and some blurred or cropped at the viewport edge.
3. Oversized, low-contrast English decorative lettering.
4. A large irregular bubble containing a work photograph.
5. Readable Japanese copy, an English tagline, application labels, and the news surface.

On desktop, the central bubble begins around x=435, y=122 and dominates the upper middle of the screen. The photograph shows a gloved hand wiping a dark car. A feathered white perimeter and a blue refractive rim soften the image into the background. The subject remains recognizable at its center.

The Japanese message, `ほしいをつくる / キレイを叶える`, sits to the lower left of the bubble. Its wide line spacing is a defining feature. The supporting line, `Create what you want, Achieve clean.`, is charcoal with the final word highlighted in blue.

On mobile, the bubble moves above the copy and becomes almost the width of the content area. The captured photograph shows metal parts. The application label sits near the bubble's lower-right edge; the headline and tagline then occupy the full content width. These are different captured application states, not evidence that desktop must always show industry and mobile must always show metal.

### Application-State Labels

The desktop presents three English labels: For industry, For medical, and For metal. The active label is larger and blue, with an aqua dot and a visible Japanese subtitle. The inactive English labels are smaller and pale.

All three mobile states share the same measured coordinates. Only the active metal label is visible in the supplied screenshot. This supports a shared display slot on mobile rather than three stacked visible labels.

The measured English labels are paragraph elements. Do not assume they are clickable tabs. State changes, automatic cycling, click targets, and timing were not exercised.

### Opening News Ticker

A white rounded strip sits beneath the hero copy. Its anatomy is a clipped slide region plus a separate arrow area. Each item is a link containing a date, category badge, and headline.

Desktop uses a single horizontal row. The first link has `18.9px` vertical padding, `28.8px` left padding, and `30.6px` column gaps. The category occupies a larger layout column than its visible 63px badge, keeping headlines aligned.

Mobile places the date and badge on the first row and the larger headline below. The first item measures 120px high, with `18.72px` top and left padding and a `15.6px` row gap. The visible headline wraps across two lines and is underlined in the capture. The two small circular arrow buttons remain at the right.

The DOM contains three horizontally offset items, including items outside the viewport. This establishes a slider-like structure. It does not establish autoplay, wraparound, swipe behavior, or the result of activating either arrow.

### Section Heading Pair

Major sections pair a large English title with a smaller Japanese label preceded by a hollow circular mark. Contact provides the clearest captured example: large pale lettering above `お問い合わせ`, with an outlined dot at the left of the subtitle.

Use the pair as one semantic heading with separately styled spans. Retain the English title's light visual weight and the Japanese label's generous spacing. Avoid deriving the large title size from the outer H2's approximately 22px computed size.

### Products Overview

The rendered page identifies three product categories: `金属表面処理剤`, `業務用洗浄剤`, and `医療・介護福祉関連製品`. Each category combines a blue linked title with a short charcoal explanation.

Desktop text blocks measure 378px wide and share the main left alignment at x=162. The mobile blocks expand to the 348.39px content width and occur much farther apart vertically. The Products section grows from approximately 903px tall on desktop to 1710px on mobile.

The category links point to anchors on the product page. The supplied selected screenshots do not show the full product compositions, so their illustration subjects, complete media placement, and any category-specific interaction cannot be specified reliably. Preserve the measured title/description relationship; do not fill the unobserved area with invented product cards.

### OEM/ODM Introduction

This section explains contract manufacturing and links to the corresponding product-page anchor. It contains an English/Japanese heading pair, a larger introductory sentence, a supporting paragraph, and a rounded action.

On desktop, the action is centered at approximately x=602 and measures `235.75 × 47.16px`. On mobile, the content follows the normal 20.8px side inset and the action remains centered at `251.91 × 55.72px`.

Mobile deliberately wraps the introductory sentence over two lines and increases the supporting paragraph to approximately `16.64 / 29.12px`. The supplied DOM supports that content hierarchy; it does not establish the surrounding imagery.

### Company/Business Scene

The desktop capture shows a blue gradient environment, large light English headings on the left, explanatory text and an aqua action below, and large rounded photographs on the right. A laboratory worker fills the primary portrait image. A rotated building photograph enters from the upper edge. A fine white arc crosses the lower-right background.

Company and Business report identical scene bounds in both DOM snapshots. The desktop capture also shows their headings and some copy superimposed. Record this as the captured layered state. It may relate to a transition, but neither its cause nor the intended settled appearance was established.

The scene starts at document y≈3365.59 on desktop and y≈3469.33 on mobile. News begins approximately 3000px and 2844px later respectively. This suggests a staged scroll region, but does not reveal its pinning mechanism, timeline, or transition distances.

For reuse, keep one clearly readable active text panel, a prominent work photograph, and restrained curved linework. Do not implement permanently doubled headings merely because they coincide in one capture. Mobile DOM places the text group in the lower portion of an 844px-high shared scene; no mobile screenshot of that scene was supplied.

### News Index

The later News section is a separate list, not just a repeat of the opening strip. Desktop uses a heading area at the left and an approximately 804.63px-wide list at the right. Each row aligns date, badge, and headline on one line, with fine separation and generous vertical rhythm.

Six article links are present in the desktop list; three are present in the mobile list. This is an observed difference at these viewports, not proof of a universal content limit or loading rule.

Mobile stacks the heading above the list. Each row places date and badge above its headline. The list action aligns toward the right and combines text with a circular arrow treatment.

### Recruitment and Group-Company Navigation

Two large linked panels follow News. Desktop places them side by side, each approximately `542 × 414px`, with a 31.5px gap. Mobile stacks them at approximately `348 × 188px`, separated by about 33px.

Their labels combine English with Japanese, and the group-company English label wraps to two lines on mobile. These are broad navigation surfaces with rounded corners. Their full photographs were not included in the selected captures; do not assign specific subjects to both cards from the DOM alone.

### Gradient Action Pill

The standard action combines a short Japanese label with a trailing directional mark. Desktop uses approximately `13.5px` vertical padding, `25.2px` left padding, `22.5px` right padding, and a `36px` internal gap. Mobile increases these to approximately `17.68px`, `29.12px`, `26px`, and `41.6px` respectively.

The screenshots show light lettering over a blue-to-aqua fill. Desktop trailing marks appear as small white dots in the supplied scene/contact views; the mobile Contact button shows a right arrow. No hover sequence establishes whether those marks transform into each other.

The Contact action also has a soft aqua glow in the screenshot. Keep that glow local to the action, not as an elevation style for all components.

### Contact Panel

A broad rounded panel bridges the pale page and white footer. Its desktop layout places the heading at the left and action at the right. Internal horizontal padding measures `94.5px` left and `108px` right.

The artwork contains a large soap bubble with a subtle colored rim, smaller transparent forms, and a blue-to-pale photographic field. The panel is approximately three times as wide as it is tall on desktop.

Mobile turns it into a taller composition: `348.39 × 312px`, with roughly 26–29px horizontal padding. The heading and action stack vertically with a 24.96px gap. The artwork is reframed, showing a cropped bubble near the upper right and a blurred colored rim lower down.

Behind the panel, a broad curved boundary changes the page background to white. This is a section transition, not the panel's border shape.

### Footer

The desktop footer is spacious and white. A larger red wordmark sits on the left; seven Japanese links form two columns on the right. A thin blue-gray horizontal rule separates the navigation area from the copyright and Instagram link.

Mobile places a smaller wordmark above the two-column navigation. The Instagram icon moves below the rule at the left, with the copyright beneath it. Its visual ordering therefore changes rather than merely wrapping the desktop bottom row.

The desktop footer logo wrapper is wider than the header logo wrapper. On mobile the visible footer logo is approximately 96px wide, slightly smaller than the approximately 105px header logo. The displayed copyright year is 2024; it does not date the inspection or establish a redesign year.

## Tokens — Motion & Interaction

| Treatment | Supplied value or observation | What can be concluded |
| --- | --- | --- |
| Desktop header entrance | `opacity 1s 3s, translate 0.6s 3s` | A delayed entrance transition is declared; starting opacity and translation distance were not supplied |
| Ordinary links and circular buttons | `opacity 0.3s` | Opacity feedback is defined; target opacity and trigger were not captured |
| Gradient actions | `background-position 1s cubic-bezier(0.165, 0.84, 0.44, 1)` | Background-position transitions are defined; hover gradient positions remain unknown |
| Japanese application subtitles | `opacity 0.6s` | Subtitle fading is supported by computed styles |
| Mobile Products, OEM/ODM, and News | `1s forwards fadeInUp` | A named one-second animation is declared; keyframe positions and activation logic were not supplied |
| Hero application imagery | Industry on desktop; metal on mobile | Multiple captured states exist; cycle order, interval, and input behavior are unverified |
| Opening news | Three offset links and two arrow buttons | Slider structure is evidenced; activation and autoplay are unverified |
| Company/Business | Shared bounds, long scroll region, overlapping captured content | A layered/staged composition is evidenced; its implementation and settled states are unverified |
| Decorative bubbles | Various sizes, focus levels, and positions in still captures | Floating motion is plausible but cannot be measured from these stills |

The source declares three easing variables:

```css
--ease-outquad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-outquart: cubic-bezier(0.165, 0.84, 0.44, 1);
--ease-outquint: cubic-bezier(0.23, 1, 0.32, 1);
```

Only the quartic curve is directly associated with the sampled action transition. Do not assign the other curves to particular components without further evidence.

The capture process waited for selected finite animations and layout stability, temporarily pausing perpetual animations during readiness checks. That process does not reveal full animation timelines. Many sampled elements report `animation: none`, and `transition: all` without a duration is not proof of visible motion. No click, hover, menu-opening, or form-submission results were supplied.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Main canvas | Solid Mist | Creates continuity between widely spaced content areas |
| Hero artwork | Transparent organic rim, feathered photo, soft highlights | Connects the cleaning subject to the visual identity |
| Navigation | Opaque white capsule or circle | Keeps persistent controls legible over varied backgrounds |
| Opening news | White rounded strip | Gives current information a clear reading surface |
| Scene environment | Full-width blue gradient with light text | Creates a stronger visual chapter for company and business content |
| Promotional navigation | Rounded large panels | Provides broad destination targets |
| Contact | Rounded bubble artwork with a glowing action | Closes the narrative with a clear inquiry route |
| Footer | White with a fine divider | Returns to a quiet, practical navigation area |

There is no evidence of a general glass-blurred card system. Transparency belongs primarily to bubble artwork. Shadows are localized to small floating controls and the contact action rather than used to separate every section.

## Imagery

The imagery combines industrial specificity with a soft cleaning metaphor. Preserve the recognizable work: the cloth on the car, the hollow metal cylinder, the laboratory worker, and the building. The organic frame supplies softness; the photograph supplies credibility.

The hero bubble is more complex than a circular crop. Its contour is asymmetrical, its rim catches blue highlights, and the photograph fades toward white near the edge. A uniformly blurred photo would lose the material detail visible at the center. A hard circular mask would lose the liquid character.

Small bubbles vary in scale and sharpness. Some sit partly outside the frame, creating depth without adding interface density. The Contact artwork introduces faint iridescent pink and violet along a soap-bubble rim; those colors are photographic details, not additional UI accent tokens.

The scene photography uses rounded rectangular crops and visible rotation on the building image. Its fine white arc is decorative linework, not a container border.

### Observed Asset References

No original image `src`, background-image URL, mask path, or font-file URL was included in the supplied evidence. This inventory identifies visible requirements without inventing downloadable asset paths.

| Asset requirement | Where observed | Reuse guidance |
| --- | --- | --- |
| Red ASAHI wordmark | Desktop/mobile header and footer | Use an authorized logo asset; do not approximate it through the H1 font settings |
| Car-cleaning photograph within a bubble | Desktop opening | Preserve the hand, cloth, car surface, and feathered perimeter |
| Metal-component photograph within a bubble | Mobile opening | Retain the recognizable cylinder and metallic material detail |
| Peripheral translucent bubbles | Opening and Contact captures | Use varied focus and edge cropping; keep them noninteractive |
| Laboratory-worker portrait | Desktop Company/Business scene | Use a tall crop with the worker as the clear focal subject |
| Building photograph | Upper portion of desktop scene | Preserve its visibly rotated panel treatment |
| Iridescent soap-bubble artwork | Desktop/mobile Contact panel | Reframe for each aspect ratio instead of stretching |
| Hamburger, small arrows, Instagram symbol | Header, news, Contact, footer | Thin, simple symbols; the original icon implementation was not supplied |

Use original artwork only when authorized and available. CSS can approximate the framing, but it cannot recreate the photographic refraction and highlights exactly.

## Layout & Responsive Behavior

The desktop main container is 1116px wide with 162px side margins. The mobile container is approximately 348.39px wide with 20.8px margins. These correspond to 77.5% and 89.33% of the observed viewport widths. They are measured relationships, not proof of the underlying CSS formulas or maximum width.

The header uses a different alignment: the logo begins at 6.25% of the viewport in both captures. Keep header and content gutters distinct rather than aligning everything to one global inset.

| Area | Desktop | Mobile |
| --- | --- | --- |
| Navigation | Horizontal white capsule | Circular menu control; open state unverified |
| Hero | Large central/right image with copy at lower left | Image above full-width copy |
| Application labels | Three visible English labels with an emphasized active state | One visible state in a shared location |
| Opening news | Date, badge, and headline on one row | Metadata above a larger wrapped headline |
| Products | Narrow left-aligned description blocks | Full-width text blocks with much larger vertical separation |
| OEM/ODM | Broad composition with centered action | Constrained text, deliberate line breaks, centered larger action |
| Company/Business | 1000px-high shared scene | 844px-high shared scene; full visual arrangement unverified |
| News index | Heading beside a six-item list | Heading above a three-item list in the supplied snapshot |
| Promotional panels | Two columns, relatively tall panels | One column, wide shallow panels |
| Contact | Heading left, action right | Heading above action |
| Footer | Logo left, navigation right; copyright and social link share a row | Logo above navigation; social icon above copyright |

The source breakpoint was not supplied. The Quick Start uses 48rem as an explicit implementation recommendation. Verify intermediate widths, landscape phones, text zoom, and menu behavior separately.

Do not reproduce the document heights or large scene offsets as blank spacer elements. They describe a captured page with staged content. A simpler implementation should keep all information readable in normal flow until a verified scroll sequence is available.

## Do’s and Don’ts

### Do

- Preserve the Mist, Service Blue, white, and restrained red identity relationship.
- Make the bubble photograph the opening's main visual event.
- Keep the Japanese headline airy, with its two-line rhythm and `0.07em` tracking.
- Use the measured Japanese family for body text and the source English family for the measured English display roles.
- Keep navigation surfaces opaque white and fully rounded.
- Give dates, badges, and headlines distinct alignment roles.
- Increase selected reading text and action sizes on mobile.
- Reframe Contact artwork for its taller mobile panel.
- Maintain broad section spacing and the white footer's quiet hierarchy.
- Label estimated artwork effects and unverified motion clearly during implementation.

### Don’t

- Don't convert the corporate homepage into a repeated grid of generic feature cards.
- Don't use red as the default action color; its visible role is identity.
- Don't turn every surface into transparent glass or add heavy shadows throughout.
- Don't replace the irregular bubble with a hard circular crop and assume the result is equivalent.
- Don't blur the entire work photograph or remove its material detail.
- Don't treat every extracted mobile navigation link as visible in the closed-menu state.
- Don't infer large English title sizes from the approximately 22px outer H2 measurements.
- Don't hardcode different product categories by device merely to match two captured states.
- Don't make the Company/Business text permanently overlap.
- Don't invent carousel timing, scroll distances, menu transitions, or destination-page behavior.
- Don't use generic editor presets as evidence of additional brand colors.

## Recommended Implementation Additions

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

- **Contrast:** calculated from the solid source colors, Service Blue on Mist is approximately `2.54:1`, and white on Service Blue is approximately `2.83:1`. Use a darker blue such as `#36639d` for essential small text where necessary. Test gradient buttons and photographic scenes separately.
- **Control size:** retain the approximately 21–23px visible news circles inside targets at least 44px square. Reserve more space for the controls instead of letting invisible hit areas overlap the headline.
- **Menu semantics:** connect the mobile button to a real navigation region using an accessible name, `aria-expanded`, and `aria-controls`. Keep hidden links out of the tab order.
- **Layered content:** only the active scene should expose interactive links. Provide a readable normal-flow fallback for scripts that fail or reduced-motion preferences.
- **Motion:** avoid requiring the desktop header's three-second delay in a reuse. Show essential navigation promptly and reduce decorative movement when requested.
- **Images:** provide informative alternatives for work photographs and empty alternatives for decorative bubbles. Do not duplicate the hero message through decorative text in the accessibility tree.
- **Asset loading:** reserve artwork dimensions, prioritize the first meaningful hero image, and defer lower-page photographs where appropriate. Provide a static frame if an animated asset is used.
- **Resilience:** allow longer news headlines and Japanese copy to wrap. Test at narrow widths and increased text size without forcing the measured capture heights.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas: `#eff3fa`.
- Primary blue: `#6b9cde`.
- Fine rules and inactive labels: `#cfd9e8`.
- Reading text: `#25262e`.
- Navigation and footer surfaces: `#ffffff`.
- Declared brand accent: `#e8301e`; use for the authorized identity treatment.
- Action approximation: blue `#69afe0` to aqua `#66ccdd`.
- Stronger accessible blue recommendation: `#36639d`.

### Overall Prompt

“Create a Japanese cleaning-agent manufacturer's corporate homepage with a pale blue `#eff3fa` canvas, Service Blue `#6b9cde` interface details, charcoal reading text, and a restrained red wordmark. Use Zen Kaku Gothic New for Japanese text and Plus Jakarta Sans for English display roles. Build the opening around a large irregular translucent bubble containing a recognizable work photograph, peripheral bubbles at varied focus, low-contrast decorative English lettering, and an airy two-line Japanese headline. Place desktop navigation in a white capsule and current news in a white rounded strip. Continue through product categories, contract manufacturing, company and business information, news, recruitment, Contact, and a white footer. On mobile, move the hero image above the copy, use a circular menu button, stack news metadata above its headline, and stack the Contact heading above a larger gradient action. Keep unverified animation optional and all content readable without it.”

### Example Component Prompts

1. **Header:** “Place an authorized red identity asset at the upper left. At desktop widths, put seven small links inside a white pill near the upper right, ending with a blue-to-aqua Contact action. On a 390px-wide screen, replace the capsule with a roughly 50px white circular menu button with three thin blue lines.”
2. **Hero artwork:** “Frame a real industrial-cleaning photograph inside an approximately 660px irregular transparent bubble. Preserve sharp detail in the subject, soften the outer photograph toward white, and add a delicate blue refractive rim. Use smaller cropped bubbles around it. Supply a mobile crop near 325px wide.”
3. **News strip:** “Create a white rounded information strip with a blue date, small blue pill badge, charcoal linked headline, and two circular arrow controls. On mobile, put date and badge on the first row and use approximately 16.64px text for the wrapped headline below. Give the small visible arrows larger nonoverlapping hit targets.”
4. **Company/Business scene:** “Use a medium-to-pale blue environment, a readable light English/Japanese heading pair at the left, a short paragraph and aqua action, and rounded work photographs at the right. Add one fine white arc. Show one active text panel at a time; keep scroll choreography optional.”
5. **Contact:** “Create a 1116 × 374px desktop panel with 14px corners, soft blue soap-bubble artwork, a large pale Contact heading on the left, and a gradient action on the right. At 390px viewport width, use a roughly 348 × 312px panel, 17px corners, 26px internal side padding, and a vertically stacked action.”
6. **Footer:** “Use a white footer with a red wordmark, two columns of blue Japanese navigation, a thin pale-blue rule, a small Instagram symbol, and tracked copyright text. On mobile, put the logo above navigation and the social icon above copyright.”

## Quick Start

### CSS Custom Properties

This is a static implementation scaffold, not recovered source CSS. Source colors and measured type values are retained where practical. The 48rem breakpoint, desktop width cap, larger news hit targets, focus treatment, and simplified artwork are recommendations. Section display sizes and gradient endpoints are visual approximations.

Load the named fonts separately from an approved source. Use authorized logo and photographic assets. The CSS bubble below approximates the silhouette and feathering; it does not reproduce the original refractive artwork. No automatic slider or scroll timeline is implied.

```css
:root {
  /* Measured source tokens */
  --color-main: #6b9cde;
  --color-main-thin: #eff3fa;
  --color-main-line: #cfd9e8;
  --color-black: #25262e;
  --color-red: #e8301e;
  --color-white: #ffffff;
  --font-gothic: 'Zen Kaku Gothic New', serif;
  --font-en: 'Plus Jakarta Sans', serif;
  --ease-outquart: cubic-bezier(0.165, 0.84, 0.44, 1);

  /* Estimated artwork colors and recommended focus color */
  --cta-blue: #69afe0;
  --cta-aqua: #66ccdd;
  --color-focus: #36639d;

  /* Desktop reference values; the maximum width is recommended */
  --content-width: min(77.5vw, 1240px);
  --body-size: 14.4px;
  --hero-title-size: 41.4px;
  --hero-title-leading: 68.4px;
  --section-display-size: 90px;
  --panel-radius: 14.4px;
  --pill-radius: 100px;
  --section-space: 180px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-black);
  background: var(--color-main-thin);
  font-family: var(--font-gothic);
  font-size: var(--body-size);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }

.content-width {
  width: var(--content-width);
  margin-inline: auto;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

/* Persistent positioning is a recommended matching strategy. */
.site-header {
  position: fixed;
  z-index: 100;
  top: 51.3px;
  left: 6.25%;
  right: 4.75%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-logo { width: 135.89px; height: auto; }

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 27.2px;
  padding: 7.2px 7.2px 7.2px 48.6px;
  border-radius: 999px;
  background: var(--color-white);
}

.desktop-nav > a {
  color: var(--color-main);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 300ms;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  max-width: 100%;
  padding: 13.5px 22.5px 13.5px 25.2px;
  border: 0;
  border-radius: var(--pill-radius);
  color: var(--color-white);
  background: linear-gradient(90deg, var(--cta-blue), var(--cta-aqua));
  text-decoration: none;
  line-height: 20.16px;
}

.cta > [aria-hidden] { flex: none; }

.desktop-nav > .cta {
  min-width: 90px;
  min-height: 36px;
  margin-left: 18px;
  padding: 7px 17px;
  color: var(--color-white);
}

.menu-toggle {
  display: none;
  width: 49.91px;
  height: 49.91px;
  border: 0;
  border-radius: 50%;
  color: var(--color-main);
  background: var(--color-white);
  box-shadow: 0 3px 4px rgb(37 38 46 / 16%);
}

/* Use an inline icon with an accessible button name. */
.menu-toggle svg { width: 20px; height: 20px; }

.hero {
  position: relative;
  isolation: isolate;
  min-height: 1093.47px;
  padding-top: 486.86px;
  overflow-x: clip;
}

.hero-echo {
  position: absolute;
  z-index: -1;
  top: 300px;
  left: 11.25%;
  margin: 0;
  color: rgb(255 255 255 / 48%);
  font-family: var(--font-en);
  font-size: 96px;
  font-weight: 400;
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
}

/* Approximation only; replace with suitable authorized artwork. */
.hero-orb {
  position: absolute;
  z-index: 0;
  top: 122px;
  left: calc(50% - 284px);
  width: 660px;
  aspect-ratio: 1.05;
  overflow: hidden;
  border: 1px solid rgb(107 156 222 / 40%);
  border-radius: 48% 52% 45% 55% / 47% 51% 49% 53%;
  background: radial-gradient(ellipse, #ffffff 20%, #eff3fa 72%);
  box-shadow:
    inset 5px -8px 12px rgb(107 156 222 / 22%),
    inset -4px 6px 10px rgb(255 255 255 / 90%);
}

.hero-orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mask-image: radial-gradient(ellipse, #000 28%, #000c 48%, transparent 73%);
}

.hero-copy { position: relative; z-index: 1; }

.hero-title {
  margin: 0;
  color: var(--color-main);
  font-size: var(--hero-title-size);
  font-weight: 500;
  line-height: var(--hero-title-leading);
  letter-spacing: 0.07em;
}

.hero-tagline {
  margin: 21.6px 0 0;
  font-family: var(--font-en);
  font-size: var(--body-size);
  line-height: 37.8px;
  letter-spacing: 0.1em;
}

.hero-tagline .accent { color: var(--color-main); }

.hero-categories {
  position: absolute;
  z-index: 2;
  top: 234px;
  right: 11.25%;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-main-line);
}

.hero-categories li { position: relative; margin-bottom: 18px; }
.hero-categories .label {
  font-family: var(--font-en);
  font-size: 16.2px;
  font-weight: 700;
}
.hero-categories small { display: none; font-size: 12.6px; }
.hero-categories .is-active { color: var(--color-main); }
.hero-categories .is-active .label { font-size: 23.4px; }
.hero-categories .is-active small { display: block; }
.hero-categories .is-active::before {
  content: '';
  position: absolute;
  top: 12px;
  left: -21px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--cta-aqua);
}

.news-row {
  display: grid;
  grid-template-columns: max-content 102.6px minmax(0, 1fr);
  align-items: start;
  gap: 0 30.6px;
  min-width: 0;
  text-decoration: none;
}

.news-row p { margin: 0; }
.news-date { color: var(--color-main); font-size: 10.8px; }
.news-badge {
  justify-self: start;
  padding: 2.7px 6.3px;
  border-radius: var(--pill-radius);
  color: var(--color-main-thin);
  background: var(--color-main);
  font-size: 12.6px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
.news-title { min-width: 0; overflow-wrap: anywhere; }

.ticker {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  margin-top: 36.03px;
  overflow: hidden;
  border-radius: 12px;
  background: rgb(255 255 255 / 90%);
}

.ticker .news-row { padding: 18.9px 0 18.9px 28.8px; }
.ticker-controls { display: flex; align-items: center; justify-content: center; }

/* Larger recommended hit targets around small visible circles. */
.circle-control {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  color: var(--color-main);
  background: transparent;
}
.circle-control > span {
  display: grid;
  place-items: center;
  width: 23.39px;
  height: 23.39px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 1px 7px rgb(107 156 222 / 15%);
}

/* Inner heading metrics are visual approximations. */
.section-heading { display: grid; gap: 12px; margin: 0; font-weight: 500; }
.section-title {
  font-family: var(--font-en);
  font-size: var(--section-display-size);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
.section-subtitle { display: flex; align-items: center; gap: 12px; font-size: 21.6px; }
.section-subtitle::before {
  content: '';
  width: 16px;
  height: 16px;
  flex: none;
  border: 3px solid currentColor;
  border-radius: 50%;
  opacity: 0.65;
}

.news-index {
  display: grid;
  grid-template-columns: 244.8px minmax(0, 1fr);
  gap: 66.6px;
  padding-block: var(--section-space);
}
.news-index .news-row {
  margin-bottom: 31.5px;
  padding-bottom: 27px;
  border-bottom: 1px solid var(--color-main-line);
}

.promo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 31.5px; }
.promo-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 542.25 / 414.34;
  border-radius: var(--panel-radius);
}
.promo-card img { width: 100%; height: 100%; object-fit: cover; }

.contact-panel {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 374.39px;
  margin-top: 198px;
  padding: 40px 108px 40px 94.5px;
  overflow: hidden;
  border-radius: var(--panel-radius);
  color: var(--color-main-thin);
  background: linear-gradient(100deg, #b7d9ed, #f3f8fd);
}

/* Place authorized bubble artwork in this decorative image layer. */
.contact-art {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.contact-panel .cta { box-shadow: 0 15px 28px rgb(102 204 221 / 30%); }

.site-footer { padding-top: 117px; background: var(--color-white); }
.footer-main { display: flex; justify-content: space-between; min-height: 244px; gap: 40px; }
.footer-logo { width: 185.39px; height: auto; align-self: flex-start; }
.footer-nav { display: grid; grid-template-columns: repeat(2, max-content); align-content: start; gap: 13.5px 81px; }
.footer-nav a { color: var(--color-main); text-decoration: none; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 18px 48px;
  border-top: 1px solid var(--color-main-line);
  color: var(--color-main);
}
.footer-bottom small { font-size: 10.8px; }
.footer-social { display: inline-flex; width: 27px; }

@media (max-width: 48rem) {
  :root {
    --content-width: 89.333333vw;
    --body-size: 14.56px;
    --hero-title-size: 33.28px;
    --hero-title-leading: 54.98px;
    --section-display-size: 58.5px;
    --panel-radius: 16.64px;
    --section-space: 104px;
  }

  .site-header { top: 14.55px; right: 6.25%; }
  .site-logo { width: 105.03px; }
  .desktop-nav { display: none; }
  .menu-toggle { display: grid; place-items: center; }

  .hero { min-height: 884.08px; padding-top: 430.53px; }
  .hero-orb { top: 68px; left: 8.3%; width: 83.4%; }
  .hero-echo { top: 310px; left: 0; font-size: 48px; }
  .hero-tagline { margin-top: 5.84px; line-height: 38.22px; }
  .hero-categories { top: 384.8px; right: 5.333333%; }
  .hero-categories li:not(.is-active) { display: none; }
  .hero-categories .is-active .label { font-size: 18.72px; }
  .hero-categories small { font-size: 13.52px; }

  .news-row { grid-template-columns: 98.8px minmax(0, 1fr); gap: 15.6px 0; }
  .news-date { font-size: 14.56px; }
  .news-badge { padding: 2.9px 7.28px; font-size: 14.56px; }
  .news-title { grid-column: 1 / -1; font-size: 16.64px; line-height: 23.3px; }

  /* Wider than the original rail to accommodate accessible targets. */
  .ticker { grid-template-columns: minmax(0, 1fr) 88px; margin-top: 15.16px; }
  .ticker .news-row { padding: 18.72px 0 18.72px 18.72px; }
  .circle-control > span { width: 20.8px; height: 20.8px; }

  .cta { gap: 41.6px; padding: 17.68px 26px 17.68px 29.12px; line-height: 20.38px; }
  .section-heading { gap: 8px; }
  .section-subtitle { font-size: 21.84px; }
  .news-index { grid-template-columns: 1fr; gap: 75.9px; }
  .news-index .news-row { margin-bottom: 29.12px; padding-bottom: 24.96px; }

  .promo-grid { grid-template-columns: 1fr; gap: 33.27px; }
  .promo-card { aspect-ratio: 348.39 / 187.75; }

  .contact-panel {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24.96px;
    min-height: 312px;
    margin-top: 104px;
    padding: 40px 29.25px 40px 25.59px;
  }
  .contact-art { object-position: center; }

  .site-footer { padding-top: 74.88px; }
  .footer-main { flex-direction: column; min-height: 0; gap: 37.44px; }
  .footer-logo { width: 95.67px; }
  .footer-nav { grid-template-columns: 121px minmax(0, 1fr); gap: 14.55px 20.6px; }
  .footer-bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 12.5px;
    margin-top: 37.44px;
    padding-block: 16px 28px;
  }
  .footer-bottom small { font-size: 10.4px; }
}

/* Add explicit reduced-motion handling to any later animation code. */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .desktop-nav > a,
  .cta,
  .hero-orb,
  .hero-categories,
  .contact-art {
    animation: none !important;
    transition: none !important;
  }
}
```

The hero expects `.hero-orb`, a decorative `.hero-echo`, `.hero-categories`, and a `.hero-copy.content-width` containing the headline and tagline. Place the `.ticker.content-width` after the copy. Its controls should be real buttons wired to a separately implemented slider; omit them if only one static news item is presented.

A minimal Contact component can use the actual observed destination. Add an authorized decorative image as `.contact-art` with an empty alternative when available:

```html
<section class="contact-panel content-width" aria-labelledby="contact-heading">
  <h2 class="section-heading" id="contact-heading">
    <span class="section-title" lang="en">Contact</span>
    <span class="section-subtitle" lang="ja">お問い合わせ</span>
  </h2>
  <a class="cta" href="https://www.asahiyushi.com/contact/" lang="ja">
    お問い合わせ
    <span aria-hidden="true">→</span>
  </a>
</section>
```

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. The original site's use of Tailwind is not established. Define the custom properties above first.

```css
@theme inline {
  --color-mist: var(--color-main-thin);
  --color-service-blue: var(--color-main);
  --color-pale-line: var(--color-main-line);
  --color-charcoal: var(--color-black);
  --color-brand-red: var(--color-red);
  --color-action-aqua: var(--cta-aqua);

  --font-japanese: var(--font-gothic);
  --font-english: var(--font-en);

  --text-body: var(--body-size);
  --text-hero: var(--hero-title-size);
  --text-section: var(--section-display-size);

  --radius-surface: var(--panel-radius);
  --radius-action: var(--pill-radius);
  --spacing-section: var(--section-space);
}
```

## Sources & Evidence

- **Original and final website:** [https://www.asahiyushi.com/](https://www.asahiyushi.com/). The supplied browser observation reports HTTP 200 and the same original and final URL. The page title identifies 株式会社ASAHI and its cleaning-agent development, manufacturing, and sales activities.
- **Capture timestamp:** `2026-09-12T16:48:01.874Z`, corresponding to September 13, 2026, at 01:48:01.874 JST.
- **Desktop evidence:** 1440 × 1000 CSS pixels; opening capture, Company/Business scene capture, and Contact/footer capture. The measured document height is approximately 8882.95px.
- **Mobile evidence:** 390 × 844 CSS pixels; opening and Contact/footer captures. The measured document height is approximately 8303.14px.
- **Rendered evidence:** supplied page text, anchor destinations, element bounds, computed typography, backgrounds, radii, padding, gaps, transitions, animation declarations, and custom properties. Middle-section anatomy relies partly on this evidence because corresponding complete screenshots were not supplied.
- **Observed navigation scope:** homepage links identify product, company, business, news, recruitment, contact, group-company, and Instagram destinations. Link existence is evidence of homepage navigation only; destination layouts were not inspected.
- **Capture limitations:** the supplied process waited for document loading, selected finite animations, sampled layout/text stability, and visible image decoding within time limits. Perpetual animations were paused during readiness checks and then resumed. SharedWorkers and service workers were disabled. These procedures do not prove semantic completeness or reveal unexercised interactions.
- **Unverified details:** full mobile menu, hover end states, carousel activation, automatic timing, complete Company/Business transitions, exact bubble rendering technology, original asset URLs, intermediate responsive breakpoints, and linked-page behavior.

This reference describes the current homepage through the supplied original-page evidence. Measured tokens, visual estimates, and recommended implementation choices are distinguished throughout.