:root{--ink:#0a1613;--ink-2:#0e201b;--panel:#0b2925;--panel-2:#16302a;--petrol:#1f7a74;--petrol-light:#3fa39c;--petrol-light:#70a196;--petrol-light:#60a59c;--deep-green:#1c4a38;--mist:#a3b8b0;--mist-dim:#6f8880;--white:#f5f8f6;--line: rgba(245,248,246,0.12);--radius: 4px;--maxw: 1240px;}*{box-sizing:border-box; margin:0; padding:0;}html{ scroll-behavior:smooth; }body{background:var(--ink);color:var(--white);font-family:'Literata', Georgia, serif;font-size:17px;line-height:1.7;font-weight:400;}h3,h4,.nav-links a,.uptitle,button,.btn,.stat-num,.tl-content h3{font-family:'Inter', ui-sans-serif, sans-serif;font-weight:800;letter-spacing:-0.01em;color:var(--white);}h1,h2{font-family:'Literata', serif;font-weight:500;letter-spacing:-0.005em;color:var(--white);}a{ color:inherit; text-decoration:none; }img{max-width:100%; display:block;}ul{ list-style:none; }.uptitle {font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.16em;color:var(--petrol-light); display:flex; align-items:center; gap:10px; margin-bottom:20px;}.uptitle::before{ content:""; width:26px; height:2px; background:var(--petrol-light); display:inline-block; }.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 40px; position:relative; z-index:1; }.dotgrid{position:absolute; inset:0; z-index:0; pointer-events:none;background-image:radial-gradient(var(--line) 1px, transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%, black 0%, transparent 75%);mask-image:radial-gradient(ellipse 60% 60% at 50% 50%, black 0%, transparent 75%);opacity:0.6;}.blob{ position:absolute; border-radius:50%; filter:blur(60px); z-index:0; pointer-events:none; }/* Header */header{ position:relative; z-index:60; }.logo-row{ display:flex; align-items:center; justify-content:center; position:relative; padding:34px 20px 26px; background:#06241f;border-bottom:1px solid #183730; transition:opacity .25s ease, transform .25s ease; }.logo-row img{ height:52px; width:auto; }.logo-row.hide{ opacity:0; transform:translateY(-12px); pointer-events:none; }.nav-row{ background:#08110b; border-bottom:1px solid #0e201c; position:relative; z-index:60; }.nav-row.fixed{background:#06241f;position:fixed; top:0; left:0; right:0; box-shadow:0 8px 24px rgba(0,0,0,0.28);border:0; }.nav-spacer{ height:0; }.nav-inner{ max-width:var(--maxw); margin:0 auto; padding:0 40px; display:flex; align-items:center; justify-content:center; position:relative; }.nav-icon{ position:absolute; left:40px; top:50%; height:30px; width:auto; transform:translateY(-50%) scale(0.85); opacity:0;  transition:opacity .25s ease, transform .25s ease; }.nav-icon img {height:30px;}.nav-row.fixed .nav-icon{ opacity:1; transform:translateY(-50%) scale(1); }.nav-links{ display:flex; align-items:center; gap:34px; padding:16px 0; }.nav-links a{ font-size:0.8rem; font-weight:700; color:var(--mist); transition:color .2s; text-transform:uppercase; letter-spacing:0.06em; }.nav-links a:hover{ color:var(--white); }.nav-links a.cta{ color:var(--ink); background:var(--petrol-light); padding:10px 18px; border-radius:var(--radius); text-transform:none; letter-spacing:0; }.nav-links a.cta:hover{ background:#59b6ae; color:var(--ink); }.logo-row-inner{ display:flex; align-items:center; justify-content:center; width:100%; position:relative; }.burger{ display:none; position:absolute; right:20px; top:50%; transform:translateY(-50%); flex-direction:column; gap:5px; cursor:pointer; z-index:70; background:none; border:none; padding:6px; }.burger span{ width:24px; height:2px; background:var(--white); display:block; }/* Intro */.hero{ position:relative; padding:120px 0 130px; overflow:hidden; border-bottom:1px solid var(--line); }.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.55; }.webdesign-screens { margin-bottom: 50px;max-width: 400px; }.edge-label{position:absolute; left:10px; top:120px; writing-mode:vertical-rl; transform:rotate(180deg);font-size:0.7rem; letter-spacing:0.2em; color:var(--mist-dim); font-weight:700; text-transform:uppercase;display:flex; align-items:center; gap:10px; font-family:'Inter',sans-serif;}.edge-label::after{ content:""; width:2px; height:60px; background:var(--mist-dim); opacity:0.5; }.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:start; padding-left:40px; }.hero h1{ font-size:clamp(2.1rem, 3.4vw, 2.9rem); line-height:1.3; max-width:16ch; }.hero-mockup{ display:block; margin-bottom:24px; }.hero-intro p{ font-size:1.18rem; color:var(--mist); max-width:56ch; margin-bottom:22px; }.hero-intro p:last-child{ margin-bottom:0; }.hero-intro p strong{ color:var(--white); font-weight:500; }.hero-ctas{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }.btn{ display:inline-flex; align-items:center; gap:8px; padding:15px 26px; border-radius:var(--radius); font-size:0.92rem; transition:all .2s ease; border:1px solid transparent; background:#0a1613;}.btn-primary{ background:var(--petrol); color:var(--white); }.btn-primary:hover{ background:var(--petrol-light); transform:translateY(-1px); color:var(--ink); }.btn-outline{ border-color:var(--line); color:var(--white); }.btn-outline:hover{ border-color:var(--mist-dim); background:rgba(245,248,246,0.03); }button,.btn {font-style:italic;font-size: 18px;font-weight:700;}/* Sections */section, #intro{ scroll-margin-top:78px; }section{ padding:150px 0; position:relative; overflow:hidden; }section.tight{ padding:110px 0; }.section-head{ max-width:960px; margin-bottom:70px; }.section-head h2{ font-size:clamp(1.8rem, 3vw, 2.35rem); line-height:1.25; }/* Skyline */.skyline-section{ padding:0; min-height:55vw;background:var(--panel) url(images/enschede-webdesigner-ontwerper.webp) top center no-repeat;background-size:cover; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex;}.skyline-inner{ max-width:var(--maxw); margin:0 auto; padding:70px 40px 0; }.skyline-inner .section-head{ margin-bottom:20px; }.skyline-inner h2 { font-size:52px;}.skyline-svg{ width:100%; height:auto; display:block; }.skyline-caption{ display:flex; flex-direction: column; justify-content: flex-end; padding:22px 40px;margin:0 auto; font-family:'Inter'; font-size:0.78rem; color:var(--mist-dim); opacity:0.5;letter-spacing:0.04em; flex-wrap:wrap; gap:10px;max-width:var(--maxw); }/* USP lists */.usp-layout{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:80px; align-items:start; }.stat-block{ display:flex; flex-direction:column; gap:48px; }#usps .section-head h2 {margin-bottom:30px;}#usps .section-head p {max-width: 600px;}.stat-num{ font-size:clamp(3rem,5.5vw,4.4rem); line-height:1; color:var(--petrol-light); }.stat-num span{ display:block; font-family:'Literata', serif; font-weight:400; font-size:1.02rem; color:var(--mist); margin-top:10px; letter-spacing:0; }.usp-list{ display:grid; grid-template-columns:1fr 1fr; column-gap:56px; row-gap:0; border-top:1px solid var(--line); }.usp-list li{ padding:28px 12px 28px 38px; border-bottom:1px solid var(--line); position:relative; font-size:1.02rem; color:var(--white); }.usp-list li:nth-child(odd){ border-right:1px solid var(--line); padding-right:38px; }.usp-list li::before{ content:"✓"; color:var(--petrol-light); font-weight:700; position:absolute; left:4px; }.big-quote { margin-top: 90px;border: 1px solid var(--line); border-radius: 6px;background: var(--panel);transition: transform .25s, border-color .25s;padding:40px; font-family:'Inter',sans-serif; font-weight:800; font-size:1rem;}/* WordPress */.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px 48px; margin-top:56px; }.why-item{ display:flex; gap:18px; align-items:flex-start; }.why-mark{ width:34px; height:34px; border:1px dashed var(--petrol-light); border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--petrol-light); font-family:'Inter',sans-serif; font-weight:800; font-size:0.85rem; }.why-item h4{ font-family:'Inter'; font-weight:800; font-size:1.02rem; color:var(--white); margin-bottom:6px; }.why-item p{ color:var(--mist); font-size:0.94rem; }/* Timeline */.timeline{ position:relative; padding-left:0; }.timeline::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line); transform:translateX(-50%); }.tl-item{ display:grid; grid-template-columns:1fr 60px 1fr; align-items:center; gap:0; margin-bottom:8px; }.tl-item .tl-content{ padding:34px 0; }.tl-item:nth-child(odd) .tl-content{ grid-column:1; text-align:right; padding-right:56px; }.tl-item:nth-child(even) .tl-content{ grid-column:3; grid-row:1; text-align:left; padding-left:56px; }.tl-node{ grid-column:2; grid-row:1; width:44px; height:44px; border-radius:50%; background:var(--panel); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:0.85rem; color:var(--petrol-light); position:relative; z-index:1; margin:0 auto; font-family:'Inter'; font-weight:800; }.tl-content h3{ font-size:1.12rem; margin-bottom:8px; }.tl-content p{ color:var(--mist); font-size:0.96rem; }.tl-item.optional .tl-node{ background:var(--deep-green); border-color:var(--petrol); color:var(--white); }.tl-badge{ display:inline-block; font-family:'Inter'; font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--petrol-light); border:1px solid var(--petrol); border-radius:20px; padding:3px 10px; margin-bottom:10px; }/* Portfolio */.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }.work-card{ border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--panel); transition:transform .25s, border-color .25s; }.work-card:hover{ transform:translateY(-5px); border-color:var(--petrol); }.mock{ padding:14px; }.mock-bar{ display:flex; gap:6px; margin-bottom:12px; }.mock-bar span{ width:8px; height:8px; border-radius:50%; background:var(--line); }.mock-body{  display:flex; flex-direction:column; gap:8px; justify-content:center; }.mock-body img {border-radius:3px; }.work-info a {font-weight:bold;margin-top:15px;display:block;}.work-info { padding:20px 22px 26px; }.work-info .tag{ font-family:'Inter'; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--petrol-light); margin-bottom:8px; display:block; }.work-info h3{ font-size:1.08rem; margin-bottom:6px; }.work-info p{ color:var(--mist); font-size:0.88rem; }.work-note{ margin-top:36px; font-size:0.85rem; color:var(--mist-dim); font-family:'Inter'; }/* Expertises */.expertise-section{ background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.bars{ display:flex; flex-direction:column; gap:30px; max-width:760px; }.bar-row{ display:grid; grid-template-columns:200px 1fr 60px; align-items:center; gap:20px; }.bar-row .label{ font-family:'Inter'; font-weight:700; font-size:0.95rem; }.bar-track{ height:8px; background:rgba(245,248,246,0.08); border-radius:20px; overflow:hidden; }.bar-fill{ height:100%; border-radius:20px; background:linear-gradient(90deg, var(--deep-green), var(--petrol-light)); transform:scaleX(0); transform-origin:left; transition:transform 1.2s cubic-bezier(.22,1,.36,1); }.bar-row.in-view .bar-fill{ transform:scaleX(1); }.bar-pct{ font-family:'Inter'; font-weight:800; font-size:0.95rem; text-align:right; color:var(--petrol-light); }@media (prefers-reduced-motion: reduce){ .bar-fill{ transition:none; transform:scaleX(1) !important; } }/* Reviews */.reviews-top{ text-align:center; max-width:620px; margin:0 auto 70px; }.stars{ display:flex; justify-content:center; gap:6px; margin-bottom:26px; color:var(--petrol-light); }.reviews-top p.big{ font-family:'Literata', serif; font-size:1.4rem; font-style:italic; color:var(--white); margin-bottom:26px; }.quote-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }.quote-card{ border:1px solid var(--line); border-radius:6px; padding:32px 28px; background:var(--panel); position:relative; }.quote-card .qmark{ font-family:'Literata', serif; font-size:2.6rem; color:var(--petrol); line-height:0.4; display:block; margin-bottom:18px; }.quote-card p.quote{ font-family:'Literata', serif; font-style:italic; color:var(--white); font-size:1.02rem; margin-bottom:20px; }.quote-card .who{ font-family:'Inter'; font-size:0.76rem; color:var(--mist-dim); text-transform:uppercase; letter-spacing:0.06em; }.reviews .btn{ display:block; width:max-content; margin:50px auto 0; }.reviews-note{ text-align:center; margin-top:24px; font-size:0.82rem; color:var(--mist-dim); font-family:'Inter'; }/* FAQ */.faq{ max-width:820px; }details{ border-bottom:1px solid var(--line); padding:26px 0; }details summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; font-family:'Inter'; font-weight:700; font-size:1.05rem; }details summary::-webkit-details-marker{ display:none; }details summary .plus{ font-size:1.4rem; color:var(--petrol-light); flex-shrink:0; transition:transform .25s ease; font-weight:400; }details[open] summary .plus{ transform:rotate(45deg); }details p{ color:var(--mist); margin-top:16px; max-width:65ch; font-size:1rem; }/* Contact */#contact {background: url(images/enschede-twente-overijssel.jpg) bottom center no-repeat;background-size:100%;padding-bottom:220px;}.contact-box{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:34px; max-width:640px; margin:0 auto; }.contact-box p.lead{ color:var(--mist); font-size:1.08rem; }.contact-cards{ display:flex; gap:20px; flex-wrap:wrap; justify-content:center; width:100%; }.contact-card{ flex:1; min-width:220px; border:1px solid var(--line); border-radius:6px; padding:28px 24px; background:var(--panel); }.contact-card .eb{ font-family:'Inter'; font-weight:700; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--petrol-light); display:block; margin-bottom:10px; }.contact-card .val{ font-size:1.08rem; }.service-area{ margin-top:10px; padding-top:30px; width:100%; }.service-area h4{ font-size:0.95rem; margin-bottom:10px; font-family:'Inter'; }.service-area p{ color:var(--mist-dim); font-size:0.92rem; }/* FOOTER */footer{ padding:44px 0; border-top:1px solid var(--line); }footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; }footer p{ color:var(--mist-dim); font-size:0.85rem; font-family:'Literata', serif; }.flinks{ display:flex; gap:26px; align-items:center; }.flinks a{ color:var(--mist); font-size:0.85rem; font-family:'Inter'; font-weight:700; }.flinks a:hover{ color:var(--white); }.flinks a.review-link{ color:var(--petrol-light); }a:focus-visible, button:focus-visible, summary:focus-visible{outline:2px solid var(--petrol-light); outline-offset:3px;}/* Desktop */ @media (min-width: 980px) and (min-height:900px){	.hero {		height: calc(100vh - 180px) !important;	}}/* Mobile */@media (max-width: 980px){.logo-row-inner {justify-content: left;}.nav-row.fixed .nav-icon{ display:none; }.hero-grid{ grid-template-columns:1fr; padding-left:0; }.edge-label{ display:none; }.usp-layout{ grid-template-columns:1fr; gap:50px; }.why-grid{ grid-template-columns:1fr; }.usp-list{ grid-template-columns:1fr; }.usp-list li:nth-child(odd){ border-right:none; padding-right:12px; }.timeline::before{ left:22px; }.tl-item{ grid-template-columns:44px 1fr; }.tl-node{ grid-column:1; grid-row:1; }.tl-item:nth-child(odd) .tl-content, .tl-item:nth-child(even) .tl-content{ grid-column:2; grid-row:1; text-align:left; padding:30px 0 30px 26px; }.bar-row{ grid-template-columns:130px 1fr 46px; gap:14px; }.work-grid{ grid-template-columns:1fr; }.quote-grid{ grid-template-columns:1fr; }.contact-cards{ flex-direction:column; }.nav-links{ position:fixed; top:0; right:-100%; height:100vh; width:78%;background:var(--ink-2); flex-direction:column; justify-content:center; align-items:flex-start;padding:40px; gap:30px; transition:right .3s ease; border-left:1px solid var(--line);}.webdesign-screens, .hero h1 { max-width: 95%; }.nav-links.open{ right:0; }.burger{ display:flex; }.skyline-section  { min-height: 900px; background-position: top left; flex-direction: column;justify-content:space-between;}}@media (max-width: 560px){.wrap{ padding:0 32px; }section{ padding:100px 0; }.hero{ padding:80px 0 90px; }.webdesign-screens { max-width: 100%; }.logo-row{ padding:26px 20px 20px; }.logo-row img{ height:38px; }.skyline-inner{ padding:50px 22px 0;  }.skyline-caption{ padding:18px 22px; }.skyline-inner h2 { font-size:40px;}}