:root {
  --bone: #f6f2ea;
  --paper: #f6f2ea;
  --lime: #ccd8e7;
  --ink: #554b57;
  --clay: #7b3042;
  --moss: #bbb7b2;
  --blue: #7b3042;
  --line: rgba(85, 75, 87, 0.22);
  --light-line: rgba(246, 242, 234, 0.34);
  --edge: clamp(1.15rem, 3.3vw, 3.8rem);
  --pointer-x: 66%;
  --pointer-y: 45%;
  color-scheme: light dark;
  font-family: "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--ink); background: var(--paper); }
body.portal-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
a { text-decoration-thickness: 1px; text-underline-offset: .22em; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

.skip-link { position: fixed; z-index: 200; top: .7rem; left: .7rem; padding: .8rem 1rem; color: var(--bone); background: var(--ink); transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: none; }
.scroll-progress { position: fixed; z-index: 102; inset: 0 0 auto; height: 2px; pointer-events: none; }
.scroll-progress span { display: block; width: 100%; height: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; }

.site-header { position: fixed; z-index: 100; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 5.3rem; padding: 0 var(--edge); color: var(--bone); transition: min-height .25s, color .25s, background .25s, border .25s; }
.site-header::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(rgba(85,75,87,.54), transparent); content: ""; opacity: 1; transition: opacity .25s; }
.site-header.scrolled { min-height: 4.35rem; color: var(--ink); border-bottom: 1px solid var(--line); background: rgba(246,242,234,.92); backdrop-filter: blur(16px); }
.site-header.scrolled::before { opacity: 0; }
.brand { display: inline-flex; align-items: baseline; justify-self: start; gap: .75rem; width: max-content; text-decoration: none; }
.brand-cn { font-family: "Noto Serif SC", "Source Han Serif SC", SimSun, serif; font-size: 1.35rem; font-weight: 600; letter-spacing: .18em; }
.brand-en { font-family: Arial, sans-serif; font-size: .58rem; letter-spacing: .23em; opacity: .65; }
.main-nav { display: flex; align-items: center; gap: clamp(.8rem, 1.55vw, 1.8rem); }
.main-nav a, .text-action { position: relative; padding: .45rem 0; border: 0; color: inherit; background: none; font-size: .7rem; letter-spacing: .2em; text-decoration: none; opacity: .7; }
.main-nav a::after, .text-action::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: currentColor; content: ""; transform: scaleX(0); transform-origin: right; transition: transform .22s; }
.main-nav a:hover, .text-action:hover { opacity: 1; }
.main-nav a:hover::after, .text-action:hover::after { transform: scaleX(1); transform-origin: left; }
.header-actions { display: flex; align-items: center; justify-self: end; gap: 1.2rem; }
.menu-button { display: none; width: 2.5rem; height: 2.5rem; padding: .68rem; border: 1px solid currentColor; border-radius: 50%; color: inherit; background: transparent; opacity: .75; }
.menu-button span { display: block; height: 1px; margin: .3rem 0; background: currentColor; transition: transform .2s; }

.hero { position: relative; isolation: isolate; min-height: 100svh; overflow: hidden; color: var(--bone); background: var(--ink); }
.hero-media, .hero-media::after, .hero-slide, .hero-slide img, .hero-grain { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media::after { z-index: 4; background: radial-gradient(circle 22rem at var(--pointer-x) var(--pointer-y), rgba(255,255,255,.1), transparent 72%), linear-gradient(90deg,rgba(42,35,40,.48),rgba(42,35,40,.08) 62%,rgba(42,35,40,.16)); content: ""; pointer-events: none; }
.hero-slide { z-index: 1; margin: 0; overflow: hidden; opacity: 0; pointer-events: none; backface-visibility: hidden; transform: translateZ(0); }
.hero-slide.is-active, .hero-slide.is-leaving { opacity: 1; }
.hero-slide.is-active { z-index: 2; }
.hero-slide.is-leaving { z-index: 1; }
.hero-slide.is-entering { z-index: 3; }
.hero-slide--one.is-entering { animation: circle-reveal 1.45s cubic-bezier(.72,0,.2,1) both; }
.hero-slide--two.is-entering { transform-origin: 88% 50%; animation: frame-reveal 1.35s cubic-bezier(.72,0,.2,1) both; will-change: transform, opacity; }
.hero-slide--three.is-entering { animation: diagonal-reveal 1.45s cubic-bezier(.72,0,.2,1) both; }
.hero-slide img { object-fit: cover; object-position: center; filter: saturate(.88) contrast(1.02); transform: scale(1.04); transition: transform 7s ease-out; }
.hero-slide.is-active img { transform: scale(1.005); }
.hero-slide--two img { object-position: 51% center; }
.hero-slide--three img { object-position: center 46%; }
.hero-slide figcaption { position: absolute; z-index: 2; right: var(--edge); bottom: 6.5rem; display: grid; justify-items: end; gap: .24rem; color: var(--bone); text-align: right; opacity: 0; transform: translateY(.65rem); transition: opacity .55s .5s, transform .65s .5s; }
.hero-slide.is-active figcaption { opacity: 1; transform: none; }
.hero-slide.is-leaving figcaption { opacity: 0; transform: translateY(-.4rem); transition-delay: 0s; }
.hero-slide figcaption span,.hero-slide figcaption small { font: .48rem Arial,sans-serif; letter-spacing: .18em; opacity: .58; }
.hero-slide figcaption b { font-family: "Noto Serif SC",STSong,serif; font-size: .78rem; font-weight: 400; letter-spacing: .1em; }
.hero-grain { z-index: 3; opacity: .16; background-image: radial-gradient(rgba(255,255,255,.5) .4px, transparent .6px), radial-gradient(rgba(0,0,0,.4) .4px, transparent .6px); background-position: 0 0, 4px 7px; background-size: 7px 7px, 9px 9px; mix-blend-mode: soft-light; pointer-events: none; }
.hero-content { position: relative; z-index: 5; min-height: 100svh; }
.hero-message { position: absolute; top: 50%; left: var(--edge); width: calc(100vw - 2 * var(--edge)); opacity: 0; transform: translateY(calc(-50% + 1.5rem)); pointer-events: none; transition: opacity .3s, transform .58s cubic-bezier(.2,.75,.25,1); }
.hero-message.is-active { opacity: 1; transform: translateY(-50%); pointer-events: auto; transition-delay: .48s; }
.hero-message.is-leaving { opacity: 0; transform: translateY(calc(-50% - 1rem)); transition-delay: 0s; }
.eyebrow { display: flex; align-items: center; gap: .8rem; margin: 0 0 clamp(1.6rem,3vh,2.7rem); font-size: clamp(.82rem,1.05vw,1rem); font-weight: 600; letter-spacing: .16em; }
.eyebrow i { width: clamp(2.5rem,6vw,6rem); height: 1px; background: currentColor; opacity: .5; }
.live-dot { display: inline-flex; align-items: center; gap: .62rem; }
.live-dot::before { width: .42rem; height: .42rem; border-radius: 50%; background: #df654a; box-shadow: 0 0 0 .32rem rgba(223,101,74,.16); content: ""; animation: live-pulse 2.2s ease-out infinite; }
.hero h1, .hero-message h2 { width: min(76rem,82vw); max-width: calc(100vw - 2 * var(--edge)); margin: 0; font-family: "Microsoft YaHei UI Light", "Noto Sans SC", sans-serif; font-size: clamp(3.1rem,5.65vw,7rem); font-weight: 300; line-height: .98; letter-spacing: -.065em; text-shadow: 0 .08em .5em rgba(10,10,9,.2); }
.color-title { --color-x: 50%; display: inline-block; color: var(--bone); background: radial-gradient(circle 13rem at var(--color-x) 50%, #f4cf86 0%, #df654a 22%, #9d5dc9 43%, #2447ff 62%, #6f9b79 82%, #eee9df 100%); background-size: 115% 100%; background-clip: text; transition: color .25s, transform .25s, filter .25s; }
.color-title:hover { color: transparent; text-shadow: none; filter: saturate(1.18) brightness(1.08); transform: translateY(-.035em); }
.hero-copy { display: block; width: min(42rem,64vw); margin-top: clamp(1.5rem,3vh,2.5rem); }
.hero-copy p { margin: 0; font-size: clamp(.82rem,1vw,1rem); line-height: 1.9; letter-spacing: .08em; }
.problem-spectrum { display: flex; flex-wrap: wrap; gap: .45rem .7rem; margin: clamp(1.25rem,2.5vh,2rem) 0 0; padding: .72rem 0 0; border-top: 1px solid var(--light-line); list-style: none; }
.problem-spectrum li { display: flex; align-items: center; gap: .7rem; padding: 0; font-size: .58rem; letter-spacing: .13em; }
.problem-spectrum li:not(:last-child)::after { color: #f4cf86; content: "·"; opacity: .75; }
.hero-portals { position: absolute; right: var(--edge); bottom: clamp(2.4rem,5vh,4.2rem); display: grid; grid-template-columns: repeat(2,minmax(17rem,1fr)); gap: .5rem; width: min(43rem,48vw); }
.portal-button { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; gap: .42rem 1rem; min-height: 7rem; padding: 1.2rem; border: 0; color: var(--bone); background: rgba(85,75,87,.36); text-align: left; backdrop-filter: blur(9px); transition: color .22s, background .22s, transform .22s; }
.portal-button > span { grid-row: 1 / 3; align-self: start; font: .58rem Arial, sans-serif; letter-spacing: .12em; opacity: .6; }
.portal-button b { align-self: end; font-family: "Noto Serif SC", STSong, serif; font-size: 1.2rem; font-weight: 500; letter-spacing: .12em; }
.portal-button small { font-size: .64rem; letter-spacing: .06em; opacity: .62; }
.portal-button i { grid-column: 3; grid-row: 1 / 3; font-style: normal; transition: transform .2s; }
.portal-button:hover { color: var(--ink); background: var(--bone); transform: translateY(-.15rem); }
.portal-button:hover i { transform: translate(.2rem,-.2rem); }
.hero-note { position: absolute; z-index: 7; right: var(--edge); bottom: 1.1rem; margin: 0; font: .5rem Arial, sans-serif; letter-spacing: .18em; opacity: .58; }
.hero-side { position: absolute; z-index: 6; top: 50%; right: calc(var(--edge)*.32); margin: 0; font: .5rem Arial, sans-serif; letter-spacing: .2em; opacity: .5; transform: translate(50%,-50%) rotate(90deg); }
.unit-mark { position: absolute; z-index: 7; top: 7.2rem; right: var(--edge); display: grid; justify-items: end; gap: .25rem; }
.unit-mark span { font: .5rem Arial,sans-serif; letter-spacing: .2em; opacity: .5; }
.unit-mark strong { font-family: "Noto Serif SC",STSong,serif; font-size: .82rem; font-weight: 400; letter-spacing: .24em; }
.visual-progress { position: absolute; z-index: 7; right: var(--edge); bottom: 3.8rem; display: grid; grid-template-columns: repeat(3,3.4rem); gap: .35rem; }
.visual-progress span { height: 2px; overflow: hidden; background: rgba(246,242,234,.25); }
.visual-progress span::after { display: block; width: 100%; height: 100%; background: var(--bone); content: ""; transform: scaleX(0); transform-origin: left; }
.visual-progress span.is-active::after { animation: active-progress 7s linear both; }
.exhibit-plaque { position: absolute; z-index: 7; top: clamp(10rem,19vh,13rem); right: var(--edge); width: min(13rem,15vw); padding: 1rem 1rem 1.1rem; border-top: 1px solid rgba(246,242,234,.72); border-bottom: 1px solid var(--light-line); color: var(--bone); background: rgba(85,75,87,.2); backdrop-filter: blur(10px); }
.exhibit-plaque p { display: flex; justify-content: space-between; margin: 0 0 1.15rem; font: .5rem Arial,sans-serif; letter-spacing: .18em; opacity: .7; }
.exhibit-plaque p b { font-weight: 400; }
.exhibit-plaque h2 { margin: 0; font-family: "Noto Serif SC",STSong,serif; font-size: clamp(1.25rem,1.7vw,1.8rem); font-weight: 400; letter-spacing: .14em; }
.exhibit-plaque em { display: block; margin-top: .35rem; font: italic .55rem Georgia,serif; letter-spacing: .08em; opacity: .58; }
.exhibit-plaque dl { display: grid; gap: .52rem; margin: 1.15rem 0 0; padding-top: .85rem; border-top: 1px solid var(--light-line); }
.exhibit-plaque dl div { display: grid; grid-template-columns: 2.5rem 1fr; gap: .5rem; }
.exhibit-plaque dt,.exhibit-plaque dd { margin: 0; font-size: .52rem; line-height: 1.5; letter-spacing: .08em; }
.exhibit-plaque dt { opacity: .52; }
.gallery-route { position: absolute; z-index: 7; bottom: clamp(5.1rem,9vh,7.2rem); left: var(--edge); width: min(27rem,36vw); }
.gallery-route > p { margin: 0 0 .65rem; font: .48rem Arial,sans-serif; letter-spacing: .22em; opacity: .55; }
.gallery-route ol { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; padding: 0; border-top: 1px solid var(--light-line); list-style: none; }
.gallery-route li { position: relative; display: grid; gap: .18rem; padding: .72rem .75rem 0 0; opacity: .38; }
.gallery-route li::before { position: absolute; top: -3px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; }
.gallery-route li.current { opacity: 1; }
.gallery-route li.current::before { background: #df654a; box-shadow: 0 0 0 .28rem rgba(223,101,74,.18); }
.gallery-route span,.gallery-route small { font: .45rem Arial,sans-serif; letter-spacing: .16em; }
.gallery-route b { font-family: "Noto Serif SC",STSong,serif; font-size: .68rem; font-weight: 400; letter-spacing: .13em; }
.gallery-route small { opacity: .58; }
.cursor-readout { position: absolute; z-index: 7; bottom: 1.05rem; left: var(--edge); display: flex; gap: .6rem; align-items: center; font: .46rem Arial,sans-serif; letter-spacing: .14em; opacity: .54; }
.cursor-readout b { padding-left: .65rem; border-left: 1px solid var(--light-line); color: #f4cf86; font-weight: 400; }

.texture-anchor { position: absolute; z-index: 9; top: 35%; left: 75%; display: flex; align-items: center; gap: .65rem; padding: .65rem; border: 0; color: #252522; background: transparent; transform: translate(-50%,-50%); }
.texture-anchor > span { position: relative; width: .75rem; height: .75rem; border: 2px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 .3rem rgba(36,71,255,.2); }
.texture-anchor > span::before, .texture-anchor > span::after { position: absolute; inset: 50% auto auto 50%; width: 2.1rem; height: 2.1rem; border: 1px solid rgba(36,71,255,.65); border-radius: 50%; content: ""; transform: translate(-50%,-50%); animation: anchor-pulse 2.4s ease-out infinite; }
.texture-anchor > span::after { animation-delay: 1.2s; }
.texture-anchor b { padding: .45rem .62rem; border: 1px solid rgba(37,37,34,.16); border-radius: 99rem; background: rgba(245,241,232,.82); box-shadow: 0 .35rem 1rem rgba(23,23,22,.1); font-size: .6rem; letter-spacing: .12em; opacity: 0; transform: translateX(-.35rem); transition: opacity .18s, transform .18s; backdrop-filter: blur(8px); white-space: nowrap; }
.texture-anchor:hover b, .texture-anchor:focus-visible b, .texture-anchor[aria-expanded="true"] b { opacity: 1; transform: none; }
.texture-card { position: absolute; z-index: 25; top: 18%; left: 60%; width: min(24rem,31vw); padding: .55rem; border: 1px solid rgba(238,233,223,.45); color: var(--ink); background: rgba(244,240,232,.97); box-shadow: 0 1.5rem 5rem rgba(10,10,9,.3); opacity: 0; transform: translateY(1rem) scale(.97); visibility: hidden; pointer-events: none; transition: opacity .24s, transform .3s, visibility .24s; backdrop-filter: blur(14px); }
.texture-card.open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.texture-card figure { height: clamp(16rem,46vh,27rem); margin: 0; overflow: hidden; background: #d8d1c5; }
.texture-card figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; filter: saturate(.9) contrast(1.07) brightness(1.05); }
.texture-close { position: absolute; z-index: 2; top: .9rem; right: .9rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0; border: 1px solid rgba(23,23,22,.22); border-radius: 50%; color: var(--ink); background: rgba(238,233,223,.86); font-size: 1.25rem; }
.texture-card > div { display: grid; gap: .52rem; padding: 1rem .75rem .8rem; }
.texture-card p, .texture-card h2, .texture-card span, .texture-card small { margin: 0; }
.texture-card p { color: var(--blue); font: 700 .52rem Arial,sans-serif; letter-spacing: .18em; }
.texture-card h2 { font-family: "Noto Serif SC",STSong,serif; font-size: 1.2rem; font-weight: 500; letter-spacing: .08em; }
.texture-card span { font-size: .7rem; line-height: 1.75; letter-spacing: .06em; }
.texture-card small { padding-top: .6rem; border-top: 1px solid var(--line); font-size: .58rem; line-height: 1.65; opacity: .6; }
.brush-cursor { position: fixed; z-index: 120; top: 0; left: 0; width: 2.5rem; height: 3rem; pointer-events: none; opacity: 0; filter: drop-shadow(0 .2rem .3rem rgba(16,16,15,.3)); transform: translate3d(-50%,-96%,0) rotate(148deg) scale(.8); transform-origin: 50% 96%; transition: opacity .18s, transform .18s; }
.brush-cursor span { position: absolute; display: block; }
.brush-cursor .handle { top: 0; left: 1rem; width: .48rem; height: 1.65rem; border: 1px solid rgba(60,37,25,.36); border-radius: .34rem .34rem .18rem .18rem; background: linear-gradient(90deg,#8e533d,#c9815e 48%,#764431); }
.brush-cursor .ferrule { top: 1.38rem; left: .72rem; width: 1.05rem; height: .58rem; border: 1px solid rgba(58,62,62,.42); border-radius: .08rem; background: linear-gradient(90deg,#7d8584,#d7dbd7 48%,#737b7b); }
.brush-cursor .bristle { top: 1.88rem; left: .65rem; width: 1.2rem; height: .88rem; border-radius: .08rem .08rem .42rem .42rem; background: linear-gradient(#e7dcc5 0 64%,#63889a 64%); }
.hero.observing .brush-cursor { opacity: 1; transform: translate3d(-50%,-96%,0) rotate(148deg) scale(1); }

.material-corridor { position: relative; padding: clamp(7rem,11vw,11rem) var(--edge) clamp(6rem,9vw,9rem); color: var(--ink); background: var(--paper); }
.material-corridor::before { position: absolute; top: 0; right: var(--edge); left: var(--edge); height: 1px; background: var(--line); content: ""; }
.material-corridor-head { display: grid; grid-template-columns: .42fr 1.15fr .68fr; gap: clamp(2rem,5vw,6rem); align-items: end; margin-bottom: clamp(3rem,6vw,6rem); }
.material-section-index { align-self: start; margin: .55rem 0 0; font-size: .72rem; font-weight: 600; letter-spacing: .14em; }
.material-corridor-head h2 { margin: 0; font-family: "Microsoft YaHei UI Light","Noto Sans SC",sans-serif; font-size: clamp(3rem,5.4vw,6.8rem); font-weight: 300; line-height: 1.02; letter-spacing: -.07em; }
.material-corridor-head h2 span { color: var(--clay); }
.material-corridor-head > div { display: grid; gap: 1.7rem; }
.material-corridor-head > div p { margin: 0; font-size: clamp(.82rem,1vw,1rem); line-height: 1.95; letter-spacing: .07em; }
.material-corridor-head > div a { justify-self: start; padding-bottom: .45rem; border-bottom: 1px solid currentColor; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-decoration: none; }
.material-corridor-head > div i { display: inline-block; margin-left: .55rem; font-style: normal; transition: transform .22s; }
.material-corridor-head > div a:hover i { transform: translateX(.35rem); }
.brand-chooser { display: grid; grid-template-columns: minmax(18rem,.42fr) minmax(0,1fr); min-height: clamp(42rem,72vh,54rem); border: 1px solid var(--line); background: var(--line); }
.brand-tabs { display: flex; flex-direction: column; gap: 1px; background: var(--line); }
.brand-tab { position: relative; display: grid; grid-template-columns: 2.4rem 1fr; gap: .45rem 1rem; align-content: center; flex: 1; min-height: 7rem; padding: 1.25rem 1.5rem; border: 0; color: var(--ink); background: var(--paper); text-align: left; transition: color .28s,background .28s,padding .3s; }
.brand-tab::after { position: absolute; top: 50%; right: 1.4rem; width: .55rem; height: .55rem; border: 1px solid currentColor; border-radius: 50%; content: ""; opacity: .35; transform: translateY(-50%); }
.brand-tab > span { grid-row: 1 / 3; align-self: center; font-size: .62rem; font-weight: 600; letter-spacing: .12em; opacity: .5; }
.brand-tab strong { align-self: end; font-family: Arial,sans-serif; font-size: clamp(1.05rem,1.35vw,1.5rem); font-weight: 500; letter-spacing: .045em; }
.brand-tab small { align-self: start; padding-right: 1.5rem; font-size: .6rem; line-height: 1.5; letter-spacing: .06em; opacity: .66; }
.brand-tab.is-active { padding-left: 2rem; color: var(--ink); background: #e9e1d8; box-shadow: inset .28rem 0 0 #8f3e4f; }
.brand-tab[data-brand-target="graphenstone"].is-active { background: #e1e8de; box-shadow: inset .28rem 0 0 #58725e; }
.brand-tab[data-brand-target="polytec"].is-active { background: #e1e9ec; box-shadow: inset .28rem 0 0 #537482; }
.brand-tab[data-brand-target="durite"].is-active { background: #eee2d8; box-shadow: inset .28rem 0 0 #a56449; }
.brand-tab.is-active::after { border-color: #8f3e4f; background: #8f3e4f; box-shadow: 0 0 0 .3rem rgba(143,62,79,.12); opacity: 1; }
.brand-tab[data-brand-target="graphenstone"].is-active::after { border-color: #58725e; background: #58725e; }
.brand-tab[data-brand-target="polytec"].is-active::after { border-color: #537482; background: #537482; }
.brand-tab[data-brand-target="durite"].is-active::after { border-color: #a56449; background: #a56449; }
.brand-tab:hover:not(.is-active) { background: #eee8df; }
.brand-stage { position: relative; min-width: 0; overflow: hidden; color: var(--ink); background: #eee9e1; }
.brand-profile { --accent: #8f3e4f; --surface: #eee7de; --surface-rgb: 238,231,222; --surface-end: #f7f2eb; position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: clamp(2.5rem,5vw,5.5rem); overflow: hidden; background: linear-gradient(135deg,var(--surface),var(--surface-end) 72%); opacity: 0; transform: translateX(2rem); visibility: hidden; pointer-events: none; transition: opacity .42s,transform .55s cubic-bezier(.2,.75,.25,1),visibility .42s; }
.brand-profile::before { position: absolute; right: -3vw; bottom: -4vw; color: color-mix(in srgb,var(--accent) 7%,transparent); font: 500 clamp(7rem,13vw,15rem)/.8 Arial,sans-serif; letter-spacing: -.07em; content: attr(data-brand-profile); text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.brand-profile[data-brand-profile="graphenstone"] { --accent: #58725e; --surface: #e4eae1; --surface-rgb: 228,234,225; --surface-end: #f4f4ed; }
.brand-profile[data-brand-profile="polytec"] { --accent: #537482; --surface: #e3eaec; --surface-rgb: 227,234,236; --surface-end: #f3f2ed; }
.brand-profile[data-brand-profile="durite"] { --accent: #a56449; --surface: #eee3da; --surface-rgb: 238,227,218; --surface-end: #f8f1e9; }
.brand-profile--visual { background: var(--surface); }
.brand-profile--visual::before { display: none; }
.brand-effect-visual { position: absolute; z-index: 0; inset: 0; margin: 0; overflow: hidden; background: #8b8179; }
.brand-effect-visual::after { position: absolute; inset: 0; background: linear-gradient(90deg,var(--surface) 0%,rgba(var(--surface-rgb),.97) 35%,rgba(var(--surface-rgb),.79) 57%,rgba(var(--surface-rgb),.18) 82%,rgba(var(--surface-rgb),.04) 100%); content: ""; }
.brand-effect-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; filter: saturate(.86) contrast(.96); transform: scale(1.015); }
.brand-profile[data-brand-profile="graphenstone"] .brand-effect-visual img { object-position: 62% center; }
.brand-profile[data-brand-profile="polytec"] .brand-effect-visual img { object-position: 64% center; }
.brand-profile[data-brand-profile="durite"] .brand-effect-visual img { object-position: 62% center; }
.brand-effect-visual figcaption { position: absolute; z-index: 2; right: 1.4rem; bottom: 1.4rem; padding: .55rem .75rem; color: #fff; background: rgba(31,29,28,.56); backdrop-filter: blur(8px); font-size: .55rem; letter-spacing: .1em; }
.brand-profile--visual > header,
.brand-profile--visual > .brand-scope,
.brand-profile--visual > ul,
.brand-profile--visual > a { width: 74%; }
.brand-profile--visual > .brand-scope { background: rgba(247,242,235,.78); backdrop-filter: blur(11px); }
.brand-profile.is-active { z-index: 2; opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.brand-profile header { position: relative; z-index: 1; text-align: center; }
.brand-profile header p { margin: 0 0 1.2rem; color: var(--accent); font-size: clamp(.74rem,.9vw,.88rem); font-weight: 600; letter-spacing: .14em; }
.brand-profile header h3 { display: flex; align-items: center; justify-content: center; width: min(35rem,86%); height: clamp(4rem,7.5vw,7.5rem); margin: 0 auto; }
.brand-profile header h3 > img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.brand-profile header h3.brand-logo-topproject { gap: 1.2rem; width: min(34rem,82%); }
.topproject-mark { position: relative; flex: 0 0 clamp(4.5rem,6vw,6rem); width: clamp(4.5rem,6vw,6rem); aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: #0b0b0c; }
.topproject-mark img { position: absolute; top: -25%; left: 50%; width: 360%; max-width: none; height: auto; transform: translateX(-50%); }
.topproject-word { color: #201f20; font: 600 clamp(2.3rem,4.3vw,5rem)/1 Arial,sans-serif; letter-spacing: -.045em; white-space: nowrap; }
.topproject-word b { color: #c19a27; font-weight: 600; }
.brand-profile header h3.brand-logo-invert { width: clamp(9rem,14vw,14rem); padding: .65rem 1.3rem; background: var(--accent); }
.brand-profile header > span { display: block; margin-top: 1.35rem; font-size: clamp(.94rem,1.15vw,1.18rem); line-height: 1.6; letter-spacing: .07em; }
.brand-scope { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(53,47,51,.18); border-bottom: 1px solid rgba(53,47,51,.18); }
.brand-scope section { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 1.5rem clamp(1rem,2vw,2rem) 1.6rem; text-align: center; transition: color .28s,background .28s,box-shadow .32s,transform .32s cubic-bezier(.2,.75,.25,1); }
.brand-scope section + section { border-left: 1px solid rgba(53,47,51,.18); }
.brand-scope h4 { margin: 0 0 .8rem; color: var(--accent); font-size: clamp(.7rem,.82vw,.82rem); font-weight: 600; letter-spacing: .12em; }
.brand-scope p { margin: 0; font-size: clamp(.79rem,.9vw,.9rem); line-height: 1.78; letter-spacing: .04em; }
.brand-profile > ul { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.brand-profile > ul li { padding: .55rem .82rem; border: 1px solid color-mix(in srgb,var(--accent) 45%,transparent); border-radius: 99rem; color: var(--accent); font-size: clamp(.64rem,.74vw,.74rem); font-weight: 600; letter-spacing: .08em; transition: color .24s,background .24s,transform .28s cubic-bezier(.2,.75,.25,1); }
.brand-profile > a { position: relative; z-index: 1; align-self: center; padding-bottom: .4rem; border-bottom: 1px solid currentColor; font-size: clamp(.74rem,.84vw,.84rem); font-weight: 600; letter-spacing: .1em; text-align: center; text-decoration: none; }
.brand-profile > a i { display: inline-block; margin-left: .55rem; font-style: normal; transition: transform .22s; }
.brand-profile > a:hover i { transform: translateX(.35rem); }
.brand-profile.is-active .brand-effect-visual img { animation: brand-media-in .9s cubic-bezier(.2,.75,.25,1) both; }
.brand-profile.is-active .brand-effect-visual figcaption { animation: brand-content-in .48s .42s cubic-bezier(.2,.75,.25,1) both; }
.brand-profile.is-active > header { animation: brand-content-in .58s .06s cubic-bezier(.2,.75,.25,1) both; }
.brand-profile.is-active > .brand-scope { animation: brand-surface-in .5s .13s ease both; }
.brand-profile.is-active > .brand-scope section { animation: brand-card-in .54s cubic-bezier(.2,.75,.25,1) both; }
.brand-profile.is-active > .brand-scope section:nth-child(1) { animation-delay: .15s; }
.brand-profile.is-active > .brand-scope section:nth-child(2) { animation-delay: .22s; }
.brand-profile.is-active > .brand-scope section:nth-child(3) { animation-delay: .29s; }
.brand-profile.is-active > ul { animation: brand-content-in .5s .34s cubic-bezier(.2,.75,.25,1) both; }
.brand-profile.is-active > a { animation: brand-content-in .5s .4s cubic-bezier(.2,.75,.25,1) both; }
@media (hover:hover) and (pointer:fine) {
  .brand-profile.is-active .brand-scope section:hover { z-index: 2; background: rgba(255,255,255,.72); box-shadow: 0 .9rem 2.2rem rgba(52,43,37,.13); transform: translateY(-.32rem); }
  .brand-profile.is-active > ul li:hover { color: #fff; background: var(--accent); transform: translateY(-.18rem); }
}
.brand-selection-note { display: grid; grid-template-columns: 1fr auto; gap: 1rem 3rem; align-items: center; margin-top: 1px; padding: 2rem; color: var(--ink); background: #e9e2d8; box-shadow: inset 0 .22rem 0 var(--clay); }
.brand-selection-note > div { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; align-items: center; }
.brand-selection-note span { font-size: .62rem; font-weight: 600; letter-spacing: .14em; white-space: nowrap; }
.brand-selection-note p { max-width: 52rem; margin: 0; padding-left: 1.3rem; border-left: 1px solid rgba(53,47,51,.22); font-size: .78rem; line-height: 1.8; letter-spacing: .055em; }
.brand-selection-note > a { padding-bottom: .35rem; border-bottom: 1px solid currentColor; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-decoration: none; }
.brand-selection-note > a i { margin-left: .5rem; font-style: normal; }
.brand-selection-note small { grid-column: 1 / -1; padding-top: .8rem; border-top: 1px solid rgba(53,47,51,.18); font-size: .55rem; letter-spacing: .05em; opacity: .7; }

.problem-anatomy { padding: clamp(7rem,11vw,11rem) var(--edge) clamp(6rem,9vw,9rem); color: var(--ink); background: #e8e1d7; }
.problem-lab-head { display: grid; grid-template-columns: .24fr 1.18fr .58fr; gap: clamp(2rem,4vw,5rem); align-items: start; margin-bottom: clamp(3rem,5vw,5.5rem); }
.problem-lab-head .section-index { margin-top: .7rem; font-size: .64rem; }
.problem-lab-head h2 { margin: 0; font-family: "Microsoft YaHei UI Light","Noto Sans SC",sans-serif; font-size: clamp(3rem,5.2vw,6.2rem); font-weight: 300; line-height: 1.06; letter-spacing: -.07em; }
.problem-lab-head h2 span { color: var(--clay); white-space: nowrap; }
.problem-lab-head > div { display: grid; gap: 1.35rem; padding-top: .7rem; }
.problem-lab-head > div p { margin: 0; font-size: clamp(.94rem,1.12vw,1.14rem); line-height: 1.9; letter-spacing: .045em; }
.problem-lab-head > div small { padding-top: 1rem; border-top: 1px solid var(--line); font-size: .7rem; line-height: 1.7; letter-spacing: .08em; opacity: .72; }
.problem-diagnostic { display: grid; grid-template-columns: minmax(0,.8fr) minmax(34rem,1.2fr); min-height: clamp(46rem,70vw,55rem); border: 1px solid rgba(85,75,87,.3); background: var(--paper); box-shadow: 0 1.8rem 5rem rgba(73,58,51,.1); }
.problem-wall-figure { position: relative; min-width: 0; min-height: 100%; margin: 0; overflow: hidden; background: #c8bfb2; }
.problem-wall-figure::after { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(61,51,48,.06),transparent 30%,transparent 74%,rgba(61,51,48,.14)); content: ""; pointer-events: none; }
.problem-wall-figure > picture { display: block; width: 100%; height: 100%; }
.problem-wall-figure > picture img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.78) contrast(.98); transition: filter .5s,transform .8s cubic-bezier(.2,.75,.25,1); }
.problem-wall-figure:hover > picture img { filter: saturate(.92) contrast(1.01); transform: scale(1.012); }
.problem-wall-figure figcaption { position: absolute; z-index: 3; right: 1.2rem; bottom: 1.2rem; left: 1.2rem; display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; color: var(--bone); background: rgba(62,52,54,.7); backdrop-filter: blur(10px); font-size: .64rem; line-height: 1.6; letter-spacing: .07em; }
.problem-wall-figure figcaption small { opacity: .72; }
.problem-hotspots { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.problem-hotspot { position: absolute; top: var(--hotspot-y); left: var(--hotspot-x); display: flex; align-items: center; gap: .65rem; padding: 0; border: 0; color: #4c4044; background: transparent; transform: translate(-50%,-50%); pointer-events: auto; }
.problem-hotspot i { position: relative; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 1px solid currentColor; border-radius: 50%; background: rgba(246,242,234,.9); box-shadow: 0 .4rem 1rem rgba(50,39,38,.18); backdrop-filter: blur(5px); font: 600 .64rem/1 Arial,sans-serif; letter-spacing: .04em; transition: color .25s,background .25s,transform .28s; }
.problem-hotspot i::after { position: absolute; inset: -.45rem; border: 1px solid currentColor; border-radius: 50%; content: ""; opacity: 0; }
.problem-hotspot span { padding: .62rem .82rem; border: 1px solid rgba(85,75,87,.24); color: var(--ink); background: rgba(246,242,234,.9); backdrop-filter: blur(7px); font-size: .72rem; font-weight: 600; letter-spacing: .08em; white-space: nowrap; opacity: .82; transition: color .25s,background .25s,opacity .25s,transform .25s; }
.problem-hotspot:hover i, .problem-hotspot:focus-visible i, .problem-hotspot.is-active i { color: #fff; background: var(--clay); transform: scale(1.08); }
.problem-hotspot:hover span, .problem-hotspot:focus-visible span, .problem-hotspot.is-active span { color: #fff; background: var(--clay); opacity: 1; transform: translateX(.2rem); }
.problem-hotspot.is-active i::after { animation: problem-pulse 1.8s ease-out infinite; }
.diagnosis-stage { position: relative; min-width: 0; padding: clamp(2rem,4vw,4.8rem); overflow: hidden; background: var(--paper); }
.diagnosis-stage-head { position: relative; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding-bottom: 1.15rem; border-bottom: 1px solid var(--line); font-size: .7rem; line-height: 1.6; letter-spacing: .09em; }
.diagnosis-stage-head span { color: var(--clay); font-weight: 600; }
.diagnosis-stage-head small { opacity: .58; }
.diagnosis-case { position: relative; padding-top: clamp(2rem,3.5vw,3.5rem); animation: diagnosis-case-in .6s cubic-bezier(.2,.75,.25,1) both; }
.diagnosis-case[hidden] { display: none; }
.diagnosis-case header p { margin: 0 0 1.05rem; color: var(--clay); font: 600 .7rem/1 Arial,sans-serif; letter-spacing: .14em; }
.diagnosis-case header h3 { margin: 0; font-family: "Noto Serif SC","Source Han Serif SC",STSong,serif; font-size: clamp(2.6rem,3.5vw,4.4rem); font-weight: 400; line-height: 1.14; letter-spacing: -.045em; }
.diagnosis-case header > span { display: inline-block; margin-top: 1.3rem; padding: .56rem .8rem; border: 1px solid color-mix(in srgb,var(--clay) 42%,transparent); border-radius: 99rem; color: var(--clay); font-size: .72rem; font-weight: 600; letter-spacing: .07em; }
.diagnosis-lead { margin: 1.8rem 0 0; font-size: .94rem; line-height: 1.85; letter-spacing: .04em; }
.diagnosis-case dl { display: grid; grid-template-columns: 1fr 1fr; margin: 1.8rem 0 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.diagnosis-case dl div { padding: 1.25rem 1.3rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.diagnosis-case dt { margin-bottom: .65rem; color: var(--clay); font-size: .72rem; font-weight: 600; letter-spacing: .1em; }
.diagnosis-case dd { margin: 0; font-size: .82rem; line-height: 1.75; letter-spacing: .035em; }
.diagnosis-route { margin-top: 1.8rem; }
.diagnosis-route > b { display: block; margin-bottom: .9rem; font-size: .72rem; letter-spacing: .1em; }
.diagnosis-route ol { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; counter-reset: diagnosis-step; }
.diagnosis-route li { display: grid; grid-template-columns: 2.2rem 1fr; align-items: center; min-height: 2.55rem; margin-left: 0; padding: .48rem .8rem; background: color-mix(in srgb,var(--clay) 5%,transparent); font-size: .8rem; letter-spacing: .045em; counter-increment: diagnosis-step; }
.diagnosis-route li::before { color: var(--clay); font: 600 .64rem/1 Arial,sans-serif; content: "0" counter(diagnosis-step); }
.diagnosis-case footer { display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; align-items: center; margin-top: 1.8rem; padding: 1.25rem 0 0; border-top: 1px solid var(--line); color: var(--ink); background: transparent; }
.diagnosis-case footer > span { font-size: .72rem; line-height: 1.7; letter-spacing: .045em; opacity: .7; }
.diagnosis-case footer a { justify-self: end; padding-bottom: .35rem; border-bottom: 1px solid currentColor; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-decoration: none; white-space: nowrap; }
.diagnosis-case footer i, .problem-lab-foot i { margin-left: .5rem; font-style: normal; }
.problem-lab-foot { display: flex; justify-content: space-between; gap: 2rem; align-items: center; padding: 1.8rem 2rem; border: solid var(--line); border-width: 0 1px 1px; background: #e2d8cc; }
.problem-lab-foot p { margin: 0; font-size: .84rem; line-height: 1.75; letter-spacing: .04em; }
.problem-lab-foot p b { color: var(--clay); }
.problem-lab-foot a { flex: 0 0 auto; padding-bottom: .35rem; border-bottom: 1px solid currentColor; font-size: .8rem; font-weight: 600; letter-spacing: .07em; text-decoration: none; }

.case-file { padding: clamp(7rem,11vw,11rem) var(--edge) clamp(6rem,9vw,9rem); color: var(--ink); background: #dfe1dc; }
.case-file-head { display: grid; grid-template-columns: .24fr 1.18fr .58fr; gap: clamp(2rem,4vw,5rem); align-items: start; margin-bottom: clamp(3rem,5vw,5.5rem); }
.case-file-head .section-index { margin-top: .7rem; font-size: .64rem; }
.case-file-head h2 { margin: 0; font-family: "Microsoft YaHei UI Light","Noto Sans SC",sans-serif; font-size: clamp(3rem,5vw,6rem); font-weight: 300; line-height: 1.06; letter-spacing: -.07em; }
.case-file-head h2 span { color: var(--clay); white-space: nowrap; }
.case-file-head > div { display: grid; gap: 1.35rem; padding-top: .7rem; }
.case-file-head > div p { margin: 0; font-size: clamp(.94rem,1.12vw,1.14rem); line-height: 1.9; letter-spacing: .045em; }
.case-file-head > div small { padding-top: 1rem; border-top: 1px solid var(--line); font-size: .7rem; line-height: 1.7; letter-spacing: .08em; opacity: .72; }
.case-evidence { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(28rem,.85fr); min-height: clamp(46rem,67vw,54rem); border: 1px solid rgba(85,75,87,.3); background: var(--paper); box-shadow: 0 1.8rem 5rem rgba(73,58,51,.1); }
.case-evidence-visual { position: relative; min-width: 0; min-height: 100%; margin: 0; overflow: hidden; background: #7f7b73; }
.case-evidence-visual::after { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(36,31,31,.04),transparent 55%,rgba(36,31,31,.26)); content: ""; pointer-events: none; }
.case-evidence-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.82) contrast(.97); opacity: 0; transform: scale(1.035); transition: filter .5s,opacity .55s ease,transform .85s cubic-bezier(.2,.75,.25,1); }
.case-evidence-visual > img.is-active { z-index: 1; opacity: 1; transform: scale(1); }
.case-evidence-visual:hover > img.is-active { filter: saturate(.96) contrast(1); transform: scale(1.012); }
.case-evidence-visual figcaption { position: absolute; z-index: 3; right: 1.2rem; bottom: 1.2rem; left: 1.2rem; display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; color: var(--bone); background: rgba(62,52,54,.72); backdrop-filter: blur(10px); font-size: .64rem; line-height: 1.6; letter-spacing: .07em; }
.case-evidence-visual figcaption small { opacity: .72; }
.case-points { position: absolute; z-index: 4; top: 1.2rem; left: 1.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; max-width: calc(100% - 2.4rem); pointer-events: none; }
.case-points-label { padding: .78rem .85rem; color: var(--bone); background: rgba(62,52,54,.74); backdrop-filter: blur(7px); font-size: .6rem; font-weight: 600; letter-spacing: .08em; }
.case-point { position: relative; display: flex; align-items: center; gap: .45rem; padding: 0; border: 0; color: #4c4044; background: transparent; pointer-events: auto; }
.case-point i { position: relative; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 1px solid currentColor; border-radius: 50%; background: rgba(246,242,234,.9); box-shadow: 0 .4rem 1rem rgba(50,39,38,.18); backdrop-filter: blur(5px); font: 600 .64rem/1 Arial,sans-serif; transition: color .25s,background .25s,transform .28s; }
.case-point i::after { position: absolute; inset: -.45rem; border: 1px solid currentColor; border-radius: 50%; content: ""; opacity: 0; }
.case-point span { padding: .62rem .82rem; border: 1px solid rgba(85,75,87,.24); color: var(--ink); background: rgba(246,242,234,.9); backdrop-filter: blur(7px); font-size: .72rem; font-weight: 600; letter-spacing: .08em; white-space: nowrap; opacity: .84; transition: color .25s,background .25s,opacity .25s,transform .25s; }
.case-point:hover i, .case-point:focus-visible i, .case-point.is-active i { color: #fff; background: var(--clay); transform: scale(1.08); }
.case-point:hover span, .case-point:focus-visible span, .case-point.is-active span { color: #fff; background: var(--clay); opacity: 1; transform: translateX(.2rem); }
.case-point.is-active i::after { animation: problem-pulse 1.8s ease-out infinite; }
.case-record { display: flex; flex-direction: column; min-width: 0; padding: clamp(2rem,4vw,4.5rem); background: var(--paper); }
.case-record > header { padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.case-record > header p { margin: 0 0 .9rem; color: var(--clay); font-size: .7rem; font-weight: 600; letter-spacing: .12em; }
.case-record > header h3 { margin: 0; font-family: "Noto Serif SC","Source Han Serif SC",STSong,serif; font-size: clamp(2.6rem,3.5vw,4.3rem); font-weight: 400; line-height: 1.12; letter-spacing: -.045em; }
.case-record > header span { display: inline-block; margin-top: 1.2rem; padding: .55rem .8rem; border: 1px solid color-mix(in srgb,var(--clay) 42%,transparent); border-radius: 99rem; color: var(--clay); font-size: .7rem; font-weight: 600; letter-spacing: .06em; }
.case-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 1.5rem 0 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.case-facts div { padding: 1rem 1.1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.case-facts dt { margin-bottom: .45rem; color: var(--clay); font-size: .68rem; font-weight: 600; letter-spacing: .08em; }
.case-facts dd { margin: 0; font-size: .78rem; line-height: 1.65; letter-spacing: .025em; }
.case-observations { position: relative; flex: 1; min-height: 15rem; margin-top: 1.7rem; padding: 1.5rem; border-left: .24rem solid var(--clay); background: #ebe4dc; }
.case-observation { animation: diagnosis-case-in .55s cubic-bezier(.2,.75,.25,1) both; }
.case-observation[hidden] { display: none; }
.case-observation p { margin: 0 0 .8rem; color: var(--clay); font-size: .68rem; font-weight: 600; letter-spacing: .1em; }
.case-observation h4 { margin: 0 0 .9rem; font-size: 1rem; font-weight: 600; letter-spacing: .04em; }
.case-observation strong { display: block; font-size: .9rem; font-weight: 500; line-height: 1.85; letter-spacing: .035em; }
.case-observation small { display: block; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .72rem; line-height: 1.75; letter-spacing: .035em; opacity: .72; }
.case-record > footer { display: flex; justify-content: space-between; gap: 1.5rem; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--ink); background: transparent; }
.case-record > footer a { padding-bottom: .35rem; border-bottom: 1px solid currentColor; font-size: .78rem; font-weight: 600; letter-spacing: .07em; text-decoration: none; }
.case-record > footer i, .case-file-foot i { margin-left: .5rem; font-style: normal; }
.case-proof-chain { margin-top: 1px; border: 1px solid var(--line); background: #eee9e2; }
.case-proof-chain > header { display: grid; grid-template-columns: .28fr .9fr .82fr; gap: 2rem; align-items: center; padding: 2rem; border-bottom: 1px solid var(--line); }
.case-proof-chain > header h3 { margin: 0; font-family: "Noto Serif SC","Source Han Serif SC",STSong,serif; font-size: clamp(1.7rem,2.6vw,3rem); font-weight: 400; letter-spacing: -.035em; }
.case-proof-chain > header > p:last-child { margin: 0; font-size: .78rem; line-height: 1.75; letter-spacing: .04em; }
.case-proof-chain ol { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; padding: 0; list-style: none; }
.case-proof-chain li { display: grid; grid-template-columns: 2rem 1fr auto; gap: 1rem; align-items: center; min-height: 7.5rem; padding: 1.3rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.case-proof-chain li:nth-child(3n) { border-right: 0; }
.case-proof-chain li span { color: var(--clay); font: 600 .64rem/1 Arial,sans-serif; }
.case-proof-chain li div { display: grid; gap: .45rem; }
.case-proof-chain li b { font-size: .9rem; letter-spacing: .04em; }
.case-proof-chain li small { font-size: .7rem; line-height: 1.6; opacity: .65; }
.case-proof-chain li i { padding: .35rem .5rem; border: 1px solid var(--line); color: var(--ink); font-size: .6rem; font-style: normal; letter-spacing: .06em; white-space: nowrap; opacity: .68; }
.case-proof-chain li.is-confirmed { background: #e3e9e1; }
.case-proof-chain li.is-confirmed i { border-color: #58725e; color: #58725e; opacity: 1; }
.case-file-foot { display: flex; justify-content: space-between; gap: 2rem; align-items: center; padding: 1.8rem 2rem; border: solid var(--line); border-width: 0 1px 1px; background: #d5d8d2; }
.case-file-foot p { margin: 0; font-size: .84rem; line-height: 1.75; letter-spacing: .04em; }
.case-file-foot p b { color: var(--clay); }
.case-file-foot a { flex: 0 0 auto; padding-bottom: .35rem; border-bottom: 1px solid currentColor; font-size: .8rem; font-weight: 600; letter-spacing: .07em; text-decoration: none; }

.home-footer { position: relative; padding: clamp(6.5rem,10vw,10rem) var(--edge) 0; overflow: hidden; color: #121212; background: #fff; }
.footer-invitation { display: grid; grid-template-columns: .24fr 1.18fr .58fr; gap: clamp(2rem,4vw,5rem); align-items: start; padding-bottom: clamp(3.5rem,6vw,6rem); }
.footer-invitation .section-index { margin-top: .7rem; color: #121212; font-size: .72rem; opacity: .7; }
.footer-invitation h2 { margin: 0; font-family: "Microsoft YaHei UI Light","Noto Sans SC",sans-serif; font-size: clamp(3rem,5.4vw,6.5rem); font-weight: 300; line-height: 1.04; letter-spacing: -.075em; }
.footer-invitation h2 span { color: #121212; white-space: nowrap; }
.footer-invitation > p:last-child { margin: .7rem 0 0; font-size: clamp(1rem,1.16vw,1.18rem); line-height: 1.9; letter-spacing: .04em; opacity: .78; }
.footer-routes { display: grid; grid-template-columns: repeat(3,1fr); border: solid rgba(18,18,18,.18); border-width: 1px 0; }
.footer-routes > a { position: relative; display: flex; flex-direction: column; min-height: 24rem; padding: clamp(2rem,3vw,3.2rem); border-right: 1px solid rgba(18,18,18,.18); color: inherit; text-decoration: none; transition: color .35s,background .35s,transform .35s; }
.footer-routes > a:last-child { border-right: 0; }
.footer-routes > a::before { position: absolute; inset: auto 0 0; height: .32rem; background: #121212; content: ""; transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2,.75,.25,1); }
.footer-routes > a:hover, .footer-routes > a:focus-visible { color: #121212; background: #f1f1ee; transform: translateY(-.3rem); }
.footer-routes > a:hover::before, .footer-routes > a:focus-visible::before { transform: scaleX(1); }
.footer-routes span { color: #121212; font-size: .76rem; font-weight: 600; letter-spacing: .09em; opacity: .65; }
.footer-routes > a:hover span, .footer-routes > a:focus-visible span { color: #121212; opacity: 1; }
.footer-routes strong { margin-top: auto; font-family: "Noto Serif SC","Source Han Serif SC",STSong,serif; font-size: clamp(1.8rem,2.1vw,2.7rem); font-weight: 400; line-height: 1.28; letter-spacing: -.035em; }
.footer-routes small { max-width: 23rem; margin-top: 1.3rem; font-size: .88rem; line-height: 1.8; letter-spacing: .025em; opacity: .7; }
.footer-routes i { margin-top: 2rem; font-size: .86rem; font-style: normal; font-weight: 600; letter-spacing: .055em; }
.footer-directory { display: grid; grid-template-columns: 1.35fr .65fr .65fr 1fr; gap: clamp(2rem,5vw,6rem); padding: clamp(4rem,7vw,7rem) 0; border-bottom: 1px solid rgba(18,18,18,.18); }
.footer-brand { display: grid; justify-items: start; align-content: start; color: inherit; text-decoration: none; }
.footer-brand b { font-family: "Noto Serif SC","Source Han Serif SC",STSong,serif; font-size: clamp(2.8rem,4vw,5rem); font-weight: 400; letter-spacing: -.06em; }
.footer-brand > span { margin-top: .25rem; font: 500 .68rem/1.4 Arial,sans-serif; letter-spacing: .2em; opacity: .58; }
.footer-brand small { margin-top: 2rem; font-size: .86rem; line-height: 1.8; letter-spacing: .04em; opacity: .65; }
.footer-directory nav, .footer-directory address { display: grid; align-content: start; justify-items: start; gap: .85rem; font-style: normal; }
.footer-directory p { margin: 0 0 .6rem; color: #121212; font-size: .76rem; font-weight: 600; letter-spacing: .09em; opacity: .65; }
.footer-directory nav a, .footer-directory address a { padding-bottom: .2rem; border-bottom: 1px solid transparent; color: inherit; font-size: .88rem; letter-spacing: .045em; text-decoration: none; opacity: .72; transition: border-color .2s,opacity .2s; }
.footer-directory nav a:hover, .footer-directory address a:hover { border-color: currentColor; opacity: 1; }
.footer-directory address b { font-size: 1rem; font-weight: 500; line-height: 1.7; letter-spacing: .035em; }
.footer-directory address span { font-size: .82rem; letter-spacing: .06em; opacity: .58; }
.footer-directory address a { margin-top: 1.1rem; opacity: 1; }
.footer-bottom { display: grid; grid-template-columns: .8fr 1.7fr auto; gap: 2rem; align-items: center; min-height: 7rem; }
.footer-bottom small, .footer-bottom p, .footer-bottom a { margin: 0; color: inherit; font-size: .7rem; line-height: 1.75; letter-spacing: .04em; text-decoration: none; opacity: .58; }
.footer-bottom a { justify-self: end; padding-bottom: .25rem; border-bottom: 1px solid currentColor; opacity: .8; }

.section-pad { padding: clamp(6rem,10vw,10rem) var(--edge); }
.section-index { margin: 0; font: 700 .56rem Arial,sans-serif; letter-spacing: .2em; text-transform: uppercase; opacity: .58; }
.manifesto { display: grid; grid-template-columns: minmax(8rem,.42fr) 1.1fr .85fr; gap: clamp(2rem,5vw,6rem); align-items: start; color: var(--ink); background: var(--bone); }
.manifesto > div:nth-child(2) { display: grid; grid-template-columns: 1fr .8fr; gap: 2rem; }
.manifesto-lead { margin: 0; font-family: "Noto Serif SC",STSong,serif; font-size: clamp(2.4rem,4.4vw,5rem); line-height: 1.18; letter-spacing: -.04em; }
.manifesto-copy { align-self: end; margin: 0; font-size: .82rem; line-height: 2; letter-spacing: .08em; opacity: .68; }
.manifesto-steps { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; padding-top: .6rem; font-size: .68rem; letter-spacing: .12em; }
.manifesto-steps i { font-style: normal; opacity: .35; }

.route-hub { color: var(--ink); background: #eee9de; }
.route-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem,6vw,7rem); align-items: end; margin-bottom: clamp(3rem,6vw,6rem); }
.route-head h2 { max-width: 11em; margin: .9rem 0 0; font-family: "Noto Serif SC",STSong,serif; font-size: clamp(3rem,5.6vw,6.5rem); font-weight: 400; line-height: 1.05; letter-spacing: -.06em; }
.route-head > p { max-width: 38rem; margin: 0; font-size: .82rem; line-height: 2; letter-spacing: .07em; opacity: .66; }
.identity-routes { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.identity-card { position: relative; min-height: 33rem; padding: clamp(2rem,4vw,4.5rem); overflow: hidden; }
.identity-card + .identity-card { border-left: 1px solid var(--line); }
.identity-card::before { position: absolute; inset: auto -12% -38% auto; width: 26rem; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,rgba(45,91,190,.22),transparent 68%); content: ""; pointer-events: none; }
.pro-route { color: var(--bone); background: var(--ink); }
.pro-route::before { inset: -32% auto auto -14%; background: radial-gradient(circle,rgba(94,132,220,.38),transparent 68%); }
.identity-card > span { color: var(--cobalt); font: 600 .59rem/1 Arial,sans-serif; letter-spacing: .2em; }
.pro-route > span { color: #9db8ff; }
.identity-card h3 { max-width: 13em; margin: 3.4rem 0 1.3rem; font-family: "Noto Serif SC",STSong,serif; font-size: clamp(2rem,3.1vw,3.6rem); font-weight: 400; line-height: 1.18; letter-spacing: -.04em; }
.identity-card > p { max-width: 35rem; margin: 0; font-size: .76rem; line-height: 1.9; opacity: .66; }
.identity-card > div { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-top: 3.2rem; border-top: 1px solid currentColor; }
.identity-card > div a { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem .3rem; border-bottom: 1px solid currentColor; font-size: .68rem; letter-spacing: .08em; text-decoration: none; opacity: .7; transition: padding .2s,opacity .2s; }
.identity-card > div a:nth-child(odd) { margin-right: 1.2rem; }
.identity-card > div a:hover { padding-left: .8rem; opacity: 1; }
.identity-card i { font-style: normal; }
.function-directory { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 2.5rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.function-directory a { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: .35rem 1rem; min-height: 8rem; padding: 1.5rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; transition: color .2s,background .2s; }
.function-directory span { grid-row: 1/3; color: var(--cobalt); font: 600 .58rem/1 Arial,sans-serif; }
.function-directory b { font-family: "Noto Serif SC",STSong,serif; font-size: 1.25rem; font-weight: 400; }
.function-directory small { font-size: .62rem; letter-spacing: .07em; opacity: .55; }
.function-directory i { grid-row: 1/3; font-style: normal; }
.function-directory a:hover { color: white; background: var(--cobalt); }
.function-directory a:hover span { color: #c5d4ff; }
.drag-hint a { color: inherit; }

.home-coda { display: grid; grid-template-columns: minmax(8rem,.38fr) 1fr; gap: clamp(2rem,7vw,9rem); color: var(--bone); background: var(--ink); }
.home-coda > div { max-width: 64rem; }
.home-coda h2 { margin: 0; font-family: "Noto Serif SC",STSong,serif; font-size: clamp(2.7rem,5.5vw,6.3rem); font-weight: 400; line-height: 1.08; letter-spacing: -.055em; }
.home-coda p:not(.section-index) { max-width: 43rem; margin: 2rem 0 0; font-size: .82rem; line-height: 2; letter-spacing: .07em; opacity: .66; }
.home-coda a { display: inline-flex; gap: 2rem; margin-top: 2.2rem; padding-bottom: .45rem; border-bottom: 1px solid currentColor; font-size: .69rem; letter-spacing: .12em; text-decoration: none; }

.product-overview { overflow:hidden; background:#e9e4d8; }
.product-intro { margin-bottom:clamp(4rem,8vw,8rem); }
.product-intro h2 { max-width:10.5em; }
.product-editorial { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(1rem,2vw,2rem); }
.home-product-card { position:relative; overflow:hidden; color:var(--ink); background:#f4f0e7; text-decoration:none; }
.home-product-card--lead { grid-column:span 8; display:grid; min-height:50rem; }
.home-product-card--classic { grid-column:span 4; display:grid; grid-template-rows:26rem 1fr; }
.home-product-card--art { grid-column:2 / span 10; display:grid; grid-template-columns:1.2fr .8fr; min-height:34rem; margin-top:clamp(2rem,5vw,5rem); }
.product-card-visual { position:relative; min-width:0; margin:0; overflow:hidden; background:#cbc5b9; }
.product-card-visual > img { width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.75,.2,1),filter .45s; }
.home-product-card:hover .product-card-visual > img { transform:scale(1.025); }
.home-product-card--lead .product-card-visual { position:absolute; inset:0; }
.home-product-card--lead .product-space { object-position:50% center; filter:saturate(.8) brightness(.88); }
.product-card-visual figcaption { position:absolute; right:1rem; bottom:1rem; z-index:3; padding:.45rem .6rem; color:#f4f0e7; background:rgba(20,20,18,.72); font:500 .5rem/1.3 Arial,sans-serif; letter-spacing:.08em; }
.product-packshot { position:absolute; z-index:2; right:clamp(1rem,2vw,2rem); bottom:3.7rem; display:flex; align-items:flex-end; justify-content:flex-end; width:50%; }
.product-packshot img { width:39%; margin-left:-13%; object-fit:contain; filter:drop-shadow(0 1.2rem 1.2rem rgba(0,0,0,.35)); transition:transform .45s ease; }
.product-packshot img:nth-child(2) { z-index:2; width:45%; transform:translateY(-1.2rem); }
.home-product-card--lead:hover .product-packshot img:first-child { transform:translateX(-.5rem); }
.home-product-card--lead:hover .product-packshot img:nth-child(2) { transform:translateY(-1.6rem); }
.home-product-card--lead:hover .product-packshot img:last-child { transform:translateX(.5rem); }
.product-card-copy { position:relative; z-index:4; display:flex; flex-direction:column; padding:clamp(1.6rem,3vw,3.2rem); }
.home-product-card--lead .product-card-copy { align-self:end; width:min(55%,33rem); min-height:29rem; margin:0 0 2rem 2rem; color:#f4f0e7; background:rgba(20,21,18,.9); backdrop-filter:blur(8px); }
.product-card-copy > span { color:#89820b; font:700 .56rem/1 Arial,sans-serif; letter-spacing:.18em; }
.home-product-card--lead .product-card-copy > span { color:#e3d817; }
.product-card-copy h3 { margin:1.3rem 0 1rem; font:400 clamp(1.85rem,3.1vw,3.8rem)/1.08 "Noto Serif SC",STSong,serif; letter-spacing:-.045em; }
.home-product-card--classic .product-card-copy h3 { font-size:clamp(1.75rem,2.35vw,2.75rem); }
.product-card-copy > p { margin:0; font-size:.69rem; line-height:1.9; opacity:.74; }
.product-card-copy ul { display:flex; flex-wrap:wrap; gap:.45rem; margin:1.4rem 0 0; padding:0; list-style:none; }
.product-card-copy li { padding:.38rem .55rem; border:1px solid currentColor; border-radius:99rem; font-size:.54rem; opacity:.68; }
.product-card-copy > b { margin-top:auto; padding-top:2rem; font-size:.61rem; letter-spacing:.08em; }
.product-card-copy > b i { margin-left:.7rem; font-style:normal; transition:margin .2s; }
.home-product-card:hover .product-card-copy > b i { margin-left:1.15rem; }
.home-product-card--classic .product-card-visual img { object-position:52% 45%; }
.home-product-card--art .product-card-visual img { object-position:center; }
.home-product-card--art .product-card-copy { justify-content:center; color:#eee9de; background:#7a2f2c; }
.home-product-card--art .product-card-copy > span { color:#efc1b5; }
.system-ribbon { display:grid; grid-template-columns:auto 1.2fr 1fr auto; gap:2rem; align-items:center; margin-top:clamp(4rem,7vw,7rem); padding:2rem 0; color:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-decoration:none; }
.system-ribbon > span { color:#85800a; font:400 3rem/1 "Noto Serif SC",STSong,serif; }
.system-ribbon small { font:700 .5rem/1 Arial,sans-serif; letter-spacing:.18em; opacity:.5; }
.system-ribbon h3 { margin:.45rem 0 0; font:400 clamp(1.4rem,2.3vw,2.5rem)/1.15 "Noto Serif SC",STSong,serif; }
.system-ribbon p { margin:0; font-size:.65rem; line-height:1.8; opacity:.65; }
.system-ribbon b { font-size:.59rem; white-space:nowrap; }
.system-ribbon:hover h3 { color:#756f00; }
.product-boundary { max-width:62rem; margin:1.6rem 0 0 auto; color:var(--ink); font-size:.56rem; line-height:1.75; opacity:.55; }

.problem-map { display:block; color:#eee9de; background:#171815; }
.problem-map-head { display:grid; grid-template-columns:.22fr 1.2fr .65fr; gap:clamp(2rem,5vw,6rem); align-items:end; }
.problem-map-head h2 { max-width:11em; margin:0; font:400 clamp(3rem,5.7vw,6.5rem)/1.02 "Noto Serif SC",STSong,serif; letter-spacing:-.055em; }
.problem-map-head > p:last-child { margin:0; color:#aaa79f; font-size:.73rem; line-height:1.95; }
.problem-atlas { display:grid; grid-template-columns:minmax(22rem,.78fr) 1.22fr; gap:clamp(2rem,5vw,6rem); margin-top:clamp(4rem,8vw,8rem); }
.problem-visual { position:sticky; top:6rem; align-self:start; height:calc(100svh - 9rem); min-height:42rem; margin:0; overflow:hidden; }
.problem-visual::after { position:absolute; inset:0; background:linear-gradient(180deg,transparent 62%,rgba(15,15,13,.76)); content:""; }
.problem-visual img { width:100%; height:100%; object-fit:cover; object-position:47% center; filter:saturate(.72) contrast(.94); }
.problem-visual figcaption { position:absolute; z-index:2; right:1.4rem; bottom:1.4rem; left:1.4rem; color:#d7d2c8; font-size:.56rem; line-height:1.6; }
.problem-visual figcaption span { display:block; margin-bottom:.45rem; color:#e1d616; font:700 .5rem/1 Arial,sans-serif; letter-spacing:.17em; }
.problem-solution-grid { border-top:1px solid rgba(255,255,255,.25); }
.problem-solution-grid article { display:grid; grid-template-columns:7.5rem 1.15fr 1fr 2.6rem; gap:clamp(1rem,2vw,2rem); align-items:center; min-height:10rem; padding:1.25rem 0; border-bottom:1px solid rgba(255,255,255,.22); transition:color .25s,padding .25s,background .25s; }
.problem-solution-grid article:hover { padding-right:1rem; padding-left:1rem; color:#171815; background:#d8cc12; }
.problem-solution-grid article > span { color:#d8cc12; font:700 .51rem/1 Arial,sans-serif; letter-spacing:.14em; }
.problem-solution-grid article:hover > span { color:#171815; }
.problem-solution-grid h3 { margin:0; font:400 clamp(1.15rem,1.65vw,1.75rem)/1.35 "Noto Serif SC",STSong,serif; }
.problem-solution-grid p { margin:0; color:#aaa79f; font-size:.62rem; line-height:1.75; }
.problem-solution-grid p b { color:#eee9de; font-weight:600; }
.problem-solution-grid article:hover p,.problem-solution-grid article:hover p b { color:#333312; }
.problem-solution-grid a { display:grid; place-items:center; width:2.5rem; height:2.5rem; border:1px solid rgba(255,255,255,.35); border-radius:50%; color:inherit; text-decoration:none; }
.problem-solution-grid article:hover a { border-color:#171815; }

.expertise-coda { display:block; color:#171815; background:#eee9de; }
.expertise-head { display:grid; grid-template-columns:.22fr 1.25fr .65fr; gap:clamp(2rem,5vw,6rem); align-items:end; }
.expertise-head h2 { margin:0; font:400 clamp(3rem,5.6vw,6.3rem)/1.03 "Noto Serif SC",STSong,serif; letter-spacing:-.055em; }
.expertise-head > p:last-child { margin:0; font-size:.72rem; line-height:1.9; opacity:.65; }
.expertise-layout { display:grid; grid-template-columns:minmax(22rem,.82fr) 1.18fr; gap:clamp(2rem,6vw,7rem); margin-top:clamp(4rem,8vw,8rem); }
.expertise-media { position:sticky; top:6rem; align-self:start; height:calc(100svh - 9rem); min-height:42rem; margin:0; overflow:hidden; background:#d6c4bb; }
.expertise-media::after { position:absolute; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(38,23,21,.76)); content:""; }
.expertise-media img { width:100%; height:100%; object-fit:cover; object-position:center; }
.expertise-media figcaption { position:absolute; z-index:2; right:clamp(1.4rem,3vw,3rem); bottom:clamp(1.4rem,3vw,3rem); left:clamp(1.4rem,3vw,3rem); display:grid; color:#f7f1e7; }
.expertise-media figcaption span { color:#e2d516; font:700 .5rem/1 Arial,sans-serif; letter-spacing:.17em; }
.expertise-media figcaption b { max-width:12em; margin:.8rem 0; font:400 clamp(1.7rem,2.7vw,3.2rem)/1.2 "Noto Serif SC",STSong,serif; }
.expertise-media figcaption small { font-size:.54rem; opacity:.7; }
.expertise-steps { margin:0; padding:0; border-top:1px solid var(--line); list-style:none; }
.expertise-steps li { display:grid; grid-template-columns:4.5rem 1fr auto; gap:1.5rem; align-items:center; min-height:10rem; padding:1.5rem 0; border-bottom:1px solid var(--line); }
.expertise-steps li > span { color:#817b0b; font:400 2.1rem/1 "Noto Serif SC",STSong,serif; }
.expertise-steps h3 { margin:0 0 .55rem; font:400 clamp(1.25rem,1.8vw,1.9rem)/1.2 "Noto Serif SC",STSong,serif; }
.expertise-steps p { max-width:42rem; margin:0; font-size:.63rem; line-height:1.75; opacity:.68; }
.expertise-steps small { font:700 .5rem/1 Arial,sans-serif; letter-spacing:.16em; opacity:.42; }
.expertise-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:1rem; margin-top:3rem; }
.expertise-actions a { display:flex; justify-content:space-between; min-width:min(100%,21rem); margin:0; padding:1rem 1.2rem; color:#eee9de; border:1px solid #171815; background:#171815; }
.expertise-actions a + a { color:#171815; background:transparent; }

/* 统一展览式版式：暖白、炭黑与克莱因蓝 */
.product-overview { background:var(--paper); }
.product-intro { grid-template-columns:minmax(0,1fr) minmax(20rem,.52fr); align-items:start; margin-bottom:clamp(4rem,7vw,7rem); padding-top:1.4rem; border-top:1px solid var(--line); }
.product-intro h2 { max-width:9em; font-size:clamp(3rem,5vw,5.7rem); line-height:1.02; }
.product-intro > p { align-self:end; max-width:31rem; color:rgba(85,75,87,.78); font-size:.72rem; line-height:1.9; opacity:1; }
.product-editorial { display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--line); }
.home-product-card { grid-column:1 !important; display:grid; grid-template-columns:minmax(20rem,.8fr) minmax(0,1.2fr); grid-template-rows:1fr; min-height:36rem; margin:0 !important; border-bottom:1px solid var(--line); background:var(--paper); }
.home-product-card .product-card-visual { position:relative; inset:auto; grid-row:1; min-height:36rem; border:0; }
.home-product-card .product-card-copy { grid-row:1; justify-content:center; width:auto; min-height:0; margin:0; padding:clamp(2.5rem,5vw,6rem); color:var(--ink); background:transparent; backdrop-filter:none; }
.home-product-card--lead .product-card-visual,.home-product-card--art .product-card-visual { grid-column:2; }
.home-product-card--lead .product-card-copy,.home-product-card--art .product-card-copy { grid-column:1; }
.home-product-card--classic { grid-template-columns:minmax(0,1.2fr) minmax(20rem,.8fr); background:#ccd8e7; }
.home-product-card--classic .product-card-visual { grid-column:1; }
.home-product-card--classic .product-card-copy { grid-column:2; }
.home-product-card--art { color:var(--ink); background:#e9dca9; }
.home-product-card--art .product-card-copy { color:var(--ink); background:transparent; }
.home-product-card--art .product-card-copy > span { color:#7b3042; }
.home-product-card--lead .product-space { filter:saturate(.82) brightness(1); }
.product-card-copy > span { color:var(--blue); }
.home-product-card--lead .product-card-copy > span { color:var(--blue); }
.product-card-copy h3 { max-width:9em; font-size:clamp(2rem,3.2vw,3.9rem); }
.product-card-copy > p { max-width:34rem; font-size:.69rem; }
.product-card-copy li { border-color:rgba(85,75,87,.3); }
.home-product-card--art .product-card-copy li { border-color:rgba(85,75,87,.3); }
.product-packshot { right:3%; bottom:2.7rem; width:44%; }
.product-card-visual figcaption { color:var(--bone); background:rgba(85,75,87,.86); }
.system-ribbon { grid-template-columns:auto 1.15fr 1fr auto; margin-top:clamp(2rem,4vw,4rem); padding:2rem; color:var(--bone); border:0; background:#7b3042; }
.system-ribbon > span { color:var(--bone); }
.system-ribbon small { opacity:.72; }
.system-ribbon:hover h3 { color:var(--bone); }
.product-boundary { max-width:68rem; margin-top:1.3rem; }

.problem-map { color:var(--ink); background:#ccd8e7; }
.problem-map-head,.expertise-head { grid-template-columns:minmax(0,1fr) minmax(20rem,.52fr); align-items:start; padding-top:1.4rem; border-top:1px solid currentColor; }
.problem-map-head .section-index,.expertise-head .section-index { grid-column:1 / -1; color:#7b3042; opacity:1; }
.problem-map-head h2,.expertise-head h2 { max-width:10em; font-size:clamp(3rem,5vw,5.7rem); line-height:1.03; }
.problem-map-head > p:last-child,.expertise-head > p:last-child { align-self:end; max-width:31rem; color:rgba(85,75,87,.78); font-size:.7rem; line-height:1.9; opacity:1; }
.problem-atlas { grid-template-columns:minmax(22rem,.86fr) minmax(0,1.14fr); gap:clamp(2rem,4.5vw,5.5rem); }
.problem-visual { height:calc(100svh - 8rem); }
.problem-visual::after { background:linear-gradient(180deg,transparent 60%,rgba(123,48,66,.58)); }
.problem-visual figcaption { color:var(--bone); }
.problem-visual figcaption span { color:#e9dca9; }
.problem-solution-grid { border-color:rgba(85,75,87,.25); }
.problem-solution-grid article { grid-template-columns:6.2rem minmax(12rem,1.05fr) minmax(12rem,.95fr) 2.6rem; min-height:9.5rem; }
.problem-solution-grid article { border-color:rgba(85,75,87,.25); }
.problem-solution-grid article > span { color:#7b3042; }
.problem-solution-grid p { color:rgba(85,75,87,.72); }
.problem-solution-grid p b { color:var(--ink); }
.problem-solution-grid a { border-color:rgba(85,75,87,.38); }
.problem-solution-grid article:hover { color:var(--bone); background:#7b3042; }
.problem-solution-grid article:hover > span,.problem-solution-grid article:hover p,.problem-solution-grid article:hover p b { color:var(--bone); }
.problem-solution-grid article:hover a { border-color:var(--bone); }

.expertise-coda { background:var(--paper); }
.expertise-layout { grid-template-columns:minmax(22rem,.86fr) minmax(0,1.14fr); gap:clamp(2rem,5vw,6rem); }
.expertise-media::after { background:linear-gradient(180deg,transparent 48%,rgba(123,48,66,.62)); }
.expertise-media figcaption span { color:#e9dca9; }
.expertise-steps li > span { color:#7b3042; }
.expertise-actions a { color:var(--bone); border-color:#7b3042; background:#7b3042; }
.expertise-actions a + a { color:var(--ink); border-color:var(--ink); background:transparent; }

.materials { overflow: hidden; color: var(--bone); background: var(--ink); }
.section-head { display: grid; grid-template-columns: 1.1fr .65fr; gap: 4rem; align-items: end; margin-bottom: clamp(3.5rem,6vw,6rem); }
.section-head h2 { margin: 1.1rem 0 0; font-family: "Noto Serif SC",STSong,serif; font-size: clamp(2.5rem,5vw,5.8rem); font-weight: 400; line-height: 1.12; letter-spacing: -.045em; }
.section-head > p, .section-head > div:last-child > p { max-width: 30rem; margin: 0; font-size: .8rem; line-height: 2; letter-spacing: .07em; opacity: .68; }
.rail-controls { display: flex; gap: .45rem; margin-top: 1.4rem; }
.rail-controls button { width: 3rem; height: 3rem; border: 1px solid var(--light-line); border-radius: 50%; color: inherit; background: transparent; transition: background .2s,color .2s; }
.rail-controls button:hover { color: var(--ink); background: var(--bone); }
.material-rail { display: grid; grid-auto-columns: minmax(22rem,29vw); grid-auto-flow: column; gap: 1rem; padding-right: var(--edge); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; cursor: grab; }
.material-rail::-webkit-scrollbar { display: none; }
.material-rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.material-card { position: relative; display: grid; grid-template-rows: minmax(22rem,48vh) auto; min-height: 42rem; overflow: hidden; color: var(--ink); background: var(--bone); scroll-snap-align: start; }
.material-card > img, .graphic-surface { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.75,.25,1), filter .5s; }
.material-card:hover > img, .material-card:hover .graphic-surface { transform: scale(1.035); }
.material-card > div:last-child { position: relative; z-index: 2; padding: 1.7rem; background: var(--bone); }
.material-card span { font: 700 .52rem Arial,sans-serif; letter-spacing: .18em; opacity: .55; }
.material-card h3 { margin: .7rem 0 .8rem; font-family: "Noto Serif SC",STSong,serif; font-size: 2rem; font-weight: 500; letter-spacing: .06em; }
.material-card p { min-height: 5.4rem; margin: 0; font-size: .74rem; line-height: 1.9; letter-spacing: .05em; opacity: .72; }
.material-card ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.material-card li { padding: .38rem .55rem; border: 1px solid var(--line); border-radius: 99rem; font-size: .56rem; letter-spacing: .06em; }
.tone-1 img { filter: saturate(.35) brightness(1.08); }
.tone-2 img { filter: saturate(.45) sepia(.08) brightness(1.06); }
.tone-3 img { filter: saturate(.55) brightness(1.02); }
.tone-4 img { filter: grayscale(.25) brightness(.78); }
.graphic-surface { background-color: #768897; }
.wet .graphic-surface { background-image: radial-gradient(circle at 62% 28%,rgba(255,255,255,.52),transparent 24%), repeating-radial-gradient(ellipse at 50% 110%,rgba(255,255,255,.22) 0 1px,transparent 2px 29px), linear-gradient(145deg,#b7c8cd,#4f778e 55%,#2447ff); }
.shield .graphic-surface { background-image: linear-gradient(118deg,transparent 49.5%,rgba(255,255,255,.45) 50%,transparent 50.5%), radial-gradient(circle at 30% 42%,rgba(255,255,255,.22),transparent 25%), linear-gradient(145deg,#3e4142,#111); }
.drag-hint { margin: 1.2rem 0 0; font-size: .56rem; letter-spacing: .15em; opacity: .5; }

.problem-lab { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(21rem,.65fr); min-height: 100svh; color: var(--bone); background: #121211; }
.problem-stage { position: relative; display: grid; grid-template-rows: auto 1fr; min-height: 100svh; padding: clamp(6rem,9vw,9rem) var(--edge) 0; overflow: hidden; }
.problem-stage header { position: relative; z-index: 3; }
.problem-stage h2 { margin: 1rem 0 0; font-family: "Noto Serif SC",STSong,serif; font-size: clamp(2.5rem,4.7vw,5.5rem); font-weight: 400; line-height: 1.12; letter-spacing: -.04em; }
.wall-map { position: relative; min-height: 31rem; margin-top: 3rem; overflow: hidden; background: linear-gradient(112deg,#c5c0b5,#817f78 58%,#51514d); box-shadow: inset -3rem 0 6rem rgba(0,0,0,.22); }
.wall-map::before { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.3) .5px,transparent .7px), linear-gradient(108deg,transparent 48%,rgba(255,255,255,.08) 48.2%,transparent 49%); background-size: 7px 7px,100% 100%; content: ""; mix-blend-mode: soft-light; }
.wall-map::after { position: absolute; inset: 0; background: linear-gradient(90deg,transparent 72%,rgba(0,0,0,.2)); content: ""; pointer-events: none; }
.wall-light { position: absolute; z-index: 1; inset: -10% auto auto -10%; width: 65%; height: 90%; background: radial-gradient(ellipse,rgba(255,249,225,.5),transparent 68%); filter: blur(20px); }
.problem-pin { position: absolute; z-index: 3; top: var(--y); left: var(--x); display: flex; align-items: center; gap: .55rem; padding: .6rem; border: 0; color: var(--ink); background: transparent; transform: translate(-50%,-50%); }
.problem-pin i { width: .72rem; height: .72rem; border: 2px solid #fff; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 .35rem rgba(255,255,255,.13); }
.problem-pin b { padding: .4rem .55rem; border-radius: 99rem; background: rgba(238,233,223,.88); font-size: .58rem; letter-spacing: .1em; opacity: 0; transform: translateX(-.3rem); transition: opacity .2s,transform .2s; }
.problem-pin:hover b, .problem-pin.active b, .problem-pin:focus-visible b { opacity: 1; transform: none; }
.problem-pin.active i { background: var(--blue); }
.diagnosis-panel { display: flex; flex-direction: column; justify-content: center; min-height: 100svh; padding: clamp(6rem,8vw,8rem) clamp(2rem,4vw,4.5rem); color: var(--ink); background: var(--bone); }
.diagnosis-no { margin: 0; color: var(--blue); font: 700 .54rem Arial,sans-serif; letter-spacing: .2em; }
.diagnosis-panel h3 { margin: 1rem 0; font-family: "Noto Serif SC",STSong,serif; font-size: clamp(2.7rem,5vw,5.2rem); font-weight: 400; }
.diagnosis-panel > p:nth-of-type(2) { margin: 0; font-size: .8rem; line-height: 2; letter-spacing: .06em; opacity: .72; }
.layer-stack { display: grid; gap: 3px; margin: 2.5rem 0; perspective: 500px; }
.layer-stack span { padding: .58rem .8rem; border: 1px solid var(--line); background: rgba(255,255,255,.2); font-size: .58rem; letter-spacing: .13em; transform: translateX(calc(var(--layer,0) * .45rem)); }
.layer-stack span:nth-child(1) { --layer:3; background: #d5cec0; }
.layer-stack span:nth-child(2) { --layer:2; background: #b5afa4; }
.layer-stack span:nth-child(3) { --layer:1; background: #8d8b84; color: #fff; }
.layer-stack span:nth-child(4) { background: #595954; color: #fff; }
.diagnosis-panel dl { margin: 0; }
.diagnosis-panel dl div { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--line); }
.diagnosis-panel dt { font-size: .6rem; font-weight: 700; letter-spacing: .1em; }
.diagnosis-panel dd { margin: 0; font-size: .66rem; line-height: 1.7; opacity: .7; }
.line-button { display: flex; justify-content: space-between; margin-top: 2rem; padding: 1rem 0; border: 0; border-bottom: 1px solid var(--ink); color: var(--ink); background: transparent; text-align: left; font-size: .72rem; letter-spacing: .1em; }
.line-button span { transition: transform .2s; }
.line-button:hover span { transform: translateX(.35rem); }

.cases { color: var(--ink); background: #d8d1c5; }
.case-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(21rem,.7fr); gap: clamp(2rem,5vw,6rem); align-items: start; }
.case-visual { position: sticky; top: 6.5rem; }
.case-visual img { width: 100%; height: min(67vw,74vh); min-height: 34rem; object-fit: cover; object-position: center; filter: saturate(.72) contrast(1.02); }
.case-visual > p { display: flex; justify-content: space-between; gap: 1rem; margin: .85rem 0 0; font: .54rem Arial,sans-serif; letter-spacing: .16em; }
.case-visual small { font-size: inherit; opacity: .55; }
.case-tabs { display: grid; border-top: 1px solid var(--line); }
.case-tabs button { display: flex; justify-content: space-between; padding: 1rem 0; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; font-size: .68rem; letter-spacing: .1em; opacity: .5; }
.case-tabs button::after { content: "○"; }
.case-tabs button[aria-selected="true"] { opacity: 1; }
.case-tabs button[aria-selected="true"]::after { content: "●"; color: var(--blue); }
.case-info article { padding-top: clamp(3rem,7vw,7rem); }
.case-info article > p:first-child { color: var(--clay); font-size: .6rem; font-weight: 700; letter-spacing: .12em; }
.case-info h3 { margin: .9rem 0 1.2rem; font-family: "Noto Serif SC",STSong,serif; font-size: clamp(2rem,3.2vw,3.8rem); font-weight: 400; line-height: 1.25; }
.case-info article > p:nth-of-type(2) { margin: 0; font-size: .76rem; line-height: 2; letter-spacing: .05em; opacity: .7; }
.case-info ol { margin: 2.5rem 0 0; padding: 0; list-style: none; }
.case-info li { display: grid; grid-template-columns: 2.2rem 1fr; gap: .25rem .7rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.case-info li span { grid-row: 1 / 3; font: .54rem Arial,sans-serif; opacity: .5; }
.case-info li b { font-size: .68rem; letter-spacing: .08em; }
.case-info li small { font-size: .61rem; line-height: 1.6; opacity: .58; }
.source-note { margin-top: 2rem !important; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .56rem !important; line-height: 1.7 !important; opacity: .5 !important; }

.spain-notes { color: var(--bone); background: #20201e; }
.spain-intro { display: grid; grid-template-columns: .35fr 1fr .55fr; gap: clamp(2rem,5vw,6rem); align-items: start; }
.spain-intro h2 { margin: 0; font-family: "Noto Serif SC",STSong,serif; font-size: clamp(2.5rem,5vw,5.7rem); font-weight: 400; line-height: 1.13; letter-spacing: -.045em; }
.spain-intro > p:nth-of-type(2) { margin: 0; font-size: .78rem; line-height: 2; letter-spacing: .06em; opacity: .65; }
.spain-facts { grid-column: 2 / 4; display: grid; grid-template-columns: repeat(3,1fr); margin-top: 1rem; border-top: 1px solid var(--light-line); }
.spain-facts span { display: grid; gap: .3rem; padding: 1.2rem 1.2rem 0 0; font-size: .58rem; letter-spacing: .08em; opacity: .62; }
.spain-facts b { font-family: Georgia,serif; font-size: 1.6rem; font-weight: 400; opacity: 1; }
.spain-gallery { display: grid; grid-template-columns: 1.35fr .65fr; grid-template-rows: repeat(2,32vw); gap: .55rem; padding: 0 var(--edge); }
.spain-gallery figure { position: relative; margin: 0; overflow: hidden; }
.spain-gallery .spain-main { grid-row: 1 / 3; }
.spain-gallery img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78); transition: transform 1s cubic-bezier(.2,.75,.25,1),filter .4s; }
.spain-gallery figure:hover img { transform: scale(1.025); filter: saturate(1); }
.spain-gallery figcaption { position: absolute; right: .7rem; bottom: .7rem; padding: .48rem .65rem; color: var(--ink); background: rgba(238,233,223,.88); font: .5rem Arial,sans-serif; letter-spacing: .14em; }
.brand-disclaimer { margin: 0; padding: 1rem var(--edge) 4rem; font-size: .54rem; line-height: 1.7; letter-spacing: .04em; opacity: .5; }

.knowledge { position: relative; color: var(--ink); background: var(--paper); }
.knowledge-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.knowledge-grid article { min-height: 25rem; padding: clamp(1.7rem,3vw,3.2rem); background: var(--paper); transition: background .25s,color .25s; }
.knowledge-grid article:hover { color: var(--bone); background: var(--ink); }
.knowledge-grid .knowledge-feature { grid-row: span 2; min-height: 50rem; display: flex; flex-direction: column; justify-content: center; color: var(--bone); background: linear-gradient(160deg,rgba(36,71,255,.18),transparent 38%),#242523; }
.knowledge-grid span { font: 700 .52rem Arial,sans-serif; letter-spacing: .18em; opacity: .55; }
.knowledge-grid h3 { max-width: 35rem; margin: 1rem 0; font-family: "Noto Serif SC",STSong,serif; font-size: clamp(1.6rem,2.7vw,3.25rem); font-weight: 400; line-height: 1.35; }
.knowledge-grid p { max-width: 29rem; margin: 0; font-size: .72rem; line-height: 1.9; letter-spacing: .05em; opacity: .65; }
.knowledge-grid button { margin-top: 2rem; padding: .75rem 0; border: 0; border-bottom: 1px solid currentColor; color: inherit; background: transparent; font-size: .65rem; letter-spacing: .1em; }
.article-drawer { position: fixed; z-index: 160; right: 0; bottom: 0; display: grid; align-content: center; width: min(38rem,100%); height: 100svh; padding: clamp(2rem,6vw,5rem); color: var(--bone); background: #20201e; box-shadow: -2rem 0 7rem rgba(0,0,0,.3); opacity: 0; transform: translateX(103%); visibility: hidden; transition: transform .4s cubic-bezier(.2,.75,.25,1),opacity .3s,visibility .3s; }
.article-drawer.open { opacity: 1; transform: none; visibility: visible; }
.article-close { position: absolute; top: 1.3rem; right: 1.3rem; width: 2.6rem; height: 2.6rem; border: 1px solid var(--light-line); border-radius: 50%; color: inherit; background: transparent; font-size: 1.3rem; }
.article-drawer > p { color: #91a1ff; font: 700 .55rem Arial,sans-serif; letter-spacing: .2em; }
.article-drawer h3 { margin: 1rem 0 2rem; font-family: "Noto Serif SC",STSong,serif; font-size: clamp(2rem,4vw,4rem); font-weight: 400; line-height: 1.25; }
.article-drawer ol { margin: 0; padding: 0; list-style: none; counter-reset: notes; }
.article-drawer li { counter-increment: notes; padding: 1rem 0; border-top: 1px solid var(--light-line); font-size: .72rem; line-height: 1.8; }
.article-drawer li::before { margin-right: .8rem; color: #91a1ff; content: "0" counter(notes); font: .55rem Arial,sans-serif; }
.article-drawer small { margin-top: 2rem; font-size: .55rem; line-height: 1.7; opacity: .5; }

.consult { display: grid; grid-template-columns: .75fr 1fr; gap: clamp(3rem,8vw,9rem); padding: clamp(6rem,10vw,10rem) var(--edge); color: var(--bone); background: var(--blue); }
.consult-copy h2 { margin: 1.1rem 0 1.4rem; font-family: "Noto Serif SC",STSong,serif; font-size: clamp(2.5rem,5vw,5.7rem); font-weight: 400; line-height: 1.12; letter-spacing: -.045em; }
.consult-copy > p:last-child { max-width: 28rem; margin: 0; font-size: .76rem; line-height: 2; opacity: .72; }
.consult form { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.4rem; align-content: start; }
.consult label { display: grid; gap: .55rem; }
.consult label span { font-size: .58rem; letter-spacing: .12em; opacity: .7; }
.consult .wide { grid-column: 1 / -1; }
.consult input, .consult select, .consult textarea { width: 100%; padding: .85rem 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.52); border-radius: 0; color: var(--bone); background: transparent; outline-offset: 2px; }
.consult option { color: var(--ink); background: var(--bone); }
.consult textarea { resize: vertical; }
.consult ::placeholder { color: rgba(238,233,223,.55); }
.submit-button { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: 1.2rem; padding: 1.2rem; border: 0; color: var(--ink); background: var(--bone); font-size: .74rem; letter-spacing: .1em; }
.submit-button span { transition: transform .2s; }
.submit-button:hover span { transform: translateX(.4rem); }
.form-status { grid-column: 1 / -1; min-height: 1.5rem; margin: 0; font-size: .64rem; line-height: 1.7; }

.site-footer { display: grid; grid-template-columns: .7fr 1fr .6fr; gap: 2rem; align-items: start; padding: 4rem var(--edge); color: var(--bone); background: var(--ink); }
.site-footer p { margin: 0; font-size: .66rem; line-height: 1.8; letter-spacing: .06em; opacity: .62; }
.site-footer > div { display: grid; gap: .6rem; }
.site-footer > div a { font-size: .64rem; text-decoration: none; opacity: .68; }
.site-footer small { grid-column: 1 / -1; padding-top: 2rem; border-top: 1px solid var(--light-line); font-size: .52rem; line-height: 1.8; letter-spacing: .05em; opacity: .45; }

.portal { position: fixed; z-index: 150; inset: 0; overflow-y: auto; color: var(--bone); background: rgba(85,75,87,.98); opacity: 0; transform: translateY(2rem); visibility: hidden; pointer-events: none; transition: opacity .3s,transform .4s cubic-bezier(.2,.75,.25,1),visibility .3s; }
.portal.open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.portal::before { position: fixed; inset: 0; background: radial-gradient(circle at 80% 25%,rgba(36,71,255,.16),transparent 30%); content: ""; pointer-events: none; }
.portal-close { position: fixed; z-index: 3; top: 1.4rem; right: var(--edge); width: 3rem; height: 3rem; border: 1px solid var(--light-line); border-radius: 50%; color: inherit; background: transparent; font-size: 1.4rem; }
.portal-tabs { position: fixed; z-index: 2; top: 1.8rem; left: var(--edge); display: flex; gap: 2rem; }
.portal-tabs button { padding: .5rem 0; border: 0; border-bottom: 1px solid transparent; color: inherit; background: transparent; font-size: .62rem; letter-spacing: .15em; opacity: .45; }
.portal-tabs button[aria-selected="true"] { border-color: currentColor; opacity: 1; }
.portal-view { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(20rem,.65fr) 1.35fr; gap: clamp(3rem,7vw,8rem); align-items: center; min-height: 100svh; padding: 7rem var(--edge) 4rem; }
.portal-view[hidden] { display: none; }
.portal-view h2 { margin: 1rem 0 1.4rem; font-family: "Noto Serif SC",STSong,serif; font-size: clamp(2.8rem,5.5vw,6.6rem); font-weight: 400; line-height: 1.12; letter-spacing: -.045em; }
.portal-view > div:first-child > p:last-child { max-width: 26rem; margin: 0; font-size: .76rem; line-height: 2; opacity: .65; }
.mood-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; }
.mood-grid button { display: grid; align-content: end; min-height: 18rem; padding: 1.2rem; border: 1px solid var(--light-line); color: var(--bone); background: rgba(255,255,255,.03); text-align: left; transition: transform .25s,background .25s,color .25s; }
.mood-grid button:hover, .mood-grid button.active { color: var(--ink); background: var(--bone); transform: translateY(-.25rem); }
.mood-grid i { width: 3.5rem; height: 3.5rem; margin-bottom: auto; border-radius: 50%; background: #d8d2c8; box-shadow: inset 1rem -1rem 2rem rgba(0,0,0,.12); }
.mood-grid button:nth-child(2) i { background: #c99f78; }
.mood-grid button:nth-child(3) i { background: #8f8070; }
.mood-grid button:nth-child(4) i { background: #252825; }
.mood-grid button:nth-child(5) i { background: #f4f0e8; }
.mood-grid button:nth-child(6) i { background: #9a5947; }
.mood-grid b { font-family: "Noto Serif SC",STSong,serif; font-size: 1.25rem; font-weight: 500; letter-spacing: .1em; }
.mood-grid small { margin-top: .4rem; font-size: .57rem; letter-spacing: .06em; opacity: .55; }
.portal-next { position: absolute; right: var(--edge); bottom: 1.8rem; font-size: .68rem; letter-spacing: .12em; text-decoration: none; }
.portal-next span { display: inline-block; margin-left: .5rem; transition: transform .2s; }
.portal-next:hover span { transform: translateX(.35rem); }
.solve-view form { align-self: center; }
.solve-view fieldset { margin: 0; padding: 0; border: 0; }
.solve-view legend { margin-bottom: 2rem; font-family: "Noto Serif SC",STSong,serif; font-size: clamp(1.8rem,3vw,3.4rem); }
.solve-view legend span { margin-right: .7rem; color: #91a1ff; font: .6rem Arial,sans-serif; }
.solve-view fieldset > div { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; }
.solve-view label input { position: absolute; opacity: 0; }
.solve-view label span { display: grid; place-items: center; min-height: 7rem; border: 1px solid var(--light-line); font-size: .72rem; letter-spacing: .1em; transition: color .2s,background .2s; }
.solve-view label:hover span, .solve-view input:checked + span { color: var(--ink); background: var(--bone); }
.quick-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; }
.quick-actions button, .quick-actions a { padding: .7rem 0; border: 0; border-bottom: 1px solid currentColor; color: inherit; background: transparent; font-size: .64rem; letter-spacing: .1em; text-decoration: none; }
.quick-actions button:disabled { opacity: .25; }
.quick-result { padding: 2rem; border: 1px solid var(--light-line); }
.quick-result > p { color: #91a1ff; font: 700 .55rem Arial,sans-serif; letter-spacing: .18em; }
.quick-result h3 { margin: .7rem 0 1.4rem; font-family: "Noto Serif SC",STSong,serif; font-size: 2.5rem; font-weight: 400; }
.quick-result div { font-size: .75rem; line-height: 2; }
.quick-result small { display: block; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--light-line); font-size: .56rem; opacity: .5; }
.toast { position: fixed; z-index: 210; right: var(--edge); bottom: 1.2rem; max-width: min(24rem,calc(100vw - 2.4rem)); padding: .9rem 1.1rem; border-left: 3px solid var(--blue); color: var(--ink); background: var(--bone); box-shadow: 0 1rem 3rem rgba(0,0,0,.2); font-size: .7rem; line-height: 1.6; opacity: 0; transform: translateY(1rem); pointer-events: none; transition: opacity .2s,transform .2s; }
.toast.show { opacity: 1; transform: none; }

.js .hero .eyebrow, .js .hero h1, .js .hero-copy, .js .hero-portals { opacity: 0; transform: translateY(1.4rem); transition: opacity .75s,transform .85s cubic-bezier(.2,.75,.25,1); }
.js .hero.ready .eyebrow, .js .hero.ready h1, .js .hero.ready .hero-copy, .js .hero.ready .hero-portals { opacity: 1; transform: none; }
.js .hero h1 { transition-delay: .08s; }
.js .hero-copy { transition-delay: .16s; }
.js .hero-portals { transition-delay: .24s; }
.reveal-section { opacity: 0; transform: translateY(2rem); transition: opacity .8s,transform .9s cubic-bezier(.2,.75,.25,1); }
.reveal-section.visible { opacity: 1; transform: none; }

@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(223,101,74,.48); } 70%,100% { box-shadow: 0 0 0 .55rem rgba(223,101,74,0); } }
@keyframes anchor-pulse { 0% { opacity:.9; transform:translate(-50%,-50%) scale(.38); } 78%,100% { opacity:0; transform:translate(-50%,-50%) scale(1.2); } }
@keyframes circle-reveal { from { opacity:1; clip-path:circle(0 at 70% 44%); } to { opacity:1; clip-path:circle(145% at 70% 44%); } }
@keyframes frame-reveal { 0% { opacity:1; transform:translate3d(30%,0,0) scale(.3); } 46% { opacity:1; transform:translate3d(15%,0,0) scale(.58); } 100% { opacity:1; transform:translate3d(0,0,0) scale(1); } }
@keyframes diagonal-reveal { from { opacity:1; clip-path:polygon(100% 0,100% 0,100% 100%,70% 100%); } to { opacity:1; clip-path:polygon(0 0,100% 0,100% 100%,0 100%); } }
@keyframes active-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes brand-media-in { from { filter:saturate(.7) contrast(.92); transform:scale(1.065); } to { filter:saturate(.86) contrast(.96); transform:scale(1.015); } }
@keyframes brand-content-in { from { opacity:0; translate:0 .85rem; } to { opacity:1; translate:0 0; } }
@keyframes brand-surface-in { from { opacity:0; } to { opacity:1; } }
@keyframes brand-card-in { from { opacity:0; translate:0 1.1rem; } to { opacity:1; translate:0 0; } }
@keyframes problem-pulse { 0% { opacity:.7; transform:scale(.72); } 70%,100% { opacity:0; transform:scale(1.32); } }
@keyframes diagnosis-case-in { from { opacity:0; translate:1.2rem 0; } to { opacity:1; translate:0 0; } }

@media (hover:hover) and (pointer:fine) { .hero, .hero button { cursor: none; } }

@media (max-width: 1050px) {
  .site-header { grid-template-columns: 1fr auto; }
  .main-nav { position: fixed; top: 4.8rem; right: var(--edge); display: none; width: min(20rem,calc(100vw - 2 * var(--edge))); padding: 1rem; color: var(--bone); background: rgba(85,75,87,.97); backdrop-filter: blur(14px); }
  .main-nav.open { display: grid; }
  .main-nav a { padding: .8rem; text-align: left; }
  .menu-button { display: block; }
  .hero-portals { width: min(43rem,calc(100vw - 2 * var(--edge))); }
  .hero-copy { width: min(42rem,78vw); }
  .hero-side { display: none; }
  .exhibit-plaque { width: min(12rem,20vw); }
  .gallery-route { width: min(25rem,42vw); }
  .texture-card { left: auto; right: var(--edge); width: min(23rem,42vw); }
  .material-corridor-head { grid-template-columns: .32fr 1fr; }
  .material-corridor-head > div { grid-column: 2; }
  .brand-chooser { grid-template-columns: minmax(15rem,.36fr) minmax(0,1fr); min-height: 49rem; }
  .brand-tab { padding: 1rem 1.15rem; }
  .brand-profile { padding: 3rem; }
  .brand-scope { grid-template-columns: 1fr; }
  .brand-scope section { padding: 1rem 0; }
  .brand-scope section + section { padding-left: 0; border-top: 1px solid var(--light-line); border-left: 0; }
  .manifesto { grid-template-columns: .3fr 1.2fr; }
  .manifesto-steps { grid-column: 2; }
  .route-head { grid-template-columns: 1fr; }
  .identity-routes { grid-template-columns: 1fr; }
  .identity-card + .identity-card { border-top: 1px solid var(--line); border-left: 0; }
  .function-directory { grid-template-columns: repeat(2,1fr); }
  .home-coda { grid-template-columns: 1fr; }
  .home-product-card--lead { grid-column:span 7; }
  .home-product-card--classic { grid-column:span 5; }
  .home-product-card--art { grid-column:span 12; }
  .problem-map-head,.expertise-head { grid-template-columns:.25fr 1fr; }
  .problem-map-head > p:last-child,.expertise-head > p:last-child { grid-column:2; }
  .problem-atlas,.expertise-layout { grid-template-columns:1fr; }
  .problem-visual,.expertise-media { position:relative; top:auto; height:38rem; min-height:0; }
  .problem-lab { grid-template-columns: 1fr; }
  .problem-stage, .diagnosis-panel { min-height: auto; }
  .diagnosis-panel { padding-top: 5rem; padding-bottom: 5rem; }
  .case-layout { grid-template-columns: 1fr; }
  .case-visual { position: relative; top: auto; }
  .case-visual img { height: 66vw; min-height: 30rem; }
  .spain-intro { grid-template-columns: .35fr 1fr; }
  .spain-intro > p:nth-of-type(2) { grid-column: 2; }
  .spain-facts { grid-column: 2; }
  .portal-view { grid-template-columns: 1fr; align-content: center; }
  .portal-view h2 { font-size: clamp(2.8rem,8vw,5.5rem); }
  .mood-grid button { min-height: 12rem; }
}

@media (max-width: 720px) {
  :root { --edge: 1.1rem; }
  .site-header { min-height: 4.7rem; }
  .site-header.scrolled { min-height: 4.2rem; }
  .brand-en, .text-action, .unit-mark, .brush-cursor, .gallery-route, .cursor-readout { display: none; }
  .hero-slide--one img { object-position: 49% center; }
  .hero-slide--two img { object-position: 47% center; }
  .hero-slide--three img { object-position: 52% center; }
  .hero-message { top: clamp(8.6rem,18vh,10.5rem); transform: translateY(1.2rem); }
  .hero-message.is-active { transform: none; }
  .hero-message.is-leaving { transform: translateY(-1rem); }
  .eyebrow { align-items: flex-start; max-width: 19rem; line-height: 1.55; }
  .eyebrow i { width: 1.5rem; margin-top: .55rem; }
  .hero h1, .hero-message h2 { width: 100%; font-size: clamp(1.9rem,8.8vw,3.4rem); line-height: 1.04; letter-spacing: -.075em; }
  .hero-copy { display: block; width: 92%; margin-top: 1.25rem; }
  .hero-copy p { font-size: .76rem; line-height: 1.75; }
  .problem-spectrum { gap: .35rem .55rem; margin-top: 1rem; padding-top: .6rem; }
  .problem-spectrum li { gap: .55rem; font-size: .5rem; }
  .hero-slide figcaption { display: none; }
  .visual-progress { right: var(--edge); bottom: 2.1rem; grid-template-columns: repeat(3,2.6rem); }
  .hero-portals { right: var(--edge); bottom: 1.7rem; grid-template-columns: 1fr; width: calc(100vw - 2 * var(--edge)); }
  .portal-button { min-height: 4.8rem; padding: .8rem .9rem; }
  .portal-button b { font-size: 1rem; }
  .portal-button small { display: none; }
  .hero-note { right: auto; bottom: .55rem; left: var(--edge); }
  .texture-anchor { top: 44%; left: 75%; }
  .texture-anchor b { display: none; }
  .texture-card { position: fixed; top: auto; right: .8rem; bottom: .8rem; left: .8rem; width: auto; max-height: calc(100svh - 5.5rem); }
  .texture-card figure { height: min(48vh,21rem); }
  .material-corridor { padding-top: 6rem; }
  .material-corridor-head { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; }
  .material-corridor-head > div { grid-column: auto; gap: 1.2rem; }
  .material-corridor-head h2 { font-size: 11.5vw; line-height: 1.08; }
  .brand-chooser { display: block; min-height: 0; border: 0; background: transparent; }
  .brand-tabs { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .brand-tab { flex: 0 0 13.5rem; min-height: 7.4rem; padding: 1rem; scroll-snap-align: start; }
  .brand-tab.is-active { padding-left: 1.25rem; }
  .brand-tab::after { right: .85rem; }
  .brand-stage { min-height: 47rem; }
  .brand-profile { gap: 1.4rem; padding: 2rem 1.3rem; }
  .brand-profile header h3 { width: min(100%,19rem); height: 4rem; }
  .brand-profile header h3.brand-logo-topproject { gap: .8rem; width: 100%; }
  .topproject-mark { flex-basis: 3.5rem; width: 3.5rem; }
  .topproject-word { font-size: 2rem; }
  .brand-profile header h3.brand-logo-invert { width: 8.5rem; height: 4.5rem; padding: .45rem 1rem; }
  .brand-stage { min-height: 63rem; }
  .brand-profile--visual { justify-content: flex-start; gap: 1.35rem; padding-top: 11.5rem; }
  .brand-effect-visual { bottom: auto; height: 17rem; }
  .brand-effect-visual::after { background: linear-gradient(180deg,rgba(var(--surface-rgb),.03) 0%,rgba(var(--surface-rgb),.12) 45%,var(--surface) 91%); }
  .brand-effect-visual img { object-position: 58% center; }
  .brand-effect-visual figcaption { right: .8rem; bottom: 3.7rem; font-size: .48rem; }
  .brand-profile--visual > header,
  .brand-profile--visual > .brand-scope,
  .brand-profile--visual > ul,
  .brand-profile--visual > a { width: 100%; }
  .brand-profile--visual > .brand-scope { background: rgba(247,242,235,.74); }
  .brand-profile header > span { font-size: .9rem; }
  .brand-scope section { padding: .85rem 0; }
  .brand-scope h4 { margin-bottom: .45rem; }
  .brand-scope p { font-size: .76rem; line-height: 1.72; }
  .brand-profile > ul { gap: .4rem; }
  .brand-profile > ul li { padding: .45rem .62rem; font-size: .62rem; }
  .brand-selection-note { grid-template-columns: 1fr; padding: 1.5rem; }
  .brand-selection-note > div { grid-template-columns: 1fr; gap: .7rem; }
  .brand-selection-note p { padding: .8rem 0 0; border-top: 1px solid rgba(53,47,51,.2); border-left: 0; font-size: .72rem; }
  .brand-selection-note > a { justify-self: start; }
  .brand-selection-note small { grid-column: auto; }
  .manifesto { grid-template-columns: 1fr; }
  .manifesto > div:nth-child(2) { grid-template-columns: 1fr; }
  .manifesto-steps { grid-column: auto; }
  .identity-card { min-height: auto; }
  .identity-card > div { grid-template-columns: 1fr; }
  .identity-card > div a:nth-child(odd) { margin-right: 0; }
  .function-directory { grid-template-columns: 1fr; }
  .product-editorial { display:block; }
  .home-product-card { margin-bottom:1.2rem; }
  .home-product-card--lead { display:block; min-height:47rem; }
  .home-product-card--lead .product-card-copy { position:absolute; right:1rem; bottom:1rem; left:1rem; width:auto; min-height:0; margin:0; }
  .product-packshot { top:5rem; right:.5rem; bottom:auto; width:63%; }
  .home-product-card--classic { grid-template-rows:19rem auto; }
  .home-product-card--art { grid-template-columns:1fr; min-height:0; margin-top:0; }
  .home-product-card--art .product-card-visual { height:22rem; }
  .system-ribbon { grid-template-columns:auto 1fr; gap:1rem; }
  .system-ribbon p,.system-ribbon b { grid-column:2; }
  .problem-map-head,.expertise-head { grid-template-columns:1fr; }
  .problem-map-head > p:last-child,.expertise-head > p:last-child { grid-column:auto; }
  .problem-map-head h2,.expertise-head h2 { max-width:none; font-size:10.8vw; line-height:1.08; letter-spacing:-.06em; }
  .problem-visual,.expertise-media { height:72vw; min-height:28rem; }
  .problem-solution-grid article { grid-template-columns:1fr 2.5rem; gap:.7rem 1rem; min-height:0; padding:1.4rem 0; }
  .problem-solution-grid article > span { grid-column:1; }
  .problem-solution-grid h3 { grid-column:1; }
  .problem-solution-grid p { grid-column:1; }
  .problem-solution-grid a { grid-column:2; grid-row:1 / 4; align-self:center; }
  .expertise-steps li { grid-template-columns:3rem 1fr; gap:1rem; min-height:8.5rem; }
  .expertise-steps small { display:none; }
  .section-head { grid-template-columns: 1fr; gap: 1.5rem; }
  .section-head h2, .problem-stage h2, .spain-intro h2, .consult-copy h2 { font-size: clamp(2.25rem,12vw,4rem); }
  .material-rail { grid-auto-columns: 84vw; }
  .material-card { grid-template-rows: 19rem auto; min-height: 37rem; }
  .rail-controls { display: none; }
  .problem-stage { padding-top: 6rem; }
  .wall-map { min-height: 25rem; margin-top: 2rem; }
  .problem-pin b { display: none; }
  .diagnosis-panel { padding: 4.5rem var(--edge); }
  .case-visual img { height: 110vw; min-height: 28rem; }
  .case-visual > p { display: grid; }
  .spain-intro { grid-template-columns: 1fr; }
  .spain-intro > p:nth-of-type(2), .spain-facts { grid-column: auto; }
  .spain-intro h2 { font-size: 9.2vw; line-height: 1.18; }
  .spain-facts { grid-template-columns: 1fr; }
  .spain-gallery { grid-template-columns: 1fr; grid-template-rows: 75vw repeat(2,70vw); }
  .spain-gallery .spain-main { grid-row: auto; }
  .knowledge-grid { grid-template-columns: 1fr; }
  .knowledge-grid .knowledge-feature { grid-row: auto; min-height: 32rem; }
  .knowledge-grid article { min-height: 22rem; }
  .consult { grid-template-columns: 1fr; }
  .consult form { grid-template-columns: 1fr; }
  .consult .wide, .submit-button, .form-status { grid-column: auto; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer small { grid-column: auto; }
  .portal-tabs { top: 1.2rem; gap: 1rem; }
  .portal-close { top: .85rem; }
  .portal-view { display: block; padding-top: 6.5rem; }
  .portal-view h2 { font-size: clamp(2.5rem,13vw,4.2rem); }
  .mood-grid { grid-template-columns: repeat(2,1fr); margin-top: 2rem; }
  .mood-grid button { min-height: 9.5rem; padding: .9rem; }
  .mood-grid i { width: 2.6rem; height: 2.6rem; }
  .portal-next { position: relative; right: auto; bottom: auto; display: block; margin: 1.5rem 0; }
  .solve-view form { margin-top: 2rem; }
  .solve-view fieldset > div { grid-template-columns: 1fr; }
  .solve-view label span { min-height: 4rem; }
}

@media (max-width: 1050px) {
  .product-intro,.problem-map-head,.expertise-head { grid-template-columns:1fr; }
  .product-intro > p,.problem-map-head > p:last-child,.expertise-head > p:last-child { grid-column:auto; margin-top:1.4rem; }
  .home-product-card { grid-template-columns:minmax(17rem,.85fr) minmax(0,1.15fr); }
  .home-product-card--classic { grid-template-columns:minmax(0,1.15fr) minmax(17rem,.85fr); }
  .problem-atlas,.expertise-layout { grid-template-columns:1fr; }
  .problem-visual,.expertise-media { height:38rem; }
}

@media (max-width: 720px) {
  .product-intro,.problem-map-head,.expertise-head { padding-top:1rem; }
  .product-intro h2,.problem-map-head h2,.expertise-head h2 { max-width:none; font-size:10.5vw; line-height:1.07; }
  .product-editorial { display:grid; }
  .home-product-card,.home-product-card--classic,.home-product-card--art { display:grid; grid-template-columns:1fr; grid-template-rows:auto auto; min-height:0; }
  .home-product-card .product-card-visual,.home-product-card--lead .product-card-visual,.home-product-card--classic .product-card-visual,.home-product-card--art .product-card-visual { position:relative; grid-column:1; grid-row:1; height:67vw; min-height:20rem; }
  .home-product-card .product-card-copy,.home-product-card--lead .product-card-copy,.home-product-card--classic .product-card-copy,.home-product-card--art .product-card-copy { position:relative; inset:auto; grid-column:1; grid-row:2; width:auto; min-height:22rem; margin:0; padding:2rem 1.5rem; }
  .home-product-card--art .product-card-copy { min-height:20rem; }
  .product-packshot { top:auto; right:.5rem; bottom:2.3rem; width:57%; }
  .product-card-copy h3 { font-size:clamp(2rem,10vw,3rem); }
  .system-ribbon { grid-template-columns:auto 1fr; padding:1.5rem; }
  .system-ribbon p,.system-ribbon b { grid-column:2; }
  .problem-solution-grid article { grid-template-columns:1fr 2.5rem; }
  .problem-solution-grid article > span,.problem-solution-grid h3,.problem-solution-grid p { grid-column:1; }
  .problem-solution-grid a { grid-column:2; grid-row:1 / 4; }
}

@media (max-width: 1050px) {
  .problem-lab-head { grid-template-columns: .32fr 1fr; }
  .problem-lab-head > div { grid-column: 2; }
  .problem-diagnostic { grid-template-columns: 1fr; min-height: 0; }
  .problem-wall-figure { min-height: 0; aspect-ratio: 1672 / 941; }
  .problem-hotspot[data-problem-target="crack"] { --hotspot-x:27% !important; --hotspot-y:22% !important; }
  .problem-hotspot[data-problem-target="efflorescence"] { --hotspot-x:18% !important; --hotspot-y:72% !important; }
  .problem-hotspot[data-problem-target="seepage"] { --hotspot-x:70% !important; --hotspot-y:23% !important; }
  .problem-hotspot[data-problem-target="mold"] { --hotspot-x:84% !important; --hotspot-y:75% !important; }
  .diagnosis-stage { min-height: 46rem; }
  .case-file-head { grid-template-columns: .32fr 1fr; }
  .case-file-head > div { grid-column: 2; }
  .case-evidence { grid-template-columns: 1fr; min-height: 0; }
  .case-evidence-visual { min-height: 0; aspect-ratio: 4 / 3; }
  .case-evidence-visual > img { object-position: center; }
  .case-record { min-height: 43rem; }
  .case-proof-chain header { grid-template-columns: .32fr 1fr; }
  .case-proof-chain header > p:last-child { grid-column: 2; }
  .case-proof-chain ol { grid-template-columns: repeat(2,1fr); }
  .case-proof-chain li:nth-child(n) { border-right: 0; }
  .case-proof-chain li:nth-child(odd) { border-right: 1px solid var(--line); }
  .footer-invitation { grid-template-columns: .32fr 1fr; }
  .footer-invitation > p:last-child { grid-column: 2; }
  .footer-routes { grid-template-columns: 1fr; }
  .footer-routes > a { min-height: 18rem; border-right: 0; border-bottom: 1px solid rgba(18,18,18,.18); }
  .footer-routes > a:last-child { border-bottom: 0; }
  .footer-directory { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .problem-anatomy { padding-top: 6rem; }
  .problem-lab-head { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; }
  .problem-lab-head > div { grid-column: auto; }
  .problem-lab-head h2 { font-size: 11vw; line-height: 1.08; }
  .problem-lab-head h2 span { white-space: normal; }
  .problem-wall-figure { aspect-ratio: 1.5; }
  .problem-hotspot { gap: .35rem; }
  .problem-hotspot i { width: 2rem; height: 2rem; font-size: .48rem; }
  .problem-hotspot span { padding: .38rem .5rem; font-size: .52rem; }
  .problem-wall-figure figcaption { right: .55rem; bottom: .55rem; left: .55rem; padding: .55rem .65rem; font-size: .48rem; }
  .problem-wall-figure figcaption small { display: none; }
  .diagnosis-stage { min-height: 0; padding: 2rem 1.3rem; }
  .diagnosis-stage-head { font-size: .62rem; }
  .diagnosis-case header h3 { font-size: 2.35rem; }
  .diagnosis-lead { font-size: .84rem; }
  .diagnosis-case dl { grid-template-columns: 1fr; }
  .diagnosis-case dd { font-size: .76rem; }
  .diagnosis-route li:nth-child(n) { margin-left: 0; }
  .diagnosis-case footer { grid-template-columns: 1fr; }
  .diagnosis-case footer a { justify-self: start; }
  .problem-lab-foot { align-items: flex-start; flex-direction: column; padding: 1.4rem; }
  .case-file { padding-top: 6rem; }
  .case-file-head { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; }
  .case-file-head > div { grid-column: auto; }
  .case-file-head h2 { font-size: 11vw; line-height: 1.08; }
  .case-file-head h2 span { white-space: normal; }
  .case-evidence-visual { aspect-ratio: 4 / 3; }
  .case-point { gap: .35rem; }
  .case-points { top: .65rem; left: .65rem; gap: .35rem; max-width: calc(100% - 1.3rem); }
  .case-points-label { display: none; }
  .case-point i { width: 2rem; height: 2rem; font-size: .5rem; }
  .case-point span { padding: .42rem .55rem; font-size: .54rem; }
  .case-evidence-visual figcaption { right: .55rem; bottom: .55rem; left: .55rem; padding: .55rem .65rem; font-size: .48rem; }
  .case-evidence-visual figcaption small { display: none; }
  .case-record { min-height: 0; padding: 2rem 1.3rem; }
  .case-record header h3 { font-size: 2.35rem; }
  .case-facts { grid-template-columns: 1fr; }
  .case-observation h4 { font-size: 1.6rem; }
  .case-record > footer { grid-template-columns: 1fr; }
  .case-record > footer a:last-child { justify-self: start; }
  .case-proof-chain { margin-top: 3.5rem; }
  .case-proof-chain header { grid-template-columns: 1fr; gap: 1.2rem; }
  .case-proof-chain header > p:last-child { grid-column: auto; }
  .case-proof-chain header h3 { font-size: 2rem; }
  .case-proof-chain ol { grid-template-columns: 1fr; }
  .case-proof-chain li:nth-child(n) { border-right: 0; }
  .case-file-foot { align-items: flex-start; flex-direction: column; padding: 1.4rem; }
  .home-footer { padding-top: 6rem; }
  .footer-invitation { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-invitation h2 { font-size: 9.6vw; line-height: 1.08; }
  .footer-invitation h2 span { white-space: normal; }
  .footer-invitation > p:last-child { grid-column: auto; }
  .footer-routes > a { min-height: 17rem; padding: 2rem 1.35rem; }
  .footer-routes strong { font-size: 1.82rem; }
  .footer-directory { grid-template-columns: 1fr 1fr; gap: 3rem 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-directory address { grid-column: 1 / -1; }
  .footer-bottom { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 0; }
  .footer-bottom a { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .brush-cursor { display: none; }
  .hero-slide { animation: none !important; }
  .hero-slide--one { opacity: 1; clip-path: none; }
  .hero-slide--two, .hero-slide--three { display: none; }
  .hero-message { display: none; animation: none !important; }
  .hero-message--one { top: clamp(8.6rem,18vh,10.5rem); display: block; opacity: 1; transform: none; }
}