:root { --pine: #587565; --pine-deep: #314f42; --pine-mid: #718b7b; --cream: #eef3e8; --paper: #dce8da; --moss: #8fa899; --moss-deep: #587568; --amber: #d66f3f; --ink: #17392e; --line: rgba(48, 82, 66, .18); --shadow: 0 18px 40px rgba(36, 75, 57, .14); --display: Georgia, 'Times New Roman', serif; --body: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.33'/%3E%3C/svg%3E"); mix-blend-mode: multiply; z-index: 5; }
a { color: inherit; text-underline-offset: .22em; }
button, input, select, textarea { font: inherit; }
button, .button { cursor: pointer; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 20; transform: translateY(-160%); background: var(--cream); color: var(--ink); padding: .7rem 1rem; }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 4; height: 78px; padding: 24px clamp(24px, 5vw, 76px); display: flex; justify-content: space-between; align-items: center; color: var(--ink); }
.wordmark { text-decoration: none; font-size: 1.1rem; font-weight: 800; letter-spacing: -.04em; }
.header-actions { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); }
.header-link { font-size: .9rem; font-weight: 700; text-decoration: none; border-bottom: 1px solid #7a8e7e; padding-bottom: .22rem; }
.header-link-secondary { color: #567266; border-bottom-color: transparent; font-weight: 600; }
.header-link-secondary:hover { color: var(--ink); border-bottom-color: #7a8e7e; }
.hero { min-height: 720px; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 0; padding: 84px 4vw 48px 5vw; background: linear-gradient(135deg, #f3f6ed 0%, #dfeadd 100%); color: var(--ink); overflow: hidden; }
.hero-copy { position: relative; z-index: 2; min-height: 588px; align-self: center; padding: 74px 4.5vw 56px 1vw; background: transparent; }
.eyebrow { margin: 0 0 14px; color: var(--moss-deep); font-size: .73rem; line-height: 1; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }
.hero h1 { max-width: 650px; margin: 0; color: #9dc2b1; font-family: var(--display); font-weight: 400; font-size: clamp(4rem, 5.8vw, 6.2rem); line-height: .91; letter-spacing: -.055em; -webkit-text-stroke: 1.35px var(--ink); paint-order: stroke fill; }
.intro { max-width: 540px; margin: 34px 0 0; color: #3f6656; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.5; }
.proof { max-width: 570px; margin: 31px 0 0; border-top: 1px solid #a8bcae; padding-top: 16px; color: #527364; font-size: .92rem; font-weight: 700; }
.curator { margin: 12px 0 0; color: #496d5d; font-size: .92rem; }
.curator a { color: var(--ink); font-weight: 800; text-decoration-color: transparent; transition: color .18s ease, text-decoration-color .18s ease; }
.curator a:hover { color: #a94f2c; text-decoration-color: currentColor; }
.curator-actions { min-height: 34px; display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.curator-action { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #adbfaf; border-radius: 100px; color: #385d4d; background: rgba(249,252,244,.48); text-decoration: none; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; }
.curator-action:hover { color: #a94f2c; border-color: var(--amber); background: #fff3e5; transform: translateY(-1px); }
.linkedin-link { width: 34px; padding: 0; }
.linkedin-mark { font-family: Arial, Helvetica, sans-serif; font-size: .75rem; font-weight: 900; letter-spacing: -.04em; }
.share-button { gap: 5px; padding: 5px 11px; font-size: .72rem; font-weight: 800; }
.share-button span[aria-hidden] { font-size: .9rem; line-height: 1; }
.share-status { color: #587568; font-size: .7rem; font-weight: 700; }
.hero .eyebrow { color: #c25f35; }
.map-column { min-width: 0; min-height: 588px; align-self: center; display: grid; grid-template-rows: minmax(0, 550px) auto; gap: 12px; }
.map-panel { position: relative; display: flex; align-items: stretch; min-width: 0; min-height: 550px; overflow: hidden; border: 1px solid rgba(53,80,69,.18); border-radius: 30px; background: radial-gradient(circle at 50% 44%, #dde5c9 0%, #c5d7c3 42%, #abc2b2 76%, #9db5a8 100%); box-shadow: 0 26px 65px rgba(41,66,54,.15); }
.map-panel::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 51% 43%, rgba(255,246,197,.54), rgba(247,252,220,.22) 40%, transparent 70%); pointer-events: none; }
.map-panel::after { display: none; }
.europe-map { width: 100%; height: 100%; min-height: 550px; position: relative; z-index: 1; overflow: visible; }
.map-status { min-height: 26px; display: flex; align-items: center; gap: 9px; padding: 0 4px; color: #38564c; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.map-status-dot { width: 9px; height: 9px; flex: none; border: 1px solid #fff2d6; border-radius: 50%; background: var(--amber); box-shadow: 0 1px 2px rgba(96,45,24,.22); }
.map-status button { margin-left: auto; border: 0; padding: 2px 0; color: var(--ink); background: transparent; font-size: .72rem; font-weight: 800; text-decoration: underline; text-underline-offset: .22em; }
.map-silhouette { pointer-events: none; opacity: .94; filter: drop-shadow(0 2px 3px rgba(23,57,46,.15)); }
.city-marker { cursor: pointer; outline: none; }
.city-ring { fill: none; stroke: rgba(214,111,63,.64); stroke-width: .8; pointer-events: none; transform-box: fill-box; transform-origin: center; transition: opacity .2s ease, transform .2s ease, stroke-width .2s ease; }
.map-dots .city-dot { fill: var(--amber); stroke: #fff6e5; stroke-width: 1; filter: drop-shadow(0 1px 1.5px rgba(92,46,28,.35)); transition: fill .2s ease, stroke-width .2s ease, filter .2s ease; pointer-events: none; }
.city-hit-area { fill: transparent; pointer-events: all; }
.city-marker:hover .city-ring, .city-marker:focus-visible .city-ring { opacity: 1; transform: scale(1.16); }
.city-marker:hover .city-dot, .city-marker:focus-visible .city-dot { fill: #bd5b32; filter: drop-shadow(0 2px 2px rgba(92,46,28,.4)); }
.city-marker:focus-visible .city-dot { stroke-width: 2.4; }
.city-marker.selected .city-ring { stroke: var(--amber); stroke-width: 1.5; opacity: 1; transform: scale(1.08); }
.city-marker.selected .city-dot { fill: #fff6e5; stroke: var(--amber); stroke-width: 1.7; filter: none; }
.map-tooltip { position: absolute; z-index: 3; min-width: 128px; max-width: 180px; padding: .55rem .72rem; color: var(--ink); background: var(--cream); box-shadow: var(--shadow); font-size: .78rem; font-weight: 700; pointer-events: none; }
.directory { position: relative; z-index: 2; background: var(--cream); color: var(--ink); border-top: 1px solid #c4d2c5; padding: 84px clamp(24px, 7vw, 112px) 108px; }
.directory .eyebrow { color: #bd5e36; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 28px; }
h2 { margin: 0; font-family: var(--display); font-size: clamp(2.15rem, 4vw, 4rem); font-weight: 400; letter-spacing: -.045em; line-height: .95; }
.filter-row { display: grid; grid-template-columns: minmax(220px, 1.55fr) minmax(160px, .8fr) minmax(160px, .8fr) auto; gap: 10px; padding: 12px; background: #d3e2d2; border: 1px solid #b4c8b8; backdrop-filter: blur(12px); }
.search-field, .select-field { min-width: 0; height: 54px; display: flex; align-items: center; padding: 0 15px; border: 1px solid #abc1b0; background: rgba(249,252,244,.55); color: var(--ink); }
.search-field svg { flex: none; width: 20px; margin-right: 10px; fill: none; stroke: var(--moss); stroke-width: 1.8; }
input, select, textarea { width: 100%; border: 0; outline: 0; color: inherit; background: transparent; }
input::placeholder { color: #61796e; opacity: 1; }
select { appearance: none; color: var(--ink); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 7 5 5 5-5' fill='none' stroke='%2326453b' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right center/18px; padding-right: 23px; }
select option { color: var(--ink); background: var(--cream); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: .85rem 1.35rem; border: 1px solid var(--amber); border-radius: 0; background: var(--amber); color: var(--ink); font-size: .91rem; font-weight: 800; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.button:hover { background: #bc5a32; transform: translateY(-1px); }
.results-bar { display: flex; gap: 12px; align-items: center; min-height: 46px; color: #61796e; font-size: .9rem; }
.results-bar button { border: 0; padding: 0; color: var(--ink); background: transparent; text-decoration: underline; text-underline-offset: .2em; }
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.company-card { min-height: 250px; display: flex; flex-direction: column; padding: 24px; color: var(--ink); background: #f8faef; border: 1px solid #c9d5c8; box-shadow: 0 12px 30px rgba(43,83,63,.08); transition: transform .2s ease, box-shadow .2s ease; }
.company-card:hover { transform: translateY(-4px); box-shadow: 0 20px 35px rgba(0,0,0,.2); }
.company-card h3 { margin: 0; font-size: 1.25rem; line-height: 1.06; letter-spacing: -.045em; }
.location { margin: 6px 0 0; color: #587268; font-size: .82rem; font-weight: 700; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 15px; }
.tag { display: inline-flex; padding: .3rem .52rem; border-radius: 100px; font-size: .67rem; font-weight: 800; line-height: 1; }
.tag.category { color: #234139; background: #c5dbc5; }
.tag.country { color: #4d685c; background: #dde8dc; }
.summary { margin: 0; color: #28493f; font-size: .91rem; line-height: 1.5; }
.stage { margin: auto 0 0; padding-top: 18px; color: #60766e; font-size: .72rem; line-height: 1.42; }
.card-footer { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 12px; }
.source-link { min-width: 0; max-width: 100%; color: #365b4f; font-size: .72rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upvote-button { flex: none; min-width: 46px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; border: 1px solid #c6c9bb; border-radius: 100px; padding: 5px 9px 5px 7px; color: #587268; background: transparent; font-size: .72rem; font-weight: 800; line-height: 1; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; }
.upvote-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.upvote-button:hover:not(:disabled) { color: #a94f2c; border-color: var(--amber); background: #fff3e5; transform: translateY(-1px); }
.upvote-button.voted { color: #17392e; border-color: var(--amber); background: var(--amber); }
.upvote-button:disabled { cursor: default; opacity: 1; }
.listing-section { display: grid; grid-template-columns: minmax(250px, .75fr) minmax(0, 1.25fr); gap: clamp(38px, 8vw, 128px); padding: 105px clamp(24px, 8vw, 132px); color: var(--ink); background: var(--paper); }
.listing-intro p:not(.eyebrow) { max-width: 390px; color: #45645a; }
.listing-section form { max-width: 780px; }
.honeypot { position: absolute; left: -9999px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.form-grid label, .consent { display: grid; gap: 7px; color: #28483f; font-size: .82rem; font-weight: 800; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea { min-height: 48px; padding: .72rem .78rem; border: 1px solid #a9c0ae; background: rgba(249,252,244,.56); color: var(--ink); resize: vertical; }
.form-grid textarea { min-height: 104px; }
.form-grid select { appearance: auto; }
.consent { grid-template-columns: auto 1fr; align-items: start; margin: 22px 0; font-weight: 600; }
.consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--pine); }
.consent-optional { margin-top: -10px; }
.form-action { display: flex; gap: 18px; align-items: center; }
.form-action a { color: var(--ink); font-weight: 800; }
.form-action p, .form-error { margin: 0; color: #516d62; font-size: .8rem; }
.form-action .button:disabled { cursor: wait; opacity: .7; transform: none; }
.form-error { margin-top: 14px; color: #90392f; }
.transparency { padding: 72px clamp(24px, 8vw, 132px); background: #e9f1e5; color: var(--ink); border-top: 1px solid #bfd0c1; }
.transparency h2 { max-width: 480px; font-size: clamp(1.8rem, 3vw, 2.8rem); }
.transparency p { max-width: 750px; margin: 25px 0 0; color: #45645a; font-size: 1.02rem; }
.transparency a { color: var(--ink); font-weight: 800; }
.site-footer { display: flex; justify-content: space-between; gap: 24px; padding: 28px clamp(24px, 8vw, 132px); background: var(--pine-deep); color: var(--moss); font-size: .77rem; }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: end; gap: 17px; }
.site-footer a { color: var(--cream); }
.legal-page { min-height: 100vh; max-width: 840px; padding: 110px clamp(24px, 8vw, 132px) 90px; background: var(--cream); color: var(--ink); }
.legal-home { display: inline-block; margin-bottom: 80px; color: var(--ink); }
.legal-page h1 { margin: 0; font-size: clamp(3rem, 7vw, 5.6rem); letter-spacing: -.075em; line-height: .88; }
.legal-copy { max-width: 680px; margin-top: 50px; color: #36564c; }
.legal-copy p { margin: 0 0 24px; }
.legal-copy h2 { margin: 40px 0 10px; color: var(--ink); font-size: 1.2rem; letter-spacing: -.035em; }
.legal-copy a { color: var(--ink); font-weight: 800; }
.completion-page { max-width: none; display: grid; align-content: center; min-height: 100vh; }
.completion-page .legal-home { position: absolute; top: 42px; left: clamp(24px, 8vw, 132px); margin: 0; }
.completion-copy { max-width: 700px; }
.completion-copy > p:not(.eyebrow) { max-width: 620px; color: #36564c; font-size: 1.05rem; }
.completion-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.text-link { display: inline-flex; align-items: center; min-height: 54px; padding: .8rem .3rem; color: var(--ink); font-weight: 800; }
:focus-visible { outline: 3px solid #ffe0a7; outline-offset: 3px; }
@media (max-width: 1100px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hero-copy { padding-left: 7vw; } }
@media (max-width: 820px) { .site-header { height: 64px; padding: 18px 24px; color: var(--ink); } .header-link { color: var(--ink); border-color: #7a968b; } .header-link-secondary { border-color: transparent; } .hero { display: block; min-height: 0; padding: 0 18px 30px; } .hero-copy { min-height: 0; padding: 120px 6px 60px; background: transparent; } .hero h1 { font-size: clamp(3.25rem, 14vw, 5.8rem); } .map-column { min-height: 338px; grid-template-rows: 300px auto; gap: 10px; } .map-panel { min-height: 300px; height: 300px; border-radius: 22px; } .europe-map { min-height: 300px; } .map-tooltip { display: none; } .filter-row { grid-template-columns: 1fr 1fr; } .search-field { grid-column: 1 / -1; } .filter-row .button { grid-column: 1 / -1; } .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .listing-section { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 560px) { .site-header { padding-left: 16px; padding-right: 16px; } .header-actions { gap: 10px; } .header-link { font-size: .72rem; } .intro { margin-top: 24px; } .proof { margin-top: 22px; } .map-column { min-height: 230px; grid-template-rows: 230px; } .map-panel { min-height: 230px; height: 230px; border-radius: 18px; } .europe-map { min-height: 230px; pointer-events: none; } .map-status { display: none; } .filter-row { grid-template-columns: 1fr; padding: 9px; } .search-field, .select-field { min-height: 52px; } .card-grid { grid-template-columns: 1fr; } .company-card { min-height: 225px; } .form-grid { grid-template-columns: 1fr; } .form-grid .wide { grid-column: auto; } .form-action { display: grid; align-items: stretch; } .form-action .button { width: 100%; } .completion-actions { display: grid; } .completion-actions .button, .completion-actions .text-link { width: 100%; } .site-footer { display: grid; } .site-footer nav { justify-content: start; } }