/* A responsive, branded website composition in minimal physical device frames. */
.website-mockup{background:#ded9e3;color:var(--ink);padding:38px clamp(24px,4vw,56px) 24px;border-radius:6px;overflow:hidden}
.website-mockup .demo-toolbar{margin-bottom:32px;align-items:center}
.website-mockup .demo-toolbar h3{font-size:clamp(30px,3vw,44px);line-height:1.05}
.website-mockup .segmented{background:#f1f0ed;border:1px solid #b3aabb;padding:4px;border-radius:4px;gap:0}
.website-mockup .segmented button{color:var(--ink);font-size:14px;border:0;padding:11px 20px;border-radius:2px;min-height:44px}
.website-mockup .segmented button[aria-pressed=true]{background:var(--violet);color:#fff}
.website-mockup .device-canvas{position:relative;container-type:inline-size;width:100%;max-width:1100px;min-height:0;height:clamp(420px,45vw,580px);padding:0;background:none;border-radius:0;overflow:visible;display:flex;align-items:center;justify-content:center}
.mock-laptop{position:relative;width:88%;margin-right:10%;padding-bottom:12px}
.mock-laptop-lid{background:#17171b;border:1px solid #4c4a50;border-radius:12px 12px 5px 5px;padding:9px;box-shadow:0 28px 40px #20142d22}
.mock-browser{height:25px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px;background:#eeedf0;color:#656069;border-radius:4px 4px 0 0;font-size:8px;line-height:1}
.mock-browser-dots{display:flex;gap:4px}.mock-browser-dots i{width:4px;height:4px;border-radius:50%;background:#aea5b6}
.mock-browser-lock{font-size:7px}
.mock-laptop-base{position:absolute;height:12px;bottom:0;left:-3%;width:106%;background:#a9a6ae;border-top:2px solid #e4e1e6;border-radius:1px 1px 50% 50% / 1px 1px 90% 90%;box-shadow:0 12px 14px #20142d20}
.mock-laptop-base:after{content:"";position:absolute;top:-2px;left:43%;width:14%;height:4px;background:#77737d;border-radius:0 0 8px 8px}
.mock-screen{container-type:inline-size;background:#f1f0ed;overflow:hidden;color:#070b11;position:relative}
.desktop-screen{aspect-ratio:1.6}
.mock-nav{display:flex;align-items:center;gap:3cqw;padding:1.8cqw 2.8cqw;background:#070b11;color:#f1f0ed;font-size:1.15cqw;height:7cqw}
.mock-nav>img{width:20cqw;height:auto;filter:brightness(0) invert(1)}
.mock-nav-links{margin-left:auto;white-space:nowrap}
.mock-nav-action{background:#5421d0;padding:1.1cqw 1.5cqw;white-space:nowrap}
.mock-nav-action>span{margin-left:1cqw}
.mock-hero{display:grid;grid-template-columns:44% 1fr;gap:5%;padding:2.4cqw;height:48cqw}
.mock-glass{position:relative;overflow:hidden;border-radius:.6cqw;background:#d2c7dc}
.mock-glass>img{width:100%;height:100%;object-fit:cover;object-position:65% center}
.mock-glass>span{position:absolute;left:2cqw;bottom:2cqw;font-size:.85cqw;color:#17171b}
.mock-message{padding:2.5cqw 1.5cqw 0 0;display:flex;flex-direction:column;align-items:start}
.mock-message>strong{font-size:7cqw;line-height:.98;letter-spacing:-.04em;font-weight:500}
.mock-message>p{font-size:1.45cqw;line-height:1.4;margin:2.6cqw 0;max-width:none}
.mock-action{font-size:1.35cqw;background:#5421d0;color:#fff;padding:1.5cqw 1.7cqw;display:flex;gap:3cqw;align-items:center}
.mock-message>small{margin-top:auto;margin-bottom:.5cqw;font-size:1cqw}
.mock-next{padding:3cqw 5cqw;display:flex;justify-content:space-between;border-top:1px solid #18122020;align-items:start;gap:5cqw}
.mock-next>span{font-size:3cqw;line-height:1.05;letter-spacing:-.025em}
.mock-next>img{width:30%;height:12cqw;object-fit:cover}
.mock-phone{position:absolute;right:1%;bottom:6%;width:23%;max-width:224px;border:5px solid #16151a;outline:1px solid #69636f;border-radius:28px;background:#16151a;padding:6px 2px 9px;box-shadow:0 24px 35px #20142d30;overflow:hidden}
.mock-phone-speaker{position:absolute;top:8px;left:34%;width:32%;height:10px;background:#16151a;border-radius:0 0 10px 10px;z-index:2}
.mobile-screen{aspect-ratio:.48;border-radius:19px;overflow:hidden;padding-top:14px;background:#070b11}
.mock-phone-home{position:absolute;bottom:8px;left:35%;width:30%;height:3px;background:#f1f0ed;border-radius:3px}
.mobile-screen .mock-nav{height:17cqw;padding:3cqw 5cqw;font-size:3cqw;gap:5cqw}
.mobile-screen .mock-nav>img{width:42cqw}.mobile-screen .mock-nav-links{display:none}
.mobile-screen .mock-nav-action{margin-left:auto;padding:2cqw 3cqw}
.mobile-screen .mock-hero{display:flex;flex-direction:column-reverse;gap:5cqw;height:auto;background:#f1f0ed;padding:6cqw}
.mobile-screen .mock-message{padding:2cqw 0 0}
.mobile-screen .mock-message>strong{font-size:12cqw;line-height:1.02;letter-spacing:-.035em}
.mobile-screen .mock-message>p{font-size:3.3cqw;margin:5cqw 0;line-height:1.35}
.mobile-screen .mock-action{font-size:3.1cqw;padding:3cqw 4cqw;gap:8cqw}
.mobile-screen .mock-message>small{display:none}
.mobile-screen .mock-glass{height:70cqw;margin-top:2cqw;border-radius:1cqw}
.mobile-screen .mock-glass>span{font-size:1.8cqw;left:4cqw;bottom:4cqw}
.mobile-screen .mock-next{display:none}
.website-mockup .device-canvas.mobile{max-width:1100px;height:570px}
.device-canvas.mobile .mock-laptop{display:none}
.device-canvas.mobile .mock-phone{position:relative;right:auto;bottom:auto;width:260px;max-width:260px}
.mockup-caption{display:flex;justify-content:space-between;gap:24px;margin-top:24px;border-top:1px solid #76668155;padding-top:18px;color:#4b4056;font-size:12px;line-height:1.5}
@media(max-width:760px){.website-mockup{padding:26px 20px 20px}.website-mockup .demo-toolbar{align-items:start;flex-direction:column;gap:20px;margin-bottom:24px}.website-mockup .demo-toolbar h3{font-size:34px}.website-mockup .device-canvas{height:300px}.mock-laptop{width:93%;margin-right:5%}.mock-laptop-lid{padding:4px;border-radius:6px}.mock-browser{height:14px;padding:0 5px;font-size:5px}.mock-browser-dots{gap:2px}.mock-browser-dots i{width:2px;height:2px}.mock-browser-lock{display:none}.mock-laptop-base{height:7px}.mock-phone{width:30%;right:-1%;bottom:3%;padding:3px 1px 5px;border-width:3px;border-radius:13px}.mock-phone-speaker{height:5px;top:4px}.mobile-screen{padding-top:8px;border-radius:9px}.mock-phone-home{height:2px;bottom:5px}.website-mockup .device-canvas.mobile{height:560px}.device-canvas.mobile .mock-phone{width:250px;max-width:100%;border-radius:27px;border-width:5px;padding:6px 2px 9px}.device-canvas.mobile .mobile-screen{border-radius:18px;padding-top:14px}.device-canvas.mobile .mock-phone-speaker{height:10px;top:8px}.device-canvas.mobile .mock-phone-home{bottom:8px}.mockup-caption{display:block;margin-top:18px;font-size:11px}.mockup-caption>span{display:block}.mockup-caption>span+span{margin-top:8px}}
/* Études: the independent Twenty Twenty-Four architecture theme demonstration. */
.etudes-nav{display:flex;align-items:center;justify-content:space-between;padding:3cqw 5cqw;height:10cqw;background:#f9f9f7;color:#161616}
.etudes-nav>img{width:11cqw;height:auto;max-height:5cqw;object-fit:contain;object-position:left center}
.etudes-nav>span{font-size:1.25cqw;white-space:nowrap}
.etudes-nav>svg{display:none;fill:none;stroke:#161616;stroke-width:1.5}
.mock-screen:has(.etudes-nav){background:#f9f9f7}
.etudes-intro{text-align:center;padding:2cqw 6cqw 3cqw;color:#151515}
.etudes-intro>strong{font-family:Georgia,'Times New Roman',serif;font-size:4.4cqw;font-weight:400;line-height:1.12;letter-spacing:-.025em;display:block}
.etudes-intro>p{font-size:1.2cqw;line-height:1.4;margin:1.8cqw auto;max-width:none}
.etudes-intro>span{display:inline-block;padding:1.2cqw 1.8cqw;background:#191919;color:#fff;font-size:1.1cqw;border-radius:.4cqw}
.etudes-photo{margin:0 5cqw;border-radius:1.4cqw;overflow:hidden;height:27cqw}
.etudes-photo>img{width:100%;height:100%;object-fit:cover}
.etudes-next{text-align:center;padding:4cqw 5cqw;color:#151515}
.etudes-next>span{font-family:Georgia,'Times New Roman',serif;font-size:3.6cqw}
.etudes-next>p{font-size:1.2cqw;line-height:1.4;margin:1.4cqw auto}
.mobile-screen .etudes-nav{height:19cqw;padding:4cqw 6cqw}
.mobile-screen .etudes-nav>img{width:28cqw;max-height:12cqw}
.mobile-screen .etudes-nav>span{display:none}
.mobile-screen .etudes-nav>svg{display:block;width:6cqw;height:6cqw}
.mobile-screen .etudes-intro{padding:10cqw 7cqw 9cqw}
.mobile-screen .etudes-intro>strong{font-size:11cqw;line-height:1.1}
.mobile-screen .etudes-intro>strong br{display:none}
.mobile-screen .etudes-intro>p{font-size:3.7cqw;line-height:1.45;margin:6cqw auto}
.mobile-screen .etudes-intro>span{font-size:3.4cqw;padding:3.4cqw 5cqw;border-radius:1cqw}
.mobile-screen .etudes-photo{margin:0 6cqw;height:62cqw;border-radius:2cqw}
.mobile-screen .etudes-photo>img{object-position:32% center}
.mobile-screen .etudes-next{padding:10cqw 8cqw}
.mobile-screen .etudes-next>span{font-size:8cqw;line-height:1.1}
.mobile-screen .etudes-next>p{font-size:3.2cqw;margin:5cqw auto}