.hero{display:grid;height:100svh;padding:clamp(6rem,1.2rem + 16vw,11rem) clamp(1rem,.04rem + 3.2vw,2rem) clamp(1rem,.04rem + 3.2vw,2rem);align-items:start;justify-items:center;color:var(--white);h1{max-width:none;text-align:center;text-transform:uppercase;letter-spacing:-.3rem;color:var(--dark);font-weight:700;transform:translateZ(0);filter:drop-shadow(1.17px 1.17px 0 rgb(from var(--sky-4) r g b / .3));strong{background:#fff;background-image:radial-gradient(at 10% 90%,rgb(from var(--sand-vibrant) r g b / .4) 0,transparent 80%),radial-gradient(at 90% 20%,rgb(from var(--sky-vibrant) r g b / .2) 0,transparent 30%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;font-weight:1000}}}.hero-media{position:fixed;z-index:-2;inset:0;pointer-events:none;object-position:center top;width:100%;height:100%;object-fit:cover;img{width:100%;height:100%;object-fit:cover;object-position:center top}}.hero-content{display:flex;width:min(100%,1120px);flex-direction:column;justify-content:center;align-items:center;gap:1.5rem}.hero-copy{text-align:center;text-transform:uppercase;font-variation-settings:"CTGR" 80;font-weight:300;color:rgb(from var(--dark) r g b / .5);font-size:1rem}.hero-button{display:inline-flex;gap:.85rem;align-items:center;justify-content:center;padding:.9rem 1.75rem;border-radius:6px;color:var(--light);background:var(--sky-4);box-shadow:0 .25rem 0 0 var(--sand-2);font-family:var(--serif);font-size:.98rem;font-variation-settings:"CTGR" 100;font-weight:350;letter-spacing:.12rem;text-decoration:none;text-transform:uppercase;cursor:pointer;transition:box-shadow var(--btn-transition),transform var(--btn-transition);&:after{content:"→";font-weight:200;font-size:1.15rem;line-height:1;position:relative;bottom:.15rem;transition:transform var(--btn-transition)}&:hover{box-shadow:0 0 0 0 var(--sand-2);transform:translateY(.25rem);&:after{transform:translate(.3rem)}}}.hero-hook{align-self:end;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:1.35rem;color:var(--sand-3);mix-blend-mode:multiply;&:after{content:"";display:block;width:clamp(1.15rem,2.2vw,1.65rem);height:clamp(1.15rem,2.2vw,1.65rem);border-bottom:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}p{text-align:center;text-transform:uppercase;font-weight:300;font-size:.9rem}}#approach-first{position:sticky;top:8rem;z-index:-1;margin:0 4rem 4rem;border-radius:30px;background-attachment:fixed;background-image:radial-gradient(at 98% 50%,hsla(26,100%,35%,.15) 0,transparent 50%),radial-gradient(at 5% 10%,hsla(213,100%,35%,.25) 0,transparent 50%)}.approach-stack{margin-top:auto;display:grid;gap:3rem}.approach-step{border-left:2px solid var(--light);padding-left:2rem}#approach{padding-top:clamp(4rem,1.6rem + 8vw,8rem);background:var(--white);border-radius:30px 30px 0 0;background-image:radial-gradient(at 20% 50%,hsla(26,100%,35%,.25) 0,transparent 50%),radial-gradient(at 80% 80%,hsla(213,100%,35%,.1) 0,transparent 70%);box-shadow:inset 0 1rem 0 0 var(--sky-3),inset 0 2rem 0 0 var(--sky-2),inset 0 3rem 0 0 var(--sky-1);.panel{background:var(--white);box-shadow:.5rem .5rem 0 0 var(--sand-4),1rem 1rem 0 0 var(--sand-3),1.5rem 1.5rem 0 0 var(--sand-2),2rem 2rem 0 0 var(--sand-1)}.approach-feature-grid{margin-bottom:2rem}}.approach-feature-grid{display:grid;gap:1rem;grid-template-columns:repeat(4,1fr)}#showcase{border-top:1px dashed black;border-bottom:1px dashed black;background:var(--blue-mist)}.showcase-copy{align-content:center}.project-facts{display:grid;gap:.75rem;margin:1rem 0 0;div{padding-top:.75rem;border-top:1px solid rgba(22,19,15,.16)}dt{color:var(--muted);font-size:.78rem;font-weight:800;text-transform:uppercase}dd{margin:.2rem 0 0;color:var(--dark)}}.browser-preview{overflow:hidden;width:100%;border:1px solid rgba(22,19,15,.17);border-radius:8px;background:var(--white);box-shadow:var(--shadow);transition:width 1.5s ease,border-radius 1.5s ease;.browser-wrapper{aspect-ratio:4 / 3}&.mobile-browser-preview{border-radius:32px;border:2px solid rgba(22,19,15,.7);margin:0 auto;width:max-content;.browser-wrapper{aspect-ratio:9 / 18}}&.preview-mobile-view{.browser-bar{padding:0;border-bottom:none;span{width:0;height:0}}}}.browser-bar{display:flex;gap:.45rem;padding:.85rem;border-bottom:1px solid var(--line);background:#f7f7f2;span{width:.72rem;height:.72rem;border-radius:50vh;background:var(--line);&:nth-child(1){background:#d66a57}&:nth-child(2){background:#d7a64c}&:nth-child(3){background:#5b9f70}}&.browser-bar-mobile span{width:5rem;height:.9rem;background:#000}}.browser-bar-mobile{padding:.4rem;justify-content:center;border-bottom:none;background:var(--dark)}.home-bar-mobile{position:absolute;left:50%;bottom:.5rem;width:7rem;height:.3rem;border-radius:50vh;background:#969696bf;translate:-50% 0}.browser-wrapper{position:relative;overflow:hidden;height:max-content}.browser-screen{overflow:hidden;width:200%;height:200%;border:none;padding:0;background:#2f302d;color:var(--white);transform:scale(.5);transform-origin:top left}.home-faq{background:var(--white)}@media(max-width:768px){#approach{.section-heading{margin-top:1rem}}}@media(max-width:980px){.approach-feature-grid{grid-template-columns:repeat(2,1fr)}#approach-first{padding-inline:clamp(1.5rem,1.2rem + 1vw,2rem);margin:0 1rem 1rem;top:5rem;.approach-step{border:none;padding-left:0}}.hero{h1{font-variation-settings:"CTGR" 100}}}@media(min-width:980px){.showcase-layout{grid-template-columns:.8fr 1.5fr .7fr;align-items:center;gap:3rem}}@media(max-width:700px){.approach-feature-grid{grid-template-columns:1fr}}