:root {
  --ink: #0d0e11;
  --paper: #ffffff;
  --seal: #c8281c;
  --seal-bright: #e2402f;
  --brass: #b08d4f;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  font-family: "PingFang SC", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .serif {
  font-family: "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  font-weight: 600;
  text-wrap: balance;
  letter-spacing: 0.01em;
}
a { color: inherit; }
img { max-width: 100%; }
.eyebrow {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--seal);
  font-weight: 600;
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .wrap { padding: 0 20px; } }

/* ---- band system: fixed brand identity, not OS-theme adaptive ---- */
.band-light { --bg:#ffffff; --fg:#0d0e11; --fg-soft:#61646b; --line:rgba(13,14,17,.13); --card:#ffffff; --accent:var(--seal); background:var(--bg); color:var(--fg); }
.band-dark  { --bg:#0d0e11; --fg:#f4f1e9; --fg-soft:#9a9ca2; --line:rgba(244,241,233,.16); --card:#17181c; --accent:var(--seal-bright); background:var(--bg); color:var(--fg); }
section { position: relative; }

/* ---- top nav (always dark, floats over everything) ---- */
.topbar {
  position: fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 32px;
  background: rgba(13,14,17,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(244,241,233,.12);
}
.brandmark { display:flex; align-items:center; gap:10px; color:#f4f1e9; text-decoration:none; }
.brandmark img { width: 26px; height: 26px; display:block; }
.brandmark .name { font-family:"Source Han Serif SC","Songti SC",serif; font-weight:600; font-size:17px; letter-spacing:.02em; }
.brandmark small { display:block; font-family:"Helvetica Neue",Arial,sans-serif; font-size:9px; letter-spacing:.16em; color:#9a9ca2; font-weight:500; }
.navlinks { display:flex; align-items:center; gap:28px; font-size:13.5px; }
.navlinks a { text-decoration:none; color:#b8bac0; padding-bottom:2px; border-bottom:1px solid transparent; transition:color .2s,border-color .2s; }
.navlinks a:hover, .navlinks a.active { color:#f4f1e9; border-color: var(--seal-bright); }
.nav-cta { font-size:13px; padding:8px 16px; border:1px solid #f4f1e9; color:#f4f1e9; border-radius:2px; text-decoration:none; white-space:nowrap; }
.nav-cta:hover { background:#f4f1e9; color:#0d0e11; }

/* ---- mobile nav toggle + panel ---- */
.nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; padding:0; background:none; border:none; cursor:pointer; }
.nav-toggle span { display:block; width:22px; height:1.5px; background:#f4f1e9; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  position:fixed; top:65px; left:0; right:0; z-index:49;
  background:rgba(13,14,17,.98); backdrop-filter:blur(10px);
  border-bottom:0 solid rgba(244,241,233,.12);
  padding: 0 24px;
  display:flex; flex-direction:column;
  max-height:0; overflow:hidden;
  transition: max-height .25s ease, padding .25s ease;
}
.mobile-nav.open { max-height:80vh; overflow-y:auto; padding:10px 24px 26px; border-bottom-width:1px; }
.mobile-nav a { text-decoration:none; color:#e7e5dd; padding:13px 0; border-bottom:1px solid rgba(244,241,233,.1); font-size:15px; }
.mobile-nav a.active { color:var(--seal-bright); }
.mobile-nav-group { display:flex; flex-direction:column; }
.mobile-nav-group a.sub { padding-left:16px; font-size:13.5px; color:#9a9ca2; border-bottom:1px solid rgba(244,241,233,.06); }

@media (max-width: 860px) {
  .navlinks { display:none; }
  .nav-cta { display:none; }
  .nav-toggle { display:flex; }
}
@media (min-width: 861px) {
  .mobile-nav { display:none; }
}

/* ---- nav dropdown (services / cases sub-menus) ---- */
.nav-item { position:relative; }
.nav-item::after { content:""; position:absolute; top:100%; left:0; right:0; height:14px; }
.dropdown {
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(4px);
  margin-top:14px; min-width:216px; padding:10px; border-radius:4px;
  background:rgba(17,18,22,.97); backdrop-filter:blur(10px);
  border:1px solid rgba(244,241,233,.14); box-shadow:0 24px 48px -20px rgba(0,0,0,.55);
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown {
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.dropdown a { display:block; padding:10px 12px; border-radius:3px; font-size:13px; color:#b8bac0; text-decoration:none; border-bottom:none !important; white-space:nowrap; transition:background .15s,color .15s; }
.dropdown a:hover { background:rgba(244,241,233,.08); color:#f4f1e9; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .reveal{opacity:1;transform:none;transition:none;} html{scroll-behavior:auto;} }

/* ---- hero: split layout, huge logo graphic on the right (homepage only) ---- */
.hero {
  min-height: 100svh;
  display:flex; align-items:center;
  padding: 120px 32px 60px;
  overflow: hidden;
}
.hero .wrap { display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items:center; width:100%; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }
.hero-copy { position:relative; z-index:2; }
.hero h1 { font-size: clamp(32px, 4.6vw, 54px); line-height:1.28; margin: 16px 0 20px; }
.hero h1 .accent { color: var(--seal-bright); }
.hero-sub { font-size: clamp(14.5px, 1.5vw, 17px); color:#b8bac0; max-width: 540px; margin: 0 0 30px; }
.founding-line { font-size:13px; color:#9a9ca2; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; font-variant-numeric: tabular-nums; }
.founding-line b { color:#f4f1e9; font-weight:600; }
.hero-ctas { display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:2px; text-decoration:none; font-size:14px; letter-spacing:.02em; border:1px solid #f4f1e9; color:#f4f1e9; transition:background .2s,color .2s,border-color .2s; }
.btn.primary { background: var(--seal); border-color: var(--seal); }
.btn.primary:hover { background: var(--seal-bright); border-color: var(--seal-bright); }
.btn.ghost:hover { background:#f4f1e9; color:#0d0e11; }
.hero-mark { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; }
.hero-mark img { width: min(52vw, 460px); filter: drop-shadow(0 30px 60px rgba(0,0,0,.5)); }

/* ---- page-header: compact banner for secondary pages ---- */
.page-header { padding: 168px 0 76px; overflow:hidden; position:relative; }
.page-header .eyebrow { margin-bottom: 14px; }
.page-header h1 { font-size: clamp(30px,4.2vw,46px); margin:0 0 16px; max-width:680px; }
.page-header .lede { font-size:15.5px; color:#b8bac0; max-width:560px; margin:0; }
.page-header .wm { position:absolute; top:50%; right:-60px; transform:translateY(-50%); width:min(40vw,360px); opacity:.06; pointer-events:none; }
.crumb { position:relative; z-index:1; font-size:12.5px; color:#9a9ca2; margin-bottom:22px; }
.crumb a { text-decoration:none; color:#9a9ca2; }
.crumb a:hover { color:#f4f1e9; }

/* ---- section shell ---- */
.section { padding: 104px 0; border-top: 1px solid var(--line); }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:52px; flex-wrap:wrap; }
.section-head h2 { font-size: clamp(26px,3vw,38px); margin: 8px 0 0; }
.section-head .lede { max-width: 380px; color: var(--fg-soft); font-size: 14.5px; }

/* ---- about ---- */
.about-grid { display:grid; grid-template-columns: 1.3fr 1fr; gap:64px; align-items:start; }
@media (max-width: 800px) { .about-grid { grid-template-columns:1fr; gap:36px; } }
.about-grid p { font-size:16.5px; color:var(--fg-soft); }
.about-grid p b { color:var(--fg); font-weight:600; }
.stat-list { display:flex; flex-direction:column; border-top:1px solid var(--line); }
.stat-row { display:flex; justify-content:space-between; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--line); }
.stat-row .num { font-family:"Source Han Serif SC",serif; font-size:26px; font-variant-numeric:tabular-nums; }
.stat-row .label { font-size:13px; color:var(--fg-soft); text-align:right; max-width:220px; }

/* ---- pillars ---- */
.pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width: 860px) { .pillars { grid-template-columns:1fr; } }
.pillar { background:var(--bg); padding:40px 34px; }
.pillar .idx { font-family:"Helvetica Neue",Arial,sans-serif; font-size:12px; color:var(--accent); letter-spacing:.1em; }
.pillar h3 { font-size:20px; margin:14px 0 16px; }
.pillar ul { margin:0; padding:0 0 0 18px; color:var(--fg-soft); font-size:14px; }
.pillar li { margin-bottom:8px; }
.pillar li::marker { color: var(--accent); }

/* ---- brand divider (big image moment) ---- */
.divider { padding: 90px 0; text-align:center; overflow:hidden; }
.divider img { width:min(48vw,340px); opacity:.94; }
.divider p { margin-top:28px; font-family:"Source Han Serif SC",serif; font-size:clamp(17px,2vw,22px); color:#d8d5c8; }

/* ---- services ---- */
.service-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
@media (max-width: 760px) { .service-grid { grid-template-columns:1fr; } }
.service-card { background:var(--bg); padding:38px 36px; }
.service-card .no { font-family:"Source Han Serif SC",serif; font-size:40px; line-height:1; color:var(--accent); opacity:.3; }
@supports (-webkit-text-stroke: 1px black) { .service-card .no { color:transparent; opacity:1; -webkit-text-stroke: 1px var(--accent); } }
.service-card h3 { font-size:19px; margin:8px 0 6px; }
.service-card .service-desc { font-size:13.5px; color:var(--fg-soft); margin:0 0 16px; }
.service-card ul { margin:0; padding:0; list-style:none; }
.service-card li { padding:9px 0; border-top:1px solid var(--line); font-size:14px; color:var(--fg-soft); display:flex; gap:10px; }
.service-card li:first-child { border-top:none; }
.service-card li::before { content:"—"; color:var(--brass); flex-shrink:0; }

/* ---- cases ---- */
.case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width: 900px) { .case-grid { grid-template-columns:1fr; } }
.case-card { border:1px solid var(--line); padding:30px 26px; background:var(--card); display:flex; flex-direction:column; gap:16px; box-shadow: 0 24px 60px -32px rgba(0,0,0,.4); }
.case-tag { font-size:12px; letter-spacing:.08em; color:var(--brass); }
.case-card h3 { font-size:17.5px; margin:0; line-height:1.5; }
.case-card .case-detail { font-size:13.5px; color:var(--fg-soft); margin:0; }
.case-metric { margin-top:auto; display:flex; align-items:baseline; gap:8px; padding-top:14px; border-top:1px solid var(--line); }
.case-metric .val { font-family:"Source Han Serif SC",serif; font-size:22px; color:var(--accent); font-variant-numeric:tabular-nums; }
.case-metric .lbl { font-size:12.5px; color:var(--fg-soft); }

/* ---- case cover art: abstract brand-pattern panels, not stock photography ---- */
.case-cover { position:relative; height:156px; margin:-30px -26px 20px; overflow:hidden; }
.case-cover .mark { position:absolute; filter:brightness(0) invert(1); }
.cover-tech { background:
    repeating-linear-gradient(90deg, rgba(244,241,233,.055) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg, rgba(244,241,233,.055) 0 1px, transparent 1px 26px),
    linear-gradient(155deg, #181a20, #0d0e11 72%); }
.cover-tech .mark { width:118px; right:-14px; bottom:-22px; opacity:.5; }
.cover-tea { background: radial-gradient(circle at 28% 32%, rgba(176,141,79,.5), transparent 62%), linear-gradient(150deg, #241d12, #17181c 78%); }
.cover-tea .mark { width:104px; right:-6px; top:-14px; opacity:.32; }
.cover-heritage { background: radial-gradient(circle at 72% 42%, rgba(200,40,28,.46), transparent 64%), linear-gradient(150deg, #22100d, #17181c 78%); }
.cover-heritage .mark { width:128px; left:-22px; bottom:-28px; opacity:.28; }
.cover-neutral, .case-cover:not(.cover-tech):not(.cover-tea):not(.cover-heritage) { background: radial-gradient(circle at 50% 40%, rgba(176,141,79,.34), transparent 64%), linear-gradient(150deg, #1c1d22, #0d0e11 78%); }
.cover-neutral .mark { width:112px; right:-12px; bottom:-18px; opacity:.34; }

.case-cover-lg { position:relative; height:280px; margin-top:-1px; overflow:hidden; }
.case-cover-lg .mark { position:absolute; filter:brightness(0) invert(1); }
.case-cover-lg.cover-tech .mark { width:340px; right:-40px; bottom:-60px; opacity:.5; }
.case-cover-lg.cover-tea .mark { width:300px; right:-20px; top:-40px; opacity:.3; }
.case-cover-lg.cover-heritage .mark { width:360px; left:-60px; bottom:-70px; opacity:.26; }
.case-cover-lg.cover-neutral .mark, .case-cover-lg:not(.cover-tech):not(.cover-tea):not(.cover-heritage) .mark { width:300px; right:-30px; bottom:-40px; opacity:.34; }
@media (max-width: 640px) { .case-cover-lg { height:180px; } }

/* ---- real uploaded photo, overrides the abstract pattern when present ---- */
.case-cover .photo, .case-cover-lg .photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:none; }

/* ---- process / approach steps (cases page) ---- */
.process-list { display:flex; flex-direction:column; border-top:1px solid var(--line); }
.process-row { display:grid; grid-template-columns: 90px 1fr; gap:24px; padding:26px 0; border-bottom:1px solid var(--line); }
.process-row .step { font-family:"Source Han Serif SC",serif; font-size:15px; color:var(--accent); }
.process-row h4 { margin:0 0 6px; font-size:16px; }
.process-row p { margin:0; font-size:13.5px; color:var(--fg-soft); max-width:560px; }

/* ---- manifesto: big watermark logo behind quote ---- */
.manifesto { padding:150px 0; text-align:center; position:relative; overflow:hidden; }
.manifesto .wm { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(60vw,620px); opacity:.07; pointer-events:none; }
.manifesto blockquote { position:relative; z-index:1; margin:0 auto; max-width:760px; font-family:"Source Han Serif SC","Songti SC",serif; font-size:clamp(24px,4vw,40px); line-height:1.55; }
.manifesto blockquote .accent { color:var(--accent); }
.manifesto cite { position:relative; z-index:1; display:block; margin-top:26px; font-style:normal; font-size:14px; color:var(--fg-soft); max-width:560px; margin-left:auto; margin-right:auto; }

/* ---- contact ---- */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; }
@media (max-width: 800px) { .contact-grid { grid-template-columns:1fr; gap:40px; } }
.contact-list { list-style:none; margin:0; padding:0; }
.contact-list li { display:flex; justify-content:space-between; padding:20px 0; border-bottom:1px solid var(--line); font-size:15px; }
.contact-list li .k { color:var(--fg-soft); font-size:12.5px; letter-spacing:.08em; }
.contact-list li .v { text-align:right; }

/* ---- cross-page CTA band ---- */
.cta-band { padding:96px 0; text-align:center; }
.cta-band h2 { font-size:clamp(24px,3.4vw,34px); margin:14px 0 30px; }
.cta-band .hero-ctas { justify-content:center; }

/* ---- more-link used on homepage teasers pointing to detail pages ---- */
.more-link { display:inline-flex; align-items:center; gap:6px; margin-top:22px; font-size:13.5px; color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; }
.more-link:hover { border-color:var(--accent); }

/* ---- footer: big cropped logo bottom-right ---- */
footer { position:relative; padding: 40px 0; overflow:hidden; }
footer .foot-logo { position:absolute; right:-40px; bottom:-60px; width:280px; opacity:.16; pointer-events:none; }
.footer-inner { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:12.5px; color:#9a9ca2; }
.foot-brand { display:flex; align-items:center; gap:8px; }
.foot-brand img { width:16px; height:16px; }

::selection { background: var(--seal); color:#fbf6ec; }