/* Engagers — static replica stylesheet */
:root{
  --radius:0.5rem;
  --background:oklch(0.13 0.005 270);
  --foreground:oklch(0.96 0.005 90);
  --card:oklch(0.17 0.006 270);
  --primary:oklch(0.91 0.19 105);
  --primary-foreground:oklch(0.13 0.005 270);
  --muted:oklch(0.2 0.006 270);
  --muted-foreground:oklch(0.66 0.01 270);
  --border:oklch(1 0 0 / 0.08);
  --input:oklch(1 0 0 / 0.12);
  --ring:oklch(0.91 0.19 105 / 0.5);
  --font-display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --font-sans:"Inter",ui-sans-serif,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;border:0 solid var(--border);margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--background);color:var(--foreground);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5;min-height:100vh}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none}
::selection{background:var(--primary);color:var(--primary-foreground)}

.container-x{width:100%;margin-inline:auto;padding-inline:1.25rem;max-width:88rem}
@media(min-width:768px){.container-x{padding-inline:2.5rem}}

.font-display,.text-display{font-family:var(--font-display);letter-spacing:-0.04em;line-height:.92}
.text-display{font-weight:500}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.tracking-tight{letter-spacing:-.02em}
.uppercase{text-uppercase}
.text-primary{color:var(--primary)}
.text-muted-foreground{color:var(--muted-foreground)}
.text-foreground{color:var(--foreground)}
.italic{font-style:italic}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.reveal.reveal-in{opacity:1;transform:none}

.btn-pill{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem 1.6rem;border-radius:9999px;font-weight:500;font-size:.9rem;background:var(--primary);color:var(--primary-foreground);position:relative;overflow:hidden;transition:transform .4s ease;isolation:isolate;border:0}
.btn-pill::after{content:"";position:absolute;inset:0;background:var(--foreground);transform:translateY(100%);transition:transform .45s cubic-bezier(.22,1,.36,1);z-index:-1}
.btn-pill:hover::after{transform:translateY(0)}
.btn-pill:hover{color:var(--background)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.4rem;border-radius:9999px;font-weight:500;font-size:.9rem;border:1px solid var(--border);color:var(--foreground);transition:all .3s ease}
.btn-ghost:hover{background:var(--foreground);color:var(--background);border-color:var(--foreground)}

@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.marquee-track{display:flex;gap:4rem;animation:marquee 40s linear infinite;width:max-content;align-items:center}
.pulse-dot{display:inline-block;width:.5rem;height:.5rem;border-radius:9999px;background:var(--primary);animation:pulse-dot 1.6s ease-in-out infinite}

.grid-bg{background-image:linear-gradient(to right,oklch(1 0 0 / 0.05) 1px,transparent 1px),linear-gradient(to bottom,oklch(1 0 0 / 0.05) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}

/* Layout helpers */
.section{border-top:1px solid var(--border);padding:7rem 0}
@media(min-width:768px){.section{padding:10rem 0}}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2rem}
.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-10{gap:2.5rem}
.mt-24{margin-top:6rem}.mt-12{margin-top:3rem}.mt-8{margin-top:2rem}.mt-6{margin-top:1.5rem}.mt-4{margin-top:1rem}.mt-3{margin-top:.75rem}.mt-2{margin-top:.5rem}
.mb-20{margin-bottom:5rem}.mb-12{margin-bottom:3rem}.mb-6{margin-bottom:1.5rem}.mb-4{margin-bottom:1rem}.mb-3{margin-bottom:.75rem}.mb-2{margin-bottom:.5rem}.mb-1{margin-bottom:.25rem}
.eyebrow{font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-foreground)}
.eyebrow .num{margin-right:.5rem;color:var(--primary)}
.lead{font-size:1rem;line-height:1.7;color:var(--muted-foreground)}
.maxw-md{max-width:28rem}.maxw-sm{max-width:24rem}.maxw-2xl{max-width:42rem}.maxw-3xl{max-width:48rem}

/* Nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:all .5s ease;background:transparent}
.nav.scrolled{border-bottom:1px solid var(--border);background:color-mix(in oklch,var(--background) 85%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:5rem}
.brand{font-family:var(--font-display);font-size:1.5rem;font-weight:600;letter-spacing:-.02em}
.nav-links{display:none;gap:2.5rem;align-items:center}
@media(min-width:768px){.nav-links{display:flex}}
.nav-link{position:relative;font-size:.875rem;color:var(--muted-foreground);transition:color .3s}
.nav-link:hover{color:var(--foreground)}
.nav-link::after{content:"";position:absolute;left:0;bottom:-.25rem;height:1px;width:0;background:var(--primary);transition:width .3s}
.nav-link:hover::after{width:100%}
.nav-cta{display:none}
@media(min-width:768px){.nav-cta{display:inline-flex}}
.hamburger{display:flex;flex-direction:column;gap:.375rem;padding:.5rem;border:0}
@media(min-width:768px){.hamburger{display:none}}
.hamburger span{display:block;height:1px;width:1.5rem;background:var(--foreground)}

.mobile-menu{position:fixed;inset:0;z-index:60;background:var(--background);transition:opacity .5s ease;opacity:0;pointer-events:none}
.mobile-menu.open{opacity:1;pointer-events:auto}
@media(min-width:768px){.mobile-menu{display:none}}
.mobile-menu nav{margin-top:4rem;display:flex;flex-direction:column;gap:1.5rem}
.mobile-menu a.big{font-family:var(--font-display);font-size:3rem;font-weight:500;letter-spacing:-.04em;transition:color .3s}
.mobile-menu a.big:hover{color:var(--primary)}
.icon-btn{padding:.5rem;font-size:1.5rem;border:0}

/* Hero */
.hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:100vh;overflow:hidden}
.hero>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero>.shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,color-mix(in oklch,var(--background) 70%,transparent),color-mix(in oklch,var(--background) 40%,transparent),var(--background))}
.hero .status-row{display:none;position:absolute;left:0;right:0;top:7rem;z-index:10}
@media(min-width:768px){.hero .status-row{display:block}}
.hero .status-inner{display:flex;align-items:center;justify-content:space-between;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-foreground)}
.hero-inner{position:relative;z-index:10;width:100%;padding:10rem 0 6rem}
.hero h1{font-size:clamp(3rem,10vw,9.5rem);font-weight:500}
.hero .right{max-width:28rem}
.hero .actions{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem}
.scroll-cue{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:.5rem;font-size:.625rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-foreground)}
.scroll-cue .line{position:relative;display:block;height:2.5rem;width:1px;background:var(--border);overflow:hidden}
.scroll-cue .line span{position:absolute;left:0;top:0;height:1rem;width:1px;background:var(--primary);animation:marquee 1.8s linear infinite}

/* Intro / marquee */
.intro-marquee{margin-top:6rem;overflow:hidden;border-block:1px solid var(--border);padding:2rem 0}
.intro-marquee .marquee-track{font-family:var(--font-display);font-size:2.25rem;font-weight:500;color:var(--muted-foreground);letter-spacing:-.04em}
@media(min-width:768px){.intro-marquee .marquee-track{font-size:3.75rem}}
.marquee-item{display:flex;align-items:center;gap:4rem;white-space:nowrap}
.marquee-item .star{color:var(--primary)}

/* Services grid */
.services-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:768px){.services-grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:20rem;gap:1.25rem}}
.service-card{position:relative;isolation:isolate;overflow:hidden;border-radius:1rem;border:1px solid var(--border);background:var(--card);transition:all .5s ease;display:flex;flex-direction:column}
.service-card:hover{border-color:color-mix(in oklch,var(--primary) 60%,transparent)}
.service-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4;transition:all 1.2s ease;z-index:-2}
.service-card:hover>img{transform:scale(1.05);opacity:.6}
.service-card>.shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,var(--background),color-mix(in oklch,var(--background) 85%,transparent),color-mix(in oklch,var(--background) 30%,transparent))}
.service-card .body{display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:20rem;padding:1.5rem}
@media(min-width:768px){.service-card .body{padding:2rem}}
.service-card .top{display:flex;align-items:flex-start;justify-content:space-between}
.service-card .num{font-size:.75rem;letter-spacing:.3em;color:var(--muted-foreground)}
.round-arrow{display:grid;place-items:center;height:2.25rem;width:2.25rem;border-radius:9999px;border:1px solid var(--border);transition:all .5s ease}
.service-card:hover .round-arrow{border-color:var(--primary);background:var(--primary);color:var(--primary-foreground)}
.service-card h3{font-family:var(--font-display);font-weight:500;font-size:1.875rem;letter-spacing:-.04em;line-height:.92;margin-bottom:.75rem}
@media(min-width:768px){.service-card h3{font-size:2.25rem}}
.service-card p{max-width:28rem;font-size:.875rem;line-height:1.6;color:var(--muted-foreground)}
.svc-1{grid-column:span 5;grid-row:span 2}
.svc-2{grid-column:span 7}
.svc-3{grid-column:span 4}
.svc-4{grid-column:span 3}
.svc-5{grid-column:span 12}
@media(max-width:767px){.svc-1,.svc-2,.svc-3,.svc-4,.svc-5{grid-column:auto;grid-row:auto}}

/* Process */
.process-grid{display:grid;grid-template-columns:1fr;gap:1px;overflow:hidden;border-radius:1rem;border:1px solid var(--border);background:var(--border)}
@media(min-width:768px){.process-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.process-step{background:var(--background);padding:2rem;display:flex;flex-direction:column;gap:2rem;transition:background .5s ease;min-height:22rem}
.process-step:hover{background:var(--card)}
.process-step .row{display:flex;align-items:baseline;justify-content:space-between}
.process-step .row .num{font-family:var(--font-display);font-size:.875rem;color:var(--muted-foreground)}
.process-step .row .bar{height:1px;flex:1;background:var(--primary);transform-origin:right;transform:scaleX(0);transition:transform .7s ease}
.process-step:hover .row .bar{transform:scaleX(1)}
.process-step h3{font-family:var(--font-display);font-size:2.25rem;font-weight:500;letter-spacing:-.04em;line-height:.92;margin-top:auto}
.process-step p{font-size:.875rem;line-height:1.6;color:var(--muted-foreground)}

/* Work */
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.filter-chip{border-radius:9999px;border:1px solid var(--border);padding:.5rem 1rem;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-foreground);transition:all .3s}
.filter-chip:hover{border-color:var(--foreground);color:var(--foreground)}
.filter-chip.active{border-color:var(--primary);background:var(--primary);color:var(--primary-foreground)}
.work-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:768px){.work-grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:26rem}}
.work-card{position:relative;overflow:hidden;border-radius:1rem;border:1px solid var(--border);background:var(--card);text-align:left;transition:border-color .5s ease;cursor:pointer;border-width:1px;display:block}
.work-card:hover{border-color:color-mix(in oklch,var(--foreground) 40%,transparent)}
.work-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s ease}
.work-card:hover>img{transform:scale(1.05)}
.work-card>.shade{position:absolute;inset:0;background:linear-gradient(to top,var(--background),color-mix(in oklch,var(--background) 30%,transparent),transparent);opacity:.9;transition:opacity .5s}
.work-card:hover>.shade{opacity:1}
.work-card .body{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-height:26rem;padding:2rem}
.work-card .meta{transform:translateY(.75rem);transition:transform .5s ease}
.work-card:hover .meta{transform:none}
.work-card .cat{font-size:.75rem;letter-spacing:.25em;text-transform:uppercase;color:var(--primary);margin-bottom:.5rem}
.work-card h3{font-family:var(--font-display);font-weight:500;font-size:1.875rem;letter-spacing:-.04em;line-height:.92}
@media(min-width:768px){.work-card h3{font-size:3rem}}
.work-card .row2{margin-top:.75rem;display:flex;align-items:center;justify-content:space-between;font-size:.875rem;color:var(--muted-foreground)}
.work-card .row2 .view{display:flex;align-items:center;gap:.5rem;color:var(--foreground);opacity:0;transition:opacity .5s}
.work-card:hover .row2 .view{opacity:1}
.w-1{grid-column:span 7}.w-2{grid-column:span 5}.w-3{grid-column:span 5}.w-4{grid-column:span 7}
@media(max-width:767px){.w-1,.w-2,.w-3,.w-4{grid-column:auto}}

/* Modal */
.modal{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;background:color-mix(in oklch,var(--background) 80%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .5s}
@media(min-width:768px){.modal{align-items:center}}
.modal.open{opacity:1;pointer-events:auto}
.modal-card{position:relative;max-height:90vh;width:100%;max-width:64rem;overflow-y:auto;border:1px solid var(--border);background:var(--card);border-top-left-radius:1.5rem;border-top-right-radius:1.5rem;transform:translateY(2rem);transition:transform .5s}
@media(min-width:768px){.modal-card{border-radius:1.5rem}}
.modal.open .modal-card{transform:none}
.modal-close{position:absolute;right:1.25rem;top:1.25rem;z-index:10;display:grid;place-items:center;height:2.5rem;width:2.5rem;border-radius:9999px;border:1px solid var(--border);background:color-mix(in oklch,var(--background) 60%,transparent);backdrop-filter:blur(8px);transition:background .3s}
.modal-close:hover{background:var(--foreground);color:var(--background)}
.modal-hero{position:relative;height:18rem;width:100%;overflow:hidden}
@media(min-width:768px){.modal-hero{height:26rem}}
.modal-hero img{height:100%;width:100%;object-fit:cover}
.modal-hero .shade{position:absolute;inset:0;background:linear-gradient(to top,var(--card),transparent,transparent)}
.modal-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.5rem;padding:2rem}
@media(min-width:768px){.modal-body{padding:3rem}}
.modal-body .l{grid-column:span 12}
.modal-body .r{grid-column:span 12;display:flex;flex-direction:column;gap:1.5rem}
@media(min-width:768px){.modal-body .l{grid-column:span 4}.modal-body .r{grid-column:span 8}}
.modal-body h3{font-family:var(--font-display);font-weight:500;font-size:2.25rem;letter-spacing:-.04em;margin-top:.75rem;line-height:.92}
@media(min-width:768px){.modal-body h3{font-size:3rem}}

/* About */
.pillars{margin-top:6rem;display:grid;grid-template-columns:1fr;gap:1px;overflow:hidden;border-radius:1rem;border:1px solid var(--border);background:var(--border)}
@media(min-width:768px){.pillars{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pillar{background:var(--background);padding:2rem}
@media(min-width:768px){.pillar{padding:2.5rem}}
.pillar .n{font-family:var(--font-display);font-size:.875rem;color:var(--primary)}
.pillar h3{font-family:var(--font-display);font-size:1.875rem;font-weight:500;letter-spacing:-.04em;line-height:.92;margin-top:1.5rem}
.pillar p{margin-top:1rem;font-size:.875rem;line-height:1.6;color:var(--muted-foreground)}

/* Contact */
.contact{position:relative;isolation:isolate;overflow:hidden;border-top:1px solid var(--border);padding:7rem 0}
@media(min-width:768px){.contact{padding:10rem 0}}
.contact .blob{position:absolute;left:-8rem;top:33%;z-index:-1;height:28rem;width:28rem;border-radius:9999px;opacity:.3;filter:blur(60px);background:var(--primary)}
.contact h2{font-family:var(--font-display);font-size:clamp(3rem,11vw,11rem);font-weight:500;letter-spacing:-.04em;line-height:.92;margin-bottom:5rem}
.contact-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:768px){.contact-grid{grid-template-columns:repeat(12,minmax(0,1fr))}}
.contact-left{grid-column:auto;display:flex;flex-direction:column;gap:2.5rem}
@media(min-width:768px){.contact-left{grid-column:span 5}}
.contact-right{grid-column:auto}
@media(min-width:768px){.contact-right{grid-column:span 7}}
.contact-line p{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-foreground);margin-bottom:.25rem}
.contact-line a,.contact-line div{font-family:var(--font-display);font-weight:500;font-size:1.5rem;letter-spacing:-.04em;display:inline-flex;align-items:center;gap:.75rem;line-height:.92}
@media(min-width:768px){.contact-line a,.contact-line div{font-size:1.875rem}}
.contact-line a:hover{color:var(--primary)}
.download-card{border-radius:1rem;border:1px solid var(--border);background:color-mix(in oklch,var(--card) 60%,transparent);padding:1.5rem;backdrop-filter:blur(8px)}
.contact-form{border-radius:1.5rem;border:1px solid var(--border);background:color-mix(in oklch,var(--card) 60%,transparent);padding:2rem;backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:1.5rem}
@media(min-width:768px){.contact-form{padding:2.5rem}}
.field-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){.field-grid{grid-template-columns:1fr 1fr}}
.field label{display:block;margin-bottom:.5rem;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-foreground)}
.field input,.field textarea,.field select{width:100%;border-radius:.75rem;border:1px solid var(--input);background:var(--background);padding:.75rem 1rem;font-size:.875rem;color:var(--foreground);outline:none;transition:border-color .2s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--primary)}
.field textarea{resize:none}
.form-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding-top:.5rem}
.form-footer p{font-size:.75rem;color:var(--muted-foreground)}

/* Floating contact */
.floating{position:fixed;bottom:1.5rem;right:1.5rem;z-index:55;display:flex;flex-direction:column;gap:.75rem}
.floating a{display:grid;place-items:center;height:3.5rem;width:3.5rem;border-radius:9999px;box-shadow:0 10px 25px rgba(0,0,0,.4);transition:transform .2s;color:#fff}
.floating a:hover{transform:scale(1.1)}
.floating a.wa{background:#25D366}
.floating a.call{background:var(--primary);color:var(--primary-foreground)}

/* Footer */
footer{border-top:1px solid var(--border);padding:4rem 0}
footer .grid12 .b1{grid-column:span 12}
footer .grid12 .b2,footer .grid12 .b3{grid-column:span 6}
@media(min-width:768px){footer .grid12 .b1{grid-column:span 5}footer .grid12 .b2{grid-column:span 3}footer .grid12 .b3{grid-column:span 4}}
.footer-list{display:flex;flex-direction:column;gap:.5rem;font-size:.875rem}
.footer-list a:hover{color:var(--primary)}
.subscribe{display:flex;align-items:center;gap:.5rem;border-radius:9999px;border:1px solid var(--border);background:var(--background);padding:.5rem 1rem}
.subscribe input{flex:1;background:transparent;border:0;outline:none;font-size:.875rem}
.subscribe button{display:grid;place-items:center;height:2.25rem;width:2.25rem;flex-shrink:0;border-radius:9999px;background:var(--primary);color:var(--primary-foreground);border:0;transition:transform .2s}
.subscribe button:hover{transform:scale(1.1)}
.socials{margin-top:1.5rem;display:flex;gap:.75rem;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-foreground)}
.socials a:hover{color:var(--foreground)}
.footer-bottom{margin-top:3rem;display:flex;flex-direction:column;gap:.75rem;border-top:1px solid var(--border);padding-top:1.5rem;font-size:.75rem;color:var(--muted-foreground)}
@media(min-width:768px){.footer-bottom{flex-direction:row;align-items:center;justify-content:space-between}}

/* Section header helpers */
.section-head{margin-bottom:5rem;display:flex;flex-direction:column;gap:1.5rem}
@media(min-width:768px){.section-head{flex-direction:row;align-items:flex-end;justify-content:space-between}}
.h2-display{font-family:var(--font-display);font-weight:500;letter-spacing:-.04em;line-height:.92}
.h2-lg{font-size:clamp(2.25rem,5.5vw,5rem)}
.h2-md{font-size:clamp(2.25rem,5vw,4.5rem)}
.cluster{display:flex;flex-wrap:wrap;gap:.75rem}

/* Helpers */
.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.col-3{grid-column:span 3}.col-9{grid-column:span 9}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-7{grid-column:span 7}.col-12{grid-column:span 12}
@media(max-width:767px){.col-3,.col-9,.col-4,.col-5,.col-7{grid-column:span 12}}