/* FreekEnergy case: editorial layout and natural image proportions. */
.wrap{max-width:1240px;padding-inline:40px}
.top{border-bottom:1px solid var(--rule)}
.top .wrap{padding-block:20px}
.chero .wrap{grid-template-columns:1.35fr .8fr;gap:64px;padding-block:48px 88px}
.chero .dots{opacity:.35}
.chero h1{font-size:clamp(38px,4.3vw,62px);line-height:1.04;max-width:20ch;letter-spacing:-.035em}
.chero h1 u{border:0;color:var(--accent)}
.chero .pic{aspect-ratio:4/4.4;border-radius:12px}
.chero .pic img{object-position:50% 42%}
.chero p{max-width:45ch;font-size:18px}
.kruim{margin-bottom:24px;color:var(--mid)}
.lab{white-space:normal;line-height:1.6;color:#66736b}
.cells{border-radius:12px;box-shadow:0 10px 30px #0e1a1507}
.cells>div{padding:30px 32px}
.cells b{font-size:54px;color:var(--accent)}
.cells .was{color:#68736d}.cells .d{max-width:26ch;font-size:16px}
.body{padding-block:64px 80px}
.shell{grid-template-columns:205px minmax(0,1fr);gap:48px;border:0;border-radius:0;background:none;overflow:visible;align-items:start}
.side{position:sticky;top:24px;padding:0 22px 0 0;border-right:1px solid var(--rule);background:none}
.side .grp+.grp{margin-top:28px}.side dd{font-size:14px}.side nav a{font-size:13px}
.art{padding:0;min-width:0}
.tldr{padding:28px 30px;border-radius:10px;background:#fff}
.tldr li{grid-template-columns:90px minmax(0,1fr);font-size:16px;gap:16px}
.deel{padding-top:44px;margin-top:44px;scroll-margin-top:24px}
.deel h2{font-size:clamp(29px,3vw,39px);line-height:1.12;max-width:29ch}
.deel h2 span{color:#69766e}.deel p{font-size:18px;line-height:1.75;max-width:65ch}
.fig{border-radius:10px;background:white;margin-top:30px}
.fig img{width:100%;height:auto;max-width:100%;display:block}
.cap{font-size:10px;line-height:1.5;letter-spacing:.035em;flex-wrap:wrap;color:#627067;background:#fafaf7;gap:4px 14px}
.cap span:first-child{min-width:0}.cap span:last-child{margin-left:auto;flex-shrink:0}
.res li{grid-template-columns:125px minmax(0,1fr);padding:18px 0;font-size:17px}
.panel{border-radius:10px;padding:32px;background:#153f30}.panel::after{display:none}
.panel .big{font-size:64px;line-height:1.1}.panel .big small{font-size:23px;display:inline-block}.panel p{font-size:16px}
.screens{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:18px;align-items:start}
.screens figure{border-radius:10px;background:#e6e8e1}
.screens img{width:100%;height:auto;object-fit:contain;display:block}
.screens figure:nth-child(2) img{max-height:660px;object-fit:contain;background:#e6e8e1}
.media-open{padding:0;border:0;display:block;width:100%;background:transparent;cursor:zoom-in;position:relative}
.media-open::after{content:'↗';position:absolute;right:10px;top:10px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ffffffed;color:#153f30;border:1px solid #d2d7d1;font:20px var(--sans)}
.media-open:hover::after{background:#153f30;color:#fff}
:focus-visible{outline:3px solid #b8733a;outline-offset:4px}
.quote{padding-block:36px 4px}.quote blockquote{font-size:clamp(25px,2.7vw,35px);max-width:36ch;line-height:1.4}.quote .lab{margin-top:24px}
.mgrid{gap:20px}.mc{padding:26px;border-radius:10px}.cta-sec{background:#e6e8e1}
.media-dialog{border:0;border-radius:12px;max-width:min(1400px,94vw);width:max-content;max-height:94dvh;margin:auto;padding:50px 16px 16px;background:#fafaf7;color:var(--ink)}
.media-dialog::backdrop{background:#0b1712dc}.media-dialog img{display:block;max-width:100%;width:auto;max-height:calc(94dvh - 100px);height:auto;object-fit:contain;margin:auto}
.media-dialog p{font:14px/1.5 var(--sans);padding-top:12px}.media-dialog a{text-decoration:underline;margin-left:12px}.media-close{position:absolute;right:14px;top:10px;border:1px solid var(--rule);border-radius:50px;background:#fff;padding:7px 13px;font:14px var(--sans);cursor:pointer}
@media(max-width:1000px){.wrap{padding-inline:28px}.chero .wrap{gap:36px}.shell{grid-template-columns:170px minmax(0,1fr);gap:30px}.cells>div{padding:25px}.side{padding-right:16px}.screens{grid-template-columns:1fr}.screens figure:nth-child(2){max-width:320px;justify-self:center;width:100%}.tldr li{grid-template-columns:1fr;gap:2px}}
@media(max-width:900px){.chero .wrap{grid-template-columns:1.25fr .8fr}.chero .pic{aspect-ratio:4/5;max-height:none}.chero h1{font-size:40px}.side nav{display:block}.side{border-bottom:0}.shell{grid-template-columns:160px minmax(0,1fr);gap:24px}}
@media(max-width:700px){.wrap{padding-inline:20px}.top .wrap{padding-block:15px}.wm{font-size:21px}.right{gap:7px}.pill{font-size:12px;padding:8px 10px}.lang a{padding:6px 8px}.chero .wrap{grid-template-columns:1fr;gap:28px;padding-block:28px 64px}.chero h1{font-size:clamp(35px,8.5vw,48px);max-width:22ch}.chero p{font-size:17px}.chero .pic{aspect-ratio:16/10;max-height:300px}.chero .pic img{object-position:center 38%}.cells{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:-30px}.cells>div{padding:20px 12px;border-bottom:0;border-right:1px solid var(--rule)}.cells b{font-size:34px}.cells b small{font-size:17px}.cells .was{font-size:9px;letter-spacing:0;line-height:1.5}.cells .d{font-size:12px;line-height:1.45;margin-top:8px}.body{padding-block:36px 48px}.shell{display:flex;flex-direction:column;gap:30px}.side{position:static;padding:0;border:0;width:100%}.side dl{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}.side dd{font-size:13px}.side .grp+.grp{display:none}.art{width:100%}.tldr{padding:21px}.tldr li{font-size:15px}.deel{margin-top:30px;padding-top:30px}.deel h2{font-size:29px}.deel p{font-size:16px;line-height:1.7}.res li{grid-template-columns:75px 1fr;gap:14px;font-size:15px}.res li b{font-size:26px}.panel{padding:24px}.panel .big{font-size:49px}.panel .big small{font-size:18px}.panel .row{grid-template-columns:1fr 1fr;gap:15px}.panel .row div{padding:15px 0 0}.panel .row div+div{border-top:0;border-left:1px solid #ffffff40;padding-left:15px;margin:0}.panel .row span{font-size:12px}.screens{gap:20px}.quote blockquote{font-size:26px}.media-dialog{padding-inline:8px;border-radius:8px}.media-dialog p{font-size:12px}.fig{margin-top:23px}.cap{font-size:9px}.cta-sec h2{font-size:33px}}
@media(prefers-reduced-motion:no-preference){.media-open::after{transition:background .15s,color .15s}html{scroll-behavior:smooth}}

/* Original photographs from freekenergy.nl, without altering image pixels. */
.real-photo{max-width:480px;margin-inline:auto}.real-photo img{height:auto;width:100%}

.customer-flow{margin-top:30px;background:#fff;border:1px solid var(--rule);border-radius:12px;padding:28px}
.customer-flow .flow-kicker{font:500 11px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--mid);margin:0 0 25px}
.flow-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0}
.flow-steps li{position:relative;min-width:0}.flow-number{display:grid;place-items:center;width:36px;height:36px;background:var(--accent-soft);color:var(--accent);border-radius:50%;font:500 12px var(--mono);margin-bottom:16px}
.flow-steps li:not(:last-child)::after{content:'→';position:absolute;top:1px;left:55px;right:-8px;border-bottom:1px solid var(--rule);color:var(--accent2);text-align:right;font-size:20px;line-height:32px}
.flow-steps h3{font:600 19px/1.2 var(--disp);letter-spacing:-.02em;margin:0}
.customer-flow .flow-steps p{font-size:14px;line-height:1.6;margin-top:10px}
.customer-flow .flow-result{border-top:1px solid var(--rule);padding-top:20px;margin-top:24px;font-size:16px;line-height:1.6;color:var(--accent);font-weight:600}
@media(max-width:1100px){.flow-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}.flow-steps li:nth-child(2)::after{display:none}}
@media(max-width:480px){.customer-flow{padding:22px}.flow-steps{grid-template-columns:1fr;gap:0}.flow-steps li{padding:0 0 24px 50px}.flow-steps li:last-child{padding-bottom:0}.flow-number{position:absolute;left:0;top:0;width:32px;height:32px}.flow-steps li:not(:last-child)::after{display:block;content:'';left:15px;right:auto;top:39px;bottom:8px;width:1px;background:var(--rule);border:0}.flow-steps h3{font-size:20px}.customer-flow .flow-steps p{font-size:15px;margin-top:7px}.customer-flow .flow-result{font-size:15px}}
/* Actual UI captures: readable dashboard first, then a single phone viewport. */
.screens{grid-template-columns:minmax(0,1fr);gap:28px}
.screens figure{background:#fff;width:100%}
.screens figure:first-child img{width:100%;height:auto;max-height:none}
.screens figure:nth-child(2){max-width:360px;justify-self:center;border-radius:22px;padding:8px;background:#12251b;box-shadow:0 14px 35px #10241a1a}
.screens figure:nth-child(2) .media-open{border-radius:15px;overflow:hidden}
.screens figure:nth-child(2) img{max-height:none;width:100%;height:auto;background:#fff}
.screens figure:nth-child(2) .cap{border:0;background:none;color:#e0e8e2;padding:12px 7px 7px;font-size:9px}
@media(max-width:700px){.screens figure:nth-child(2){max-width:320px}}

.client-overview{margin-top:32px;border:1px solid var(--rule);border-radius:12px;background:#fff;overflow:hidden}
.overview-heading{padding:24px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.overview-heading h3{font:600 23px/1.2 var(--disp);max-width:24ch;margin:0}
.client-overview table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.client-overview th{text-align:left;background:#edf1ec;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#526553}
.client-overview td,.client-overview th{padding:16px 20px;border-top:1px solid var(--rule);vertical-align:top}
.client-overview td:first-child{font-weight:600;white-space:nowrap}
.client-status{color:#486449}
.quote{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:32px;align-items:center}
.quote-portrait{margin:0}.quote-portrait img{display:block;width:100%;height:280px;object-fit:cover;object-position:center 56%;border-radius:10px}
.quote-portrait figcaption{font-size:10px;color:var(--muted);margin-top:8px}
@media(max-width:700px){.overview-heading{padding:20px}.client-overview td,.client-overview th{padding:12px 10px;font-size:12px}.client-overview th{font-size:9px}.client-overview td:first-child{white-space:normal}.quote{grid-template-columns:1fr;gap:24px}.quote-portrait{max-width:220px}.quote-portrait img{height:260px}}

/* Frame the office screenshot as one focused product view. */
.screens .dashboard-shot{border:0;border-radius:16px;overflow:hidden;background:#e9ede6}
.dashboard-stage{padding:24px 24px 0;background:linear-gradient(145deg,#e3e9df,#f3f4ee)}
.dashboard-window{overflow:hidden;border:1px solid #c9d2c6;border-radius:10px 10px 0 0;background:#fff;box-shadow:0 14px 35px #18342116}
.dashboard-toolbar{display:flex;align-items:center;gap:15px;padding:12px 15px;border-bottom:1px solid #dfe5dc;background:#f9faf7;color:#536650;font:500 11px/1.4 var(--sans)}
.window-dots{display:flex;gap:5px}.window-dots i{display:block;width:6px;height:6px;border-radius:50%;background:#bdc9b9}
.toolbar-detail{margin-left:auto;font-size:10px;color:#788672}
.dashboard-window .media-open{display:block;border-radius:0}
.screens .dashboard-shot .cap{border:0;background:#e9ede6;padding:15px 24px;color:#52644d}
@media(max-width:700px){.dashboard-stage{padding:10px 10px 0}.dashboard-toolbar{padding:9px 10px;gap:9px;font-size:10px}.toolbar-detail{display:none}.screens .dashboard-shot .cap{padding:12px 14px;gap:8px}.dashboard-window{border-radius:7px 7px 0 0}}

.outcome-story{margin-top:32px}.outcome-story h3{font:600 clamp(23px,2.1vw,28px)/1.2 var(--disp);letter-spacing:-.02em;max-width:32ch}.outcome-story p{font-size:17px;line-height:1.7;color:var(--mid);margin-top:12px;max-width:65ch}.owner-outcome{padding:28px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}

/* Compact implementation approach, separate from achieved outcomes. */
.setup-steps{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;margin:26px 0 0;padding:0;list-style:none;counter-reset:setup}
.setup-steps li{counter-increment:setup;border-top:1px solid var(--rule);padding-top:16px}
.setup-steps li::before{content:"0" counter(setup);display:block;color:var(--faint);font-size:12px;margin-bottom:8px}
.setup-steps h3{font:600 18px/1.3 var(--disp)}
.setup-approach .setup-steps p{font-size:15px;line-height:1.55;margin-top:8px}
@media(max-width:600px){.setup-steps{grid-template-columns:1fr;gap:20px}}

.coaches-brand{padding:42px;background:#fff;border:1px solid var(--rule);border-radius:16px}.coaches-brand img{display:block;width:100%;height:auto;max-height:100px;object-fit:contain}.coaches-brand p{font:500 32px/1.3 var(--disp);color:var(--accent);margin-top:40px}.flow-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.panel h3{font:500 32px/1.2 var(--disp);margin-top:16px}.cells b{font-size:44px}@media(max-width:700px){.coaches-brand{padding:28px}.coaches-brand p{font-size:26px;margin-top:24px}.cells b{font-size:28px}}@media(max-width:480px){.flow-steps{grid-template-columns:1fr}}
.lead-system{margin:32px 0 40px;background:#fafbf7;border:1px solid var(--rule);border-radius:16px;overflow:hidden}.lead-system>figcaption{padding:26px 28px 0;font:600 24px/1.2 var(--disp);color:var(--ink)}.lead-pipeline{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:26px 28px;margin:0}.lead-pipeline li{position:relative;padding:0 0 0 44px}.lead-pipeline .step-no{position:absolute;left:0;top:0;display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#e0e9dc;color:#294c32;font:500 11px var(--mono)}.lead-pipeline h3{font:600 20px/1.2 var(--disp);margin:3px 0 8px}.lead-system .lead-pipeline p{font-size:14px;line-height:1.55;margin:0;color:var(--mid)}.lead-result{display:flex;align-items:center;gap:24px;margin:0 28px;background:#14402f;color:#fff;padding:26px;border-radius:10px}.lead-result strong{font:600 46px/1 var(--disp);white-space:nowrap;letter-spacing:-2px}.lead-result span{font-size:16px;line-height:1.5;max-width:28ch}.lead-loop{padding:24px 28px}.loop-label{font:500 10px var(--mono);text-transform:uppercase;letter-spacing:1.5px;color:#65755f}.lead-system .lead-loop p{font-size:14px;line-height:1.8;margin:8px 0 0;color:#25472f}.lead-loop p span{color:#938154;padding:0 6px}@media(max-width:600px){.lead-system>figcaption{padding:22px 20px 0}.lead-pipeline{grid-template-columns:1fr;padding:24px 20px;gap:25px}.lead-pipeline li:not(:last-child)::after{content:'';position:absolute;left:15px;top:39px;bottom:-17px;width:1px;background:#cad7c6}.lead-result{margin:0 16px;padding:23px;flex-direction:column;align-items:flex-start;gap:12px}.lead-result strong{font-size:46px}.lead-loop{padding:22px 20px}.lead-system .lead-loop p{font-size:13px}}

.retreat-photo{margin:36px 0 0;border:1px solid var(--rule);border-radius:12px;overflow:hidden}.retreat-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 64%}.retreat-photo figcaption{padding:13px 18px;font-size:13px;color:var(--mid);background:var(--card)}