:root { color-scheme: dark; --bg: #050505; --panel: #111110; --panel-hover: #171716; --text: #f1f0eb; --muted: #8a8a84; --line: #292927; --accent: #d8ff43; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { min-width: 320px; overflow-x: hidden; background: radial-gradient(circle at 78% 5%, #1b1b1a 0, #0d0d0c 25%, transparent 50%), linear-gradient(145deg, #050505 0%, #0c0c0b 52%, #030303 100%); background-attachment: fixed; color: var(--text); font-family: "DM Sans", sans-serif; }
a { color: inherit; text-decoration: none; }
.noise { position: fixed; inset: 0; z-index: 20; opacity: .035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.site-header, main, footer { width: min(100% - 48px, 1440px); margin-inline: auto; }
.site-header { align-items: center; display: flex; height: 92px; justify-content: space-between; position: relative; z-index: 30; }
.logo { font: 600 1.25rem "Manrope", sans-serif; letter-spacing: -.06em; }.logo span,.eyebrow,.chapter-heading>span { color: var(--accent); }
nav { align-items: center; display: flex; gap: clamp(22px,4vw,58px); font-size: .8rem; } nav a:not(.contact-link) { color: var(--muted); transition: color .2s; } nav a:hover { color: var(--text); }.contact-link,.back-link { border-bottom: 1px solid currentColor; padding-bottom: 4px; }.back-link { font-size: .78rem; }
.eyebrow { font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.home-hero { align-items: center; display: grid; gap: clamp(30px,6vw,100px); grid-template-columns: 1.15fr .62fr; min-height: calc(100svh - 92px); padding: 4vh 0 8vh; }
.hero-copy h1 { font: 500 clamp(5rem,11vw,11.2rem)/.76 "Manrope",sans-serif; letter-spacing: -.08em; margin: clamp(48px,8vh,95px) 0 clamp(55px,8vh,90px); position: relative; z-index: 2; }.hero-copy h1 span { color: transparent; -webkit-text-stroke: 1.5px var(--text); }
.hero-bottom { align-items: flex-end; display: flex; justify-content: space-between; max-width: 700px; }.hero-bottom p { color: var(--muted); font-size: .82rem; line-height: 1.6; }.hero-bottom a { align-items:center; display:flex; font-size:.8rem; gap:16px; }.hero-bottom a span { align-items:center; border:1px solid var(--line); border-radius:50%; display:flex; height:44px; justify-content:center; transition:.2s; width:44px; }.hero-bottom a:hover span { background:var(--accent); color:#050505; }
.portrait { justify-self:end; max-width:440px; position:relative; width:100%; }.portrait::before { border:1px solid var(--line); content:""; inset:-12px 12px 12px -12px; position:absolute; z-index:-1; }.portrait img { display:block; filter:saturate(.72) contrast(1.08); height:min(68vh,700px); object-fit:cover; object-position:center 54%; width:100%; }.portrait figcaption { color:var(--muted); display:flex; font-size:.6rem; justify-content:space-between; letter-spacing:.08em; padding-top:13px; text-transform:uppercase; }
.projects,.about { padding:clamp(100px,13vw,190px) 0; }.section-heading { align-items:flex-end; display:flex; justify-content:space-between; margin-bottom:60px; }.section-heading h2,.about h2 { font:400 clamp(2.5rem,5vw,5.5rem) "Manrope",sans-serif; letter-spacing:-.06em; margin-top:20px; }.section-count { color:var(--muted); font-size:.7rem; text-transform:uppercase; }
.cards-grid { display:grid; gap:18px; grid-template-columns:repeat(3,1fr); }.work-card { background:linear-gradient(145deg,#141413,#0c0c0b); border:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; min-height:520px; padding:26px; position:relative; transition:transform .3s ease,border-color .3s ease,background .3s ease; }.work-card::after { background:radial-gradient(circle at 80% 20%,rgba(216,255,67,.1),transparent 36%); content:""; inset:0; opacity:0; position:absolute; transition:opacity .3s; }.work-card:hover { background:var(--panel-hover); border-color:#55554e; transform:translateY(-8px); }.work-card:hover::after { opacity:1; }.card-top,.card-bottom { align-items:center; display:flex; font-size:.65rem; justify-content:space-between; position:relative; text-transform:uppercase; z-index:1; }.card-top { color:var(--muted); letter-spacing:.08em; }.card-content { position:relative; z-index:1; }.card-kicker { color:var(--accent); font-size:.65rem; letter-spacing:.14em; margin-bottom:20px; text-transform:uppercase; }.card-content h3 { font:400 clamp(2rem,3.1vw,3.6rem)/.98 "Manrope",sans-serif; letter-spacing:-.055em; }.card-content>p:last-child { color:var(--muted); font-size:.75rem; line-height:1.6; margin-top:30px; max-width:300px; }.round-arrow { align-items:center; border:1px solid var(--line); border-radius:50%; display:flex; font-size:1rem; height:42px; justify-content:center; transition:.2s; width:42px; }.work-card:hover .round-arrow { background:var(--accent); color:#050505; transform:rotate(45deg); }
.about { border-top:1px solid var(--line); }.about-content { margin-left:24%; max-width:970px; }.about h2 { line-height:1.14; margin-top:42px; }.about h2 span { color:var(--muted); }.about-meta { align-items:flex-end; display:flex; font-size:.78rem; justify-content:space-between; margin-top:78px; }.about-meta p { color:var(--muted); line-height:1.6; }.about-meta a { border-bottom:1px solid var(--text); padding-bottom:5px; }
footer { align-items:center; border-top:1px solid var(--line); color:var(--muted); display:flex; font-size:.68rem; justify-content:space-between; min-height:110px; text-transform:uppercase; }footer a { color:var(--text); }
.footer-links { align-items:center; display:flex; gap:clamp(24px,4vw,56px); }
.footer-links a { transition:opacity .2s ease; }
.footer-links a:hover { opacity:.62; }
@media(max-width:680px){footer{gap:18px;flex-wrap:wrap;padding:24px 0}.footer-links{gap:16px}}
.detail-hero { min-height:calc(86svh - 92px); padding:10vh 0 8vh; }.detail-meta { align-items:center; display:flex; justify-content:space-between; }.detail-meta>p:last-child { color:var(--muted); font-size:.68rem; }.detail-hero h1 { font:500 clamp(6rem,16vw,16rem)/.73 "Manrope",sans-serif; letter-spacing:-.085em; margin:clamp(70px,11vh,125px) 0 70px; }.detail-hero h1 span { color:transparent; -webkit-text-stroke:1.5px var(--text); }.detail-lead { color:var(--muted); font-size:clamp(1rem,1.7vw,1.5rem); line-height:1.5; margin-left:50%; max-width:520px; }
.detail-body { border-top:1px solid var(--line); }.detail-chapter { display:grid; gap:40px; grid-template-columns:1fr 1fr; padding:clamp(70px,9vw,130px) 0; border-bottom:1px solid var(--line); }.chapter-heading { align-items:baseline; display:flex; gap:28px; }.chapter-heading>span { font-size:.68rem; }.chapter-heading h2 { font:400 clamp(1.8rem,3.5vw,4rem)/1.05 "Manrope",sans-serif; letter-spacing:-.05em; max-width:610px; }.detail-chapter ol { list-style:none; }.detail-chapter li { border-bottom:1px solid var(--line); display:flex; font-size:.84rem; gap:22px; padding:0 0 18px; }.detail-chapter li+li { padding-top:18px; }.detail-chapter li span { color:var(--muted); font-size:.62rem; }.placeholder { color:#60605b; font-size:.76rem; font-style:italic; }.muted h2 { color:var(--muted); }
.next-project { align-items:center; display:flex; justify-content:space-between; padding:clamp(90px,12vw,170px) 0; }.next-project span { color:var(--muted); font-size:.7rem; text-transform:uppercase; }.next-project strong { font:400 clamp(2.7rem,7vw,7rem) "Manrope",sans-serif; letter-spacing:-.06em; }
.reveal { opacity:0; transform:translateY(25px); transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1); }.reveal.visible { opacity:1; transform:none; }
.home-hero .reveal,.detail-hero.reveal { opacity:1; transform:none; }
@media(max-width:900px){.home-hero{grid-template-columns:1fr .7fr}.cards-grid{grid-template-columns:1fr}.work-card{min-height:400px}.card-content h3{font-size:clamp(2.4rem,8vw,4rem)}}
@media(max-width:680px){.site-header,main,footer{width:min(100% - 30px,1440px)}.site-header{height:76px}nav a:not(.contact-link){display:none}.home-hero{display:flex; flex-direction:column; min-height:auto; padding:6vh 0 100px}.hero-copy{width:100%}.hero-copy h1{font-size:clamp(4.6rem,23vw,7rem);margin:60px 0}.hero-bottom{align-items:flex-start;flex-direction:column;gap:30px}.portrait{max-width:none;width:calc(100% - 12px)}.portrait img{height:70svh}.projects,.about{padding:110px 0}.section-heading{align-items:flex-start;gap:30px}.section-count{margin-top:8px}.work-card{min-height:440px}.about-content{margin-left:0}.about-meta{align-items:flex-start;flex-direction:column;gap:35px;margin-top:50px}footer p:nth-child(2){display:none}.detail-hero{min-height:calc(82svh - 76px)}.detail-meta{align-items:flex-start;flex-direction:column;gap:14px}.detail-hero h1{font-size:clamp(5rem,25vw,8rem);margin:85px 0 60px}.detail-lead{margin-left:0}.detail-chapter{grid-template-columns:1fr;padding:70px 0}.next-project{align-items:flex-start;flex-direction:column;gap:30px}.next-project strong{font-size:clamp(2.7rem,14vw,5rem)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}

/* Direction monochrome */
:root { --panel:#111; --panel-hover:#181818; --text:#fff; --muted:#929292; --line:#292929; --accent:#fff; }
.noise { display:none; }
.logo,.hero-copy h1,.section-heading h2,.about h2,.card-content h3,.detail-hero h1,.chapter-heading h2,.next-project strong { font-family:"DM Sans",sans-serif; }
.hero-copy h1 span,.detail-hero h1 span { color:var(--text); -webkit-text-stroke:0; }
.portrait::before { display:none; }
.portrait { margin-right:clamp(12px,2vw,32px); max-width:420px; }
.portrait img { border-radius:20px; filter:contrast(1.04) saturate(.95); }
.work-card { background:linear-gradient(145deg,#141414,#0c0c0c); border-radius:20px; overflow:hidden; }
.work-card::after { background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.07),transparent 36%); }
.work-card:hover { border-color:#555; }
@media(max-width:680px){.portrait{margin-inline:auto;width:calc(100% - 24px)}.portrait img,.work-card{border-radius:16px}}
.project-nav a.active { color:#fff; border-bottom:1px solid #fff; padding-bottom:4px; }
.detail-hero h1 { font-size:clamp(4.5rem,10vw,10rem); line-height:.8; }
@media(max-width:680px){.project-nav{gap:14px}.project-nav a{display:block!important;font-size:.58rem}.detail-hero h1{font-size:clamp(3.2rem,15vw,5rem);line-height:.86}}

/* Fond fourni et header central */
body { background-color:#050505; background-image:url("assets/background.jpg"); background-position:center top; background-repeat:no-repeat; background-size:cover; background-attachment:fixed; }
.scale-page { background:#050505; }
.scale-page::before { background-image:linear-gradient(to bottom,transparent 68%,#050505 100%),url("assets/background.jpg"); background-position:center top; background-repeat:no-repeat; background-size:cover; content:""; height:110svh; inset:0 0 auto; pointer-events:none; position:absolute; z-index:0; }
.scale-page main,.scale-page footer { position:relative; z-index:1; }
.logo { align-items:flex-start; display:flex; flex-direction:column; font-size:1rem; gap:2px; letter-spacing:-.03em; line-height:1; }
.logo small { color:var(--muted); font-size:.56rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase; }
.project-nav { gap:clamp(36px,4.5vw,76px); left:50%; position:absolute; transform:translateX(-50%); white-space:nowrap; }
.project-nav a { color:#fff!important; font-size:clamp(1.05rem,1.25vw,1.3rem); font-weight:500; opacity:.78; }
.project-nav a:hover,.project-nav a.active { opacity:1; }
.linkedin-header-cta { align-items:center; background:#fff; border-radius:999px; color:#080808; display:flex; font-size:.72rem; font-weight:600; gap:9px; padding:10px 14px 10px 16px; position:absolute; right:0; transition:transform .22s ease,background .22s ease; }
.linkedin-header-cta:hover { background:#e8e8e8; color:#080808; transform:translateY(-2px); }
.linkedin-header-cta span { align-items:center; background:#080808; border-radius:50%; color:#fff; display:flex; height:25px; justify-content:center; width:25px; }
@media(max-width:680px){.site-header{align-items:flex-start;flex-direction:column;height:120px;padding:20px 0 17px}.project-nav{bottom:17px;gap:clamp(20px,7vw,34px);left:0;position:absolute;transform:none;width:100%}.project-nav a{font-size:.82rem!important}.logo{font-size:.9rem}}
@media(max-width:680px){.linkedin-header-cta{font-size:.64rem;padding:7px 9px 7px 12px;right:0;top:16px}.linkedin-header-cta span{height:22px;width:22px}}

/* Présentation et identités */
.home-hero { grid-template-columns:1.25fr .62fr; }
.hero-copy h1 { font-size:clamp(4rem,7.2vw,7.4rem); line-height:.82; margin:clamp(32px,5vh,58px) 0 30px; }
.hero-description { color:var(--muted); font-size:.82rem; line-height:1.65; max-width:560px; }
.role-list { display:grid; gap:10px; list-style:none; margin:30px 0; max-width:480px; }
.role-list li { align-items:center; display:flex; gap:14px; min-height:44px; }
.role-list img { border-radius:10px; height:36px; object-fit:cover; width:36px; }
.role-list span { align-items:baseline; display:flex; gap:9px; }
.role-list small { color:var(--muted); font-size:.63rem; text-transform:uppercase; }
.role-list strong { font-size:.8rem; font-weight:500; }
.hero-cta { align-items:center; background:#fff; border-radius:999px; color:#050505; display:inline-flex; font-size:.78rem; font-weight:600; gap:24px; padding:15px 20px 15px 24px; transition:transform .2s ease,background .2s ease; }
.hero-cta span { align-items:center; background:#050505; border-radius:50%; color:#fff; display:flex; height:28px; justify-content:center; width:28px; }
.hero-cta:hover { background:#e7e7e7; transform:translateY(-2px); }
.card-logo { align-self:flex-start; border-radius:16px; height:68px; margin:24px 0 auto; object-fit:cover; position:relative; width:68px; z-index:1; }
.detail-brand { align-items:center; color:var(--muted); display:flex; font-size:.68rem; gap:18px; }
.detail-logo { border-radius:13px; height:52px; object-fit:cover; width:52px; }
@media(max-width:680px){.home-hero{padding-top:3vh}.hero-copy h1{font-size:clamp(3rem,13.8vw,4.4rem);line-height:.87;margin:45px 0 28px}.hero-description{max-width:340px}.role-list{margin:28px 0 30px}.role-list span{align-items:flex-start;flex-direction:column;gap:2px}.hero-cta{margin-bottom:26px}.detail-brand{align-items:flex-end;flex-direction:row-reverse}.detail-logo{height:42px;width:42px}}

/* Hero du projet Scale OVA */
.project-showcase-hero { align-items:center; display:grid; gap:clamp(45px,6vw,95px); grid-template-columns:.82fr 1.18fr; min-height:calc(100svh - 92px); padding:5vh 0 9vh; }
.project-showcase-hero .reveal { opacity:1; transform:none; }
.project-showcase-copy h1 { font:500 clamp(3.6rem,6.3vw,6.5rem)/.83 "DM Sans",sans-serif; letter-spacing:-.075em; margin:clamp(35px,5vh,60px) 0 32px; }
.project-showcase-copy h1 span { color:#fff; }
.showcase-description { color:#fff; font-size:clamp(.98rem,1.15vw,1.1rem); line-height:1.7; max-width:570px; }
.founder-role { align-items:center; display:flex; gap:14px; margin:30px 0; }
.founder-role img { border-radius:12px; height:46px; object-fit:cover; width:46px; }
.founder-role span { display:flex; flex-direction:column; gap:3px; }
.founder-role small { color:var(--muted); font-size:.61rem; letter-spacing:.1em; text-transform:uppercase; }
.founder-role strong { font-size:.82rem; font-weight:500; }
.site-cta { align-items:center; background:#fff; border-radius:999px; color:#050505; display:inline-flex; font-size:.78rem; font-weight:600; gap:24px; padding:15px 20px 15px 24px; transition:transform .2s ease,background .2s ease; }
.site-cta span { align-items:center; background:#050505; border-radius:50%; color:#fff; display:flex; height:28px; justify-content:center; width:28px; }
.site-cta:hover { background:#e7e7e7; transform:translateY(-2px); }
.site-preview { min-width:0; }
.site-preview>img { border-radius:20px; display:block; height:min(64vh,650px); object-fit:cover; object-position:top center; width:100%; }
.site-preview figcaption { color:var(--muted); display:flex; font-size:.6rem; justify-content:space-between; letter-spacing:.08em; padding-top:12px; text-transform:uppercase; }
.amosia-hero-preview>img { border-radius:24px; height:min(72vh,720px); margin-inline:auto; max-width:100%; object-fit:contain; object-position:center; width:auto; }
.amosia-photo-carousel .carousel-slide img { cursor:zoom-in; height:min(62vw,720px); }
.amosia-design-carousel .carousel-slide img { cursor:zoom-in; height:min(58vw,650px); }
.amosia-editorial-visual img { cursor:zoom-in; max-height:760px; }
.document-cta { align-items:center; background:#fff; border-radius:16px; color:#050505; display:flex; justify-content:space-between; margin-top:18px; padding:18px 20px; transition:transform .22s ease; }
.document-cta:hover { transform:translateY(-3px); }
.document-cta>span { display:flex; flex-direction:column; gap:5px; }
.document-cta small { color:#686868; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; }
.document-cta strong { font-size:.86rem; font-weight:600; }
.document-cta b { align-items:center; background:#050505; border-radius:50%; color:#fff; display:flex; font-size:.8rem; height:32px; justify-content:center; width:32px; }
.instagram-profile-preview { background:#111; border-radius:22px; overflow:hidden; padding:22px; }
.instagram-profile-head { align-items:center; display:flex; gap:13px; }
.instagram-profile-logo { border-radius:50%; height:48px; object-fit:cover; width:48px; }
.instagram-profile-head>div { display:flex; flex-direction:column; gap:3px; }
.instagram-profile-head strong { font-size:.86rem; font-weight:600; }
.instagram-profile-head span { color:var(--muted); font-size:.67rem; }
.instagram-brand-icon { height:28px; margin-left:auto; width:28px; }
.instagram-profile-stats { display:grid; gap:10px; grid-template-columns:repeat(3,1fr); padding:22px 0; }
.instagram-profile-stats span { color:var(--muted); display:flex; flex-direction:column; font-size:.58rem; gap:4px; line-height:1.35; }
.instagram-profile-stats strong { color:#fff; font-size:.65rem; font-weight:500; }
.instagram-post-grid { display:grid; gap:5px; grid-template-columns:repeat(3,1fr); }
.instagram-post-grid img { aspect-ratio:1; border-radius:8px; display:block; object-fit:cover; width:100%; }
.starnaque-hero-preview>img { aspect-ratio:4/3; height:auto; object-fit:cover; }
.starnaque-role img { background:#fff; border-radius:12px; height:46px; object-fit:contain; padding:9px; width:112px; }
.starnaque-store-visual img { cursor:zoom-in; }
.starnaque-square-carousel .carousel-slide img { aspect-ratio:1/1; cursor:zoom-in; height:auto; max-height:720px; object-fit:contain; }
.starnaque-document-carousel .carousel-slide img { background:#fff; cursor:zoom-in; height:min(64vw,760px); object-fit:contain; }
.process-media-stack>.starnaque-document-carousel { position:relative; top:auto; }
.process-media-stack>.starnaque-document-carousel+.document-link { margin-top:28px; }
.starnaque-retail-visual img { aspect-ratio:1/1; cursor:zoom-in; object-fit:cover; }
.starnaque-retail-stack .starnaque-retail-visual { position:relative; top:auto; }
.starnaque-retail-stack .document-link { margin-top:28px; }
.starnaque-store-stack .starnaque-store-visual { position:relative; top:auto; }
.starnaque-store-stack .document-link { margin-top:28px; }
.document-link { align-items:center; background:#fff; border-radius:16px; color:#080808; display:flex; font-size:.82rem; font-weight:600; justify-content:space-between; margin-top:16px; padding:18px 20px; transition:transform .22s ease; }
.document-link:hover { transform:translateY(-3px); }
.document-link span { align-items:center; background:#090909; border-radius:50%; color:#fff; display:flex; height:30px; justify-content:center; width:30px; }
.starnaque-site-link { background:#ed1118; color:#fff; }
.starnaque-site-link span { background:#fff; color:#090909; }
.chapter-pdf-cta { align-items:center; background:#fff; border-radius:18px; color:#080808; display:flex; justify-content:space-between; margin:18px 0 0; padding:20px 24px; transition:transform .22s ease; }
.chapter-pdf-cta:hover { transform:translateY(-3px); }
.chapter-pdf-cta>span { display:flex; flex-direction:column; gap:5px; }
.chapter-pdf-cta small { color:#686868; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; }
.chapter-pdf-cta strong { font-size:clamp(1rem,1.6vw,1.35rem); font-weight:600; letter-spacing:-.025em; }
.chapter-pdf-cta b { align-items:center; background:#080808; border-radius:50%; color:#fff; display:flex; font-size:1rem; height:38px; justify-content:center; width:38px; }
.chapter-panel.is-collapsed>.chapter-pdf-cta { display:none; }
.store-link-card { align-items:flex-start; align-self:start; background:#111; border-radius:22px; display:flex; flex-direction:column; min-height:480px; padding:clamp(32px,5vw,58px); position:sticky; top:24px; }
.store-link-card>img { background:#fff; border-radius:15px; max-width:220px; padding:18px; width:70%; }
.store-link-card>span { color:var(--muted); font-size:.62rem; letter-spacing:.1em; margin-top:auto; text-transform:uppercase; }
.store-link-card>strong { font-size:clamp(1.15rem,2vw,1.8rem); font-weight:500; letter-spacing:-.035em; margin:12px 0 26px; overflow-wrap:anywhere; }
@media(max-width:850px){.store-link-card{min-height:360px;position:relative;top:auto}}
@media(max-width:800px){.project-showcase-hero{grid-template-columns:1fr;padding-top:7vh}.project-showcase-copy h1{font-size:clamp(3.2rem,13vw,5rem)}.site-preview>img{border-radius:16px;height:auto}.project-showcase-hero .site-cta{margin-bottom:16px}}
@media(max-width:800px){.amosia-hero-preview>img{border-radius:18px;height:auto;object-fit:contain;object-position:center;width:100%}}
@media(max-width:850px){.amosia-photo-carousel .carousel-slide img,.amosia-design-carousel .carousel-slide img{height:auto;max-height:none}}

/* Étude de cas UI/UX */
.case-study-content { background:rgba(5,5,5,.58); border-radius:32px; contain:layout paint; margin-top:clamp(65px,8vw,115px); padding:18px; }
.case-study-content+.case-study-content { margin-top:22px; }
.chapter-panel.is-collapsed>.process-section,.chapter-panel.is-collapsed .study-intro-copy { display:none; }
.chapter-panel.is-collapsed .study-intro { margin-bottom:0; }
.chapter-panel.is-collapsed .study-intro h2 { margin-bottom:0; }
.back-to-chapters { align-items:center; background:#fff; border-radius:50%; bottom:22px; color:#050505; display:flex; font-size:1.2rem; height:46px; justify-content:center; opacity:0; pointer-events:none; position:fixed; right:22px; transform:translateY(12px); transition:opacity .22s ease,transform .22s ease; width:46px; z-index:80; }
.back-to-chapters.visible { opacity:1; pointer-events:auto; transform:none; }
.back-to-chapters:hover { transform:translateY(-3px); }
.case-study-content .reveal,.upcoming-chapters .reveal { opacity:1; transform:none; }
.study-intro { background:rgba(255,255,255,.035); border-radius:24px; cursor:pointer; display:grid; gap:clamp(35px,7vw,100px); grid-template-columns:minmax(105px,.22fr) 1fr; margin-bottom:18px; overflow:hidden; padding:clamp(48px,6vw,88px); position:relative; transition:background .22s ease; }
.study-intro:hover { background:rgba(255,255,255,.06); }
.study-intro:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.study-intro>div { padding-right:clamp(38px,5vw,76px); }
.chapter-toggle-indicator { align-items:center; background:#fff; border-radius:50%; color:#050505; display:flex; font-size:1.5rem; height:48px; justify-content:center; position:absolute; right:clamp(24px,3.5vw,54px); top:clamp(24px,3.5vw,54px); width:48px; }
.study-roman { color:#fff; display:flex; flex-direction:column; font-size:clamp(4.8rem,8vw,8.5rem); font-weight:500; letter-spacing:-.08em; line-height:.76; }
.study-roman span { color:var(--muted); font-size:.7rem; font-weight:600; letter-spacing:.15em; margin-bottom:20px; text-transform:uppercase; }
.study-intro h2 { font:400 clamp(3rem,6.5vw,7rem)/.95 "DM Sans",sans-serif; letter-spacing:-.065em; margin:22px 0 46px; max-width:900px; }
.study-intro-copy { color:#fff; display:grid; font-size:clamp(1rem,1.35vw,1.2rem); gap:32px; grid-template-columns:1fr 1fr; line-height:1.68; max-width:1080px; }
.process-section { align-items:start; background:rgba(0,0,0,.22); border-radius:20px; display:grid; gap:clamp(45px,6vw,95px); grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr); margin-top:18px; padding:clamp(52px,6vw,86px); }
.process-copy { max-width:580px; }
.process-number { color:#fff; font-size:clamp(.84rem,1vw,1rem); font-weight:600; letter-spacing:.11em; margin-bottom:30px; }
.process-copy h3 { font:400 clamp(2rem,3.6vw,4rem)/1.02 "DM Sans",sans-serif; letter-spacing:-.055em; margin-bottom:38px; }
.process-copy>p:not(.process-number) { color:#fff; font-size:clamp(1rem,1.12vw,1.1rem); line-height:1.72; }
.process-copy>p+p { margin-top:22px; }
.strategy-copy { max-width:720px; }
.strategy-copy>p { color:#fff; font-size:clamp(1rem,1.12vw,1.1rem); line-height:1.72; }
.strategy-copy>p+p { margin-top:22px; }
.study-intro-copy strong,.process-copy strong,.strategy-copy strong { font-weight:600; }
.notion-resource-card { background:#f4f4f2; border-radius:20px; color:#111; display:grid; grid-template-columns:.72fr 1fr; margin-top:42px; overflow:hidden; transition:transform .25s ease; }
.notion-resource-card:hover { transform:translateY(-4px); }
.process-media-card { align-self:start; background:#111; color:#fff; display:flex; flex-direction:column; margin-top:0; min-height:520px; position:sticky; top:24px; }
.process-media-card .notion-preview { flex:1; min-height:330px; }
.process-media-card .notion-preview img { height:72px; width:72px; }
.process-media-card .notion-preview>div { width:min(72%,240px); }
.process-media-card .notion-card-copy { background:#111; min-height:205px; }
.process-media-card .notion-card-copy>span { color:#898989; }
.social-media-cta { align-items:center; background:linear-gradient(100deg,#feda75 0%,#fa7e1e 24%,#d62976 55%,#962fbf 78%,#4f5bd5 100%); border-radius:16px; color:#fff; display:flex; font-size:.82rem; font-weight:600; gap:13px; justify-content:flex-start; margin-top:18px; padding:13px 14px; transition:transform .22s ease; width:100%; }
.social-media-cta:hover { transform:translateY(-3px); }
.social-media-cta img { height:32px; width:32px; }
.social-media-cta span { align-items:center; background:#fff; border-radius:50%; color:#151515; display:flex; height:30px; justify-content:center; margin-left:auto; width:30px; }
.notion-preview { align-items:center; background:#fff; display:flex; flex-direction:column; gap:22px; justify-content:center; min-height:250px; padding:34px; }
.notion-preview img { border-radius:12px; height:58px; object-fit:cover; width:58px; }
.notion-preview>div { display:grid; gap:9px; width:min(100%,180px); }
.notion-preview span { background:#d8d8d5; border-radius:999px; display:block; height:7px; }
.notion-preview span:nth-child(2) { width:82%; }
.notion-preview span:nth-child(3) { width:94%; }
.notion-preview span:nth-child(4) { width:64%; }
.notion-card-copy { display:flex; flex-direction:column; justify-content:center; padding:34px; }
.notion-card-copy>span { color:#686864; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; }
.notion-card-copy strong { font-size:clamp(1.3rem,2.1vw,2rem); letter-spacing:-.04em; line-height:1.08; margin:18px 0 35px; }
.notion-card-copy small { font-size:.76rem; font-weight:600; }
.competency,.summary-competency { background:#1b1b1b; border:0; border-radius:16px; display:flex; flex-direction:column; margin-top:38px; padding:20px 22px; }
.competency span,.summary-competency span { color:var(--muted); font-size:.59rem; letter-spacing:.12em; text-transform:uppercase; }
.competency strong,.summary-competency strong { font-size:.9rem; font-weight:500; margin:8px 0 5px; }
.competency p,.summary-competency p { color:#fff; font-size:.84rem; line-height:1.6; max-width:460px; }
.case-visual,.case-carousel { min-width:0; position:sticky; top:24px; }
.case-visual img { background:transparent; border-radius:20px; display:block; max-height:720px; object-fit:contain; width:100%; }
.case-visual figcaption { color:var(--muted); display:flex; font-size:.59rem; justify-content:space-between; letter-spacing:.08em; padding-top:12px; text-transform:uppercase; }
.prototype-visual { justify-self:end; max-width:560px; width:100%; }
.prototype-grid { display:grid; gap:14px; }
.lightbox-trigger { background:transparent; border:0; cursor:zoom-in; display:block; padding:0; width:100%; }
.prototype-visual img { aspect-ratio:16/9; max-height:none; object-fit:cover; }
.case-carousel { overflow:hidden; }
.carousel-viewport { display:flex; overflow:hidden; scroll-behavior:smooth; scroll-snap-type:x mandatory; }
.carousel-slide { flex:0 0 100%; min-width:0; scroll-snap-align:start; }
.carousel-slide img { background:transparent; border-radius:20px; display:block; height:min(55vw,620px); object-fit:contain; width:100%; }
.interface-carousel .carousel-slide img { background:transparent; height:auto; object-fit:initial; }
.content-carousel { margin-top:42px; position:relative; top:auto; }
.content-carousel .carousel-slide img { height:auto; object-fit:initial; }
.content-carousel.process-media { align-self:start; margin-top:0; position:sticky; top:24px; }
.process-media-stack { align-self:start; min-width:0; position:sticky; top:24px; }
.process-media-stack .content-carousel { margin-top:0; position:relative; top:auto; }
.carousel-slide figcaption { color:var(--muted); font-size:.61rem; letter-spacing:.08em; padding-top:12px; text-transform:uppercase; }
.carousel-controls { align-items:center; display:flex; justify-content:space-between; padding-top:18px; }
.carousel-controls>p { color:var(--muted); font-size:.65rem; letter-spacing:.1em; }
.carousel-controls>div { display:flex; gap:8px; }
.carousel-controls button { align-items:center; background:transparent; border:1px solid #3a3a3a; border-radius:50%; color:#fff; cursor:pointer; display:flex; font:400 1rem "DM Sans",sans-serif; height:42px; justify-content:center; transition:.2s ease; width:42px; }
.carousel-controls button:hover { background:#fff; color:#050505; }
.process-summary { grid-template-columns:1.25fr .75fr; }
.summary-competency { margin:0; padding:22px 24px; }
.process-summary .summary-competency { align-self:end; }
.summary-competencies { align-self:end; display:grid; gap:12px; }
.summary-competencies .summary-competency { margin:0; }
.summary-competency strong { font-size:clamp(1.25rem,2vw,2rem); letter-spacing:-.035em; line-height:1.15; margin:16px 0; }
.chapter-status { align-items:center; align-self:start; background:#fff; border-radius:999px; color:#050505; display:inline-flex; font-size:.72rem; font-weight:600; justify-self:start; letter-spacing:.08em; padding:12px 18px; text-transform:uppercase; }
.global-project-summary { background:rgba(10,10,10,.86); border-radius:32px; margin-top:clamp(70px,9vw,130px); padding:clamp(48px,7vw,100px); }
.global-project-summary h2 { font:400 clamp(3rem,6vw,6.5rem)/.94 "DM Sans",sans-serif; letter-spacing:-.065em; margin-top:24px; max-width:980px; }
.global-summary-grid { align-items:start; display:grid; gap:clamp(55px,8vw,120px); grid-template-columns:.85fr 1.15fr; margin-top:clamp(60px,8vw,105px); }
.global-summary-copy { display:grid; gap:24px; }
.global-summary-copy p { color:#fff; font-size:clamp(1rem,1.25vw,1.16rem); line-height:1.72; }
.global-skills>p { color:var(--muted); font-size:.64rem; letter-spacing:.12em; margin-bottom:18px; text-transform:uppercase; }
.global-skills article { background:#171717; border-radius:18px; display:grid; gap:22px; grid-template-columns:34px 1fr; padding:24px; }
.global-skills article+article { margin-top:12px; }
.global-skills article>span { color:var(--muted); font-size:.68rem; letter-spacing:.1em; padding-top:3px; }
.global-skills article strong { display:block; font-size:clamp(1.05rem,1.65vw,1.45rem); font-weight:500; letter-spacing:-.025em; line-height:1.22; }
.global-skills article p { color:#b5b5b5; font-size:.82rem; line-height:1.65; margin-top:12px; }
@media(max-width:850px){.study-intro{grid-template-columns:1fr}.study-roman{padding:0}.study-intro-copy{grid-template-columns:1fr}.process-section,.process-summary,.global-summary-grid{grid-template-columns:1fr}.case-visual,.case-carousel,.process-media-card,.content-carousel.process-media,.process-media-stack{position:relative;top:auto}.carousel-slide img{height:auto;min-height:0}.process-copy{max-width:none}.summary-competency{margin-top:15px}}
@media(max-width:680px){.case-study-content{border-radius:22px;padding:10px}.study-intro{border-radius:16px;padding:34px 26px}.study-roman{font-size:4.6rem}.study-intro h2{font-size:clamp(2.7rem,14vw,4rem);margin-bottom:40px;padding-right:38px}.chapter-panel.is-collapsed .study-intro h2{margin-bottom:0}.chapter-toggle-indicator{height:38px;right:20px;top:20px;width:38px}.process-copy h3{font-size:clamp(2.1rem,10vw,3rem)}.case-visual img,.carousel-slide img{border-radius:16px}.process-section{border-radius:16px;padding:46px 24px}.carousel-controls button{height:38px;width:38px}.notion-resource-card{grid-template-columns:1fr}.process-media-card{min-height:0}.process-media-card .notion-preview,.notion-preview{min-height:210px}.process-media-card .notion-card-copy{min-height:0}.notion-card-copy{padding:28px}.global-project-summary{border-radius:22px;padding:42px 26px}.global-skills article{grid-template-columns:1fr}}
.lightbox { align-items:center; background:rgba(0,0,0,.92); display:none; inset:0; justify-content:center; padding:clamp(18px,4vw,60px); position:fixed; z-index:1000; }
.lightbox.open { display:flex; }
.lightbox>img { border-radius:18px; max-height:88vh; max-width:92vw; object-fit:contain; }
.lightbox-close { align-items:center; background:#fff; border:0; border-radius:50%; color:#050505; cursor:pointer; display:flex; font:400 1.8rem/1 "DM Sans",sans-serif; height:44px; justify-content:center; position:absolute; right:clamp(18px,3vw,44px); top:clamp(18px,3vw,44px); width:44px; }
body.lightbox-open { overflow:hidden; }
@media(max-width:850px){.prototype-visual{justify-self:stretch;max-width:none}}