アクシージア｜白と淡いグレーで整える化粧品企業サイト

# AXXZIA — Style Reference

> A spacious beauty-company directory built from white surfaces, quiet typography, and carefully ranked brand marks.

**Website:** [axxzia.co.jp](https://axxzia.co.jp/)
**Original URL:** https://axxzia.co.jp/
**Final URL:** https://axxzia.co.jp/
**Theme:** light content surfaces, with reversed white branding and navigation over the opening hero.
**Inspected:** September 17, 2026, Japan Standard Time. The supplied record was retrieved at `2026-09-16T20:30:46.102Z`, equivalent to September 17 at 05:30:46.102 JST.
**Viewports:** desktop `1440 × 1000` and mobile `390 × 844` CSS pixels.
**Scope:** the current Japanese corporate homepage. Visual captures cover the opening hero, part of the desktop brand grid and following research image, the desktop footer, and the mobile footer. Rendered DOM measurements additionally cover Topics, News, all brand tiles, Research and Production, Sustainability, IR, the online-store section, and supporting links. Linked destination pages were not inspected.

AXXZIA organizes a substantial corporate site with the visual restraint of a beauty brand. White and very pale gray carry almost all of the interface. Regular-weight Japanese sans-serif text, small English utilities, thin rules, and generous empty space establish the hierarchy. Brand logos supply typographic variety without turning the surrounding interface into a decorative display system.

The homepage progresses from a viewport-filling opening composition into a horizontal Topics rail, an information-heavy News section, a tiered brand directory, broad corporate sections, and an extensive sitemap footer. Its central design move is a change in density: generous space around identity and section introductions, followed by compact, orderly navigation.

Both current opening captures show a uniform gray hero background. The supplied evidence does not establish whether this is an intended surface, a media fallback, a loading condition, or a capture limitation. The visible logo, navigation, and lower-left bilingual statement can be documented; the missing hero imagery and any associated playback cannot.

## How to Read This Reference

- **Measured** values come from the supplied rendered DOM, computed styles, or element rectangles. Tables usually round geometry to two decimal places.
- **Derived** values are calculations from those measurements, such as grid gaps or the space remaining below the hero statement.
- **Visual estimates** describe details visible in the current screenshots but absent from the style sample, including the mobile menu diameter and divider colors.
- **Recommendations** describe a reusable implementation. They are not claims about untested behavior on the original site.
- **Token names** are implementation aliases unless explicitly identified as source custom properties.
- **Coverage differs by section.** The middle-page DOM gives useful geometry, but it does not establish every image subject, icon, border, or hover state.
- **This is a corporate homepage reference.** Preserve its company, brand, investor, recruitment, and shopping destinations when reusing its information architecture.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| White | `#ffffff` | `--color-white` | Measured on the compact header, brand tiles, and footer; also measured for reversed navigation and research text |
| Brand-section gray | `#f4f5f7` | `--color-section` | Measured background of the full-width Brands section |
| Primary charcoal | `#333333` | `--color-ink` | Measured body text, standard links, compact navigation, and footer headings |
| Secondary charcoal | `#505050` | `--color-secondary` | Measured Japanese section subtitles |
| Muted gray | `#999999` | `--color-muted` | Measured desktop footer subnavigation |
| Captured hero gray | Approximately `#d9d9d9` | `--color-hero-captured` | Visual estimate of the uniform opening field; its underlying rendering mechanism is unknown |
| Fine divider | Approximately `#e9e9e9` | `--color-rule` | Visual estimate from the footer separator and mobile navigation rules |

White, charcoal, and pale gray are the interface palette. Do not infer an additional action color from content photography or logo artwork.

The source custom property `--swiper-theme-color: #007aff` exists in both viewport records. No supplied current screenshot establishes blue navigation controls. Treat this as a library-related variable, not a verified AXXZIA accent color. The same caution applies to `--swiper-navigation-size: 44px`: it does not measure a visible control in these captures.

Some sampled anchors retain a charcoal computed color while their visible child artwork or labels appear white over the hero. The online-store anchor is one example. Parent styles alone do not resolve the rendering of every descendant.

### Color Application

- Use white for the main reading surface and individual brand tiles.
- Use `#f4f5f7` for the large Brands field, allowing white tiles to separate without shadows.
- Use `#333333` for primary navigation and body copy.
- Reserve `#999999` for the observed secondary footer hierarchy; increasing its contrast is a recommended accessibility improvement.
- Use reversed white text only where the background supports it. The captured gray hero provides weak contrast and should not become the default readable fallback in a new implementation.

## Tokens — Typography

### Japanese Interface and Body Copy

**Measured computed family:** `YakuHanJPs, noto-sans-cjk-jp, sans-serif`.

The body, main navigation, Japanese section subtitles, news links, and footer use this stack. The measured weight is consistently `400` across the sampled elements. Hierarchy comes primarily from size, placement, spacing, and color rather than bold weight.

A computed family list establishes the requested stack, not which individual font supplied every glyph. Font files and loading records were not included. Do not substitute an unrelated display face and describe it as the original font.

### English Utility Labels

**Measured computed family:** `aktiv-grotesk, sans-serif` for the desktop `Japanese` and `English` links.

These labels use `12px` type, `12px` line height, and `0.36px` tracking. The selected Japanese label has a visible underline. Other uppercase English section names occur in the rendered content, but their own computed typography was not supplied. The utility font measurement should not automatically be extended to every English heading.

### Logos and Hero Lettering

The AXXZIA mark and the individual brand marks are visual identities. Their serif, script-like, or geometric lettering is not evidence of a shared interface font. Preserve the actual logo artwork and its individual proportions when authorized assets are available.

The hero H1 has an empty extracted text value despite visible Japanese and English lettering in the screenshots. Its computed font properties therefore describe the container, but do not prove how the visible lettering is implemented. The Quick Start uses an explicitly recommended live-text approximation.

### Type Scale

| Role | Desktop measurement | Mobile measurement | Notes |
| --- | --- | --- | --- |
| Root size | `10px` | `10.3974px` | Source rem basis differs between captures |
| Body and ordinary content links | `15px / 25px` | `15.5961px / 25.9935px` | Regular weight, normal tracking |
| Primary desktop navigation | `15px / 25px` | Not visible in the mobile header | `0.75px` tracking, equivalent to `0.05em` |
| Language utilities | `12px / 12px` | Not visible in the mobile header | Aktiv Grotesk stack; `0.03em` tracking |
| Header online-store label | `12px / 12px` | `10.3974px / 10.3974px` | Icon and text form one small utility link |
| Hero H1 container | `36px / 53px` | `24.9538px / 37.4306px` | `0.1em` tracking; visible lettering implementation unresolved |
| Japanese section subtitle | `14px / 14px` | `12.4769px / 12.4769px` | `#505050`, regular weight |
| Research heading | `34px / 56.6667px` | `22.8743px / 38.1238px` | White over the research section |
| Section-end text link | `16px / 26.6667px` | `15.5961px / 25.9935px` | Small arrow and underline treatment |
| Desktop footer category | `16px / 25px` | Approximately `15.5961px / 21.8345px` for mobile categories | Mobile categories become navigation rows |
| Desktop footer sublink | `13px / 18px` | Not visible in the captured collapsed groups | Muted gray |
| Policy links | `13px / 16px` | `12.4769px / 33.2717px` | Mobile line boxes create a spacious vertical list |

The root element reports `Times`, but the body explicitly overrides it. This is not a Times-based interface.

**Recommended English heading approximation:** use a regular sans-serif at approximately `40px` on desktop and `28px` on mobile until the actual heading artwork or declarations are available. These sizes are implementation choices, not measurements.

## Tokens — Spacing & Shapes

### Source Gutter Formula

The observed source custom property is:

```css
--pc-lr: clamp(7rem, calc(50% - 63rem), 15rem);
```

At the measured desktop root size of `10px`, this is equivalent to:

```css
--page-gutter-desktop: clamp(70px, calc(50% - 630px), 150px);
```

For a full-width `1440px` section, the result is `90px`, producing a `1260px` content area. This formula limits the margins; it is not an unconditional `1260px` maximum-width container at every desktop size.

The mobile record still exposes the custom property, but actual content rectangles use approximately `20.84px` side margins. Do not apply the desktop gutter formula to mobile simply because the variable remains present.

### Spacing Measurements

| Use | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Standard content inset | `90px` | Approximately `20.84px` | Measured |
| Header horizontal padding | `60px` | `20.7948px` | Measured |
| Footer navigation/policy inset | `90px` | `31.23px` | Measured; deliberately narrower mobile content area |
| Topics card gap | `30px` | `24px` | Derived from adjacent card rectangles |
| Brand column gap | `28px` | Approximately `7.28px` | Derived |
| Brand row gap | `28px` | Approximately `6.23px` | Derived |
| News row top/bottom padding | `40px / 39px` | `30.15px / 28.07px` | Measured |
| Brands section top/bottom padding | `127px / 120px` | `67.58px / 62.38px` | Measured |
| Sustainability/IR separation | `60px` horizontally | Approximately `62.38px` vertically | Derived |
| Supporting-link tile gap | `20px` | Approximately `10.39px` vertically | Derived |
| Footer top/bottom padding | `100px / 110px` | `79.02px / 31.19px` | Measured |

The site does not resolve into a single strict eight-pixel spacing scale. Use its hierarchy of narrow rules, small tile gaps, generous section spacing, and broad page margins rather than rounding every value to the same grid.

### Shapes

| Element | Treatment | Evidence |
| --- | --- | --- |
| Brand tiles | Square corners, no visible elevation | Measured `border-radius: 0`; screenshot confirmation |
| Supporting-link tiles | Square corners | Measured `border-radius: 0` |
| Main content sections | Full-width rectangular regions | DOM and screenshots |
| Mobile menu control | Dark circle, approximately `56px` diameter | Visual estimate |
| Desktop menu symbol | Two fine horizontal strokes, approximately `40px` wide | Visual estimate |
| Mobile footer expansion symbols | Small outlined circles with plus signs, approximately `18px` diameter | Visual estimate; expansion not exercised |
| Section-end link | Fine underline and small right-pointing mark | Screenshot observation |

### Layout Measurements

| Element | Desktop | Mobile |
| --- | --- | --- |
| Document height | `7540.72px` | `7312.61px` |
| Opening header | `1440 × 150px` | `390 × 63.41px` measured header box |
| Compact desktop header | `1440 × 80px` | No equivalent full-width compact header established |
| Opening logo link | `161 × 49px` | `116.44 × 35.34px` |
| Compact desktop logo link | `128 × 39px` | Not applicable |
| Hero H1 rectangle | `432 × 116.89px` | `311.92 × 84.41px` |
| Topics card width | `400px` | `311.92px` |
| News list width | `950px` | `348.31px` |
| Featured brand tile | `616 × 200px` | `348.31 × 155.95px` |
| Standard brand tile | `294 × 200px` | `170.52 × 115.98px` |
| Research section height | `639.31px` | `476.80px` |
| Sustainability/IR section width | `600px` each | `348.31px` each |
| Online-store section height | `496.31px` | `166.34px` |
| Footer height | `1106.72px` | `1234.55px` |

The opening background covers the entire first viewport in both screenshots. The hero wrapper itself was not separately measured, so an exact `100vh` source declaration cannot be confirmed from these rectangles alone.

## Components

### Desktop Header

**Role:** corporate identity, primary destinations, and small global utilities.

The opening header is a transparent `150px`-high layer over the hero. Its logo link begins at `x = 60px`, with a measured box of `161 × 49px`. White primary navigation sits to the right, with its first link beginning around `x = 491.75px` and `y = 85px`.

The navigation contains eight destinations: `会社情報`, `ブランド`, `研究・生産`, `サステナビリティ`, `IR情報`, `ニュース`, `採用情報`, and `お問い合わせ`. Approximately `31px` separates adjacent text boxes. Keep the text regular-weight and lightly tracked.

A second utility tier near the upper-right contains the Japanese/English selector, a shopping-bag symbol and `オンラインストア`, and a search symbol. A separate two-line menu symbol terminates the main navigation row.

A second header element is present in the DOM. It has a white background, an `80px` height, charcoal links, and a smaller `128 × 39px` logo. Its initial rectangle is at `y = -80px`; the later desktop screenshots show the compact white header at the viewport top. This supports a distinct persistent compact state, but not a particular scroll threshold or direction rule.

### Mobile Header and Persistent Menu Control

**Role:** preserve identity and shopping access while removing the desktop navigation row.

At `390px` wide, the logo begins near `(20.78, 28.06)` and measures `116.44 × 35.34px`. The store link sits around `x = 195px`, with a width of `103.70px`. Language labels and the full desktop navigation are not visible.

The menu becomes a charcoal circle approximately `56px` across, positioned around `16px` from the right edge and `20px` from the top. Two delicate white horizontal lines sit inside it. The circle remains at the same top-right location in the mobile footer capture, while the opening logo and store label are absent there.

The button’s open state, overlay contents, focus behavior, and dismissal behavior were not captured. The mobile footer screenshot is not evidence of an opened navigation overlay.

### Opening Hero Statement

**Role:** establish the brand promise with minimal competition from controls.

The statement is anchored low and left rather than centered. It contains the visible Japanese copy `「アジアの美」を` followed by `日本から、世界へ発信する`, with the English line `The Delicacy of Asian Beauty from Japan to The World.` beneath it.

On desktop, the H1 rectangle starts at `(90, 803.11)` and ends at `y = 920px`, leaving `80px` below it in the first capture. On mobile, it starts at approximately `(20.78, 722.17)` and ends at `806.58px`, leaving `37.42px` below it.

Preserve the substantial empty field above the statement. No large conversion button appears in either opening screenshot. The hero background’s media content and implementation are unresolved; do not invent a film sequence, model portrait, autoplay rule, or parallax treatment.

### Bilingual Section Heading

**Role:** make the long page scannable without introducing heavy visual decoration.

The rendered content uses uppercase English labels such as `TOPICS`, `NEWS`, `BRANDS`, `SUSTAINABILITY`, and `IR`, paired with a smaller Japanese subtitle. The Japanese subtitle is measured at `14px` on desktop and approximately `12.48px` on mobile, in secondary charcoal.

The heading block changes its relationship to surrounding content. News uses a left-side heading area beside the list on desktop. Brands places its introduction to the right of the heading at desktop width, then moves the introduction below on mobile. Avoid enforcing one identical heading layout across every section.

### Topics Rail

**Role:** provide a horizontal sequence of current announcements and promotional destinations.

Seven linked entries are present. Desktop card rectangles begin at `x = 90`, `520`, and `950px`, each `400px` wide. Additional entries continue offscreen at `1380px` and beyond. The first three measured link heights range from `301px` to `329px`, reflecting different content lengths.

On mobile, cards measure `311.92px` wide with a `24px` gap. The first begins near `20.84px`; the next begins at `356.77px`. This geometry allows a narrow portion of the next card to occupy the viewport’s right edge, subject to the rail’s clipping behavior.

The recorded links include a collaboration destination and announcement documents. Preserve real destination types rather than routing every card into a generic article detail page.

The horizontal geometry is established. Dragging, swiping, arrow controls, autoplay, looping, and slide-change timing are not established by the supplied current-page captures.

### News Section

**Role:** make corporate and investor announcements easy to scan.

On desktop, the content area divides into a `310px` heading/category region and a `950px` list beginning at `x = 400px`. Each news link combines a date, category, title, and, where present, a `NEW` marker. Seven entries are included in the captured content.

Most desktop rows measure approximately `106.66px` high; longer entries reach `133.31px`. Links have `40px` top and `39px` bottom padding. The generous row spacing supports dense Japanese titles without increasing font weight.

On mobile, the heading and category labels precede the list. Rows span `348.31px`, with heights between approximately `116.36px` and `168.33px`. Text wrapping increases while vertical padding decreases to approximately `30.15px` above and `28.07px` below.

The category labels are `All`, `IRニュース`, `ニュースリリース`, `海外`, `製品`, and `メディア`. Their presence is confirmed; filtering results and selected-state behavior were not tested. The `NEW` marker’s specific color and shape are not provided by the sampled styles.

### Brand Directory

**Role:** present the company’s brand portfolio while preserving a clear first tier.

The entire section uses `#f4f5f7`. White logo tiles carry no visible shadows or rounded corners. The hierarchy is unusually concrete and should be retained:

1. AXXZIA and AGTHEORY each occupy half of the desktop content width: `616 × 200px`, separated by `28px`.
2. Nine additional brands use a four-column layout of `294 × 200px` tiles with `28px` gaps.
3. The final RevWell tile remains aligned to the left of an incomplete row.

The secondary sequence is LisBeau, LisBlanc, THE B, Le Ciel de L’aube, Aither, NICE GLOW, Medullux, Venus Recipe, and RevWell. Logos are centered within generous white space; their different letterforms are part of the content, not a reason to change the tile treatment.

On mobile, the first two brands become separate full-width tiles of `348.31 × 155.95px`. The remaining brands form two columns of `170.52 × 115.98px`. Horizontal gaps are approximately `7.28px`, and row gaps approximately `6.23px`. The final item still aligns left.

Do not give all eleven brands equal desktop width. Do not center or stretch the final partial row. These choices would remove the observed portfolio hierarchy.

### Underlined Section-End Link

**Role:** provide a restrained route to a complete index or deeper section.

The visible brand-section link reads `一覧を見る`. It aligns to the content area’s right edge, with a small right-pointing mark and a fine underline. Its desktop rectangle is `97 × 33.66px`, with `16px` type, `17px` right padding, and `6px` bottom padding.

Mobile links measure approximately `95.63px` wide and use `15.60px` type. Similar text-link geometry appears on `詳しく見る` destinations.

This is a small navigational signpost. Preserve its light treatment instead of converting it into a large filled pill.

### Research and Production Section

**Role:** connect the brand portfolio to research and manufacturing capability.

The section follows the brand field without a rounded enclosing card. A current desktop capture shows the beginning of a broad photographic scene with people in a bright indoor work setting. Only a partial crop is visible, so the complete composition and image treatment cannot be specified.

The section measures `639.31px` high on desktop, with `213px` top and `225px` bottom padding. Its link group includes the heading `研究・生産`, explanatory copy, and `詳しく見る`, all in white. The heading is `34px`, regular weight, with a `56.67px` line height.

At mobile width, the section is `476.80px` high, with approximately `117.49px` top and `127.89px` bottom padding. The heading becomes `22.87px`. The explanatory copy is deliberately broken into more short lines, while retaining the body size of approximately `15.60px`.

The link group is one destination. A new implementation should avoid nesting a second interactive button inside that same anchor.

### Sustainability and IR Pair

**Role:** give two major corporate subjects parallel prominence.

Desktop places these sections side by side at `x = 90px` and `x = 750px`. Each is `600px` wide, leaving a `60px` gap. Each combines a bilingual heading, a linked content region, and a short descriptive paragraph.

Mobile stacks the sections in the same order. Each spans `348.31px`; the second begins approximately `62.38px` after the first section ends. Captured section heights reduce from approximately `509.19px` each on desktop to `313.33px` each on mobile.

The supplied screenshots do not show their full visual content. Do not specify image subjects, dominant photographic colors, or crop ratios from the section names alone.

### Online-Store Section

**Role:** connect the corporate site to the separate shopping destination.

The desktop section is approximately `496.31px` high. Its text is positioned in the right half, with the explanatory paragraph beginning at `x = 811px` and measuring `509px` wide. The linked heading uses `34px` type, followed by body copy and a `詳しく見る` link.

Mobile makes a substantial content reduction. The section becomes approximately `166.34px` high and exposes a broad `オンラインストア` link with `16.64px` type. The desktop explanatory paragraph and separate details link are absent from the visible mobile text and link records.

This is more than a two-column section becoming one column: the mobile presentation removes supporting copy and consolidates the route to the store.

### Supporting-Link Tiles

**Role:** collect secondary destinations before the footer.

Five links cover the collaboration site, stores, recruitment, media coverage, and awards. Desktop uses three columns, with `406px`-wide white rectangles and `20px` gaps. Measured heights are approximately `110–116px`; internal padding is `16px`.

Mobile turns the same group into a vertical list of `348.31px`-wide tiles, approximately `112–114px` high, with `15.60px` internal padding and `10.39px` gaps. Their sampled radius is zero.

The current screenshots do not establish every tile’s internal image crop or icon. Preserve the measured rectangular arrangement without inventing those details.

### Desktop Footer

**Role:** expose the full corporate information architecture and legal navigation.

The footer is a large white region with `100px` top and `110px` bottom padding. An upper identity row contains a `152 × 27px` logo link and six social destinations. Measured social icon boxes are approximately `19–24px` wide.

The sitemap uses seven visibly unequal columns. Their left edges are approximately `90`, `242.31`, `385.89`, `615.42`, `831.17`, `992.44`, and `1233px`. These correspond to company information, brands, sustainability, IR, news, a column feature, and a final group of direct research/recruitment/contact links.

Headings use `16px` charcoal type. Sublinks use `13px / 18px` muted gray, with about `26px` between ordinary row starts. IR is the deepest column and includes grouped entries with a `13px` horizontal indentation and small leading dashes.

A long fine rule separates the sitemap from the policy area. Policy links wrap into two desktop rows; the copyright sits toward the lower-right. There is no visually heavy colored footer block.

### Mobile Footer

**Role:** retain navigation depth while shortening the visible sitemap.

The social icons form a centered row. Navigation then uses a narrower `327.52px` content area with approximately `31.23px` side margins. Category rows have a vertical pitch of approximately `67.52px`, including their separators.

Grouped destinations display small outlined plus symbols, visibly including IR, News, and the column group in the supplied lower-footer capture. Research, recruitment, and contact appear as direct destinations. The recorded mobile text omits the desktop sublink lists in this state.

This supports a collapsed disclosure presentation. Opening behavior, animation, and whether several groups may remain open together were not tested.

Below the category rows, policies become a single vertical list in approximately `12.48px` type with `33.27px` line height. Copyright is aligned left. The floating circular menu remains visible at the upper-right of the viewport.

## Tokens — Motion & Interaction

The following are **measured transition declarations**, not recordings of complete interactions.

| Target | Recorded declaration | Supported interpretation | Unverified detail |
| --- | --- | --- | --- |
| Opening header | `transform 0.4s, background-color 0.4s, height 0.4s` | Header geometry and surface have transition support | Trigger, transform distance, and full trajectory |
| Compact header | `top 0.3s` | Supports vertical introduction of the separate header | Scroll threshold and direction logic |
| Major content sections | `transform 1s, opacity 1s` | Supports a slower reveal or visibility transition | Initial opacity, displacement, trigger, and sequencing |
| Topics links | `transform 0.3s` | Individual links support transform changes | Scale/translation endpoints and hover response |
| News, brand, and many section links | `opacity 0.3s` | Supports subtle opacity feedback | Actual hovered opacity and touch behavior |
| Navigation and several text links | `background-size 0.3s` | Compatible with an animated underline treatment | Exact start/end dimensions and interaction trigger |
| Several logo and utility links | `0.3s` | A transition duration is present | Which properties actually change |

A bare `transition: all` entry does not establish a visible animation. Sampled elements report `animation: none`, but this does not rule out JavaScript motion, media playback, or animations on unsampled descendants.

The capture process waited for finite motion and layout stability within bounded time limits. Perpetual animations were temporarily paused during readiness checks and then resumed. Still screenshots cannot establish the hero media sequence or carousel timing.

**Recommended motion character:** short, restrained opacity or underline feedback for links; a modest header transition; optional slow section reveals. Avoid making content inaccessible until a reveal script succeeds. Keep all content visible by default and provide reduced-motion behavior.

## Surfaces

| Surface | Appearance | Structural purpose |
| --- | --- | --- |
| Opening hero | Uniform gray in the supplied captures, with white foreground elements | Identity-led opening composition; background content unresolved |
| Main page | White with charcoal text | Topics, news, and corporate information |
| Brands field | `#f4f5f7` | Separates the portfolio directory from neighboring sections |
| Brand tiles | White, square, no visible shadow | Holds individual logo artwork |
| Research section | Broad image region with white text | Establishes a distinct corporate content band |
| Compact header | Solid white with charcoal identity/navigation | Maintains navigation over scrolled content |
| Footer | White with gray links and fine separators | Dense sitemap and policy information |
| Mobile menu | Dark circular control | Persistent navigation affordance |

No general shadow-based elevation system is visible. Separation comes from background changes, whitespace, typography, and rules.

## Imagery

The most securely documented graphic system is the brand directory: dark individual wordmarks centered on white rectangles. Its variety comes from the marks themselves. Keep their native proportions and individual visual scale; a long wordmark and a compact emblem should not be forced into identical letter heights.

The only visible current-page photographic crop in the supplied design captures is the beginning of the Research and Production region. It shows people in a bright indoor setting with subdued tones. The limited crop does not establish the full photograph, its original saturation, or the exact overlay opacity.

Topics and the remaining corporate sections have content and layout evidence, but their image subjects are not shown sufficiently for detailed art direction. The hero has no discernible photographic detail in either current opening capture.

**Recommended imagery guidance:** use authorized brand marks; keep editorial and corporate photography within the rectangular section structure; preserve clear areas for overlaid text. Choose actual supplied assets before deciding crops. This is implementation guidance, not a claim about unseen current images.

### Observed Asset References

No image-file or video-file URLs were included in the supplied original-page evidence. Navigation destinations must not be presented as asset paths.

| Graphic or media role | What is established | Asset URL status |
| --- | --- | --- |
| AXXZIA header mark | White opening treatment; dark compact treatment; measured link boxes | Not supplied |
| Brand directory marks | Eleven linked brand identities; several marks visible in the desktop capture | Not supplied |
| Hero statement | Visible Japanese/English wording and measured H1 rectangle | Rendering mechanism and asset path unresolved |
| Hero background | Uniform gray in both current captures | Media type and asset path unresolved |
| Research image | Partial photographic crop visible below the brand section | Not supplied |
| Social symbols | Six destinations and measured icon boxes | Not supplied |
| Store, search, menu, and footer plus symbols | Visible small utility graphics | Not supplied |

## Layout & Responsive Behavior

### Page Sequence

The current homepage retains this order: opening hero, Topics, News, Brands, Research and Production, Sustainability, IR, online-store access, supporting destinations, and footer. On desktop, Sustainability and IR share one horizontal band.

Selected document coordinates show the scale of the page. These are captured positions, not layout constants to hard-code.

| Section start | Desktop Y | Mobile Y |
| --- | --- | --- |
| Topics | `1179px` | `927.17px` |
| News | `1835px` | `1395.34px` |
| Brands | `2827.56px` | `2638.44px` |
| Research and Production | `4153.22px` | `3931.88px` |
| Sustainability | `4937.53px` | `4475.20px` |
| IR | `4937.53px` | `4850.91px` |
| Online store | `5581.72px` | `5223.48px` |
| Footer | `6434px` | `6078.06px` |

### Observed Responsive Changes

- The desktop navigation row and language utilities disappear from the visible mobile header; shopping access remains.
- The mobile menu becomes a prominent circular control and remains visible near the footer.
- The hero statement moves from a `90px` left inset and `80px` lower clearance to approximately `20.78px` and `37.42px`.
- Topics retains a horizontal sequence, with narrower cards and a partial next-card position.
- News changes from a heading/list split to a vertical section with a full-width list.
- Brands changes from two half-width featured tiles plus four-column secondary rows to two full-width featured tiles plus two-column secondary rows.
- Sustainability and IR stack vertically.
- The store section consolidates its visible content into a broad link.
- Supporting links change from three columns to one.
- The footer replaces expanded columns with collapsed category rows and a vertical policy list.

The mobile document is slightly shorter than the desktop document despite several stacked sections. Reduced section spacing and hidden supporting navigation/copy contribute to this result; do not assume mobile must reproduce every desktop block at full length.

**Breakpoint limitation:** only `1440px` and `390px` widths were supplied. The exact breakpoint, tablet layout, landscape behavior, safe-area handling, and scaling formula between samples are unknown. The Quick Start uses a recommended `1200px` layout switch and bounded mobile sizing, not recovered source media queries.

## Do’s and Don’ts

### Do

- Preserve the white, charcoal, and pale-gray interface palette.
- Give the desktop content area its measured `90px` margins at `1440px` width.
- Keep the header gutter distinct from the wider content gutter.
- Use regular-weight typography and spacing to establish hierarchy.
- Keep the hero statement low and left, with substantial space above it.
- Preserve the larger first tier of two brand tiles.
- Keep logos centered, uncropped, and individually proportioned.
- Leave the incomplete final brand row aligned left.
- Use small underlined links for section exits.
- Retain the footer’s substantial information architecture and mobile disclosure presentation.
- Distinguish declared transition support from interactions actually observed.

### Don’t

- Don’t rebuild the homepage as a single-purpose sales funnel.
- Don’t introduce oversized filled CTAs, colorful pills, or gradients into the neutral interface without a new requirement.
- Don’t round every tile or add a generic card-shadow system.
- Don’t replace individual brand marks with one shared serif font.
- Don’t treat the gray captured hero as proof that the intended design has no imagery.
- Don’t invent a hero photograph, video sequence, or autoplay behavior.
- Don’t use the library’s blue custom property as an observed brand accent.
- Don’t apply desktop numeric rem values unchanged under a conventional `16px` root.
- Don’t describe footer disclosures, search, filters, or the menu overlay as tested interactions.
- Don’t force desktop supporting copy into mobile sections where the observed layout removes it.

## Recommended Implementation Additions

These are improvements for a new implementation, not verified features of the original site:

- Provide a readable hero fallback. If white text overlays media, supply an appropriate poster and measured contrast treatment. Avoid white text over the pale captured gray.
- Keep the hero statement accessible as text, or supply an equivalent accessible name if authorized artwork contains the lettering.
- Give logo-only links useful names and social/icon controls explicit accessible labels.
- Implement footer disclosures with native `details`/`summary` or buttons with synchronized `aria-expanded` and `aria-controls`.
- Make the persistent mobile menu keyboard-operable, with predictable focus return and dismissal if it opens an overlay.
- Give Topics a keyboard-accessible navigation method and keep all entries reachable without autoplay.
- If News categories filter content, expose selection and update state programmatically.
- Increase the contrast of secondary footer links where necessary; `#999999` on white is too light for a robust small-text treatment.
- Respect reduced-motion preferences and keep content visible when motion scripts fail.
- Preserve the actual destination type for document links and provide a concise document-format cue where helpful.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas and tiles: `#ffffff`.
- Brands section: `#f4f5f7`.
- Primary text: `#333333`.
- Japanese section subtitles: `#505050`.
- Observed desktop footer sublinks: `#999999`; increase contrast for an accessible adaptation.
- Fine rules: approximately `#e9e9e9`, a visual estimate.
- Hero foreground: white. Current background imagery is unresolved.
- No verified colorful primary-action accent.

### Overall Prompt

“Create a Japanese beauty-company corporate homepage inspired by AXXZIA’s current structure. Use white surfaces, charcoal regular-weight Japanese sans-serif text, a very pale gray brand section, fine rules, and generous desktop margins. Place a white logo and restrained navigation over a viewport-filling opening region, with a two-line Japanese statement and small English translation anchored near the lower-left. Use a separate compact white navigation state for scrolled desktop content. Follow with a horizontal Topics rail, a News section with a left heading area and wide announcement list, a brand grid with two larger leading tiles, broad research content, paired Sustainability and IR sections, shopping access, and a detailed sitemap footer. On mobile, preserve shopping access and a dark circular menu, stack the major content groups, use two-column secondary brand tiles, and collapse footer navigation into disclosure rows. Use supplied assets only; leave unresolved hero media as an explicit implementation dependency.”

### Example Component Prompts

1. **Brand grid:** “Build a pale-gray portfolio section with square white logo tiles. At a 1440px viewport, use 90px side margins, four 294px columns, and 28px gaps. Make the first two tiles span two columns each. Center authorized logos without cropping or shadows. On a 390px phone, make those first two tiles full-width and the remaining tiles two columns, leaving the last tile aligned left.”
2. **Desktop header:** “Create a transparent 150px opening header with a 161px-wide logo, small upper-right language/store utilities, eight restrained navigation links, and a fine two-line menu symbol. Provide a separate 80px white compact state with a 128px-wide dark logo. Keep the transition modest; do not invent a search or menu overlay design.”
3. **News list:** “Use regular 15px Japanese text with 25px line height. Place the section heading and category labels in a 310px desktop side area and the announcement list in the remaining 950px. Each link contains date, category, title, and an optional small NEW marker. Let titles wrap naturally. On mobile, move the heading above a full-width list and reduce vertical row padding.”
4. **Mobile footer:** “Create white footer navigation within approximately 31px side margins at 390px width. Use roughly 67px category rows with fine separators and small circled plus symbols for grouped destinations. Follow with single-column policy links at about 12.5px type and 33px line height. Keep copyright left-aligned and preserve the fixed dark circular menu near the upper-right.”
5. **Section-end link:** “Make a small charcoal text link labeled ‘一覧を見る’, with regular 16px type, a fine underline, and a tiny right-pointing mark. Align it to the content area’s right edge. Keep the visual footprint around 97px wide; provide a larger invisible hit area if needed for accessibility.”

## Quick Start

### CSS Custom Properties

This is a reusable adaptation, not extracted source code. It preserves measured desktop geometry and approximates the supplied mobile sample without changing the root font size. The `1200px` breakpoint, native horizontal scrolling, hover opacity, English heading sizes, and accessible focus treatment are recommendations.

Use `.brand-grid > .brand-tile`, applying `.is-featured` to the first two tiles. A `.news-layout` contains a heading/category block and the news list. `.topic-track` contains linked cards. Desktop footer groups and mobile native disclosures are separate responsive presentations. Apply `.is-compact` to the desktop header through application logic; the original evidence contains two header elements, while this adaptation permits one.

Font declarations do not load font files. Add authorized fonts through the host project. Asset URLs, menu/search behavior, filter logic, and header-state logic remain separate implementation work.

```css
:root {
  /* Measured interface colors */
  --color-white: #ffffff;
  --color-section: #f4f5f7;
  --color-ink: #333333;
  --color-secondary: #505050;
  --color-muted: #999999;

  /* Screenshot estimates and recommended readable fallback */
  --color-rule: #e9e9e9;
  --color-hero-captured: #d9d9d9;
  --color-hero-fallback: #505050;

  /* Computed source stacks; font files are not bundled */
  --font-body: YakuHanJPs, noto-sans-cjk-jp, sans-serif;
  --font-utility: aktiv-grotesk, sans-serif;
  --text-body: 15px;
  --leading-body: 25px;
  --text-subtitle: 14px;

  /* Desktop source geometry expressed independently of rem */
  --page-gutter: clamp(70px, calc(50vw - 630px), 150px);
  --header-gutter: 60px;
  --header-height: 150px;
  --header-compact-height: 80px;
  --hero-copy-width: 432px;
  --hero-bottom: 80px;
  --brand-gap-x: 28px;
  --brand-gap-y: 28px;
  --brand-height: 200px;
  --topic-gap: 30px;
  --topic-width: calc((100vw - 2 * var(--page-gutter) - 60px) / 3);

  --motion-link: 300ms;
  --motion-header: 400ms;
  --motion-reveal: 1000ms;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-body);
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button, summary { font: inherit; }
button { cursor: pointer; }

.page-inset { padding-inline: var(--page-gutter); }

/* One-header adaptation; state logic is supplied by the application. */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 35px;
  height: var(--header-height);
  padding-inline: var(--header-gutter);
  color: var(--color-white);
  transition: transform var(--motion-header),
    background-color var(--motion-header), height var(--motion-header);
}

.site-logo { width: 161px; }
.site-logo img { width: 100%; height: auto; }

.site-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(16px, 2.153vw, 31px);
  transform: translateY(20px);
}

.site-nav a {
  white-space: nowrap;
  font-size: 15px;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.header-utilities {
  position: absolute;
  top: 22px;
  right: 120px;
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 12px;
  line-height: 1;
}

.language-links {
  display: flex;
  gap: 18px;
  font-family: var(--font-utility);
  letter-spacing: 0.03em;
}

.menu-toggle {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  width: 40px;
  height: 44px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
}

.menu-toggle::before,
.menu-toggle::after {
  content: '';
  width: 40px;
  height: 1px;
  background: currentColor;
}

.site-header.is-compact {
  position: fixed;
  height: var(--header-compact-height);
  color: var(--color-ink);
  background: var(--color-white);
}

.is-compact .site-logo { width: 128px; }
.is-compact .site-nav { transform: none; }
.is-compact .header-utilities { display: none; }

/* Recommended viewport sizing and readable media fallback. */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: var(--color-white);
  background: var(--color-hero-fallback);
}

.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-copy {
  position: absolute;
  left: var(--page-gutter);
  bottom: var(--hero-bottom);
  width: min(var(--hero-copy-width), calc(100% - 2 * var(--page-gutter)));
}

/* Optical live-text approximation, not the source H1 container size. */
.hero-title {
  margin: 0;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.hero-caption {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

/* English heading sizes are recommended approximations. */
.section-title-en {
  margin: 0 0 14px;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
}

.section-subtitle {
  margin: 0;
  color: var(--color-secondary);
  font-size: var(--text-subtitle);
  font-weight: 400;
  line-height: 1;
}

.topics { padding-left: var(--page-gutter); }

/* Native scrolling is a recommended alternative to unverified rail logic. */
.topic-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--topic-width);
  align-items: start;
  gap: var(--topic-gap);
  overflow-x: auto;
  padding: 0 var(--page-gutter) 12px 0;
  scroll-snap-type: x proximity;
  scroll-padding-left: 0;
}

.topic-card {
  min-width: 0;
  scroll-snap-align: start;
  text-decoration: none;
  transition: transform var(--motion-link);
}

.news-layout {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
}

/* Internal date/category column sizes are implementation choices. */
.news-row {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  padding-block: 40px 39px;
  border-top: 1px solid var(--color-rule);
  text-decoration: none;
  transition: opacity var(--motion-link);
}

.news-row:last-child { border-bottom: 1px solid var(--color-rule); }
.news-row p { margin: 0; }

.brands {
  padding: 127px var(--page-gutter) 120px;
  background: var(--color-section);
}

.brands-intro {
  display: flex;
  align-items: flex-start;
  gap: 70px;
  margin-bottom: 54px;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--brand-gap-y) var(--brand-gap-x);
}

.brand-tile {
  display: grid;
  place-items: center;
  min-width: 0;
  height: var(--brand-height);
  padding: 24px;
  background: var(--color-white);
  border-radius: 0;
  text-decoration: none;
  transition: opacity var(--motion-link);
}

.brand-tile.is-featured { grid-column: span 2; }

/* Adjust individual logo limits using each authorized asset. */
.brand-tile img {
  width: auto;
  max-width: 80%;
  max-height: 80px;
  object-fit: contain;
}

.section-end {
  display: flex;
  justify-content: flex-end;
  margin-top: 38px;
}

.text-link {
  position: relative;
  display: inline-block;
  padding: 0 17px 6px 0;
  border-bottom: 1px solid currentColor;
  font-size: 16px;
  line-height: 1.6667;
  text-decoration: none;
}

.text-link::after {
  content: '';
  position: absolute;
  right: 0;
  top: 10px;
  border-block: 2px solid transparent;
  border-left: 5px solid currentColor;
}

.research {
  padding: 213px var(--page-gutter) 225px;
  color: var(--color-white);
  background-color: var(--color-secondary);
  background-position: center;
  background-size: cover;
}

.research-title {
  margin: 0 0 31px;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.6667;
}

.corporate-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
  padding-inline: var(--page-gutter);
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding-inline: var(--page-gutter);
}

.support-tile {
  display: flex;
  align-items: center;
  min-height: 110px;
  padding: 16px;
  background: var(--color-white);
  text-decoration: none;
}

.site-footer {
  padding: 100px var(--page-gutter) 110px;
  background: var(--color-white);
}

/* Proportions approximate the measured unequal column origins. */
.footer-desktop {
  display: grid;
  grid-template-columns: 1fr .94fr 1.5fr 1.42fr 1.06fr 1.58fr .77fr;
}

.footer-group { min-width: 0; padding-right: 24px; }
.footer-group:last-child { padding-right: 0; }

.footer-group h3 {
  margin: 0 0 28px;
  font-size: 16px;
  font-weight: 400;
}

.footer-subnav {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-muted);
  font-size: 13px;
  line-height: 18px;
}

.footer-subnav a { text-decoration: none; }
.footer-subnav .is-nested { padding-left: 13px; }
.footer-mobile { display: none; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  margin-top: 80px;
  padding-top: 60px;
  border-top: 1px solid var(--color-rule);
  font-size: 13px;
  line-height: 16px;
}

.footer-legal a { text-decoration: none; }

/* Recommended focus and hover behavior. */
:where(a, button, summary):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

@media (hover: hover) {
  .brand-tile:hover,
  .news-row:hover { opacity: 0.75; }
}

/* Recommended breakpoint; not recovered from the source stylesheet. */
@media (max-width: 1200px) {
  :root {
    --page-gutter: clamp(20px, 5.344vw, 40px);
    --header-gutter: var(--page-gutter);
    --text-body: 15.5961px;
    --leading-body: 25.9935px;
    --text-subtitle: 12.4769px;
    --hero-copy-width: 311.92px;
    --hero-bottom: 37.42px;
    --brand-gap-x: 7.28px;
    --brand-gap-y: 6.23px;
    --topic-gap: 24px;
    --topic-width: min(79.98vw, 400px);
  }

  .site-header {
    height: auto;
    padding-top: 25.99px;
    align-items: start;
  }

  .site-logo { width: 116.44px; }
  .site-nav, .language-links, .header-search { display: none; }

  .header-utilities {
    top: 37.94px;
    right: 92px;
    font-size: 10.3974px;
  }

  /* Keep desktop compact-state logic disabled at this layout size. */
  .menu-toggle {
    position: fixed;
    top: 20px;
    right: 16px;
    z-index: 30;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: var(--color-white);
    background: var(--color-ink);
  }

  .menu-toggle::before,
  .menu-toggle::after { width: 27px; }

  .hero-title { font-size: clamp(21px, 6vw, 24px); }
  .hero-caption { font-size: 11.5px; }
  .section-title-en { font-size: 28px; }

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

  .news-row {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px 20px;
    padding-block: 30.15px 28.07px;
  }

  .news-title { grid-column: 1 / -1; }

  .brands { padding-block: 67.58px 62.38px; }
  .brands-intro { display: block; margin-bottom: 39.5px; }
  .brands-intro p { margin-top: 31px; }
  .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .brand-tile {
    height: auto;
    aspect-ratio: 294 / 200;
    padding: 16px;
  }

  .brand-tile.is-featured {
    grid-column: 1 / -1;
    height: 155.95px;
    aspect-ratio: auto;
  }

  .section-end { margin-top: 27px; }
  .text-link { font-size: 15.5961px; }
  .research { padding-block: 117.49px 127.89px; }
  .research-title { margin-bottom: 16.64px; font-size: 22.8743px; }
  .corporate-pair { grid-template-columns: 1fr; gap: 62.38px; }
  .support-grid { grid-template-columns: 1fr; gap: 10.39px; }
  .support-tile { min-height: 112.28px; padding: 15.60px; }

  .site-footer {
    padding: 79.02px clamp(24px, 8.009vw, 48px) 31.19px;
  }

  .footer-desktop { display: none; }
  .footer-mobile { display: block; }

  .footer-mobile details,
  .footer-mobile > a { border-bottom: 1px solid var(--color-rule); }

  .footer-mobile summary,
  .footer-mobile > a {
    display: block;
    position: relative;
    min-height: 66.52px;
    padding: 21.83px 28px 22.87px 0;
    line-height: 21.83px;
    list-style: none;
    text-decoration: none;
  }

  .footer-mobile summary { cursor: pointer; }
  .footer-mobile summary::-webkit-details-marker { display: none; }

  .footer-mobile summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 24px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1;
  }

  .footer-mobile details[open] summary::after { content: '−'; }
  .footer-mobile .footer-subnav { padding-bottom: 24px; }

  .footer-legal {
    display: grid;
    gap: 0;
    margin-top: 38px;
    padding-top: 0;
    border-top: 0;
    font-size: 12.4769px;
    line-height: 33.2717px;
  }
}

/* Optional contrast improvement for an accessible adaptation. */
[data-enhanced-contrast] .footer-subnav { color: #767676; }

@media (prefers-reduced-motion: reduce) {
  .site-header, .topic-card, .news-row, .brand-tile {
    transition: none;
  }
  .topic-track { scroll-snap-type: none; }
}
```

The live-text hero sizes above are intentionally optical approximations: `32px` on desktop and approximately `23.4px` at a `390px` viewport. Copying the empty H1 container’s `36px`/`24.95px` styles would not prove a match to its visible lettering and could alter line wrapping. Use authorized lettering artwork if exact reproduction is required.

The CSS uses a recommended dark fallback for readable white hero text. The measured interface palette remains separate from that improvement. The store section’s responsive content reduction should be implemented explicitly in the host markup; CSS geometry alone does not establish its complete design.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. Define the properties above first. This is not evidence that the original site uses Tailwind.

```css
@theme inline {
  --color-axxzia-white: var(--color-white);
  --color-axxzia-section: var(--color-section);
  --color-axxzia-ink: var(--color-ink);
  --color-axxzia-secondary: var(--color-secondary);
  --color-axxzia-muted: var(--color-muted);
  --color-axxzia-rule: var(--color-rule);

  --font-axxzia: var(--font-body);
  --font-axxzia-utility: var(--font-utility);

  --text-axxzia-body: var(--text-body);
  --text-axxzia-subtitle: var(--text-subtitle);

  --spacing-page-gutter: var(--page-gutter);
  --spacing-brand-gap: var(--brand-gap-x);
  --spacing-header-compact: var(--header-compact-height);

  --radius-axxzia-tile: 0px;
}
```

## Sources & Evidence

- **Inspected original and final page:** [AXXZIA Japanese homepage](https://axxzia.co.jp/). Both supplied URLs are identical, and the recorded response status is `200`.
- **Capture record:** retrieved at `2026-09-16T20:30:46.102Z`, or September 17, 2026 at 05:30:46.102 JST. This is the supplied record timestamp, not a claim that every image was taken in the same millisecond.
- **Desktop evidence:** `1440 × 1000` CSS-pixel captures of the opening view, the brand-grid region, and the lower footer; rendered document height approximately `7540.72px`.
- **Mobile evidence:** `390 × 844` CSS-pixel captures of the opening view and lower footer; rendered document height approximately `7312.61px`.
- **Rendered DOM and computed styles:** element rectangles, font stacks, sizes, line heights, tracking, colors, backgrounds, padding, transition declarations, link destinations, and the supplied custom properties.
- **Observed state changes:** the opening and compact desktop header presentations, lower-page mobile persistence of the circular menu control, and desktop/mobile differences in layout and visible text. No click, hover, filter, carousel, search, or disclosure results were supplied.
- **Capture limitations:** readiness checks used bounded waits for document load, finite motion, layout stability, text stability, and visible image decoding. Delayed content can still be absent. Service workers and SharedWorkers were disabled during inspection. The uniform hero field does not establish its intended media content or failure cause.
- **Analysis scope:** this document analyzes the supplied original-page evidence without additional browsing, asset retrieval, or destination-page inspection. Values marked as estimates or recommendations are not recovered source declarations.

This reference describes the current captured homepage and its documented responsive states. Unresolved imagery, intermediate breakpoints, and unexercised interactions remain explicit implementation dependencies.