@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Serif+Display:ital@0;1&family=Manrope:wght@400;500;600;700&display=swap");
@import "tailwindcss";

:root { --ink:#121210; --paper:#f1efe9; --line:rgba(18,18,16,.18); --red:#c93b26; --muted:#69665f; --obsidian:#0b0b0a; }
* { box-sizing:border-box; }
html { background:var(--paper); scroll-behavior:smooth; }
body { margin:0; overflow-x:clip; background:var(--paper); color:var(--ink); font-family:Manrope,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
a:focus-visible,button:focus-visible { outline:2px solid var(--red); outline-offset:4px; }

.site-shell { min-width:0; }
.topbar { align-items:center; display:flex; justify-content:space-between; left:0; padding:20px 4vw; position:absolute; top:0; width:100%; z-index:5; }
.brand-lockup { align-items:center; display:flex; gap:10px; font:500 10px "DM Mono",monospace; letter-spacing:.14em; text-transform:uppercase; }
.brand-lockup img { display:block; height:36px; object-fit:cover; width:36px; }
.topbar-actions { align-items:center; display:flex; gap:28px; }
.desktop-link { font:500 10px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; transition:color .2s ease; }
.desktop-link:hover { color:var(--red); }
.language-switch { align-items:center; border:1px solid var(--line); border-radius:999px; display:flex; padding:3px; }
.language-switch button { appearance:none; background:transparent; border:0; border-radius:999px; color:var(--muted); cursor:pointer; font:500 9px "DM Mono",monospace; letter-spacing:.08em; min-height:27px; padding:0 8px; }
.language-switch button[aria-pressed="true"] { background:var(--ink); color:var(--paper); }

.gateway-hero { background:var(--paper); display:flex; min-height:min(760px,100svh); overflow:hidden; padding:clamp(142px,20vh,210px) 4vw 54px; position:relative; }
.hero-grid { background-image:linear-gradient(to right,rgba(18,18,16,.065) 1px,transparent 1px),linear-gradient(to bottom,rgba(18,18,16,.065) 1px,transparent 1px); background-size:8vw 8vw; inset:0; pointer-events:none; position:absolute; }
.hero-grid::after { background:linear-gradient(90deg,var(--paper),transparent 25%,transparent 75%,var(--paper)); content:""; inset:0; position:absolute; }
.hero-copy { align-self:center; margin-left:clamp(0px,9vw,150px); max-width:950px; position:relative; z-index:1; }
.micro-label { color:var(--red); font:500 10px/1.3 "DM Mono",monospace; letter-spacing:.1em; margin:0; text-transform:uppercase; }
.gateway-hero h1 { font-size:clamp(53px,6.2vw,96px); font-weight:600; letter-spacing:-.065em; line-height:.93; margin:28px 0 0; }
.gateway-hero h1 span,.gateway-hero h1 em { display:block; white-space:pre-line; }
.gateway-hero h1 em { color:var(--red); font-family:"DM Serif Display",Georgia,serif; font-weight:400; letter-spacing:-.045em; }
.hero-description { color:#55524d; font-size:15px; letter-spacing:-.012em; line-height:1.65; margin:36px 0 0 clamp(0px,11vw,160px); max-width:385px; }
.hero-actions { align-items:center; display:flex; flex-wrap:wrap; gap:20px; margin:31px 0 0 clamp(0px,11vw,160px); }
.primary-action,.secondary-action { align-items:center; display:inline-flex; font:500 10px "DM Mono",monospace; gap:12px; letter-spacing:.08em; min-height:43px; padding:0 16px; text-transform:uppercase; transition:background .2s,color .2s,transform .2s; }
.primary-action { background:var(--ink); color:var(--paper); }
.primary-action:hover { background:var(--red); transform:translateY(-2px); }
.secondary-action { border-bottom:1px solid var(--ink); padding:0 0 1px; }
.secondary-action:hover { color:var(--red); }
.primary-action span,.secondary-action span { color:var(--red); font-size:14px; }.primary-action:hover span { color:var(--paper); }
.hero-mark { background:var(--ink); bottom:clamp(35px,6vw,85px); box-shadow:22px 22px 0 rgba(201,59,38,.16); height:clamp(145px,16vw,235px); position:absolute; right:clamp(30px,7vw,115px); transform:rotate(-3deg); width:clamp(145px,16vw,235px); z-index:1; }
.hero-mark::before { border:1px solid rgba(241,239,233,.34); content:""; inset:9px; position:absolute; z-index:1; }
.hero-mark img { height:100%; object-fit:cover; width:100%; }
.hero-count { align-items:flex-start; bottom:54px; display:flex; flex-direction:column; gap:4px; left:4vw; position:absolute; z-index:1; }
.hero-count strong { font-size:clamp(40px,4.2vw,65px); font-weight:500; letter-spacing:-.08em; line-height:.8; }.hero-count span { color:var(--muted); font:400 9px "DM Mono",monospace; letter-spacing:.08em; max-width:90px; text-transform:uppercase; }

.portfolio { background:#050505; color:var(--paper); overflow:hidden; padding:clamp(82px,8vw,125px) 4vw clamp(90px,9vw,135px); position:relative; }
.portfolio::before { background-image:radial-gradient(circle at 12% 18%,rgba(255,255,255,.06),transparent 24%),radial-gradient(circle at 88% 72%,rgba(201,59,38,.055),transparent 26%),repeating-linear-gradient(105deg,rgba(255,255,255,.012) 0,rgba(255,255,255,.012) 1px,transparent 1px,transparent 9px); content:""; inset:0; pointer-events:none; position:absolute; }
.portfolio > * { position:relative; z-index:1; }
.portfolio-header { align-items:end; display:grid; gap:clamp(38px,7vw,120px); grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr); margin:0 auto clamp(54px,6vw,82px); max-width:1500px; }
.portfolio .micro-label { color:#d8513b; }
.portfolio-header h2 { font-family:"DM Serif Display",Georgia,serif; font-size:clamp(38px,4.5vw,70px); font-weight:400; letter-spacing:-.045em; line-height:.98; margin:22px 0 0; max-width:800px; }
.portfolio-intro { color:rgba(241,239,233,.62); font-size:12px; line-height:1.75; margin:0; max-width:430px; }
.brand-grid { background:#e9e6de; border:1px solid rgba(241,239,233,.22); color:var(--ink); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0 auto; max-width:1500px; }
.brand-card { background:#e9e6de; cursor:pointer; display:grid; grid-template-rows:auto minmax(175px,1fr) auto; min-height:410px; overflow:hidden; padding:24px clamp(25px,3vw,48px) 29px; position:relative; transition:background-color .45s ease,box-shadow .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1); z-index:0; }
.brand-card:nth-child(odd) { border-right:1px solid rgba(18,18,16,.2); }
.brand-card:not(:nth-last-child(-n+2)) { border-bottom:1px solid rgba(18,18,16,.2); }
.brand-card::after { background:var(--red); bottom:-1px; content:""; height:2px; left:0; position:absolute; transform:scaleX(0); transform-origin:left; transition:transform .55s cubic-bezier(.2,.7,.2,1); width:100%; }
.brand-card-meta { align-items:center; color:rgba(18,18,16,.52); display:flex; font:500 8px "DM Mono",monospace; justify-content:space-between; letter-spacing:.1em; text-transform:uppercase; }
.brand-card-logo { align-items:center; display:flex; justify-content:center; margin:0; min-width:0; padding:22px 8%; }
.brand-card-logo img { display:block; height:auto; max-height:176px; max-width:min(82%,390px); object-fit:contain; transform:translateZ(0); transition:transform .65s cubic-bezier(.2,.7,.2,1); width:auto; }
.brand-card--kopiekeller .brand-card-logo img { max-height:168px; max-width:220px; }
.brand-card--giftcrush .brand-card-logo img { max-height:125px; max-width:390px; }
.brand-card--china .brand-card-logo img { max-height:190px; max-width:190px; }
.brand-card--djmajid .brand-card-logo img { max-height:158px; max-width:250px; }
.brand-card--vip .brand-card-logo img { max-height:145px; max-width:330px; }
.brand-card--faaz .brand-card-logo img { max-height:126px; max-width:270px; }
.brand-card--festsaal .brand-card-logo img { max-height:175px; max-width:310px; }
.brand-card--verleih .brand-card-logo img { max-height:165px; max-width:230px; }
.brand-card-copy { align-items:end; border-top:1px solid rgba(18,18,16,.2); display:grid; gap:clamp(24px,3vw,52px); grid-template-columns:minmax(145px,.8fr) minmax(190px,1fr); padding-top:20px; }
.brand-card-copy p,.brand-card-copy h3 { margin:0; }
.brand-membership { color:rgba(18,18,16,.5); font:500 7px "DM Mono",monospace; letter-spacing:.09em; margin-bottom:8px!important; text-transform:uppercase; }
.brand-card h3 { font-size:clamp(22px,2vw,32px); font-weight:500; letter-spacing:-.055em; line-height:.95; overflow-wrap:anywhere; }
.brand-card-summary > p { color:rgba(18,18,16,.66); display:-webkit-box; font-size:10px; line-height:1.6; max-width:310px; min-height:32px; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.card-link { align-items:center; border-bottom:1px solid rgba(18,18,16,.65); display:flex; font:500 7px "DM Mono",monospace; justify-content:space-between; letter-spacing:.09em; margin-top:16px; padding-bottom:7px; text-transform:uppercase; transition:border-color .3s ease,color .3s ease; }
.card-link span:last-child { color:var(--red); font-size:13px; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.brand-card:hover,.brand-card:focus-visible { background:#f1efe9; box-shadow:0 22px 48px rgba(0,0,0,.2),inset 0 0 0 1px var(--red); outline:0; transform:translateY(-7px); z-index:2; }
.brand-card:hover::after,.brand-card:focus-visible::after { transform:scaleX(1); }
.brand-card:hover .brand-card-logo img,.brand-card:focus-visible .brand-card-logo img { transform:translateY(-5px) scale(1.018); }
.brand-card:hover .card-link,.brand-card:focus-visible .card-link { border-color:var(--red); color:var(--red); }
.brand-card:hover .card-link span:last-child,.brand-card:focus-visible .card-link span:last-child { transform:translate(3px,-3px); }

.contact-panel { background:var(--red); color:var(--paper); min-height:540px; overflow:hidden; padding:32px 4vw 28px; position:relative; }.contact-panel::before { background-image:linear-gradient(to right,rgba(241,239,233,.16) 1px,transparent 1px),linear-gradient(to bottom,rgba(241,239,233,.16) 1px,transparent 1px); background-size:8vw 8vw; content:""; inset:0; pointer-events:none; position:absolute; }.contact-panel > * { position:relative; z-index:1; }.contact-panel .micro-label { color:var(--paper); }.contact-content { margin:clamp(75px,12vh,135px) 0 0 clamp(0px,16vw,245px); max-width:770px; }.contact-content h2 { font-size:clamp(47px,6.2vw,98px); font-weight:600; letter-spacing:-.065em; line-height:.95; margin:0; }.contact-content > p { font-size:14px; line-height:1.65; margin:28px 0 0 clamp(0px,9vw,135px); max-width:320px; }.contact-email { border-bottom:1px solid var(--paper); display:inline-flex; font-size:clamp(19px,2.2vw,32px); letter-spacing:-.04em; margin:24px 0 0 clamp(0px,9vw,135px); padding-bottom:8px; }.contact-email span { color:var(--ink); margin-left:11px; }.contact-panel footer { border-top:1px solid rgba(241,239,233,.5); bottom:28px; display:grid; font:400 10px "DM Mono",monospace; grid-template-columns:1fr 1fr auto; left:4vw; letter-spacing:.04em; padding-top:16px; position:absolute; right:4vw; }.contact-panel footer a:hover { color:var(--ink); }

@media (max-width:920px) { .hero-mark { height:clamp(126px,20vw,180px); right:6vw; width:clamp(126px,20vw,180px); }.hero-copy { margin-left:8vw; max-width:650px; }.gateway-hero { min-height:700px; }.hero-description,.hero-actions { margin-left:9vw; }.portfolio-header { align-items:start; gap:24px; grid-template-columns:1fr; }.portfolio-intro { max-width:560px; }.brand-card { min-height:390px; padding-left:25px; padding-right:25px; }.brand-card-copy { gap:19px; grid-template-columns:1fr; }.brand-membership { margin-bottom:6px!important; }.brand-card h3 { font-size:26px; }.contact-panel footer { grid-template-columns:1fr 1fr; row-gap:12px; }.contact-panel footer a:last-child { grid-column:1 / -1; } }
@media (max-width:600px) { .topbar { padding:16px 6vw; }.brand-lockup span,.desktop-link { display:none; }.topbar-actions { gap:0; }.gateway-hero { min-height:780px; padding:130px 6vw 205px; }.hero-grid,.contact-panel::before { background-size:20vw 20vw; }.hero-copy { align-self:flex-start; margin:0; }.gateway-hero h1 { font-size:clamp(38px,10vw,52px); }.hero-description { font-size:13px; margin:28px 0 0; max-width:355px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:17px; margin:25px 0 0; }.hero-mark { bottom:30px; height:128px; right:6vw; width:128px; }.hero-count { bottom:34px; left:6vw; }.portfolio { padding:72px 6vw 88px; }.portfolio-header { gap:22px; margin-bottom:42px; }.portfolio-header h2 { font-size:clamp(34px,10vw,46px); max-width:390px; }.portfolio-intro { font-size:11px; }.brand-grid { grid-template-columns:1fr; }.brand-card { grid-template-rows:auto minmax(170px,1fr) auto; min-height:385px; padding:21px 22px 25px; }.brand-card:nth-child(odd) { border-right:0; }.brand-card:not(:last-child) { border-bottom:1px solid rgba(18,18,16,.2); }.brand-card-logo { padding:22px 4%; }.brand-card-logo img { max-height:156px; max-width:min(82%,310px); }.brand-card--china .brand-card-logo img { max-height:168px; }.brand-card-copy { gap:18px; }.brand-card h3 { font-size:28px; }.brand-card-summary > p { max-width:100%; }.contact-panel { min-height:auto; padding:26px 6vw 28px; }.contact-content { margin:85px 0 0; padding-bottom:80px; }.contact-content h2 { font-size:clamp(44px,12vw,65px); }.contact-content > p,.contact-email { margin-left:0; }.contact-panel footer { bottom:auto; grid-template-columns:1fr; left:auto; position:relative; right:auto; }.contact-panel footer a:last-child { grid-column:auto; } }
@media (hover:none),(pointer:coarse) { .brand-card:hover { background:#e9e6de; box-shadow:none; transform:none; z-index:0; }.brand-card:hover::after { transform:scaleX(0); }.brand-card:hover .brand-card-logo img { transform:none; }.brand-card:hover .card-link { border-color:rgba(18,18,16,.65); color:inherit; }.brand-card:hover .card-link span:last-child { transform:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }

/* Legal notice */
.legal-shell { background:#050505; color:var(--paper); min-height:100vh; }
.legal-nav { align-items:center; display:flex; justify-content:space-between; left:0; padding:20px 4vw; position:absolute; top:0; width:100%; z-index:5; }
.legal-brand { align-items:center; display:flex; font:500 10px "DM Mono",monospace; gap:10px; letter-spacing:.14em; text-transform:uppercase; }
.legal-brand img { display:block; height:36px; object-fit:cover; width:36px; }
.legal-back { border-bottom:1px solid rgba(241,239,233,.45); font:500 9px "DM Mono",monospace; letter-spacing:.08em; padding-bottom:7px; text-transform:uppercase; transition:border-color .25s,color .25s; }
.legal-back span { color:var(--red); margin-left:8px; }.legal-back:hover { border-color:var(--red); color:var(--red); }
.legal-hero { align-items:end; display:flex; min-height:620px; overflow:hidden; padding:150px 4vw 72px; position:relative; }
.legal-hero-grid { background-image:linear-gradient(to right,rgba(241,239,233,.075) 1px,transparent 1px),linear-gradient(to bottom,rgba(241,239,233,.075) 1px,transparent 1px); background-size:8vw 8vw; inset:0; position:absolute; }.legal-hero-grid::after { background:radial-gradient(circle at 72% 44%,rgba(201,59,38,.16),transparent 28%); content:""; inset:0; position:absolute; }
.legal-heading { margin-left:clamp(0px,9vw,150px); position:relative; z-index:1; }.legal-heading h1 { font-family:"DM Serif Display",Georgia,serif; font-size:clamp(70px,10vw,160px); font-weight:400; letter-spacing:-.065em; line-height:.8; margin:35px 0 0; }.legal-heading h1 span { color:var(--red); }.legal-heading > p:last-child { color:rgba(241,239,233,.55); font-size:12px; line-height:1.65; margin:40px 0 0 clamp(0px,10vw,155px); max-width:290px; }
.legal-section-number { align-items:flex-start; bottom:65px; display:flex; position:absolute; right:6vw; z-index:1; }.legal-section-number span { color:var(--red); font-family:"DM Serif Display",Georgia,serif; font-size:44px; }.legal-section-number strong { color:rgba(241,239,233,.09); font-size:clamp(100px,15vw,230px); font-weight:500; letter-spacing:-.09em; line-height:.65; }
.legal-content { background:#e9e6de; color:var(--ink); display:grid; gap:clamp(45px,8vw,135px); grid-template-columns:minmax(180px,.35fr) minmax(0,1.65fr); padding:clamp(85px,9vw,140px) 4vw; }
.legal-sidebar { align-self:start; border-top:1px solid rgba(18,18,16,.3); display:flex; flex-direction:column; gap:8px; position:sticky; top:30px; }.legal-sidebar p { font:500 11px "DM Mono",monospace; letter-spacing:.12em; margin:16px 0 28px; }.legal-sidebar span { color:rgba(18,18,16,.52); font:400 8px/1.55 "DM Mono",monospace; max-width:175px; text-transform:uppercase; }
.legal-document { max-width:1040px; }.legal-eyebrow { color:var(--red); font:500 9px "DM Mono",monospace; letter-spacing:.09em; margin:0 0 20px; text-transform:uppercase; }.legal-primary h2,.legal-responsible h2 { font-family:"DM Serif Display",Georgia,serif; font-size:clamp(46px,6vw,92px); font-weight:400; letter-spacing:-.055em; line-height:.9; margin:0; }
.legal-facts { border-top:1px solid rgba(18,18,16,.28); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:52px; }.legal-facts > div { border-bottom:1px solid rgba(18,18,16,.22); display:grid; gap:22px; grid-template-columns:minmax(110px,.55fr) 1fr; min-height:120px; padding:24px 24px 24px 0; }.legal-facts > div:nth-child(odd) { border-right:1px solid rgba(18,18,16,.22); }.legal-facts > div:nth-child(even) { padding-left:28px; }.legal-facts span { color:rgba(18,18,16,.5); font:500 8px/1.45 "DM Mono",monospace; letter-spacing:.06em; text-transform:uppercase; }.legal-facts p,.legal-facts address,.legal-responsible address { font-size:13px; font-style:normal; line-height:1.7; margin:0; }.legal-facts a:hover { color:var(--red); }
.legal-responsible { border-bottom:1px solid rgba(18,18,16,.28); padding:clamp(80px,9vw,130px) 0; }.legal-responsible address { margin-top:26px; }
.legal-clauses section { border-bottom:1px solid rgba(18,18,16,.28); display:grid; gap:clamp(24px,5vw,78px); grid-template-columns:50px minmax(0,1fr); padding:45px 0; }.legal-clauses section > span { color:var(--red); font:500 9px "DM Mono",monospace; }.legal-clauses h2 { font-family:"DM Serif Display",Georgia,serif; font-size:clamp(30px,3.2vw,49px); font-weight:400; letter-spacing:-.045em; line-height:1; margin:0 0 19px; }.legal-clauses p { color:rgba(18,18,16,.65); font-size:12px; line-height:1.9; margin:0; max-width:760px; }.legal-clauses a { border-bottom:1px solid currentColor; color:var(--ink); }.legal-clauses a span { color:var(--red); }
.legal-contact { background:var(--red); min-height:520px; padding:32px 4vw 28px; position:relative; }.legal-contact .micro-label { color:var(--paper); }.legal-contact > div { align-items:end; display:grid; gap:60px; grid-template-columns:1.25fr .75fr; margin:clamp(78px,11vh,125px) auto 100px; max-width:1120px; }.legal-contact h2 { font-size:clamp(55px,7.5vw,112px); font-weight:600; letter-spacing:-.07em; line-height:.84; margin:0; }.legal-contact h2 em { font-family:"DM Serif Display",Georgia,serif; font-weight:400; }.legal-contact-links { display:flex; flex-direction:column; gap:18px; }.legal-contact-links a { border-bottom:1px solid rgba(241,239,233,.7); font-size:clamp(17px,1.7vw,25px); padding-bottom:9px; }.legal-contact-links a span { color:var(--ink); }.legal-contact footer { border-top:1px solid rgba(241,239,233,.5); bottom:28px; display:flex; font:400 9px "DM Mono",monospace; justify-content:space-between; left:4vw; letter-spacing:.05em; padding-top:15px; position:absolute; right:4vw; text-transform:uppercase; }
@media (max-width:780px) { .legal-hero { min-height:560px; }.legal-section-number { bottom:90px; }.legal-content { grid-template-columns:1fr; }.legal-sidebar { position:static; }.legal-sidebar span:last-child { display:none; }.legal-facts { grid-template-columns:1fr; }.legal-facts > div:nth-child(odd) { border-right:0; }.legal-facts > div:nth-child(even) { padding-left:0; }.legal-contact > div { align-items:start; grid-template-columns:1fr; }.legal-contact { min-height:610px; } }
@media (max-width:600px) { .legal-nav { padding:16px 6vw; }.legal-brand span { display:none; }.legal-back { font-size:8px; }.legal-hero { min-height:590px; padding:135px 6vw 68px; }.legal-hero-grid { background-size:20vw 20vw; }.legal-heading { margin:0; }.legal-heading h1 { font-size:clamp(66px,23vw,105px); }.legal-heading > p:last-child { margin-left:0; }.legal-section-number { bottom:72px; right:3vw; }.legal-content { padding:80px 6vw; }.legal-facts > div { gap:14px; grid-template-columns:1fr; min-height:0; padding:23px 0; }.legal-responsible { padding:76px 0; }.legal-clauses section { grid-template-columns:30px 1fr; padding:36px 0; }.legal-contact { padding:27px 6vw 26px; }.legal-contact > div { gap:45px; margin-top:85px; }.legal-contact footer { bottom:26px; flex-direction:column; gap:12px; left:6vw; right:6vw; } }
