@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');

:root { --ink:#122335; --ink-soft:#31475b; --paper:#f7f8f5; --white:#fff; --line:#d7dedc; --accent:#e66a52; --accent-dark:#bd4b37; --mint:#dcebe7; --muted:#677580; --radius:12px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; font-size:16px; line-height:1.55; position:relative; }
body::before { content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background-image:url('assets/justicia-logo-tattoo-v5.png'); background-repeat:no-repeat; background-position:74% 52%; background-size:min(62vw, 780px); opacity:.035; }
.coming-soon-locked { min-height:100vh; display:grid; place-items:center; background:#122335; }
.coming-soon-locked::before { opacity:.08; filter:brightness(0) invert(1); background-position:78% 52%; }
.coming-soon-locked .site-header, .coming-soon-locked .site-footer { display:none; }
.coming-soon-page { width:100%; min-height:100vh; display:grid; place-items:center; padding:24px; position:relative; z-index:1; }
.coming-soon-panel { width:min(100%, 540px); padding:48px; color:var(--white); background:rgba(18,35,53,.84); border:1px solid rgba(255,255,255,.22); box-shadow:18px 18px 0 rgba(230,106,82,.72); }
.coming-soon-logo { width:120px; height:120px; object-fit:contain; filter:grayscale(1) brightness(0) invert(1); margin-bottom:28px; }
.coming-soon-panel .eyebrow { color:#ffb39f; }
.coming-soon-panel h1 { max-width:440px; font-size:clamp(40px, 7vw, 68px); margin-bottom:20px; }
.coming-soon-panel > p:not(.eyebrow) { max-width:430px; color:#d7e1e7; margin:0 0 30px; }
.coming-soon-form { display:grid; gap:10px; max-width:410px; }
.coming-soon-form label { font-size:13px; font-weight:700; }
.coming-soon-form input { width:100%; padding:13px 14px; border:1px solid #b9c7ce; border-radius:8px; background:#fff; color:var(--ink); font:inherit; }
.coming-soon-form .button { justify-self:start; margin-top:6px; }
.coming-soon-form .auth-result { color:#ffb39f; }
.coming-soon-note { color:#b9c7ce; display:block; margin-top:32px; }
a { color:inherit; text-decoration:none; }
.trap-field { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; }
.site-header { max-width:1240px; margin:auto; padding:22px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative; z-index:1; }
.brand { display:flex; align-items:center; gap:10px; font-size:13px; line-height:1.05; letter-spacing:.04em; }
.brand strong { font-size:16px; letter-spacing:-.03em; }
.brand-mark { width:35px; height:35px; display:grid; place-items:center; color:var(--white); background:var(--ink); border-radius:8px; font-weight:700; font-size:11px; letter-spacing:-.08em; }
.brand-logo { width:225px; height:225px; object-fit:contain; display:block; }
.footer-logo { width:72px; height:72px; display:block; margin-right:9px; }
.brand-mark.small { width:25px; height:25px; border-radius:6px; display:inline-grid; margin-right:8px; font-size:8px; vertical-align:middle; }
.main-nav { display:flex; gap:32px; color:var(--ink-soft); font-size:14px; }
.main-nav a:hover, .main-nav a.active { color:var(--accent-dark); }
.header-icon-link { display:inline-flex; align-items:center; gap:7px; }
.nav-icon { display:inline-grid; place-items:center; width:19px; height:19px; }
.nav-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.intake-header-button .nav-icon { width:17px; height:17px; }
.intake-header-button .button-icon { margin-left:2px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid transparent; border-radius:999px; padding:13px 20px; font-size:14px; font-weight:700; transition:.2s ease; cursor:pointer; }
.button:hover { transform:translateY(-1px); }
.button:active { transform:translateY(0); }
.button-dark { background:var(--ink); color:var(--white); }
.button-dark:hover { background:#203b54; }
.button-accent { background:var(--accent); color:var(--white); }
.button-accent:hover { background:var(--accent-dark); }
.button-outline { border-color:var(--ink); color:var(--ink); background:transparent; }
.button-outline:hover { background:var(--ink); color:var(--white); }
.button-small { padding:10px 15px; font-size:13px; }
.page { max-width:1240px; margin:auto; padding:70px 32px 110px; position:relative; z-index:1; }
.hero { min-height:570px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:72px; }
.eyebrow { color:var(--accent-dark); text-transform:uppercase; letter-spacing:.14em; font-weight:700; font-size:11px; margin:0 0 18px; }
h1,h2,h3 { margin:0; letter-spacing:-.055em; line-height:1.04; }
h1 { font-family:'Libre Baskerville',serif; font-size:clamp(42px,5.2vw,74px); max-width:720px; }
h2 { font-size:clamp(31px,4vw,52px); }
h3 { font-size:24px; }
.hero-copy p { max-width:510px; color:var(--ink-soft); font-size:18px; margin:25px 0 30px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero-note { margin-top:18px; color:var(--muted); font-size:12px; }
.hero-visual { position:relative; min-height:430px; display:flex; align-items:center; justify-content:center; }
.hero-image { width:100%; max-width:590px; aspect-ratio:16 / 9; object-fit:cover; border-radius:var(--radius); display:block; box-shadow:24px 24px 0 var(--mint); }
.hero-caption { position:absolute; left:8%; bottom:4%; display:flex; align-items:center; gap:9px; background:var(--white); border:1px solid var(--line); border-radius:999px; padding:11px 16px; font-size:12px; box-shadow:0 10px 22px rgba(18,35,53,.12); }
.hero-caption span:last-child { color:var(--muted); }
.paper-stack { width:min(100%,450px); background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:22px 22px 0 var(--mint); transform:rotate(2deg); }
.paper-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:23px; border-bottom:1px solid var(--line); font-size:12px; color:var(--muted); }
.case-number { color:var(--accent-dark); font-weight:700; }
.paper-stack h3 { margin:30px 0 24px; font-family:'Libre Baskerville',serif; font-size:28px; }
.signal { border-left:3px solid var(--accent); padding-left:14px; color:var(--ink-soft); font-size:14px; }
.mini-status { margin-top:35px; display:flex; align-items:center; gap:10px; font-weight:700; font-size:13px; }
.status-dot { width:10px; height:10px; border-radius:50%; background:#55a77f; }
.home-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.reassurance { display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:end; border-bottom:1px solid var(--line); }
.reassurance h2 { max-width:650px; }
.reassurance-copy { max-width:390px; color:var(--ink-soft); }
.differentiator-band { border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:.9fr 1.1fr; gap:55px; align-items:start; }
.differentiator-band h2 { max-width:490px; font-size:clamp(28px,3.2vw,43px); }
.differentiator-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.differentiator-grid article { border-left:2px solid var(--accent); padding-left:14px; }
.differentiator-grid strong { display:block; font-size:13px; margin-bottom:7px; }
.differentiator-grid p { margin:0; color:var(--ink-soft); font-size:13px; }
.text-link { color:var(--accent-dark); font-weight:700; font-size:14px; }
.text-link span { margin-left:7px; }
.strip-item { display:flex; gap:14px; align-items:flex-start; }
.strip-number { color:var(--accent-dark); font-family:'Libre Baskerville',serif; font-size:22px; }
.strip-item strong { display:block; font-size:14px; margin-bottom:3px; }
.strip-item span { color:var(--muted); font-size:13px; }
.section-intro { max-width:690px; margin-bottom:46px; }
.section-intro p { color:var(--ink-soft); font-size:17px; max-width:600px; margin-top:20px; }
.compact-hero { display:grid; grid-template-columns:1fr 1.35fr .48fr; gap:26px; align-items:center; min-height:246px; margin-bottom:36px; padding:10px 0 28px; border-bottom:1px solid var(--line); }
.compact-hero-copy h2 { max-width:430px; font-size:clamp(30px,3.8vw,51px); }
.compact-hero-copy > p:not(.eyebrow) { max-width:420px; color:var(--ink-soft); font-size:15px; margin-top:18px; }
.compact-hero-media img { width:100%; height:220px; object-fit:cover; display:block; border-radius:var(--radius); box-shadow:14px 14px 0 var(--mint); }
.route-werkwijze .compact-hero-media img { object-fit:contain; background:#f7faf8; }
.compact-hero-mark { align-self:stretch; display:grid; place-items:center; overflow:hidden; }
.compact-hero-mark img { width:100%; max-width:220px; height:250px; object-fit:contain; opacity:.09; }
.page-image-feature { display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:center; margin:0 0 52px; padding:0 0 34px; border-bottom:1px solid var(--line); }
.page-image-feature img { width:100%; aspect-ratio:4 / 3; object-fit:cover; display:block; border-radius:var(--radius); box-shadow:18px 18px 0 var(--mint); }
.page-image-feature h3 { font-size:30px; max-width:430px; margin:10px 0 14px; }
.page-image-feature p:not(.eyebrow) { max-width:410px; color:var(--ink-soft); font-size:15px; }
.package-feature { margin-bottom:34px; }
.route-werkwijze, .route-pakketten { padding-top:44px; }
.route-werkwijze .section-intro, .route-pakketten .section-intro { margin-bottom:30px; }
.route-werkwijze .page-image-feature { grid-template-columns:.95fr 1.05fr; margin-bottom:32px; padding-bottom:26px; }
.route-werkwijze .page-image-feature img { aspect-ratio:16 / 7; }
.route-werkwijze .steps { border-top:0; }
.route-werkwijze .step { padding-top:18px; }
.route-pakketten .page-image-feature { grid-template-columns:.82fr 1.18fr; gap:25px; margin-bottom:22px; padding-bottom:22px; }
.route-pakketten .page-image-feature img { aspect-ratio:16 / 6; }
.route-pakketten .page-image-feature h3 { font-size:27px; }
.route-pakketten .pricing-grid { gap:12px; }
.route-pakketten .price-card { padding:22px; }
.route-pakketten .package-image-wrap { margin:-22px -22px 18px; }
.route-pakketten .package-description { min-height:54px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.step { padding:28px 34px 20px 0; border-right:1px solid var(--line); margin-right:34px; }
.step:last-child { border:0; margin:0; }
.step-num { color:var(--accent-dark); font-size:12px; font-weight:700; letter-spacing:.1em; }
.step h3 { margin:20px 0 11px; }
.step p { color:var(--ink-soft); font-size:14px; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }
.price-card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; }
.price-card.featured { background:var(--ink); color:var(--white); border-color:var(--ink); transform:translateY(-10px); }
.package-image-wrap { position:relative; margin:-28px -28px 22px; }
.package-image-wrap img { width:100%; aspect-ratio:1 / .72; object-fit:cover; display:block; border-radius:var(--radius) var(--radius) 0 0; }
.package-badge { position:absolute; top:14px; left:14px; border-radius:999px; padding:7px 10px; background:var(--ink); color:var(--white); font-size:10px; letter-spacing:.11em; font-weight:700; }
.featured .package-badge { background:var(--accent); }
.price-card .tag { color:var(--accent); text-transform:uppercase; letter-spacing:.13em; font-size:10px; font-weight:700; }
.price-card h3 { margin:17px 0 10px; }
.price { font-family:'Libre Baskerville',serif; font-size:35px; margin:16px 0 22px; }
.price small { font-family:'DM Sans',sans-serif; color:var(--muted); font-size:13px; }
.featured .price small, .featured li { color:#cbd5d8; }
.price-card ul { padding:0; margin:0 0 28px; list-style:none; color:var(--ink-soft); font-size:14px; }
.price-card li { border-top:1px solid var(--line); padding:11px 0; }
.price-card li::before { content:'✓'; color:var(--accent); font-weight:700; margin-right:9px; }
.price-card .button { margin-top:auto; }
.package-description { color:var(--ink-soft); font-size:14px; min-height:66px; }
.featured .package-description { color:#d4dee2; }
.fine-print { color:var(--muted); font-size:12px; margin-top:20px; }
.subscription-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }
.subscription-card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:30px; display:flex; flex-direction:column; }
.subscription-image-wrap { margin:-30px -30px 22px; }
.subscription-image-wrap img { width:100%; height:150px; object-fit:cover; display:block; border-radius:var(--radius) var(--radius) 0 0; }
.subscription-card.featured { background:var(--ink); border-color:var(--ink); color:var(--white); transform:translateY(-10px); }
.subscription-badge { color:var(--accent-dark); font-size:10px; letter-spacing:.14em; font-weight:700; }
.featured .subscription-badge { color:var(--accent); }
.subscription-card h3 { margin:19px 0 6px; }
.subscription-price { font-family:'Libre Baskerville',serif; font-size:36px; margin:10px 0 11px; }
.subscription-price small { font-family:'DM Sans',sans-serif; color:var(--muted); font-size:12px; }
.subscription-card > strong { font-size:14px; }
.subscription-card ul { padding:0; margin:24px 0 28px; list-style:none; color:var(--ink-soft); font-size:14px; }
.subscription-card li { border-top:1px solid var(--line); padding:10px 0; }
.subscription-card li::before { content:'✓'; color:var(--accent); font-weight:700; margin-right:9px; }
.subscription-card .button { margin-top:auto; }
.subscription-note { margin-top:22px; padding:16px 18px; border-left:3px solid var(--accent); background:#fff6f2; color:var(--ink-soft); font-size:13px; }
.service-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:36px; margin-bottom:54px; align-items:start; }
.service-copy > img { width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:var(--radius); display:block; }
.service-list { border-top:1px solid var(--line); }
.service-list article { display:grid; grid-template-columns:52px 1fr; gap:16px; padding:22px 0; border-bottom:1px solid var(--line); }
.service-list h3 { font-size:21px; margin-bottom:5px; }
.service-list p { color:var(--ink-soft); font-size:14px; margin:0; }
.service-index { color:var(--accent-dark); font-family:'Libre Baskerville',serif; font-size:19px; }
.intake-layout { display:grid; grid-template-columns:.72fr 1.28fr; gap:72px; align-items:start; }
.intake-aside p { color:var(--ink-soft); max-width:370px; }
.intake-real-image { width:100%; max-width:440px; aspect-ratio:4 / 3; object-fit:cover; display:block; margin:24px 0 26px; border-radius:var(--radius); box-shadow:15px 15px 0 var(--mint); }
.secure-note { border-top:1px solid var(--line); margin-top:34px; padding-top:18px; font-size:13px; color:var(--muted); }
.intake-form { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:30px; }
.intake-form.intake-locked { position:relative; }
.intake-form.intake-locked::before { content:'Log in om uw intake te openen'; position:absolute; inset:0; z-index:2; display:grid; place-items:center; padding:24px; border-radius:var(--radius); background:rgba(247,248,245,.72); color:var(--ink); font-size:18px; font-weight:700; text-align:center; pointer-events:none; }
.intake-form.intake-locked > * { opacity:.5; }
.intake-login-callout { position:relative; margin-top:28px; padding:18px; border-left:3px solid var(--accent); background:#fff6f2; }
.intake-login-callout strong { display:block; }
.intake-login-callout p { margin:5px 0 12px; font-size:12px; }
.moving-arrow { display:block; color:var(--accent); font-size:28px; line-height:1; animation:arrow-pulse 1.2s ease-in-out infinite; transform-origin:center; }
@keyframes arrow-pulse { 0%,100% { transform:translateX(0); } 50% { transform:translateX(9px); } }
.login-state { margin-top:18px; color:#35685b !important; font-size:12px; font-weight:700; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { margin-bottom:20px; }
label { display:block; font-size:13px; font-weight:700; margin-bottom:7px; }
input, select, textarea { width:100%; border:1px solid #bdc8c7; border-radius:8px; padding:13px 14px; color:var(--ink); background:#fbfcfa; font:inherit; outline:none; }
input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px #f7d2ca; }
textarea { min-height:112px; resize:vertical; }
.record-box { border:1px dashed #a9b8b4; border-radius:10px; padding:20px; background:#f4f8f5; }
.record-line { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.record-title { font-weight:700; font-size:14px; }
.record-help { color:var(--muted); font-size:12px; margin-top:5px; }
.record-button { width:58px; height:58px; border:0; border-radius:50%; background:var(--accent); color:white; font-size:21px; cursor:pointer; box-shadow:0 0 0 7px rgba(230,106,82,.13); transition:.2s ease; }
.record-button:hover { transform:scale(1.03); }
.record-button.recording { box-shadow:0 0 0 7px rgba(230,106,82,.17), 0 0 28px rgba(230,106,82,.65); animation:record-glow 1.3s ease-in-out infinite; }
.record-button.recording span { display:block; width:18px; height:18px; border-radius:4px; background:#fff; margin:auto; font-size:0; }
@keyframes record-glow { 0%,100% { box-shadow:0 0 0 7px rgba(230,106,82,.13), 0 0 16px rgba(230,106,82,.3); } 50% { box-shadow:0 0 0 11px rgba(230,106,82,.08), 0 0 30px rgba(230,106,82,.75); } }
.record-box { position:relative; }
.record-waveform { position:relative; display:flex; align-items:center; justify-content:center; gap:3px; height:72px; margin-top:18px; padding:0 8px; border-top:1px solid #efd3cc; border-bottom:1px solid #efd3cc; opacity:.38; }
.record-waveform::before { content:''; position:absolute; left:28px; right:28px; height:1px; background:#d7b8b3; }
.record-waveform span { position:relative; z-index:1; width:3px; height:8px; border-radius:99px; background:#7c2430; opacity:0; transition:height .08s linear, opacity .12s ease; }
.record-waveform span:nth-child(3n) { height:17px; }
.record-waveform span:nth-child(5n) { height:27px; }
.record-waveform.recording { opacity:1; }
.record-waveform.sound-active span { opacity:1; background:var(--accent); }
.record-waveform.sound-active span:nth-child(3n) { background:#7c2430; }
@keyframes audio-wave { 0%,100% { transform:scaleY(.55); } 50% { transform:scaleY(1.9); } }
.record-controls { display:flex; align-items:center; justify-content:center; gap:11px; margin-top:17px; }
.control-button { width:38px; height:38px; border:1px solid #bdc8c7; border-radius:50%; background:var(--white); color:var(--ink); font-size:15px; cursor:pointer; }
.control-button:disabled { opacity:.42; cursor:not-allowed; }
.control-button:hover, .control-button.active { border-color:var(--accent); color:var(--accent-dark); background:#fff6f2; }
.retention-note { display:none; color:#7c2430; font-size:12px; margin-top:13px; font-weight:600; }
.retention-note.visible { display:block; }
.payment-plan { display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; margin:0 0 22px; padding:15px 16px; border-left:3px solid var(--accent); background:#fff6f2; color:var(--ink-soft); font-size:13px; }
.payment-plan strong { color:var(--ink); width:100%; }
.payment-plan b { color:var(--accent-dark); }
.record-time { font-variant-numeric:tabular-nums; color:var(--accent-dark); font-weight:700; }
.consent { display:flex; gap:10px; align-items:flex-start; font-size:12px; color:var(--muted); margin:8px 0 22px; }
.consent input { width:auto; margin-top:4px; }
.form-footer { display:flex; justify-content:space-between; align-items:center; gap:18px; border-top:1px solid var(--line); padding-top:22px; }
.form-footer span { color:var(--muted); font-size:12px; }
.cases-list { border-top:1px solid var(--line); }
.case-row { display:grid; grid-template-columns:110px 1fr auto; gap:20px; align-items:center; padding:22px 0; border-bottom:1px solid var(--line); }
.case-type { color:var(--accent-dark); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.case-row h3 { font-size:19px; letter-spacing:-.025em; }
.case-row p { margin:3px 0 0; color:var(--muted); font-size:13px; }
.case-status { background:var(--mint); color:#35685b; border-radius:999px; padding:7px 11px; font-weight:700; font-size:12px; }
.case-topic-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.case-topic-card { display:grid; grid-template-columns:145px 1fr; gap:18px; align-items:center; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.case-topic-card img { width:145px; height:170px; object-fit:cover; }
.case-topic-card > div { padding:18px 18px 18px 0; }
.case-topic-card p { color:var(--ink-soft); font-size:13px; margin:9px 0 16px; }
.letter-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.letter-card { position:relative; overflow:hidden; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
.letter-card::before, .letter-modal::before { content:''; position:absolute; inset:0; pointer-events:none; background:url('assets/justicia-logo-tattoo-v5.png') no-repeat 88% 92% / 190px auto; opacity:.035; }
.letter-card > *, .letter-modal > * { position:relative; z-index:1; }
.letterhead { display:flex; align-items:center; gap:10px; padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid var(--line); color:var(--ink); font-weight:700; font-size:13px; line-height:1.05; }
.letterhead img { width:42px; height:42px; object-fit:contain; }
.letterhead strong { font-size:15px; }
.letter-label { color:var(--accent-dark); font-size:10px; font-weight:700; letter-spacing:.12em; margin-bottom:21px; }
.letter-card h3 { font-family:'Libre Baskerville',serif; font-size:21px; line-height:1.22; letter-spacing:-.035em; margin-bottom:20px; }
.letter-card p { color:var(--ink-soft); font-size:13px; }
.letter-card .letter-meta { color:var(--muted); font-size:12px; line-height:1.6; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:13px 0; }
.letter-card .text-link { display:inline-block; margin-top:18px; }
.prototype-note { margin-top:20px; padding:15px 18px; border-left:3px solid var(--accent); background:#fff6f2; color:var(--ink-soft); font-size:13px; }
.legal-page { max-width:900px; }
.legal-page h3 { font-size:22px; margin:34px 0 8px; }
.legal-page > p { max-width:720px; color:var(--ink-soft); }
.auth-page { max-width:760px; }
.auth-form { max-width:480px; padding:28px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); display:grid; gap:12px; }
.auth-form .button { margin-top:8px; justify-self:start; }
.auth-result { min-height:22px; margin:4px 0 0; color:var(--accent-dark); font-size:13px; }
.protected-access { margin-top:22px; color:var(--muted); font-size:12px; }
.protected-access a { color:var(--accent-dark); font-weight:700; }
.staff-auth { border-top:3px solid var(--ink); }
.demo-access-button { margin-top:14px; }
.field-help { color:var(--muted); font-size:12px; margin:6px 0 0; }
.demo-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.dashboard-page { max-width:1240px; }
.dashboard-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:42px; }
.security-pill, .status-pill { display:inline-flex; align-items:center; width:max-content; border-radius:999px; padding:8px 12px; background:var(--mint); color:#35685b; font-size:12px; font-weight:700; }
.dashboard-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.dashboard-card, .review-card, .audit-card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.dashboard-card h3, .review-card h3, .audit-card h3 { margin:10px 0; font-size:22px; }
.dashboard-card p, .review-card p, .audit-card p { color:var(--ink-soft); font-size:14px; }
.card-kicker { color:var(--accent-dark); font-size:10px; font-weight:700; letter-spacing:.12em; }
.dashboard-card .button { margin-top:16px; }
.credit-meter { height:8px; margin:22px 0 8px; background:var(--mint); border-radius:99px; overflow:hidden; }
.credit-meter span { display:block; height:100%; background:var(--accent); }
.dashboard-card .text-link { display:block; margin-top:20px; border:0; background:transparent; padding:0; cursor:pointer; font:inherit; text-align:left; }
.portal-subtitle { color:var(--ink-soft); margin:12px 0 0; }
.portal-tabs { display:flex; gap:8px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.portal-tab { border:0; border-bottom:3px solid transparent; background:transparent; padding:12px 15px; color:var(--muted); font:inherit; font-weight:700; cursor:pointer; }
.portal-tab.active, .portal-tab:hover { color:var(--ink); border-color:var(--accent); }
.case-progress { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin:24px 0 18px; }
.progress-step { padding-top:9px; border-top:3px solid var(--line); color:var(--muted); font-size:11px; }
.progress-step.done { border-color:#69a58d; color:#35685b; }
.progress-step.current { border-color:var(--accent); color:var(--accent-dark); }
.upload-drop { display:flex; align-items:center; gap:12px; min-height:82px; padding:16px; border:1px dashed #a9b8b4; border-radius:9px; background:#f4f8f5; cursor:pointer; }
.upload-drop input { display:none; }
.upload-drop strong, .upload-drop small { display:block; }
.upload-drop small, .upload-result { color:var(--muted); font-size:12px; }
.upload-result { min-height:18px; }
.contact-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.contact-actions .button { padding:10px 13px; font-size:12px; }
.account-form { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.account-form .field { margin:0; }
.account-form .button, .account-result { grid-column:1 / -1; justify-self:start; }
.withdraw-card { border-color:#e7c7c0; }
.admin-page { max-width:none; padding:38px 32px 100px; }
.admin-shell { max-width:1360px; margin:auto; display:grid; grid-template-columns:220px 1fr; gap:28px; }
.admin-sidebar { min-height:680px; padding:22px 15px; background:var(--ink); color:#c8d4d8; border-radius:12px; display:flex; flex-direction:column; }
.admin-sidebar-brand { display:flex; align-items:center; gap:10px; padding:4px 8px 25px; color:var(--white); }
.admin-sidebar-brand strong, .admin-sidebar-brand small { display:block; }
.admin-sidebar-brand small { color:#a9bbc3; font-size:11px; margin-top:2px; }
.admin-mark { display:grid; place-items:center; width:38px; height:38px; border:1px solid #6d8797; border-radius:9px; color:var(--white); font-size:12px; font-weight:700; }
.admin-side-nav { display:flex; flex-direction:column; gap:4px; }
.admin-side-nav a, .admin-side-nav button { border:0; border-radius:7px; padding:10px 11px; text-align:left; color:#c8d4d8; background:transparent; font:inherit; font-size:13px; cursor:pointer; }
.admin-side-nav a:hover, .admin-side-nav a.active, .admin-side-nav button:hover { background:#203b54; color:var(--white); }
.side-label { margin:16px 10px 5px; color:#8298a4; font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; }
.admin-security { margin-top:auto; padding:13px 11px; border-top:1px solid #31485b; color:#9db2bb; font-size:11px; line-height:1.7; }
.admin-security strong { color:var(--white); }
.admin-main { min-width:0; }
.admin-topbar { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:28px; }
.admin-topbar .eyebrow { margin-bottom:8px; }
.admin-avatar { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--accent); color:var(--white); font-weight:700; }
.admin-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.admin-metrics article, .admin-panel { border:1px solid var(--line); background:var(--white); border-radius:10px; }
.admin-metrics article { padding:18px; }
.admin-metrics span, .admin-metrics small { display:block; color:var(--muted); font-size:12px; }
.admin-metrics strong { display:block; margin:8px 0 3px; font-size:25px; letter-spacing:-.04em; }
.admin-metrics .metric-alert { color:var(--accent-dark); font-weight:700; }
.admin-content-grid { display:grid; grid-template-columns:1.4fr .8fr; gap:16px; }
.admin-panel { padding:22px; }
.admin-cases { grid-row:span 2; }
.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.panel-heading h3 { margin-top:7px; font-size:21px; }
.admin-filter-row { display:grid; grid-template-columns:1fr 180px; gap:8px; margin-bottom:15px; }
.admin-filter-row input, .admin-filter-row select { padding:10px 12px; font-size:12px; }
.admin-table { border-top:1px solid var(--line); }
.table-row { display:grid; grid-template-columns:1.35fr .8fr 1fr .6fr; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); font-size:12px; }
.table-row small { display:block; color:var(--muted); margin-top:2px; }
.table-row a { color:var(--accent-dark); font-weight:700; }
.table-head { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.setting-list { border-top:1px solid var(--line); }
.setting-list button { display:flex; justify-content:space-between; width:100%; padding:13px 0; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink-soft); font:inherit; text-align:left; cursor:pointer; }
.setting-list button:hover { color:var(--accent-dark); }
.security-list { display:grid; gap:12px; }
.security-list div { display:flex; justify-content:space-between; gap:15px; padding-bottom:12px; border-bottom:1px solid var(--line); font-size:12px; }
.security-list span { color:var(--muted); text-align:right; }
.chart-bars { display:flex; align-items:end; justify-content:space-around; height:190px; padding:18px 4px 0; border-bottom:1px solid var(--line); gap:14px; }
.chart-bars span { position:relative; display:flex; align-items:center; justify-content:flex-end; flex:1; min-height:26px; flex-direction:column; background:var(--accent); border-radius:5px 5px 0 0; }
.chart-bars b { position:absolute; top:-21px; font-size:12px; }
.chart-bars i { position:absolute; bottom:-25px; white-space:nowrap; color:var(--muted); font-size:10px; font-style:normal; }
.chart-note { margin:40px 0 0; color:var(--muted); font-size:11px; }
.admin-lead { max-width:620px; margin:8px 0 0; color:var(--muted); font-size:13px; }
.settings-layout { display:grid; gap:16px; }
.settings-section { padding:22px; border:1px solid var(--line); border-radius:10px; background:var(--white); }
.settings-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding-bottom:17px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.settings-section-head h3 { margin-top:7px; font-size:20px; }
.settings-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:15px; }
.settings-grid label { display:grid; gap:7px; color:var(--ink-soft); font-size:12px; font-weight:700; }
.settings-grid input, .settings-grid select, .settings-grid textarea { width:100%; min-width:0; border:1px solid #c9d4d1; border-radius:7px; background:#fbfcfb; color:var(--ink); padding:11px 12px; font:inherit; font-weight:400; }
.settings-grid textarea { resize:vertical; line-height:1.45; }
.settings-wide { grid-column:1 / -1; }
.toggle-row { display:flex !important; grid-template-columns:none !important; align-items:flex-start; gap:10px !important; padding:12px; border:1px solid var(--line); border-radius:8px; background:#f7faf8; cursor:pointer; }
.toggle-row input { width:17px; height:17px; margin:1px 0 0; accent-color:var(--accent); }
.toggle-row span { display:grid; gap:3px; }
.toggle-row strong { color:var(--ink); font-size:13px; }
.toggle-row small { color:var(--muted); font-size:11px; line-height:1.45; font-weight:400; }
.settings-prices input { font-weight:700; }
.integration-list { display:grid; gap:0; border-top:1px solid var(--line); }
.integration-list > div { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }
.integration-list strong, .integration-list small { display:block; }
.integration-list small { margin-top:3px; color:var(--muted); font-size:11px; font-weight:400; }
.integration-list b { padding:5px 8px; border-radius:99px; font-size:10px; white-space:nowrap; }
.integration-demo { background:#eef3f1; color:#56736a; }
.integration-pending { background:#fff1eb; color:var(--accent-dark); }
.integration-ready { background:#e7f3ed; color:#2c705c; }
.settings-result { min-height:21px; margin:0; color:var(--accent-dark); font-weight:700; font-size:13px; }
.dashboard-note { margin-top:20px; padding:15px 18px; border-left:3px solid var(--accent); background:#fff6f2; color:var(--ink-soft); font-size:13px; }
.portal-proof, .collaboration-proof { display:grid; grid-template-columns:.72fr 1.28fr; gap:26px; align-items:center; margin:8px 0 34px; padding:22px; border:1px solid var(--line); border-radius:10px; background:#f7faf8; }
.portal-proof h3, .collaboration-proof h3 { margin:8px 0 10px; font-size:24px; }
.portal-proof p, .collaboration-proof p { color:var(--ink-soft); font-size:14px; }
.portal-proof img, .collaboration-proof img { display:block; width:100%; max-height:430px; object-fit:contain; object-position:center; border:1px solid #d5dfdc; background:var(--white); box-shadow:12px 12px 0 var(--mint); }
.collaboration-page { padding-top:42px; }
.collaboration-hero { display:grid; grid-template-columns:.85fr 1.15fr; gap:42px; align-items:center; min-height:390px; margin-bottom:38px; }
.collaboration-copy h2 { max-width:610px; font-size:clamp(34px,4.3vw,60px); }
.collaboration-copy > p:not(.eyebrow) { max-width:510px; margin:18px 0 26px; color:var(--ink-soft); font-size:16px; }
.collaboration-hero-media img { display:block; width:100%; height:390px; object-fit:cover; border-radius:var(--radius); box-shadow:16px 16px 0 var(--mint); }
.collaboration-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:36px 0; }
.collaboration-grid article { padding:22px; border-top:3px solid var(--accent); background:var(--white); }
.collaboration-number { color:var(--accent-dark); font-size:12px; font-weight:700; letter-spacing:.12em; }
.collaboration-grid h3 { margin:20px 0 8px; font-size:19px; }
.collaboration-grid p { color:var(--ink-soft); font-size:13px; }
.collaboration-form { display:grid; grid-template-columns:.72fr 1.28fr; gap:28px; margin-top:42px; padding:26px; border:1px solid var(--line); border-radius:10px; background:var(--ink); color:var(--white); }
.collaboration-form h3 { margin:8px 0; font-size:26px; }
.collaboration-form p:not(.eyebrow) { color:#c3d0d7; font-size:13px; }
.collaboration-fields { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.collaboration-fields label { display:grid; gap:7px; color:#dce6e8; font-size:12px; font-weight:700; }
.collaboration-fields input, .collaboration-fields textarea { width:100%; border:1px solid #496174; border-radius:7px; background:#1d3449; color:var(--white); padding:11px 12px; font:inherit; font-weight:400; }
.collaboration-fields textarea { resize:vertical; }
.collaboration-fields label:nth-child(4), .collaboration-fields button, .collaboration-fields .auth-result { grid-column:1 / -1; }
.collaboration-fields .auth-result { min-height:18px; margin:0; color:#ffb39f; }
.review-layout { display:grid; grid-template-columns:1.5fr .8fr; gap:16px; align-items:start; }
.review-top { display:flex; justify-content:space-between; gap:20px; align-items:center; }
.review-audio { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:28px 0; padding:18px; border:1px solid var(--line); background:#f4f8f5; border-radius:9px; }
.review-audio strong, .review-audio span { display:block; }
.review-audio span { color:var(--muted); font-size:12px; margin-top:4px; }
.decision-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.decision-button { border:1px solid var(--line); border-radius:8px; background:var(--white); color:var(--ink); padding:13px 12px; cursor:pointer; font:inherit; font-weight:700; }
.decision-button:hover { border-color:var(--accent); color:var(--accent-dark); background:#fff6f2; }
.review-result { min-height:22px; margin-bottom:0; font-weight:700; color:var(--accent-dark) !important; }
.review-extras { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px; }
.review-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0; }
.review-detail-grid span { color:var(--muted); font-size:12px; }
.review-detail-grid strong { display:block; color:var(--ink); margin-bottom:2px; }
.file-list { border-top:1px solid var(--line); margin-top:18px; }
.file-list button { display:flex; justify-content:space-between; gap:10px; width:100%; padding:12px 0; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink-soft); font:inherit; font-size:12px; text-align:left; cursor:pointer; }
.file-list button span { color:var(--accent-dark); font-weight:700; }
.reviewer-response form { display:grid; gap:9px; }
.reviewer-response textarea { min-height:90px; }
.decision-button.selected { border-color:var(--accent); background:#fff6f2; color:var(--accent-dark); }
.control-button.locked { border-color:#b9c5c4; color:var(--muted); background:#eef2f0; font-size:11px; width:auto; padding:0 12px; border-radius:8px; }
.audit-card #audit-log { border-top:1px solid var(--line); margin-top:18px; }
.audit-card #audit-log > div { display:flex; flex-direction:column; gap:3px; padding:12px 0; border-bottom:1px solid var(--line); font-size:13px; }
.audit-card #audit-log span { color:var(--muted); font-size:11px; }
.contact-block { border-top:1px solid var(--line); margin-top:30px; padding-top:18px; color:var(--muted); font-size:13px; }
.contact-block strong { color:var(--ink); }
.letter-open { border:0; padding:0; background:transparent; cursor:pointer; font:inherit; text-align:left; }
.modal-backdrop { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:24px; background:rgba(18,35,53,.64); }
.letter-modal { position:relative; max-width:780px; max-height:88vh; overflow:auto; background:var(--white); border-radius:var(--radius); padding:42px 48px 52px; box-shadow:0 24px 70px rgba(18,35,53,.3); }
.modal-close { position:absolute; right:18px; top:14px; width:36px; height:36px; border:1px solid var(--line); border-radius:50%; background:var(--white); color:var(--ink); font-size:23px; line-height:1; cursor:pointer; }
.letter-modal h2 { font-family:'Libre Baskerville',serif; font-size:32px; max-width:610px; margin:14px 0 24px; }
.letter-modal .letterhead { margin-bottom:12px; }
.letter-contact { display:flex; justify-content:space-between; gap:35px; padding:18px 0 20px; border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:12px; line-height:1.55; }
.letter-contact strong, .letter-details strong { color:var(--ink); }
.letter-details { display:grid; grid-template-columns:1fr 1fr; gap:8px 28px; padding:18px 0; border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:12px; }
.letter-subject { padding:22px 0 4px; font-size:14px; color:var(--ink); }
.modal-meta { padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); font-size:13px; line-height:1.65; }
.full-letter { margin-top:28px; color:var(--ink-soft); font-size:15px; }
.full-letter p { margin:0 0 12px; }
.site-footer { width:100%; max-width:none; margin:auto; padding:42px max(32px, calc((100% - 1176px) / 2)) 30px; border-top:1px solid #263d52; display:grid; grid-template-columns:1.25fr .9fr 1.1fr 1fr; gap:30px; color:#c3d0d7; font-size:12px; position:relative; z-index:1; background:var(--ink); }
.footer-brand { display:flex; flex-direction:column; align-items:flex-start; color:var(--white); font-weight:700; font-size:14px; line-height:1.05; }
.footer-logo-box { width:220px; height:220px; display:grid; place-items:center; flex:none; border-radius:8px; background:var(--ink); }
.footer-brand strong { font-size:17px; }
.footer-column { display:flex; flex-direction:column; gap:9px; font-size:14px; }
.footer-column strong { color:var(--white); font-size:14px; margin-bottom:7px; }
.footer-column a:hover { color:var(--accent); }
.footer-social { color:var(--accent-dark); font-weight:700; margin-top:6px; }
.footer-logo { width:200px; height:200px; filter:grayscale(1) brightness(0) invert(1); }
.footer-brand-name { font-size:22px; line-height:1.02; margin-top:14px; }
.footer-quote { color:#c3d0d7; font-size:15px; line-height:1.4; margin-top:20px; max-width:220px; }
.button-icon { width:27px; height:27px; display:inline-grid; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:18px; line-height:1; }
.button-icon, .control-button, .record-button { position:relative; }
[data-tooltip]::after { content:attr(data-tooltip); position:absolute; left:50%; bottom:calc(100% + 10px); z-index:30; width:max-content; max-width:190px; padding:7px 9px; border-radius:6px; background:var(--ink); color:var(--white); font-size:11px; font-weight:600; line-height:1.25; opacity:0; pointer-events:none; transform:translate(-50%, 4px); transition:opacity .15s ease, transform .15s ease; }
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity:1; transform:translate(-50%, 0); }
.footer-bottom { grid-column:1 / -1; display:flex; justify-content:space-between; gap:20px; border-top:1px solid #31485b; padding-top:20px; margin-top:8px; font-size:13px; }
.toast { position:fixed; right:24px; bottom:24px; background:var(--ink); color:white; padding:15px 18px; border-radius:9px; font-size:14px; box-shadow:0 10px 30px rgba(18,35,53,.2); }
@media (max-width:760px) { .site-header { padding:18px 20px; } .brand-logo { width:86px; height:86px; } .main-nav { display:none; } .site-header .button { margin-left:auto; } .page { padding:45px 20px 75px; } .route-werkwijze, .route-pakketten { padding-top:34px; } .hero, .intake-layout, .reassurance, .service-layout, .page-image-feature { grid-template-columns:1fr; gap:27px; } .route-werkwijze .page-image-feature, .route-pakketten .page-image-feature { gap:20px; margin-bottom:28px; padding-bottom:22px; } .route-werkwijze .page-image-feature img, .route-pakketten .page-image-feature img { aspect-ratio:16 / 9; } .hero { min-height:auto; } .hero-visual { min-height:330px; } .hero-image { box-shadow:12px 12px 0 var(--mint); } .hero-caption { left:4%; bottom:2%; } .paper-stack { transform:none; } .home-strip, .steps, .pricing-grid, .subscription-grid, .letter-grid, .dashboard-grid, .review-layout, .review-extras, .account-form { grid-template-columns:1fr; } .step { border-right:0; border-bottom:1px solid var(--line); margin:0; padding:17px 0; } .route-werkwijze .steps { border-top:1px solid var(--line); } .price-card.featured, .subscription-card.featured { transform:none; } .route-pakketten .price-card { padding:20px; } .route-pakketten .package-image-wrap { margin:-20px -20px 16px; } .form-row { grid-template-columns:1fr; gap:0; } .case-row { grid-template-columns:1fr; gap:8px; } .case-status { justify-self:start; } .site-footer { grid-template-columns:1fr 1fr; gap:26px 18px; padding:32px 20px 25px; } .footer-bottom { grid-column:1 / -1; flex-direction:column; gap:5px; } .dashboard-head { align-items:flex-start; flex-direction:column; } .decision-grid { grid-template-columns:1fr; } h1 { font-size:42px; } .form-footer { align-items:flex-start; flex-direction:column; } .letter-modal { padding:28px 22px; } .letter-modal h2 { font-size:25px; } .admin-page { padding:24px 12px 60px; } .admin-shell { grid-template-columns:1fr; } .admin-sidebar { min-height:auto; } .admin-side-nav { display:grid; grid-template-columns:1fr 1fr; } .admin-sidebar-brand, .admin-security { grid-column:1 / -1; } .admin-metrics, .admin-content-grid { grid-template-columns:1fr 1fr; } .admin-cases { grid-row:auto; grid-column:1 / -1; } .table-row { grid-template-columns:1.4fr .8fr; } .table-row > :nth-child(3), .table-row > :nth-child(4), .table-head > :nth-child(3), .table-head > :nth-child(4) { display:none; } .page-image-feature img, .intake-real-image { box-shadow:10px 10px 0 var(--mint); } }
@media (max-width:760px) { .differentiator-band { grid-template-columns:1fr; gap:28px; } .differentiator-grid { grid-template-columns:1fr; gap:18px; } }
@media (max-width:480px) { .admin-metrics, .admin-content-grid { grid-template-columns:1fr; } .admin-cases { grid-column:auto; } .admin-filter-row { grid-template-columns:1fr; } .contact-actions { flex-direction:column; align-items:stretch; } .case-progress { gap:3px; } .progress-step { font-size:10px; } }
@media (max-width:760px) { .settings-grid { grid-template-columns:1fr; } .settings-wide { grid-column:auto; } .settings-section { padding:17px; } .settings-section-head { flex-direction:column; gap:10px; } .admin-topbar { align-items:flex-start; flex-direction:column; gap:16px; } .admin-topbar > .button { align-self:stretch; justify-content:center; } .integration-list > div { align-items:flex-start; } }
@media (max-width:760px) { body::before { background-position:50% 55%; background-size:120vw; opacity:.025; } .site-header .brand-logo { width:135px; height:135px; } }
@media (max-width:760px) { .footer-logo-box { width:160px; height:160px; } .footer-logo { width:145px; height:145px; } }
@media (max-width:760px) { .route-werkwijze .page-image-feature, .route-pakketten .page-image-feature { grid-template-columns:1fr; } }
@media (max-width:760px) { .compact-hero { grid-template-columns:1fr; gap:20px; min-height:0; margin-bottom:28px; padding-top:0; } .compact-hero-media img { height:190px; } .compact-hero-mark { display:none; } .case-topic-grid { grid-template-columns:1fr; } .case-topic-card { grid-template-columns:110px 1fr; } .case-topic-card img { width:110px; height:150px; } .case-topic-card > div { padding:14px 14px 14px 0; } .subscription-card { padding:20px; } .subscription-image-wrap { margin:-20px -20px 18px; } .subscription-image-wrap img { height:130px; } }
@media (max-width:760px) { .portal-proof, .collaboration-proof, .collaboration-hero, .collaboration-form { grid-template-columns:1fr; gap:20px; } .portal-proof, .collaboration-proof { padding:17px; } .portal-proof img, .collaboration-proof img { box-shadow:8px 8px 0 var(--mint); } .collaboration-hero { min-height:0; margin-bottom:25px; } .collaboration-hero-media img { height:270px; box-shadow:10px 10px 0 var(--mint); } .collaboration-grid { grid-template-columns:1fr; margin:26px 0; } .collaboration-form { padding:18px; } .collaboration-fields { grid-template-columns:1fr; } .collaboration-fields label:nth-child(4), .collaboration-fields button, .collaboration-fields .auth-result { grid-column:auto; } }