:root { --blue:#1237d4; --ink:#101425; --paper:#f4f0e7; --amber:#ffb000; --red:#f24b3f; --line:rgba(16,20,37,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
main { min-height:100vh; overflow:hidden; }
.topbar { height:76px; padding:0 4.5vw; display:flex; align-items:center; gap:42px; color:white; background:var(--ink); border-bottom:1px solid rgba(255,255,255,.18); }
.brand { display:flex; align-items:center; gap:13px; font-size:14px; letter-spacing:.14em; white-space:nowrap; }
.brand b { color:var(--amber); }
.brandMark { width:35px; height:35px; display:inline-grid; grid-template-columns:repeat(3,1fr); gap:3px; transform:skew(-11deg); }
.brandMark i { display:block; background:var(--amber); }
.brandMark i:nth-child(2) { background:var(--blue); }.brandMark i:nth-child(3) { background:var(--red); }
.topbar nav { display:flex; align-items:center; gap:27px; margin-left:auto; }
.topbar nav a { font-size:12px; letter-spacing:.1em; text-transform:uppercase; opacity:.82; }
.topbar nav a:hover { opacity:1; color:var(--amber); }
.age { border:1px solid rgba(255,255,255,.65); border-radius:50%; width:40px; height:40px; display:grid; place-items:center; font-weight:800; }
.hero { min-height:680px; position:relative; color:white; display:grid; align-items:end; }
.heroImage { position:absolute; inset:0; background:url('utrecht-casino-hero.png') center/cover no-repeat; }
.heroShade { position:absolute; inset:0; background:linear-gradient(90deg, rgba(7,10,28,.94) 0%, rgba(7,10,28,.7) 45%, rgba(7,10,28,.08) 80%),linear-gradient(0deg,rgba(7,10,28,.75),transparent 55%); }
.heroGrid { position:relative; z-index:2; padding:72px 5vw 90px; max-width:940px; }
.kicker { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.25em; color:var(--amber); margin:0 0 22px; }
h1 { font-size:clamp(52px,7.5vw,112px); line-height:.84; letter-spacing:-.065em; margin:0; max-width:900px; font-weight:900; }
.heroLead { margin:24px 0 6px; font-size:clamp(22px,3vw,36px); font-weight:700; }
.hero address { font-style:normal; font-size:17px; margin-top:10px; }
.heroGames { font-size:18px; margin:18px 0 0; }
.heroGames strong { color:var(--amber); }
.heroMeta { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.heroMeta span { padding:9px 12px; border:1px solid rgba(255,255,255,.36); background:rgba(8,12,32,.48); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.heroActions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:0 19px; font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.button.primary { background:var(--amber); color:var(--ink); }.button.ghost { border:1px solid white; }
.routeLine { position:absolute; z-index:2; left:5vw; right:5vw; bottom:20px; display:flex; align-items:center; gap:13px; font-size:10px; letter-spacing:.16em; }
.routeLine i { flex:1; height:2px; background:linear-gradient(90deg,var(--amber),var(--red)); }.routeLine strong { color:var(--amber); }
.pageHero { min-height:430px; padding:78px 5vw 60px; color:white; background:linear-gradient(125deg,var(--ink) 0 70%,var(--blue) 70%); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:60px; align-items:end; }
.pageHero h1 { max-width:1000px; font-size:clamp(48px,7vw,96px); }
.pageHeroText>p:last-child { max-width:720px; font-size:19px; line-height:1.6; color:rgba(255,255,255,.76); margin:30px 0 0; }
.pageHeroIndex { display:flex; flex-direction:column; align-items:flex-end; }.pageHeroIndex span { font-size:100px; font-weight:900; line-height:.8; color:var(--amber); }.pageHeroIndex small { margin-top:14px; letter-spacing:.18em; }
.factStrip { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); background:white; }
.factStrip div { padding:22px 2vw; border-right:1px solid var(--line); }.factStrip small { display:block; text-transform:uppercase; letter-spacing:.16em; color:#676b79; margin-bottom:7px; font-size:10px; }.factStrip strong { font-size:14px; }
.contentGrid { max-width:1320px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:70px; padding:85px 5vw 110px; }
.content { min-width:0; }.intro { font-size:clamp(24px,3vw,38px); line-height:1.28; letter-spacing:-.025em; margin:0 0 70px; max-width:900px; }
.story { display:grid; grid-template-columns:52px minmax(0,1fr); gap:25px; padding:38px 0; border-top:1px solid var(--line); }
.sectionNo { color:var(--blue); font-weight:900; font-size:14px; padding-top:8px; }.story h2 { font-size:clamp(28px,4vw,52px); letter-spacing:-.04em; margin:0 0 20px; line-height:1; }.story p { font-family:Georgia, 'Times New Roman', serif; font-size:19px; line-height:1.72; color:#383c49; max-width:820px; margin:0; }.story ul { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; list-style:none; padding:1px; background:var(--line); margin:28px 0 0; }.story li { background:white; padding:18px; font-size:14px; font-weight:700; }
.featureImage { margin:60px 0 0; }.featureImage img { width:100%; display:block; aspect-ratio:3/2; object-fit:cover; }.featureImage figcaption { padding:15px 0; font-family:Georgia,serif; color:#5d6170; border-bottom:1px solid var(--line); }
aside { display:flex; flex-direction:column; gap:16px; }.railCard { padding:28px; }.railCard>span { font-size:10px; letter-spacing:.2em; font-weight:900; display:block; margin-bottom:22px; }.railCard.blue { background:var(--blue); color:white; }.railCard.blue b { display:block; font-size:56px; line-height:.92; letter-spacing:-.06em; }.railCard.blue em { display:block; font:italic 18px Georgia,serif; margin:9px 0; color:#bdc9ff; }.railCard.blue small { display:block; margin-top:24px; line-height:1.5; color:rgba(255,255,255,.72); }
.railCard.paper { border:1px solid var(--line); }.railCard h3 { font-size:27px; letter-spacing:-.03em; line-height:1.05; }.railCard ol { padding-left:20px; }.railCard li { padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }.railCard.help { background:var(--amber); }.railCard.help p { line-height:1.6; }.railCard.help b { font-size:20px; }
.nextBand { background:var(--red); color:white; padding:48px 5vw; display:flex; align-items:center; justify-content:space-between; gap:40px; }.nextBand small { letter-spacing:.18em; }.nextBand h2 { margin:10px 0 0; font-size:clamp(30px,4vw,58px); letter-spacing:-.045em; }.nextBand>a { width:74px; height:74px; border:1px solid white; border-radius:50%; display:grid; place-items:center; font-size:38px; flex:0 0 auto; }
footer { background:var(--ink); color:white; padding:58px 5vw 35px; }.footerLead { display:flex; gap:24px; align-items:center; max-width:680px; }.footerLead p { font-size:19px; line-height:1.45; }.footerLinks { display:flex; gap:20px; flex-wrap:wrap; margin:45px 0; padding:22px 0; border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); }.footerLinks a { font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--amber); }.disclaimer { font-size:12px; line-height:1.6; color:rgba(255,255,255,.58); max-width:900px; }
@media (max-width:900px) { .topbar nav { display:none; }.topbar { height:66px; }.hero { min-height:720px; }.heroGrid { padding-bottom:105px; }.pageHero { grid-template-columns:1fr; min-height:420px; }.pageHeroIndex { display:none; }.factStrip { grid-template-columns:repeat(2,1fr); }.contentGrid { grid-template-columns:1fr; gap:30px; padding-top:55px; } aside { display:grid; grid-template-columns:repeat(3,1fr); }.story ul { grid-template-columns:1fr; } }
@media (max-width:620px) { h1 { font-size:54px; }.brand { font-size:11px; }.age { margin-left:auto; }.heroGrid { padding-left:22px; padding-right:22px; }.heroLead { font-size:23px; }.heroActions { flex-direction:column; align-items:stretch; }.routeLine { left:22px; right:22px; }.pageHero { padding:62px 22px 46px; }.pageHero h1 { font-size:50px; }.factStrip { grid-template-columns:1fr 1fr; }.factStrip div { padding:17px 14px; }.factStrip strong { font-size:12px; }.contentGrid { padding-left:22px; padding-right:22px; }.story { grid-template-columns:1fr; gap:8px; }.story p { font-size:18px; } aside { grid-template-columns:1fr; }.nextBand { padding:40px 22px; }.nextBand>a { width:56px; height:56px; } footer { padding-left:22px; padding-right:22px; } }