# WHERE — Style Reference

> A photographic Earth interrupts an oversized serif statement, connecting orbital scale with an editorial corporate website.

**Website:** [pntwhere.com](https://pntwhere.com/)
**Original URL:** https://pntwhere.com/
**Final URL:** https://pntwhere.com/
**Theme:** dark photographic opening, white and pale-gray content surfaces, and a deep-navy footer; no selectable theme was observed.
**Inspected:** September 12, 2026, at 23:53 JST / 14:53 UTC.
**Viewports:** 1440 × 1000 and 390 × 844 CSS pixels.
**Scope:** the current corporate homepage. Visual captures cover the desktop hero, Service section, and footer, plus the mobile hero and footer. Rendered DOM evidence additionally covers the About narrative, News, Culture, campaign band, Recruit, and Company / Tech Blog links. Linked destination pages and opened navigation states were not inspected.

WHERE combines photographic scale with restrained editorial typography. A colored aerial image surrounds a large, inset panel containing a much darker, blurred, nearly monochrome aerial view. The headline “Go to the 99%.” stretches across this panel, with a realistic Earth placed between its words and numerals on desktop. On mobile, the Earth becomes a separate, much larger focal point above the complete phrase.

Marcellus supplies the English navigation and section titles, Prata distinguishes the desktop campaign numerals, and Noto Sans JP carries the Japanese explanation. White content sections introduce broad margins, fine rules, and blue pill links. Small hand emoji make the actions approachable without changing the otherwise restrained palette. The page concludes with a muted oversized slogan, a prominent Contact panel, and a compact corporate sitemap.

This is a multi-section corporate homepage with service, company, editorial, and recruitment destinations. Its design depends on the progression between these sections as much as on the opening hero.

## How to Read This Reference

- **Measured** values come from the supplied rendered DOM and computed styles. Bounding rectangles are reported in CSS pixels, with long decimals rounded for readability.
- **Visual estimates** describe screenshot appearance where the relevant style or element was not included in the DOM sample. They are not pixel-sampled color measurements.
- **Calculated** values are derived from supplied measurements, such as container margins or apparent scaling.
- **Recommendations** are implementation choices for a new build. Breakpoints, motion durations, fallback behavior, and accessibility additions are explicitly separated from original-site findings.
- **Named tokens** are reusable aliases introduced here. The supplied root-variable sample does not expose a complete source design-token system.
- **Computed style is not always painted appearance.** Several navigation wrappers report default link blue while their rendered letters appear white or dark. Large fitted text also has bounding dimensions that differ substantially from its computed font size.
- The captures are settled samples, not a recording. They establish visible compositions but do not establish animation timing, hover behavior, globe rotation, or menu behavior.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Deep Navy | `#121d2a` | `--color-ink` | Measured on section headings and Japanese display copy. The footer visually resembles this navy; its background value was not separately supplied. |
| Action Blue | `#1556a5` | `--color-action` | Measured fill of About Us, View All, Service, Culture, and Recruit links; also measured on news category text. |
| Label Blue | `#12519c` | `--color-label` | Measured on Japanese section subtitles such as `提供するサービス`. Slightly darker than the action fill. |
| Contact Slate | `#252f3b` | `--color-contact` | Measured background of the large footer Contact link at both viewports. |
| White | `#ffffff` | `--color-white` | Measured on reversed text and the Company / Tech Blog card fills; the Service surface appears white. |
| Soft White | `#f5f5f5` | `--color-soft-white` | Present in rolling-navigation text variables and footer utility text. Ancestor effects can make supporting labels appear dimmer. |
| Body Charcoal | `#23242e` | `--color-body` | Measured Service and Culture paragraph color. |
| News Charcoal | `#222222` | `--color-news` | Measured news article title color. |
| Black Foundation | `#000000` | `--color-base` | Measured body background and the darkest visible hero regions. It is not the fill of every section. |
| Pale Gray | Approximately `#efefef` | `--color-muted-surface` | Visual estimate for the area surrounding the lower Company / Tech Blog cards. |
| Fine Divider | Approximately `#d7d9db` on white | `--color-line` | Recommended approximation of the thin Service divider; its exact source color was not supplied. |

The yellow accents are rendered emoji, including 👉, 🙋, and 👋. Their color and shape depend on the platform emoji font. Do not treat a particular yellow hex value as a measured brand token.

The hero's dark appearance comes from photographic content and substantial darkening. Blur is visible, but the evidence does not identify whether it comes from a processed asset, CSS filtering, a backdrop effect, or a combination. For an adaptation, a grayscale image layer with approximately 6px blur and a dark overlay is a reasonable starting point, not a recovered source formula.

### Theme Presets

No theme picker or alternate palette controls were observed. Light and dark surfaces coexist along the same page. Preserve this section-based contrast rather than interpreting the screenshots as separate light-mode and dark-mode themes.

## Tokens — Typography

### Marcellus — English Editorial Type

**Measured family declaration:** `Marcellus, 'Marcellus Placeholder', serif`.

Marcellus appears in the navigation, section names, pill-link labels, large campaign words, Contact title, and footer utilities. Its regular weight gives the page a composed, editorial tone even at very large sizes. Most observed English text uses weight `400`.

Use this family deliberately across both large headings and small navigation. Replacing only the hero font would miss the continuity between the opening statement and the footer.

### Prata — Campaign Numerals

**Measured family declaration:** `Prata, 'Prata Placeholder', serif`.

The desktop hero's `99%.` is a separate Prata element at 130px, paired with 150px Marcellus words. The repeated campaign band uses the same two-family relationship. Both have `-0.02em` tracking.

The mobile hero differs: its entire phrase is one Marcellus element. Do not automatically preserve the desktop Prata split in that mobile composition.

### Noto Sans JP — Japanese Content

**Measured family declaration:** `'Noto Sans JP', 'Noto Sans JP Placeholder', sans-serif`.

Japanese display copy and subtitles generally use weight `700`. Service and Culture paragraphs use weight `400`, while the long About narrative uses weight `700` with unusually generous line spacing.

Typical tracking is `0.04em` for headings, body copy, and news titles; section subtitles use `0.08em`. The About narrative uses `0.02em`, while its introductory heading uses `0.08em`.

### Type Scale

| Role | Desktop measurement | Mobile measurement | Weight / tracking |
| --- | --- | --- | --- |
| Header navigation | Marcellus `18px`; letter wrapper approximately `21.6px` high | Hidden in the supplied closed-header state | `400`; normal tracking |
| Header CONTACT | Marcellus `17px / 17px` | Not visible in the closed header | `400` |
| Hero words | Marcellus `150px / 150px` | Whole phrase retains computed `150px / 150px`, but fits a `326 × 49.05px` rendered rectangle | `400`; source `-3px` tracking |
| Hero numerals | Prata `130px / 130px` | Included in the single Marcellus phrase | `400`; source `-2.6px` tracking |
| Hero Japanese heading | Noto Sans JP `27px / 37.8px` | `24px / 33.6px` | `700`; `0.04em` |
| Hero explanation | Noto Sans JP `20px / 33px` | `14px / 23.1px` | `400`; `0.04em` |
| About introductory heading | Noto Sans JP `39px / 58.5px` | `24px / 36px` | `700`; `0.08em` |
| About narrative | Noto Sans JP `18px / 39.6px` | Same | `700`; `0.02em` |
| English section heading | Marcellus `64px / 76.8px` | `48px / 57.6px` | `400` |
| Japanese section subtitle | Noto Sans JP `16px / 19.2px` | `14px / 16.8px` | `700`; `0.08em` |
| Service / Culture statement | Noto Sans JP `40px / 52px` | `24px / 31.2px` | `700`; `0.04em` |
| Culture exclamation | Noto Sans JP `56px / 72.8px` | `32px / 41.6px` | `700`; `0.04em` |
| Service / Culture body | Noto Sans JP `15px / 27px` | Same | `400`; `0.04em` |
| News article title | Noto Sans JP `14px / 23.1px` | Same | `700`; `0.04em` |
| Hero news title | Noto Sans JP `14px / 23.1px` | `12px / 19.8px` | `700`; `0.04em` |
| News category | Noto Sans JP `12px / 14.4px` | Same | `700`; normal tracking |
| Blue pill label | Marcellus `20px / 20px` | Same | `400` |
| Company / Tech Blog title | Marcellus `64px / 64px` | `40px / 40px` | `400` |
| Contact title | Marcellus `64px / 64px` | `40px / 40px` | `400`; `0.03em` |
| Footer navigation | Marcellus `32px`; approximately `38.4px` letter wrapper | `20px`; `24px` wrapper | `400` |
| Footer navigation subtitle | Noto Sans JP `14px / 14px` | `11px / 11px` | `700`; `0.04em` |
| Footer utility / copyright | Marcellus `16px / 16px` | `12px / 12px` | `400` |

### Fitted Display Text

The mobile hero's 150px computed font size does **not** mean that 150px letters are visibly occupying the phone screen. Its rendered line box is about 49.05px high. Dividing that height by the 150px source line height gives an apparent scale of approximately `0.327`.

The footer slogan similarly retains a computed size of 179px at both widths, while its measured rectangle is approximately `1391.92 × 211.04px` on desktop and `341.93 × 51.84px` on mobile. These measurements indicate fitted or transformed display text; they do not disclose the complete fitting implementation.

For a new implementation, responsive font sizing is generally easier to maintain than reproducing an unknown transform chain. Match the visible widths and line proportions, and retain real text for accessibility.

## Tokens — Spacing & Shapes

The page uses several nested widths rather than a single universal container. Wide imagery and utility cards sit on a 1200px desktop frame, while Service copy sits within 994px. The footer extends almost edge to edge with 24px gutters.

### Spacing Scale

| Use | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Hero outside frame | Approximately `16px` on every side | Approximately `16px` | Visual estimate from both hero captures |
| Standard mobile content gutter | — | `24px` | Measured: `390 - 2 × 24 = 342px` content width |
| Hero copy inset | Right edge at `1360px`, 80px from viewport edge | Text starts at `32px` | Measured |
| Brand-lockup internal gap | `16px` | `16px` | Measured on the linked wrapper |
| Pill-link padding | `12px 24px` | `12px 24px` | Measured |
| Service column gap | `40px` | Single column | Calculated from two 477px tracks within 994px |
| About narrative block separation | `240px` between sampled paragraphs | `40px` | Calculated from paragraph rectangles |
| About final paragraph to CTA | `48px` | `64px` | Calculated |
| Company / Tech Blog card padding | `64px` | `32px` | Measured |
| Company / Tech Blog card gap | `40px` horizontally | `16px` vertically | Calculated from card rectangles |
| Contact padding | `40px` | `24px` | Measured |
| Footer navigation row gap | `24px` | `24px` | Calculated from link rectangles |
| Footer navigation to brand | `70px` | `40px` | Calculated |

### Border Radius

| Element | Value | Evidence |
| --- | --- | --- |
| Blue pills and header CONTACT | `100px` | Measured; effectively fully rounded |
| Company / Tech Blog cards | `8px` | Measured at both viewports |
| Footer Contact card | `17px` desktop; `12px` mobile | Measured |
| Hero panel | Approximately `18–20px` desktop; `16px` mobile | Visual estimate |
| Service white section's upper corners | Approximately `20px` | Visual estimate |
| Service image frame | Approximately `16px` | Visual estimate |
| Circular hand-icon wells | Approximately `64px` desktop; `48px` mobile | Visual estimate |

Rounded corners are selective. Major surfaces use moderate radii, action links use pills, and icon wells use circles. Paragraphs and news rows remain unboxed.

### Layout Measurements

| Element | At 1440 × 1000 | At 390 × 844 |
| --- | --- | --- |
| Document height | `8005.67px`, reported as 8006px | `7174.13px`, reported as 7174px |
| Visible hero panel | Approximately `1408 × 968px` | Approximately `358 × 812px` |
| Header brand link | `314 × 46px`, at `(56, 64)` | `225 × 46px`, at `(24, 26)` |
| Header CONTACT | `163.72 × 42px` | Not visible |
| Hero words | `636.30 × 150px`, beginning at `x = 164.55px` | Whole phrase approximately `326 × 49.05px` |
| Hero globe | Approximately `140–145px` diameter | Approximately `230px` diameter |
| Hero Japanese copy column | `366px` wide, at `x = 994px` | `326px` wide, at `x = 32px` |
| Hero news inner clipping window | `648 × 24px` | `302 × 36px` |
| Wide content frame | `1200px`, at `x = 120px` | `342px`, at `x = 24px` |
| Service text frame | `994px`, from `x = 223px` to `1217px` | `342px` |
| About narrative column | `371px`, at `x = 909px` | `342px`, at `x = 24px` |
| Blue section CTA | `200 × 48px` | `342 × 54px` |
| Company / Tech Blog card | `580 × 227.20px` each | `342 × 160px` each |
| Footer Contact card | `676 × 329.41px` | `342 × 172.45px` |
| Footer brand link | `400 × 87px` | `150 × 32.63px` |

The globe and hero-panel measurements are screenshot estimates. The other table entries are measured DOM rectangles or calculations from them.

## Components

### Persistent Header

**Role:** brand identity and access to the corporate sections.

The desktop header combines the WHERE symbol and wordmark with the JAXA STARTUP badge. Its linked wrapper is 314px wide. The six English links—About, Service, Culture, Company, Recruit, and News—sit toward the right, followed by `JP / EN` and an outlined CONTACT pill containing 👉.

Navigation text is 18px Marcellus. The About link's measured wrapper is approximately `74.72 × 37.59px`, surrounding a `50.72 × 21.59px` text rectangle. This corresponds to approximately 12px horizontal and 8px vertical surrounding space, although the sampled anchor itself reports zero padding.

The header is visible near the top in the scrolled captures. Its artwork and text appear white over the hero and dark over the light content near the top of the later captures. Exact positioning, color-switch logic, and scroll thresholds were not supplied.

On mobile, the combined brand link contracts to 225px and the desktop links, language display, and CONTACT pill disappear from the visible closed state. A compact menu glyph appears at the upper right, with thin horizontal strokes of unequal length. No opened menu, dismissal behavior, or focus handling was tested.

The visible JAXA STARTUP badge is part of this identity lockup. It is not evidence of website production authorship.

### Inset Photographic Hero

**Role:** communicate the relationship between satellite observation and unexplored property value.

Construct the visible hierarchy as five layers:

1. A colored aerial image reaching the viewport edges.
2. A large rounded inset panel with a dark, blurred aerial treatment.
3. The persistent brand and navigation overlay.
4. A prominent Earth and English campaign line.
5. Japanese supporting copy and a compact news window near the bottom.

On desktop, the campaign words, Earth, and Prata numerals form one horizontal composition centered around the viewport midpoint. The supporting Japanese copy sits in a separate lower-right column, while the news window anchors the lower left. The asymmetry leaves the main statement visually dominant.

On mobile, the globe occupies approximately 230px of a 390px-wide screen. It sits above the complete Marcellus phrase, followed by the bold Japanese heading and two right-aligned explanatory lines. A large dark area remains above the globe. Preserve that breathing room instead of moving every element directly beneath the header.

The observed Japanese heading is `不動産の99%は “見えない”`. It remains one line at the supplied phone width. Smaller widths and enlarged text were not tested.

### Hero News Window

**Role:** expose a recent update without competing with the main identity statement.

A thin white border encloses a slightly translucent-looking dark rectangle with a small corner radius. Its outer visual dimensions are approximately `680 × 48px` on desktop and `326 × 60px` on mobile. These outer measurements are estimates; the measured inner clipping windows are `648 × 24px` and `302 × 36px`.

Each entry combines a date and bold Japanese title. Desktop places them on one horizontal line; mobile places the date above the title. The mobile capture visibly clips the long title within the available width.

The DOM contains repeated groups of three news links. These are consistent with ticker construction and should not be interpreted as twelve simultaneously visible announcements. Captures show different active entries, but the interval, movement direction, and pause behavior remain unverified.

### About Narrative

**Role:** explain the company's satellite-data and property-discovery premise.

The desktop DOM places a bold introductory statement near the left of a 1120px-wide region. Three subsequent paragraphs occupy a narrow, right-aligned 371px column. Their 18px type uses a 39.6px line height, and measured gaps between paragraphs are 240px. The result is a deliberately slow reading cadence across a tall section.

At 390px, the heading and paragraphs share a 342px column with 24px gutters. Paragraph gaps become 40px, but the 18px body size and generous line height remain. The final About Us pill grows from `200 × 48px` to `342 × 54px`.

These positions are established by DOM evidence. The supplied captures do not show this section's complete imagery or any possible relationship between scrolling and its visual layers.

### Bilingual Section Heading

**Role:** pair an editorial English section name with a compact Japanese explanation.

Use a regular Marcellus title and a small, bold blue Japanese subtitle preceded by a blue dot. Desktop Service and Recruit place the subtitle beside the English heading. News and Culture use a subtitle beneath the English heading in the supplied measurements.

On mobile, the section subtitles move below their English headings. The dot sits at the main content edge and the Japanese label starts approximately 16px farther right. English headings reduce from 64px to 48px; subtitles reduce from 16px to 14px.

The Service heading also introduces a thin horizontal divider spanning its 994px text frame. Do not add an identical rule to every heading without checking the individual section.

### News Index

**Role:** provide an editorial overview of five recent updates.

Desktop separates a left heading / View All area from a 920px-wide list beginning at `x = 400px`. Rows contain a date, a compact blue outlined category capsule, and a bold Japanese article title. Thin rules divide entries. Measured row heights are approximately 71px for a one-line title and 94px for a two-line title, with an additional 8px between sampled link rectangles.

Mobile places the section heading above the list and View All below it. Date and category remain together above each title. The row width becomes 342px; measured heights range from approximately 100px to 146px as titles wrap.

The categories `ニュース` and `イベント` share the same restrained blue treatment. The list does not use article thumbnails, elevated cards, or a separate accent color for each category in the supplied evidence.

### Blue Pill Link

**Role:** a consistent route to a section's full page.

The standard pill is `200 × 48px`, filled with `#1556a5`, padded `12px 24px`, and rounded to 100px. A 20px Marcellus label sits left; an approximately 18px emoji sits near the right edge. The visible labels include About Us, View All, Service, Culture, and Recruit.

On mobile, the links fill the 342px content column and become 54px high. Label size remains 20px. This is a change in target size and width, not a uniform scaling of the desktop component.

The Culture destination uses `/philosophy`. Its desktop CTA reads Culture, while the mobile CTA reads Philosophy. Preserve this as an observed content difference; do not infer different destinations.

### Service Section

**Role:** introduce the off-market property-search AI named WHERE.

The desktop capture shows a white section with rounded upper corners. A centered 994px text frame contains the bilingual heading, divider, and a two-column introduction. The left column carries the bold statement `宇宙から 地球の不動産市場を 変える。` at `40px / 52px`. The right column is 477px wide and contains a `15px / 27px` paragraph followed by the blue Service pill.

Below the text, a larger image frame expands to approximately 1200px. It contains a dramatically cropped Earth toward the right and a small bright point toward the left against a deep-blue-to-black scene. A dark border and rounded corners give the image a defined boundary without a shadow.

Mobile DOM positions establish a single column: heading, 24px statement, a substantial intervening region, body copy, and full-width CTA. The gap between the statement and paragraph is about 268px, consistent with an intervening media region. Its exact mobile crop was not supplied and should be verified before reproduction.

### Culture Section

**Role:** articulate the company's spirit through the quoted exclamation `｢ おっ！」` and the idea of a turning point.

The desktop text begins at the same `x = 223px` alignment as Service. The quoted exclamation is 56px bold Japanese type, followed by a 40px statement, a 15px paragraph, and a blue Culture link. The body column is 497px wide.

Mobile reduces the exclamation to 32px and the statement to 24px. A large region separates the statement from the paragraph in the measured layout. Its content is not visible in the supplied captures, so no particular illustration, photograph, or animation can be specified from this evidence.

### Repeated Campaign Band

**Role:** reintroduce the main phrase between Culture and Recruit.

A full-width section, measured at 240px high in both viewports, contains repeated copies of the Marcellus words and Prata numerals. Desktop uses `150px / 130px` type; mobile uses `81px / 71px`. The sampled desktop DOM contains five copies, while mobile contains three.

This establishes a repeated horizontal composition extending beyond the viewport. It does not establish a verified scrolling speed or an animation duration. Keep only one accessible reading of the phrase if implementing decorative duplicates.

### Recruit Section

**Role:** connect the company's ambition with recruitment.

The English heading and Japanese subtitle lead into bold Japanese copy. Desktop uses 40px type with a 56px line height for the recruitment statement. Mobile uses 24px with a 31.2px line height and additional intentional line breaks.

A full-width, text-empty section between the statement and CTA measures 260px high on desktop and 120px on mobile. The supplied evidence does not expose its imagery. The blue Recruit pill links to `/recruit`; the separate footer link `募集職種` points to the observed external recruitment destination.

### Company / Tech Blog Link Cards

**Role:** large, clearly separated routes to company information and technical writing.

Two white cards sit on a pale-gray region. Desktop places them side by side at `580 × 227.20px`, separated by 40px. Each has 64px padding, an 8px radius, a large Marcellus title, a blue Japanese subtitle with a dot, and a blue circular hand-icon well toward the right.

Mobile stacks the cards with a 16px gap. Each becomes `342 × 160px` with 32px padding and 40px titles. The circular action marker sits toward the lower-right portion of the card.

Company links to `/company`. Tech Blog links to `https://zenn.dev/p/where`. These destinations were observed as links, not opened or analyzed.

### Footer Contact Panel

**Role:** the most prominent contact destination in the closing section.

The entire slate panel is a link to `/contact`. Desktop dimensions are `676 × 329.41px`, with 40px padding and a 17px radius. A 64px Marcellus Contact title sits above `お問い合わせ`, while a white circular well containing 👋 occupies the upper right. A bold Japanese tagline sits near the lower edge and is visually right-aligned on desktop.

Mobile moves this panel before the sitemap and reduces it to `342 × 172.45px`, with 24px padding and a 12px radius. The title becomes 40px, the hand becomes approximately 18px within a smaller circle, and the tagline becomes 13px and left-aligned.

The panel's hierarchy comes from size, spacing, and slate-on-navy contrast. It has no visible shadow or gradient fill.

### Footer Sitemap and Utility Row

**Role:** repeat the main corporate destinations and finish with identity and legal links.

A very large, low-contrast “Go to the 99％” spans the top of the dark footer. It is decorative in appearance; its underlying computed text color is white, so the final muted treatment likely involves an effect outside the sampled text node. The exact opacity was not supplied.

Desktop places a six-link sitemap at left and Contact at right. The sitemap forms three columns and two rows, with 32px English titles and smaller, dimmed Japanese descriptions. The white WHERE logo appears below at 400px wide.

Mobile keeps the three-column, two-row sitemap but reduces the English text to 20px and Japanese descriptions to 11px. The Contact panel precedes it, and the logo reduces to 150px wide.

A thin rule separates the main footer from Privacy Policy, `募集職種`, `JP / EN`, and `©2026 WHERE Inc.`. Desktop distributes these across a single row; mobile centers the utility links and places copyright on its own line. The page title and copyright support the site's WHERE identity; the supplied original-page evidence contains no named production credits.

## Tokens — Motion & Interaction

| Treatment | Established evidence | Limitation |
| --- | --- | --- |
| Persistent header | Header remains near the top in hero and scrolled captures; light and dark treatments are visible | Positioning strategy, threshold, and transition duration are not supplied |
| Rolling navigation structure | Link text is split into letters and includes `rolling-text-inner` style fragments | Hover activation, letter delay, direction, and easing were not exercised |
| Hero news ticker structure | Repeated three-item groups inside a clipped window; different entries appear in the captures | No verified interval, movement direction, pause, or manual controls |
| Repeated campaign band | Multiple copies extend horizontally beyond a 240px-high section | Continuous movement is not proven by the still evidence |
| Hero Earth | A shaded photographic globe is visible at both widths | Rotation, pointer response, rendering technology, and frame rate are unknown |
| Service Earth scene | Cropped globe and bright point are visible | Static image, video, canvas, or another rendering method is not identified |
| Mobile menu | Closed menu glyph is visible | Open state, animation, focus behavior, and dismissal are unverified |
| Language display | `JP / EN` is visible in desktop header and footer utilities | Language-switch behavior and destination are unverified |
| Section links | Destination URLs are present in rendered anchors | Destination-page behavior was not inspected |

The sampled elements often report `animation: none` and a generic `transition: all`. These values do not establish the absence of animation on ancestors, pseudo-elements, or JavaScript-controlled layers, and they do not provide usable motion timings.

**Recommended motion for an adaptation:** use short, approximately 160–200ms color or opacity feedback for links. If adding a rolling-text effect, keep one stable accessible label and disable decorative movement for reduced motion. Use a static globe and static news item as complete fallback states. These are recommendations, not recovered original values.

## Surfaces

| Layer | Appearance | Function |
| --- | --- | --- |
| Outer hero canvas | Colored aerial photography | Establishes geographic context around the inset panel |
| Hero panel | Darkened, blurred, nearly monochrome aerial image | Supports large white type and the brighter Earth |
| Editorial content | White or very pale neutral surfaces | Provides a quiet background for dense Japanese explanation |
| News rows | Mostly unboxed content with thin separators | Preserves editorial scanning and avoids card density |
| Blue action | Solid blue pill or circular well | Gives routes a consistent, compact visual identity |
| Utility-card region | Pale-gray surround with white cards | Separates Company and Tech Blog from the narrative |
| Footer canvas | Deep navy | Creates a strong closing section |
| Contact panel | Measured `#252f3b` slate | Separates the primary footer action through tonal contrast |

There is no visible general-purpose elevation system. Structure comes from surface changes, borders, typography, and spacing. Restrict the blurred photographic treatment to the opening imagery rather than applying glass effects to ordinary content cards.

## Imagery

The defining imagery moves between two scales: dense urban aerial photography and an isolated view of the entire Earth. This directly supports the site's satellite-data and property context.

The hero Earth is photographic and softly shaded, with blue oceans, green and tan land, and white cloud patterns. It remains fully visible rather than being cropped into a background rectangle. Desktop uses it almost as punctuation inside the headline; mobile gives it the visual importance of a separate illustration.

The Service scene reverses that treatment: the Earth becomes extremely large and is intentionally cropped by a wide image frame. A small luminous point and dark-blue field supply scale and direction. No motion or rendering technology should be inferred from this still alone.

Brand marks remain crisp and high contrast. The WHERE symbol, wordmark, and JAXA STARTUP badge should be treated as supplied identity assets when authorized. Hand emoji provide a small human accent; they do not constitute a full illustration system.

### Observed Asset References

No image source URLs, filenames, font-file URLs, or canvas resource identifiers were included in the supplied evidence. The following references describe visible assets without inventing paths.

| Asset | Evidence | Reuse guidance |
| --- | --- | --- |
| WHERE symbol and wordmark | Desktop and mobile headers; both footer captures | Use authorized logo artwork; preserve proportions and light / dark variants |
| JAXA STARTUP badge | Desktop and mobile header lockups | Preserve the observed lockup only where its use is appropriate and authorized |
| Colored aerial background | Both hero captures | Choose a detailed overhead urban image with enough resolution for the surrounding frame |
| Dark blurred aerial layer | Both hero captures | Preserve geographic texture while reducing contrast behind text |
| Isolated Earth | Both hero captures | Use a realistic transparent-background globe or equivalent render; keep the mobile silhouette complete |
| Large cropped Earth scene | Desktop Service capture | Preserve the large right-side crop and small bright point; mobile crop remains unverified |
| Hand emoji | Header contact, section links, utility cards, footer contact | Use emoji rendering or an explicitly supplied equivalent; do not claim an exact platform-independent appearance |

## Layout & Responsive Behavior

The observed page sequence is hero → About narrative → News → Service → Culture → repeated campaign band → Recruit → Company / Tech Blog → footer. Desktop and mobile retain this information architecture while changing local composition and emphasis.

| Area | Desktop behavior | Mobile behavior |
| --- | --- | --- |
| Header | Full navigation, language display, outlined CONTACT | Compact brand and menu glyph |
| Hero headline | Marcellus words, inline Earth, Prata numerals | Large Earth above one fitted Marcellus phrase |
| Hero explanation | Separate lower-right column | Stacked beneath the phrase, with right-aligned explanatory lines |
| Hero news | Date and title share a horizontal line | Date above a clipped title |
| About | Narrow right-side prose with 240px paragraph separations | Full content column with 40px separations |
| News | Heading / CTA sidebar beside article rows | Heading, rows, then full-width View All |
| Section headings | Some labels inline, some below | Japanese labels below English headings |
| Service | Two-column introduction, larger media below | Single-column text with an intervening media-sized region |
| Section CTAs | `200 × 48px` | `342 × 54px` |
| Utility cards | Two columns | Two stacked cards |
| Contact | Right of the footer sitemap | Before the sitemap |
| Footer navigation | Three columns, 32px English labels | Three columns retained, 20px English labels |
| Footer utilities | One distributed row | Centered links with copyright below |

The source breakpoint values are not available. Two endpoints establish the compositions but not the exact width at which each transition occurs. The Quick Start uses a recommended 1100px breakpoint to avoid crowding the desktop header; this is not a measured source breakpoint.

Use viewport-relative hero height with a minimum content height so the globe, copy, and news remain reachable on short screens. The supplied phone capture fits the inset hero within 844px, but landscape orientation, browser chrome changes, text enlargement, and narrower phones were not tested.

Do not copy the document heights as fixed CSS heights. They describe these content and viewport samples, not a reusable page-length token.

## Do’s and Don’ts

### Do

- Preserve the colored aerial edge around the dark inset hero.
- Keep the Earth fully visible in the hero and deliberately cropped in the Service scene.
- Pair regular Marcellus English typography with bold Japanese headings and calm Japanese body copy.
- Use Prata for the separately measured desktop campaign numerals and campaign-band numerals.
- Keep Action Blue `#1556a5` consistent across the standard pill links.
- Maintain the distinction between 1200px wide media and 994px desktop text frames.
- Use bilingual section labels, small blue dots, and thin dividers where observed.
- Recompose the hero for mobile instead of uniformly shrinking the desktop layout.
- Expand section links to full width on mobile and move Contact before the footer sitemap.
- Keep news entries editorial, with dates, restrained categories, and readable title wrapping.

### Don't

- Don't turn every section into a rounded, elevated feature-card grid.
- Don't substitute a generic sans-serif for all English titles and navigation.
- Don't use the mobile hero's computed 150px value as its intended visible type size.
- Don't copy default blue from sampled anchor wrappers into the visible navigation palette.
- Don't flatten the entire homepage into a single dark surface.
- Don't replace the yellow hand accents with a large competing accent-color system.
- Don't treat duplicated ticker or campaign text as separate user-facing content entries.
- Don't invent globe rotation, parallax, hover timing, or an opened menu from the still captures.
- Don't assume the desktop Service image crop also describes the unshown mobile media.
- Don't make the very dim footer watermark carry essential information.

## Recommended Implementation Additions

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

- Use semantic headings and one accessible hero heading. Give decorative globe and campaign duplicates empty alternatives or hide them from the accessibility tree as appropriate.
- Implement the mobile menu as a named button with an expanded state. If it opens a dialog, provide keyboard focus management, Escape dismissal, and focus restoration.
- Retain clear keyboard focus indicators for pills, card links, news links, and footer routes.
- Increase the contrast of meaningful footer subtitles. Their captured appearance is quite dim, especially at the measured 11px mobile size.
- Ensure ticker items remain readable and reachable without motion. Hide duplicate entries from assistive technology and offer the full news list through an ordinary link.
- Load the hero media efficiently, reserve image dimensions, and provide a still fallback for any future animated Earth treatment. Respect reduced-motion preferences.
- Validate hero wrapping at narrower widths and at enlarged text settings. Prefer content growth over clipping the Japanese heading or overlapping the news window.

## Agent Prompt Guide

### Quick Color Reference

- Editorial heading ink: measured `#121d2a`.
- Standard filled action: measured `#1556a5` with white text.
- Japanese section labels: measured `#12519c`.
- Service / Culture body: measured `#23242e`.
- Contact panel: measured `#252f3b`.
- White surfaces and reversed text: `#ffffff`.
- Pale-gray card surround: approximately `#efefef`, a visual estimate.
- Footer navy: visually close to the heading ink; use `#121d2a` as an adaptation.
- Hand accents: rendered emoji, with platform-dependent yellow coloring.

### Overall Prompt

“Create a multi-section Japanese corporate homepage for a company connecting satellite data with property discovery. Use a colored urban aerial image around a 16px-inset rounded hero, with a heavily darkened and blurred aerial layer inside. Set a large regular Marcellus campaign line across the center and use Prata for separate desktop numerals, placing a realistic Earth between the words and numbers. Put concise Japanese copy at the lower right and a thin outlined news window at the lower left. Continue through a spacious company narrative, editorial news list, white Service and Culture sections, recruitment, paired Company / Tech Blog links, and a deep-navy footer. Use Noto Sans JP for Japanese text, blue `#1556a5` pill links, fine rules, and small hand emoji. On mobile, enlarge and move the Earth above a single fitted headline, use 24px content gutters, make section links full width, and place the footer Contact panel before the three-column sitemap.”

### Example Component Prompts

1. **Hero:** “Build a 1440px desktop hero with approximately 16px outer clearance, a dark rounded aerial panel, white 150px Marcellus words, separate 130px Prata numerals, and an approximately 140px Earth between them. At 390px, use an approximately 230px Earth above a complete Marcellus phrase fitted to 326px. Keep the news window near the panel's bottom edge.”
2. **Service:** “Use a white section with rounded upper corners and a centered 994px text frame. Pair a 64px Marcellus Service heading with a small blue Japanese subtitle and dot. Add a thin rule, then a bold 40px Japanese statement at left and a 477px-wide paragraph / blue-pill group at right. Place a 1200px-wide framed Earth scene beneath.”
3. **News:** “Create a restrained news index with a heading and View All sidebar on desktop. Each row contains a date, small outlined blue category capsule, and bold 14px Japanese title with a fine separator. On mobile, put metadata above the title and move the full-width View All pill after the list.”
4. **Contact:** “Make the entire slate `#252f3b` panel a contact link. Use a large regular Marcellus Contact title, a small Japanese subtitle with a dot, a white circular waving-hand accent at upper right, and a short Japanese line near the bottom. Use 40px padding on desktop and 24px on mobile.”
5. **Footer:** “Use a deep-navy footer with an oversized, low-contrast campaign phrase. Place a three-column, two-row bilingual sitemap and white brand mark at left, with a large Contact panel at right. On mobile, put Contact first, retain the three-column sitemap, reduce the brand to 150px, and center utilities and copyright below a thin rule.”

## Quick Start

### CSS Custom Properties

This is a practical adaptation of the measured proportions, not the original stylesheet. It uses a conventional root font size and responsive text instead of reproducing the unknown fitting transforms. The breakpoint, hero filtering, media aspect ratios, focus treatment, and brighter footer captions are recommendations.

Load Marcellus, Prata, and Noto Sans JP separately. Supply authorized logo and Earth assets as images and an aerial image through `--aerial-image`; original asset URLs were not provided. Without those assets, the CSS supplies the layout and a dark fallback surface.

Expected structure: `.hero-title` contains `.hero-words`, an image with `.hero-globe`, and `.hero-percent`. `.service-grid` contains `.section-title`, `.service-lead`, `.service-copy`, and `.service-media`. `.footer-grid` contains `.footer-left` and `.contact-card`; the left region contains `.footer-nav` and `.footer-brand`. Header tone and scroll classes require separate state handling. Menu CSS covers only the observed closed control.

```css
:root {
  /* Measured colors, with explicitly chosen surface approximations. */
  --color-ink: #121d2a;
  --color-action: #1556a5;
  --color-label: #12519c;
  --color-contact: #252f3b;
  --color-body: #23242e;
  --color-news: #222222;
  --color-white: #ffffff;
  --color-soft-white: #f5f5f5;
  --color-base: #000000;
  --color-muted-surface: #efefef; /* Visual approximation. */
  --color-line: #d7d9db; /* Recommended divider approximation. */
  --color-footer-muted: #b5bdc6; /* Recommended readable caption color. */

  --font-display: 'Marcellus', serif;
  --font-numerals: 'Prata', serif;
  --font-body: 'Noto Sans JP', sans-serif;

  --text-section: 64px;
  --text-statement: 40px;
  --text-body: 15px;
  --text-pill: 20px;
  --tracking-body: 0.04em;
  --tracking-label: 0.08em;

  --gutter: 24px;
  --wide-width: 1200px;
  --copy-width: 994px;
  --radius-card: 8px;
  --radius-contact: 17px;
  --radius-pill: 100px;
  --aerial-image: none;
  --motion-feedback: 180ms ease-out; /* Recommendation. */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-body);
  background: var(--color-base);
  font: 400 var(--text-body) / 1.8 var(--font-body);
}

img { max-inline-size: 100%; }
a { color: inherit; }
button { font: inherit; }

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

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

.site-header {
  position: fixed;
  z-index: 20;
  inset: 64px 56px auto;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 46px;
  color: var(--color-white);
}

.site-header.is-scrolled { top: 32px; }
.site-header[data-tone='light'] { color: var(--color-ink); }

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 314px;
  min-height: 46px;
}

.brand img:first-child { width: 200px; }
.brand img:last-child { width: 98px; }

.primary-nav {
  display: flex;
  align-items: center;
  margin-inline-start: auto;
}

.primary-nav a {
  padding: 8px 12px;
  font: 400 18px / 1.2 var(--font-display);
  text-decoration: none;
}

.header-utilities {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-contact {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  min-height: 42px;
  padding: 12px 16px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font: 400 17px / 1 var(--font-display);
  text-decoration: none;
}

.menu-toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 8px;
  color: inherit;
  background: none;
  border: 0;
}

.hero-stage {
  padding: 16px;
  background: #101820 var(--aerial-image) center / cover;
}

.hero-panel {
  position: relative;
  isolation: isolate;
  min-height: max(760px, calc(100svh - 32px));
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 20px;
  color: var(--color-white);
  background: #080a0c;
}

/* Recommended approximation of the visible photographic treatment. */
.hero-panel::before,
.hero-panel::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.hero-panel::before {
  z-index: -2;
  inset: -12px;
  background: var(--aerial-image) center / cover;
  filter: grayscale(1) blur(6px);
}

.hero-panel::after {
  z-index: -1;
  inset: 0;
  background: rgb(0 0 0 / 68%);
}

.hero-title {
  position: absolute;
  top: 50%;
  inset-inline: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 0;
  transform: translateY(-50%);
  font-weight: 400;
  white-space: nowrap;
}

.hero-words {
  font: 400 150px / 1 var(--font-display);
  letter-spacing: -0.02em;
}

.hero-percent {
  font: 400 130px / 1 var(--font-numerals);
  letter-spacing: -0.02em;
  transform: translateY(12px);
}

.hero-globe {
  display: block;
  flex: 0 0 140px;
  width: 140px;
  height: 140px;
  object-fit: contain;
}

.hero-copy {
  position: absolute;
  right: 63px;
  bottom: 103px;
  width: 366px;
  letter-spacing: 0.04em;
}

.hero-copy h2 {
  margin: 0 0 10px;
  font-size: 27px;
  line-height: 1.4;
}

.hero-copy p {
  margin: 0;
  font-size: 20px;
  line-height: 1.65;
}

.hero-news {
  position: absolute;
  left: 23px;
  bottom: 23px;
  width: min(680px, calc(100% - 46px));
  min-height: 48px;
  padding: 11px 15px;
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: 5px;
  background: rgb(255 255 255 / 8%);
  text-decoration: none;
}

.hero-news-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.hero-news time {
  flex: 0 0 100px;
  font: 400 18px / 1.2 var(--font-display);
}

.hero-news-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 0.04em;
}

.light-panel {
  padding-block: 120px;
  background: var(--color-white);
  border-radius: 20px 20px 0 0;
}

.section-title {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin: 0;
  color: var(--color-ink);
  font: 400 var(--text-section) / 1.2 var(--font-display);
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-label);
  font: 700 16px / 1.2 var(--font-body);
  letter-spacing: var(--tracking-label);
}

.section-kicker::before {
  content: '';
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: 'heading heading' 'lead copy' 'media media';
  gap: 40px;
}

.service-grid > .section-title {
  grid-area: heading;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-line);
}

.service-lead {
  grid-area: lead;
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-statement);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

.service-copy {
  grid-area: copy;
  min-width: 0;
  letter-spacing: var(--tracking-body);
}

.service-copy p { margin: 0 0 16px; }

.service-media {
  grid-area: media;
  justify-self: center;
  width: min(1200px, calc(100vw - 48px));
  aspect-ratio: 12 / 5; /* Recommended; full source ratio unavailable. */
  margin: 40px 0 0;
  overflow: hidden;
  border: 6px solid var(--color-ink);
  border-radius: 16px;
  background: #07101f;
}

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

.pill-link {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: 200px;
  min-height: 48px;
  padding: 12px 24px;
  color: var(--color-white);
  background: var(--color-action);
  border-radius: var(--radius-pill);
  font: 400 var(--text-pill) / 1 var(--font-display);
  text-decoration: none;
  transition: opacity var(--motion-feedback);
}

.pill-link .hand { font-size: 18px; }

.utility-region {
  padding-block: 40px;
  background: var(--color-muted-surface);
}

.utility-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

.utility-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 227.2px;
  padding: 64px;
  border-radius: var(--radius-card);
  background: var(--color-white);
  text-decoration: none;
}

.utility-card-title {
  margin: 0;
  color: var(--color-ink);
  font: 400 64px / 1 var(--font-display);
}

.hand-circle {
  display: grid;
  place-items: center;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: var(--color-white);
  background: var(--color-action);
  font-size: 24px;
}

.site-footer {
  padding: 64px 24px 48px;
  color: var(--color-soft-white);
  background: var(--color-ink);
}

.footer-watermark {
  margin: 0 0 80px;
  color: var(--color-contact);
  font-family: var(--font-display);
  font-size: clamp(36px, calc((100vw - 48px) / 6.6), 211px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: 'links contact';
  gap: 40px;
}

.footer-left { grid-area: links; }

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.footer-nav a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  text-decoration: none;
}

.footer-nav-title {
  font: 400 32px / 1.2 var(--font-display);
}

.footer-nav-caption {
  color: var(--color-footer-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}

.footer-brand {
  display: block;
  width: 400px;
  max-width: 100%;
  margin-top: 70px;
}

.contact-card {
  grid-area: contact;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 329.4px;
  padding: 40px;
  border-radius: var(--radius-contact);
  background: var(--color-contact);
  color: var(--color-white);
  text-decoration: none;
}

.contact-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.contact-title {
  margin: 0;
  font: 400 64px / 1 var(--font-display);
  letter-spacing: 0.03em;
}

.contact-caption {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
}

.contact-card .hand-circle {
  color: var(--color-ink);
  background: var(--color-white);
}

.contact-tagline {
  margin: 0;
  text-align: right;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 0.04em;
}

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

.footer-utilities {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

.footer-bottom a { text-decoration: none; }
.footer-bottom p { margin: 0; }

/* Recommended keyboard treatment. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-action);
  outline-offset: 4px;
}

.hero-stage :focus-visible,
.site-footer :focus-visible,
.site-header :focus-visible {
  outline-color: currentColor;
}

@media (hover: hover) {
  .pill-link:hover { opacity: 0.88; }
  .footer-bottom a:hover { text-decoration: underline; }
}

/* Recommended breakpoint; source breakpoint was not supplied. */
@media (max-width: 1100px) {
  :root {
    --text-section: 48px;
    --text-statement: 24px;
    --radius-contact: 12px;
  }

  .site-header,
  .site-header.is-scrolled {
    inset: 26px 24px auto;
  }

  .brand { flex-basis: 225px; }
  .brand img:first-child { width: 137px; }
  .brand img:last-child { width: 72px; }
  .primary-nav,
  .header-utilities { display: none; }
  .menu-toggle { display: grid; margin-left: auto; }

  .hero-panel {
    min-height: max(740px, calc(100svh - 32px));
    border-radius: 16px;
  }

  .hero-title {
    top: auto;
    bottom: 204px;
    inset-inline: 15px;
    gap: 0.12em;
    transform: none;
    font-size: clamp(36px, calc((100vw - 64px) / 6.65), 86px);
  }

  .hero-words,
  .hero-percent {
    font: inherit;
    font-family: var(--font-display);
    line-height: 1;
    letter-spacing: -0.02em;
    transform: none;
  }

  .hero-globe {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 38px);
    width: 230px;
    height: 230px;
    transform: translateX(-50%);
  }

  .hero-copy {
    inset-inline: 15px;
    bottom: 107px;
    width: auto;
    text-align: right;
  }

  .hero-copy h2 {
    margin-bottom: 8px;
    font-size: 24px;
    text-align: center;
  }

  .hero-copy p { font-size: 14px; }

  .hero-news {
    inset-inline: 15px;
    bottom: 15px;
    width: auto;
    min-height: 60px;
    padding: 11px;
  }

  .hero-news-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .hero-news time { flex-basis: auto; font-size: 14px; }
  .hero-news-title { font-size: 12px; }

  .light-panel { padding-block: 64px 80px; }

  .section-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .section-kicker { font-size: 14px; }

  .service-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'heading' 'lead' 'media' 'copy';
    gap: 24px;
  }

  .service-grid > .section-title { padding-bottom: 24px; }

  .service-media {
    width: 100%;
    margin: 0;
    aspect-ratio: 16 / 10; /* Recommended mobile media proportion. */
  }

  .pill-link { width: 100%; min-height: 54px; }

  .utility-cards { grid-template-columns: 1fr; gap: 16px; }

  .utility-card {
    align-items: flex-start;
    min-height: 160px;
    padding: 32px;
  }

  .utility-card-title { font-size: 40px; }

  .utility-card .hand-circle {
    position: absolute;
    right: 16px;
    bottom: 16px;
  }

  .hand-circle {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    font-size: 18px;
  }

  .site-footer { padding-top: 48px; }
  .footer-watermark { margin-bottom: 40px; }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'contact' 'links';
  }

  .footer-nav a { gap: 9px; }
  .footer-nav-title { font-size: 20px; }
  .footer-nav-caption { font-size: 11px; }
  .footer-brand { width: 150px; margin-top: 40px; }

  .contact-card { min-height: 172.45px; padding: 24px; }
  .contact-title { font-size: 40px; }
  .contact-tagline { text-align: left; font-size: 13px; }

  .footer-bottom {
    flex-direction: column;
    gap: 25px;
    font-size: 12px;
  }

  .footer-utilities { justify-content: center; gap: 16px; }
}

/* Recommended fallback for narrow screens and enlarged text. */
@media (max-width: 359px) {
  .hero-copy h2 { font-size: 21px; }
  .footer-nav { column-gap: 12px; }
  .footer-nav-title { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .pill-link { transition: none; }
  .decorative-motion { animation: none; }
  html { scroll-behavior: auto; }
}
```

The CSS intentionally leaves the news item static and does not introduce globe rotation or rolling navigation. Those behaviors require separate evidence or an explicit implementation decision. Production markup should keep all content reachable when fonts, images, or scripts fail.

### Tailwind v4 Token Mapping

Optional mapping for a project already using Tailwind v4. Define the custom properties above first. This does not imply that the original website uses Tailwind.

```css
@theme inline {
  --color-where-ink: var(--color-ink);
  --color-where-action: var(--color-action);
  --color-where-label: var(--color-label);
  --color-where-contact: var(--color-contact);
  --color-where-body: var(--color-body);
  --color-where-surface: var(--color-white);
  --color-where-muted-surface: var(--color-muted-surface);

  --font-editorial: var(--font-display);
  --font-campaign-numerals: var(--font-numerals);
  --font-japanese: var(--font-body);

  --text-section: var(--text-section);
  --text-statement: var(--text-statement);
  --text-body-copy: var(--text-body);
  --text-action-label: var(--text-pill);

  --spacing-page-gutter: 24px;
  --spacing-pill-width: 200px;
  --radius-utility-card: var(--radius-card);
  --radius-contact-panel: var(--radius-contact);
  --radius-action-pill: var(--radius-pill);
}
```

## Sources & Evidence

- **Original and final website:** [WHERE homepage](https://pntwhere.com/). Both supplied URLs are identical, and the recorded HTTP status is 200.
- **Capture timestamp:** `2026-09-12T14:53:03.908Z`, corresponding to September 12, 2026 at 23:53:03.908 JST.
- **Desktop evidence:** 1440 × 1000 CSS pixels; supplied hero, Service, and footer captures, plus rendered text, destination links, computed typography, colors, and element rectangles across the homepage. Recorded document height: approximately 8006px.
- **Mobile evidence:** 390 × 844 CSS pixels; supplied hero and footer captures, plus corresponding rendered DOM measurements across the homepage. Recorded document height: approximately 7174px.
- **Observation procedure:** the supplied browser record describes an initial observation of at least five seconds, readiness checks for layout and visible-image decoding, and traversal through intermediate scroll positions. These checks have finite time limits and do not prove that all delayed content was observed.
- **Interaction scope:** navigation destinations and closed control states were recorded. No supplied interaction trace establishes opened menus, language switching, hover effects, form behavior, animation timing, or globe interaction.
- **Limitations:** image resource URLs, complete source stylesheets, exact responsive breakpoints, ancestor opacity / transform chains, and detailed middle-section imagery were not supplied. The DOM and screenshots are sampled evidence rather than a frame-by-frame record. SharedWorkers and service workers were disabled during the supplied inspection.

This reference describes the current homepage represented by the supplied original-page captures and rendered evidence. Measured styles, visual estimates, calculated dimensions, and recommended implementation choices are identified separately.