:root {
  /* Warm off-white is the page's dominant canvas; pure white would make the
     natural-material photography and Mincho typography feel unnecessarily clinical. */
  --paper: #f3f0e8;
  /* The slightly deeper paper tone separates sections without introducing a new hue. */
  --paper-deep: #e9e4d8;
  /* Cards use a warmer white than #fff so they remain part of the same material palette. */
  --white: #fffdf8;
  /* Near-black brown reduces glare and echoes timber rather than generic UI black. */
  --ink: #211c16;
  /* Secondary copy must recede from headings while retaining readable contrast. */
  --muted: #645d52;
  /* Borders are deliberately quiet: they define structure without making the page look boxed in. */
  --line: #d4cdbf;
  /* Wood brown is the editorial accent shared by labels, rules, and numbering. */
  --wood: #865b35;
  /* The lighter wood tone is reserved for lower-emphasis accents such as scrollbars. */
  --wood-light: #c89b6a;
  /* Green carries the re-trust brand and distinguishes actionable elements from editorial accents. */
  --green: #2c5046;
  /* Deep green supplies sufficient contrast for large dark surfaces and hero fallbacks. */
  --green-deep: #213a33;
  /* Soft green supports badges and contextual highlights without competing with CTAs. */
  --green-soft: #dce7df;
  /* This LINE green was selected for text/background contrast; do not replace it with a brighter brand swatch blindly. */
  --line-accessible: #087a3d;
  /* Focus color is intentionally darker than the regular brand green so the outer focus ring remains visible. */
  --focus: #153d34;
  /* Mincho is reserved for narrative and hierarchy, matching the residential/editorial tone. */
  --serif: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif;
  /* The sans stack prioritizes Japanese system fonts for dependable body-copy legibility and loading. */
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP", system-ui, sans-serif;
  /* 1120px keeps Japanese line lengths and paired media blocks readable on wide screens. */
  --container: 1120px;
  /* Total horizontal gutter remains fluid but bounded: 20-24px per side on ordinary viewports. */
  --gutter-total: clamp(40px, 6vw, 48px);
  /* Decision: fluid-spacing
     Section and layout spacing scale continuously with viewport width; do not replace
     these tokens with binary desktop/mobile constants. The user explicitly questioned
     desktop/mobile-only spacing and chose viewport-proportional spacing where possible. */
  /* Fixed micro-spacing tokens keep local rhythm consistent; fluidity belongs at section/layout scale. */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  /* Section breathing room scales from compact mobile to spacious desktop without a visual jump. */
  --space-section: clamp(64px, 10vw, 112px);
  /* Major two-column gaps use a separate fluid range because content relationships are tighter than section boundaries. */
  --space-layout: clamp(40px, 6vw, 96px);
  /* Heading-to-content spacing scales independently to preserve hierarchy at intermediate widths. */
  --space-heading: clamp(32px, 5vw, 50px);
  /* The soft, broad shadow lifts photographs/cards while avoiding a generic high-contrast app-card look. */
  --shadow: 0 20px 60px rgba(33, 28, 22, .12);
}

/* Include generated content in element dimensions so borders and decorative marks cannot create overflow. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Native smooth anchor movement is retained for sighted users; reduced-motion overrides it below. */
html {
  scroll-behavior: smooth;
  /* Anchor targets clear the 88px desktop header instead of being hidden beneath it. */
  scroll-padding-top: 92px;
}

/* Establish the site's warm editorial base and comfortable Japanese body-copy rhythm. */
body {
  /* Remove browser default page inset so full-bleed sections align exactly with the viewport. */
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  /* 16px is the accessibility-safe baseline; hierarchy is created around it instead of shrinking body text. */
  font-size: 16px;
  /* Japanese body copy needs generous leading; this is intentional, not accidental whitespace. */
  line-height: 1.82;
  /* Decision: japanese-phrase-wrapping
     Strict punctuation rules prevent prohibited line starts/ends, while auto-phrase asks capable
     engines to wrap Japanese prose at phrase boundaries instead of splitting words and verbs. */
  line-break: strict;
  /* Unsupported engines safely fall back to normal Japanese wrapping; critical headings still use explicit spans. */
  word-break: auto-phrase;
  /* Slight tracking helps dense Japanese sans copy breathe without looking display-spaced. */
  letter-spacing: .025em;
  /* Improve text rendering on WebKit without changing metrics or requiring webfont downloads. */
  -webkit-font-smoothing: antialiased;
}

/* Form controls inherit the same Japanese sans stack rather than reverting to platform defaults. */
body,
button,
input,
select,
textarea {
  font-family: var(--sans);
}

/* Images remain responsive by default and preserve intrinsic proportions unless a component explicitly frames them. */
img {
  /* Block layout removes the inline-image baseline gap that would create unexplained bottom whitespace. */
  display: block;
  max-width: 100%;
  height: auto;
}

/* Links inherit their section's palette; underline offset prevents Japanese glyphs from colliding with decoration. */
a {
  color: inherit;
  text-underline-offset: .22em;
}

/* Suppress the platform tap flash because every interactive element supplies its own visual feedback/focus state. */
button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
}

/* One strong, universal keyboard-focus treatment must remain visible on both light and dark surfaces. */
:focus-visible {
  /* White inner outline plus dark outer ring creates contrast regardless of the underlying section color. */
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus);
}

/* Normalize only top margins; component-specific bottom spacing remains explicit and auditable. */
h1,
h2,
h3,
h4,
p,
figure,
ul,
ol {
  margin-top: 0;
}

/* Display headings use Mincho to signal narrative importance; body/UI text remains sans for scanning. */
h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 600;
  /* Compact display leading preserves the heading silhouette without causing glyph collisions. */
  line-height: 1.45;
  letter-spacing: .045em;
  /* Balance headings where supported; explicit no-wrap decisions below still take precedence. */
  text-wrap: balance;
}

/* Main section headings scale fluidly instead of jumping at device-category breakpoints. */
h2 {
  margin-bottom: 20px;
  font-size: clamp(2rem, 4vw, 3.15rem);
}

/* Decision: heading-phrase-integrity
   Protect only authored Japanese phrase units, not whole headings. This preserves meaningful
   wrapping on narrow screens while preventing character-level breaks inside words. */
.heading-phrase {
  /* Inline-block keeps adjacent phrase spans on one line whenever they fit. */
  display: inline-block;
  /* A phrase may move as a unit at wbr, but its internal characters must stay together. */
  white-space: nowrap;
}

/* Third-level headings remain clearly above 16px body copy without dominating their cards. */
h3,
h4 {
  font-size: 1.3rem;
}

/* Shared content rail: fluid gutters until the readable 1120px maximum is reached. */
.container {
  width: min(calc(100% - var(--gutter-total)), var(--container));
  margin-inline: auto;
}

/* Keep the skip link in the accessibility tree while visually hiding it until keyboard focus. */
.skip-link {
  /* Fixed positioning ensures the control remains reachable even after the page has scrolled. */
  position: fixed;
  top: 12px;
  left: 12px;
  /* It must appear above sticky navigation and mobile CTAs when revealed. */
  z-index: 1000;
  /* The 1px clipped box is a standard visually-hidden pattern that does not remove focusability. */
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-radius: 2px;
  background: var(--white);
  color: var(--green-deep);
  font-weight: 700;
}

/* Restore a normal, high-contrast target as soon as the skip link receives keyboard focus. */
.skip-link:focus {
  width: auto;
  height: auto;
  padding: 12px 18px;
  overflow: visible;
  clip-path: none;
}

/* Visually hidden copy remains available to assistive technology without affecting card geometry. */
.visually-hidden {
  /* Absolute positioning removes the announcement from the visible flow. */
  position: absolute;
  /* A one-pixel box is retained in the accessibility tree. */
  width: 1px;
  height: 1px;
  padding: 0;
  /* Clipping prevents the text from painting outside that box. */
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  /* No visible border or wrapping artifact should remain. */
  border: 0;
  white-space: nowrap;
}

/* Header begins over the hero to preserve the full-bleed opening composition. */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  /* Stay above hero media but below the skip link and mobile action bar. */
  z-index: 50;
  /* The fixed 88px desktop height informs scroll-padding and header control sizing. */
  height: 88px;
  /* Translucent dark backing protects white navigation over variable hero photography. */
  background: rgba(24, 29, 24, .8);
  color: var(--white);
  /* Only paint properties transition; layout position changes immediately to avoid header drift. */
  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
}

/* After leaving the hero, convert the header into a legible fixed utility surface. */
.site-header.is-scrolled {
  position: fixed;
  /* Near-opaque warm white preserves the palette while letting backdrop blur feel lightweight. */
  background: rgba(255, 253, 248, .96);
  box-shadow: 0 1px 18px rgba(33, 28, 22, .12);
  color: var(--ink);
  backdrop-filter: blur(12px);
}

/* Align brand, navigation, phone, and CTA on one stable desktop header row. */
.header-inner {
  display: flex;
  align-items: center;
  /* Match the header's declared height even if children introduce intrinsic height. */
  min-height: 88px;
  gap: 30px;
}

/* Treat the wordmark as a compact two-line identity rather than a generic text link. */
.brand {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  /* Never let navigation pressure compress the identity. */
  flex: 0 0 auto;
  /* 44px minimum preserves an adequate pointer target around the wordmark. */
  min-height: 44px;
  color: inherit;
  font-family: var(--serif);
  font-size: 1.14rem;
  line-height: 1.25;
  letter-spacing: .1em;
  text-decoration: none;
}

/* The brand's supporting line is intentionally understated so it does not compete with the name. */
.brand small {
  display: block;
  margin-top: 5px;
  font-family: var(--sans);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .21em;
  opacity: .84;
}

/* Desktop navigation consumes only its content width and is pushed toward the action group. */
.header-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Each navigation label gets a 44px-high target even though its visible text is compact. */
.header-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
}

/* Preserve conventional link feedback without adding motion to primary navigation. */
.header-nav a:hover {
  text-decoration: underline;
}

/* Keep contact channels grouped as a distinct action cluster. */
.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Phone context and number stack vertically for quick recognition at desktop widths. */
.header-phone {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 52px;
  text-decoration: none;
  line-height: 1.25;
}

/* The phone helper label recedes; the number below remains the actionable content. */
.header-phone span {
  font-size: .66rem;
  letter-spacing: .12em;
  opacity: .8;
}

/* Give the phone number modest emphasis without overpowering the primary CTA button. */
.header-phone strong {
  margin-top: 4px;
  font-size: .97rem;
  letter-spacing: .06em;
}

/* The hero is a full-bleed visual stage with copy anchored to the lower edge. */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* 720px is the non-supporting-browser fallback; keep it before the fluid svh declaration. */
  min-height: 720px;
  /* Clamp prevents short viewports from crushing the composition and tall screens from stretching it excessively. */
  min-height: clamp(720px, 94svh, 900px);
  /* Clip absolutely positioned media and shade layers to the hero boundary. */
  overflow: hidden;
  color: var(--white);
  /* Deep green remains a branded fallback while the hero image loads or is unavailable. */
  background: var(--green-deep);
}

/* Both visual layers fill the hero independently so copy flow never depends on image dimensions. */
.hero-image,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Crop the hero photograph to the stage while preserving the approved desktop focal balance. */
.hero-image {
  object-fit: cover;
  /* 48% vertical position holds the relevant interior detail in frame on wide screens. */
  object-position: center 48%;
}

/* Two gradients solve separate readability problems: left-side copy contrast and top/bottom exposure variation. */
.hero-shade {
  background:
    linear-gradient(90deg, rgba(25, 25, 19, .84) 0%, rgba(25, 25, 19, .56) 48%, rgba(25, 25, 19, .12) 78%),
    linear-gradient(180deg, rgba(22, 18, 13, .28) 0%, transparent 36%, rgba(22, 18, 13, .36) 100%);
}

/* Raise hero copy above media layers and reserve space for both overlaid header and lower breathing room. */
.hero-inner {
  position: relative;
  z-index: 2;
  padding-block: 170px 90px;
}

/* Shared eyebrow treatment makes section context scannable without competing with Mincho headings. */
.hero-kicker,
.section-kicker {
  margin-bottom: 20px;
  color: var(--wood);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Hero eyebrow switches to a light wood tone so it remains visible on the dark photograph. */
.hero-kicker {
  color: #f0d5b3;
}

/* Keep the primary promise within a readable measure and scale it fluidly across desktop widths. */
.hero h1 {
  max-width: 13em;
  margin-bottom: 26px;
  color: var(--white);
  font-size: clamp(2.65rem, 6vw, 5.1rem);
  /* Tighter leading lets the large Japanese headline read as one composed unit. */
  line-height: 1.28;
  /* Text shadow is functional contrast insurance against locally bright image regions. */
  text-shadow: 0 3px 26px rgba(0, 0, 0, .32);
}

/* Inline-block spans preserve authored phrase groups without forcing every span onto its own line. */
.hero h1 span {
  display: inline-block;
}

/* The lead is wide enough for natural Japanese wrapping but remains subordinate to the hero headline. */
.hero-lead {
  max-width: 42rem;
  margin-bottom: 0;
  color: rgba(255, 253, 248, .92);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
}

/* CTA rows wrap gracefully before controls become too narrow to read or tap. */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* Separate hero actions from the promise by one deliberate rhythm step. */
.hero-cta {
  margin-top: 36px;
}

/* Shared button foundation prioritizes 44px-plus targets, centered labels, and restrained motion. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  /* Horizontal padding supports Japanese labels without relying on a fragile fixed width. */
  padding: 14px 24px;
  /* Transparent border reserves geometry so hover/variant borders cannot shift layout. */
  border: 1px solid transparent;
  /* Near-square corners match the restrained architectural visual language. */
  border-radius: 2px;
  font-size: .93rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.45;
  text-align: center;
  text-decoration: none;
  /* Restrict transitions to visible interaction feedback; do not use broad `transition: all`. */
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

/* A small lift confirms hover affordance without introducing distracting animation. */
.btn:hover {
  transform: translateY(-2px);
}

/* Button icons have stable geometry and inherit color so every variant remains consistent. */
.btn svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-left: 10px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* Compact header buttons still meet the 44px minimum target size. */
.btn-small {
  min-height: 44px;
  padding: 9px 17px;
  font-size: .8rem;
}

/* Light variant supplies maximum contrast over the dark hero. */
.btn-light {
  background: var(--white);
  color: var(--green-deep);
}

/* Warm hover tint preserves the natural palette rather than flashing pure gray. */
.btn-light:hover {
  background: #f4eadc;
}

/* Primary site action uses brand green on light surfaces. */
.btn-primary {
  background: var(--green);
  color: var(--white);
}

/* Darken rather than change hue so primary-action identity remains stable on hover. */
.btn-primary:hover {
  background: var(--green-deep);
}

/* LINE action uses the pre-validated accessible green token, not an unchecked brand color. */
.btn-line {
  background: var(--line-accessible);
  color: #fff;
}

/* Hover state remains within the accessible dark-green range. */
.btn-line:hover {
  background: #056833;
}

/* Block variant deliberately spans its containing form/card to create an obvious primary action. */
.btn-block {
  width: 100%;
}

/* Hero action note is supportive information and therefore lower contrast/smaller than the controls. */
.cta-note {
  margin: 15px 0 0;
  color: rgba(255, 253, 248, .78);
  font-size: .875rem;
}

/* The trust strip transitions from image-led hero to paper content while presenting three equal proofs. */
.trust-strip {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

/* Three columns encode equal status; responsive rules below adjust internal typography, not hierarchy. */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Decision: trust-strip-alignment
   Each cell owns its centering; primary and supporting text align within that cell.
   Do not repair individual items with one-off margins or shared cross-cell baselines.
   This directly protects the user-approved fix for previously uneven vertical margins. */
.trust-grid > div {
  /* Grid centering makes different label lengths align optically without content-specific offsets. */
  display: grid;
  place-items: center;
  /* Stable cell height makes the trust strip read as one architectural band. */
  min-height: 108px;
  padding: 20px;
  border-right: 1px solid var(--line);
}

/* Primary value and qualifier share a baseline so mixed Mincho/sans typography reads as one statement. */
.trust-grid p {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0;
}

/* Add the missing outer border only once; inner borders come from each cell's right edge. */
.trust-grid > div:first-child {
  border-left: 1px solid var(--line);
}

/* Proof values receive Mincho, brand color, and fluid scale because they are the scan target. */
.trust-grid strong {
  color: var(--green);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
}

/* Supporting qualifiers are deliberately smaller and muted to clarify information hierarchy. */
.trust-grid span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}

/* All primary sections consume the shared fluid vertical-spacing token. */
.section {
  padding-block: var(--space-section);
}

/* Limit introductory copy width and separate it from section content with fluid rhythm. */
.section-heading {
  max-width: 760px;
  margin-bottom: var(--space-heading);
}

/* Introductory prose should not add an untracked bottom margin inside the heading wrapper. */
.section-heading > p:last-child,
.section-lead {
  margin-bottom: 0;
  color: var(--muted);
}

/* Centered heading variant remains width-constrained for readable Japanese line length. */
.section-heading.centered {
  margin-inline: auto;
  text-align: center;
}

/* Story uses a slightly image-narrower split so narrative copy retains comfortable line length. */
.split-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  align-items: center;
  gap: var(--space-layout);
}

/* Story heading has its own upper scale bound to avoid overpowering adjacent portrait media. */
.story-copy h2 {
  font-size: clamp(2rem, 3.9vw, 3rem);
}

/* min-width: 0 is essential: it allows grid copy to shrink rather than forcing horizontal overflow. */
.story-copy {
  min-width: 0;
}

/* Decision: story-heading-phrase-integrity
   Each authored line is a semantic phrase and must not break internally at desktop/tablet widths. */
.story-copy h2 span {
  display: block;
  white-space: nowrap;
}

/* Checklist uses layout gap rather than item margins so spacing remains uniform and reorder-safe. */
.check-list {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

/* Reserve explicit inline space for the custom check mark and emphasize these as key takeaways. */
.check-list li {
  position: relative;
  padding-left: 31px;
  color: var(--green-deep);
  font-weight: 700;
}

/* Draw the check with borders to avoid external icon assets and preserve current-color-independent styling. */
.check-list li::before {
  content: "";
  position: absolute;
  top: .72em;
  left: 0;
  width: 18px;
  height: 9px;
  border-bottom: 2px solid var(--wood);
  border-left: 2px solid var(--wood);
  transform: rotate(-45deg);
}

/* Decision: story-aftercare-evidence
   This evidence card connects the generational story to a current, official post-build practice.
   Keep it compact and link-shaped; do not turn unconfirmed inspection years into a timeline. */
.story-aftercare {
  /* Grid reserves the final column for a persistent external-link arrow. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  /* The card follows the checklist as supporting evidence rather than a new primary CTA. */
  margin-top: var(--space-5);
  padding: 20px 22px;
  border-block: 1px solid var(--line);
  background: rgba(255, 253, 248, .52);
  color: var(--green-deep);
  text-decoration: none;
  transition: background-color .2s ease;
}

/* A subtle surface change confirms the whole evidence card is actionable. */
.story-aftercare:hover {
  background: var(--paper-deep);
}

/* Internal copy uses explicit rows so label, promise, and evidence never compete on one line. */
.story-aftercare-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

/* The English label is taxonomy, intentionally quieter than the Japanese evidence. */
.story-aftercare-kicker {
  color: var(--wood);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
}

/* Mincho connects the support promise typographically to the surrounding long-life story. */
.story-aftercare strong {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.55;
}

/* Support-card phrases may move at wbr but must never split an emphasized Japanese compound. */
.story-aftercare-phrase {
  display: inline-block;
  white-space: nowrap;
}

/* Concrete practice remains readable but subordinate to the card's promise line. */
.story-aftercare-practice {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.7;
}

/* The arrow matches the site's existing external-project icon language without a text instruction. */
.story-aftercare > svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

/* Remove default figure margin so the image aligns exactly with the grid column. */
.story-figure {
  margin: 0;
}

/* The story photograph uses a portrait editorial crop and shared soft elevation on wide layouts. */
.story-figure img {
  width: 100%;
  /* 4:5 supports the adjacent narrative column; tablet switches to landscape once stacked. */
  aspect-ratio: 4 / 5;
  /* This is environmental imagery, so a controlled cover crop is appropriate (unlike staff portraits). */
  object-fit: cover;
  box-shadow: var(--shadow);
}

/* Caption remains attached to the image but visually secondary to the story text. */
.story-figure figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: .8rem;
}

/* A deeper paper band distinguishes the materials/specification chapter without adding heavy dividers. */
.section-materials {
  background: var(--paper-deep);
}

/* Six-track grid allows a three-card material row and two-card performance row with taxonomy bands. */
.material-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* Auto rows let the short taxonomy bands remain short; cards still stretch equally within each row. */
  grid-auto-rows: auto;
  /* Top/left borders live on the parent; right/bottom borders live on cards to avoid doubled lines. */
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

/* Decision: material-scan-groups
   Short group bands add information hierarchy without implying new benefits or using unrelated imagery. */
.material-group-band {
  /* Each label owns a complete row before its related cards. */
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px clamp(16px, 2vw, 24px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(44, 80, 70, .07);
  color: var(--green);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
}

/* Default material cards span two of six tracks, producing three equal cards per wide row. */
.material-card {
  grid-column: span 2;
  /* Height scales gently so copy breathes on desktop without leaving excessive empty space. */
  min-height: clamp(220px, 24vw, 280px);
  /* Fluid padding maintains proportion as cards move through intermediate viewport widths. */
  padding: clamp(24px, 3vw, 32px) clamp(24px, 2.7vw, 28px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 253, 248, .62);
}

/* The final two items share the second row evenly; do not force all five items into equal narrow columns. */
.material-card:nth-of-type(4),
.material-card:nth-of-type(5) {
  grid-column: span 3;
}

/* Material sequence number acts as an editorial chapter marker, separated from the title by fluid space. */
.material-no {
  display: block;
  margin-bottom: clamp(24px, 4vw, 44px);
  color: var(--wood);
  font-family: var(--serif);
  font-size: .9rem;
  letter-spacing: .12em;
}

/* Keep a compact, consistent title-to-description relationship inside every material card. */
.material-card h4 {
  margin-bottom: 13px;
}

/* Supporting explanations are muted and slightly smaller so material names remain the scan layer. */
.material-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: .9rem;
}

/* Decision: spec-information-hierarchy
   Primary values dominate, units and qualifiers recede, and short key facts are
   optically larger. Do not normalize every card line to one font size. The user
   explicitly requested unequal font sizes to communicate priority and improve balance. */
.spec-panel {
  /* Four equal columns communicate that the specification facts belong to one comparable set. */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Equal row sizing prevents cards with short labels from appearing less important. */
  grid-auto-rows: 1fr;
  gap: var(--space-3);
  /* Separate measured performance from the preceding qualitative materials narrative. */
  margin-top: var(--space-7);
}

/* Each stat card reserves flexible space for the value and a stable lower row for its explanation. */
.spec-stat {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  /* Minimum height supports the two-tier value/label hierarchy without cramped leading. */
  min-height: 164px;
  padding: var(--space-4) var(--space-3);
  border-top: 3px solid var(--wood);
  background: var(--white);
  text-align: center;
}

/* Center the entire value cluster both vertically and horizontally, independent of label length. */
.spec-main {
  display: grid;
  place-content: center;
  place-items: center;
  gap: 5px;
}

/* Value, symbol, and qualifier share a baseline and stay together as a single measurable fact. */
.spec-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  color: var(--green);
  font-family: var(--serif);
  line-height: 1;
  /* Never split values such as “UA 0.46 以下” across lines; the card width handles responsiveness. */
  white-space: nowrap;
}

/* Numeric values use tabular figures for stable alignment and fluid scale for desktop density. */
.spec-number {
  font-size: clamp(2.25rem, 3.2vw, 3rem);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: .01em;
}

/* Short key facts receive extra optical weight; this is intentional hierarchy, not inconsistency. */
.spec-stat-key .spec-number {
  font-size: clamp(2.7rem, 3.8vw, 3.35rem);
}

/* Symbols and editorial kickers switch to sans to contrast with the large Mincho numeral. */
.spec-symbol,
.spec-kicker {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .1em;
}

/* Kicker uses wood accent and compact leading because it functions as a category, not a unit. */
.spec-kicker {
  color: var(--wood);
  line-height: 1.3;
}

/* Qualifiers inside the value line remain visibly attached while receding from the number. */
.spec-value small {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
}

/* Units sit on their own line so the primary number remains immediately scannable. */
.spec-unit {
  display: block;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.3;
}

/* Bottom-align explanatory labels so all four cards retain a shared visual baseline. */
.spec-label {
  display: block;
  align-self: end;
  padding-top: 14px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.5;
}

/* Specification caveats are grouped in a bounded note panel because they qualify the headline values. */
.spec-notes {
  /* Limit line length for technical Japanese copy even though the stat grid above spans wider. */
  max-width: 890px;
  margin: var(--space-5) auto 0;
  padding: 28px 32px;
  border: 1px solid var(--line);
  background: rgba(255, 253, 248, .7);
}

/* Technical note copy stays readable but secondary to the stat cards. */
.spec-notes p {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: .9rem;
}

/* Remove the last paragraph's default rhythm so panel padding controls the lower edge. */
.spec-notes p:last-child {
  margin-bottom: 0;
}

/* Source/profile/privacy links share a consistent high-contrast editorial-link treatment. */
.spec-notes a,
.person-card a,
.privacy-note a {
  color: var(--green);
  font-weight: 700;
}

/* Dark green creates a gallery-like backdrop that lets warm interior photography lead. */
.section-works {
  background: var(--green-deep);
  color: var(--white);
}

/* Light wood eyebrow preserves the global kicker hierarchy on the dark section. */
.section-heading-light .section-kicker {
  color: #dfbd94;
}

/* Intro copy is intentionally quieter than white headings yet maintains contrast on deep green. */
.section-heading-light > p:last-child {
  color: rgba(255, 253, 248, .72);
}

/* Two-column gallery balances image scale and scanning; mobile switches via auto-fit below. */
.works-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

/* Each figure is one project-level evidence card, not one independent photograph. */
.work {
  position: relative;
  display: flex;
  margin: 0;
  overflow: hidden;
  background: #172a25;
}

/* Decision: work-card-entire-image-link
   The full project card is the interactive target; do not reintroduce detached “〜を見る” links. */
.work-link {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

/* Every project owns one consistent 4:3 media stage regardless of selected photo count. */
.work-media {
  position: relative;
  display: grid;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #10231e;
}

/* The three-image project reads as one home: one dominant room and two supporting details. */
.work-media-triptych {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

/* Each shot clips its own hover zoom so it never paints across a neighboring mosaic cell. */
.work-shot {
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* The dominant dining image occupies the full height of the triptych. */
.work-shot-main {
  grid-row: 1 / -1;
}

/* Project images fill their assigned mosaic cells and transition as one interactive card. */
.work-shot img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  transition: transform .35s ease;
}

/* Apply identical image feedback to mouse hover and keyboard focus. */
.work-link:hover img,
.work-link:focus-visible img {
  transform: scale(1.015);
}

/* Inset white outline follows the image edge and stays visible over any photograph. */
.work-link:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: -6px;
  box-shadow: none;
}

/* The top-right circular arrow is a non-textual affordance that the image/card is actionable. */
.work-link-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  /* A 44px marker is large enough to read as interactive without obscuring the photograph. */
  border: 1px solid rgba(255, 253, 248, .45);
  border-radius: 50%;
  background: rgba(21, 61, 52, .86);
  color: var(--white);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

/* Keep the arrow crisp and themeable through currentColor rather than embedding a fixed-color asset. */
.work-link-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

/* Reverse the badge contrast and nudge toward the destination direction as interaction confirmation. */
.work-link:hover .work-link-icon,
.work-link:focus-visible .work-link-icon {
  background: var(--white);
  color: var(--green-deep);
  transform: translate(2px, -2px);
}

/* Project metadata sits below photography so longer evidence remains readable over a stable surface. */
.work-caption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 7px 12px;
  flex: 1;
  padding: 22px 24px 24px;
  background: #172a25;
  color: var(--white);
}

/* Type chip communicates the official project category without implying a location or date. */
.work-type {
  padding: 3px 8px;
  border: 1px solid rgba(223, 189, 148, .48);
  color: #dfbd94;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
}

/* The official work identifier is the highest-priority text because no project title is published. */
.work-caption h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 600;
  line-height: 1.4;
}

/* Rooms visible in the LP form the second scan layer and span the full card width. */
.work-rooms {
  grid-column: 1 / -1;
  color: rgba(255, 253, 248, .9);
  font-size: .85rem;
  font-weight: 700;
}

/* Additional official-page coverage provides depth while staying quieter than shown photographs. */
.work-caption small {
  grid-column: 1 / -1;
  color: rgba(255, 253, 248, .66);
  font-size: .74rem;
  line-height: 1.75;
}

/* Published room-category names move as whole units so long Japanese compounds remain readable. */
.work-space {
  display: inline-block;
  white-space: nowrap;
}

/* Staff cards share two equal columns on wide screens, then expand to one column before portraits become cramped. */
.people-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

/* Card grid gives the portrait an intrinsic-width rail and lets biography copy consume the remainder. */
.person-card {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line);
  background: var(--white);
}

/* Decision: staff-portrait-framing
   Preserve each supplied portrait's full intrinsic frame and adapt the card grid around it.
   Never crop faces with a forced aspect-ratio or object-fit: cover. The user explicitly
   flagged cropped faces and tight margins as potentially disrespectful to the people shown. */
.person-card img {
  /* Width is controlled by the current card breakpoint; height always follows the source ratio. */
  width: 180px;
  height: auto;
  min-height: 0;
  /* Contain is defensive if any upstream dimension appears; it must never become `cover`. */
  object-fit: contain;
}

/* Biography rail is a vertical flex stack so the profile link can align at the card bottom. */
.person-card > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

/* Role/certification label uses wood and sans weight to separate it from the Mincho name. */
.person-role {
  margin-bottom: 8px;
  color: var(--wood);
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .08em;
}

/* Staff name receives enough scale for respectful identification without competing with section headings. */
.person-card h3 {
  margin-bottom: 14px;
  font-size: 1.55rem;
}

/* Biography text stays in the shared muted reading color and compact card scale. */
.person-card p:not(.person-role) {
  color: var(--muted);
  font-size: .9rem;
}

/* Profile link sits at the bottom when biography lengths differ and preserves a 44px target height. */
.person-card a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: auto;
  font-size: .82rem;
}

/* A top rule marks the process as a new chapter while retaining a white, instruction-like surface. */
.section-process {
  border-top: 1px solid var(--line);
  background: var(--white);
}

/* Process heading owns no trailing margin; the track below supplies the intentional separation. */
.section-process .section-heading {
  margin-bottom: 0;
}

/* If lead copy exists, constrain it to a readable centered measure. */
.section-process .section-heading p:last-child {
  max-width: 38rem;
  margin-inline: auto;
}

/* Keep short phrase spans intact so process headings do not split a single semantic unit. */
.section-process h2 span {
  display: inline-block;
  white-space: nowrap;
}

/* Defensive reset prevents nested final content from adding hidden spacing below the heading wrapper. */
.section-process .section-heading > :last-child {
  margin-bottom: 0;
}

/* Decision: process-readable-track
   Keep readable 280-336px cards instead of compressing four columns into the viewport.
   The partial next card is an affordance, not accidental clipping. The user explicitly
   chose a wider horizontal track to improve readability instead of four compressed columns. */
.process-track {
  /* The wrapper, rather than the scroll region, owns spacing so icon controls can sit above the rail. */
  margin-top: var(--space-6);
}

/* Decision: process-icon-controls
   macOS may hide native scrollbars and a narrow next-card strip can expose only clipped glyphs.
   Persistent arrow icons add a familiar, non-verbal affordance without restoring the rejected helper sentence. */
.process-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}

/* Keep progressive-enhancement controls absent when JavaScript cannot confirm real overflow. */
.process-controls[hidden] {
  display: none;
}

/* Each icon button meets the 44px touch target and remains visually secondary to conversion CTAs. */
.process-controls button {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--green);
  border-radius: 50%;
  background: transparent;
  color: var(--green);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

/* Arrow geometry uses currentColor so hover, focus, and print states never require duplicate assets. */
.process-controls svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

/* Hover confirms action for precise pointers while the universal focus ring handles keyboard users. */
.process-controls button:hover:not(:disabled) {
  background: var(--green);
  color: var(--white);
}

/* Disabled arrows communicate the reached boundary and cannot pretend that more content exists. */
.process-controls button:disabled {
  opacity: .28;
  cursor: default;
}

.process-list {
  /* One shared variable keeps the visible next-card face honest after accounting for the real gap. */
  --process-gap: clamp(14px, 2vw, 24px);
  /* Column-flow grid creates a horizontally scrollable sequence without carousel-library semantics or dependencies. */
  display: grid;
  grid-auto-flow: column;
  /* Card width stays within the user-approved readable range while scaling at intermediate widths. */
  grid-auto-columns: clamp(320px, 31vw, 336px);
  /* Fluid gap maintains separation without wasting width on smaller desktop windows. */
  gap: var(--process-gap);
  /* Native horizontal overflow remains available for touch, trackpad, scrollbar, and keyboard users. */
  overflow-x: auto;
  /* Contain horizontal overscroll so reaching the track edge does not unexpectedly navigate the page. */
  overscroll-behavior-inline: contain;
  /* The track—not an instruction label—creates its own distance from the heading. */
  margin: 0;
  /* Two-pixel inline inset protects focus/border rendering; bottom padding gives the scrollbar breathing room. */
  padding: 2px 2px 20px;
  scroll-padding-inline: 2px;
  /* Proximity snap assists alignment but does not forcibly seize every small scroll gesture. */
  scroll-snap-type: inline proximity;
  /* Expose a visible, palette-matched native scrollbar; do not hide the only affordance for some users. */
  scrollbar-color: var(--wood-light) var(--paper-deep);
  scrollbar-width: thin;
  /* Ordered-list numbering is rendered deliberately inside cards, not by browser markers. */
  list-style: none;
}

/* Decision: hero-lead-semantic-break
   Only at widths with measured room, honor the authored sentence break after “構造材・断熱材まで。”;
   narrower layouts must return to natural wrapping instead of overflowing. */
@media (min-width: 1081px) {
  /* Release the former reading-width cap so both approved lines fit without a third accidental wrap. */
  .hero-lead {
    max-width: none;
  }

  /* Each explicit span is one sentence line on wide screens, matching the user-approved punctuation break. */
  .hero-lead-line {
    display: block;
    white-space: nowrap;
  }
}

/* Add grab affordance only for devices that genuinely have a precise hovering pointer. */
@media (hover: hover) and (pointer: fine) {
  /* Cursor communicates direct mouse dragging without showing redundant “scroll horizontally” copy. */
  .process-list {
    cursor: grab;
  }

  /* During a confirmed drag, suspend snap and selection so the content tracks the pointer predictably. */
  .process-list.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    /* Disable text selection only during active dragging; normal reading/selection returns on release. */
    -webkit-user-select: none;
    user-select: none;
  }
}

/* WebKit scrollbar keeps a compact but discoverable horizontal track. */
.process-list::-webkit-scrollbar {
  height: 8px;
}

/* Match scrollbar trough to the recessed paper palette rather than browser gray. */
.process-list::-webkit-scrollbar-track {
  background: var(--paper-deep);
}

/* Rounded wood thumb reads as movable while remaining visually quieter than CTAs. */
.process-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--wood-light);
}

/* The list itself is keyboard-focusable; focus must remain obvious even though child cards are not controls. */
.process-list:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  box-shadow: none;
}

/* Each step is a full-height flex card so its internal copy aligns despite varying text length. */
.process-list li {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Fluid card padding preserves readable measure within the constrained card width. */
  padding: clamp(24px, 2.5vw, 32px);
  border: 1px solid var(--line);
  border-top: 3px solid var(--wood);
  background: var(--paper);
  box-shadow: 0 12px 30px rgba(33, 28, 22, .06);
  /* Snap each card to the track start after native/drag scrolling settles. */
  scroll-snap-align: start;
}

/* Inner flex stack consumes remaining height, enabling future bottom-aligned content without card-specific hacks. */
.process-list li > div {
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* Step numbers are explicit editorial markers with generous separation from explanatory text. */
.process-list > li > span {
  display: block;
  margin-bottom: var(--space-5);
  color: var(--wood);
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1;
}

/* Step title scales only slightly; card width, not huge typography, provides readability. */
.process-list h3 {
  margin-bottom: 12px;
  font-size: clamp(1.12rem, 1.6vw, 1.28rem);
}

/* Step description stays at the 16px baseline; do not shrink it to fit four cards in one viewport. */
.process-list p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1rem;
}

/* FAQ uses the deeper paper tone to separate dense question/answer content from the white process track. */
.section-faq {
  background: var(--paper-deep);
}

/* Desktop FAQ reserves a stable label column and a wider reading column for answers. */
.faq-wrap {
  display: grid;
  grid-template-columns: minmax(250px, .68fr) minmax(0, 1.32fr);
  /* Fluid gap gives the left title room without starving the answer column at intermediate widths. */
  gap: clamp(50px, 8vw, 110px);
}

/* Remove generic heading spacing because the FAQ grid itself controls vertical alignment. */
.faq-wrap > .section-heading {
  margin-bottom: 0;
}

/* Prevent the heading's final child from shifting the left-column baseline. */
.faq-wrap > .section-heading > :last-child {
  margin-bottom: 0;
}

/* One top rule plus per-item bottom rules creates a clean accordion rhythm without boxed cards. */
.faq-list {
  border-top: 1px solid var(--line);
}

/* Each details element contributes exactly one separator to avoid doubled borders. */
.faq-list details {
  border-bottom: 1px solid var(--line);
}

/* Summary is the complete click target, with ample height and clear question/icon separation. */
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 76px;
  /* Small horizontal inset aligns text with answer copy while preserving a broad native target. */
  padding: 16px 4px;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  list-style: none;
}

/* Hide the WebKit marker because a consistent plus/minus state indicator is supplied below. */
.faq-list summary::-webkit-details-marker {
  display: none;
}

/* Use text glyphs for a dependency-free state marker that inherits the editorial accent. */
.faq-list summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--wood);
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 400;
}

/* Decision: faq-single-open-state
   The script allows at most one expanded answer; this minus sign must reflect the native `open` state. */
.faq-list details[open] summary::after {
  content: "−";
}

/* Answer indentation aligns with the question while reserving right space beneath the state marker. */
.faq-list details p {
  /* Limit technical answers to a readable measure even when the FAQ column is very wide. */
  max-width: 45rem;
  margin: -2px 0 0;
  padding: 0 42px 24px 4px;
  color: var(--muted);
  font-size: .9rem;
}

/* Final CTA returns to brand green to clearly mark the decision point at the end of the narrative. */
.final-cta {
  padding-block: var(--space-section);
  background: var(--green);
  color: var(--white);
}

/* Pair contextual material details with a concrete contact card; the card is slightly wider for form/action copy. */
.final-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(400px, 1fr);
  align-items: center;
  /* Fluid cross-column gap preserves association while preventing the white card from crowding the copy. */
  gap: clamp(48px, 7vw, 96px);
}

/* Warm eyebrow provides contrast and continuity with earlier wood accents on the green field. */
.final-copy .section-kicker {
  color: #d7b58c;
}

/* Final heading must remain pure light text for hierarchy and contrast. */
.final-copy h2 {
  color: var(--white);
}

/* Keep each authored CTA phrase intact; wrapping is allowed between spans, not within a Japanese phrase. */
.final-copy h2 span {
  display: inline-block;
  white-space: nowrap;
}

/* Supporting CTA copy recedes from both heading and actionable white card. */
.final-copy > p:not(.section-kicker) {
  color: rgba(255, 253, 248, .78);
}

/* Material lists use consistent gaps and custom markers rather than default browser bullets. */
.materials-list {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

/* Reserve inline space for the short wood rule that marks each downloadable item. */
.materials-list li {
  position: relative;
  padding-left: 25px;
}

/* A restrained horizontal rule supports scanning without implying checkbox state. */
.materials-list li::before {
  content: "";
  position: absolute;
  top: .75em;
  left: 0;
  width: 12px;
  height: 1px;
  background: #d7b58c;
}

/* Primary material-group label has enough separation and weight to introduce its list. */
.materials-group-label {
  margin: 30px 0 0;
  color: #fff;
  font-size: .9rem;
  font-weight: 800;
}

/* Secondary reform materials are intentionally quieter and slightly closer to their own list. */
.materials-group-label-secondary {
  margin-top: 24px;
  color: rgba(255, 253, 248, .8);
  font-size: .82rem;
}

/* Secondary list contrast and scale encode “additional,” not “unimportant.” */
.materials-list-secondary {
  color: rgba(255, 253, 248, .82);
  font-size: .92rem;
}

/* White contact card creates the highest-contrast action surface at the end of the page. */
.contact-card {
  /* 40px desktop padding gives form choices room; mobile reduces it through the spacing token. */
  padding: 40px;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow);
}

/* Compact contextual badge clarifies the online-material route before the larger action heading. */
.contact-label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 9px;
  background: var(--green-soft);
  color: var(--green-deep);
  font-size: .69rem;
  font-weight: 800;
  /* Badge is a short label and must not split into an awkward two-line chip. */
  white-space: nowrap;
}

/* Contact-card heading sits between the small badge and explanatory body in the local hierarchy. */
.contact-card h3 {
  margin-bottom: 10px;
  font-size: 1.45rem;
}

/* Only ordinary explanatory paragraphs receive this muted spacing; labels/privacy have dedicated rules. */
.contact-card > p:not(.contact-label, .privacy-note) {
  margin-bottom: 22px;
  color: var(--muted);
  font-size: .86rem;
}

/* Decision: legal-and-label-phrase-integrity
   Preserve these short phrases as units so labels and privacy-link names are never split mid-word. */
.contact-card .no-break,
.privacy-note a {
  white-space: nowrap;
}

/* Privacy copy is visible near the action but deliberately lower emphasis than the CTA itself. */
.privacy-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .875rem;
}

/* Divider labels the alternative consultation path without introducing a heavy section break inside the card. */
.contact-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 16px;
  color: var(--muted);
  font-size: .69rem;
}

/* Flexible rules fill remaining space symmetrically around the divider label. */
.contact-divider::before,
.contact-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

/* Phone contact is a complete bordered target, visually separate from the stronger digital CTAs. */
.phone-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  margin-top: 12px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  color: var(--green-deep);
  text-decoration: none;
}

/* Phone helper label stays subordinate to the actual number. */
.phone-card span {
  font-size: .76rem;
  font-weight: 700;
}

/* Number gets sufficient weight/tracking for quick recognition and accurate tapping/calling. */
.phone-card strong {
  font-size: 1rem;
  letter-spacing: .04em;
}

/* Footer uses near-black brown rather than pure black to close the warm material palette. */
.site-footer {
  padding: 62px 0 28px;
  background: #1b1a17;
  color: #c9c1b5;
  font-size: .8125rem;
}

/* Wide footer places identity, address/context, and navigation in distinct columns. */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr auto;
  gap: var(--space-6);
}

/* Footer wordmark repeats Mincho identity at a quieter scale than the header. */
.site-footer .footer-brand {
  margin-bottom: 14px;
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: .08em;
}

/* Compact paragraph rhythm prevents low-priority business information from becoming visually dominant. */
.site-footer p {
  margin-bottom: 6px;
}

/* Footer links stack for scanning and align to their content width rather than stretching. */
.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Every footer link retains a 44px minimum target even in the visually compact footer. */
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Copyright/legal row receives a clear but low-contrast separation from the main footer grid. */
.footer-bottom {
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: #8f887f;
}

/* Mobile action bar is absent from desktop layout and is enabled only at the 640px breakpoint. */
.mobile-cta {
  display: none;
}

/* 1080px is the content-pressure breakpoint: desktop navigation and two staff columns no longer fit comfortably. */
@media (max-width: 1080px) {
  /* Remove the dense nav rather than compressing labels into unreliable tap targets. */
  .header-nav {
    display: none;
  }

  /* Keep the essential contact actions aligned to the far edge after navigation disappears. */
  .header-actions {
    margin-left: auto;
  }

  /* Staff cards become one per row so portraits and biographies gain respectful space. */
  .people-grid {
    grid-template-columns: 1fr;
  }

  /* In the wider single-card row, allow portraits to grow without cropping their source frame. */
  .person-card {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  /* Keep image width synchronized with the card's portrait grid track. */
  .person-card img {
    width: 220px;
  }

}

/* 860px is the structural stacking breakpoint for paired narrative, FAQ, and CTA layouts. */
@media (max-width: 860px) {
  /* Stack only layouts whose two columns would create poor Japanese line lengths below this width. */
  .split-story,
  .faq-wrap,
  .final-grid {
    grid-template-columns: 1fr;
  }

  /* Center the stacked story image and prevent it from becoming excessively wide on tablets. */
  .story-figure {
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
  }

  /* Once stacked, landscape 4:3 uses tablet width more efficiently than the desktop portrait crop. */
  .story-figure img {
    aspect-ratio: 4 / 3;
  }

  /* Materials become two cards per row while retaining the six-track border framework. */
  .material-card,
  .material-card:nth-of-type(4),
  .material-card:nth-of-type(5) {
    grid-column: span 3;
  }

  /* Card 03 completes the first semantic group without leaving a half-row before its next band. */
  .material-card:nth-of-type(3) {
    grid-column: span 6;
  }

  /* Technical specs switch to a readable 2x2 layout rather than shrinking four cards. */
  .spec-panel {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Reaffirm one-column staff layout at the structural breakpoint for cascade clarity. */
  .people-grid {
    grid-template-columns: 1fr;
  }

  /* Tablet portrait track balances a full-frame image with a still-readable biography column. */
  .person-card {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  /* Keep portrait width synchronized with its tablet grid track. */
  .person-card img {
    width: 200px;
  }

  /* Tighten the now-stacked FAQ heading-to-list gap using a shared spacing token. */
  .faq-wrap {
    gap: var(--space-5);
  }

  /* Maintain a stronger gap between final contextual copy and the high-contrast contact card. */
  .final-grid {
    gap: var(--space-6);
  }

  /* Bound and center the stacked contact card so it does not become a hard-to-read full tablet width. */
  .contact-card {
    width: 100%;
    max-width: 600px;
    margin-inline: auto;
  }

  /* Footer reduces to two information columns before fully stacking on phones. */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Navigation spans both columns and wraps horizontally to avoid a tall sparse link stack. */
  .footer-links {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 24px;
  }
}

/* 640px is the phone interaction/layout breakpoint: header, hero crop, cards, and persistent CTA all change together. */
@media (max-width: 640px) {
  /* Header is no longer fixed on phones, so anchors need only a small visual inset. */
  html {
    scroll-padding-top: 16px;
  }

  /* When the persistent CTA is present, anchor targets must clear its height plus the device safe area. */
  html.has-mobile-cta {
    scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

  /* Compact the mobile header to 70px while keeping brand and CTA controls comfortably tappable. */
  .site-header,
  .header-inner {
    height: 70px;
    min-height: 70px;
  }

  /* Decision: mobile-header-nonsticky
     Keep the header absolute on phones: the dedicated bottom CTA supplies persistent actions,
     and a second sticky bar would waste vertical reading space. */
  .site-header.is-scrolled {
    position: absolute;
    background: rgba(24, 29, 24, .8);
    box-shadow: none;
    color: var(--white);
    backdrop-filter: none;
  }

  /* Hide the phone stack from the narrow header; phone access remains in contact and mobile CTA areas. */
  .header-phone {
    display: none;
  }

  /* Preserve a 44px action target while reducing horizontal padding to fit the mobile header. */
  .header-actions .btn {
    min-height: 44px;
    padding-inline: 14px;
  }

  /* Scale brand identity to fit beside the header action without truncation. */
  .brand {
    font-size: .93rem;
  }

  /* Supporting brand line scales with the smaller mobile wordmark and remains secondary. */
  .brand small {
    font-size: .46rem;
  }

  /* Shift hero focal point on narrow crops so the relevant interior composition remains visible. */
  .hero-image {
    object-position: 58% center;
  }

  /* Mobile gradient darkens the lower copy zone rather than relying on desktop's left-to-right shade. */
  .hero-shade {
    background:
      linear-gradient(180deg, rgba(25, 25, 19, .36) 0%, rgba(25, 25, 19, .18) 28%, rgba(25, 25, 19, .86) 75%, rgba(25, 25, 19, .92) 100%);
  }

  /* Mobile hero padding clears the 70px header and reduces lower whitespace for shorter viewports. */
  .hero-inner {
    padding-block: 130px 52px;
  }

  /* Convert the eyebrow into a dark-backed chip so it remains readable over any mobile image crop. */
  .hero-kicker {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(21, 50, 42, .9);
    color: #fff;
    font-size: .875rem;
    letter-spacing: .12em;
  }

  /* Mobile hero headline scales fluidly within phone-safe bounds and uses slightly tighter tracking. */
  .hero h1 {
    font-size: clamp(1.5rem, 7.7vw, 2.5rem);
    letter-spacing: .025em;
  }

  /* Approved phrase groups stay intact on mobile; sizing above is calibrated to prevent overflow. */
  .hero h1 span {
    white-space: nowrap;
  }

  /* Preserve readable body scale and generous Japanese leading inside the image-backed hero. */
  .hero-lead {
    font-size: .94rem;
    line-height: 1.78;
  }

  /* Stack hero CTAs so neither Japanese label is compressed into an awkward narrow button. */
  .hero-cta {
    display: grid;
    grid-template-columns: 1fr;
  }

  /* Full-width phone CTA targets are easier to discover and tap. */
  .hero-cta .btn {
    width: 100%;
  }

  /* Do not shrink supportive CTA copy below the established readable small-text floor. */
  .cta-note {
    font-size: .875rem;
  }

  /* Reduce trust-cell height/padding while keeping all three proofs visible in one row. */
  .trust-grid > div {
    min-height: 92px;
    padding: 14px 5px;
    text-align: center;
  }

  /* Stack value and qualifier inside each narrow cell to avoid squeezed inline wrapping. */
  .trust-grid p {
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  /* Scale proof values for three-column phone fit while retaining the strongest local emphasis. */
  .trust-grid strong {
    font-size: 1rem;
  }

  /* Qualifiers remain legible and can wrap naturally beneath their values. */
  .trust-grid span {
    font-size: .8rem;
  }

  /* Phone section headings use a separate fluid range suited to narrow Japanese line measures. */
  h2 {
    font-size: clamp(1.75rem, 8.4vw, 2.2rem);
  }

  /* Preserve fluid story gap token even after the layout stacks; do not replace with arbitrary mobile spacing. */
  .split-story {
    gap: var(--space-layout);
  }

  /* Checklist copy steps down slightly to accommodate its icon inset without crowding. */
  .check-list li {
    font-size: .9rem;
  }

  /* Phone material groups use one deliberate column so a taxonomy band never follows a half-empty row. */
  .material-grid {
    grid-template-columns: 1fr;
  }

  /* Remove six-track spans and desktop minimum heights once material cards flow responsively. */
  .material-card,
  .material-card:nth-of-type(3),
  .material-card:nth-of-type(4),
  .material-card:nth-of-type(5),
  .material-card:last-child {
    grid-column: auto;
    min-height: 0;
    padding: var(--space-4);
  }

  /* Tighten sequence-number spacing to match the now-content-height cards. */
  .material-no {
    margin-bottom: 22px;
  }

  /* Compact the 2x2 spec grid without collapsing the information hierarchy. */
  .spec-panel {
    gap: 12px;
    margin-top: var(--space-6);
  }

  /* Keep stat cards tall enough for values, units, and two-line labels at phone widths. */
  .spec-stat {
    min-height: 164px;
    padding: 20px 8px;
  }

  /* Phone numeric scale remains fluid but bounded for two-column fit. */
  .spec-number {
    font-size: clamp(1.9rem, 9.5vw, 2.3rem);
  }

  /* Key-fact numbers remain optically larger than ordinary numeric facts on mobile too. */
  .spec-stat-key .spec-number {
    font-size: clamp(2.35rem, 11vw, 2.75rem);
  }

  /* Reduce supporting symbol/kicker scale before compromising the primary number. */
  .spec-symbol,
  .spec-kicker {
    font-size: .72rem;
  }

  /* Units and inline qualifiers remain readable but lowest in the stat's typographic hierarchy. */
  .spec-value small,
  .spec-unit {
    font-size: .68rem;
  }

  /* Preserve label separation while fitting two stat cards per row. */
  .spec-label {
    padding-top: 12px;
    font-size: .78rem;
  }

  /* Reduce note-panel padding so technical caveats retain a useful phone line length. */
  .spec-notes {
    padding: 22px 20px;
  }

  /* Auto-fit works cards at the same 260px readability floor as material cards. */
  .works-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
  }

  /* Compact project metadata without shrinking its evidence text below the established floor. */
  .work-caption {
    padding: 20px;
  }

  /* Staff card becomes vertical so every portrait can use its natural ratio and respectful width. */
  .person-card {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  /* Decision: mobile-staff-portrait-full-frame
     Cap portraits at 320px and center them, but always preserve source ratio and full facial framing. */
  .person-card img {
    width: min(100%, 320px);
    max-width: 320px;
    /* These defensive declarations must remain auto/contain; do not optimize them into a fixed crop. */
    height: auto;
    min-height: 0;
    object-fit: contain;
    object-position: center;
    justify-self: center;
  }

  /* At the tested 390px viewport, the real gap leaves a measured 28px face of the next card. */
  .process-list {
    /* Below that range, the 280px minimum intentionally protects copy before the continuation cue. */
    grid-auto-columns: clamp(280px, calc(100vw - var(--gutter-total) - var(--process-gap) - 32px), 320px);
  }

  /* Compact the wrapper-to-heading rhythm without separating controls from their rail. */
  .process-track {
    margin-top: var(--space-5);
  }

  /* Slightly reduce question scale so long Japanese questions wrap by phrase rather than character fragments. */
  .faq-list summary {
    font-size: .94rem;
  }

  /* Reaffirm one-column final layout at the phone breakpoint and use an explicit compact gap. */
  .final-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Final CTA heading uses a narrow fluid range to protect whole-word/phrase wrapping in the right block. */
  .final-copy h2 {
    font-size: clamp(1.7rem, 7.8vw, 2rem);
  }

  /* Contact card follows shared 24px spacing on phones instead of the roomy desktop 40px. */
  .contact-card {
    padding: var(--space-4);
  }

  /* Stack phone helper and number so the number never clips or splits in a narrow card. */
  .phone-card {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  /* Footer fully stacks for natural source order and predictable screen-reader/visual sequence. */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  /* Release the tablet spanning instruction once the footer has one column. */
  .footer-links {
    grid-column: auto;
  }

  /* Persistent mobile actions appear only after script applies visibility; hidden base state prevents initial flash. */
  .mobile-cta {
    /* Fixed edge-to-edge placement stays reachable independent of scroll depth. */
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: grid;
    /* Materials receives slightly more width because its Japanese label is longer than LINE. */
    grid-template-columns: 1.2fr .8fr;
    gap: 8px;
    min-height: calc(70px + env(safe-area-inset-bottom));
    /* Bottom padding includes iOS safe area so controls never sit behind the home indicator. */
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, .12);
    background: rgba(27, 26, 23, .96);
    backdrop-filter: blur(10px);
    /* Three hidden-state properties prevent visual flash, pointer interception, and focus ambiguity during transition. */
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  }

  /* Script-controlled visible state restores appearance and interaction as one atomic state. */
  .mobile-cta.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }

  /* Both mobile CTA cells are full-height, centered, accessible action targets. */
  .mobile-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 8px 10px;
    border-radius: 2px;
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
  }

  /* Materials action uses the primary site brand green. */
  .mobile-cta-materials {
    background: var(--green);
  }

  /* LINE action uses the contrast-checked accessible green token. */
  .mobile-cta-line {
    background: var(--line-accessible);
  }
}

/* 520-640px phones have enough horizontal room for a respectful side-by-side staff layout. */
@media (min-width: 520px) and (max-width: 640px) {
  /* Restore a 180px portrait rail without returning to the denser desktop two-card grid. */
  .person-card {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  /* Synchronize image width with the restored rail and preserve the full intrinsic frame. */
  .person-card img {
    width: 180px;
    max-width: none;
    height: auto;
    min-height: 0;
    object-fit: contain;
    object-position: center;
    justify-self: auto;
  }
}

/* 340px protects the smallest supported phone widths from CTA/headline overflow. */
@media (max-width: 340px) {
  /* Fixed reduction is safer than continuing the larger fluid story-heading scale below its tested floor. */
  .story-copy h2 {
    font-size: 1.8rem;
  }

  /* Reduce only horizontal hero-button padding and text scale; target height remains inherited and accessible. */
  .hero-cta .btn {
    padding-inline: 14px;
    font-size: .875rem;
  }

  /* Keep the compact hero CTA label as one phrase after reducing its surrounding geometry. */
  .hero-cta .btn span {
    white-space: nowrap;
  }

  /* Tighten icon gap as the final small-screen fit adjustment. */
  .hero-cta .btn svg {
    margin-left: 8px;
  }

  /* Apply the same narrow-width fit strategy to contact-card buttons for consistency. */
  .contact-card .btn {
    padding-inline: 14px;
    font-size: .875rem;
  }

  /* Preserve contact CTA phrase integrity on the smallest width. */
  .contact-card .btn span {
    white-space: nowrap;
  }

  /* Match the compact icon gap used by the hero action. */
  .contact-card .btn svg {
    margin-left: 8px;
  }
}

/* Respect OS-level motion preferences across scrolling, transitions, and any future animations. */
@media (prefers-reduced-motion: reduce) {
  /* Disable native anchor smoothing so navigation is immediate for motion-sensitive users. */
  html {
    scroll-behavior: auto;
  }

  /* Near-zero durations retain event semantics while effectively removing visible motion site-wide. */
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Print rules remove interactive chrome and convert scroll-only content into complete static content. */
@media print {
  /* Header/actions/contact controls are not useful or actionable on paper and would consume space. */
  .site-header,
  .mobile-cta,
  .cta-row,
  .contact-card,
  .process-controls {
    display: none !important;
  }

  /* Print on plain white with no page padding so browser print margins remain the single margin source. */
  body {
    padding: 0;
    background: #fff;
  }

  /* Decision: print-readable-surfaces
     Background graphics are commonly disabled in print dialogs, so dark-screen sections must not
     depend on white foreground text or CSS imagery to remain legible on paper. */
  .hero,
  .section-works,
  .final-cta,
  .site-footer,
  .work,
  .work-caption {
    background: #fff !important;
    color: #000 !important;
  }

  /* Remove the photographic hero layers because they are decorative without their screen contrast. */
  .hero-image,
  .hero-shade {
    display: none !important;
  }

  /* Retain enough hero identity without preserving a screen-height composition on paper. */
  .hero {
    min-height: auto;
  }

  /* Restore ordinary document spacing after removing the absolute photographic layers. */
  .hero-inner {
    padding-block: 40px !important;
  }

  /* Explicit black foregrounds override translucent screen colors when print backgrounds are off. */
  .hero-kicker,
  .hero h1,
  .hero-lead,
  .cta-note,
  .section-heading-light .section-kicker,
  .section-heading-light h2,
  .section-heading-light > p:last-child,
  .work-type,
  .work-rooms,
  .work-caption small,
  .final-copy,
  .final-copy .section-kicker,
  .final-copy h2,
  .final-copy > p:not(.section-kicker),
  .materials-group-label,
  .materials-group-label-secondary,
  .materials-list,
  .materials-list-secondary,
  .site-footer p,
  .site-footer a {
    color: #000 !important;
  }

  /* Screen-only wood markers need the same explicit print contrast as their list text. */
  .materials-list li::before {
    background: #000 !important;
  }

  /* The on-screen external-link badge adds no useful information to a static printout. */
  .work-link-icon {
    display: none !important;
  }

  /* Expand the horizontal process track into a two-column print grid so every step is visible. */
  .process-list {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    padding: 0;
  }

  /* Keep each process card intact across page breaks and disable irrelevant scroll snapping. */
  .process-list li {
    break-inside: avoid;
    scroll-snap-align: none;
  }
}