/* v48 — centered editorial rhythm, moving optical surfaces and clear glass. */
.revit-word{color:#2464dc}
.section-heading,.section-heading.split{text-align:center;display:flex;flex-direction:column;align-items:center;gap:0}
.section-heading h2,.studio-section h2{font-size:clamp(38px,4.5vw,64px);line-height:1.12;letter-spacing:-.035em;font-weight:600}
.section-heading p{font-size:20px;line-height:1.65;max-width:650px;margin:22px auto 0}
.section-heading.split>.segmented{margin-top:30px}
.section-heading.split>.text-link{margin-top:24px}
.section{padding-block:110px}
.hero{min-height:930px;max-height:1200px;height:112svh}
.hero-content{max-width:880px;padding-top:clamp(310px,39svh,420px);position:relative}
.hero h1{font-size:clamp(60px,6.2vw,88px);font-weight:650;letter-spacing:-.05em;line-height:1.02;text-shadow:0 2px 22px #f1f3f680}
.hero-content>p{font-size:20px;line-height:1.55;max-width:560px;margin:28px auto 0}
.hero-actions{margin-top:32px}
.hero-content::before{content:'';position:absolute;inset:240px -90px 20px;z-index:-1;background:radial-gradient(ellipse,#f1f3f6c7, #f1f3f67a 40%,#f1f3f600 72%);pointer-events:none}
.optical-field{mask-image:linear-gradient(#000 70%,transparent);-webkit-mask-image:linear-gradient(#000 70%,transparent)}
.studio-section{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center;padding-block:45px 130px}
.studio-section h2{font-size:clamp(44px,5.2vw,72px);line-height:1.14}
.studio-copy p{max-width:670px;font-size:20px;line-height:1.75;margin:auto}
.studio-links{justify-content:center;margin-top:28px}
.zepo-intro{display:flex;align-items:center;justify-content:center;gap:24px;direction:ltr}
.zepo-icon{display:inline-grid;place-items:center;width:80px;height:80px;background:#2464dc;border:1px solid #ffffffa6;border-radius:20px;box-shadow:inset 0 2px 3px #ffffff70,inset 0 -2px 3px #123a8459,0 12px 30px #2464dc26;color:#fff;flex:none}
.zepo-icon svg{width:53%;height:53%;overflow:visible;fill:none}
.zepo-icon path{stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.zepo-icon circle{fill:currentColor}
.showcase{padding-top:40px}
.showcase .section-heading{margin-bottom:60px}
.product-more{margin-top:34px}
.keyboard-section{display:flex;flex-direction:column;gap:55px;min-height:0}
.keyboard-section>.section-heading{max-width:none;width:100%}
.keyboard-section .section-heading p{max-width:none}
.keyboard-section .section-heading p br{display:none}
.keyboard-section .btn{margin-top:23px}
.keyboard-art{width:min(100%,1080px);height:480px;margin:0}
.keyboard-grid{left:50%;margin-left:-475px;transform:perspective(1500px) rotateX(18deg) rotateZ(-5deg);transform-origin:50% 50%}
.apps-section>.section-heading{margin-bottom:55px}
.app-glyph.zepo-icon{width:70px;height:70px}
.faq-section{display:flex;flex-direction:column;gap:45px}
.faq-list{width:min(820px,100%);margin:auto}
.faq-section h2{max-width:850px}
.guidance>.section-heading h2{font-size:clamp(36px,4.5vw,60px)}

/* Transparent substrate lets the content passing under the navigation tint it. */
.nav,.nav.scrolled{background:#f3f6fa57;border:1px solid #ffffffb5;backdrop-filter:blur(18px) saturate(1.65);-webkit-backdrop-filter:blur(18px) saturate(1.65);box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px #ffffff85,inset 1px 0 2px #fff9,0 7px 26px #213b5914;isolation:isolate;transition:background-color 220ms ease,box-shadow 220ms ease}
.nav.scrolled{background:#edf3fa35;box-shadow:inset 0 1px 1px #fff,inset 0 -1px 2px #fff9,0 8px 28px #132c5421}
.nav::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:linear-gradient(115deg,#ffffff70,transparent 28%,#ffffff12 58%,#fff6);opacity:.75}
.nav-inner{position:relative}
.nav-links a{color:#344355}
.nav .btn-nav{background:#ffffff70}
.nav.over-bespoke{background:#d9e5f024}
.nav.over-bespoke .nav-links a{color:#eef5ff}
.nav.over-bespoke .nav-links a[aria-current=true]{color:#a5caff}
.nav.over-bespoke .logo img{filter:brightness(0) invert(1)}
.nav.over-bespoke .nav-burger span{background:#eef5ff}
.nav.over-bespoke .nav-links.open a{color:#344355}
@supports not (backdrop-filter:blur(1px)){.nav,.nav.scrolled{background:#f1f3f6f5}.nav.over-bespoke{background:#202d3bf5}}

/* No painted gray-to-black band: the chapter enters with its actual surface. */
.bespoke-section{width:min(1480px,calc(100% - 48px));margin:80px auto 45px}
.bespoke-shell{position:relative;text-align:center;overflow:hidden;isolation:isolate;border-radius:32px;background:#18222f;color:#f1f5fa;padding:85px 40px 60px;border:1px solid #334152;box-shadow:inset 0 1px 0 #ffffff16,0 22px 70px -40px #16263880}
.bespoke-shell::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 44%,#334b622e,transparent 62%)}
.custom-eyebrow{font-size:14px;color:#adc1d8;margin-bottom:24px}
.bespoke-shell h2{font-size:clamp(42px,5.4vw,76px);font-weight:550}
.bespoke-shell .section-heading p{color:#bdcbdd;margin-top:24px;font-size:19px}
.bespoke-shell .revit-word{color:#92c0ff}
.bespoke-stage{position:relative;height:450px;width:min(100%,1100px);margin:-8px auto 0}
.bespoke-stage canvas{width:100%;height:100%;display:block}
.bespoke-motion{position:absolute;bottom:22px;left:0;width:42px;height:42px;display:grid;place-items:center;border-radius:11px;border:1px solid #c4def044;background:#b2cee110;color:#d6e7fa;backdrop-filter:blur(8px)}
.bespoke-motion .icon{width:17px;height:17px}
.bespoke-process{max-width:900px;margin:auto}
.process-options{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.process-options button{position:relative;background:transparent;border-top:1px solid #859cb140;padding:23px 5px 12px;color:#9fb2c8;font-size:17px;transition:color 180ms ease}
.process-options button::before{content:'';position:absolute;inset:-1px 0 auto;height:2px;background:#a4cdff;transform:scaleX(0);transform-origin:right;transition:transform 400ms var(--ease)}
.process-options button[aria-pressed=true]{color:#f1f5fa}
.process-options button[aria-pressed=true]::before{transform:scaleX(1)}
.process-options button span{font-size:12px;display:block;color:#8db5e5;letter-spacing:.07em;margin-bottom:8px}
#buildCaption{max-width:620px;min-height:52px;margin:16px auto 28px;font-size:16px;line-height:1.65;color:#b9cadd}
.bespoke-cta.btn-primary{background:#d7e9ff;color:#192d47;border-color:#f4f9ffbd;box-shadow:inset 0 1px 0 #fff,0 5px 20px #090e143b;min-height:50px;padding-inline:26px}
.build-fallback{position:absolute;inset:70px 15% 65px;display:flex;gap:15px;justify-content:center;perspective:900px;opacity:.7;pointer-events:none}
.build-fallback i{width:18%;border:1px solid #a7cdf4;border-radius:60% 60% 0 0;transform:rotateY(-30deg);background:#9bbbda10}
canvas[data-rendered]~.build-fallback{display:none}

/* Scroll progress is applied only to visible elements; text is never blurred. */
.reveal-ready .reveal,.reveal-ready .reveal:not(.in){filter:none;transition:none}
.scroll-fade{opacity:var(--scroll-opacity,1)!important;transform:translateY(var(--scroll-offset,0px))!important;filter:none!important}
.scroll-fade:focus-within{opacity:1!important;transform:none!important}
.is-paused .scroll-fade{opacity:1!important;transform:none!important}
@media(hover:hover) and (pointer:fine){.bespoke-cta.btn-primary:hover{background:#edf6ff}.process-options button:hover{color:#fff}}
@media(max-width:840px){
  .section{padding-block:85px}.section-heading h2{font-size:44px}.section-heading p{font-size:18px}
  .hero{min-height:860px;height:105svh}.hero-content{padding-top:310px}.hero h1{font-size:68px}
  .studio-section{padding-top:25px;gap:28px}.studio-copy p{font-size:18px}
  .keyboard-section>.section-heading{max-width:none}.keyboard-art{height:395px}.keyboard-grid{transform:scale(.8) perspective(1500px) rotateX(18deg) rotateZ(-5deg)}
  .bespoke-section{width:calc(100% - 32px);margin-block:50px 20px}.bespoke-shell{padding:65px 28px 45px;border-radius:25px}.bespoke-stage{height:365px;margin-top:10px}
  .bespoke-shell h2{font-size:52px}.bespoke-shell .section-heading p{font-size:18px}.process-options{gap:16px}.process-options button{font-size:15px}
}
@media(max-width:540px){
  .section{padding-block:70px}.section-heading h2,.guidance>.section-heading h2{font-size:36px;line-height:1.15}.section-heading p{font-size:17px;margin-top:20px}
  .hero{min-height:820px;height:100svh;max-height:1000px}.hero-content{padding:280px 20px 0}.hero h1{font-size:clamp(44px,11vw,59px);letter-spacing:-.04em}.hero-content>p{font-size:17px;line-height:1.6;margin-top:26px}.hero-content::before{inset:230px -20px 20px}
  .studio-section{padding-top:20px}.studio-section h2{font-size:46px}.studio-copy p{font-size:17px;line-height:1.75;max-width:32ch}.studio-links{gap:22px}
  .zepo-intro{gap:15px}.zepo-icon{width:58px;height:58px;border-radius:15px}.showcase .section-heading{margin-bottom:42px}.showcase{padding-top:30px}
  .keyboard-section{gap:25px}.keyboard-art{height:310px;width:calc(100% + 36px);max-width:none;margin-inline:-18px}.keyboard-grid{transform:scale(.59) perspective(1500px) rotateX(18deg) rotateZ(-5deg)}
  .bespoke-section{width:calc(100% - 20px);margin-block:40px 10px}.bespoke-shell{padding:50px 18px 38px;border-radius:22px}.bespoke-shell h2{font-size:42px}.bespoke-shell .section-heading p{font-size:16px;max-width:30ch}.bespoke-shell .section-heading p br{display:none}.custom-eyebrow{font-size:12px;margin-bottom:20px}
  .bespoke-stage{height:300px;width:calc(100% + 36px);margin-inline:-18px;margin-top:0}.bespoke-motion{left:20px;bottom:15px}
  .process-options{gap:12px}.process-options button{font-size:13px;line-height:1.6;padding-inline:0}.process-options button span{font-size:11px}#buildCaption{font-size:14px;min-height:70px;margin-top:14px;margin-bottom:20px}
  .faq-section{gap:30px}.faq-list{text-align:right}.company-page .final-section{padding-top:60px}
}
@media(prefers-reduced-motion:reduce){.scroll-fade{opacity:1!important;transform:none!important}.hero-content>*{animation:none}.process-options button::before{transition:none}}