:root{--ink:#0b0b0d;--paper:#f3efe7;--red:#d83a3a;--gold:#c6a96b;--muted:#aaa6a0}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:#f6f2eb;font-family:"DM Sans",sans-serif;font-size:16px}
a{color:inherit;text-decoration:none}
.nav{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;position:absolute;z-index:10;width:100%;border-bottom:1px solid #ffffff2b}
.wordmark{font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.wordmark span{display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid var(--gold);border-radius:50%;margin-right:11px;color:var(--gold);font-family:"Playfair Display"}
.nav nav{display:flex;gap:2rem;font-size:.83rem}
.nav nav a{opacity:.75;transition:.2s}
.nav nav a:hover{opacity:1}
.nav-contact{text-transform:uppercase;font-size:.75rem;letter-spacing:.15em;border-bottom:1px solid var(--red);padding-bottom:5px}
.hero{height:100svh;min-height:720px;position:relative;overflow:hidden;display:flex;align-items:center}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;filter:saturate(.86) contrast(1.04)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#08080bd9 0%,#08080b7c 43%,transparent 72%),linear-gradient(0deg,#09090be6 0%,transparent 28%)}
.hero-copy{position:relative;z-index:2;margin-left:8vw;margin-top:5vh}
.eyebrow,.kicker{text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;color:var(--gold);font-weight:600}
.hero h1,.section h2,.contact h2{font-family:"Playfair Display",serif;font-size:clamp(4.5rem,10vw,9rem);line-height:.75;margin:.22em 0 .3em;letter-spacing:-.045em}
.hero h1 em,.section h2 em,.quote em,.contact h2 em{font-weight:500;color:var(--red)}
.lead{font-size:1.18rem;line-height:1.6;color:#e9e4dc}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600;transition:.25s}
.button.primary{background:var(--red);color:white}
.button.primary:hover{background:#ee4a4a;transform:translateY(-2px)}
.button.ghost{border:1px solid #ffffff64;background:#0b0b0d33}
.button.ghost:hover{border-color:white}
.button.brand-link{border:1px solid var(--gold);color:var(--gold);background:#0b0b0d70}
.button.brand-link:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px)}
.hero-index{position:absolute;z-index:2;bottom:35px;right:4vw;display:flex;align-items:center;gap:14px;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase}
.hero-index .line{width:65px;height:1px;background:var(--gold)}
.section{padding:9rem 8vw}
.intro{background:var(--paper);color:var(--ink);display:grid;grid-template-columns:1fr 1fr;gap:8vw}
.section h2{font-size:clamp(3rem,5.8vw,6rem);line-height:.94;margin:.25em 0}
.intro-copy{padding-top:2.8rem}
.intro-copy .big{font-family:"Playfair Display";font-size:1.75rem;line-height:1.4}
.intro-copy>p:last-of-type{color:#56534f;line-height:1.8;max-width:610px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #c9c1b4;margin-top:3rem;padding-top:2rem}
.facts div{display:flex;flex-direction:column}
.facts strong{font-family:"Playfair Display";font-size:2.7rem;color:var(--red)}
.facts span{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#6a665f}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}
.feature-image{margin:0;height:790px;overflow:hidden;position:relative}
.feature-image:before{content:"";position:absolute;inset:18px;border:1px solid #ffffff45;z-index:2}
.feature-image img{width:100%;height:100%;object-fit:cover}
.feature-copy h2{font-size:clamp(3rem,5vw,5.5rem)}
.acts{margin-top:3.2rem}
.acts>div{display:grid;grid-template-columns:42px 1fr;column-gap:14px;border-top:1px solid #ffffff24;padding:1.4rem 0}
.acts span{color:var(--red);font-size:.72rem}
.acts h3{margin:0;font-family:"Playfair Display";font-size:1.6rem;font-weight:500}
.acts p{grid-column:2;color:var(--muted);line-height:1.55;margin:.5rem 0 0}
.career{background:#151417}
.career-head{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid #ffffff24;padding-bottom:3rem}
.career-head h2{margin:0}
.engagements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:4rem 0 5.5rem}
.engagement{min-height:500px;border:1px solid #ffffff20;background:#0d0d10;display:grid;grid-template-rows:auto 1fr auto;padding:1.4rem;position:relative;overflow:hidden}
.engagement-current{border-color:#c6a96b99;box-shadow:inset 0 0 0 1px #c6a96b1c}
.engagement-meta{display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:#8f8a83;position:relative;z-index:2}
.engagement-status{display:flex;align-items:center;gap:.65rem;color:#eee9e1}
.engagement-status i{display:block;width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px #d83a3a1c}
.engagement-next .engagement-status i{background:var(--gold);box-shadow:none}
.engagement-brand{display:grid;place-items:center;min-height:285px;margin:1.2rem 0;position:relative}
.engagement-brand:after{content:"";position:absolute;inset:10%;border:1px solid #ffffff0e;pointer-events:none}
.engagement-brand img{display:block;max-width:82%;max-height:230px;object-fit:contain;position:relative;z-index:1}
.knie-brand{background:radial-gradient(circle at 50% 45%,#17213a 0,#0b0c12 64%)}
.offenburg-brand{background:linear-gradient(135deg,#a00754,#dd187b 52%,#67123e)}
.offenburg-brand img{max-width:90%}
.engagement-details{display:flex;justify-content:space-between;align-items:end;border-top:1px solid #ffffff18;padding-top:1.3rem;gap:1rem}
.engagement-details div{display:flex;flex-direction:column;gap:.35rem}
.engagement-details small{text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;color:var(--gold)}
.engagement-details strong{font-family:"Playfair Display",serif;font-size:1.42rem;font-weight:500;line-height:1.25}
.engagement-details>span{text-align:right;color:#8f8a83;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;line-height:1.5}
.timeline article{display:grid;grid-template-columns:26% 1fr;padding:2.5rem 0;border-bottom:1px solid #ffffff24}
.year{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--gold)}
.timeline h3{font-family:"Playfair Display";font-size:2.1rem;margin:0 0 .6rem;font-weight:500}
.timeline p{color:var(--muted);line-height:1.6;max-width:700px;margin:0}
.quote{min-height:540px;display:grid;place-items:center;text-align:center;padding:5rem;background:linear-gradient(#0a0a0ce8,#0a0a0cf2),url("michael-stage.jpg") center/cover}
.quote p{font-family:"Playfair Display";font-size:clamp(2.2rem,4.5vw,4.6rem);line-height:1.2;margin:0}
.logos{background:var(--paper);color:var(--ink)}
.logo-head{display:grid;grid-template-columns:1.3fr 1fr;align-items:end}
.logo-head .kicker{grid-column:1/-1}
.logo-head>p:last-child{color:#6c6861;max-width:370px;justify-self:end;line-height:1.6}
.logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:4rem}
.logo-card{min-height:430px;background:#e8e2d8;border:1px solid #d4ccbe;padding:1.6rem;display:flex;flex-direction:column;transition:.3s}
.logo-card:hover{transform:translateY(-5px);border-color:var(--red)}
.logo-card.selected{background:#111114;color:white}
.option{text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;color:#8d867c}
.logo-card>div{flex:1;display:grid;place-items:center;align-content:center}
.logo-card p{font-size:.86rem;line-height:1.6;color:#777168;border-top:1px solid #cec5b6;padding-top:1rem}
.selected p{color:#aaa6a0;border-color:#ffffff22}
.logo-one b{font-family:"Playfair Display";font-size:6rem;font-weight:500;letter-spacing:-.12em}
.logo-one i{width:92px;height:15px;border-bottom:2px solid var(--red);border-radius:50%;margin-top:-17px}
.logo-one small,.logo-two small{letter-spacing:.3em;font-size:.55rem;margin-top:18px}
.logo-two b{font-family:"Playfair Display";font-size:6rem;font-weight:500;letter-spacing:-.08em}
.logo-two b span{color:var(--red);font-size:.75em;margin:0 .04em}
.logo-three{position:relative}
.logo-three:before{content:"";width:150px;height:150px;border:1px solid var(--red);border-radius:49% 51% 48% 52%;position:absolute}
.logo-three b{font-family:"Playfair Display";font-size:4.2rem;z-index:1}
.logo-three span{font-size:.5rem;letter-spacing:.22em;z-index:1}
.contact{text-align:center;min-height:620px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.contact h2{font-size:clamp(3rem,6vw,6.7rem);line-height:.98}
.contact-actions{display:flex;align-items:center;gap:2rem;margin-top:2rem}
.instagram{border-bottom:1px solid var(--gold);padding-bottom:6px;font-size:.9rem}
footer{border-top:1px solid #ffffff20;display:flex;justify-content:space-between;padding:2rem 4vw;color:#858186;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em}
@media(max-width:850px){.nav nav{display:none}
.nav{height:70px}
.hero{min-height:680px}
.hero-copy{margin-left:6vw;margin-top:15vh}
.hero h1{font-size:clamp(4.3rem,20vw,7rem)}
.hero>img{object-position:61% center}
.hero-shade{background:linear-gradient(90deg,#08080bda 0%,#08080b84 67%,#08080b28),linear-gradient(0deg,#09090bf5 0%,transparent 40%)}
.section{padding:6rem 6vw}
.intro,.feature{grid-template-columns:1fr}
.intro{gap:1rem}
.facts{gap:12px}
.facts strong{font-size:2.2rem}
.feature-image{height:600px}
.career-head{display:block}
.engagements{grid-template-columns:1fr;margin:3rem 0 4rem}
.engagement{min-height:430px}
.engagement-brand{min-height:230px}
.engagement-details{align-items:flex-start;flex-direction:column}
.engagement-details>span{text-align:left}
.timeline article{grid-template-columns:1fr;gap:1rem}
.logo-head{display:block}
.logo-head>p:last-child{justify-self:auto}
.logo-grid{grid-template-columns:1fr}
.logo-card{min-height:380px}
.contact-actions{flex-direction:column;gap:1.4rem}
.contact .button{font-size:.67rem;padding:0 14px}
footer{gap:1rem;flex-direction:column;text-align:center}
.quote{padding:3rem 1.5rem;min-height:430px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.button,.logo-card{transition:none}
}

/* Michael's current visual portfolio */
.hero>img{object-position:center 37%;filter:saturate(.92) contrast(1.04)}
.feature-image img{object-position:center 20%}
.gallery{background:#0f0f12;padding-top:7rem}
.gallery-head{display:grid;grid-template-columns:1.2fr .8fr;align-items:end;gap:5vw;margin-bottom:3.5rem}
.gallery-head h2{margin-bottom:0}
.gallery-head>p{color:var(--muted);line-height:1.7;max-width:520px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:340px;gap:14px}
.gallery-grid figure{margin:0;position:relative;overflow:hidden;background:#1b1a1d}
.gallery-grid .g-tall{grid-row:span 2}
.gallery-grid .g-wide{grid-column:span 2}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease,filter .6s ease}
.gallery-grid figure:hover img{transform:scale(1.025);filter:saturate(1.1)}
.gallery-grid figcaption{position:absolute;left:18px;bottom:16px;padding:8px 11px;background:#08080bc7;backdrop-filter:blur(8px);font-size:.66rem;text-transform:uppercase;letter-spacing:.13em;color:#eee9e1}
.award-photo{margin:5rem 0 0;display:grid;grid-template-columns:1.4fr .6fr;background:#0c0c0e;align-items:stretch}
.award-photo img{width:100%;height:560px;object-fit:cover}
.award-photo figcaption{display:flex;flex-direction:column;justify-content:end;padding:3rem;border-left:1px solid #ffffff20}
.award-photo figcaption span{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold);line-height:1.6}
.award-photo figcaption strong{font-family:"Playfair Display";font-size:2.8rem;font-weight:500;margin-top:.8rem}
.quote{background:linear-gradient(#0a0a0cbe,#0a0a0cdb),url("michael-singing-landscape.jpg") center 35%/cover}
@media(max-width:850px){.hero>img{object-position:57% center}.gallery-head{grid-template-columns:1fr}.gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:300px}.gallery-grid .g-wide{grid-column:span 2}.award-photo{grid-template-columns:1fr}.award-photo img{height:420px}.award-photo figcaption{border-left:0;border-top:1px solid #ffffff20;padding:2rem}}
@media(max-width:560px){.gallery-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.gallery-grid figure,.gallery-grid .g-tall,.gallery-grid .g-wide{min-width:82vw;height:520px;scroll-snap-align:start}.gallery-grid .g-wide img{object-position:60% center}.award-photo img{height:330px}}

/* Languages and video portfolio */
.nav-tools{display:flex;align-items:center;gap:1.2rem}
.languages{display:flex;align-items:center;border:1px solid #ffffff38;border-radius:999px;padding:3px;background:#08080b55;backdrop-filter:blur(10px)}
.languages button{border:0;background:transparent;color:#fff;font:600 .68rem "DM Sans",sans-serif;letter-spacing:.08em;min-width:35px;height:30px;border-radius:999px;cursor:pointer;opacity:.58;transition:.2s}
.languages button:hover{opacity:1}
.languages button[aria-pressed="true"]{background:#fff;color:#111;opacity:1}
.showreel{background:#161519}
.showreel-head{display:grid;grid-template-columns:1.2fr .8fr;align-items:end;gap:5vw;margin-bottom:3.5rem}
.showreel-head h2{margin-bottom:0}
.showreel-head>p{max-width:530px;color:var(--muted);line-height:1.7}
.reel-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.45fr);gap:18px}
.video-frame{position:relative;aspect-ratio:16/9;background:#050506;overflow:hidden}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.reel-list{display:flex;flex-direction:column;gap:10px}
.reel-item{flex:1;display:grid;grid-template-columns:42px 1fr;align-items:center;text-align:left;border:1px solid #ffffff18;background:#0d0d10;color:#fff;padding:1.25rem;cursor:pointer;transition:border-color .25s,background .25s,transform .25s}
.reel-item:hover{transform:translateX(-4px);border-color:#ffffff42}
.reel-item.active{background:#eee9e1;color:#111;border-color:#eee9e1}
.reel-item>span{font-family:"Playfair Display",serif;color:var(--gold);font-size:1.15rem}
.reel-item div{display:flex;flex-direction:column;gap:.35rem}
.reel-item strong{font-size:.92rem;font-weight:600}
.reel-item small{font-size:.72rem;line-height:1.4;opacity:.62}
@media(max-width:1000px){.nav nav{gap:1.1rem}.nav-tools{gap:.65rem}.nav-contact{display:none}.reel-layout{grid-template-columns:1fr}.reel-list{display:grid;grid-template-columns:repeat(3,1fr)}.reel-item{min-height:110px}.reel-item:hover{transform:translateY(-3px)}}
@media(max-width:850px){.showreel-head{grid-template-columns:1fr}.nav-tools{margin-left:auto}.reel-list{grid-template-columns:1fr}.reel-item{min-height:86px}.languages button{min-width:31px}}
@media(max-width:560px){.wordmark{font-size:.72rem}.wordmark span{width:32px;height:32px;margin-right:7px}.showreel{padding-left:0;padding-right:0}.showreel-head{padding:0 6vw}.reel-list{padding:0 6vw}.languages button{min-width:29px;height:28px;font-size:.62rem}}

/* About page */
.mobile-about{display:none;text-transform:uppercase;font-size:.66rem;letter-spacing:.12em;border-bottom:1px solid var(--red);padding-bottom:4px}
.nav nav a.active{opacity:1;color:var(--gold)}
.about-main{background:var(--ink)}
.about-hero{min-height:100svh;display:grid;grid-template-columns:48% 52%;position:relative;background:#121114}
.about-portrait{min-height:760px;overflow:hidden}
.about-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:saturate(.9) contrast(1.03)}
.about-hero-copy{display:flex;flex-direction:column;justify-content:center;padding:9rem 7vw 6rem}
.about-hero h1{font-family:"Playfair Display",serif;font-size:clamp(3.8rem,6.5vw,7rem);line-height:.92;letter-spacing:-.045em;margin:.3em 0}
.about-hero h1 em{font-weight:500;color:var(--red)}
.about-lead{max-width:560px;color:#d6d0c7;font-family:"Playfair Display",serif;font-size:1.55rem;line-height:1.5}
.about-story{background:var(--paper);color:var(--ink);display:grid;grid-template-columns:1fr 1fr;gap:8vw}
.about-story-title h2{font-size:clamp(3rem,5vw,5.5rem)}
.about-copy{padding-top:3rem}
.about-copy>p{font-size:1.08rem;line-height:1.8;color:#4d4a46;margin:0 0 1.5rem}
.about-copy blockquote{font-family:"Playfair Display",serif;font-size:clamp(1.8rem,3vw,3rem);line-height:1.28;margin:3.5rem 0 0;padding-top:2rem;border-top:1px solid #c9c1b4;color:var(--ink)}
.about-credits{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;background:#111114}
.about-credits-photo{height:680px;overflow:hidden}
.about-credits-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.about-credits-copy ul{list-style:none;margin:2.5rem 0 3rem;padding:0;border-top:1px solid #ffffff24}
.about-credits-copy li{padding:1.25rem 0;border-bottom:1px solid #ffffff24;color:#d6d0c7;font-size:1rem;line-height:1.5}
@media(max-width:1000px){.about-hero{grid-template-columns:44% 56%}.about-hero-copy{padding-left:6vw;padding-right:5vw}}
@media(max-width:850px){.mobile-about{display:block}.about-hero{grid-template-columns:1fr;min-height:auto}.about-portrait{height:64svh;min-height:520px}.about-hero-copy{padding:4.5rem 6vw 5rem}.about-hero h1{font-size:clamp(3.4rem,14vw,5.8rem)}.about-story,.about-credits{grid-template-columns:1fr}.about-story{gap:0}.about-copy{padding-top:1rem}.about-credits-photo{height:560px}.about-credits{gap:3rem}.about-page .nav-tools{gap:.55rem}}
@media(max-width:560px){.mobile-about{font-size:.58rem}.about-page .wordmark{font-size:0}.about-page .wordmark span{font-size:.72rem;margin-right:0}.about-portrait{height:58svh;min-height:460px}.about-credits-photo{height:480px}}
