@charset "UTF-8";

/* One motion language: soft light, precise grids and a responsive creative field. */
body { isolation:isolate; }
.site-shell { position:relative; z-index:1; }
.site-atmosphere { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ambient-photo { position:absolute; inset:-5%; background:url('assets/emerald-flow-background.webp') 58% 50%/cover no-repeat; opacity:.075; mix-blend-mode:multiply; animation:background-current 14s ease-in-out infinite alternate; will-change:transform; }
.ambient-glow { position:absolute; inset:-30%; background:radial-gradient(ellipse at 85% 15%,#d6e96b38 0,transparent 34%),radial-gradient(ellipse at 5% 80%,#8cbdb735 0,transparent 37%); animation:ambient-drift 11s ease-in-out infinite alternate; }
.ambient-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:.3; mask-image:radial-gradient(ellipse at 28% 38%,#0003 0%,#0007 32%,#000 75%); }
.ambient-orb { position:absolute; width:65vmax; height:48vmax; border-radius:50%; filter:blur(48px); opacity:.1; will-change:transform; }
.orb-a { top:-18%; right:-30%; background:radial-gradient(ellipse,#b9df63 0%,#568f5660 35%,transparent 67%); animation:light-sweep-a 13s ease-in-out infinite alternate; }
.orb-b { bottom:-25%; left:-25%; background:radial-gradient(ellipse,#42b5a2 0%,#39876550 35%,transparent 67%); animation:light-sweep-b 10s ease-in-out infinite alternate; }
.ambient-grid { position:absolute; inset:0; background-image:radial-gradient(#4b655729 .8px,transparent .8px); background-size:26px 26px; mask-image:linear-gradient(150deg,#0009,transparent 40%,transparent 68%,#0006); }
.ambient-grain { position:absolute; inset:0; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23828a78' filter='url(%23n)' opacity='.75' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.reading-progress { position:fixed; z-index:50; top:0; left:0; width:100%; height:2px; background:#a8c73b; transform:scaleX(0); transform-origin:left; pointer-events:none; }
.site-header { background:#f4f2ecda; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.brand-name > span { display:inline-block; transform-origin:50% 53%; transition:transform .7s cubic-bezier(.2,.8,.2,1); color:#7e9c36; padding-left:2px; }
.brand:hover .brand-name > span { transform:rotate(110deg); }
.nav-link::before { content:""; height:1px; position:absolute; bottom:13px; left:0; right:0; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease); }
.nav-link:hover::before { transform:scaleX(1); transform-origin:left; }
.nav-link.is-active::after { background:#8ba93e; }
.header-note::before { box-shadow:0 0 0 4px #a8c73b12; animation:status-pulse 3s ease-in-out infinite; }
.button { position:relative; isolation:isolate; overflow:hidden; transform:translate(var(--magnet-x,0px),var(--magnet-y,0px)); transition:transform .4s var(--ease),background .25s,color .25s,box-shadow .3s; }
.button:hover { transform:translate(var(--magnet-x,0px),calc(var(--magnet-y,0px) - 2px)); box-shadow:0 8px 24px #243b2012; }
.button::before { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 10%,#ffffff60 48%,transparent 80%); transform:translateX(-140%) skewX(-20deg); transition:transform .7s var(--ease); z-index:-1; pointer-events:none; }
.button:hover::before { transform:translateX(140%) skewX(-20deg); }
.button > span[aria-hidden] { transition:transform .35s var(--ease); }
.button:hover > span[aria-hidden] { transform:translate(3px,-3px); }
.button:disabled::before { display:none; }
.motion-toggle { display:inline-flex; align-items:center; gap:7px; background:transparent; border:1px solid var(--line); color:var(--muted); font-size:10px; line-height:1.5; padding:7px 10px; white-space:nowrap; }
.motion-toggle:hover { color:var(--ink); border-color:currentColor; }
.motion-indicator { height:5px; width:5px; border-radius:50%; background:#82a43e; box-shadow:0 0 7px #a8c73b5c; }
.motion-paused .motion-indicator { background:#8a9189; box-shadow:none; }

/* The opening page becomes an immersive, ink-green stage. */
body[data-page="home"] { --paper:#101e19; --ink:#f3f2e9; --muted:#a4b4a9; --line:#e0eadb29; background:#101e19; color:var(--ink); }
body[data-page="home"] .ambient-glow { background:radial-gradient(ellipse at 84% 20%,#b3db3855 0,transparent 35%),radial-gradient(ellipse at 12% 93%,#297b6960 0,transparent 42%),radial-gradient(ellipse at 48% 7%,#488e7745 0,transparent 34%); }
body[data-page="home"] .ambient-photo { opacity:.88; mix-blend-mode:normal; }
body[data-page="home"] .site-atmosphere::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#07181088 0%,#07181038 38%,transparent 68%),linear-gradient(0deg,#08190f8c,transparent 35%); }
body[data-page="home"] .ambient-canvas { opacity:.38; }
body[data-page="home"] .ambient-orb { opacity:.18; }
body[data-page="home"] .ambient-glow { opacity:.35; }
body[data-page="home"] .ambient-grid { opacity:.7; background-image:radial-gradient(#a8b99c55 .7px,transparent .7px); mask-image:linear-gradient(150deg,#0008,transparent 38%,transparent 68%,#0007); }
body[data-page="home"] .ambient-grain { opacity:.035; }
body[data-page="home"] .site-header { background:#101e19c9; }
body[data-page="home"] .reading-progress { display:none; }
body[data-page="home"] .brand-name > span { color:var(--lime); }
body[data-page="home"] .nav-link { color:#a3b2a7; }
body[data-page="home"] .nav-link:hover,body[data-page="home"] .nav-link.is-active { color:#f4f2ec; }
body[data-page="home"] .header-note::before { background:var(--lime); }
.home-page { padding-top:24px; }
.hero { position:relative; grid-template-columns:1.04fr 1fr; gap:40px; min-height:660px; padding-block:45px 65px; }
.hero-copy { padding-block:10px; text-shadow:0 2px 24px #0b1a1860; }
.hero-copy .eyebrow { font-size:9px; letter-spacing:1.9px; color:#b1c0ac; }
.hero-copy .eyebrow::before { content:""; display:inline-block; height:5px; width:5px; background:var(--lime); margin-right:10px; box-shadow:0 0 14px #d6e96b88; vertical-align:2px; }
.hero-title { font-size:clamp(68px,7.7vw,110px); font-weight:550; line-height:1.12; letter-spacing:-6px; }
.title-mask { display:block; overflow:hidden; padding-bottom:.05em; margin-bottom:-.05em; }
.reveal-line { display:block; }
.hero-title em { color:var(--lime); }
.hero-title em::after { display:none; }
.hero-intro { max-width:350px; color:#b1c0b6; font-size:14px; }
.home-page .button-primary { color:#192a1c; border-color:var(--lime); background:var(--lime); box-shadow:0 0 32px #d6e96b0a; }
.home-page .button-primary:hover { background:#e3f397; box-shadow:0 6px 35px #d6e96b1a; }
.home-page .button-outline { border-color:#a4b99c55; color:#ecf1e5; background:#dcebc908; }
.home-page .button-outline:hover { background:#dcebc915; }
.hero-note { margin-top:40px; color:#9bb294; letter-spacing:1.3px; }
.hero-note > span { color:var(--lime); }
.hero-art { aspect-ratio:1; max-height:560px; overflow:hidden; background:#12251f; border:1px solid #bbd4b42d; border-radius:50% 50% 2px 2px; box-shadow:inset 0 0 80px #07120c,0 20px 100px #0002; transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .65s var(--ease),border-color .4s; }
.home-page .hero-art { background:transparent; border-color:#d0e8b512; border-radius:0; box-shadow:none; }
.home-page .hero-art .art-aurora,.home-page .hero-art .art-grid { opacity:.12; }
.home-page .hero-art .orbit-canvas { opacity:.6; }
.hero-art::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at var(--pointer-x,60%) var(--pointer-y,40%),#d7ed8023,transparent 55%); z-index:1; pointer-events:none; }
.hero-art::after { width:52%; height:52%; left:24%; top:24%; background:radial-gradient(circle,#d6e96b18,transparent 70%); border-radius:50%; filter:blur(12px); animation:field-breathe 7s ease-in-out infinite; }
.art-aurora { position:absolute; inset:-40%; background:conic-gradient(from 20deg at 50% 50%,transparent 0deg,#b2d97950 60deg,transparent 110deg,#2b8f7480 180deg,transparent 220deg,#d6e96b50 300deg,transparent 360deg); filter:blur(36px); transform:translate(var(--parallax-x,0px),var(--parallax-y,0px)); animation:aurora-orbit 14s linear infinite; opacity:.95; }
.hero-art .art-grid { z-index:0; background-image:linear-gradient(#8fae7e18 1px,transparent 1px),linear-gradient(90deg,#8fae7e18 1px,transparent 1px); background-size:40px 40px; mask-image:radial-gradient(ellipse,#0009,transparent 70%); transform:perspective(600px) rotateX(18deg) scale(1.2); }
.orbit-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.art-monogram { width:100%; left:0; height:44%; top:26%; padding-right:12px; font-size:clamp(120px,16vw,234px); letter-spacing:-20px; font-weight:600; font-family:Arial,sans-serif; transform:translate(calc(var(--parallax-x,0px) * -.3),calc(var(--parallax-y,0px) * -.3)) skewY(-8deg); color:#f0f3da; text-shadow:0 3px 30px #071b1160; z-index:3; opacity:.95; transition:transform .6s var(--ease); }
.hero-art .art-ring { left:14%; top:16%; width:74%; height:74%; transform:rotate(-32deg) scaleX(.6); border-color:#cfdfaa66; z-index:4; pointer-events:none; animation:orbit-float 12s ease-in-out infinite; }
.hero-art .art-ring::before { width:13px; height:13px; background:var(--lime); border:0; box-shadow:0 0 22px #e1f7948c; }
.hero-art .art-ring::after { border-color:#c5df8b2e; }
.hero-art .art-small { top:auto; bottom:88px; left:24px; color:#c0d2ac; font-size:8px; letter-spacing:1.4px; z-index:5; }
.art-small i { display:inline-block; height:4px; width:4px; background:var(--lime); border-radius:50%; margin-right:7px; animation:status-pulse 3s ease-in-out infinite; }
.hero-art .art-cross { top:auto; right:25px; bottom:87px; color:#d5e0bd; background:linear-gradient(#d5e0bd,#d5e0bd) center/1px 15px no-repeat,linear-gradient(#d5e0bd,#d5e0bd) center/15px 1px no-repeat; font-size:0; z-index:5; animation:cross-turn 18s linear infinite; }
.hero-art .art-caption { left:24px; right:24px; bottom:21px; border-color:#a8c19535; color:#9db38d; font-size:8px; letter-spacing:.7px; align-items:flex-end; z-index:5; }
.field-hint { font-family:"Microsoft YaHei",sans-serif; font-size:9px; letter-spacing:0; }
.art-axis { position:absolute; font-family:monospace; font-size:8px; letter-spacing:1.3px; color:#7b9b77; z-index:5; }
.axis-top { top:21%; left:50%; transform:translateX(-50%); }
.axis-side { top:48%; right:16px; writing-mode:vertical-rl; }
.creative-ribbon { overflow:hidden; border-block:1px solid var(--line); padding:15px 0; color:#bbccac; margin-bottom:26px; mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.ribbon-track { display:flex; width:max-content; animation:ribbon-travel 30s linear infinite; }
.ribbon-track > span { flex:none; font-size:11px; letter-spacing:3px; white-space:nowrap; padding-right:40px; }
.ribbon-track i { display:inline-block; font-style:normal; color:var(--lime); font-size:16px; margin-inline:40px; vertical-align:-1px; }
.home-index { border-top:0; margin-bottom:37px; }
.home-page .home-index { padding-block:14px; background:linear-gradient(90deg,#081b13a6,#081b1370); border-block:1px solid #d3e3c317; }
.home-page .creative-ribbon { background:#081b1359; }
.index-item { padding-top:10px; }
.index-item span:first-child { color:#82967f; }
.index-item strong { color:#c4d1b8; }

/* Image movement stays inside its frame so the artwork remains readable. */
[data-tilt] { position:relative; transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .55s var(--ease),box-shadow .5s; }
.work-card:hover .work-art[data-tilt] { transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-4px); }
.work-art[data-tilt]::before,.experiment-cover[data-tilt]::before,.contact-card[data-tilt]::before { content:""; position:absolute; inset:0; background:radial-gradient(350px circle at var(--spot-x,50%) var(--spot-y,50%),#fff6,transparent 65%); opacity:0; transition:opacity .4s; pointer-events:none; z-index:6; mix-blend-mode:soft-light; }
.work-card:hover .work-art[data-tilt]::before,.experiment-card:hover .experiment-cover[data-tilt]::before,.contact-card[data-tilt]:hover::before { opacity:1; }
.work-art[data-tilt],.experiment-cover[data-tilt] { outline:1px solid #20332b0c; outline-offset:0; box-shadow:0 0 0 0 #a8c73b00; }
.work-card:hover .work-art[data-tilt],.experiment-card:hover .experiment-cover[data-tilt] { outline-color:#8eac4a80; box-shadow:0 14px 38px #2c443020,0 0 0 1px #a8c73b50; }
.work-orbit { transition:transform .9s var(--ease); }
.work-card:hover .work-orbit { transform:rotate(5deg) scaleX(.7); }
.experiment-card .play-mark { transition:transform .45s var(--ease),background .35s,border-color .35s; }
.experiment-card:hover .play-mark { transform:scale(1.12); background:#d6e96b; border-color:#d6e96b; color:#203020; }
.work-art[data-tilt]::after,.experiment-cover[data-tilt]::after { content:""; position:absolute; inset:0; width:auto; height:auto; padding:1px; background:conic-gradient(from var(--glow-angle,0deg),transparent 0%,#d6e96b 13%,transparent 29%,transparent 65%,#56a78a 85%,transparent); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; opacity:0; transition:opacity .4s; z-index:7; pointer-events:none; }
.work-card:hover .work-art[data-tilt]::after,.experiment-card:hover .experiment-cover[data-tilt]::after { opacity:1; }
.contact-card[data-tilt] { transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); }
.contact-card[data-tilt]::before { z-index:-1; mix-blend-mode:normal; background:radial-gradient(260px circle at var(--spot-x,50%) var(--spot-y,50%),#d6e96b30,transparent 75%); }
.page-heading::after { content:""; display:block; width:60px; height:2px; background:#a1be4e; position:absolute; bottom:-1px; left:0; transform-origin:left; animation:line-draw .9s .15s both; }
.image-card { overflow:hidden; }
.image-card img { transition:filter .35s,transform .6s var(--ease); }
.image-card:hover img { filter:brightness(.96); transform:scale(1.012); }
.image-caption { position:relative; background:var(--paper); padding-top:3px; }
.lightbox[open] { animation:dialog-enter .24s var(--ease) both; }
.lightbox[open]::backdrop { animation:backdrop-enter .24s ease both; }
.identity-tile { background:radial-gradient(ellipse at 75% 20%,#d6e96b80,transparent 70%),#e3e7d8; }
.identity-tile::after { animation:identity-orbit 16s ease-in-out infinite; }

/* Content remains visible until the optional motion controller is ready. */
.motion-ready:not(.motion-paused) .motion-reveal { opacity:0; transform:translateY(26px); transition:opacity .75s ease var(--reveal-delay,0ms),transform .85s var(--ease) var(--reveal-delay,0ms); }
.motion-ready:not(.motion-paused) .motion-reveal.is-revealed { opacity:1; transform:translateY(0); }
.motion-ready:not(.motion-paused) .contact-card.motion-reveal.is-revealed { transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); }
.motion-ready:not(.motion-paused) .hero-copy.motion-reveal { opacity:1; transform:none; }
.motion-ready:not(.motion-paused) .hero-copy .reveal-line { animation:title-rise 1.05s cubic-bezier(.16,1,.3,1) both; }
.motion-ready:not(.motion-paused) .hero-copy .title-mask:nth-child(2) .reveal-line { animation-delay:.12s; }
.motion-ready:not(.motion-paused) .hero-art { animation:art-enter 1.2s cubic-bezier(.16,1,.3,1) both; }
.motion-paused *,.motion-paused *::before,.motion-paused *::after { animation-play-state:paused !important; }
.motion-paused .motion-reveal,.motion-paused .reveal-line { opacity:1 !important; transform:none !important; }
.motion-paused .hero-art { animation:none !important; }
.motion-paused .hero-art,.motion-paused [data-tilt],.motion-paused .button { transform:none !important; }
.motion-paused .button:hover::before { transform:translateX(-140%); }
.motion-paused .lightbox[open],.motion-paused .lightbox[open]::backdrop,.motion-paused .page-heading::after { animation:none !important; }
.motion-paused .page-heading::after { transform:scaleX(1); }
.motion-suspended .ambient-glow,.motion-suspended .hero-art::after,.motion-suspended .art-aurora,.motion-suspended .art-ring,.motion-suspended .art-cross,.motion-suspended .art-small i,.motion-suspended .ribbon-track,.motion-suspended .header-note::before,.motion-suspended .identity-tile::after { animation-play-state:paused !important; }
.motion-suspended .ambient-orb { animation-play-state:paused !important; }
.motion-suspended .ambient-photo { animation-play-state:paused !important; }
@keyframes background-current { from { transform:translate3d(-2%,-1%,0) scale(1.02) rotate(-1deg); } to { transform:translate3d(2.5%,1.5%,0) scale(1.1) rotate(1deg); } }
@keyframes ambient-drift { from { transform:translate3d(-7%,-4%,0) rotate(-7deg) scale(1); } to { transform:translate3d(8%,6%,0) rotate(8deg) scale(1.15); } }
@keyframes light-sweep-a { from { transform:translate3d(7%,0,0) rotate(-12deg) scale(.9); } to { transform:translate3d(-58%,64%,0) rotate(18deg) scale(1.2); } }
@keyframes light-sweep-b { from { transform:translate3d(-5%,10%,0) rotate(15deg) scale(1.15); } to { transform:translate3d(60%,-56%,0) rotate(-16deg) scale(.9); } }
@keyframes field-breathe { 0%,100% { transform:scale(.9);opacity:.5; } 50% { transform:scale(1.3);opacity:1; } }
@keyframes aurora-orbit { from { rotate:0deg; } to { rotate:360deg; } }
@keyframes orbit-float { 0%,100% { transform:rotate(-32deg) scaleX(.6); } 50% { transform:rotate(-17deg) scaleX(.78); } }
@keyframes identity-orbit { 0%,100% { transform:rotate(38deg) scaleX(1); } 50% { transform:rotate(70deg) scaleX(.7); } }
@keyframes status-pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
@keyframes cross-turn { to { rotate:360deg; } }
@keyframes ribbon-travel { to { transform:translateX(-50%); } }
@keyframes title-rise { from { transform:translateY(110%); opacity:.3; } to { transform:translateY(0);opacity:1; } }
@keyframes art-enter { from { opacity:0;translate:0 25px; } to { opacity:1;translate:0 0; } }
@keyframes line-draw { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes dialog-enter { from { opacity:0;translate:0 8px; } to { opacity:1;translate:0 0; } }
@keyframes backdrop-enter { from { opacity:0; } to { opacity:1; } }

@media (min-width:1600px) { .hero { min-height:720px; } }
@media (max-width:1100px) and (min-width:761px) {
  .hero { min-height:570px; gap:24px; }
  .hero-title { font-size:76px; letter-spacing:-4px; }
  .hero-intro { font-size:12px; }
  .hero-art { min-height:350px; }
  .art-monogram { font-size:18vw; }
  .field-hint { display:none; }
}
@media (max-width:760px) {
  .ambient-orb { width:100vmax; height:65vmax; filter:blur(30px); }
  body[data-page="home"] .ambient-canvas { opacity:.3; }
  body[data-page="home"] .ambient-photo { background-position:66% 50%; opacity:.73; }
  body[data-page="home"] .site-atmosphere::after { background:linear-gradient(180deg,#071810a6 0%,#07181080 34%,#07181010 70%,#08190f7d 100%); }
  .ambient-grid { background-size:22px 22px; opacity:.65; }
  .site-header { background:#f4f2eceb; }
  body[data-page="home"] .site-header { background:#101e19e8; }
  body[data-page="home"] .site-nav { background:#101e19f5; }
  .home-page { padding-top:0; }
  .hero { grid-template-columns:1fr; gap:35px; padding:42px 0 25px; min-height:0; }
  .hero-copy .eyebrow { font-size:8px; letter-spacing:1px; }
  .hero-title { font-size:clamp(55px,13vw,84px); letter-spacing:-4px; line-height:1.15; }
  .hero-intro { max-width:350px; font-size:12px; margin-block:22px 25px; }
  .hero-note { margin-top:26px; font-size:8px; }
  .hero-art { width:100%; aspect-ratio:1.14; max-height:480px; border-radius:45% 45% 2px 2px; }
  .art-monogram { font-size:clamp(150px,41vw,245px); letter-spacing:-17px; top:23%; height:50%; }
  .hero-art .art-small { bottom:77px; font-size:7px; left:19px; }
  .hero-art .art-cross { bottom:75px; right:19px; }
  .hero-art .art-caption { left:19px; right:19px; bottom:17px; font-size:7px; }
  .axis-top { top:18%;font-size:7px; }
  .axis-side { font-size:7px;right:10px; }
  .field-hint { display:none; }
  .creative-ribbon { margin:0 0 20px; padding-block:13px; }
  .ribbon-track > span { font-size:9px; letter-spacing:2px; padding-right:25px; }
  .ribbon-track i { margin-inline:25px; font-size:13px; }
  .home-index { margin-bottom:27px; }
  .index-item { padding-top:4px; }
  .site-footer { flex-flow:row wrap; align-items:center; gap:12px 16px; }
  .site-footer > .footer-note:first-child { width:100%; }
  .site-footer > .footer-note:nth-child(2) { margin-right:auto; }
  .footer-links { width:100%; }
  .motion-toggle { font-size:9px; padding:6px 9px; }
  .nav-link::before { display:none; }
}
@media (hover:none),(pointer:coarse) {
  [data-tilt],.hero-art { transform:none !important; }
  .field-hint { display:none; }
  .button:hover { transform:none; }
}
@media (prefers-reduced-motion:reduce) {
  .motion-reveal,.reveal-line { opacity:1 !important;transform:none !important; }
  .hero-art { animation:none !important; }
  .art-aurora { rotate:20deg; }
}

/* Stronger identity: a floating navigation bar and a two-tone editorial title. */
.site-header { height:88px; top:14px; margin-top:14px; padding:0 24px; border:1px solid #31543c24; border-radius:18px; background:#f4f2eceb; box-shadow:0 10px 38px #12351d0c,inset 0 1px #fff9; gap:24px; overflow:visible; }
.brand-name { font-size:21px; font-weight:800; letter-spacing:-1px; }
.brand-name > span { margin-left:5px; font-size:25px; vertical-align:-1px; filter:drop-shadow(0 0 9px #c6e77355); }
.brand-role { font-size:9px; letter-spacing:2.5px; margin-top:5px; }
.site-nav { gap:5px; }
.site-nav .nav-link { padding:10px 16px; border-radius:30px; font-size:13px; font-weight:600; line-height:1.5; color:#56685b; border:1px solid transparent; transition:background .25s,color .25s,border-color .25s,box-shadow .25s; }
.site-nav .nav-link::before,.site-nav .nav-link::after { display:none; }
.site-nav .nav-link:hover { color:#1d3223; background:#adc96b20; }
.site-nav .nav-link.is-active { color:#19291b; background:var(--lime); box-shadow:0 4px 16px #b8d15b24; }
.site-nav .nav-link[data-nav="contact"] { border-color:#92a78155; margin-left:5px; }
.header-note { font-size:9px; padding-left:18px; letter-spacing:1.2px; }
body[data-page="home"] .site-header { background:#071a14cf; border-color:#d3efab38; box-shadow:0 12px 44px #0003,inset 0 1px #e4f9bf10; }
body[data-page="home"] .site-nav .nav-link { color:#c4d0bb; }
body[data-page="home"] .site-nav .nav-link:hover { background:#cee9a517; color:#f4f5e9; }
body[data-page="home"] .site-nav .nav-link.is-active { background:var(--lime); color:#152514; box-shadow:0 0 24px #d6e96b21; }
body[data-page="home"] .site-nav .nav-link[data-nav="contact"] { color:#edf5d9; border-color:#c0dc8e6b; }
body[data-page="home"] .site-nav .nav-link[data-nav="contact"].is-active { color:#152514; }
.hero-copy .eyebrow { color:#c3d7ae; font-size:10px; letter-spacing:1.8px; margin-bottom:26px; }
.hero-title { font-family:"Microsoft YaHei","PingFang SC",sans-serif; font-size:clamp(82px,8.8vw,126px); font-weight:800; line-height:1.07; letter-spacing:-7px; text-shadow:0 5px 32px #00170dc4; }
.hero-title .title-mask { padding-bottom:.09em; margin-bottom:-.04em; }
.hero-title .title-mask:nth-child(2) { color:#d9ef7c; }
.hero-title em { color:#f4f2e9; font-weight:600; }
.hero-copy .hero-intro { font-size:14px; color:#c3d0c1; margin-top:27px; }
.hero-copy .hero-actions .button { font-size:13px; min-height:53px; padding-inline:25px; }
@media (max-width:1100px) and (min-width:761px) {
  .site-header { padding-inline:18px; gap:16px; }
  .brand-name { font-size:18px; }
  .brand-role { font-size:8px; letter-spacing:1.8px; }
  .site-nav .nav-link { padding-inline:12px; font-size:12px; }
  .hero-title { font-size:clamp(75px,8.8vw,96px); letter-spacing:-5px; }
}
@media (max-width:760px) {
  html { scroll-padding-top:104px; }
  .site-header { height:76px; top:10px; margin-top:10px; padding-inline:15px; border-radius:13px; gap:12px; }
  .brand-name { font-size:18px; letter-spacing:-.7px; }
  .brand-name > span { font-size:22px; margin-left:3px; }
  .brand-role { font-size:8px; letter-spacing:1.5px; }
  .menu-toggle { border-color:#71846655; border-radius:9px; width:41px; height:41px; }
  body[data-page="home"] .menu-toggle { border-color:#d2e9a94d; background:#c4df8b0b; }
  .site-nav { top:calc(100% + 10px); left:0; right:0; border:1px solid #71846640; border-radius:13px; padding:12px; box-shadow:0 15px 35px #00170d33; gap:5px; }
  .site-nav .nav-link { padding:12px 16px; font-size:14px; border-radius:8px; }
  .site-nav .nav-link[data-nav="contact"] { margin-left:0; margin-top:5px; }
  body[data-page="home"] .site-nav { background:#0a2119f5; border-color:#c0d59938; }
  .hero { padding-top:46px; }
  .hero-copy .eyebrow { font-size:8px; letter-spacing:1px; margin-bottom:22px; }
  .hero-title { font-size:clamp(60px,17vw,90px); font-weight:800; line-height:1.08; letter-spacing:-4px; }
  .hero-copy .hero-intro { font-size:12px; margin-top:23px; }
  .hero-copy .hero-actions .button { font-size:11px; min-height:48px; padding-inline:19px; }
}
@media (max-width:359px) {
  .site-header { padding-inline:12px; }
  .brand-name { font-size:16px; }
  .brand-role { font-size:7px; letter-spacing:1.3px; }
  .hero-title { font-size:58px; letter-spacing:-4px; }
}