/* Black poster composition, white greeting and clear inflated glass lettering. */
:root{--bg:#090909;--surface:#151515;--line:#ffffff20;--text:#f5f5f5;--muted:#929292;--lime:#f4f4f4;--ink:#090909;scroll-padding-top:40px}
body{background:var(--bg)}
.site-header{top:25px;width:calc(100% - 80px);height:32px;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none}
.brand{height:auto;padding:0;background:none;color:#fff;font-size:23px;gap:7px;border-radius:0}
.brand-symbol,.brand-symbol svg{width:17px;height:17px}
.site-header nav{gap:27px}.site-header nav a{color:#a8a8a8;font-size:10px}.site-header nav a:hover,.site-header nav a.current{color:#fff}
.site-header sup{color:#fff}.nav-contact{padding:0;background:none;border:0;border-radius:0;font-size:10px;color:#d7d7d7;gap:12px}.nav-contact:hover{background:none;color:#fff}
.hero{height:100svh;min-height:790px;max-height:1080px;background:#090909;overflow:hidden;isolation:isolate}
.hero::before{display:none}
.hero::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.11;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.45' filter='url(%23n)'/%3E%3C/svg%3E")}
.scene-wrap{inset:0;z-index:2;width:100%;height:100%;min-height:0}
.scene-wrap canvas{opacity:0;transition:opacity .45s}.scene-wrap.ready canvas{opacity:1}
.scene-fallback,.no-webgl .scene-fallback{background:none;display:none}
.no-webgl canvas,.title-fallback canvas{display:none}
.poster-greeting{position:absolute;z-index:1;top:clamp(78px,8.5svh,110px);left:50%;transform:translateX(-50%);width:min(940px,80%);color:#fff;text-align:center;font-family:Arial,"Helvetica Neue",sans-serif;font-size:clamp(105px,11vw,172px);font-weight:900;line-height:.88;pointer-events:none}
.greeting-line{display:block;white-space:nowrap}.greeting-line+.greeting-line{margin-top:8px}
.poster-year{position:absolute;left:12%;top:-23px;font:600 15px Arial,sans-serif}
.hero-inner{position:absolute;top:clamp(245px,29svh,315px);left:50%;transform:translateX(-50%);width:min(930px,74vw);height:auto;margin:0;padding:0;z-index:3;pointer-events:none;display:block}
.hero-copy{width:100%;padding:0;transform:none}
#hero-title{font-size:clamp(155px,18vw,252px);line-height:1.08;min-height:0;font-weight:900;letter-spacing:0;text-shadow:none}
.hero-name,.hero-portfolio{display:flex;justify-content:center;align-items:center;gap:.02em;font-size:inherit;line-height:inherit;margin:0;width:100%;height:1.08em;background:none}
.title-letter{font-family:Arial,sans-serif;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.5px #ffffffa6;background:linear-gradient(135deg,#ffffffd6,transparent 32%,#ffffff15 55%,#ffffffae);background-clip:text;-webkit-background-clip:text;text-shadow:2px 2px 0 #ffffff10,0 0 20px #ffffff1a;opacity:0}
.glass-title-ready~.hero-inner .title-letter{opacity:0!important}
.no-webgl~.hero-inner .title-letter,.title-fallback~.hero-inner .title-letter{opacity:1!important;font-size:.7em}
.poster-side{position:absolute;z-index:5;top:47%;writing-mode:vertical-rl;color:#ccc;font:500 12px Arial,sans-serif;pointer-events:none}
.poster-side-left{left:29px}.poster-side-right{right:29px}
.poster-signature{position:absolute;bottom:53px;left:50%;transform:translateX(-50%);z-index:5;color:#c6c6c6;white-space:nowrap;font:600 11px Arial,sans-serif}
.poster-scroll{position:absolute;bottom:38px;left:40px;z-index:5;color:#aaa;display:flex;align-items:center;gap:16px;font-size:10px}.poster-scroll span{font-size:20px}
.scene-caption{bottom:33px;right:40px;left:auto;z-index:5;gap:10px}
.title-replay{border:1px solid #ffffff35;background:#ffffff05;color:#bcbcbc;padding:7px 12px;font-size:10px}.title-replay:hover{background:#ffffff10;color:#fff}
.scene-caption #motion-toggle{margin:0;width:29px;height:29px;border-color:#ffffff35;background:#ffffff05;color:#ddd}
#motion-toggle[hidden]{display:none}
.work-section{margin-top:0;padding:28px 0 80px;border-top:1px solid #ffffff16;background:#090909}
.project-rail{padding-block:38px 26px;min-height:282px;gap:22px}
.project-card{transition:transform .38s cubic-bezier(.22,.9,.3,1)}
.project-card:focus-visible{transform:translateY(calc(var(--card-lift,0px) - 10px)) rotate(calc(var(--card-tilt,0deg) - 2deg)) scale(1.045)}
@media(hover:hover) and (pointer:fine){
  .project-card:hover{transform:translateY(calc(var(--card-lift,0px) - 10px)) rotate(calc(var(--card-tilt,0deg) - 2deg)) scale(1.045);animation:card-pop .48s ease-out;position:relative;z-index:1}
}
@keyframes card-pop{
  0%{transform:translateY(var(--card-lift,0px)) rotate(var(--card-tilt,0deg)) scale(1)}
  60%{transform:translateY(calc(var(--card-lift,0px) - 14px)) rotate(calc(var(--card-tilt,0deg) - 3deg)) scale(1.065)}
  100%{transform:translateY(calc(var(--card-lift,0px) - 10px)) rotate(calc(var(--card-tilt,0deg) - 2deg)) scale(1.045)}
}
.project-card .project-cover{border-radius:5px;box-shadow:0 12px 28px #0009}
.work-index{padding-top:28px}.work-index .section-topline{margin-bottom:24px}.work-index h2{font-size:27px;font-weight:600}
.work-index h2>span{color:#777}.work-toolbar{margin-bottom:20px}.filter{color:#a5a5a5}.filter.active,.filter.active span{color:#090909;background:#f2f2f2;border-color:#f2f2f2}
.rail-footer{color:#858585}.draft-note{color:#747474;border-left-color:#555}

/* Six image-and-description rows, followed by three visual project tiles. */
.case-showcase{padding-block:96px 100px;border-top:1px solid #ffffff16;background:#090909}
.case-showcase-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:32px;align-items:end;margin-bottom:30px}
.case-kicker{display:inline-block;color:#f2555d;font:12px "Microsoft YaHei",Arial,sans-serif;margin-top:14px}
.case-showcase h2{font-family:Impact,"Arial Narrow",Arial,sans-serif;font-size:76px;font-weight:400;letter-spacing:0;line-height:1.05;color:#f1f1f1}
.case-showcase-head p{max-width:420px;color:#a5a5a5;font-size:12px;line-height:1.9}
.case-editorial{display:grid;gap:24px}
.case-editorial-row{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);min-height:340px;border:1px solid #ffffff16;background:#101010;overflow:hidden}
.case-visual{display:block;min-width:0;width:100%;padding:0;text-align:left;position:relative;cursor:pointer;overflow:hidden;background:#151515}
.case-visual:focus-visible{outline:2px solid #f2555d;outline-offset:-3px;z-index:1}
.case-art{height:100%;min-height:330px;aspect-ratio:auto;border-radius:0!important;transition:transform .65s cubic-bezier(.2,.75,.25,1),filter .35s}
.case-visual:hover .case-art,.case-visual:focus-visible .case-art{transform:scale(1.045);filter:brightness(1.12)}
.case-visual .demo-label,.case-visual .cover-open{display:none}
.case-editorial-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:36px;border-left:1px solid #ffffff16;background:#121416;position:relative;min-width:0}
.case-number{color:#006dfa;font:700 48px Impact,"Arial Narrow",Arial,sans-serif;letter-spacing:0;line-height:1;margin-bottom:14px}
.case-number[data-project-number="02"]{color:#d3cac4}
.case-number[data-project-number="03"]{color:#b8d6f7}
.case-number[data-project-number="04"]{color:#ac91bf}
.case-number[data-project-number="05"]{color:#e2b74d}
.case-number[data-project-number="06"]{color:#471b21}
.case-label{color:#858585;font:9px Consolas,monospace;letter-spacing:1.4px}
.case-editorial-copy h3{font-size:27px;line-height:1.35;font-weight:600;margin-top:10px;color:#f1f1f1;overflow-wrap:anywhere}
.case-meta{color:#777;font:9px Consolas,"Microsoft YaHei",monospace;margin-top:14px}
.case-editorial-copy p{color:#b3b3b3;font-size:12px;line-height:1.9;margin-top:20px;max-width:320px}
.case-open{display:inline-flex;align-items:center;gap:12px;color:#ededed;background:none;border:0;border-bottom:1px solid #f2555d80;padding:8px 0;margin-top:20px;font-size:11px;transition:color .2s,border-color .2s}
.case-open span{display:inline-flex;transition:transform .25s}.case-open .ui-icon{width:16px;height:16px}
.case-open:hover{color:#f2555d;border-color:#f2555d}.case-open:hover span{transform:translate(3px,-3px)}
.case-bento-section{position:relative;isolation:isolate;margin-top:108px;padding-top:76px;border-top:1px solid #ffffff16}
.case-bento-section::before{content:"";position:absolute;z-index:-1;inset:0 -36px -52px;pointer-events:none;background:radial-gradient(ellipse at 20% 32%,#0a392733,transparent 75%)}
.case-bento-heading{margin-bottom:28px}
.case-bento-heading h3{display:flex;align-items:center;gap:16px;font-size:32px;font-weight:500;letter-spacing:0;color:#f0f0f0}.case-bento-heading h3 .ui-icon{color:#d0f76b;width:22px;height:22px}.case-bento-heading p{font-size:13px;color:#9da8a2;margin-top:9px}
.case-bento{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:230px 230px;gap:22px}
.case-bento-card{position:relative;min-width:0;padding:0;border-radius:8px;text-align:left;overflow:hidden;cursor:pointer;background:#151515}
.case-bento-card:focus-visible{outline:2px solid #d0f76b;outline-offset:3px}
.case-bento-art{height:100%;min-height:0;aspect-ratio:auto;border-radius:0!important;transition:transform .65s cubic-bezier(.2,.75,.25,1),filter .35s}
.case-bento-card:hover .case-bento-art,.case-bento-card:focus-visible .case-bento-art{transform:scale(1.06);filter:brightness(1.08)}
.case-bento-card .demo-label,.case-bento-card .cover-open{display:none}
.bento-1{grid-column:1;grid-row:1}.bento-2{grid-column:1;grid-row:2}.bento-3{grid-column:2;grid-row:1 / span 2}
.bento-overlay{position:absolute;inset:auto 0 0;padding:56px 24px 24px;display:flex;flex-direction:column;gap:9px;color:#fff;background:linear-gradient(transparent,#080808d9);pointer-events:none}
.bento-overlay>span:first-child{font:10px Consolas,monospace;letter-spacing:0;color:#e1eddf}.bento-overlay strong{font-size:23px;font-weight:500;overflow-wrap:anywhere}.bento-open{position:absolute;right:20px;bottom:24px;color:#d0f76b;opacity:0;transform:translate(-3px,3px);transition:opacity .25s,transform .25s}.case-bento-card:hover .bento-open,.case-bento-card:focus-visible .bento-open{opacity:1;transform:none}
@media(max-width:1100px){.case-showcase h2{font-size:62px}.case-editorial-copy{padding:28px}.case-editorial-copy h3{font-size:24px}}
@media(max-width:800px){.case-showcase{padding-block:76px 88px}.case-showcase-head{grid-template-columns:1fr;gap:22px;margin-bottom:30px}.case-showcase-head p{max-width:520px}.case-editorial-row{grid-template-columns:1fr;min-height:0}.case-art{min-height:260px}.case-editorial-copy{min-height:260px;border-left:0;border-top:1px solid #ffffff16;padding:30px}.case-bento-section{margin-top:78px;padding-top:54px}.case-bento{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:200px 200px;gap:14px}}
@media(max-width:600px){.case-showcase{padding-block:60px 70px}.case-showcase h2{font-size:42px}.case-showcase-head p{font-size:12px;line-height:1.85}.case-art{min-height:210px}.case-editorial-copy{min-height:0;padding:24px}.case-editorial-copy h3{font-size:24px}.case-number{font-size:40px}.case-editorial-copy p{margin-top:16px}.case-open{margin-top:16px}.case-bento-section{margin-top:62px;padding-top:42px}.case-bento-section::before{inset:0 -20px -30px}.case-bento-heading h3{font-size:25px;gap:10px}.case-bento{grid-template-columns:1fr;grid-template-rows:repeat(2,210px) 340px;gap:14px}.bento-1{grid-column:1;grid-row:1}.bento-2{grid-column:1;grid-row:2}.bento-3{grid-column:1;grid-row:3}.bento-overlay{padding:38px 20px 20px}.bento-overlay strong{font-size:20px}.bento-overlay>span:first-child{font-size:9px}.bento-open{right:16px;bottom:20px}}
@media(max-width:360px){.case-showcase h2{font-size:36px}.bento-overlay strong{font-size:15px}}
.about-section,.strengths-section{padding-block:85px;border-top:1px solid #ffffff16}
.about-section h2,.strengths-section h2{font-size:44px;font-weight:700;line-height:1.2}
.about-art{background:#111;border:1px solid #ffffff20}.art-sphere{filter:grayscale(1)}.about-art .art-label,.art-corner{color:#f3f3f3}
.strength-card{background:#151515;border:1px solid #ffffff20}.strength-card.featured{background:#eeeeee;color:#111}.featured .card-top{color:#555}.featured .floating-tags>span{background:#111;color:#eee;border-color:#333}
.contact-section{padding-block:90px;border-top:1px solid #ffffff16}
.contact-card {
  isolation: isolate;
  border: 1px solid #ffffff66;
  border-radius: 22px;
  background:
    linear-gradient(145deg, #ffffff16, #ffffff02 24%, #08080824 62%, #ffffff06),
    #08080880;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 2px #ffffff40,
    inset 1px 0 5px #ffffff10,
    inset -1px -1px 3px #ffffff20,
    0 0 20px #ffffff0e,
    0 18px 42px #00000038;
}
.contact-card::before,
.contact-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.contact-card::before {
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, #ffffff0d, transparent 22%, transparent 79%, #ffffff08);
  box-shadow: inset 0 -1px 2px #ffffff33, inset -1px 0 2px #ffffff33;
}
.contact-card::after {
  width: 125%;
  height: 38%;
  right: -48%;
  bottom: -7%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 14% 8% at 49% 44%, #ffffffc9, #ffffff6b 38%, transparent 100%),
    linear-gradient(180deg, transparent 14%, #ffffff06 28%, #ffffff26 38%, #ffffff50 44%, #ffffff1c 50%, transparent 62%);
  filter: blur(6px);
  transform: rotate(-38deg);
}
.contact-card > .eyebrow { color: #eee; }
.contact-card .contact-detail { border-color: #ffffff38; }
.contact-card .contact-detail:last-of-type { border-bottom: 1px solid #ffffff38; }
.contact-card .contact-detail > strong { color: #eaeaea; }
.contact-detail > strong { min-width: 0; }
.contact-copy {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 12px;
  margin-block: -8px;
  max-width: 100%;
  background: transparent;
  border-radius: 4px;
  font: inherit;
  color: inherit;
  text-align: right;
  transition: color .2s;
}
.contact-copy > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.contact-copy [data-icon="copy"] { display: flex; flex-shrink: 0; opacity: .5; }
.contact-copy .ui-icon { width: 13px; height: 13px; }
.contact-copy:hover,
.contact-copy:focus-visible { color: #fff; }
.contact-copy:hover [data-icon="copy"],
.contact-copy:focus-visible [data-icon="copy"] { opacity: 1; }
.contact-copy-notice {
  position: fixed;
  z-index: 100;
  bottom: 24px;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 40px);
  padding: 12px 18px;
  border: 1px solid #ffffff38;
  border-radius: 8px;
  background: #181818e6;
  backdrop-filter: blur(12px);
  color: #f5f5f5;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.contact-copy-notice.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .contact-copy-notice { transition: none; }
}
.contact-main h2{font-weight:800}.status-dot{background:#fff;box-shadow:0 0 12px #ffffff40}
.strengths-section,.contact-main,.contact-card{filter:grayscale(1)}.muted-heading{color:#777}.strength-card p{color:#aaa}.strength-card.featured p{color:#555}
.site-footer{color:#777;border-top:1px solid #ffffff16}
@media(min-width:1700px){.hero-inner{width:1000px}#hero-title{font-size:270px}.poster-greeting{font-size:180px}.work-section{margin-top:0}.project-rail{min-height:348px}}
@media(max-width:1100px){.site-header{width:calc(100% - 56px)}.hero{min-height:740px}.poster-greeting{font-size:12vw;width:86%}.hero-inner{width:80vw;top:clamp(215px,28svh,280px)}#hero-title{font-size:19vw}.poster-side-left{left:17px}.poster-side-right{right:17px}.poster-scroll{left:28px}.scene-caption{right:28px}.work-section{margin-top:0}.project-rail{min-height:268px}}
@media(max-width:800px){.hero{height:100svh;min-height:730px;max-height:1000px}.poster-greeting{top:98px;font-size:13vw}.hero-inner{top:clamp(230px,31svh,290px);width:83vw}#hero-title{font-size:20vw}.poster-year{font-size:12px;top:-21px}.poster-side{font-size:10px}.poster-signature{bottom:67px;font-size:9px}.work-section{margin-top:0}.work-index{width:calc(100% - 56px)}.about-section h2,.strengths-section h2{font-size:35px}}
@media(max-width:600px){.site-header{top:23px;width:calc(100% - 40px);height:28px}.brand{font-size:21px}.site-header nav{gap:0}.site-header nav a{font-size:9px}.nav-contact{font-size:9px;gap:6px}.hero{height:100svh;min-height:620px;max-height:840px}.poster-greeting{top:108px;width:88%;font-size:15vw;line-height:.91}.poster-year{font-size:11px;left:5%;top:-22px}.greeting-line+.greeting-line{margin-top:5px}.hero-inner{top:clamp(225px,31svh,290px);width:86vw}#hero-title{font-size:23vw;line-height:1.14}.hero-name,.hero-portfolio{height:1.14em}.poster-side{top:47%;font-size:8px}.poster-side-left{left:10px}.poster-side-right{right:10px}.poster-signature{bottom:94px;font-size:8px}.poster-scroll{left:20px;bottom:34px;gap:9px;font-size:9px}.scene-caption{display:flex;bottom:30px;right:20px;gap:7px}.scene-caption #motion-toggle{width:28px;height:28px}.title-replay{font-size:9px;padding:6px 9px}.work-section{margin-top:0;padding:12px 0 50px}.project-rail{padding-block:25px 23px;gap:17px;min-height:230px}.work-index{width:calc(100% - 40px);padding-top:16px}.work-index h2{font-size:22px}.work-index h2>span{font-size:7px}.about-section,.strengths-section{padding-block:55px}.about-section h2,.strengths-section h2{font-size:29px}.contact-section{padding-block:60px}}
@media(max-width:360px){.hero{min-height:600px}.poster-greeting{top:112px}.hero-inner{top:235px}#hero-title{font-size:23vw}.poster-signature{bottom:88px;font-size:7px}}
@media(max-height:650px) and (min-width:601px){.hero{height:790px;min-height:790px}.poster-greeting{top:75px}.hero-inner{top:230px}}
@media(max-width:600px){.hero{height:84svh;min-height:660px;max-height:780px}.hero-inner{top:190px}#hero-title{font-size:36vw;line-height:1.12}.hero-name,.hero-portfolio{height:1.12em}.poster-signature{bottom:69px}}
@media(max-width:360px){.hero{min-height:620px}.hero-inner{top:185px}#hero-title{font-size:36vw}.poster-signature{bottom:72px}}

/* Give action labels room to breathe and use solid face arrows. */
.inline-up-right-arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -.12em;
  background: currentColor;
  -webkit-mask: url('/assets/arrow-up-right.svg') center / contain no-repeat;
  mask: url('/assets/arrow-up-right.svg') center / contain no-repeat;
}
.case-open {
  justify-content: center;
  gap: 14px;
  min-height: 38px;
  padding: 9px 15px;
  border: 1px solid #ffffff38;
  border-radius: 999px;
}
.case-open:hover { border-color: #ffffff80; }
.case-open .ui-icon,
.cover-open .ui-icon,
.bento-open .ui-icon { width: 17px; height: 17px; }
.poster-scroll {
  justify-content: center;
  gap: 14px;
  padding: 9px 14px;
  border: 1px solid #ffffff38;
  border-radius: 999px;
}
.poster-scroll .ui-icon { width: 16px; height: 18px; }
@media(max-width:600px){
  .case-open { min-height: 36px; padding: 8px 13px; }
  .poster-scroll { padding: 8px 12px; }
}

/* Clear, concise capability statements with room for the card illustrations. */
.strengths-section .section-heading { gap: 24px; }
.strengths-section h2 { font-size: clamp(36px, 4.5vw, 60px); }
.strengths-section .muted-heading { color: #aaa; }
.strengths-section .strengths-intro {
  display: block;
  flex-shrink: 0;
  font-size: 14px;
  color: #ddd;
}
.strengths-section .card-top { color: #bdbdbd; }
.strengths-section .card-top > span:first-child {
  padding: 5px 13px;
  border-color: #ffffff38;
  color: #f5f5f5;
  font-size: 10px;
}
.strengths-section .strength-card h3 {
  margin-top: 28px;
  font-size: clamp(26px, 2.7vw, 38px);
  font-weight: 700;
  line-height: 1.3;
}
.strengths-section .strength-card.small h3 { font-size: clamp(22px, 2vw, 28px); }
.strengths-section .strength-card p {
  max-width: 100%;
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.7;
  color: #bbb;
}
.strengths-section .featured .card-top { color: #555; }
.strengths-section .featured .card-top > span:first-child { color: #111; border-color: #00000026; }
.strengths-section .strength-card.featured p { color: #555; }
.strengths-section .floating-tags > span { min-height: 34px; }

@media(max-width:800px) {
  .strengths-section .section-heading { align-items: flex-end; }
  .strengths-section .strengths-intro { font-size: 12px; }
  .strengths-section .strength-card p { font-size: 14px; }
}
@media(max-width:600px) {
  .strengths-section .section-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
  .strengths-section h2 { font-size: 34px; }
  .strengths-section .strength-grid { grid-template-columns: 1fr; }
  .strengths-section .strength-card.large,
  .strengths-section .strength-card.small,
  .strengths-section .strength-card.small:last-child { grid-column: 1; height: 260px; padding: 24px; }
  .strengths-section .strength-card h3,
  .strengths-section .strength-card.featured h3 { font-size: 28px; margin-top: 26px; }
  .strengths-section .strength-card.small h3 { font-size: 25px; }
  .strengths-section .floating-tags { width: 180px; }
  .strengths-section .floating-tags > span { min-height: 28px; }
}

/* Center the skill labels and let the stacked pills spring forward on hover. */
.strengths-section .featured .floating-tags { right: 32px; transform: none; gap: 8px; }
.strengths-section .featured .floating-tags > span {
  --tag-x: 0px;
  --tag-tilt: -10deg;
  --tag-lift: 0px;
  --tag-scale: 1;
  --tag-delay: 0ms;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 18px;
  font: 600 14px/1.3 Arial, "Microsoft YaHei", sans-serif;
  text-align: center;
  color: #f5f5f5;
  background: linear-gradient(155deg, #242424, #090909 65%, #171717);
  border: 1px solid #ffffff24;
  box-shadow: inset 0 1px 0 #ffffff20, 0 7px 14px #0000001a;
  transform: translate(var(--tag-x), var(--tag-lift)) rotate(var(--tag-tilt)) scale(var(--tag-scale));
  transition: transform 650ms cubic-bezier(.2, 1.65, .35, 1), box-shadow 450ms ease;
  transition-delay: var(--tag-delay);
}
.strengths-section .featured .floating-tags > span:nth-child(2) {
  --tag-x: 10px;
  --tag-tilt: 1deg;
  --tag-delay: 70ms;
}
.strengths-section .featured .floating-tags > span:nth-child(3) {
  --tag-x: -10px;
  --tag-tilt: -8deg;
  --tag-delay: 140ms;
}
@media(hover: hover) and (pointer: fine) {
  .strengths-section .featured:hover .floating-tags > span {
    --tag-lift: -10px;
    --tag-scale: 1.08;
    box-shadow: inset 0 1px 0 #ffffff30, 0 16px 24px #00000030;
  }
  .strengths-section .featured .floating-tags > span:hover {
    --tag-lift: -16px;
    --tag-scale: 1.12;
    transition-delay: 0ms;
  }
}
@media(max-width:800px) {
  .strengths-section .strength-card.featured { height: 320px; }
  .strengths-section .featured .floating-tags > span { font-size: 12px; min-height: 38px; padding: 8px 14px; }
}
@media(max-width:600px) {
  .strengths-section .strength-card.featured { height: 300px; }
  .strengths-section .featured .floating-tags { bottom: 22px; }
  .strengths-section .featured .floating-tags > span { font-size: 13px; }
}
@media(prefers-reduced-motion: reduce) {
  .strengths-section .featured:hover .floating-tags > span,
  .strengths-section .featured .floating-tags > span:hover { --tag-lift: 0px; --tag-scale: 1; }
}

/* Keep the section frame broad while giving its artwork and copy a little breathing room. */
@media (min-width: 601px) {
  .work-section,
  .about-section,
  .case-showcase,
  .strengths-section,
  .contact-section,
  .site-footer {
    padding-inline: clamp(18px, 2.2vw, 28px);
  }
}

/* Let the transparent title carry a little more presence on the opening screen. */
#hero-title {
  font-size: clamp(172px, 20vw, 280px);
}
@media (max-width: 1100px) {
  #hero-title { font-size: 21vw; }
}
@media (max-width: 800px) {
  #hero-title { font-size: 22vw; }
}
@media (max-width: 600px) {
  #hero-title { font-size: 40vw; }
}

/* Real project previews replace the temporary art as soon as a source file is available. */
.project-cover-real {
  background: #e7e7e5;
  color: #fff;
}
.project-cover-real .project-real-primary,
.project-cover-real .project-real-secondary {
  position: absolute;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .65s cubic-bezier(.2,.75,.25,1), filter .35s;
}
.project-cover-real .project-real-primary {
  inset: 0;
  width: 100%;
  height: 100%;
}
.project-cover-real .project-real-secondary {
  right: 0;
  bottom: 0;
  width: 42%;
  height: 47%;
  border: 5px solid #111;
  box-shadow: -8px -8px 24px #0008;
}
.case-art.project-cover-real .project-real-primary { object-fit: contain; }
.case-visual:has(.project-cover-preview) { align-self: center; }
.case-art.project-cover-preview {
  height: auto;
  min-height: 0;
  aspect-ratio: var(--preview-ratio);
}
.case-visual[data-project="project-05"] .case-art.project-cover-preview {
  aspect-ratio: 16 / 9;
}
.case-visual[data-project="project-05"] .project-real-primary {
  object-fit: cover;
  object-position: center bottom;
}
.project-card:hover .project-cover-real .project-real-primary,
.case-visual:hover .project-cover-real .project-real-primary,
.case-bento-card:hover .project-cover-real .project-real-primary {
  transform: scale(1.045);
}
:is(.project-card, .case-visual):is([data-project="project-01"], [data-project="project-02"], [data-project="project-03"]) .project-real-primary {
  object-fit: cover;
  transform: scale(1.025);
}
:is(.project-card, .case-visual):is([data-project="project-01"], [data-project="project-02"], [data-project="project-03"]):is(:hover, :focus-visible) .project-real-primary {
  transform: scale(1.07);
}
:is(.project-card, .case-visual)[data-project="project-06"] .project-real-primary {
  object-fit: cover;
  transform: scale(1.08);
}
:is(.project-card, .case-visual)[data-project="project-06"]:is(:hover, :focus-visible) .project-real-primary {
  transform: scale(1.125);
}
@media (max-width: 600px) {
  .project-cover-real .project-real-secondary { width: 48%; height: 44%; border-width: 4px; }
}
@media (max-width: 360px) {
  #hero-title { font-size: 40vw; }
}

/* Career path: a clear two-step timeline with dates, roles and responsibilities. */
.about-copy > p {
  max-width: 620px;
  line-height: 1.85;
}
.about-copy .profile-bullets {
  display: grid;
  gap: 12px;
  max-width: 620px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  color: #929d86;
  font-size: 12px;
  line-height: 1.85;
}
.about-copy .profile-bullets li {
  position: relative;
  padding-left: 20px;
}
.about-copy .profile-bullets li::before {
  content: "•";
  position: absolute;
  left: 3px;
  top: 0;
  color: #d8d8d8;
  font-size: 16px;
  line-height: 1.35;
}
.about-copy .profile-details strong {
  color: #fff;
  font-weight: 400;
}
.experience-strip {
  grid-template-columns: minmax(190px, .72fr) minmax(0, 2fr);
  gap: clamp(42px, 6vw, 86px);
  padding-top: 62px;
  margin-top: 64px;
}
.experience-heading {
  padding-top: 3px;
}
.experience-heading .eyebrow {
  color: #a1a1a1;
  letter-spacing: 1.2px;
}
.experience-heading h3 {
  margin-top: 14px;
  color: #f2f2f2;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -.8px;
}
.experience-heading p {
  max-width: 230px;
  margin-top: 18px;
  color: #8c8c8c;
  font-size: 11px;
  line-height: 1.85;
}
.experience-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 58px);
  padding-top: 44px;
}
.experience-line {
  --experience-orb-radius: 11px;
  position: absolute;
  top: 9px;
  left: 9px;
  right: 9px;
  height: 1px;
  background: linear-gradient(90deg, #d8d8d888, #ffffff20 86%, transparent);
}
@property --experience-glass-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.experience-line::after,
.experience-traveler::after {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--experience-orb-radius);
  width: calc(var(--experience-orb-radius) * 2);
  height: calc(var(--experience-orb-radius) * 2);
  box-sizing: border-box;
  border: 1px solid #ffffff59;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 28% 20%, #fffffff2 0%, #ffffff80 5%, transparent 22%),
    conic-gradient(from var(--experience-glass-angle), #ffffff08 0deg, #ffffff14 25deg, #ffffffed 36deg, #ffffff40 42deg, transparent 60deg, #ffffff08 146deg, #ffffff66 170deg, #fffffff2 182deg, #ffffff33 190deg, transparent 220deg, #ffffff0d 295deg, #ffffff73 325deg, #ffffffbf 333deg, #ffffff1a 344deg, #ffffff08 360deg),
    radial-gradient(circle, transparent 34%, #ffffff47 44%, #ffffff09 53%, #ffffff1a 62%, #ffffff73 69%, transparent 74%);
  -webkit-mask: radial-gradient(circle, transparent 31%, #000 40%, #000 65%, transparent 73%);
  mask: radial-gradient(circle, transparent 31%, #000 40%, #000 65%, transparent 73%);
  backdrop-filter: blur(1.5px);
  filter: drop-shadow(0 0 3px #ffffff59) drop-shadow(0 0 9px #ffffff33);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: experience-line-travel 16s linear infinite, experience-glass-reflection 7s linear infinite, experience-jelly-breathe 4.8s ease-in-out infinite;
}
.experience-strip:not(.is-visible) .experience-line::after {
  animation-play-state: paused;
}
@keyframes experience-line-travel {
  0% { left: var(--experience-orb-radius); opacity: 0; }
  5%, 95% { opacity: 1; }
  100% { left: calc(100% - var(--experience-orb-radius)); opacity: 0; }
}
@keyframes experience-line-travel-vertical {
  0% { top: var(--experience-orb-radius); opacity: 0; }
  5%, 95% { opacity: 1; }
  100% { top: calc(100% - var(--experience-orb-radius)); opacity: 0; }
}
@keyframes experience-glass-reflection {
  to { --experience-glass-angle: 360deg; }
}
@keyframes experience-jelly-breathe {
  0%, 100% { transform: translate(-50%, -50%) rotate(-6deg) scale(1, 1); }
  50% { transform: translate(-50%, -50%) rotate(7deg) scale(1.07, .94); }
}
@media (prefers-reduced-motion: reduce) {
  .experience-line::after { animation: none; opacity: .55; }
}
.experience-item {
  position: relative;
  min-width: 0;
  padding-left: 72px;
}
.experience-node {
  position: absolute;
  z-index: 1;
  top: -18px;
  left: 0;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff32;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #c9c9c9a8, #81818155 56%, #343434 100%);
  box-shadow: inset 0 1px 0 #ffffff45, 0 12px 28px #00000040;
}
.experience-node-icon {
  position: relative;
  display: block;
  width: 15px;
  height: 20px;
  border: 1px solid #f5f5f5cc;
  border-radius: 3px;
}
.experience-node-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #f5f5f5cc;
  transform: translateX(-50%);
}
.experience-node-briefcase {
  width: 20px;
  height: 14px;
  margin-top: 4px;
  border-radius: 2px;
}
.experience-node-briefcase::before {
  content: "";
  position: absolute;
  left: 5px;
  top: -5px;
  width: 8px;
  height: 5px;
  border: 1px solid #f5f5f5cc;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}
.experience-node-briefcase::after {
  left: 0;
  right: 0;
  bottom: 5px;
  width: auto;
  height: 1px;
  border-radius: 0;
  background: #f5f5f5cc;
  transform: none;
}
.experience-card {
  min-width: 0;
}
.experience-date {
  display: block;
  color: #9fa58e;
  font: 13px Consolas, "Courier New", monospace;
  letter-spacing: .3px;
}
.experience-role {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 11px;
}
.experience-role h4 {
  margin: 0;
  color: #f0f0f0;
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 600;
  letter-spacing: -.4px;
}
.experience-role > span {
  color: #777;
  font-size: 14px;
}
.experience-role strong {
  color: #dedede;
  font-size: 14px;
  font-weight: 500;
}
.experience-card p {
  margin-top: 14px;
  color: #9b9b9b;
  font-size: 11px;
  line-height: 1.85;
}
.experience-tag {
  display: inline-block;
  margin-top: 17px;
  padding-top: 8px;
  border-top: 1px solid #ffffff25;
  color: #777;
  font: 9px Consolas, "Courier New", monospace;
  letter-spacing: 1.1px;
}
@media (max-width: 800px) {
  .experience-strip {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-top: 46px;
    margin-top: 48px;
  }
  .experience-heading p { max-width: 420px; }
  .experience-timeline { gap: 30px; }
}
@media (max-width: 600px) {
  .about-copy > p { max-width: none; }
  .about-copy .profile-bullets {
    max-width: none;
    gap: 10px;
    font-size: 12px;
    line-height: 1.9;
  }
  .experience-strip { gap: 28px; padding-top: 38px; margin-top: 40px; }
  .experience-heading h3 { font-size: 27px; }
  .experience-timeline {
    display: block;
    padding: 0 0 0 68px;
  }
  .experience-line {
    top: 8px;
    bottom: 18px;
    left: 26px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(#d8d8d888, #ffffff18);
  }
  .experience-line::after {
    top: var(--experience-orb-radius);
    left: 50%;
    animation-name: experience-line-travel-vertical, experience-glass-reflection, experience-jelly-breathe;
  }
  .experience-item {
    padding: 0 0 42px;
  }
  .experience-item:last-child { padding-bottom: 0; }
  .experience-node { top: -17px; left: -68px; }
  .experience-role h4 { font-size: 20px; }
  .experience-card p { font-size: 11px; }
}