/* FONTS Served from this origin, not from Google. Two reasons: the browser used to have to reach fonts.googleapis.com and fonts.gstatic.com before it could paint any text, and doing so handed every visitor's IP address to Google before they had agreed to anything — an awkward position for a Dutch company. These are the variable files, latin subset: one per family and style, covering every weight the stylesheet asks for. Dutch and English need nothing outside latin (ë, ï, é and ö all sit below U+00FF). */ @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url(fonts/cormorant-garamond-italic.woff2) format('woff2')} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/cormorant-garamond.woff2) format('woff2')} @font-face{font-family:'DM Sans';font-style:normal;font-weight:300 500;font-display:swap;src:url(fonts/dm-sans.woff2) format('woff2')} *{margin:0;padding:0;box-sizing:border-box} :root{ --black:#0a0a08; --gold:#b8962e; --gold-light:#d4ae52; --gold-pale:#f5eecb; --sand:#f7f3ec; --orange:#e85d20; --mid:#3a3a32; --muted:#7a7a6a; --font-head:'Cormorant Garamond',serif; --font-body:'DM Sans',sans-serif; } html{scroll-behavior:smooth} body{font-family:var(--font-body);background:var(--sand);color:var(--black);overflow-x:hidden} /* NAV */ nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background:var(--black);border-bottom:1px solid rgba(184,150,46,.2)} .nav-logo{height:36px;width:auto;display:block;border-radius:2px} .nav-home{display:block;line-height:0} .nav-right{display:flex;align-items:center;gap:28px} .nav-links{display:flex;gap:28px;align-items:center} .nav-links a{font-family:var(--font-body);font-size:12px;font-weight:500;text-decoration:none;color:rgba(245,238,203,.6);letter-spacing:.08em;text-transform:uppercase;transition:color .2s} .nav-links a:hover{color:var(--gold-light)} .lang-toggle{display:flex;border:1px solid rgba(184,150,46,.35);border-radius:3px;overflow:hidden} .lang-btn{font-family:var(--font-body);font-size:11px;font-weight:500;padding:5px 10px;cursor:pointer;border:none;background:transparent;letter-spacing:.08em;text-transform:uppercase;transition:all .15s;color:rgba(245,238,203,.5)} .lang-btn.active{background:var(--gold);color:var(--black)} /* Hamburger: hidden until the links no longer fit (see the media query). */ .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:4px;width:36px;height:30px;padding:7px 6px;background:transparent;border:1px solid rgba(184,150,46,.35);border-radius:3px;cursor:pointer} .nav-toggle span{display:block;height:1.5px;background:var(--gold-pale);opacity:.75;transition:transform .2s,opacity .2s} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} /* HERO */ .hero{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 48px 72px;position:relative;overflow:hidden} .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;filter:brightness(.45)} .hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,8,.92) 0%,rgba(10,10,8,.3) 60%,rgba(10,10,8,.1) 100%)} .hero-content{position:relative;z-index:2} .hero-ring{position:absolute;right:-80px;top:50%;transform:translateY(-50%);width:520px;height:520px;border-radius:50%;border:1px solid rgba(184,150,46,.12);z-index:1} .hero-ring-2{position:absolute;right:-180px;top:50%;transform:translateY(-50%);width:720px;height:720px;border-radius:50%;border:1px solid rgba(184,150,46,.06);z-index:1} .hero-eyebrow{font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:24px} .hero-title{font-family:var(--font-head);font-size:clamp(56px,8.5vw,100px);font-weight:600;line-height:.92;color:var(--gold-pale);margin-bottom:32px;max-width:800px} .hero-title .italic{font-style:italic;font-weight:400;color:rgba(245,238,203,.4)} .hero-title .accent{color:var(--orange)} .hero-sub{font-size:16px;font-weight:300;color:rgba(245,238,203,.6);max-width:460px;line-height:1.75;margin-bottom:44px} .hero-actions{display:flex;gap:14px;flex-wrap:wrap} /* These four are links, not buttons — they navigate. The reset below is what makes an look exactly like the