@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400&family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--paper:#FFFFFF;--ink:#0F2C59;--muted:#50627d;--line:#dfe5ed;--copper:#8a6a27;--mint:#F8F9FA;--white:#FFFFFF}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a,button{touch-action:manipulation}a:focus-visible,button:focus-visible{outline:3px solid var(--copper);outline-offset:5px}.skip{position:absolute;top:-100px;left:20px;z-index:20;background:white;padding:12px}.skip:focus{top:10px}header{max-width:1440px;margin:auto;display:flex;align-items:center;gap:35px;padding:25px 6%;border-bottom:1px solid var(--line)}.brand{font:800 40px/.9 'Manrope',sans-serif;letter-spacing:-5px;margin-right:auto}.brand span{color:var(--copper)}nav{display:flex;gap:26px;font-size:13px;font-weight:600}nav a:hover{color:var(--copper)}.languages{display:flex;align-items:center;gap:7px;font-size:12px}.languages button{border:0;background:none;color:var(--muted);padding:8px 4px}.languages button[aria-pressed=true]{color:var(--ink);font-weight:800}.wrap{max-width:1280px;margin:auto;padding:0 6%}.hero{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:8%;min-height:700px;padding-top:65px;padding-bottom:70px}.eyebrow{text-transform:uppercase;letter-spacing:2.2px;font-size:11px;font-weight:700;color:var(--copper);display:block;margin-bottom:25px}.location{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:1px}.dot{width:7px;height:7px;border-radius:50%;background:var(--copper)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Manrope',sans-serif}h1{font-weight:500;font-size:clamp(46px,5.3vw,76px);line-height:1.08;letter-spacing:-3.7px;margin:26px 0}h1 em{font-style:normal;color:var(--copper)}.lead{font-size:20px;line-height:1.5;max-width:530px}.sub{color:var(--muted);max-width:490px;font-size:15px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:13px 21px;border-radius:3px;background:var(--ink);color:white;font-size:13px;font-weight:600;border:1px solid var(--ink);transition:transform .2s,background .2s}.btn:hover{transform:translateY(-3px);background:#193e70}.btn.secondary{background:transparent;color:var(--ink)}.btn.secondary:hover{background:var(--mint)}.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;text-transform:uppercase;letter-spacing:1.8px;font-size:10px;font-weight:700}.strip span:not(:last-child):after{content:'+';margin-left:35px;color:var(--copper)}section.section{padding-top:100px;padding-bottom:100px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:35px;margin-bottom:44px}.section-heading .eyebrow{margin-bottom:12px}h2{font-size:clamp(30px,3.5vw,44px);font-weight:500;line-height:1.2;letter-spacing:-1.7px;margin-bottom:0}.section-heading>p{max-width:370px;color:var(--muted);font-size:14px;margin:0}.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:8%}.about-copy{font-size:18px}.about-copy p{margin-bottom:22px}.pillars{display:grid;gap:20px}.pillar{display:flex;gap:22px;padding:0 0 20px;border-bottom:1px solid var(--line)}.number{font-size:11px;color:var(--copper);padding-top:7px}.pillar h3{font-size:17px;margin-bottom:6px}.pillar p{font-size:14px;color:var(--muted);margin:0}.tint{background:var(--mint)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{background:var(--white);padding:32px;border:1px solid var(--line);border-radius:5px;display:flex;flex-direction:column}.card .eyebrow{margin-bottom:25px}.card h3{font-size:21px;line-height:1.35;letter-spacing:-.6px}.card p{font-size:14px;color:var(--muted)}.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:15px}.tag{border:1px solid var(--line);border-radius:20px;font-size:10px;padding:3px 10px;color:var(--muted)}.text-link{display:inline-block;font-size:13px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--copper);padding:3px 0;margin-top:17px;align-self:flex-start}.text-link:hover{color:var(--copper)}.timeline{border-top:1px solid var(--line)}.job{display:grid;grid-template-columns:180px 1fr;gap:35px;padding:34px 0;border-bottom:1px solid var(--line)}.job time{font-size:12px;color:var(--copper);font-weight:700;letter-spacing:1px}.job h3{font-size:22px;margin-bottom:2px;line-height:1.4}.company{font-size:13px;color:var(--muted);margin-bottom:15px}.job p{font-size:15px;color:var(--muted);max-width:750px;margin-bottom:0}.skills{display:grid;grid-template-columns:1.4fr 1fr;gap:70px}.skill-tags{display:flex;gap:10px;flex-wrap:wrap}.skill-tags span{padding:10px 16px;border:1px solid var(--line);font-size:13px;border-radius:3px;background:var(--white)}.language-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}.language-row strong{color:var(--copper);font-weight:500}.education{display:grid;grid-template-columns:1fr 1fr;gap:25px}.edu{border:1px solid var(--line);padding:30px;background:var(--white)}.edu h3{font-size:20px;margin:10px 0}.edu p{font-size:14px;color:var(--muted);margin-bottom:0}.small{font-size:12px;color:var(--muted)}.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}.doc{display:flex;align-items:center;gap:15px;border-bottom:1px solid var(--line);padding:18px 0}.doc-icon{width:40px;height:48px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--copper);font-size:10px;flex-shrink:0}.doc strong{font-size:14px;display:block}.doc small{font-size:11px;color:var(--muted)}.doc>span:last-child{margin-left:auto}.doc:hover strong{color:var(--copper)}.quote{max-width:850px;margin:auto;text-align:center}.quote blockquote{font:400 clamp(23px,2.9vw,34px)/1.6 'Manrope',sans-serif;letter-spacing:-.7px;margin:15px 0 25px}.quote figcaption{font-size:12px;color:var(--muted)}.quote-symbol{font:70px/.7 Georgia,serif;color:var(--copper)}.contact{background:var(--ink);color:var(--paper);padding:75px 0}.contact .wrap{display:flex;justify-content:space-between;gap:50px;align-items:center}.contact h2{font-size:clamp(32px,4vw,50px);margin-bottom:20px}.contact p{color:#e4eaf2;max-width:500px;font-size:15px}.contact a{display:block;font-size:16px;margin:12px 0;overflow-wrap:anywhere}.contact a:hover{color:#E5D3B3}.contact .eyebrow{color:#E5D3B3}footer{max-width:1280px;margin:auto;padding:25px 6%;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted)}main{animation:enter .5s ease}@keyframes enter{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:850px){header{flex-wrap:wrap;gap:20px;padding:20px 6%}nav{order:3;width:100%;overflow-x:auto;gap:22px;padding:8px 0}.hero{gap:7%;min-height:600px}.lead{font-size:17px}h1{letter-spacing:-2px}.strip span:not(:last-child):after{display:none}.grid{grid-template-columns:1fr}.card{padding:28px}.section-heading{align-items:start}.skills{gap:35px}.portrait-caption{font-size:9px;left:20px;bottom:20px}.job{grid-template-columns:145px 1fr;gap:20px}}@media(max-width:600px){.hero{grid-template-columns:1fr;padding-top:42px;gap:40px}.portrait{max-width:280px;width:80%;margin:0 auto 15px;aspect-ratio:5/4;border-radius:150px 150px 5px 5px}.monogram{font-size:100px;letter-spacing:-10px}.portrait-mark{top:30px;right:30px}.portrait-caption{font-size:8px}.hero h1{font-size:53px}.section-heading,.contact .wrap{display:block}.section-heading>p{margin-top:20px}.about-layout,.skills,.education,.doc-grid{grid-template-columns:1fr;gap:30px}.job{grid-template-columns:1fr;gap:10px}.section.section{padding-top:65px;padding-bottom:65px}.contact{padding:60px 0}.contact .details{margin-top:30px}.strip{gap:12px;font-size:9px}footer{flex-wrap:wrap}.eyebrow{letter-spacing:1.7px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}


.hero-art{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:center;isolation:isolate;padding:0 0 15px}
.hero-art:before{content:'';position:absolute;inset:12% -8% 10%;background:radial-gradient(ellipse at 60% 50%,#e5d3b326,transparent 68%);z-index:-1}
.wing{display:block;width:108%;max-width:460px;height:auto;color:#D4AF37;transform:rotate(-7deg)}
.wing-motto{text-align:center;color:var(--ink);font:italic 25px/1.5 Georgia,serif;margin:8px -10px 0}
h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-1.7px}h1 em{color:var(--ink)}h1{line-height:1.12}.lead{font-weight:400}.lead:first-line{font-weight:600}.brand{font-weight:500;letter-spacing:-3px}.card,.edu{border-radius:9px}.card h3{font-weight:500}.contact .eyebrow{color:#E5D3B3}
@media(max-width:850px){.wing-motto{font-size:21px}.hero{gap:5%}}
@media(max-width:600px){.hero-art{max-width:340px;width:100%;margin:0 auto;padding-bottom:10px}.wing{width:100%}.wing-motto{font-size:23px;margin-top:0}.hero h1{font-size:clamp(43px,12vw,58px)}.hero{gap:12px}.btn{padding:12px 17px}.hero-art:before{inset:0}.hero{padding-bottom:45px}}
.hero-art:before{mask-image:radial-gradient(ellipse at center,#000 30%,transparent 73%)}

.contact .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,auto);gap:48px}.contact .details{min-width:0}.contact .contact-link{display:flex;align-items:center;gap:12px}.contact-icon,.linkedin-icon{width:21px;height:21px;flex-shrink:0}.linkedin-icon{display:inline-flex;justify-content:center;align-items:center;border:1px solid currentColor;border-radius:2px;font:bold 16px/1 Arial,sans-serif}.contact .email-link{white-space:nowrap;overflow-wrap:normal}.email-link span{white-space:nowrap}.contact .details>a{font-size:15px}.contact h2{max-width:560px}@media(max-width:850px){.contact .wrap{grid-template-columns:1fr;gap:20px}.contact .details{margin-top:0}}@media(max-width:380px){.contact .email-link{font-size:13px;gap:8px}.contact-icon{width:18px;height:18px}}

/* White and dove-grey ombre, deep navy typography and champagne accents. */
.hero{position:relative;isolation:isolate}.hero:before{content:'';position:absolute;inset:0 -7%;z-index:-2;background:linear-gradient(115deg,var(--paper) 18%,#F8F9FA 48%,#edf1f6 78%,#e7edf5 100%);mask-image:linear-gradient(180deg,transparent,#000 15%,#000 78%,transparent)}
.hero-art:before{inset:3% -10% 6%;background:radial-gradient(ellipse,#e5d3b326 0%,#e5d3b31a 35%,transparent 68%)}
.wing{transform:rotate(-3deg);width:105%;max-width:450px}.wing-motto{font-size:20px;line-height:1.55;margin-top:-2px}.tint{background:linear-gradient(110deg,#FFFFFF,#F8F9FA)}.brand{letter-spacing:-3px}.contact{background:#0F2C59}
@media(max-width:600px){.wing-motto{font-size:19px}.hero:before{background:linear-gradient(150deg,var(--paper) 18%,#F8F9FA 48%,#edf1f6 100%)}}

/* Open, calligraphic wing inspired by the supplied reference. */
.hero-art{overflow:visible;min-height:470px;padding:0 0 26px;justify-content:center;gap:8px}
.wing{position:relative;width:92%;max-width:380px;height:auto;right:auto;top:auto;transform:none;overflow:visible;opacity:1}
.wing-motto{position:relative;margin:-5px 0 0;font-size:19px;line-height:1.55}
@media(max-width:850px){.hero-art{min-height:410px}.wing{width:100%;max-width:340px}.wing-motto{font-size:18px}}
@media(max-width:600px){.hero-art{min-height:0;max-width:340px;margin:0 auto;padding:5px 0 16px}.wing{width:88%;max-width:290px}.wing-motto{margin-top:0;font-size:18px}}

/* Matte gold motto: deeper shade preserves readability on the light background. */
.wing-motto{color:#8a6a27}.hero-art:before{background:radial-gradient(ellipse,#E5D3B326 0%,#E5D3B312 35%,transparent 68%)}

/* Approved gold wing artwork, blended into the airy hero background. */
.wing-image{object-fit:contain;mix-blend-mode:normal}.hero-art:before{background:none}

/* Quiet personal motto and reflective notes. */
.wing-motto{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:400;font-size:16px;line-height:1.65;letter-spacing:.01em;margin-top:10px}.job-reflection{margin-top:20px;padding-left:18px;border-left:1px solid var(--line)}.job-reflection>span{display:block;color:var(--ink);font-size:12px;font-weight:500;margin-bottom:5px}.job-reflection p{font-size:14px}@media(max-width:600px){.wing-motto{font-size:15px;line-height:1.6;margin-top:8px}}

/* Compact, single-line motto in both languages. */
.wing-motto{font-size:13px;white-space:nowrap;line-height:1.6;letter-spacing:0;margin:10px 0 0}@media(max-width:600px){.wing-motto{font-size:clamp(11px,2.8vw,12px);margin-top:8px}}

.reference-slide{min-height:290px;display:flex;flex-direction:column;align-items:center;justify-content:center}.reference-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:28px}.reference-arrow{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--border,var(--line));border-radius:50%;background:var(--white);color:var(--ink);font-size:23px;transition:background .2s,transform .2s}.reference-arrow:hover{background:var(--mint);transform:translateY(-2px)}.reference-count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}@media(max-width:600px){.reference-slide{min-height:350px}}

/* Discoverable, keyboard-accessible wing interaction. */
.wing-trigger{display:flex;flex-direction:column;align-items:center;width:92%;max-width:380px;padding:0;border:0;background:transparent;color:var(--ink);cursor:pointer;border-radius:12px;-webkit-tap-highlight-color:transparent}
.wing-trigger .wing{width:100%;max-width:none;transform-origin:20% 88%;transition:transform .45s ease}
.wing-hint{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;font:400 11px/1.5 'DM Sans',sans-serif;color:var(--muted);letter-spacing:.02em}
.wing-hint svg{width:15px;height:15px;flex-shrink:0}
.wing-trigger:focus-visible{outline:2px solid var(--copper);outline-offset:8px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.wing-trigger:hover .wing{transform:translateY(-3px) rotate(-1deg)}.wing-trigger:hover .wing-hint{color:var(--ink)}}
@media(max-width:850px){.wing-trigger{width:100%;max-width:340px}}
@media(max-width:600px){.wing-trigger{width:88%;max-width:290px}}
@media(prefers-reduced-motion:reduce){.wing-trigger .wing{transition:none}.wing-trigger:hover .wing{transform:none}}

/* Wingbeats pivot from the lower attachment point. */
.wing-trigger .wing{transform-origin:18% 91%;backface-visibility:hidden}

/* Two fine wings shelter the live, bilingual motto. */
.embrace-trigger{width:100%;max-width:440px;overflow:visible}.embrace-scene{position:relative;display:block;width:100%;aspect-ratio:1.28;isolation:isolate}.embrace-left,.embrace-right{position:absolute;top:0;width:50%;height:100%;transform-origin:85% 90%;pointer-events:none}.embrace-left{left:0}.embrace-right{right:0;transform-origin:15% 90%}.embrace-wing{display:block;width:100%;height:100%;opacity:.85}.embrace-right .embrace-wing{transform:scaleX(-1)}.embrace-motto{position:absolute;top:49%;left:50%;transform:translate(-50%,-50%);width:max-content;max-width:none;margin:0!important;font-size:clamp(10px,1.1vw,13px);color:var(--ink);pointer-events:none}.embrace-trigger .wing-hint{margin-top:0}.embrace-trigger:hover .wing-hint{color:var(--ink)}@media(max-width:850px){.embrace-motto{font-size:10px}}@media(max-width:600px){.embrace-trigger{max-width:360px}.embrace-motto{font-size:11px}}

/* Recognizable feathered wings frame the small motto. */
.embrace-scene{aspect-ratio:1.12}.embrace-left,.embrace-right{width:47%;height:100%;transform-origin:88% 92%}.embrace-right{transform-origin:12% 92%}.embrace-wing{object-fit:contain;opacity:.9}.embrace-motto{z-index:2;background:var(--paper);padding:5px 7px;border-radius:3px;font-size:clamp(10px,1.05vw,12px)}

.archangel-trigger{width:100%;max-width:440px;gap:14px}.archangel-preview{display:block;width:100%;height:auto}.archangel-trigger .wing-motto{margin:0}.archangel-trigger .wing-hint{margin:0}.wing-dialog{border:0;padding:0;width:100vw;max-width:none;height:100dvh;max-height:none;background:rgba(255,255,255,.98);color:var(--ink);overflow:hidden;margin:0}.wing-dialog::backdrop{background:#fff9}.wing-flight{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:55px 0}.archangel-full{width:100%;max-height:76dvh;object-fit:contain;transform-origin:50% 80%}.flight-motto{font:italic clamp(14px,2vw,24px)/1.6 'Playfair Display',Georgia,serif;color:var(--ink);text-align:center;padding:0 14px;margin:20px 0 0;z-index:2}.wing-close{position:absolute;right:22px;top:18px;z-index:5;border:1px solid var(--line);background:white;color:var(--ink);border-radius:50%;width:46px;height:46px;font-size:30px}.flight-feather{position:absolute;width:26px;height:58px;color:var(--copper);pointer-events:none;opacity:0}.feather-0{left:12%;top:20%}.feather-1{left:30%;top:55%}.feather-2{left:68%;top:23%;color:var(--ink)}.feather-3{left:85%;top:50%}.feather-4{left:50%;top:72%;color:var(--ink)}
@media(prefers-reduced-motion:no-preference){.wing-dialog[open] .archangel-full{animation:archangel-open 3.5s cubic-bezier(.22,.61,.36,1) both}.wing-dialog[open] .flight-feather{animation:feather-drift 5s ease-in-out 1s both}.wing-dialog[open] .feather-1{animation-delay:1.6s}.wing-dialog[open] .feather-2{animation-delay:1.3s}.wing-dialog[open] .feather-3{animation-delay:2s}.wing-dialog[open] .feather-4{animation-delay:2.4s}}
@keyframes archangel-open{0%{transform:perspective(1200px) scaleX(.25) scaleY(.65) translateY(35px);opacity:.25}65%{transform:perspective(1200px) scaleX(.97) scaleY(1) translateY(-6px);opacity:1}100%{transform:none;opacity:1}}@keyframes feather-drift{0%{opacity:0;transform:translate(0,-20px) rotate(-15deg)}25%{opacity:.6}70%{opacity:.45}100%{opacity:0;transform:translate(40px,110px) rotate(40deg)}}

/* Wings unfold behind the hero content, without a modal or navigation. */
.hero{overflow:clip}.wing-background{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;display:flex;align-items:center;justify-content:center}.archangel-background{position:absolute;width:100%;height:100%;object-fit:contain}.hero.wings-unfold .wing-background{opacity:.16}.hero.wings-unfold .flight-feather{opacity:0}.hero.wings-unfold .archangel-preview{opacity:.55}
@media(prefers-reduced-motion:no-preference){.hero.wings-unfold .wing-background{animation:background-wings 7.5s ease both}.hero.wings-unfold .archangel-background{animation:archangel-open 3.5s cubic-bezier(.22,.61,.36,1) both}.hero.wings-unfold .flight-feather{animation:feather-drift 5s ease-in-out 1s both}.hero.wings-unfold .feather-1{animation-delay:1.5s}.hero.wings-unfold .feather-2{animation-delay:1.8s}.hero.wings-unfold .feather-3{animation-delay:2s}.hero.wings-unfold .feather-4{animation-delay:2.4s}}
@keyframes background-wings{0%{opacity:0}25%,75%{opacity:.18}100%{opacity:0}}

/* Protective wingbeats and rising feathers, inspired by renewal. */
.archangel-half{position:absolute;inset:0;transform-origin:50% 72%;backface-visibility:hidden}.archangel-half-left{clip-path:inset(0 50% 0 0)}.archangel-half-right{clip-path:inset(0 0 0 50%)}.archangel-half .archangel-background{inset:0;width:100%;height:100%;animation:none!important}.hero.wings-unfold .wing-background{opacity:.23}
@media(prefers-reduced-motion:no-preference){.hero.wings-unfold .wing-background{animation:protective-presence 10.5s ease both}.hero.wings-unfold .archangel-half-left{animation:protect-left 10.5s cubic-bezier(.4,0,.2,1) both}.hero.wings-unfold .archangel-half-right{animation:protect-right 10.5s cubic-bezier(.4,0,.2,1) both}.hero.wings-unfold .flight-feather{animation:phoenix-rise 7s ease-out 1.5s both}.hero.wings-unfold .feather-1{animation-delay:2.2s}.hero.wings-unfold .feather-2{animation-delay:2.6s}.hero.wings-unfold .feather-3{animation-delay:3s}.hero.wings-unfold .feather-4{animation-delay:3.3s}}
@keyframes protective-presence{0%,100%{opacity:0}18%,85%{opacity:.23}}
@keyframes protect-left{0%{transform:perspective(1000px) rotateY(-68deg) rotateZ(10deg) translateY(20px)}25%{transform:perspective(1000px) rotateY(0deg) rotateZ(0deg) translateY(0)}50%,58%{transform:perspective(1000px) rotateY(-58deg) rotateZ(8deg) translateY(-5px)}82%,100%{transform:perspective(1000px) rotateY(0deg) rotateZ(-2deg) translateY(-12px)}}
@keyframes protect-right{0%{transform:perspective(1000px) rotateY(68deg) rotateZ(-10deg) translateY(20px)}25%{transform:perspective(1000px) rotateY(0deg) rotateZ(0deg) translateY(0)}50%,58%{transform:perspective(1000px) rotateY(58deg) rotateZ(-8deg) translateY(-5px)}82%,100%{transform:perspective(1000px) rotateY(0deg) rotateZ(2deg) translateY(-12px)}}
@keyframes phoenix-rise{0%{opacity:0;transform:translate(-12px,100px) rotate(24deg)}20%{opacity:.8}55%{opacity:.65;transform:translate(18px,-15px) rotate(-16deg)}100%{opacity:0;transform:translate(-15px,-180px) rotate(22deg)}}
/* Interactive phoenix: ash -> fire -> ash, behind the hero copy. */
.hero{position:relative;isolation:isolate}.hero>div:first-child{position:relative;z-index:2}.hero-art{pointer-events:none}.phoenix-scene{position:absolute;inset:0;z-index:0;isolation:isolate}.phoenix-wing{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer;color:var(--ink)}.phoenix-image{display:block;width:100%;height:100%;object-fit:contain;filter:grayscale(1) brightness(.6);opacity:.2;transform:scale(.76);transition:filter 2s,transform 2.6s cubic-bezier(.2,.65,.3,1),opacity 2s;pointer-events:none}.phoenix-hint{position:absolute;right:0;width:46%;bottom:19%;font-size:11px;letter-spacing:.04em;text-align:center;animation:ash-pulse 3s ease-in-out infinite}.phoenix-quote{position:absolute;right:0;bottom:25%;width:46%;margin:0;text-align:center;font:italic clamp(10px,1.1vw,14px)/1.6 'Playfair Display',Georgia,serif;color:#657083;white-space:nowrap;pointer-events:none;transition:color 2s,text-shadow 2s}.phoenix-close{position:absolute;right:12px;top:20px;width:40px;height:40px;border:1px solid #d4af3760;border-radius:50%;background:#ffffffd9;color:var(--ink);font-size:25px;z-index:4}.phoenix-close[hidden]{display:none}.is-fire .phoenix-image{filter:sepia(1) saturate(3) hue-rotate(345deg) drop-shadow(0 0 12px #ffb52b);transform:scale(1);opacity:.38}.is-fire .phoenix-quote{color:#9b4e0c;text-shadow:0 0 12px #ffc45c,0 0 24px #ffbd4440}.is-fire .phoenix-hint{opacity:0;animation:none}.phoenix-sparks{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1.2s}.is-fire .phoenix-sparks{opacity:.85}.phoenix-spark{position:absolute;bottom:7%;width:3px;height:5px;border-radius:50%;background:#efa52c;box-shadow:0 0 6px #ffb12b;animation:phoenix-ember var(--duration) ease-out both}.phoenix-wing:focus-visible{outline:2px solid var(--copper);outline-offset:-8px}@keyframes ash-pulse{0%,100%{opacity:.45}50%{opacity:.9}}@keyframes phoenix-ember{0%{opacity:0;transform:translate(0,0) scale(.5)}18%{opacity:1}100%{opacity:0;transform:translate(var(--drift),-340px) scale(0)}}@media(max-width:600px){.phoenix-scene{top:42%}.phoenix-quote{width:100%;bottom:20%;font-size:11px}.phoenix-hint{width:100%;bottom:12%}.phoenix-close{top:0}.phoenix-image{opacity:.28}.is-fire .phoenix-image{opacity:.45}}@media(prefers-reduced-motion:reduce){.phoenix-image,.phoenix-quote,.phoenix-sparks{transition:none}.phoenix-hint{animation:none;opacity:.8}.phoenix-spark{display:none}.is-fire .phoenix-image{transform:scale(.9)}}

html[lang="de"] .phoenix-quote{font-size:clamp(9px,1vw,12px)}@media(max-width:600px){html[lang="de"] .phoenix-quote{font-size:10px}}

/* Quiet gold drawing sequence, followed by a gentle unfolding. */
.wing-art{position:absolute;inset:0;display:block;transform:scale(.78);transition:transform 3.5s cubic-bezier(.22,.61,.36,1)}.wing-art .phoenix-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:none;filter:none;opacity:.12;transition:opacity 2s 1.7s}.golden-trace{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .5s}.golden-trace path{stroke-dasharray:1;stroke-dashoffset:1}.is-awake .wing-art{transform:scale(1)}.is-awake .golden-trace{opacity:.6}.is-awake .wing-art .phoenix-image{opacity:.28}.is-awake .phoenix-hint{opacity:0;animation:none}.phoenix-quote,.is-awake .phoenix-quote{color:var(--ink);text-shadow:none}.phoenix-close{box-shadow:none;color:var(--ink);border-color:var(--line);background:#ffffffbf}.is-awake .phoenix-sparks{opacity:1}.quiet-feather{position:absolute;bottom:15%;width:20px;height:44px;color:#B99A60;opacity:0;pointer-events:none}.quiet-feather svg{width:100%;height:100%}
@media(prefers-reduced-motion:no-preference){.is-awake .golden-trace path{animation:trace-wing 2.2s ease var(--trace-delay) forwards}.is-awake .quiet-feather{animation:quiet-feather-rise 5s ease-in-out var(--delay) both}}@keyframes trace-wing{to{stroke-dashoffset:0}}@keyframes quiet-feather-rise{0%{opacity:0;transform:translateY(15px) rotate(-12deg)}25%{opacity:.48}65%{opacity:.36}100%{opacity:0;transform:translate(var(--sway),-135px) rotate(20deg)}}@media(prefers-reduced-motion:reduce){.wing-art,.wing-art .phoenix-image{transition:none}.is-awake .golden-trace path{stroke-dashoffset:0}.quiet-feather{display:none}}

/* Perspective and separated layers give the fine wings a spatial view. */
.phoenix-scene{perspective:1100px}.wing-art{transform-style:preserve-3d;transform:perspective(1100px) rotateX(var(--tilt-x,8deg)) rotateY(var(--tilt-y,-8deg)) scale(.78);transform-origin:50% 65%;transition:transform .65s ease-out}.wing-art .phoenix-image{transform:translateZ(7px);backface-visibility:hidden}.golden-trace{transform:translateZ(28px);backface-visibility:hidden}.is-awake .wing-art{transform:perspective(1100px) rotateX(var(--tilt-x,-4deg)) rotateY(var(--tilt-y,5deg)) scale(1);transition:transform 1.8s cubic-bezier(.22,.61,.36,1)}@media(prefers-reduced-motion:reduce){.wing-art,.is-awake .wing-art{transform:none;transition:none}.golden-trace,.wing-art .phoenix-image{transform:none}}

/* Brief phoenix renewal, then a quiet protective presence and the motto. */
.phoenix-scene .wing-art{transform:scale(.8);transform-style:flat;transition:none}
.phoenix-scene .wing-art .phoenix-image{transform:none;filter:grayscale(1);opacity:.16;transition:none}
.phoenix-scene .golden-trace{transform:none;opacity:0;transition:none}
.phoenix-scene .phoenix-hint{animation:none;opacity:.85;transition:opacity .2s}
.phoenix-scene.is-awake .phoenix-hint{opacity:0}
.phoenix-scene.is-awake .wing-art{transform:scale(1);animation:renewal-open 2.1s ease-out both}
.phoenix-scene.is-awake .phoenix-image{animation:renewal-light 2.1s ease-in-out both}
.phoenix-scene.is-awake .golden-trace{opacity:.46;transition:opacity .8s 1.1s}
.phoenix-scene.is-awake .golden-trace path{animation:trace-wing 1.2s ease var(--trace-delay,0s) forwards}
.phoenix-scene .wing-art:after{content:'';position:absolute;inset:15% 4%;border-radius:50%;background:radial-gradient(ellipse,#dfc68b24,transparent 68%);opacity:0;pointer-events:none;transition:opacity .9s}
.phoenix-scene.is-protected .wing-art:after{opacity:1}
.phoenix-scene .phoenix-quote{white-space:normal;text-wrap:balance;opacity:0;color:var(--ink);text-shadow:none}
.phoenix-scene .phoenix-quote[hidden]{display:none}
.phoenix-scene.is-protected .phoenix-quote{opacity:1;animation:motto-reveal 1s ease-out both}
.phoenix-scene .phoenix-sparks{display:none}
@keyframes renewal-open{from{transform:scale(.8)}to{transform:scale(1)}}
@keyframes renewal-light{0%{filter:grayscale(1);opacity:.16}35%{filter:sepia(1) saturate(2.1) drop-shadow(0 0 6px #d89a45);opacity:.36}65%{filter:sepia(1) saturate(1.3) drop-shadow(0 0 9px #e8c985);opacity:.24}100%{filter:sepia(.7);opacity:.12}}
@keyframes motto-reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.phoenix-scene.is-awake .wing-art{transform:scale(.9)}.phoenix-scene.is-awake .phoenix-image{opacity:.12;filter:sepia(.7)}.phoenix-scene.is-awake .golden-trace{opacity:.46}.phoenix-scene.is-awake .golden-trace path{stroke-dashoffset:0}}

/* Keep the name compact and give the emblem its own clear space. */
.hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:5%}
.hero h1{font-size:clamp(43px,4.9vw,66px);line-height:1.15;letter-spacing:-.025em}
.hero h1 em{font-size:.86em;letter-spacing:-.025em;white-space:nowrap}
.hero>div:first-child{min-width:0}
.phoenix-scene{inset:8% 0 6% 51%}
.phoenix-scene .wing-art{inset:0 -4% 10%}
.phoenix-scene .phoenix-hint{right:0;width:100%;bottom:16%;font-size:11px}
.phoenix-scene .phoenix-quote{right:5%;width:90%;bottom:17%;font-size:14px;line-height:1.75}
html[lang="de"] .phoenix-scene .phoenix-quote{font-size:13px}
.phoenix-scene .wing-art .phoenix-image{opacity:.55;filter:grayscale(.75)}
.phoenix-scene.is-awake .golden-trace{opacity:.7}
@keyframes renewal-light{0%{filter:grayscale(.75);opacity:.55}35%{filter:sepia(.8) saturate(1.5) drop-shadow(0 0 4px #d4b16d);opacity:.8}65%{filter:sepia(.4) drop-shadow(0 0 7px #e8c985);opacity:.45}100%{filter:none;opacity:.35}}
@media(max-width:850px) and (min-width:601px){.hero h1{font-size:clamp(38px,5.9vw,50px)}.phoenix-scene .phoenix-quote{font-size:12px}}
@media(max-width:600px){.hero{grid-template-columns:minmax(0,1fr);gap:12px;padding-bottom:25px}.hero h1{font-size:clamp(42px,11vw,56px)}.hero h1 em{font-size:.86em}.hero-art{display:none}.phoenix-scene{position:relative;inset:auto;height:310px;width:100%;margin-top:12px}.phoenix-scene .phoenix-hint{bottom:12%}.phoenix-scene .phoenix-quote{bottom:13%;font-size:13px}.phoenix-scene .phoenix-close{top:0}}
@media(prefers-reduced-motion:reduce){.phoenix-scene.is-awake .phoenix-image{opacity:.35;filter:none}}

.action-arrow{width:15px;height:15px;flex-shrink:0}

/* Organic feathers unfold in depth, with one restrained phoenix silhouette. */
@font-face{font-family:Portfolio Serif;src:url('fonts/portfolio-serif.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.hero h1,.hero h1 em{font-family:Portfolio Serif,Georgia,serif;font-size:clamp(38px,4.5vw,59px);font-weight:400;font-style:normal;letter-spacing:-.035em;line-height:1.3;font-synthesis:none}
.hero h1 em{display:inline-block;white-space:nowrap}
.phoenix-scene{perspective:950px}
.phoenix-scene .wing-art,.phoenix-scene.is-awake .wing-art{inset:0 -2% 13%;transform:none;animation:none;transform-style:preserve-3d;perspective:950px}
.phoenix-half{position:absolute;inset:0;transform-style:preserve-3d;backface-visibility:hidden;pointer-events:none}
.phoenix-half-left{clip-path:inset(0 50% 0 0);transform-origin:50% 67%;transform:rotateY(23deg) rotateZ(9deg) scale(.88)}
.phoenix-half-right{clip-path:inset(0 0 0 50%);transform-origin:50% 67%;transform:rotateY(-23deg) rotateZ(-9deg) scale(.88)}
.phoenix-scene .wing-art .phoenix-image{position:absolute;inset:0;object-fit:contain;opacity:.55;filter:grayscale(.7);transform:none;animation:none;transition:filter 1.1s,opacity 1.1s}
.phoenix-scene.is-awake .phoenix-half-left{animation:victory-left 3s cubic-bezier(.22,.61,.36,1) both}
.phoenix-scene.is-awake .phoenix-half-right{animation:victory-right 3s cubic-bezier(.22,.61,.36,1) both}
.phoenix-scene.is-awake .wing-art .phoenix-image{opacity:.85;filter:sepia(.25) saturate(.75) drop-shadow(0 3px 3px #b6965830)}
.phoenix-bird{position:absolute;left:42%;top:30%;width:16%;height:58%;opacity:0;transform:translateZ(24px);pointer-events:none}
.phoenix-bird path{stroke-dasharray:1;stroke-dashoffset:1}
.phoenix-scene.is-awake .phoenix-bird{animation:bird-presence 3s ease both}
.phoenix-scene.is-awake .phoenix-bird path{animation:trace-wing 1.15s ease .55s forwards}
.phoenix-scene .wing-art:after{inset:20% 4%;transform:translateZ(-12px);background:radial-gradient(ellipse,#e3c78638,transparent 67%)}
.phoenix-scene.is-awake .wing-art:after{animation:warm-presence 3s ease both}
.phoenix-scene.is-protected .wing-art:after{opacity:.45;animation:none}
@keyframes victory-left{0%{transform:rotateY(23deg) rotateZ(9deg) scale(.88)}45%{transform:translateY(-14px) rotateY(-24deg) rotateZ(3deg) scale(1.06)}72%{transform:translateY(-20px) rotateY(8deg) rotateZ(7deg) scale(1.02)}100%{transform:translateY(-12px) rotateY(-7deg) rotateZ(4deg) scale(1)}}
@keyframes victory-right{0%{transform:rotateY(-23deg) rotateZ(-9deg) scale(.88)}45%{transform:translateY(-14px) rotateY(24deg) rotateZ(-3deg) scale(1.06)}72%{transform:translateY(-20px) rotateY(-8deg) rotateZ(-7deg) scale(1.02)}100%{transform:translateY(-12px) rotateY(7deg) rotateZ(-4deg) scale(1)}}
@keyframes bird-presence{0%,12%{opacity:0}35%,72%{opacity:.9}100%{opacity:0}}
@keyframes warm-presence{0%{opacity:0}45%{opacity:.85}100%{opacity:.45}}
@media(max-width:850px) and (min-width:601px){.hero h1,.hero h1 em{font-size:clamp(32px,4.9vw,43px)}}
@media(max-width:600px){.hero h1,.hero h1 em{font-size:clamp(32px,8.8vw,48px)}.phoenix-scene{height:330px}}
@media(prefers-reduced-motion:reduce){.phoenix-scene .phoenix-half{transform:none!important;animation:none!important}.phoenix-scene.is-awake .phoenix-bird{opacity:0}.phoenix-scene.is-awake .wing-art:after{opacity:.45}}
/* Each moving wing has its own bounded image plane. */
.phoenix-half{width:50%;right:auto;overflow:hidden;clip-path:none;transform-style:flat}
.phoenix-half-left{left:0;transform-origin:100% 67%}
.phoenix-half-right{left:50%;transform-origin:0% 67%}
.phoenix-scene .wing-art .phoenix-half .phoenix-image{width:200%;max-width:none;height:100%;right:auto}
.phoenix-scene .wing-art .phoenix-half-right .phoenix-image{left:-100%}

/* A fleeting full phoenix rises through the wings. */
.phoenix-apparition{position:absolute;left:-3%;top:-8%;width:106%;height:112%;object-fit:contain;opacity:0;pointer-events:none;mix-blend-mode:multiply;transform:translateY(22px) scale(.7);mask-image:radial-gradient(ellipse,#000 42%,#000b 63%,transparent 79%);backface-visibility:hidden}
/* One uninterrupted transform curve; visibility fades independently. */
.phoenix-apparition{filter:none;transform:translate3d(0,24px,0) scale(.92)}
.is-awake .phoenix-apparition{will-change:transform,opacity;animation:phoenix-soar 5.6s cubic-bezier(.35,0,.55,1) .3s both,phoenix-presence 5.6s linear .3s both}
@keyframes phoenix-soar{from{transform:translate3d(0,24px,0) scale(.92)}to{transform:translate3d(64px,-68vh,0) scale(.6)}}
@keyframes phoenix-presence{0%{opacity:0}18%{opacity:.95}65%{opacity:.95}100%{opacity:0}}
/* The first touch opens the portfolio; visitors can skip the sequence. */
.intro-pending{overflow:hidden}
.intro-pending main,.intro-pending footer{visibility:hidden}
.intro-pending header{position:relative;z-index:30;background:transparent;border-color:transparent}
.intro-pending header .brand,.intro-pending nav{visibility:hidden}
.intro-gate{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;isolation:isolate;background:radial-gradient(ellipse at 50% 43%,#f3eee4 0%,#f8f9fa 40%,#fff 76%);overflow:hidden;transition:opacity .7s,visibility .7s}
.intro-name{font:400 clamp(22px,3vw,34px)/1.5 'Portfolio Serif',Georgia,serif;letter-spacing:-.025em;color:var(--ink);position:absolute;top:15%;margin:0;text-align:center}
.intro-stage{position:relative;width:min(820px,90vw);height:min(540px,65dvh);margin-top:30px}
.intro-stage .intro-scene{inset:0;position:absolute;perspective:1100px}
.intro-stage .wing-art{inset:0 0 12%}
.intro-stage .phoenix-hint{bottom:3%;font-size:13px;letter-spacing:.07em;color:var(--ink)}
.intro-stage .phoenix-quote{bottom:3%;font-size:clamp(15px,2vw,20px);width:100%;right:0}
html[lang="de"] .intro-stage .phoenix-quote{font-size:clamp(14px,1.8vw,19px)}
.intro-stage .phoenix-apparition{left:0;top:-6%;width:100%;height:112%}
.intro-skip{position:absolute;bottom:5%;border:0;border-bottom:1px solid #b7975870;background:transparent;color:var(--muted);padding:8px 2px;font-size:12px;display:flex;gap:14px;align-items:center}
.intro-skip:hover{color:var(--ink);border-color:var(--copper)}
.intro-gate.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
.portfolio-revealed{animation:portfolio-arrive .9s cubic-bezier(.2,.65,.3,1) both}
@keyframes portfolio-arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:600px){.intro-name{top:18%;font-size:25px}.intro-stage{height:390px;width:96vw}.intro-stage .intro-scene{height:100%;margin:0}.intro-stage .phoenix-quote{font-size:15px}.intro-stage .phoenix-hint{font-size:12px}.intro-skip{bottom:7%}}
@media(max-height:550px){.intro-name{top:5%;font-size:22px}.intro-stage{height:76dvh;margin:0}.intro-skip{right:5%;bottom:4%}}
@media(prefers-reduced-motion:reduce){.phoenix-apparition{display:none}.intro-gate,.portfolio-revealed{transition:none;animation:none}}
.phoenix-scene.is-awake .phoenix-half .phoenix-image{animation:feather-support 3s ease both}
@keyframes feather-support{0%{opacity:.55}18%{opacity:.4}35%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.phoenix-scene.is-awake .phoenix-half .phoenix-image{animation:none}}
/* A revealed motto replaces the touch prompt, including when the intro is skipped. */
.phoenix-scene.is-protected .phoenix-hint{display:none}

/* The completed flight leaves only the motto, with no resting feather layers. */
.phoenix-scene.is-protected .phoenix-half,.phoenix-scene.is-protected .wing-art:after{visibility:hidden}

/* The resting wings are clipped directly from the flying phoenix artwork. */
.phoenix-scene .wing-art .phoenix-half{width:100%;left:0;right:0;overflow:visible}
.phoenix-scene .wing-art .phoenix-half .phoenix-image{width:100%;height:100%;left:0;right:0;max-width:100%;mix-blend-mode:multiply}
.phoenix-half-left{transform-origin:54% 46%}
.phoenix-half-right{transform-origin:73% 43%}
.phoenix-keepsake{position:absolute;right:50%;bottom:25%;width:clamp(130px,15vw,180px);height:auto;transform:translateX(50%);opacity:0;visibility:hidden;pointer-events:none;mix-blend-mode:multiply;transition:opacity 1s ease,visibility 1s}
.phoenix-scene.is-protected .phoenix-keepsake{opacity:.82;visibility:visible}
.phoenix-scene .phoenix-quote{white-space:nowrap;text-wrap:nowrap;font-size:clamp(10px,1.05vw,14px)}
html[lang="de"] .phoenix-scene .phoenix-quote{font-size:clamp(9px,.92vw,12px)}
.intro-stage .phoenix-keepsake{bottom:13%;width:135px}
@media(max-width:600px){.phoenix-keepsake{width:145px;bottom:25%}.phoenix-scene .phoenix-quote{font-size:12px}html[lang="de"] .phoenix-scene .phoenix-quote{font-size:10px}}
@media(prefers-reduced-motion:reduce){.phoenix-keepsake{transition:none}}

.phoenix-scene .wing-art .phoenix-half{mix-blend-mode:multiply;mask-image:linear-gradient(#000 0%,#000 62%,transparent 94%)}
.phoenix-half-left{transform-origin:54% 80%}
.phoenix-half-right{transform-origin:73% 80%}

.phoenix-scene{mix-blend-mode:multiply}
.phoenix-keepsake{mask-image:radial-gradient(ellipse,#000 50%,#000b 65%,transparent 76%)}

/* Keep a single square artwork plane from resting feathers through flight. */
.phoenix-scene .wing-art,.phoenix-scene.is-awake .wing-art{inset:0 0 12%}
.phoenix-scene .wing-art .phoenix-half .phoenix-image{filter:url(#phoenix-clear-paper);opacity:.85;transition:opacity .9s ease}
.phoenix-scene .wing-art .phoenix-half{mask-image:none;transform:scale(.92);mix-blend-mode:normal}
.phoenix-scene .phoenix-apparition,.intro-stage .phoenix-apparition{inset:0;width:100%;height:100%;filter:url(#phoenix-clear-paper);mask-image:none;mix-blend-mode:normal}
.phoenix-scene .phoenix-keepsake{filter:url(#phoenix-clear-paper);mask-image:none;mix-blend-mode:normal;transition:opacity 1.2s ease,visibility 1.2s}
.phoenix-scene.is-awake .phoenix-half-left{animation:seamless-left 1.5s ease-in-out both}
.phoenix-scene.is-awake .phoenix-half-right{animation:seamless-right 1.5s ease-in-out both}
@keyframes seamless-left{0%{transform:scale(.92)}50%{transform:scale(.94) rotateY(-7deg)}100%{transform:scale(.96) rotateY(0)}}
@keyframes seamless-right{0%{transform:scale(.92)}50%{transform:scale(.94) rotateY(7deg)}100%{transform:scale(.96) rotateY(0)}}
.phoenix-scene.is-awake .phoenix-half .phoenix-image{animation:seamless-feathers 1.8s ease both}
@keyframes seamless-feathers{0%,15%{opacity:.85}85%,100%{opacity:0}}
.intro-gate{transition:opacity 1s ease,visibility 1s}
.intro-scene.is-protected .phoenix-keepsake,.intro-scene.is-protected .phoenix-quote{opacity:0;visibility:hidden}
.portfolio-revealed{animation:portfolio-arrive 1.2s ease both}
@keyframes portfolio-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.phoenix-scene.is-awake .phoenix-half,.phoenix-scene.is-awake .phoenix-half .phoenix-image{animation:none}.intro-gate,.phoenix-scene .phoenix-keepsake{transition:none}.portfolio-revealed{animation:none}}

.phoenix-scene .phoenix-keepsake{width:clamp(190px,22vw,275px);bottom:25%}
.phoenix-scene.is-protected .phoenix-keepsake{opacity:1}
@media(max-width:600px){.phoenix-scene .phoenix-keepsake{width:210px;bottom:23%}}

/* One illustration: equal mirrored wings, an emerging body, then buoyant flight. */
.phoenix-unified{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;filter:url(#phoenix-clear-paper)}
.phoenix-drawing{transform-origin:50% 44%;transform-box:view-box}
.unified-wing{transform-origin:50% 44%;transform-box:view-box}
.unified-body{opacity:0;transition:opacity 1.25s ease-in-out}
.phoenix-scene.is-awake .unified-body,.phoenix-keepsake .unified-body{opacity:1}
/* Two unhurried wingbeats stay attached to the same body throughout the ascent. */
.phoenix-scene.is-awake .phoenix-unified{animation:phoenix-buoyant-flight 8.8s linear .9s both,phoenix-flight-fade 8.8s linear .9s both;will-change:transform,opacity}
.phoenix-scene.is-awake .phoenix-unified .phoenix-drawing{animation:phoenix-body-float 4.6s cubic-bezier(.45,0,.55,1) .15s infinite}
.phoenix-scene.is-awake .phoenix-unified .unified-wing-left{animation:phoenix-wing-breath-left 3.8s cubic-bezier(.45,0,.55,1) .15s infinite}
.phoenix-scene.is-awake .phoenix-unified .unified-wing-right{animation:phoenix-wing-breath-right 3.8s cubic-bezier(.45,0,.55,1) .15s infinite}
.phoenix-keepsake{aspect-ratio:13/11;overflow:visible}
.phoenix-scene.is-protected .phoenix-unified{visibility:hidden}
@keyframes phoenix-buoyant-flight{
 0%{transform:translate3d(0,0,0) rotate(0) scale(1)}
 35%{transform:translate3d(7.5vw,-28.7vh,0) rotate(2deg) scale(.94)}
 70%{transform:translate3d(19vw,-57.4vh,0) rotate(4deg) scale(.84)}
 100%{transform:translate3d(32vw,-82vh,0) rotate(5deg) scale(.72)}
}
@keyframes phoenix-flight-fade{0%,62%{opacity:1}100%{opacity:0}}
@keyframes phoenix-body-float{
 0%,100%{transform:translate(0,0) rotate(-.25deg)}
 27%{transform:translate(-14px,-22px) rotate(-1.1deg)}
 57%{transform:translate(16px,9px) rotate(1.1deg)}
 82%{transform:translate(-6px,-10px) rotate(-.45deg)}
}
@keyframes phoenix-wing-breath-left{
 0%,100%{transform:rotate(0) scale(1,1)}
 30%{transform:rotate(-6deg) scale(.98,.89)}
 68%{transform:rotate(3deg) scale(1,1.025)}
}
@keyframes phoenix-wing-breath-right{
 0%,100%{transform:rotate(0) scale(1,1)}
 30%{transform:rotate(6deg) scale(.98,.89)}
 68%{transform:rotate(-3deg) scale(1,1.025)}
}
@media(prefers-reduced-motion:reduce){.phoenix-scene.is-awake .phoenix-unified,.phoenix-scene.is-awake .phoenix-unified .unified-wing,.phoenix-scene.is-awake .phoenix-unified .phoenix-drawing{animation:none;will-change:auto}.unified-body{transition:none}}

/* Small linked gestures keep the head, chest and trailing feathers alive. */
.phoenix-head,.phoenix-torso,.phoenix-tail{transform-box:view-box}
.phoenix-head{transform-origin:730px 370px}
.phoenix-torso{transform-origin:62% 46%}
.phoenix-tail{transform-origin:51% 56%}
.phoenix-scene.is-awake .phoenix-unified .phoenix-head{animation:phoenix-head-poise 5.2s cubic-bezier(.45,0,.55,1) .35s infinite}
.phoenix-scene.is-awake .phoenix-unified .phoenix-torso{animation:phoenix-chest-lift 3.8s cubic-bezier(.45,0,.55,1) .15s infinite}
.phoenix-scene.is-awake .phoenix-unified .phoenix-tail{animation:phoenix-tail-follow 3.8s cubic-bezier(.45,0,.55,1) .65s infinite}
@keyframes phoenix-head-poise{0%,100%{transform:rotate(0) scaleX(1) skewY(0)}24%{transform:rotate(-2deg) scaleX(.94) skewY(-.8deg)}44%,54%{transform:rotate(-5.5deg) scaleX(.82) skewY(-2.5deg)}78%{transform:rotate(2.2deg) scaleX(.98) skewY(.4deg)}}
@keyframes phoenix-chest-lift{0%,100%{transform:translateY(0) scaleY(1)}30%{transform:translateY(-2px) scaleY(1.004)}68%{transform:translateY(1px) scaleY(.998)}}
@keyframes phoenix-tail-follow{0%,100%{transform:rotate(0) skewX(0)}30%{transform:rotate(1.7deg) skewX(.5deg)}68%{transform:rotate(-1.4deg) skewX(-.5deg)}}
.phoenix-scene.is-protected .phoenix-unified,.phoenix-scene.is-protected .phoenix-unified *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.phoenix-scene.is-awake .phoenix-unified .phoenix-head,.phoenix-scene.is-awake .phoenix-unified .phoenix-torso,.phoenix-scene.is-awake .phoenix-unified .phoenix-tail{animation:none}}
/* A replay shows only the airborne illustration, without a second resting bird. */
.phoenix-scene.is-awake:not(.is-protected) .phoenix-keepsake{transition:none;opacity:0;visibility:hidden}

/* The same quiet glance remains visible beside the motto after the flight. */
.phoenix-scene.is-protected .phoenix-keepsake .phoenix-head{animation:phoenix-head-poise 6.4s cubic-bezier(.45,0,.55,1) 1s infinite}
@media(prefers-reduced-motion:reduce){.phoenix-scene.is-protected .phoenix-keepsake .phoenix-head{animation:none}}

/* Airy wake and a few fine feathers follow the flight, without point particles. */
.phoenix-flight-trail{position:absolute;inset:0;overflow:visible;pointer-events:none;z-index:0;opacity:1;transition:opacity 1.1s ease}
.phoenix-flight-trail.is-fading{opacity:0}
.phoenix-flight-trail>span{position:absolute;display:block;width:var(--size);pointer-events:none;transform-origin:50% 25%;animation:phoenix-air-drift var(--life) ease-out both}
.phoenix-flight-trail svg{display:block;width:100%;height:100%}
.phoenix-trail-air{aspect-ratio:3/1;filter:blur(1.3px)}
.phoenix-flight-trail>.phoenix-trail-feather{aspect-ratio:1/3;animation-name:phoenix-loose-feather}
.phoenix-scene .phoenix-wing{z-index:1}
.phoenix-scene .phoenix-quote,.phoenix-scene .phoenix-keepsake{z-index:2}
@keyframes phoenix-air-drift{0%{opacity:0;transform:translate(-50%,-50%) scale(.75)}22%{opacity:.35}100%{opacity:0;transform:translate(calc(-50% + var(--drift)),calc(-50% + var(--fall))) rotate(var(--turn)) scale(1.5)}}
@keyframes phoenix-loose-feather{0%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(.7)}15%{opacity:.8}55%{opacity:.6}100%{opacity:0;transform:translate(calc(-50% + var(--drift)),calc(-50% + var(--fall))) rotate(var(--turn)) scale(.95)}}
@media(prefers-reduced-motion:reduce){.phoenix-flight-trail{display:none}}

/* A continuous full-width wash has no hard boundary at the content container. */
html{overflow-x:clip}
.hero{overflow:visible}
.hero:before{left:50%;right:auto;width:100vw;transform:translateX(-50%);background:radial-gradient(ellipse at 72% 42%,#e7edf5 0%,#f0f3f7 38%,#f8f9fa 62%,#fff 88%);mask-image:linear-gradient(180deg,transparent,#000 15%,#000 78%,transparent)}
/* Keep slow gestures while avoiding animated SVG filter rasterization. */
.phoenix-scene.is-awake:not(.is-protected) .phoenix-feather-flex{transform-box:view-box;transform-origin:54% 46%;animation:phoenix-feather-flex 3.8s cubic-bezier(.45,0,.55,1) .3s infinite;will-change:transform}
@keyframes phoenix-feather-flex{0%,100%{transform:skewY(0) scaleY(1)}33%{transform:skewY(1.5deg) scaleY(.985)}72%{transform:skewY(-.65deg) scaleY(1.008)}}
.phoenix-scene.is-awake:not(.is-protected) .phoenix-drawing,.phoenix-scene.is-awake:not(.is-protected) .unified-wing,.phoenix-scene.is-awake:not(.is-protected) .phoenix-head,.phoenix-scene.is-awake:not(.is-protected) .phoenix-tail{will-change:transform}
.phoenix-flight-trail>span{will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.phoenix-scene.is-awake .phoenix-feather-flex{animation:none;will-change:auto}}

/* A decoded transparent texture replaces repeated live paper filtering. */
.phoenix-scene svg.phoenix-raster-ready{filter:none}
.intro-pending main .phoenix-keepsake .phoenix-head{animation-play-state:paused}