@charset "UTF-8";

/* Three compositions share typography and content; each has its own spatial rhythm. */
:root {
  --ink: #0b0f10;
  --paper: #f1ede6;
  --brass: #c0966d;
  --teal: #285b59;
  --copper: #b96845;
  --muted: #aebbb8;
  --display: din-2014, "Arial", sans-serif;
  --ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --hero-bg: #0b0f10;
  --hero-fg: #f1ede6;
  --hero-dim: #b4c1bc;
  --section-space: clamp(80px, 9vw, 144px);
  --gutter: clamp(24px, 5.4vw, 88px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 36px; }
body { margin: 0; color: var(--paper); background: var(--ink); font-family: var(--ja); font-size: 15px; line-height: 1.9; -webkit-font-smoothing: antialiased; }
body, h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; }
img, svg { display: block; max-width: 100%; height: auto; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 6px; }
::selection { background: #c0966d; color: #0b0f10; }
.container { width: min(100%, 1600px); margin-inline: auto; padding-inline: var(--gutter); }
.section-pad { padding-block: var(--section-space); }
.light { background: var(--paper); color: var(--ink); }
.skip-link { position: absolute; left: 20px; top: -100px; z-index: 100; background: var(--paper); padding: 12px 24px; color: var(--ink); }
.skip-link:focus { top: 10px; }
.eyebrow, .section-label { font-family: var(--display); font-weight: 500; font-size: 12px; letter-spacing: .15em; line-height: 1.5; }
.section-label { display: flex; gap: 26px; align-items: center; margin-bottom: 30px; }
.section-label > span { color: var(--brass); font-size: 11px; }
.light .section-label > span { color: #80562f; }
h2 { font-weight: 500; font-size: clamp(27px, 2.8vw, 44px); line-height: 1.65; letter-spacing: .05em; text-wrap: balance; }
.text-link { display: inline-flex; gap: 32px; align-items: center; min-height: 44px; padding-block: 10px; border-bottom: 1px solid currentColor; font-size: 13px; line-height: 1.5; font-weight: 500; }
.text-link > span { font-family: sans-serif; font-size: 23px; transition: transform .25s; }
.text-link:hover > span { transform: translate(3px, -3px); }
.section-heading { display: flex; justify-content: space-between; gap: 50px; align-items: flex-end; margin-bottom: 62px; }
.section-heading > p { color: #aebbb8; font-size: 14px; line-height: 2.1; }
.light .section-heading > p { color: #535d59; }

/* A compact review tool, outside the actual corporate header. */
.study-bar { min-height: 40px; display: flex; align-items: center; gap: 24px; padding: 5px var(--gutter); color: #d3d9d5; background: #1c2424; border-bottom: 1px solid #34413e; font-family: var(--display); font-size: 11px; letter-spacing: .04em; }
.study-back { min-height: 30px; display: flex; align-items: center; white-space: nowrap; }
.study-concepts { display: flex; gap: 17px; }
.study-concepts a { display: flex; gap: 7px; align-items: center; min-height: 30px; color: #bac6c0; }
.study-concepts a[aria-current] { color: #f0cba6; }
.study-concepts a[aria-current]::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.motion-toggle { display: flex; gap: 8px; align-items: center; margin-left: auto; padding: 3px 0 3px 16px; background: transparent; border: 0; border-left: 1px solid #5c6a65; min-height: 30px; font-size: 11px; white-space: nowrap; }
.motion-toggle[hidden], html:not(.js) .motion-toggle { display: none; }

/* Retains the original four menu entries and the original gold logo. */
.site-header { position: relative; z-index: 20; color: var(--hero-fg); background: var(--hero-bg); }
.header-inner { min-height: 152px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.site-logo { display: block; width: 140px; flex: 0 0 140px; }
.site-logo img { width: 100%; }
.header-right { display: flex; align-items: center; gap: clamp(28px, 4vw, 64px); }
.global-nav { display: flex; gap: clamp(25px, 3.2vw, 52px); }
.global-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; }
.global-nav a > span { font-family: var(--display); font-size: 17px; letter-spacing: .11em; }
.global-nav a > small { color: var(--hero-dim); font-size: 10px; letter-spacing: .05em; }
.global-nav a:hover > span { color: var(--brass); }
.language-nav { display: flex; gap: 9px; font: 12px var(--display); letter-spacing: .07em; }
.language-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.language-nav > span { display: inline-flex; align-items: center; color: var(--hero-dim); }
.language-nav a[aria-current] { color: var(--brass); }
.menu-toggle { display: none; }

/* HERO — art is a real projected mesh, not a tiny decorative icon. */
.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--hero-bg); color: var(--hero-fg); }
.hero-diagonal { position: absolute; z-index: -1; inset: 0; background: linear-gradient(128deg, #1f3d39 0%, #16312f 55%, #122825 100%); clip-path: polygon(69% 0,100% 0,100% 100%,38% 100%); opacity: .8; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 650px; align-items: center; }
.hero-copy { position: relative; z-index: 2; padding-block: 30px 60px; }
.hero-eyebrow { color: #bda88e; margin-bottom: 28px; font-size: 11px; letter-spacing: .23em; }
.hero h1 { position: relative; font-family: var(--display); font-size: clamp(66px, 7.7vw, 124px); font-weight: 400; letter-spacing: -.045em; line-height: .94; }
.hero h1 span { color: var(--brass); }
.hero-jp { font-size: clamp(21px, 2.1vw, 31px); line-height: 1.75; font-weight: 500; letter-spacing: .1em; margin-top: 32px; }
.hero-lead { color: var(--hero-dim); font-size: 13px; line-height: 2.1; margin-top: 24px; }
.hero-cta { margin-top: 25px; color: var(--hero-fg); }
.hero-art { position: relative; margin-left: -90px; margin-right: -70px; align-self: center; min-width: 0; }
.art-fallback { width: 100%; aspect-ratio: 800 / 680; object-fit: contain; transition: opacity .3s; }
.art-canvas { position: absolute; inset: 0; width: 100%; height: calc(100% - 33px); opacity: 0; transition: opacity .3s; }
.hero-art.is-ready .art-canvas { opacity: 1; }
.hero-art.is-ready .art-fallback { opacity: 0; }
.hero-art figcaption { display: flex; justify-content: space-between; gap: 12px; color: var(--hero-dim); margin: 0 75px 0 90px; padding-top: 12px; border-top: 1px solid #50625a; font-family: var(--display); font-size: 9px; letter-spacing: .1em; min-height: 33px; }
.hero-bottom { display: flex; justify-content: space-between; padding-block: 24px 27px; border-top: 1px solid #ffffff1f; font-size: 11px; letter-spacing: .1em; }
.hero-bottom > span { color: var(--hero-dim); }
.hero-bottom a { font: 10px var(--display); letter-spacing: .17em; display: flex; align-items: center; gap: 35px; }
.hero-bottom a span { font-size: 24px; }

/* SERVICE — open rows, four substantial custom illustrations. */
.service-layout { display: grid; grid-template-columns: 38% 1fr; gap: 9%; }
.service-intro { position: relative; }
.service-intro > p:not(.section-label) { margin-top: 24px; color: #535d59; font-size: 13px; line-height: 2.1; }
.intro-orbit { position: relative; display: block; width: 170px; height: 170px; margin: 75px 0 0 25px; border: 1px solid #c0beb2; border-radius: 50%; }
.intro-orbit::before, .intro-orbit::after { content: ""; position: absolute; width: 100%; height: 100%; border: 1px solid #c0beb2; border-radius: 50%; left: 26px; top: -13px; }
.intro-orbit::after { left: -22px; top: 14px; border-color: #285b59; border-radius: 48% 52% 61% 39%; transform: rotate(33deg); }
.service-item { display: flex; align-items: flex-start; gap: 24px; position: relative; border-top: 1px solid #bdbeb3; padding-block: 35px; }
.service-item:last-child { border-bottom: 1px solid #bdbeb3; }
.service-no { position: absolute; top: 12px; left: 0; font: 10px var(--display); color: #6c7064; }
.service-icon { width: 96px; flex: 0 0 96px; margin-top: 14px; fill: none; stroke: var(--teal); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.service-icon .icon-solid { fill: #c0966d; stroke: none; }
.service-content { flex: 1; min-width: 0; }
.service-content h3 { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.15; letter-spacing: -.015em; }
.service-ja { font-size: 11px; margin-top: 10px; color: #655c4f; font-weight: 500; }
.service-desc { font-size: 12px; line-height: 2; margin-top: 13px; color: #535d59; max-width: 36em; }
.service-item .text-link { font-size: 11px; border-bottom: 0; gap: 30px; margin-top: 5px; color: #285b59; }
.service-item .text-link span { font-size: 20px; }

/* WORKS — a large lead story, two smaller scenes. No repeated feature cards. */
.works { background: #102322; }
.works-layout { display: grid; grid-template-columns: 1.27fr 1fr; column-gap: 5%; row-gap: 50px; align-items: start; }
.work-vision { grid-row: span 2; }
.work-item { min-width: 0; scroll-margin-top: 40px; }
.work-image { overflow: hidden; position: relative; background: #203a36; }
.work-image img { width: 100%; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.work-item:hover .work-image img { transform: scale(1.025); }
.work-vision .work-image img { aspect-ratio: .9; object-fit: cover; }
.work-device .work-image img, .work-spatial .work-image img { aspect-ratio: 1.9; object-fit: cover; }
.work-image figcaption { position: absolute; left: 16px; bottom: 12px; right: 16px; padding: 5px 8px; font-size: 9px; line-height: 1.5; color: #fff; background: #0b1a18d9; }
.work-number { position: absolute; left: 20px; top: 13px; font: 12px var(--display); color: #fff; mix-blend-mode: difference; }
.work-caption { padding-top: 24px; }
.work-caption .eyebrow { color: #d6b28d; font-size: 10px; letter-spacing: .1em; }
.work-caption h3 { margin-top: 10px; font-size: clamp(17px, 1.8vw, 25px); font-weight: 500; line-height: 1.7; }
details { margin-top: 16px; border-top: 1px solid #ffffff38; font-size: 12px; }
summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 12px; cursor: pointer; list-style: none; font-size: 11px; min-height: 44px; }
summary::-webkit-details-marker { display: none; }
summary > span { font-size: 18px; transition: transform .2s; }
details[open] summary > span { transform: rotate(45deg); }
details > p { padding-bottom: 15px; color: #c4d1c9; line-height: 2; }
.work-tech { font-family: var(--display); letter-spacing: .03em; }
details .text-link { margin-bottom: 12px; color: #d6b28d; font-size: 11px; }
.works-footer { display: flex; gap: 55px; justify-content: flex-end; margin-top: 65px; }

/* AI — a broad green plane and one restrained process diagram. */
.ai-section { position: relative; overflow: hidden; background: #285b59; color: #f1ede6; }
.ai-section .section-label > span { color: #edd0ac; }
.ai-section::before { content: ""; pointer-events: none; position: absolute; width: 750px; height: 750px; right: -350px; top: -350px; border: 1px solid #d1c1a329; border-radius: 50%; box-shadow: 0 0 0 30px #285b59, 0 0 0 31px #d1c1a324, 0 0 0 65px #285b59, 0 0 0 66px #d1c1a31c; }
.ai-layout { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: 12%; }
.ai-lead { font-size: 13px; line-height: 2.2; color: #d8e2d7; max-width: 33em; margin-top: 26px; }
.ai-expertise { padding-top: 12px; }
.ai-expertise article + article { border-top: 1px solid #b6c9b44d; margin-top: 28px; padding-top: 26px; }
.ai-expertise .eyebrow { color: #edd0ac; font-size: 10px; }
.ai-expertise h3 { font-size: 21px; font-weight: 500; margin-block: 10px; }
.ai-expertise p { font-size: 12px; color: #d8e2d7; }
.ai-steps { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 65px; border-top: 1px solid #b6c9b47d; }
.ai-steps li { position: relative; padding: 22px 0 0; display: flex; gap: 18px; align-items: center; }
.ai-steps li + li::before { content: "→"; position: absolute; right: calc(100% + 18px); color: #b6c9b4; }
.ai-steps li > span { color: #edd0ac; font: 10px var(--display); }
.ai-steps li > strong { font-size: 13px; font-weight: 400; }

/* MEMBERS — an editorial portrait treatment, ready for the actual photographs. */
.members-layout { display: grid; grid-template-columns: repeat(3,1fr); gap: 5%; align-items: start; }
.member-item:nth-child(2) { margin-top: 64px; }
.member-item:nth-child(3) { margin-top: 128px; }
/* Moderate portrait size balances a recognizable face with the biography. */
.portrait { position: relative; width: min(100%, 200px); overflow: hidden; aspect-ratio: .86; background: #2e4541; color: #d9d5c7; border-radius: 22px; border: 1px solid #ffffff40; box-shadow: 0 8px 20px #00000012; }
.member-portrait { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.portrait-1 { background: #555952; }
.portrait-2 { background: #30434c; }
.portrait-facets { position: absolute; inset: 0; background: linear-gradient(138deg, transparent 48%, #192e2c 48.1%, #263b35 75%, #9e997e33 75.1%); opacity: .9; }
.portrait-1 .portrait-facets { filter: grayscale(1); }
.portrait-2 .portrait-facets { filter: hue-rotate(35deg); }
.portrait-initials { position: absolute; top: 13%; left: 10%; font: 300 clamp(85px,11vw,160px)/1 var(--display); letter-spacing: -.08em; opacity: .6; }
.portrait-caption { position: absolute; bottom: 18px; left: 18px; font-size: 9px; color: #eee5d4; }
.portrait-no { position: absolute; top: 16px; right: 18px; font: 11px var(--display); }
.member-info { padding-top: 25px; }
.member-info .eyebrow { font-family: var(--ja); font-size: 9px; letter-spacing: .04em; color: #6c5e4b; }
.member-info h3 { font-size: 24px; font-weight: 500; margin-top: 4px; letter-spacing: .08em; }
.member-field { font: 11px/1.6 var(--display); margin-top: 9px; color: #285b59; }
.member-catch { font-size: 13px; line-height: 1.95; margin-top: 19px; }
.member-info details { border-color: #bcbdb2; }
.member-info details > p { color: #535d59; font-size: 12px; }

/* NEWS / ABOUT / CONTACT */
.news-section { padding-bottom: var(--section-space); }
.news-layout { display: grid; grid-template-columns: 33% 1fr; gap: 10%; }
.news-layout h2 { font-size: 18px; }
.news-layout li { border-top: 1px solid #bcbdb2; }
.news-layout li:last-child { border-bottom: 1px solid #bcbdb2; }
.news-layout li a { display: grid; grid-template-columns: 75px 1fr 20px; gap: 20px; padding-block: 22px; align-items: center; font-size: 12px; }
.news-layout time { color: #686c62; font-family: var(--display); font-size: 11px; }
.news-layout li b { color: #285b59; font-size: 19px; font-weight: 400; }
.about-section { background: #111a1a; }
.about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 14%; }
.about-layout h2 { font-size: clamp(22px,2.4vw,35px); }
.about-landscape { margin-top: 38px; }
.about-landscape img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: 53% 85%; border-radius: 18px; }
.about-mark { width: 180px; margin-top: 55px; opacity: .7; }
.company-info > div { display: grid; grid-template-columns: 80px 1fr; border-top: 1px solid #65736d55; padding-block: 17px; gap: 20px; font-size: 11px; }
.company-info dt { color: #a6b4ac; }
.company-info dd { line-height: 1.9; }
.clients { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; padding-top: 60px; border-top: 1px solid #65736d55; margin-top: 70px; }
.clients h3 { font-weight: 400; font-size: 11px; color: #a6b4ac; }
.clients ul { display: flex; flex-wrap: wrap; gap: 13px 30px; font-size: 11px; color: #c1c9c1; }
.clients a:hover { color: var(--brass); }
.contact-section { padding-block: 88px; background: #c0966d; color: #142423; }
.contact-layout { display: flex; justify-content: space-between; gap: 60px; align-items: center; }
.contact-layout .eyebrow { font-size: 10px; letter-spacing: .15em; margin-bottom: 24px; }
.contact-layout h2 { font-size: clamp(30px, 4vw, 56px); font-weight: 500; line-height: 1.55; }
.contact-layout p:last-child { font-size: 12px; margin-top: 23px; }
.contact-circle { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #43514b; width: 218px; height: 218px; border-radius: 50%; flex-shrink: 0; transition: background .3s,color .3s; }
.contact-circle > span:first-child { font: 12px var(--display); letter-spacing: .16em; }
.contact-circle > span:last-child { font-size: 10px; }
.contact-arrow { font-size: 55px; line-height: 1.6; font-family: Arial,sans-serif; }
.contact-circle:hover { background: #142423; color: #f1ede6; }
.site-footer { background: #0b0f10; color: #abb8b0; padding-block: 28px; font: 10px var(--display); letter-spacing: .08em; }
.site-footer .container { display: flex; justify-content: space-between; align-items: center; gap: 20px; }

/* 07 — sculptural monochrome, compact planes and oversized editorial type. */
.concept-precision-mono { --hero-bg: #101111; --hero-fg: #f0f0e9; --hero-dim: #b6bab5; --teal: #343d3c; --paper: #edede7; }
.concept-precision-mono .hero-diagonal { background: #222523; clip-path: polygon(48% 0,100% 0,100% 100%,78% 100%); }
.concept-precision-mono .hero-grid { min-height: 680px; }
.concept-precision-mono .hero-copy { padding-block: 35px 65px; }
.concept-precision-mono .hero h1 { font-size: clamp(70px,9.2vw,147px); font-weight: 500; letter-spacing: -.065em; }
.concept-precision-mono .hero h1 span { color: #edede7; -webkit-text-stroke: 1px #c8cdc7; }
.concept-precision-mono .hero-art { margin-left: -50px; margin-right: -45px; transform: rotate(-9deg); }
.concept-precision-mono .hero-art figcaption { transform: rotate(9deg); }
.concept-precision-mono .hero-jp { font-size: 22px; border-left: 2px solid #c0966d; padding-left: 22px; }
.concept-precision-mono .services { background: #dcded7; }
.concept-precision-mono .service-layout { display: block; }
.concept-precision-mono .service-intro { display: grid; grid-template-columns: 1fr 1.5fr; gap: 25px; margin-bottom: 60px; }
.concept-precision-mono .service-intro h2 { font-size: 40px; }
.concept-precision-mono .service-intro > p:not(.section-label) { grid-column: 2; margin-top: 0; }
.concept-precision-mono .intro-orbit { display: none; }
.concept-precision-mono .service-list { display: grid; grid-template-columns: repeat(4,1fr); }
.concept-precision-mono .service-item { display: block; padding: 42px 24px 0; border-top: 1px solid #a6aca1; border-left: 1px solid #a6aca1; }
.concept-precision-mono .service-item:first-child { border-left: 0; padding-left: 0; }
.concept-precision-mono .service-item:last-child { border-bottom: 0; }
.concept-precision-mono .service-no { left: 24px; }
.concept-precision-mono .service-item:first-child .service-no { left: 0; }
.concept-precision-mono .service-icon { margin: 0 0 28px; }
.concept-precision-mono .service-content h3 { font-size: 27px; min-height: 65px; }
.concept-precision-mono .service-desc { min-height: 100px; }
.concept-precision-mono .works { background: #101111; }
.concept-precision-mono .works-layout { grid-template-columns: 1fr 1fr; }
.concept-precision-mono .work-vision { grid-column: 1/-1; grid-row: auto; display: grid; grid-template-columns: 1.8fr 1fr; gap: 5%; align-items: center; padding-bottom: 12px; }
.concept-precision-mono .work-vision .work-image img { aspect-ratio: 1.5; }
.concept-precision-mono .work-device .work-image img, .concept-precision-mono .work-spatial .work-image img { aspect-ratio: 1.5; }
.concept-precision-mono .work-image { filter: saturate(.4); }
.concept-precision-mono .ai-section { background: #313b39; }
.concept-precision-mono .ai-section::before { display: none; }
.concept-precision-mono .ai-layout { grid-template-columns: 1fr 1fr; gap: 12%; }
.concept-precision-mono .members-layout { gap: 32px; }
.concept-precision-mono .member-item:nth-child(n) { margin-top: 0; }
.concept-precision-mono .portrait { aspect-ratio: 1; filter: grayscale(1); }
.concept-precision-mono .about-section { background: #171a19; }
.concept-precision-mono .contact-section { background: #e4e4dc; }

/* 08 — generous paper, a green vertical plane and raked data around polygon stones. */
.concept-garden-flow { --hero-bg: #f1ede6; --hero-fg: #172b27; --hero-dim: #53635b; }
.concept-garden-flow .site-header { background: #f1ede6; }
.concept-garden-flow .hero-diagonal { background: #dedfd3; clip-path: polygon(63% 0,100% 0,100% 100%,80% 100%); opacity: .65; }
.concept-garden-flow .hero-grid { min-height: 640px; grid-template-columns: 1fr 1.1fr; }
.concept-garden-flow .hero-art { margin-left: -50px; margin-right: -85px; }
.concept-garden-flow .hero h1 { font-size: clamp(64px,7.5vw,120px); color: #203e36; }
.concept-garden-flow .hero h1 span { color: #805c38; }
.concept-garden-flow .hero-eyebrow { color: #805c38; }
.concept-garden-flow .language-nav a[aria-current] { color: #80562f; }
.concept-garden-flow .hero-jp { font-size: 25px; }
.concept-garden-flow .hero-bottom { border-top-color: #b5bdb0; }
.concept-garden-flow .hero-art figcaption { border-top-color: #99aa9a; }
.concept-garden-flow .services { background: #244d46; color: #f1ede6; }
.concept-garden-flow .service-layout { display: grid; grid-template-columns: 30% 1fr; gap: 10%; }
.concept-garden-flow .service-intro > p:not(.section-label) { color: #d1d9c9; }
.concept-garden-flow .service-intro h2 { font-size: 32px; }
.concept-garden-flow .service-intro .section-label > span { color: #d7af86; }
.concept-garden-flow .intro-orbit { width: 130px; height: 130px; border-color: #b0c6a755; margin-top: 95px; }
.concept-garden-flow .intro-orbit::before, .concept-garden-flow .intro-orbit::after { border-color: #b0c6a755; }
.concept-garden-flow .service-list { display: grid; grid-template-columns: 1fr 1fr; gap: 35px 50px; }
.concept-garden-flow .service-item { display: block; border-color: #b0c6a755; padding-block: 32px 0; }
.concept-garden-flow .service-item:last-child { border-bottom: 0; }
.concept-garden-flow .service-no { color: #d7af86; }
.concept-garden-flow .service-icon { stroke: #d2dcc9; margin: 0 0 25px; }
.concept-garden-flow .service-content h3 { font-size: 29px; }
.concept-garden-flow .service-ja { color: #e3c5a5; }
.concept-garden-flow .service-desc { color: #d1d9c9; }
.concept-garden-flow .service-item .text-link { color: #f1ede6; }
.concept-garden-flow .works { background: #f1ede6; color: #172b27; }
.concept-garden-flow .works .section-heading > p { color: #53635b; }
.concept-garden-flow .works-layout { grid-template-columns: 1fr 1fr; gap: 65px 7%; }
.concept-garden-flow .work-vision { grid-row: auto; }
.concept-garden-flow .work-vision .work-image img { aspect-ratio: 1.08; }
.concept-garden-flow .work-device { padding-top: 150px; }
.concept-garden-flow .work-device .work-image img { aspect-ratio: 1.08; }
.concept-garden-flow .work-spatial { grid-column: 1/-1; display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 7%; }
.concept-garden-flow .work-spatial .work-image img { aspect-ratio: 1.8; }
.concept-garden-flow .work-caption .eyebrow { color: #80562f; }
.concept-garden-flow .work-caption details { border-color: #b5bdb0; }
.concept-garden-flow .work-caption details > p { color: #53635b; }
.concept-garden-flow .work-caption details .text-link { color: #285b59; }
.concept-garden-flow .ai-section { background: #c6cdb8; color: #172b27; }
.concept-garden-flow .ai-section::before { display: none; }
.concept-garden-flow .ai-section .section-label > span, .concept-garden-flow .ai-expertise .eyebrow, .concept-garden-flow .ai-steps li > span { color: #694223; }
.concept-garden-flow .ai-lead, .concept-garden-flow .ai-expertise p { color: #384c42; }
.concept-garden-flow .ai-expertise article + article, .concept-garden-flow .ai-steps { border-color: #66806b; }
.concept-garden-flow .ai-steps li + li::before { color: #285b59; }
.concept-garden-flow .member-item:nth-child(2) { margin-top: 100px; }
.concept-garden-flow .member-item:nth-child(3) { margin-top: 0; }
.concept-garden-flow .portrait { aspect-ratio: .8; }
.concept-garden-flow .about-section { background: #193932; }
.concept-garden-flow .contact-section { background: #dfd2b9; }

@media(min-width: 1600px) { .hero-grid { min-height: 740px; } }
@media(max-width: 1100px) {
  .header-inner { min-height: 128px; }
  .site-logo { width: 118px; flex-basis: 118px; }
  .global-nav { gap: 24px; }
  .header-right { gap: 28px; }
  .hero-grid, .concept-precision-mono .hero-grid, .concept-garden-flow .hero-grid { min-height: 610px; }
  .hero-art { margin-left: -100px; margin-right: -65px; }
  .hero h1 { font-size: 80px; }
  .service-layout { gap: 5%; grid-template-columns: 35% 1fr; }
  .service-icon { width: 84px; flex-basis: 84px; }
  .service-item { gap: 16px; }
  .section-heading { gap: 32px; }
  .section-heading > p { font-size: 12px; }
  .concept-precision-mono .service-list { grid-template-columns: 1fr 1fr; row-gap: 45px; }
  .concept-precision-mono .service-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .concept-precision-mono .service-content h3 { min-height: 0; }
  .concept-precision-mono .service-desc { min-height: 0; }
  .concept-garden-flow .service-layout { grid-template-columns: 1fr; }
  .concept-garden-flow .service-intro { margin-bottom: 55px; }
  .concept-garden-flow .intro-orbit { display: none; }
  .concept-garden-flow .service-item { display: flex; gap: 24px; }
  .concept-garden-flow .service-content h3 { font-size: 26px; }
  .news-layout { grid-template-columns: 29% 1fr; gap: 6%; }
  .about-layout { gap: 8%; }
  .study-concepts a > span { display: none; }
}
@media(max-width: 760px) {
  :root { --gutter: 24px; --section-space: 76px; }
  .study-bar { padding-inline: 18px; gap: 15px; min-height: 40px; font-size: 10px; }
  .study-concepts { gap: 14px; }
  .motion-toggle { border: 0; padding-left: 0; font-size: 10px; gap: 5px; }
  .header-inner { min-height: 112px; gap: 16px; }
  .site-logo { width: 103px; flex-basis: 103px; }
  .header-right { gap: 20px; }
  .menu-toggle { display: flex; align-items: center; gap: 12px; background: transparent; border: 0; padding: 8px 0; min-height: 44px; font-size: 11px; }
  .menu-toggle i { position: relative; width: 22px; height: 12px; border-block: 1px solid currentColor; }
  .menu-toggle i::before { content: ""; position: absolute; width: 15px; height: 1px; background: currentColor; right: 0; top: 5px; }
  .menu-toggle[aria-expanded=true] i { transform: rotate(-45deg); border-bottom: 0; height: 1px; }
  .menu-toggle[aria-expanded=true] i::before { top: -1px; width: 22px; transform: rotate(90deg); }
  .global-nav { display: none; position: absolute; inset: 100% 0 auto; background: var(--hero-bg); padding: 20px 24px 30px; border-block: 1px solid #77877c55; box-shadow: 0 18px 24px #0003; grid-template-columns: 1fr 1fr; gap: 18px; }
  .global-nav.is-open { display: grid; }
  .global-nav a { align-items: flex-start; border-bottom: 1px solid #77877c55; padding-bottom: 12px; }
  .global-nav a > span { font-size: 21px; }
  .language-nav { gap: 7px; font-size: 11px; }
  .hero-grid, .concept-precision-mono .hero-grid, .concept-garden-flow .hero-grid { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .hero-copy, .concept-precision-mono .hero-copy { padding: 25px 0 0; }
  .hero h1, .concept-precision-mono .hero h1, .concept-garden-flow .hero h1 { font-size: clamp(55px,12.6vw,95px); }
  .hero-eyebrow { font-size: 10px; margin-bottom: 26px; }
  .hero-jp, .concept-garden-flow .hero-jp { margin-top: 23px; font-size: 22px; }
  .concept-precision-mono .hero-jp { font-size: 19px; }
  .hero-lead { font-size: 11px; margin-top: 20px; }
  .hero-cta { font-size: 11px; margin-top: 17px; }
  .hero-art, .concept-precision-mono .hero-art, .concept-garden-flow .hero-art { width: calc(100% + 48px); align-self: stretch; margin: -25px -24px 0; transform: none; }
  .hero-art .art-fallback { max-height: 370px; object-fit: contain; }
  .hero-art figcaption, .concept-precision-mono .hero-art figcaption { margin: 0 24px 0; transform: none; font-size: 8px; }
  .hero-diagonal { clip-path: polygon(100% 0,100% 100%,0 100%); opacity: .5; }
  .concept-precision-mono .hero-diagonal { clip-path: polygon(100% 15%,100% 100%,0 100%); }
  .concept-garden-flow .hero-diagonal { clip-path: polygon(100% 25%,100% 100%,0 100%); }
  .hero-bottom { padding-block: 22px; }
  .hero-bottom > span { font-size: 9px; }
  .hero-bottom a { font-size: 8px; letter-spacing: .05em; gap: 12px; }
  .hero-bottom a span { font-size: 18px; }
  h2 { font-size: 27px; }
  .section-label { margin-bottom: 23px; font-size: 11px; gap: 20px; }
  .service-layout, .concept-garden-flow .service-layout { display: block; }
  .service-intro { margin-bottom: 38px; }
  .service-intro > p:not(.section-label) { font-size: 12px; margin-top: 17px; }
  .intro-orbit { display: none; }
  .service-item { padding-block: 33px; gap: 24px; }
  .service-icon { flex-basis: 80px; width: 80px; margin-top: 12px; }
  .service-content h3 { font-size: 28px; }
  .service-ja { font-size: 10px; }
  .service-desc { font-size: 11px; line-height: 2.1; }
  .service-item .text-link { font-size: 10px; gap: 20px; }
  .section-heading { display: block; margin-bottom: 35px; }
  .section-heading > p { font-size: 12px; margin-top: 20px; }
  .works-layout, .concept-precision-mono .works-layout, .concept-garden-flow .works-layout { display: block; }
  .work-item + .work-item { margin-top: 40px; }
  .work-vision .work-image img { aspect-ratio: 1.1; }
  .work-device .work-image img, .work-spatial .work-image img { aspect-ratio: 1.5; }
  .work-caption { padding-top: 20px; }
  .work-caption h3 { font-size: 19px; }
  .work-caption .eyebrow { font-size: 9px; }
  .works-footer { display: block; margin-top: 40px; }
  .works-footer .text-link { display: flex; justify-content: space-between; font-size: 12px; margin-top: 12px; }
  .ai-layout, .concept-precision-mono .ai-layout { display: block; }
  .ai-lead { font-size: 12px; margin-top: 20px; }
  .ai-expertise { margin-top: 30px; }
  .ai-expertise h3 { font-size: 19px; }
  .ai-expertise p { font-size: 11px; }
  .ai-steps { grid-template-columns: 1fr 1fr; gap: 25px 15px; margin-top: 40px; }
  .ai-steps li { padding-top: 18px; gap: 12px; }
  .ai-steps li + li::before { display: none; }
  .ai-steps li:nth-child(n+3) { border-top: 1px solid #b6c9b47d; }
  .ai-steps li > strong { font-size: 12px; }
  .members-layout { display: block; }
  .member-item:nth-child(n), .concept-garden-flow .member-item:nth-child(n) { margin-top: 40px; }
  .member-item:first-child { margin-top: 0; }
  .member-item { display: grid; grid-template-columns: 31% 1fr; gap: 22px; align-items: start; padding-top: 25px; border-top: 1px solid #bcbdb2; }
  .portrait, .concept-precision-mono .portrait, .concept-garden-flow .portrait { aspect-ratio: .72; }
  .portrait-initials { font-size: clamp(35px,9vw,60px); top: 30px; }
  .portrait-caption { font-size: 7px; line-height: 1.6; bottom: 8px; left: 8px; right: 8px; }
  .portrait-no { font-size: 8px; top: 8px; right: 8px; }
  .member-info { padding-top: 0; }
  .member-info .eyebrow { font-size: 8px; }
  .member-info h3 { font-size: 21px; }
  .member-field { font-size: 9px; }
  .member-catch { font-size: 11px; margin-top: 15px; }
  .member-info details > p { font-size: 11px; }
  .news-layout { display: block; }
  .news-layout > ul { margin-top: 28px; }
  .news-layout li a { grid-template-columns: 55px 1fr 15px; gap: 15px; font-size: 11px; padding-block: 20px; }
  .news-layout time { font-size: 10px; }
  .about-layout { display: block; }
  .about-mark { width: 120px; margin: 35px 0; }
  .company-info > div { grid-template-columns: 70px 1fr; gap: 15px; font-size: 11px; }
  .clients { display: block; padding-top: 30px; margin-top: 35px; }
  .clients ul { gap: 10px 20px; margin-top: 18px; font-size: 10px; }
  .contact-section { padding-block: 60px; }
  .contact-layout { display: block; }
  .contact-layout h2 { font-size: 33px; }
  .contact-layout p:last-child { font-size: 11px; }
  .contact-circle { width: 150px; height: 150px; margin-top: 35px; margin-left: auto; }
  .contact-arrow { font-size: 38px; }
  .contact-circle > span:first-child { font-size: 10px; }
  .contact-circle > span:last-child { font-size: 8px; }
  .site-footer .container { font-size: 9px; flex-wrap: wrap; gap: 12px; }
  .site-footer .container > span:nth-child(2) { display: none; }
  .concept-precision-mono .service-intro { display: block; margin-bottom: 40px; }
  .concept-precision-mono .service-intro h2 { font-size: 28px; }
  .concept-precision-mono .service-intro > p:not(.section-label) { margin-top: 18px; }
  .concept-precision-mono .service-list { display: block; }
  .concept-precision-mono .service-item, .concept-precision-mono .service-item:first-child, .concept-precision-mono .service-item:nth-child(3) { display: flex; border-left: 0; padding: 33px 0; }
  .concept-precision-mono .service-no { left: 0; }
  .concept-precision-mono .service-icon { margin: 15px 0 0; }
  .concept-precision-mono .work-vision { display: block; }
  .concept-precision-mono .members-layout { display: block; }
  .concept-garden-flow .service-item { display: flex; gap: 24px; padding-block: 33px; }
  .concept-garden-flow .service-icon { margin: 12px 0 0; }
  .concept-garden-flow .service-list { display: block; }
  .concept-garden-flow .service-intro h2 { font-size: 28px; }
  .concept-garden-flow .work-device { padding-top: 0; }
  .concept-garden-flow .work-spatial { display: block; }
}
/* With scripts disabled the four navigation links remain directly available. */
@media(max-width: 760px) {
  html:not(.js) .header-inner { align-items: flex-start; padding-block: 20px; }
  html:not(.js) .header-right { flex-direction: column-reverse; align-items: flex-end; gap: 12px; }
  html:not(.js) .menu-toggle { display: none; }
  html:not(.js) .global-nav { display: grid; position: static; padding: 0; border: 0; box-shadow: none; gap: 14px; }
  html:not(.js) .global-nav a > span { font-size: 15px; }
}
@media(max-width: 370px) {
  :root { --gutter: 20px; }
  .study-bar { padding-inline: 12px; gap: 10px; }
  .study-concepts { gap: 10px; }
  .motion-toggle { font-size: 9px; }
  .service-item, .concept-garden-flow .service-item { gap: 15px; }
  .service-icon { width: 74px; flex-basis: 74px; }
  .service-content h3 { font-size: 25px; }
  .header-right { gap: 14px; }
  .hero-bottom a { font-size: 7px; gap: 8px; }
}
@media(prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.motion-paused { scroll-behavior: auto; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { transition: none !important; }
@media print {
  .study-bar, .art-canvas, .menu-toggle, .hero-bottom, .contact-circle { display: none; }
  .hero-art.is-ready .art-fallback { opacity: 1; }
  body { color: #111; background: #fff; }
  .section-pad { padding-block: 35px; }
  .hero-grid { min-height: auto; }
  details > p { display: block; }
}