/* Immersive Emerald: an architectural stage for the connected workflow. */
:root{--header-h:82px;--paper:#f8f6f0;--accent:#c88855}
.topbar{background:#123f32;border-bottom:1px solid #6e9e7b29;box-shadow:none}.topbar.is-scrolled{background:#123f32f5;backdrop-filter:blur(18px)}.header.wrap{max-width:1600px;width:calc(100% - 104px)}.header .wordmark{font-size:32px}.header nav{font-size:17px;gap:38px}.header .nav-contact{background:transparent;border-color:#e0e8d9b0;border-radius:8px;padding:11px 25px}.header .nav-contact:hover{background:#246047}.emerald-hero{position:relative;background:#052b23;overflow:hidden;isolation:isolate}.emerald-hero:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 72% 50%,#1a574329,transparent 65%);pointer-events:none}.emerald-hero .hero-layout{display:block;position:relative;min-height:650px;padding-block:65px 95px;width:calc(100% - 104px);max-width:1600px}.emerald-hero .hero-intro{position:relative;z-index:3;width:43%;pointer-events:none}.hero-intro a{pointer-events:auto}.emerald-hero .eyebrow{color:#c7d6c7;font-size:11px;letter-spacing:1.7px;margin-bottom:25px}.emerald-hero h1{font-size:clamp(76px,8vw,120px);line-height:1.02;letter-spacing:-.065em;margin-bottom:26px;white-space:nowrap}.emerald-hero h1 span{color:#f5faf4}.emerald-hero .hero-description{font-size:clamp(21px,2.05vw,29px);line-height:1.48;max-width:520px;color:#e2e8dd;margin-bottom:37px;font-weight:400}.emerald-hero .hero-actions{display:flex;align-items:start;flex-direction:column;gap:13px}.emerald-hero .button-green{background:#103f3277;border:1px solid #f0f4e5bd;border-radius:6px;padding:16px 25px;font-size:17px;gap:35px;box-shadow:0 5px 20px #001b151a}.emerald-hero .button-green:hover{background:#245f46}.emerald-hero .secondary-action{font-size:17px;border-color:#bc8151;border-bottom-width:2px;padding-bottom:7px;gap:30px}.emerald-hero .hero-workflow{position:absolute;inset:0 -60px 0 29%;margin:0;animation:none!important}.emerald-hero .scene-wrap{position:absolute;inset:0;height:100%;margin:0;aspect-ratio:auto;mask-image:linear-gradient(90deg,transparent,black 12%);-webkit-mask-image:linear-gradient(90deg,transparent,black 12%)}.scene-wrap canvas{touch-action:pan-y}.scene-caption{position:absolute;bottom:63px;left:25%;right:7%;display:flex;align-items:center;gap:9px;color:#b5d3c3;font-size:12px;letter-spacing:.15px;pointer-events:none}.live-indicator{height:6px;width:6px;border-radius:50%;background:#76ebce;box-shadow:0 0 12px #76ebce}.scene-hint{margin-left:auto;color:#9cb6a7;font-size:11px}.scene-toolbar.wrap{position:absolute;bottom:0;left:0;right:0;max-width:1600px;width:calc(100% - 104px);display:flex;justify-content:space-between;align-items:center;border-top:1px solid #9cbea82d;padding-block:12px;z-index:4}.emerald-hero .workflow-status{margin:0;font-size:12px;gap:10px}.emerald-hero .sample-label{margin-left:15px;font-size:11px;color:#a9bfb1}.emerald-hero .workflow-controls{margin:0;gap:10px;flex-wrap:nowrap}.emerald-hero .motion-control{background:transparent;border-color:#618a7480;font-size:12px;padding:9px 13px}.emerald-hero .replay-control{width:33px;height:33px;font-size:22px}.emerald-introduction{background:var(--paper);padding:85px 0 90px}.emerald-intro-grid{display:grid;grid-template-columns:1.7fr .85fr;gap:8%}.emerald-intro-grid h2{font-size:clamp(32px,3.5vw,57px);font-weight:800;letter-spacing:-.052em;line-height:1.16;margin-bottom:25px}.emerald-intro-grid>div>p:not(.eyebrow){font-size:21px;line-height:1.65;color:#667169;max-width:800px}.selected-work{border-left:1px solid #c9926344;padding:12px 0 0 50px}.selected-work>.eyebrow{color:#9d602c;font-size:11px;margin-bottom:20px}.selected-work>a{font-size:22px;display:flex;gap:25px;align-items:center;padding:15px 0;border-bottom:1px solid #c9926344}.selected-work>a>span{margin-left:auto;transition:transform .3s}.selected-work>a:hover>span{transform:translateX(6px)}.services-section{border-top:1px solid #dbe1d4}.emerald-intro-grid.wrap{max-width:1500px;width:calc(100% - 104px)}
@media(min-width:1700px){.emerald-hero .hero-layout{min-height:720px;padding-top:90px}.emerald-hero .hero-workflow{right:-140px;left:30%}.emerald-hero h1{font-size:125px}}
@media(max-width:1100px) and (min-width:741px){.header.wrap,.emerald-hero .hero-layout,.scene-toolbar.wrap,.emerald-intro-grid.wrap{width:calc(100% - 64px)}.header nav{gap:22px;font-size:15px}.header .wordmark{font-size:27px}.header .nav-contact{padding:10px 16px;margin-left:0}.emerald-hero .hero-layout{min-height:650px;padding-top:80px}.emerald-hero h1{font-size:clamp(65px,7.6vw,84px)}.emerald-hero .hero-description{font-size:22px}.emerald-hero .hero-workflow{left:23%;right:-120px}.emerald-hero .hero-intro{width:48%}.emerald-hero .eyebrow{font-size:9px}.scene-caption{left:35%;right:10%}.scene-hint{display:none}.emerald-intro-grid{gap:40px;grid-template-columns:1.5fr 1fr}.selected-work{padding-left:30px}.selected-work>a{font-size:18px}.emerald-intro-grid>div>p:not(.eyebrow){font-size:19px}}
@media(max-width:740px){:root{--header-h:74px}.header.wrap{width:calc(100% - 40px)}.header .wordmark{font-size:25px}.header nav{gap:0}.header .nav-contact{padding:14px 18px}.emerald-hero .hero-layout{width:100%;min-height:0;padding:40px 0 0;display:flex;flex-direction:column;align-items:stretch}.emerald-hero .hero-intro{width:auto;margin:0 20px}.emerald-hero .eyebrow{font-size:9px;letter-spacing:1.2px;margin-bottom:24px}.emerald-hero h1{font-size:clamp(64px,15.4vw,100px);margin-bottom:24px;line-height:1.02}.emerald-hero .hero-description{font-size:21px;max-width:420px;margin-bottom:24px}.emerald-hero .hero-actions{flex-direction:row;align-items:center;gap:17px;flex-wrap:wrap}.emerald-hero .button-green{padding:13px 15px;min-height:54px;font-size:14px;gap:18px}.emerald-hero .secondary-action{font-size:14px;gap:14px}.emerald-hero .hero-workflow{position:relative;inset:auto;width:100%;height:clamp(360px,72vw,450px);margin-top:0}.emerald-hero .scene-wrap{mask-image:linear-gradient(180deg,transparent,black 8%,black 95%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,black 8%,black 95%,transparent)}.scene-caption{left:20px;right:20px;bottom:15px;font-size:11px}.scene-hint{display:none}.scene-toolbar.wrap{position:relative;inset:auto;width:calc(100% - 40px);flex-wrap:wrap;gap:16px;padding:14px 0 18px}.emerald-hero .workflow-status{font-size:11px;justify-content:start;flex:1}.emerald-hero .sample-label{font-size:10px;flex-basis:100%;margin:0 0 0 16px;text-align:left}.emerald-hero .workflow-controls{gap:7px}.emerald-hero .motion-control{font-size:10px;padding:9px 10px}.emerald-hero .replay-control{width:30px;height:30px}.emerald-introduction{padding:54px 0}.emerald-intro-grid.wrap{width:calc(100% - 40px);display:block}.emerald-intro-grid h2{font-size:clamp(31px,8.4vw,47px)}.emerald-intro-grid h2 br{display:none}.emerald-intro-grid>div>p:not(.eyebrow){font-size:18px}.selected-work{margin-top:35px;padding:0;border:0}.selected-work>.eyebrow{margin-bottom:10px}.selected-work>a{font-size:20px;padding-block:15px}.emerald-hero .fallback-scene{padding-inline:20px}.emerald-hero .fallback-scene strong{font-size:13px}.emerald-hero .fallback-scene div{max-width:32%;font-size:11px}}
.emerald-hero .hero-intro{display:block}
@media(min-width:741px) and (max-width:1000px){
  .header nav{gap:18px;font-size:14px}.header .wordmark{font-size:25px}.header .nav-contact{padding:10px 15px;gap:16px}
  .emerald-hero .hero-layout{width:100%;min-height:0;display:flex;flex-direction:column;align-items:stretch;padding:55px 0 0}
  .emerald-hero .hero-intro{width:auto;margin:0 32px}.emerald-hero h1{font-size:88px;line-height:1.02;margin-bottom:24px}
  .emerald-hero .hero-description{font-size:24px;max-width:650px;margin-bottom:27px}.emerald-hero .desktop-break{display:none}
  .emerald-hero .hero-actions{flex-direction:row;align-items:center;gap:30px}.emerald-hero .hero-workflow{position:relative;inset:auto;width:100%;height:440px;margin:0}
  .emerald-hero .scene-wrap{mask-image:linear-gradient(180deg,transparent,black 8%,black 97%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,black 8%,black 97%,transparent)}
  .scene-toolbar.wrap{position:relative;inset:auto;width:calc(100% - 64px);padding-block:15px}
}
