html { overflow-x: clip; }
.archive-home { overflow-x: clip; background: #f4f1eb; }
.archive-hero { padding: 132px 0 74px; overflow: hidden; background: #f4f1eb; }
.archive-hero-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(480px,.72fr); align-items:center; gap:clamp(54px,7vw,100px); min-height:680px; }
.archive-eyebrow { display:block; color:var(--accent); font-family:var(--font-mono); font-size:var(--text-caption); font-weight:700; letter-spacing:.08em; }
.archive-hero .archive-eyebrow { color:var(--accent-text); }
.archive-hero-copy h1 { max-width:10em; margin:26px 0; font-size:clamp(54px,5vw,72px); font-weight:600; line-height:1.08; letter-spacing:-.01em; }
.archive-hero-copy h1 strong { display:block; color:var(--accent); font-weight:inherit; }
.archive-hero-copy>p { max-width:34em; margin:0; color:var(--ink-soft); font-size:var(--text-lead); line-height:1.8; }
.archive-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.archive-button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 24px; border:1px solid var(--ink); border-radius:4px; font-weight:600; }
.archive-button.primary { background:var(--ink); color:white; }
.archive-button.secondary { background:transparent; }
.archive-button:hover { transform:translateY(-2px); }
.archive-principles { display:flex; flex-wrap:wrap; gap:25px; margin-top:42px; padding-top:22px; border-top:1px solid var(--line); color:var(--ink-soft); font-size:var(--text-small); }
.archive-principles span { display:flex; gap:7px; }
.archive-principles b { color:var(--accent); font-family:var(--font-mono); }
.archive-hero-stage { position:relative; display:flex; min-height:620px; align-items:center; padding:74px 26px 38px; border:1px solid var(--line); background:#e7e0d7; }
.stage-kicker { position:absolute; top:22px; left:24px; z-index:5; font-family:var(--font-mono); font-size:var(--text-caption); font-weight:700; letter-spacing:.08em; }
.stage-evidence { position:relative; z-index:2; width:100%; margin:0; overflow:hidden; border:1px solid rgb(23 21 19 / .14); background:#f8f3ea; box-shadow:9px 9px 0 rgb(23 21 19 / .12); transform:rotate(-.7deg); transition:transform .45s var(--ease-out),box-shadow .45s ease; }
.stage-evidence img { display:block; width:100%; height:auto; }
.stage-evidence figcaption { min-height:42px; padding:12px 14px; background:var(--ink); color:white; font-size:var(--text-caption); font-weight:600; letter-spacing:.02em; }
.archive-hero-stage:hover .stage-evidence { transform:rotate(0) translateY(-4px); box-shadow:13px 13px 0 rgb(23 21 19 / .14); }
.archive-logo-band { padding:34px 0 38px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); }
.archive-logo-band p { margin:0 0 22px; color:var(--muted); font-size:var(--text-caption); text-align:center; }
.archive-logo-row { display:grid; grid-template-columns:repeat(8,1fr); align-items:center; gap:28px; }
.archive-logo-row img { width:100%; max-height:38px; object-fit:contain; filter:grayscale(1) brightness(.28) contrast(1.35); opacity:.82; transition:filter .25s ease,opacity .25s ease,transform .25s ease; }
.archive-logo-row img:hover { filter:none; opacity:1; transform:translateY(-2px); }
.home-problem { padding:clamp(64px,7vw,94px) 0; background:var(--ink); color:white; }
.home-problem-head { max-width:900px; }
.home-problem-head h2 { margin:20px 0 22px; font-size:var(--type-display); line-height:1.12; letter-spacing:-.01em; }
.home-problem-head>p { max-width:42em; margin:0; color:#c9c2bb; font-size:var(--text-lead); line-height:1.85; }
.home-problem-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; }
.home-problem-grid article { min-height:0; padding:28px; border:1px solid rgb(255 255 255 / .16); background:rgb(255 255 255 / .035); }
.home-problem-grid article>span { display:block; color:var(--accent); font-family:var(--font-mono); font-size:24px; font-weight:800; letter-spacing:-.03em; }
.home-problem-grid h3 { margin:26px 0 13px; font-size:var(--text-subheading); line-height:1.4; }
.home-problem-grid p { margin:0; color:#b8b1aa; font-size:var(--text-body); line-height:1.75; }
.archive-cases,.archive-services { padding:clamp(64px,7vw,94px) 0; }
.archive-cases { overflow:hidden; background:var(--ink); color:white; }
.archive-section-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.42fr); align-items:end; gap:42px; margin-bottom:38px; }
.archive-section-head h2 { margin:18px 0 0; font-size:var(--type-display); line-height:1.12; letter-spacing:-.01em; }
.archive-section-head p { margin:0; color:var(--muted); font-size:var(--text-lead); line-height:1.8; }
.archive-cases .archive-section-head p { color:#bcb5ae; }
.archive-case-toolbar { display:flex; justify-content:space-between; gap:24px; margin-bottom:30px; border-bottom:1px solid rgb(255 255 255 / .18); }
.archive-case-tabs { display:flex; gap:4px; overflow:auto; }
.archive-case-tabs button,.archive-case-controls button { border:0; background:transparent; color:#bcb5ae; cursor:pointer; }
.archive-case-tabs button { padding:12px 16px; border-bottom:2px solid transparent; white-space:nowrap; }
.archive-case-tabs button.is-active { border-color:var(--signal); color:var(--signal); }
.archive-case-controls { display:flex; gap:18px; }
.archive-case-controls button:hover { color:white; }
.archive-swipe-hint { display:none; margin:0; color:var(--signal); font-family:var(--font-mono); font-size:var(--text-caption); font-weight:700; letter-spacing:.03em; }
.archive-case-track { display:flex; gap:24px; overflow-x:auto; padding:8px max(32px,calc((100vw - 1240px)/2)) 30px; scrollbar-width:none; scroll-snap-type:x mandatory; }
.archive-case-track::-webkit-scrollbar { display:none; }
.archive-case-card { flex:0 0 258px; scroll-snap-align:start; scroll-snap-stop:always; }
.archive-case-card[hidden] { display:none; }
.archive-screen { height:470px; overflow:hidden; border:8px solid #f5f1eb; border-radius:28px; background:white; }
.archive-screen img { display:block; width:100%; height:auto; transition:transform 1.2s var(--ease-out); }
.archive-case-card:hover .archive-screen:not(.archive-screen-static) img { transform:translateY(calc(-100% + 454px)); transition-duration:12s; transition-timing-function:linear; }
.archive-screen-static img { height:100%; object-fit:cover; object-position:top; }
.archive-case-card>div:last-child { display:flex; justify-content:space-between; gap:14px; align-items:baseline; padding:16px 4px 0; }
.archive-case-card span { color:var(--signal); font-family:var(--font-mono); font-size:var(--text-caption); font-weight:700; }
.archive-case-card h3 { margin:0; font-size:var(--text-lead); }
.archive-services { padding:64px 0 76px; background:#fbfaf8; }
.archive-service-intro { max-width:980px; margin-bottom:36px; }
.archive-service-intro h2 { margin:0 0 20px; font-size:clamp(42px,4vw,56px); line-height:1.12; letter-spacing:-.01em; }
.archive-service-intro p { max-width:46em; margin:0; color:var(--ink-soft); font-size:var(--text-lead); line-height:1.85; }
.archive-service-intro a { color:var(--accent-text); font-weight:600; white-space:nowrap; }
.archive-service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.archive-service-card { display:flex; min-height:340px; flex-direction:column; overflow:hidden; padding:26px 24px 0; border:1px solid var(--line); border-radius:12px; background:var(--surface); transition:transform .3s var(--ease-out),box-shadow .3s; }
.archive-service-card:hover { transform:translateY(-5px); box-shadow:8px 8px 0 var(--ink); }
.archive-service-icon { display:grid; width:52px; height:52px; place-items:center; border-radius:10px; background:#f5ebe4; }
.archive-service-icon img { width:28px; height:28px; object-fit:contain; color:var(--accent); }
.archive-service-card h3 { margin:25px 0 10px; font-size:var(--text-subheading); line-height:1.35; }
.archive-service-card p { margin:0; color:var(--muted); font-size:var(--text-body); line-height:1.75; }
.archive-service-image { width:calc(100% + 24px); height:150px; margin:auto -12px 0; object-fit:contain; object-position:center bottom; }
@media(max-width:1000px){
.archive-hero-grid { grid-template-columns:1fr; }
.archive-hero-copy h1 { max-width:10em; }
.archive-hero-stage { width:min(680px,100%); margin-left:auto; }
.archive-logo-row { grid-template-columns:repeat(4,1fr); }
.home-problem-layout { grid-template-columns:1fr; }
.home-problem-grid { grid-template-columns:1fr; }
.home-problem-grid article { min-height:0; }
.archive-service-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:720px){
.archive-hero { padding:112px 0 62px; }
.archive-hero-grid { gap:48px; min-height:0; }
.archive-hero-copy h1 { font-size:clamp(44px,12vw,52px); }
.archive-hero-copy>p { font-size:var(--text-body); }
.archive-button { width:100%; }
.archive-principles { gap:12px 20px; }
.archive-hero-stage { min-height:0; padding:62px 14px 24px; }
.archive-logo-row { grid-template-columns:repeat(2,1fr); gap:22px 34px; }
.archive-logo-row img { max-height:32px; }
.home-problem-head h2 { font-size:clamp(42px,12vw,52px); }
.home-problem-head>p { font-size:var(--text-body); }
.home-problem-grid { gap:12px; margin-top:24px; }
.home-problem-grid article { padding:26px 24px; }
.home-problem-grid article>span { font-size:20px; }
.home-problem-grid h3 { margin-top:22px; font-size:var(--text-subheading); }
.archive-section-head { grid-template-columns:1fr; gap:22px; margin-bottom:36px; }
.archive-section-head h2 { font-size:clamp(38px,10vw,46px); }
.archive-case-toolbar { display:block; }
.archive-case-controls { display:none; }
.archive-case-tabs { padding-bottom:0; }
.archive-swipe-hint { display:block; margin:0 0 18px; }
.archive-case-track { gap:16px; padding-left:20px; padding-right:20px; }
.archive-case-card { flex-basis:230px; }
.archive-screen { height:420px; }
.archive-case-card:hover .archive-screen:not(.archive-screen-static) img { transform:none; }
.archive-service-intro { margin-bottom:28px; }
.archive-services { padding:58px 0 68px; }
.archive-service-intro h2 { font-size:clamp(38px,10vw,46px); }
.archive-service-intro p { font-size:var(--text-body); }
.archive-service-hint { margin:18px 0 0; color:var(--accent); }
.archive-service-grid { display:flex; gap:14px; overflow-x:auto; padding:0 0 20px; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scrollbar-color:var(--accent) var(--line-soft); scrollbar-width:thin; }
.archive-service-grid:focus-visible { outline:3px solid var(--signal); outline-offset:6px; }
.archive-service-card { flex:0 0 calc(100% - 42px); min-height:390px; padding:24px 22px 0; scroll-snap-align:start; scroll-snap-stop:always; }
.archive-service-image { height:155px; }
}
@media(max-width:380px){
.stage-evidence figcaption { font-size:var(--text-caption); }
}
@media(prefers-reduced-motion:reduce){.archive-screen img,.archive-button,.archive-service-grid a,.archive-logo-row img,.stage-evidence{transition:none!important}.archive-case-card:hover .archive-screen img,.archive-logo-row img:hover,.archive-hero-stage:hover .stage-evidence{transform:none!important}}
/* Compact problem and decision-path pass. */
.home-problem-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.76fr); align-items:center; gap:clamp(34px,6vw,82px); }
.home-leak-figure { position:relative; min-height:312px; margin:0; overflow:hidden; border:1px solid rgb(255 255 255 / .2); background:#f2ede4; box-shadow:10px 10px 0 rgb(218 78 43 / .72); }
.home-leak-figure img { display:block; width:100%; height:100%; min-height:312px; object-fit:cover; object-position:center; }
.home-leak-figure figcaption { position:absolute; right:0; bottom:0; left:0; padding:12px 14px; background:rgb(23 21 19 / .88); color:#f4f1eb; font-size:var(--text-caption); font-weight:600; line-height:1.45; }
.home-path { padding:clamp(64px,7vw,94px) 0; background:#f4f1eb; }
.home-path-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.52fr); align-items:end; gap:36px; margin-bottom:32px; }
.home-path-head h2 { max-width:12em; margin:16px 0 0; font-size:var(--type-display); line-height:1.12; letter-spacing:-.01em; }
.home-path-head p { max-width:30em; margin:0; color:var(--ink-soft); font-size:var(--text-lead); line-height:1.75; }
.home-path-flow { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.home-path-flow article { min-height:218px; padding:24px; border-right:1px solid var(--ink); }
.home-path-flow article:last-child { border-right:0; }
.home-path-flow span { color:var(--accent); font-family:var(--font-mono); font-size:var(--text-small); font-weight:800; }
.home-path-flow h3 { margin:48px 0 10px; font-size:var(--text-subheading); line-height:1.35; }
.home-path-flow p { margin:0; color:var(--ink-soft); font-size:var(--text-small); line-height:1.7; }
.home-path-note { margin:20px 0 0; color:var(--accent-text); font-weight:650; }
/* Lighting pass: borrow the depth system from Feicai Club, keep this brand's restraint. */
.archive-home .nav {
background: rgb(244 241 235 / .88);
-webkit-backdrop-filter: blur(18px) saturate(1.08);
backdrop-filter: blur(18px) saturate(1.08);
}
.archive-hero {
position: relative;
isolation: isolate;
background:
radial-gradient(circle at 82% 22%, rgb(218 78 43 / .14), transparent 29rem),
radial-gradient(circle at 64% 82%, rgb(241 176 57 / .09), transparent 23rem),
#f4f1eb;
}
.archive-hero::before {
content: "";
position: absolute;
z-index: -1;
top: 102px;
right: clamp(-260px, -10vw, -80px);
width: clamp(620px, 58vw, 940px);
aspect-ratio: 1;
border: 1px solid rgb(218 78 43 / .13);
border-radius: 50%;
box-shadow: inset 0 0 90px rgb(218 78 43 / .035);
pointer-events: none;
}
.archive-hero::after {
content: "";
position: absolute;
z-index: -1;
top: 154px;
right: clamp(-120px, 2vw, 48px);
width: clamp(410px, 38vw, 620px);
aspect-ratio: 1;
border: 1px solid rgb(23 21 19 / .07);
border-radius: 50%;
pointer-events: none;
}
.archive-hero-grid { position: relative; z-index: 1; }
.archive-hero-stage {
overflow: hidden;
border-color: rgb(23 21 19 / .09);
background:
radial-gradient(circle at 78% 12%, rgb(255 255 255 / .82), transparent 17rem),
radial-gradient(circle at 22% 92%, rgb(218 78 43 / .16), transparent 22rem),
#e7e0d7;
box-shadow: 10px 10px 0 rgb(23 21 19 / .1), inset 0 1px rgb(255 255 255 / .72);
}
.archive-hero-stage::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(145deg, rgb(255 255 255 / .2), transparent 38%, rgb(23 21 19 / .045));
pointer-events: none;
}
.home-problem,
.archive-cases,
.home-final { position: relative; isolation: isolate; }
.home-problem::before,
.archive-cases::before,
.home-final::before {
content: "";
position: absolute;
z-index: -1;
border-radius: 50%;
filter: blur(84px);
pointer-events: none;
}
.home-problem::before { top: -180px; right: -120px; width: 560px; height: 560px; background: rgb(218 78 43 / .13); }
.archive-cases::before { top: 4%; left: -190px; width: 620px; height: 620px; background: rgb(241 176 57 / .08); }
.home-final::before { top: 50%; left: 55%; width: 440px; height: 440px; background: rgb(218 78 43 / .18); transform: translate(-50%, -50%); }
.home-problem > .container,
.archive-cases > .container,
.archive-case-track,
.home-final-inner { position: relative; z-index: 1; }
.home-problem-grid article {
box-shadow: inset 0 1px rgb(255 255 255 / .08);
transition: transform .32s var(--ease-out), border-color .25s ease, background .25s ease;
}
.home-problem-grid article:hover { transform: translateY(-5px); border-color: rgb(241 176 57 / .38); background: rgb(255 255 255 / .055); }
.archive-case-card .archive-screen { transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .35s ease; }
.archive-case-card:hover .archive-screen { transform: translateY(-6px); border-color: var(--signal); box-shadow: 7px 7px 0 rgb(241 176 57 / .88); }
.archive-case-track { width: 100%; max-width: 100vw; contain: layout paint; overscroll-behavior-inline: contain; }
.archive-services {
position: relative;
isolation: isolate;
overflow: hidden;
background:
radial-gradient(circle at 96% 8%, rgb(218 78 43 / .09), transparent 25rem),
radial-gradient(circle at 3% 92%, rgb(241 176 57 / .08), transparent 23rem),
#fbfaf8;
}
.archive-services::before {
content: "";
position: absolute;
z-index: -1;
right: -180px;
bottom: -320px;
width: 720px;
height: 720px;
border: 1px solid rgb(218 78 43 / .11);
border-radius: 50%;
pointer-events: none;
}
.archive-services > .container { position: relative; z-index: 1; }
.archive-service-card { position: relative; isolation: isolate; }
.archive-service-card::before {
content: "";
position: absolute;
z-index: -1;
top: -90px;
right: -90px;
width: 210px;
height: 210px;
border-radius: 50%;
background: rgb(218 78 43 / .07);
filter: blur(30px);
opacity: 0;
transition: opacity .3s ease;
}
.archive-service-card:hover::before { opacity: 1; }
.home-final-avatar {
overflow: hidden;
box-shadow: 12px 12px 0 var(--accent), 0 0 0 1px rgb(255 255 255 / .18);
transition: transform .45s var(--ease-out), box-shadow .45s ease;
}
.home-final-avatar:hover { transform: rotate(0) translateY(-5px); box-shadow: 16px 16px 0 var(--accent), 0 0 0 1px rgb(255 255 255 / .26); }
.home-final-avatar img { filter: saturate(.92) contrast(1.02); }
@media (max-width: 720px) {
.archive-hero::before { top: 520px; right: -260px; width: 620px; }
.archive-hero::after { display: none; }
.archive-hero-stage { box-shadow: 7px 7px 0 rgb(23 21 19 / .1), inset 0 1px rgb(255 255 255 / .72); }
.home-problem::before { right: -280px; width: 480px; height: 480px; }
.archive-cases::before { left: -320px; }
.home-final::before { left: 78%; width: 320px; height: 320px; }
.archive-case-card:hover .archive-screen { transform: none; box-shadow: none; border-color: #f5f1eb; }
.home-final-avatar:hover { transform: rotate(-1deg); box-shadow: 8px 8px 0 var(--accent); }
.home-problem-layout, .home-path-head { grid-template-columns:1fr; gap:24px; }
.home-leak-figure, .home-leak-figure img { min-height:250px; }
.home-path { padding:58px 0; }
.home-path-head { margin-bottom:24px; }
.home-path-head h2 { font-size:36px; }
.home-path-head p { font-size:var(--text-body); }
.home-path-flow { grid-template-columns:1fr; }
.home-path-flow article { min-height:0; padding:22px 0; border-right:0; border-bottom:1px solid var(--line); }
.home-path-flow article:last-child { border-bottom:0; }
.home-path-flow h3 { margin:20px 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
.stage-evidence,
.home-problem-grid article,
.archive-case-card .archive-screen,
.home-final-avatar { transition: none !important; }
.archive-hero-stage:hover .stage-evidence { transform: none; }
.home-problem-grid article:hover,
.archive-case-card:hover .archive-screen,
.home-final-avatar:hover { transform: none; }
}
@media (max-width: 1000px) {
.home-problem-layout { grid-template-columns:1fr; }
}