/* A quiet invitation that is removed at the first skill interaction. */
.expertise-tags.skills-hint [data-expertise="brand"]:before,.expertise-tags.skills-hint [data-expertise="brand"]:after{content:'';position:absolute;inset:0;border:2.5px solid #20bdd4;border-radius:999px;pointer-events:none;opacity:0;animation:skill-invitation 3.4s ease-out infinite}
.expertise-tags.skills-hint [data-expertise="brand"]:after{animation-delay:.45s}
@keyframes skill-invitation{0%,15%{opacity:0;transform:scale(1)}25%{opacity:.85;transform:scale(1.02)}70%,100%{opacity:0;transform:scale(1.32,1.8)}}
.skill-projects-link[hidden]{display:none!important}
.skill-projects-link{font-size:12px;text-align:center;text-decoration:underline;text-underline-offset:4px;display:block;margin-top:9px;color:#17232b}
/* Match the supplied 1040 × 760 collage; supplied PNG rotations are preserved. */
.hero-v4 .composition-ai{inset:auto;left:-7%;top:50%;width:114%;height:auto;aspect-ratio:1040/760;transform:translateY(-50%)}
.composition-ai .comp-izipizi.ai-card{width:53%;left:5%;top:3%;--tilt:-5deg;z-index:2}
.composition-ai .comp-fruzz.ai-card{width:47%;left:53%;top:11%;--tilt:1deg;z-index:1}
.composition-ai .comp-thecure.ai-card{width:50%;left:0;top:58%;--tilt:3deg;z-index:2}
.composition-ai .ai-artwork{position:absolute;height:auto;object-fit:contain;opacity:0;transform:translateY(70px) rotate(var(--tilt,0deg)) scale(.96);transition:opacity .65s ease,transform 1.1s cubic-bezier(.22,.7,.25,1);transition-delay:0s}
.mode-ai .composition-ai .ai-artwork{opacity:1;transform:translateY(0) rotate(var(--tilt,0deg)) scale(1);transition-delay:calc(var(--order)*70ms)}
.composition-ai .ai-tennis{width:27%;left:38%;top:43%;z-index:4}
.composition-ai .ai-botanica{width:22%;left:76%;top:44%;z-index:3}
.composition-ai .ai-cherries{width:23%;left:59%;top:58%;z-index:5;--tilt:-3deg}
/* Illustration uses existing portfolio artwork until its dedicated composition is supplied. */
.title-illustration>*{opacity:0;transform:translateY(18px)}
.mode-illustration .title-off>*{opacity:0;transform:translateY(-14px)}
.mode-illustration .title-illustration>*{opacity:1;transform:translateY(0)}
.mode-illustration .portrait-scene{opacity:0;transform:scale(.98);pointer-events:none}
.mode-illustration .composition-illustration img{opacity:1;transform:translateY(0) scale(1);transition-delay:calc(var(--order)*70ms)}
.composition-illustration .illustration-jim{width:64%;left:0;top:6%;z-index:2}
.composition-illustration .illustration-papillons{width:59%;right:0;top:36%;z-index:1}
/* Touch layout: title, controls, then a stable full-width stage. */
.compact-skills .hero-v4{display:flex;flex-direction:column;align-items:stretch;max-width:760px;padding:30px 6% 26px;gap:20px;min-height:0;clip-path:none}
.compact-skills .hero-copy{width:100%;text-align:center}
.compact-skills .hero-copy .eyebrow{font-size:clamp(9px,2.35vw,13px);letter-spacing:.07em;line-height:1.5;white-space:normal;margin-bottom:20px}
.compact-skills .hero-copy h1{font-size:clamp(36px,10vw,68px);line-height:1.06;letter-spacing:-.047em;text-align:center}
.compact-skills .hero-copy .title-state{position:relative;grid-area:1/1;left:auto;bottom:auto;width:100%;white-space:normal;align-items:center}
.compact-skills .hero-copy .title-state[aria-hidden="true"]>*{opacity:0;transform:translateY(14px)}
.compact-skills .hero-copy .title-state[aria-hidden="false"]>*{opacity:1;transform:translateY(0)}
.compact-skills .hero-v4 .expertise-band{width:100%;border:0;padding:0;z-index:5;position:relative}
.compact-skills .hero-v4 .expertise-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 4px;padding:4px 0;margin:0}
.compact-skills .hero-v4 .expertise-tags a{font-size:13px;line-height:1.2;padding:12px 13px;min-height:44px;display:inline-flex;justify-content:center;align-items:center;text-align:center}
.compact-skills .hero-v4 .expertise-tags .is-skill-selected{background:#20bdd426;color:#087e91;font-weight:600}
.compact-skills .hero-v4 .moving-pill{display:none!important}
.compact-skills .hero-art{width:100%;max-height:none;align-self:center;aspect-ratio:1.12;margin-top:4px}
.compact-skills .portrait-scene{width:100%;right:0;top:0}
.compact-skills .hero-art .composition{display:block;inset:0}
.compact-skills .hero-art .composition-brand{inset:auto;left:0;top:50%;width:100%;transform:translateY(-50%)}
.compact-skills .hero-art .composition-ai{inset:auto;left:2%;top:50%;width:95%;transform:translateY(-50%)}
.compact-skills .hero-art .composition-ui{display:block;left:2%;top:50%;width:96%;transform:translateY(-50%)}
.compact-skills .hero-art .composition-social{display:block;right:3%;top:50%;width:94%;transform:translateY(-50%)}
.compact-skills .hero-art .ai-card{border-radius:9px;box-shadow:0 8px 20px #17232b18}
.compact-skills .hero-art .home-blob{width:80%;filter:blur(28px)}
.compact-skills .hero-art .blob-cyan{left:-8%}
.compact-skills .hero-art .blob-coral{right:-8%}
@media(prefers-reduced-motion:reduce){.expertise-tags.skills-hint [data-expertise="brand"]:before,.expertise-tags.skills-hint [data-expertise="brand"]:after{display:none}.composition-ai .ai-artwork{transition:none}}

/* All headings reserve the same grid area; the role never follows a state height. */
.hero-v4 .hero-copy{min-width:0}
.hero-v4 .hero-copy h1{position:relative;align-items:start}
.hero-v4 .hero-copy .title-state{position:relative;grid-area:1/1;left:auto;bottom:auto;width:100%;align-self:start;min-width:0}
body:not(.compact-skills) .hero-v4{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr)}
body:not(.compact-skills) .hero-v4 .title-ui{font-size:.9224em}
/* Keep the mobile link's slot, including the portrait state. */
.compact-skills .skill-projects-link{min-height:18px;line-height:18px}
.compact-skills .skill-projects-link[hidden]{display:block!important;visibility:hidden;pointer-events:none}
.expertise-tags.skills-hint [data-expertise="brand"]{animation:skill-tag-bounce 3.4s ease-in-out infinite;transform-origin:center bottom}
@keyframes skill-tag-bounce{0%,12%,36%,100%{transform:translateY(0) scale(1)}20%{transform:translateY(-6px) scale(1.02,.99)}27%{transform:translateY(0) scale(1.03,.96)}32%{transform:translateY(-2px) scale(.99,1.01)}}
@media(prefers-reduced-motion:reduce){.expertise-tags.skills-hint [data-expertise="brand"]{animation:none;transform:none}}

/* Category-first hero; the portrait remains on the About page only. */
.hero-v4 .hero-copy .eyebrow{font-size:clamp(10px,.95vw,16px);line-height:1.55;letter-spacing:.075em;white-space:normal;max-width:100%}
.hero-v4 .hero-copy .title-ai{font-size:1em}
.skill-controls{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px 20px;margin-top:10px;min-height:30px}
.skill-controls .skill-projects-link{margin:0}

body:not(.touch-skills) .skill-controls{display:none}

/* Touch input is independent of the landscape desktop composition. */
.touch-skills:not(.compact-skills) .hero-art .composition{display:block}
.touch-skills:not(.compact-skills) .expertise-tags .is-skill-selected{background:#20bdd426;border-radius:999px}