:root{
--side: 86px;
--side-m: 20px;
--black: #000;
--white: #fff;
--muted: #cfcfcf;
}
.freeman-body{ background:#000; margin:0; }
#freeman-page, #freeman-page * { box-sizing:border-box; }
#freeman-page img { display:block; max-width:100%; height:auto; }
#freeman-page h1, #freeman-page h2, #freeman-page h3, #freeman-page h4, #freeman-page h5, #freeman-page h6{
font-family:"Swear Display", serif !important; font-weight:400; color:#fff;
}
#freeman-page p, #freeman-page .copy, #freeman-page li, #freeman-page .h-head{
font-family:"Swear Text", serif !important; font-weight:400; color:#fff;
}
#freeman-page .is-italic{ font-style:italic; } #freeman-page .hero{
position:relative;
width:100vw;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
background:#000;
color:#fff;
}
#freeman-page .hero-bg{
position:relative;
width:100%;
height:76vh;
min-height:720px;
background:url(https://designbymichelle.de/wp-content/uploads/2025/09/FREEMAN_Hero_01_Desktop_Webp-scaled.webp) center/cover no-repeat;
} #freeman-page .hero-inner{
position:absolute;
inset:0;
max-width:1920px;
margin:0 auto;
padding:40px var(--side) 80px;
display:flex;
flex-direction:column;
}
#freeman-page .pill-btn{
display:inline-flex; align-items:center; gap:10px;
height:42px; padding:0 18px;
border:1px solid var(--white);
border-radius:999px;
background:transparent; color:#fff; cursor:pointer;
font-family:"Swear Display", serif !important; font-size:20px; line-height:1;
transition:background .2s, color .2s, border-color .2s;
}
#freeman-page .pill-btn:hover{ background:#fff; color:#000; border-color:#fff; }
#freeman-page .pill-x{ font-size:20px; line-height:1; }
#freeman-page .close-btn{ align-self:flex-end; }
#freeman-page .hero-grid{ margin-top:40px; display:grid; grid-template-columns:1fr 1fr; gap:60px; }
@media (max-width:1024px){
#freeman-page .hero-grid{ grid-template-columns:1fr; gap:24px; }
}
#freeman-page .project-name{ font-size:48px; letter-spacing:-.01em; }
#freeman-page .project-short{ font-size:22px; }
#freeman-page .meta-inline{ display:flex; flex-wrap:wrap; gap:16px; }
#freeman-page .content-desc{ font-size:22px; }
#freeman-page .hero-copy{ margin-top:18px; }
#freeman-page .copy{ font-size:19px; line-height:1.55; color:#e7e7e7; } #freeman-page .more-btn{ display:none; } #freeman-page .gallery{ background:#000; padding:24px 0 0 0; }
#freeman-page .gallery-viewport{ position:relative; max-width:1920px; margin:0 auto; padding:0 var(--side); overflow:hidden; }
#freeman-page .gallery-track{ display:flex; align-items:stretch; gap:10px; transition:transform .35s ease; }
#freeman-page .slide{ flex:0 0 auto; width:calc((100% - 20px)/3); height:430px; background:#111; overflow:hidden; }
#freeman-page .slide img{ width:100%; height:100%; object-fit:cover; } #freeman-page .nav{
position:absolute; top:50%; transform:translateY(-50%);
z-index:5; width:60px; height:60px; border-radius:50%;
background:rgba(0,0,0,.45); border:2px solid #fff;
cursor:pointer; display:flex; align-items:center; justify-content:center;
transition:background .2s ease;
}
#freeman-page .nav:hover{ background:rgba(0,0,0,.65); }
#freeman-page .nav::after{
content:""; display:block; width:18px; height:18px;
border-right:3px solid #fff; border-top:3px solid #fff;
}
#freeman-page #galNext::after{ transform:rotate(45deg); }
#freeman-page #galPrev::after{ transform:rotate(-135deg); }
#freeman-page #galPrev{ left:calc(var(--side) + 10px); }
#freeman-page #galNext{ right:calc(var(--side) + 10px); } @media (max-width:768px){ #freeman-page .hero{
background-image:url(https://designbymichelle.de/wp-content/uploads/2025/09/FREEMAN_Hero_01_Mobil-scaled.webp);
background-position:center;
background-size:cover;
background-repeat:no-repeat;
min-height:560px;
}
#freeman-page .hero-bg{ display:none !important; }
#freeman-page .hero-inner{
position:static;
max-width:none;
padding:24px var(--side-m) 32px;
display:flex;
flex-direction:column;
}
#freeman-page .close-btn{
align-self:flex-end;
height:48px;
padding:0 22px;
backdrop-filter:saturate(140%) blur(6px);
-webkit-backdrop-filter:saturate(140%) blur(6px);
}
#freeman-page .pill-text{ line-height:1; }
#freeman-page .hero-grid{
margin-top:18px;
display:grid;
grid-template-columns:1fr;
gap:16px;
}
#freeman-page .project-name,
#freeman-page .project-short,
#freeman-page .meta-inline,
#freeman-page .hero-copy,
#freeman-page .copy{ text-align:left; } #freeman-page .copy-collapsible{
transition:max-height .28s ease;
}
#freeman-page .copy-collapsible[data-collapsed="true"]{
max-height:6.2em;
overflow:hidden;
position:relative;
}
#freeman-page .copy-collapsible[data-collapsed="true"]::after{
content:"";
position:absolute; left:0; right:0; bottom:0; height:3em;
background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
}
#freeman-page .copy-collapsible[data-collapsed="false"]{
max-height:9999px; }
#freeman-page .more-btn{ display:inline-flex; margin-top:16px; } #freeman-page .gallery{ background:#000; padding:16px 0 0 0; }
#freeman-page .gallery-viewport{
width:100vw !important;
margin-left:calc(50% - 50vw) !important;
margin-right:calc(50% - 50vw) !important;
padding:0 !important;
overflow-x:auto !important;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
}
#freeman-page .gallery-viewport::-webkit-scrollbar{ display:none; }
#freeman-page .gallery-track{ gap:0 !important; transform:none !important; }
#freeman-page .slide{
flex:0 0 100vw !important;
width:100vw !important;
height:auto !important;
scroll-snap-align:start;
background:#111;
}
#freeman-page .slide img{ width:100% !important; height:auto !important; display:block; }
#freeman-page .nav{ display:none !important; }
} #freeman-page .more-grid-section{
position:relative; left:50%; transform:translateX(-50%);
width:100vw; background:#242424; padding:80px 0 120px 0;
}
#freeman-page .more-head{ text-align:center; color:#fff; font-style:italic; font-size:32px; margin:0 0 60px 0; }
#freeman-page .grid-container{ max-width:1920px; margin:0 auto; padding:0 var(--side); display:grid; grid-template-columns:repeat(3,1fr); gap:20px; grid-row-gap:60px; }
#freeman-page .grid-item{ position:relative; overflow:hidden; min-height:300px; }
#freeman-page .grid-media{ position:relative; width:529px; height:480px; margin:0 auto; overflow:hidden; display:block; }
#freeman-page .grid-media img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
#freeman-page .grid-media:hover img{ transform:scale(1.02); }
#freeman-page .overlay{ position:absolute; inset:0; background:rgba(0,0,0,.3); backdrop-filter:blur(3px); opacity:0; transition:opacity .3s ease; display:flex; justify-content:center; align-items:center; }
#freeman-page .grid-media:hover .overlay{ opacity:1; }
#freeman-page .explore-button{ display:inline-block; padding:8px 16px; border:1px solid #fff; color:#fff; font-family:"Swear Display",serif; font-size:22px; border-radius:36px; text-decoration:none; }
#freeman-page .grid-info{ width:529px; margin:16px auto 0; display:flex; justify-content:space-between; align-items:center; }
#freeman-page .grid-info .grid-name, #freeman-page .grid-info .grid-desc{ color:#cfcfcf; }
#freeman-page .grid-item.is-coming-soon .grid-desc{ display:none !important; }
#freeman-page .grid-item.placeholder .grid-info{ display:none !important; }
#freeman-page .grid-item.placeholder .placeholder-box{ background:#1a1a1a; }
@media (min-width:769px) and (max-width:1919px){
#freeman-page .grid-media{ max-width:529px; width:100%; margin:0 auto; }
#freeman-page .grid-info{ max-width:529px; width:100%; margin:25px auto 0; }
#freeman-page .grid-info .grid-desc{ font-size:17px; overflow-wrap:break-word; hyphens:auto; }
}
@media (max-width:768px){
#freeman-page .more-grid-section{ padding:60px 0 80px; }
#freeman-page .grid-container{ grid-template-columns:1fr; padding:0 var(--side-m); gap:0; row-gap:20px; }
#freeman-page .grid-media{ width:100%; height:auto; }
#freeman-page .grid-info{ width:auto; margin:16px 16px 0; display:block; }
#freeman-page .overlay{ display:none !important; }
}