/* Real site screens sit inside a lightweight aluminium laptop. */
.macbook { position:relative; width:100%; transform-style:flat; transform-origin:50% 100%; isolation:isolate; }
.macbook-lid { position:relative; width:92%; margin-inline:auto; padding:clamp(6px,.65vw,11px) clamp(6px,.65vw,11px) 0; border:2px solid #888a8b; border-radius:clamp(9px,1.3vw,20px) clamp(9px,1.3vw,20px) 5px 5px; background:#17191b; box-shadow:inset 0 0 0 1px #4c4e50,0 22px 45px -28px #191d2160; }
.macbook-camera { position:absolute; left:50%; top:3px; width:3px; height:3px; border-radius:50%; background:#373f48; }
.macbook-screen { position:relative; overflow:hidden; aspect-ratio:8 / 5; background:#f8f7f4; border-radius:clamp(3px,.5vw,7px) clamp(3px,.5vw,7px) 1px 1px; }
.macbook-screen img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; backface-visibility:hidden; }
.macbook-screen img:first-child { opacity:1; }
.macbook-chin { display:grid; place-items:center; height:clamp(11px,1.5vw,20px); color:#b9babc; font:500 clamp(5px,.55vw,8px)/1 Arial,sans-serif; letter-spacing:.03em; }
.macbook-base { position:relative; height:clamp(8px,1.35vw,18px); border-radius:2px 2px 36% 36% / 2px 2px 65% 65%; background:linear-gradient(90deg,#939797,#d8dcdd 6%,#c6cace 48%,#e4e7e8 89%,#858a8d); box-shadow:inset 0 2px 1px #f9fbff,0 2px 2px #34393d2b; }
.macbook-base > span { position:absolute; top:0; left:43%; width:14%; height:45%; border-radius:0 0 9px 9px; background:linear-gradient(#a0a6ad,#c7cbd0); box-shadow:inset 0 -1px #f5f7f8; }
.macbook-edge { width:94%; margin-inline:auto; height:clamp(2px,.35vw,5px); border-radius:0 0 50% 50%; background:#858b8d; box-shadow:0 12px 21px 0 #1b232d1f; }
.website-home-laptop { min-width:0; margin:0; padding:38px 0 20px; }
.website-home-laptop .macbook { transform:perspective(1800px) rotateY(-8deg); }
.website-home-laptop figcaption { margin-top:34px; color:var(--muted); font-size:13px; }
.website-solution { padding-top:60px; }
body[data-page=website] .service-hero { padding-top:45px; padding-bottom:75px; }
body[data-page=website] .service-hero > div { display:grid; grid-template-columns:1.25fr 1fr; column-gap:9%; align-items:start; }
body[data-page=website] .service-hero h1 { grid-row:1 / 3; margin:0; font-size:clamp(48px,6.4vw,92px); }
body[data-page=website] .service-hero .service-lead { margin:9px 0 25px; max-width:460px; }
body[data-page=website] .service-hero .button { justify-self:start; }
.website-showcase { position:relative; margin-inline:auto; width:100%; background:#eeeae3; background-image:radial-gradient(ellipse at 50% 38%,#fffdfa 0%,#fffdfa00 63%); }
.web-showcase-stage { position:relative; max-width:1600px; margin-inline:auto; }
.web-floating-device { display:none; }
.web-chapter { display:grid; grid-template-columns:1fr 1.5fr; align-items:center; gap:7%; padding:90px max(32px,5vw); }
.web-chapter:nth-child(even) { grid-template-columns:1.5fr 1fr; }
.web-chapter:nth-child(even) .web-chapter-copy { grid-column:2; grid-row:1; }
.web-chapter:nth-child(even) .web-static-device { grid-column:1; grid-row:1; }
.web-chapter-copy { min-width:0; }
.web-chapter-number { display:flex; align-items:baseline; gap:11px; margin-bottom:27px; color:#b9471a; font-size:14px; }
.web-chapter-number > span { color:#8c877f; font-size:11px; }
.web-chapter h2 { font-size:clamp(32px,3.6vw,56px); line-height:1.1; }
.web-chapter p { margin-top:24px; color:#655f58; font-size:16px; line-height:1.8; max-width:36ch; }
.web-chapter ul { display:grid; gap:10px; margin-top:25px; color:#514c46; font-size:13px; }
.web-chapter li > .arrow-icon { margin-right:10px; color:#bd4e24; }
.web-static-device { min-width:0; margin:0; }
.web-static-device figcaption { margin-top:30px; font-size:12px; color:#756e64; }
.web-chapter:nth-child(odd) .web-static-device .macbook { transform:perspective(1800px) rotateY(-8deg); }
.web-chapter:nth-child(even) .web-static-device .macbook { transform:perspective(1800px) rotateY(8deg); }
.web-showcase-bottom { display:none; }
.website-build-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:50px; margin-block:20px 60px; padding:0; list-style:none; }
.website-build-steps li { border-top:1px solid var(--line); padding-top:24px; }
.website-build-steps li > span { color:var(--orange); font-size:13px; }
.website-build-steps h3 { font-size:24px; line-height:1.3; font-weight:500; letter-spacing:-.04em; margin-top:28px; }
.website-build-steps p { color:var(--muted); font-size:15px; line-height:1.8; margin-top:15px; }
@media(prefers-reduced-motion:no-preference){
 .website-showcase[data-web-animated] { height:var(--web-track-height); }
 [data-web-animated] .web-showcase-pin { position:sticky; top:var(--web-pin-top); height:var(--web-stage-height); }
 [data-web-animated] .web-showcase-stage { height:100%; overflow:clip; }
 [data-web-animated] .web-showcase-canvas { position:absolute; inset:0 0 var(--web-canvas-bottom,0px); overflow:clip; }
 [data-web-animated] .web-floating-device { display:block; position:absolute; left:50%; top:49%; width:57%; margin:0; z-index:2; transform-origin:50% 100%; transform:translate(-50%,-50%); pointer-events:none; }
 [data-web-animated] .web-chapters { position:absolute; inset:0; }
 [data-web-animated] .web-chapter { display:block; position:absolute; inset:0; padding:0; pointer-events:none; }
 [data-web-animated] .web-chapter-copy { position:absolute; width:30%; left:5%; top:var(--web-copy-center,50%); transform:translateY(-50%); }
 [data-web-animated] .web-chapter:nth-child(even) .web-chapter-copy { left:auto; right:5%; }
 [data-web-animated] .web-static-device { display:none; }
 [data-web-animated] .web-showcase-bottom { position:absolute; z-index:3; left:5%; right:5%; bottom:95px; display:flex; align-items:center; justify-content:space-between; gap:24px; color:#756e64; font-size:12px; }
 .web-showcase-bottom > a { color:#4e473f; text-decoration:underline; text-underline-offset:5px; }
 .web-showcase-bottom > a:focus-visible { outline:2px solid var(--orange); outline-offset:7px; }
 .web-progress { height:2px; max-width:150px; flex:1; background:#d5cec3; transform-origin:0 50%; }
 .web-progress > span { display:block; height:100%; background:#b7471b; transform:scaleX(0); transform-origin:0 50%; }
 [data-web-active] .web-floating-device { will-change:transform; }
 [data-web-active] .web-showcase-stage { will-change:transform; }
 [data-web-active] .web-chapter-copy { will-change:opacity,transform; }
 [data-web-active] .web-floating-device img { will-change:opacity,transform; }
}
@media(max-width:900px){
 body[data-page=website] .service-hero > div { grid-template-columns:1fr; gap:0; }
 body[data-page=website] .service-hero h1 { grid-row:auto; font-size:clamp(42px,8.5vw,76px); }
 body[data-page=website] .service-hero .service-lead { margin-top:25px; }
 body[data-page=website] .service-hero { padding-bottom:50px; }
 .web-chapter,.web-chapter:nth-child(even) { grid-template-columns:1fr; gap:45px; padding:60px 24px; }
 .web-chapter:nth-child(even) .web-chapter-copy,.web-chapter:nth-child(even) .web-static-device { grid-column:auto; grid-row:auto; }
 .web-chapter p { max-width:50ch; }
 .web-chapter-number { margin-bottom:18px; }
 .web-chapter h2 { font-size:clamp(30px,5.9vw,46px); }
 .web-chapter ul { display:flex; flex-wrap:wrap; gap:7px 18px; margin-top:17px; font-size:12px; }
 .web-chapter p { margin-top:16px; font-size:15px; line-height:1.7; }
 .website-build-steps { grid-template-columns:1fr; gap:30px; }
 .website-build-steps h3 { margin-top:14px; }
 [data-web-animated] .web-chapter-copy,[data-web-animated] .web-chapter:nth-child(even) .web-chapter-copy { left:24px; right:24px; width:auto; top:28px; transform:none; }
 [data-web-animated] .web-floating-device { width:min(91%,560px); top:70%; }
 [data-web-animated] .web-showcase-bottom { left:24px; right:auto; max-width:calc(100% - 205px); bottom:24px; gap:16px; }
 .web-showcase-credit { display:none; }
 .web-progress { display:none; }
 .website-home-laptop { padding-inline:4px; }
}
@media(prefers-reduced-motion:reduce){
 .website-home-laptop .macbook,.web-static-device .macbook { transform:none!important; }
}