/* Feature 01: a crisp interface demo, with only the photographs as raster assets. */
#website-design .aiFeatures__cardMedia{width:56%;right:2.5%;align-items:center}
.website-build-demo{width:100%;max-width:1060px;margin:auto;align-self:center;font-family:Archivo,sans-serif;text-align:center;color:#f4f4f4}
.website-build-demo .build-example-label{margin-bottom:18px}
.website-build-scene{width:100%;container-type:inline-size;position:relative;isolation:isolate}
.website-build-workbench{position:relative}
.northline-browser{position:relative;margin-left:23%;width:77%;border:1px solid #8982d5;border-radius:10px;overflow:hidden;background:#f6f3ed;box-shadow:0 20px 55px #0006;color:#242422;text-align:left}
.northline-chrome{display:flex;align-items:center;gap:1.8cqw;padding:1.15cqw 1.65cqw;background:linear-gradient(135deg,#292933,#1e1e25);color:#d9d7e2;font:400 1.15cqw/1.2 Archivo,sans-serif;border-bottom:1px solid #34343f}
.northline-dots{display:flex;gap:.55cqw;flex-shrink:0}.northline-dots i{height:.8cqw;width:.8cqw;border-radius:50%;background:#fb6259}.northline-dots i:nth-child(2){background:#fec52e}.northline-dots i:nth-child(3){background:#40ba49}
.northline-address{flex:1;max-width:64%;padding:.6cqw 1.1cqw;background:#ffffff07;border:1px solid #ffffff13;border-radius:5px;white-space:nowrap}.northline-address::before{content:'\2022';color:#9995a6;margin-right:.7cqw}.northline-concept{margin-left:auto;color:#a6a2b6;font-size:1cqw}
.northline-page{position:relative;padding:2.4cqw 2.9cqw 1.8cqw;background:#f6f3ed}
.northline-nav{display:flex;align-items:center;justify-content:space-between;gap:1cqw;margin-bottom:2.7cqw;font:400 1.05cqw/1.2 Archivo,sans-serif}.northline-nav strong{font-size:1.65cqw;font-weight:500;letter-spacing:.35em}.northline-nav>span{white-space:nowrap}
.northline-hero{display:grid;grid-template-columns:.82fr 1.18fr;gap:2.2cqw;align-items:center}
.northline-intro small{display:block;color:#807454;letter-spacing:.13em;text-transform:uppercase;font:500 .72cqw/1.6 Archivo,sans-serif;margin-bottom:1.7cqw;white-space:nowrap}
.northline-intro h3{font:400 5cqw/.98 Georgia,'Times New Roman',serif;letter-spacing:-.055em;margin-bottom:1.7cqw;color:#161616;text-transform:none}
.northline-intro>p{font:400 1.25cqw/1.5 Archivo,sans-serif;margin-bottom:1.9cqw;color:#242422}
.northline-cta{display:inline-block;padding:1.1cqw 1.9cqw;background:#24242b;color:#fff;border-radius:4px;font:400 1.05cqw/1.2 Archivo,sans-serif;white-space:nowrap}
.northline-hero-photo{overflow:hidden;aspect-ratio:1.17;background:#e3ddce}
#website-design .northline-hero-photo img,#website-design .northline-project-grid img{display:block;width:100%;height:100%;object-fit:cover}
.northline-hero-photo img{object-position:55% 50%}
.northline-projects{margin-top:2.1cqw}
.northline-projects-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25cqw}
.northline-projects-heading>span{font:400 1.9cqw/1.2 Georgia,serif}.northline-projects-heading>small{font:500 .7cqw/1.2 Archivo,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.northline-project-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1cqw}.northline-project-grid>div{min-width:0}
#website-design .northline-project-grid img{aspect-ratio:2.4;height:auto;object-fit:cover}
.northline-project-grid p{font:400 1.55cqw/1.2 Georgia,serif;margin-top:.65cqw}.northline-project-grid small{display:block;font:400 .6cqw/1.4 Archivo,sans-serif;letter-spacing:.19em;text-transform:uppercase;color:#696047;margin-top:.65cqw}
.northline-skeleton{position:absolute;inset:2.4cqw 2.9cqw;display:grid;grid-template-columns:.82fr 1.18fr;gap:2.2cqw;opacity:0;pointer-events:none}
.northline-skeleton span{border:1px solid #6c658944;background:linear-gradient(110deg,#dad4e144,#f0ebdf44);border-radius:4px}.northline-skeleton span:first-child{grid-column:1/-1;height:3cqw}.northline-skeleton span:last-child{min-height:24cqw}
.website-build-panel{position:absolute;left:0;top:24%;width:25%;padding:2.1cqw 1.8cqw 1.9cqw;background:linear-gradient(145deg,#22222b,#17171d);border:1px solid #ffffff29;border-radius:9px;box-shadow:0 20px 50px #0005;color:#dedbe8;text-align:left;z-index:2}
.website-build-panel-heading{display:flex;align-items:center;gap:1.2cqw;margin-bottom:2cqw}.website-build-panel-heading strong{font:400 2cqw/1.2 Archivo,sans-serif}
.website-build-symbol{display:block;width:1.75cqw;height:1.75cqw;border:1px solid #928ad5;position:relative}.website-build-symbol::before,.website-build-symbol::after{content:'';position:absolute;width:80%;height:80%;border:1px solid #928ad5;left:40%;top:40%}.website-build-symbol::after{left:-30%;top:-30%;background:#8b78c533}
.website-build-brief{padding:1.2cqw 1.1cqw;background:#ffffff06;border:1px solid #ffffff14;border-radius:6px;font:400 1.2cqw/1.45 Archivo,sans-serif;margin-bottom:2cqw}
.website-build-steps{display:grid;gap:1.65cqw;font:400 1.13cqw/1.35 Archivo,sans-serif}
.website-build-steps li{display:flex;align-items:center;gap:1.05cqw;color:#a9a6b7;min-height:1.5cqw}
.website-build-steps i{position:relative;flex:0 0 1.6cqw;height:1.6cqw;border-radius:50%;background:#494654}
.website-build-steps i::after{content:'\2713';position:absolute;inset:0;display:grid;place-items:center;font:700 1.1cqw/1 Archivo,sans-serif;color:#25212e;opacity:0}
[data-build-phase="0"] [data-build-step="0"],[data-build-phase="1"] [data-build-step="1"],[data-build-phase="2"] [data-build-step="2"]{color:#fff}
[data-build-phase="0"] [data-build-step="0"] i,[data-build-phase="1"] [data-build-step="1"] i,[data-build-phase="2"] [data-build-step="2"] i{background:#8b71ff;box-shadow:0 0 10px #5956e855}
[data-build-phase="1"] [data-build-step="0"] i,[data-build-phase="2"] [data-build-step="0"] i,[data-build-phase="2"] [data-build-step="1"] i,[data-build-phase="3"] [data-build-step] i{background:#fece22}
[data-build-phase="1"] [data-build-step="0"] i::after,[data-build-phase="2"] [data-build-step="0"] i::after,[data-build-phase="2"] [data-build-step="1"] i::after,[data-build-phase="3"] [data-build-step] i::after{opacity:1}
[data-build-phase="3"] [data-build-step]{color:#dedbe8}
.website-build-progress{display:flex;align-items:center;gap:1.2cqw;margin-top:2.8cqw}.website-build-progress>span{height:.45cqw;background:#45414f;border-radius:10px;flex:1;overflow:hidden}.website-build-progress i{display:block;background:#8771f6;height:100%;transform-origin:left}.website-build-progress small{font:400 1cqw/1.2 Archivo,sans-serif;letter-spacing:.1em;white-space:nowrap}
.website-build-panel-note{margin-top:2.2cqw;border-top:1px solid #ffffff20;padding-top:1.5cqw;text-transform:uppercase;letter-spacing:.18em;font:400 .8cqw/1.6 Archivo,sans-serif;color:#9290a2}
.website-build-finish{position:absolute;inset:0;border:1px solid #a697e4;border-radius:inherit;box-shadow:inset 0 0 0 1px #a697e455;pointer-events:none;opacity:0}
.website-build-demo .build-sprite-caption{margin-top:12px}.website-build-controls{gap:8px}.website-build-controls button[data-build-replay]{background:transparent;color:#bab5c9;border-color:#ffffff20}
.no-js .website-build-controls,.website-build-demo[data-build-motion="reduced"] .website-build-controls{display:none}
@media screen and (min-width:801px) and (min-height:601px){.website-build-demo{max-width:min(1060px,83vh)}.website-build-demo .build-example-label{margin-bottom:14px}.website-build-demo .build-sprite-caption{font-size:clamp(11px,1.5vh,13px)}}
@media screen and (orientation:portrait) and (max-width:800px),screen and (orientation:landscape) and (max-width:1200px) and (max-height:600px){
 #website-design{display:flex;flex-direction:column}#website-design .aiFeatures__cardInner{order:0}#website-design .aiFeatures__cardMedia{order:1;position:relative;width:calc(100% - 3.2rem);right:auto;top:auto;height:auto;display:block;border:0;margin:0 auto 2rem}
 .website-build-demo{max-width:560px;margin:0 auto}.website-build-demo .build-example-label{margin-bottom:14px}.website-build-workbench{display:flex;flex-direction:column;gap:14px;aspect-ratio:auto}
 .northline-browser{position:relative;width:100%;margin-left:0;order:1;border-radius:8px}.northline-chrome{font-size:1.5cqw;padding:1.7cqw 2cqw}.northline-dots i{width:1.3cqw;height:1.3cqw}.northline-concept{font-size:1.2cqw}.northline-address{padding:1cqw 1.3cqw}
 .northline-page{padding:3cqw}.northline-nav{margin-bottom:3cqw;font-size:1.35cqw}.northline-nav strong{font-size:2.1cqw}.northline-hero{gap:2.5cqw}.northline-intro h3{font-size:6.8cqw;margin-bottom:2.3cqw}.northline-intro small{font-size:.9cqw;letter-spacing:.05em;margin-bottom:2cqw}.northline-intro>p{font-size:1.6cqw;margin-bottom:2.4cqw}.northline-cta{font-size:1.4cqw;padding:1.6cqw 2cqw}.northline-projects{margin-top:3cqw}.northline-projects-heading>span{font-size:2.5cqw}.northline-projects-heading>small{font-size:.9cqw}.northline-project-grid p{font-size:2.1cqw}.northline-project-grid small{font-size:.8cqw}
 .website-build-panel{position:relative;order:0;width:100%;left:auto;top:auto;border-radius:8px;padding:12px 14px}.website-build-panel-heading{margin-bottom:10px;gap:10px}.website-build-panel-heading strong{font-size:14px}.website-build-symbol{width:12px;height:12px}.website-build-brief,.website-build-panel-note{display:none}.website-build-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;font-size:9px;line-height:1.35}.website-build-steps li{display:block;min-height:40px}.website-build-steps i{display:block;width:12px;height:12px;margin-bottom:5px}.website-build-steps i::after{font-size:9px}.website-build-progress{gap:10px;margin-top:12px}.website-build-progress>span{height:3px}.website-build-progress small{font-size:9px}
 .website-build-demo .build-sprite-caption{font-size:12px;margin-top:14px}
}