/* Clean, local design system. Base styles keep CV print rules and interactions. */
:root {
  --paper:#f3f5f2; --ink:#132b38; --muted:#52636b; --line:#c6d1d2;
  --accent:#106b82; --tint:#e4eded; --serif:"DM Sans",Arial,sans-serif;
}
html,body { overflow-x:clip; }
body { background:var(--paper); color:var(--ink); }
h1,h2,h3 { font-weight:700; }
h1,h2 { letter-spacing:-.05em; }
p { color:var(--muted); }
.serif { font-family:"DM Sans",Arial,sans-serif; font-style:normal; font-weight:700; color:var(--accent); }
.logo { font-weight:700; letter-spacing:-.05em; }
.header { border-bottom:1px solid var(--line); }
.nav .nav-contact,.button,.menu-toggle { border-radius:0; }
.nav .nav-contact,.button,.text-link { font-weight:700; }
.button { box-shadow:none; }
.section-code { display:block; color:var(--accent); font:700 10px/1.4 "DM Sans",Arial,sans-serif; letter-spacing:.16em; }
.section-heading { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:72px; align-items:end; margin-bottom:48px; }
.section-heading h2 { margin-top:0; font-size:clamp(39px,4.1vw,53px); line-height:1.07; }
.section-heading>p { max-width:370px; justify-self:end; font-size:15px; line-height:1.7; }

/* Opening: typography and a freeform connecting line. */
.opening { padding:96px 0 75px; }
.opening-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(270px,.65fr); gap:54px; align-items:end; }
.opening-heading h1 { margin:0; max-width:850px; font-size:clamp(59px,6.5vw,90px); line-height:.99; }
.opening-heading h1 span { color:var(--accent); }
.opening-intro { padding:9px 0 7px 28px; border-left:1px solid var(--line); }
.opening-intro p { margin:0 0 25px; font-size:17px; line-height:1.65; }
.opening-intro .button { display:flex; width:max-content; max-width:100%; }
.opening-intro .text-link { display:inline-flex; margin-top:17px; }
.flow-band { display:flex; justify-content:space-between; align-items:center; gap:28px; min-height:145px; margin-top:76px; padding:22px 45px; overflow:hidden; background:#102d3b; }
.flow-band p { max-width:650px; color:#eef7f6; font-size:clamp(22px,2.6vw,33px); font-weight:700; line-height:1.2; letter-spacing:-.04em; }
.flow-band svg { flex:none; width:300px; max-width:38%; fill:none; stroke:#80c5ce; stroke-width:2; }
.flow-band circle { fill:#80c5ce; stroke:none; }

/* Services as open, staggered blocks. */
.work-section { padding:82px 0 105px; }
.work-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 80px; }
.work-item { display:grid; grid-template-columns:minmax(0,1fr) 64px; column-gap:24px; padding-top:22px; border-top:1px solid var(--line); }
.work-item:nth-child(even) { margin-top:65px; }
.work-icon { grid-column:2; grid-row:1/3; width:54px; height:54px; margin:3px 0 0 auto; fill:none; stroke:var(--accent); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.work-item h3 { grid-column:1; grid-row:1; margin-bottom:15px; font-size:clamp(29px,3.3vw,42px); letter-spacing:-.045em; }
.work-item p { grid-column:1; grid-row:2; max-width:470px; font-size:15px; line-height:1.7; }

/* AI content: open columns and restrained contrast. */
.ai-section-v2 { padding:92px 0 95px; border-top:1px solid var(--line); background:var(--paper); }
.ai-section-v2 .section-heading { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px 50px; align-items:center; margin-bottom:58px; }
.ai-section-v2 .section-heading h2 { max-width:850px; margin:0 0 8px; font-size:clamp(48px,5.4vw,70px); }
.ai-section-v2 .section-heading>div { grid-column:1/-1; }
.ai-section-v2 .section-heading>p { grid-column:1; max-width:650px; margin:0; font-size:17px; }
.ai-art { grid-column:2; width:100%; height:auto; fill:var(--accent); }
.ai-art-grid { fill:none; stroke:#d3dedf; stroke-width:1; }
.ai-art-line { fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; }
.three-notes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:37px; margin-bottom:88px; }
.three-notes article { padding:21px 0 0; border-top:2px solid var(--ink); }
.three-notes article:nth-child(2) { transform:translateY(35px); }
.three-notes article:nth-child(3) { transform:translateY(70px); }
.three-notes h3 { margin:0 0 12px; font-size:22px; letter-spacing:-.025em; }
.three-notes p { font-size:14px; line-height:1.7; }
.ai-detail { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:38px; border-block:1px solid #b8c8c9; }
.ai-detail article { padding:30px 32px 34px 0; }
.ai-detail article+article { padding-left:32px; border-left:1px solid #b8c8c9; }
.ai-detail h3 { margin:0 0 10px; font-size:25px; letter-spacing:-.035em; }
.ai-detail p { font-size:14px; line-height:1.75; }
.section-link { margin-top:25px; }

/* Privacy: one strong dark section, with the practical details intact. */
.privacy-section-v2 { padding:98px 0 96px; background:#142d3b; color:#f3f8f7; }
.privacy-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:70px; }
.privacy-section-v2 .section-code { color:#81cad0; }
.privacy-lead h2 { margin:0 0 21px; font-size:clamp(46px,4.8vw,65px); line-height:1.04; }
.privacy-lead p { max-width:430px; color:#c7d9dc; font-size:16px; }
.privacy-art { display:block; width:100%; max-width:340px; height:auto; margin-top:52px; fill:none; stroke:#78bdc7; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.85; }
.privacy-art circle { fill:#142d3b; }
.privacy-points { border-top:2px solid #80b8c0; }
.privacy-points article { padding:23px 0; border-bottom:1px solid #5b7885; }
.privacy-points h3 { margin-bottom:7px; font-size:21px; }
.privacy-points p { color:#c7d9dc; font-size:14px; line-height:1.7; }
.privacy-bottom { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:50px; margin-top:6px; padding-top:28px; border-top:1px solid #5b7885; }
.privacy-bottom p { margin-top:13px; color:#c7d9dc; font-size:14px; line-height:1.75; }

/* Personal section uses Jan's own portrait. */
.about-section { display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:100px; align-items:center; padding-block:110px; }
.about-image { position:relative; height:520px; overflow:hidden; background:#d2dcdf; }
.about-image img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 28%; }
.about-image span { position:absolute; bottom:0; left:0; width:100%; padding:15px 18px; background:#102d3be8; color:#fff; font-size:10px; font-weight:700; letter-spacing:.15em; }
.about-copy h2 { max-width:620px; margin:0 0 25px; font-size:clamp(39px,4vw,52px); }
.about-copy>p { max-width:580px; font-size:16px; }
.about-steps { margin:30px 0 25px; border-top:1px solid var(--line); }
.about-steps p { padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; }
.about-steps strong { display:inline-block; min-width:125px; color:var(--ink); }

/* Logo matrix without card chrome. */
.tools-section { padding:88px 0 105px; border-top:1px solid var(--line); }
.tool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 60px; border-top:2px solid var(--ink); }
.tool-grid article { display:grid; grid-template-columns:126px 1fr; gap:22px; align-items:center; padding:25px 0; border-bottom:1px solid var(--line); }
.tool-grid img { display:block; width:112px; height:38px; object-fit:contain; object-position:left center; }
.tool-grid h3 { margin:0 0 8px; font-size:20px; }
.tool-grid p { font-size:13px; line-height:1.65; }
.tools-section .section-heading h2 { margin-top:0; }

/* Contact is part of the page flow, not a floating callout. */
.contact-section { padding:85px 0 95px; border-top:1px solid var(--line); background:#d9e7e8; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:85px; align-items:end; }
.contact-grid h2 { margin-top:0; font-size:clamp(48px,5vw,68px); }
.contact-art { display:block; width:280px; max-width:70%; height:auto; margin-top:36px; fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; }
.contact-art circle { fill:var(--accent); stroke:none; }
.contact-grid p { max-width:490px; margin-bottom:25px; font-size:16px; }
.contact-mail { display:flex; justify-content:space-between; gap:15px; max-width:510px; padding:8px 0 12px; border-bottom:2px solid var(--ink); text-decoration:none; font-size:clamp(20px,2.4vw,30px); font-weight:700; overflow-wrap:anywhere; }
.contact-grid .button { margin-top:22px; }
.footer { background:var(--paper); }

/* The CV and imprint retain their content and A4 rules. */
.cv-page { --accent:#245d79; }
.cv-sheet { border-radius:0; background:#fff; }
.cv-intro { border-bottom:2px solid var(--accent); }
.cv-intro h1,.cv-intro .role,.job time,.job .company { font-weight:700; }
.cv-intro h1,.legal h1 { margin-top:0; }
.portrait { border-radius:0; filter:none; box-shadow:none; outline:0; }
.job:before { border-radius:0; }
.legal h1 { font-weight:700; }
@media(max-width:1100px) {
  .opening-grid { gap:30px; }
  .opening-heading h1 { font-size:clamp(53px,6vw,76px); }
  .about-section { gap:55px; }
}
@media(max-width:900px) {
  .opening-grid { grid-template-columns:1fr; gap:35px; }
  .opening-intro { max-width:600px; }
  .section-heading { grid-template-columns:1fr; gap:14px; }
  .section-heading>p { grid-column:auto; justify-self:start; }
  .ai-section-v2 .section-heading { grid-template-columns:minmax(0,1fr) 240px; gap:20px; }
  .privacy-grid { gap:35px; }
  .about-section { gap:35px; }
}
@media(max-width:700px) {
  .opening { padding:58px 0 50px; }
  .opening-heading h1 { font-size:clamp(45px,9vw,65px); }
  .opening-intro { padding-left:20px; }
  .opening-intro p { font-size:16px; }
  .flow-band { flex-direction:column; align-items:flex-start; gap:8px; min-height:0; margin-top:52px; padding:27px; }
  .flow-band p { font-size:25px; }
  .flow-band svg { align-self:flex-end; width:160px; max-width:60%; height:54px; }
  .work-section,.tools-section { padding:65px 0 75px; }
  .section-heading { display:block; margin-bottom:30px; }
  .section-heading h2 { font-size:39px; }
  .section-heading>p { margin-top:18px; font-size:14px; }
  .ai-section-v2 .section-heading h2 { margin-bottom:20px; font-size:45px; }
  .ai-section-v2 .section-heading>p { font-size:15px; }
  .work-list { grid-template-columns:1fr; gap:0; }
  .work-item,.work-item:nth-child(even) { margin-top:0; padding:25px 0; }
  .work-item h3 { font-size:28px; }
  .work-item p { font-size:14px; }
  .work-icon { width:48px; height:48px; }
  .ai-section-v2,.privacy-section-v2 { padding:65px 0; }
  .ai-section-v2 .section-heading { display:block; }
  .three-notes { grid-template-columns:1fr; gap:0; margin-bottom:28px; }
  .three-notes article,.three-notes article:nth-child(2),.three-notes article:nth-child(3) { padding:20px 0; border-top:1px solid var(--line); transform:none; }
  .ai-detail { grid-template-columns:1fr; }
  .ai-detail article,.ai-detail article+article { padding:24px 0; border-left:0; }
  .ai-detail article+article { border-top:1px solid #b8c8c9; }
  .privacy-grid { grid-template-columns:1fr; }
  .privacy-lead h2 { font-size:45px; }
  .privacy-art { max-width:260px; margin-top:25px; }
  .privacy-bottom { grid-column:auto; grid-template-columns:1fr; gap:22px; }
  .about-section { grid-template-columns:1fr; gap:32px; padding-block:75px; }
  .about-image { height:420px; }
  .about-copy h2 { font-size:40px; }
  .tool-grid { grid-template-columns:1fr; }
  .tool-grid article { grid-template-columns:112px 1fr; min-height:0; gap:18px; padding:20px 0; }
  .contact-section { padding:70px 0; }
  .contact-grid { grid-template-columns:1fr; gap:25px; }
  .contact-grid h2 { font-size:48px; }
  .contact-art { margin-top:20px; }
}
@media(max-width:390px) {
  .opening-heading h1 { font-size:40px; }
  .section-heading h2 { font-size:35px; }
  .ai-section-v2 .section-heading h2 { font-size:38px; }
  .work-item h3 { font-size:26px; }
  .work-item { grid-template-columns:minmax(0,1fr) 52px; column-gap:12px; }
  .work-icon { width:44px; height:44px; }
  .tool-grid article { grid-template-columns:95px 1fr; gap:14px; }
  .tool-grid img { width:90px; }
  .contact-mail { font-size:20px; }
}
@media print {
  .cv-page .serif { color:var(--accent); }
  .cv-sheet { background:#fff; }
  .cv-intro { border-bottom:1px solid var(--line); }
  .portrait { border-radius:0; box-shadow:none; }
}