:root{--ink:#1b1a18;--sub:#66635f;--line:#e8e7e5;--canvas:#fff;--paper:#f4f4f3;--accent:#ef9645;--dark:#282420;--radius:22px;--max:1200px;--font:'Vazirmatn','DM Sans',system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:#fff;color:var(--ink);font:400 15px/1.85 var(--font);-webkit-font-smoothing:antialiased}body,button,input,textarea,select{font-family:var(--font)}button,input,textarea,select{font-size:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}img,svg,canvas{max-width:100%}::selection{background:#f6c28e;color:#201c19}:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.skip{position:fixed;top:-70px;inset-inline-start:24px;z-index:200;background:#fff;padding:8px 18px}.skip:focus{top:12px}.section-wrap{max-width:var(--max);margin:auto;padding-inline:24px}.site-header{position:fixed;top:27px;left:50%;transform:translateX(-50%);z-index:120;width:min(1190px,calc(100% - 84px));color:white;transition:top .35s,width .35s,color .35s}.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:56px;padding:0 8px;transition:background .35s,box-shadow .35s,border .35s,padding .35s,border-radius .35s}.site-header.scrolled{top:15px;width:min(1160px,calc(100% - 46px));color:#24201e}.site-header.scrolled .nav-inner{background:rgba(255,255,255,.96);border:1px solid #ebebeb;box-shadow:0 14px 34px #211d1815;border-radius:60px;padding:7px 10px 7px 18px;backdrop-filter:blur(18px)}.brand{display:inline-flex;align-items:center;gap:10px;font-family:'DM Sans',sans-serif;white-space:nowrap;font-weight:800;direction:ltr;letter-spacing:-.045em;font-size:20px}.brand-period{color:var(--accent)}.brand-mark{width:29px;height:29px;display:inline-grid;place-items:center;position:relative;border-radius:50%;background:conic-gradient(from 35deg,var(--accent) 0 33%,transparent 33% 41%,#c4a2bf 41% 72%,var(--accent) 72% 95%,transparent 95%);transform:rotate(-8deg)}.brand-mark:before{content:"";position:absolute;inset:8px;background:#282420;border-radius:50%}.brand-mark i{width:10px;height:10px;border-radius:50%;background:#27201e;position:absolute;inset-inline-end:0;bottom:1px}.site-header.scrolled .brand-mark:before,.site-footer .brand-mark:before{background:#fff}.site-header.scrolled .brand-mark i,.site-footer .brand-mark i{background:#fff}.nav-links{display:flex;align-items:center;justify-content:center;gap:32px;flex:1}.nav-links a{position:relative;font:700 12px/1.4 var(--font);opacity:.83;white-space:nowrap;transition:opacity .2s}.nav-links a:hover,.nav-links a.active{opacity:1}.nav-links a:after{content:"";position:absolute;bottom:-9px;inset-inline-start:50%;width:0;height:2px;background:var(--accent);transition:width .25s,inset-inline-start .25s}.nav-links a:hover:after,.nav-links a.active:after{width:100%;inset-inline-start:0}.nav-tools{display:flex;align-items:center;gap:14px}.lang-switch{border:0;background:transparent;color:inherit;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;min-width:35px;padding:7px 2px}.cta-pill{display:inline-flex;align-items:center;gap:20px;background:var(--accent);color:#271d15;border-radius:50px;padding:5px 5px 5px 17px;font-size:12px;font-weight:800;white-space:nowrap;direction:rtl;transition:transform .25s,background .25s}.cta-pill:hover{transform:translateY(-2px);background:#ffb167}.cta-circle,.round-arrow{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#25211e;color:#fff;line-height:1;font-family:'DM Sans',sans-serif;font-size:18px;transition:transform .25s}.cta-pill:hover .cta-circle,.btn:hover .round-arrow{transform:rotate(45deg)}.menu-button{display:none;border:0;background:transparent;color:inherit;width:40px;height:40px;align-items:center;justify-content:center;flex-direction:column;gap:6px}.menu-button span{height:2px;width:23px;background:currentColor;transition:transform .2s}.hero-frame{margin:12px;min-height:805px;height:min(850px,calc(100svh - 24px));max-height:1000px;position:relative;isolation:isolate;color:white;border-radius:22px;background:#302a26;overflow:hidden}.hero-noise{position:absolute;inset:0;z-index:-1;opacity:.8;background-image:radial-gradient(circle,#80756c6b .85px,transparent 1px);background-size:22px 22px;background-position:3px 2px;mask-image:linear-gradient(to bottom,#000b,#000a)}.hero-vignette{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 48% 56% at 27% 47%,#5e4f4845 0%,transparent 80%),linear-gradient(145deg,#302a2600 0%,#27242138 65%,#1e1c1a80 100%)}.hero-inner{max-width:1190px;padding:142px 24px 145px;min-height:100%;margin:auto;display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:26px}.hero-copy{z-index:4;max-width:560px;align-self:center}.eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:'Space Mono',var(--font);font-size:10px;letter-spacing:.06em;font-weight:700;color:#e2d9cf;text-transform:uppercase;background:#ffffff0d;border:1px solid #ffffff36;padding:8px 14px;border-radius:40px}.tiny-orb{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px #f09a50}.hero-title{font-size:clamp(41px,4.3vw,67px);font-weight:800;letter-spacing:-.055em;line-height:1.34;margin:27px 0 20px}.hero-title-soft{color:#bfbab5}.hero-desc{font-size:14px;line-height:2.1;max-width:435px;color:#e0d8d1;margin:0 0 30px}.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:47px;padding:5px 17px;border-radius:40px;font-size:12px;font-weight:800;transition:background .23s,transform .23s,border-color .23s;white-space:nowrap}.btn:hover{transform:translateY(-2px)}.btn-accent{background:var(--accent);color:#241a13;border:1px solid var(--accent)}.btn-accent:hover{background:#ffaf65}.btn-outline{border:1px solid #ffffff4d;color:#fff;background:#ffffff08;padding-inline:19px}.btn-outline:hover{background:#ffffff16}.hero-micro{display:flex;align-items:center;gap:14px;margin-top:38px;color:#b1aaa4;font:10px 'Space Mono',monospace;direction:ltr;justify-content:flex-end;letter-spacing:.05em}.micro-stroke{width:44px;height:1px;background:#9d9690}.hero-appear{animation:heroRise .7s both;animation-delay:.1s}.hero-title.hero-appear{animation-delay:.18s}.hero-desc.hero-appear{animation-delay:.26s}.hero-actions.hero-appear{animation-delay:.34s}.hero-micro.hero-appear{animation-delay:.4s}@keyframes heroRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}.hero-art{height:100%;position:relative;min-height:420px;display:grid;place-items:center;direction:ltr;overflow:visible}.hero-canvas{width:100%;height:100%;position:absolute;inset:0;filter:drop-shadow(0 0 50px #cc824419);z-index:2}.art-orbit{width:390px;height:390px;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotateX(71deg) rotateZ(-24deg);border:1px solid #e29c5a55;box-shadow:0 0 40px #e6a3690c;pointer-events:none}.art-orbit-b{width:500px;height:500px;transform:translate(-50%,-50%) rotateY(70deg) rotateZ(17deg);border-color:#f2a66821}.art-center-label{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;color:#f0d9c4;text-shadow:0 0 14px #b87e5244;pointer-events:none;transform:translateY(-5px)}.art-center-label span{font:700 clamp(54px,6vw,90px)/1 'DM Sans',sans-serif;letter-spacing:-.1em;opacity:.13}.art-center-label small{letter-spacing:.32em;font:9px 'Space Mono',monospace;opacity:.7}.art-coordinate{position:absolute;font:9px 'Space Mono',monospace;color:#aa9d91;letter-spacing:.14em;z-index:3}.coord-a{top:20%;left:9%}.coord-b{bottom:17%;right:1%}.art-cross{position:absolute;font:18px 'Space Mono',monospace;color:#dcaa783a}.art-cross-a{top:28%;right:12%}.art-cross-b{bottom:18%;left:21%}.hero-status{position:absolute;bottom:96px;right:max(35px,calc((100% - 1190px)/2 + 25px));display:flex;align-items:center;gap:9px;color:#afa59c;font-size:10px;z-index:4}.live-ring{width:8px;height:8px;border:2px solid var(--accent);border-radius:50%;box-shadow:0 0 0 4px #ed964311}.status-number{font:10px 'Space Mono',monospace;letter-spacing:.05em;margin-inline-start:20px}.hero-selector{position:absolute;bottom:25px;right:max(35px,calc((100% - 1190px)/2 + 25px));left:max(35px,calc((100% - 1190px)/2 + 25px));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;direction:rtl;z-index:5}.hero-tab{border:0;border-top:1px solid #ffffff47;background:transparent;color:#c0b6ae;text-align:start;padding:11px 3px 4px;display:flex;align-items:baseline;gap:10px;position:relative;min-width:0;transition:color .25s}.hero-tab:before{content:"";height:2px;position:absolute;top:-2px;right:0;width:0;background:var(--accent);transition:width .35s}.hero-tab.active:before{width:42%}.hero-tab.active{color:#fff}.hero-tab span{font:10px 'Space Mono',monospace;opacity:.65}.hero-tab strong{font-size:12px;font-weight:700}.hero-tab i{display:none}.motion-toggle{position:absolute;z-index:6;left:22px;bottom:23px;border-radius:50%;background:#fff0;border:1px solid #ffffff41;color:#fff;width:42px;height:42px;display:grid;place-items:center;font:17px 'DM Sans',sans-serif;transition:background .2s}.motion-toggle:hover{background:#ffffff20}.intro-section{padding-top:112px;padding-bottom:110px}.section-label{display:flex;align-items:center;gap:13px;font-weight:700;font-size:12px;color:#77716b}.label-box{display:grid;place-items:center;border-radius:7px;background:#f2f1ef;color:#c47c34;width:30px;height:30px;font:11px 'Space Mono',monospace}.intro-main{display:grid;grid-template-columns:1.6fr .65fr;gap:90px;margin:34px 0 60px;align-items:end}.oversized-heading{font-size:clamp(32px,4vw,59px);line-height:1.5;letter-spacing:-.048em;font-weight:800;margin:0}.muted{color:#999692}.intro-side{max-width:310px}.intro-side p{color:#66615d;font-size:14px;line-height:2.15}.thin-rule{display:block;width:65px;height:2px;background:var(--accent);margin-bottom:25px}.inline-link{display:inline-flex;align-items:center;gap:15px;font-size:12px;font-weight:800;border-bottom:1px solid #d5d1cd;padding-bottom:10px;margin-top:13px}.inline-link:hover{color:#bf6e24}.platform-ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);height:59px;overflow:hidden;direction:ltr;display:flex;align-items:center}.ticker-content{display:flex;align-items:center;gap:35px;white-space:nowrap;animation:ticker 37s linear infinite;font:10px 'Space Mono',monospace;color:#777;letter-spacing:.055em;width:max-content}.ticker-content b{color:#cc8b4f;font-size:16px;font-weight:400}@keyframes ticker{to{transform:translateX(-50%)}}.products-section{padding-top:75px;padding-bottom:125px}.center-heading{text-align:center;max-width:780px;margin:0 auto 62px}.mono-label{display:inline-block;font:11px 'Space Mono',monospace;color:#c47733;letter-spacing:.1em;direction:ltr}.center-heading h2,.section-split-head h2,.process-copy h2,.faq-copy h2{font-size:clamp(31px,3.6vw,52px);line-height:1.48;letter-spacing:-.047em;margin:15px 0}.center-heading h2 em{font-style:normal;color:#bd874f}.center-heading p{color:#686561;font-size:14px;line-height:2;max-width:570px;margin:0 auto 22px}.btn-black{background:#1b1a18;color:#fff}.btn-black:hover{background:#34312e}.btn-black .round-arrow{background:var(--accent);color:#241e19}.product-grid{background:#f0f0ef;border-radius:24px;padding:12px;display:grid;grid-template-columns:1.55fr 1fr;gap:12px;direction:rtl}.product-card{background:#fff;border:1px solid #eeedec;border-radius:17px;min-height:270px;position:relative;overflow:hidden;padding:21px;transition:transform .28s,box-shadow .28s;isolation:isolate}.product-card:hover{transform:translateY(-3px);box-shadow:0 12px 27px #29241b0b}.card-feature{grid-column:1/-1;min-height:360px}.card-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.feature-icon{width:36px;height:36px;border-radius:11px;background:#ee9849;color:#241b15;display:grid;place-items:center;font:22px 'DM Sans',sans-serif}.pill-label{font:10px 'Space Mono',monospace;direction:ltr;color:#9f9a95}.feature-card-body{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;min-height:290px;gap:40px}.card-copy{max-width:375px}.category{font-size:11px;color:#bd844f;font-weight:700}.product-card h3{font-size:clamp(25px,2.6vw,38px);font-weight:800;letter-spacing:-.045em;line-height:1.4;margin:10px 0}.card-copy h3 small{font:500 14px 'DM Sans',sans-serif;color:#8e8883;display:block;letter-spacing:0;margin-top:5px;direction:ltr;text-align:right}.product-card p{color:#66625e;font-size:13px;line-height:2.1}.card-link{display:inline-flex;align-items:center;gap:16px;font-weight:800;font-size:12px;border-bottom:1px solid #c5c0bb;padding-bottom:8px;margin-top:20px}.card-link b{border-radius:50%;width:24px;height:24px;background:#f2aa65;color:#251e18;display:grid;place-items:center;font:16px 'DM Sans',sans-serif;transition:transform .2s}.card-link:hover b{transform:rotate(45deg)}.product-device{width:min(100%,460px);margin:15px auto 0;background:#fbfaf9;border:1px solid #dad8d6;box-shadow:0 22px 46px #251f1818;border-radius:14px;transform:rotate(-5deg) translateY(25px);transform-origin:center;direction:ltr;overflow:hidden}.device-bar{height:29px;background:#eeeae7;display:flex;align-items:center;justify-content:space-between;padding:0 14px;color:#777;font:9px 'Space Mono',monospace}.dots{color:#c4a393;letter-spacing:2px}.device-inner{display:flex;min-height:225px}.device-sidebar{width:49px;background:#232f31;display:flex;flex-direction:column;align-items:center;gap:15px;padding:12px 8px}.device-brand{color:white;background:#c99259;border-radius:9px;display:grid;place-items:center;width:27px;height:27px;font:700 18px 'DM Sans',sans-serif}.device-sidebar i{width:17px;height:5px;background:#fff5;border-radius:3px}.device-sidebar i:nth-child(3){background:#ed9e59}.device-work{flex:1;padding:16px}.device-title{display:flex;justify-content:space-between;align-items:center;color:#646260;font:9px 'Space Mono',monospace}.mini-dot{height:9px;width:9px;border-radius:50%;background:#b6c6a9}.device-stats{display:flex;gap:12px;margin:14px 0}.device-stats div{background:white;flex:1;border:1px solid #eeeceb;padding:8px 13px;border-radius:7px}.device-stats small{display:block;color:#a5a09c;font:8px 'Space Mono',monospace}.device-stats strong{display:block;font:700 23px 'DM Sans',sans-serif;color:#262623}.device-work svg{width:100%;height:75px}.device-lines{display:flex;flex-direction:column;gap:5px}.device-lines i{height:5px;background:#ece8e5;width:93%;border-radius:4px}.device-lines i:nth-child(2){width:64%}.device-lines i:nth-child(3){width:75%}.card-standard{min-height:285px}.small-card-copy{max-width:85%;margin-top:30px;position:relative;z-index:2}.small-card-copy h3{font-size:23px;margin:0 0 9px}.small-card-copy p{max-width:280px;margin:0}.brain-art{position:absolute;left:15px;bottom:-42px;width:230px;height:230px;direction:ltr}.brain-circle{position:absolute;border:1px solid #ac9ddb70;border-radius:50%;inset:25px 14px;transform:rotate(-38deg)}.brain-two{inset:12px 40px;transform:rotate(38deg);border-color:#aa97dc91}.brain-nucleus{position:absolute;left:81px;top:75px;background:#27223f;color:#c9b9ff;border:5px solid #ede8f5;width:92px;height:112px;border-radius:24px;display:grid;place-items:center;font:700 54px 'DM Sans',sans-serif;box-shadow:0 16px 25px #261d4d30;transform:rotate(-18deg)}.brain-float{position:absolute;left:42px;top:65px;font-size:24px;color:#b99bed}.bottom-caption{position:absolute;bottom:13px;right:20px;color:#a9a5a1;font:10px var(--font)}.tile-visual{position:absolute;left:24px;bottom:16px;width:150px;height:120px;opacity:.85}.tile-visual-a span{position:absolute;background:#e9e3db;border:1px solid #d2c7bb;border-radius:8px;width:68px;height:56px;transform:rotate(-9deg)}.tile-visual-a span:nth-child(1){right:3px;top:0}.tile-visual-a span:nth-child(2){left:1px;top:13px;background:#d6b99b}.tile-visual-a span:nth-child(3){right:9px;bottom:0;background:#d3c9be}.tile-visual-a span:nth-child(4){left:0;bottom:0;background:#f8c08d}.tile-focus{position:absolute;left:63px;top:43px;font-size:32px;font-style:normal;color:#8c6d51}.site-window{background:#f7f8f7;border:1px solid #d1d5d3;border-radius:9px;box-shadow:0 13px 25px #1112;width:165px;height:112px;padding:10px;transform:rotate(-8deg)}.site-window>div{display:flex;gap:3px;margin-bottom:10px}.site-window>div i{width:5px;height:5px;background:#aeb8b1;border-radius:50%}.window-line{display:block;height:8px;width:58%;background:#bbc8c1;border-radius:5px;margin-bottom:6px}.window-line.wide{width:81%;height:13px;background:#678c7a}.window-panel{display:block;background:linear-gradient(135deg,#d8e5dc,#c3d5c9);height:36px;border-radius:6px;margin-top:10px}.section-split-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:42px}.section-split-head p{max-width:340px;color:#6b6661;line-height:2;font-size:14px}.services-section{padding-top:60px;padding-bottom:120px}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.service-card{border:1px solid #ebe9e7;border-radius:18px;padding:21px;min-height:260px;background:#faf9f7;display:flex;flex-direction:column;align-items:flex-start;transition:background .25s,transform .25s}.service-card:hover{background:#f5f1eb;transform:translateY(-3px)}.service-number{color:#c28b58;font:10px 'Space Mono',monospace}.service-symbol{width:100%;text-align:center;flex:1;display:grid;place-items:center;font:700 64px 'DM Sans',sans-serif;color:#b9a28e;line-height:1}.symbol-b{color:#e4a46b}.symbol-c{color:#889a9d}.symbol-d{color:#9ba68f}.service-card h3{font-size:15px;font-weight:800;margin:5px 0}.service-card p{font-size:12px;color:#77716a;margin:0}.approach-section{padding-top:20px;padding-bottom:130px}.process-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.process-copy p{max-width:440px;color:#69645e;line-height:2.15}.process-tabs{margin-top:30px;border-top:1px solid #e3e0de}.process-tab{display:flex;align-items:center;width:100%;gap:20px;padding:17px 0;background:transparent;border:0;border-bottom:1px solid #e3e0de;color:#7b746f;text-align:right;transition:color .25s}.process-tab span{font:11px 'Space Mono',monospace;color:#ae9d8c}.process-tab strong{font-size:15px;font-weight:700;flex:1}.process-tab b{font:17px 'DM Sans',sans-serif;transform:rotate(-45deg);transition:transform .25s;color:#aaa}.process-tab.active{color:#222}.process-tab.active b{color:#d78c47;transform:rotate(0)}.process-stage{min-height:490px;border-radius:22px;background:#262321;position:relative;overflow:hidden;color:white;padding:26px;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between}.process-stage:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffff21 .8px,transparent 1px);background-size:19px 19px;z-index:-1}.stage-header{font:10px 'Space Mono',monospace;color:#c1b2a6;display:flex;justify-content:space-between;direction:ltr}.stage-graphic{position:relative;height:330px;display:grid;place-items:center;overflow:hidden}.stage-orb{height:190px;width:190px;border:1px solid #f5b57f52;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#eaa85b38 0%,#8b593e23 28%,transparent 65%);box-shadow:0 0 0 26px #ffffff09,0 0 0 55px #ffffff06,0 0 0 92px #ffffff04;transition:transform .5s}.stage-orb span{font:200px 'DM Sans',sans-serif;line-height:.5;color:#efaa64;transition:transform .5s}.process-stage[data-step="1"] .stage-orb{transform:rotate(40deg)}.process-stage[data-step="2"] .stage-orb{transform:rotate(110deg)}.process-stage[data-step="3"] .stage-orb{transform:rotate(190deg)}.stage-wire{position:absolute;border:1px solid #d89d6666;transform:rotate(30deg);width:280px;height:160px;border-radius:50%}.wire-two{transform:rotate(-45deg)}.stage-point{width:6px;height:6px;border-radius:50%;background:#eb9c56;position:absolute;top:25%;left:29%;box-shadow:0 0 22px #ffab5b}.point-b{top:69%;left:76%;width:4px;height:4px}.stage-coordinate{position:absolute;bottom:9px;left:9px;font:8px 'Space Mono',monospace;direction:ltr;color:#b9a79a}.stage-footer{border-top:1px solid #ffffff34;padding-top:16px;display:flex;justify-content:space-between;align-items:center}.stage-footer small{color:#bbaea3;font-size:11px}.stage-footer strong{font-size:16px}.team-section{padding-top:30px;padding-bottom:135px}.team-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:17px}.person-card{min-width:0}.person-visual{height:270px;border-radius:16px;background:#ebe5dc;position:relative;overflow:hidden;display:grid;place-items:center;isolation:isolate}.visual-s{background:#eee4d8}.visual-o{background:#e3e9e6}.person-visual:before{content:"";position:absolute;width:160%;height:160%;background:repeating-linear-gradient(135deg,transparent 0 18px,#ffffff4a 18px 19px);z-index:-1}.person-visual strong{font:800 clamp(75px,9vw,150px)/1 'DM Sans',sans-serif;color:#b7a18c;letter-spacing:-.13em}.visual-o strong{color:#7e9890}.person-ring{position:absolute;width:205px;height:205px;border:1px solid #ffffffbb;border-radius:50%;transform:rotate(-30deg) scaleX(1.4)}.person-visual-index{position:absolute;top:20px;left:20px;color:#756958;font:10px 'Space Mono',monospace}.person-meta{display:flex;justify-content:space-between;gap:15px;align-items:start;padding:17px 3px}.person-meta h3{font-size:17px;margin:0;font-weight:800}.person-meta p{font-size:12px;color:#87817c;margin:4px 0}.person-meta>span{font:9px 'Space Mono',monospace;color:#b0aaa3;margin-top:6px}.person-invite{border-radius:16px;background:#292522;color:white;display:flex;flex-direction:column;overflow:hidden;min-height:345px}.invite-art{flex:1;display:grid;place-items:center;font-size:150px;color:#e9a25c;position:relative}.invite-art:before{content:"";border:1px solid #e9a25c47;border-radius:50%;width:200px;height:200px;position:absolute;box-shadow:0 0 0 35px #ffffff06,0 0 0 80px #ffffff05}.person-invite .person-meta{padding:18px 20px;align-items:center}.person-invite .person-meta p{color:#bbb0a6}.invite-arrow{background:var(--accent);color:#25201d;border-radius:50%;height:38px;width:38px;display:grid;place-items:center;font:22px 'DM Sans',sans-serif}.faq-section{padding-top:25px;padding-bottom:130px}.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}.faq-copy h2{margin-top:22px}.faq-copy p{color:#8a8581;max-width:280px;font-size:14px;margin-bottom:24px}.faq-wrap{background:#f1f1f0;border-radius:20px;padding:12px}.faq-item{border-radius:13px;background:#fff;margin-bottom:8px;overflow:hidden}.faq-item:last-child{margin:0}.faq-item summary{list-style:none;display:flex;align-items:center;gap:18px;min-height:71px;padding:16px 18px;cursor:pointer}.faq-item summary::-webkit-details-marker{display:none}.faq-num{color:#ce8442;font:11px 'Space Mono',monospace}.faq-item summary strong{flex:1;font-size:13px;font-weight:800}.faq-plus{display:grid;place-items:center;background:#f0f0ee;color:#686562;width:30px;height:30px;border-radius:50%;font:22px 'DM Sans',sans-serif;transition:transform .2s,background .2s}.faq-item[open] .faq-plus{transform:rotate(45deg);background:#ed984b;color:#211d19}.faq-item p{padding:0 57px 22px 54px;margin:0;color:#78716c;font-size:13px;line-height:2}.contact-frame{margin:0 12px 12px;border-radius:24px;overflow:hidden;background:#292522;position:relative;color:#fff;isolation:isolate}.contact-frame:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffff19 1px,transparent 1px);background-size:23px 23px;z-index:-1}.contact-frame:after{content:"";position:absolute;bottom:-130px;right:-130px;width:450px;height:450px;border-radius:50%;background:#9d683323;filter:blur(55px);z-index:-1}.contact-grid{max-width:1190px;margin:auto;padding:100px 24px 90px;display:grid;grid-template-columns:1fr .85fr;align-items:center;gap:100px}.mono-light{color:#e69f5b}.contact-copy h2{font-size:clamp(42px,5vw,75px);letter-spacing:-.057em;line-height:1.34;margin:25px 0}.contact-copy h2 em{color:#e7a667;font-style:normal}.contact-copy p{font-size:14px;color:#c4bab2;max-width:405px;line-height:2.15}.contact-small{margin-top:50px;direction:ltr;text-align:right;font:10px 'Space Mono',monospace;color:#c9aa90}.contact-small span{color:#e99b52}.contact-form-wrap{border-radius:17px;background:#fff;color:#24211f;padding:28px;box-shadow:0 22px 55px #0003}.contact-form-heading{display:flex;justify-content:space-between;margin-bottom:20px;font-size:17px}.contact-form-heading span{font:22px 'DM Sans',sans-serif}.contact-form-wrap form{display:grid;gap:12px}.contact-form-wrap label{display:block;font-size:11px;font-weight:700}.contact-form-wrap label>span{display:block;margin-bottom:6px}.contact-form-wrap input,.contact-form-wrap select,.contact-form-wrap textarea{width:100%;border:1px solid #e5e3e0;border-radius:8px;background:#f9f8f7;color:#252321;padding:10px 12px;font-size:12px;outline:none;transition:border .2s,box-shadow .2s}.contact-form-wrap input:focus,.contact-form-wrap select:focus,.contact-form-wrap textarea:focus{border-color:#c78543;box-shadow:0 0 0 3px #ef964523}.contact-form-wrap textarea{resize:vertical;min-height:77px}.form-send{border:0;width:100%;justify-content:space-between}.form-note,.form-status{margin:0;color:#908a84;font-size:10px;line-height:1.9}.copy-message{border:0;background:transparent;color:#a9662b;text-align:center;padding:6px;font-size:11px;font-weight:700}.site-footer{padding:60px 24px 25px;background:white}.footer-inner{max-width:1170px;margin:auto}.footer-top{display:grid;grid-template-columns:2.2fr .6fr .6fr;gap:50px;padding-bottom:65px}.site-footer .brand{color:#241e1a}.footer-identity p{max-width:290px;color:#8a827b;font-size:12px;line-height:2;margin:18px 0}.footer-group{display:flex;flex-direction:column;gap:8px;font-size:12px}.footer-group strong{font-size:11px;color:#aaa29b;margin-bottom:9px}.footer-group a:hover{color:#cb8240}.footer-bottom{border-top:1px solid #e7e5e3;padding-top:23px;display:flex;align-items:center;gap:20px;justify-content:space-between;color:#8d8983;font:10px 'Space Mono',var(--font)}.to-top{width:32px;height:32px;display:grid;place-items:center;border:1px solid #ddd;border-radius:50%;color:#292521;font-size:20px}.reveal{opacity:1;transform:none}.has-js .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}.has-js .reveal.visible{opacity:1;transform:translateY(0)}html.motion-paused *,html.motion-paused *:before,html.motion-paused *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}html.motion-paused .reveal{opacity:1;transform:none} @media (max-width:1090px){.nav-links{gap:18px}.site-header{width:calc(100% - 65px)}.hero-inner{grid-template-columns:1fr 1fr;gap:0}.hero-title{font-size:clamp(36px,5vw,59px)}.hero-art{min-height:340px}.art-orbit{width:300px;height:300px}.art-orbit-b{width:400px;height:400px}.process-grid{gap:48px}.service-grid{grid-template-columns:repeat(2,1fr)}.service-card{min-height:230px}.team-grid{gap:11px}.contact-grid{gap:60px}} @media (max-width:800px){.site-header{width:calc(100% - 46px);top:23px}.site-header.scrolled{width:calc(100% - 35px);top:11px}.nav-inner{min-height:50px}.nav-links{display:none;position:absolute;top:65px;right:0;left:0;padding:15px;background:#fff;color:#292521;border-radius:18px;box-shadow:0 13px 36px #0003;flex-direction:column;gap:0;align-items:stretch}.nav-links.open{display:flex}.nav-links a{padding:14px 16px;border-bottom:1px solid #eee;opacity:1}.nav-links a:last-child{border:0}.menu-button{display:flex}.hero-frame{min-height:825px;height:auto}.hero-inner{grid-template-columns:1fr;padding:126px 26px 157px;gap:12px}.hero-copy{max-width:660px}.hero-title{font-size:clamp(39px,6vw,58px);margin:23px 0}.hero-desc{max-width:550px}.hero-art{min-height:330px;height:330px;width:min(100%,490px);justify-self:center}.hero-micro{margin-top:17px}.hero-status{display:none}.hero-selector{right:24px;left:72px}.motion-toggle{left:21px}.intro-section{padding-top:80px;padding-bottom:80px}.intro-main{grid-template-columns:1fr;gap:12px;margin:22px 0 35px}.intro-side{max-width:600px}.section-split-head{align-items:start;flex-direction:column;gap:8px}.section-split-head p{max-width:580px}.products-section{padding-top:35px}.feature-card-body{gap:20px}.process-grid{grid-template-columns:1fr;gap:32px}.process-stage{min-height:390px}.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.person-invite{min-height:340px}.faq-grid{grid-template-columns:1fr;gap:35px}.faq-copy p{max-width:none}.contact-grid{grid-template-columns:1fr;gap:36px;padding:60px 25px}.contact-copy h2{font-size:clamp(37px,8vw,65px)}.contact-small{display:none}.contact-form-wrap{max-width:600px;width:100%}} @media (max-width:570px){html{scroll-padding-top:80px}.site-header{top:20px;width:calc(100% - 35px)}.site-header.scrolled{width:calc(100% - 29px)}.nav-inner{padding:0 2px;gap:5px}.site-header.scrolled .nav-inner{padding:4px 8px 4px 12px}.brand{font-size:18px;gap:6px}.brand-mark{width:26px;height:26px}.brand-mark:before{inset:7px}.nav-tools{gap:2px}.lang-switch{min-width:31px}.cta-pill{gap:7px;padding:4px 4px 4px 10px;font-size:10px}.cta-circle{width:26px;height:26px;font-size:16px}.menu-button{width:34px}.hero-frame{margin:7px;border-radius:17px;min-height:0}.hero-inner{padding:125px 24px 134px;gap:4px}.eyebrow{font-size:9px;max-width:100%;padding:6px 10px;line-height:1.6}.hero-title{font-size:clamp(31px,8.7vw,43px);line-height:1.38;letter-spacing:-.065em;margin:21px 0 13px}.hero-desc{font-size:12px;line-height:2;margin-bottom:19px}.hero-actions{gap:8px}.btn{min-height:42px;padding:5px 12px;font-size:11px;gap:8px}.round-arrow{width:27px;height:27px;font-size:16px}.hero-micro{font-size:8px;margin-top:20px}.micro-stroke{width:19px}.hero-art{height:225px;min-height:225px;overflow:hidden;margin:0 -15px}.art-orbit{width:205px;height:205px}.art-orbit-b{width:260px;height:260px}.coord-a,.coord-b{font-size:7px}.art-center-label small{font-size:7px}.hero-selector{bottom:15px;right:16px;left:60px;gap:4px}.hero-tab{padding-top:7px;flex-direction:column;align-items:start;gap:1px}.hero-tab span{font-size:9px}.hero-tab strong{font-size:10px}.motion-toggle{left:13px;bottom:16px;height:36px;width:36px}.section-wrap{padding-inline:20px}.intro-section{padding-top:67px;padding-bottom:67px}.oversized-heading{font-size:clamp(26px,7.6vw,38px)}.intro-side p{font-size:13px}.platform-ticker{height:54px}.products-section{padding-top:25px;padding-bottom:70px}.center-heading{margin-bottom:32px}.center-heading h2,.section-split-head h2,.process-copy h2,.faq-copy h2{font-size:clamp(27px,7.3vw,38px)}.center-heading p{font-size:13px}.product-grid{grid-template-columns:1fr;padding:8px;gap:8px}.product-card{padding:17px;min-height:270px}.card-feature{grid-column:1;min-height:470px}.feature-card-body{grid-template-columns:1fr;gap:2px}.card-copy{max-width:100%}.card-copy h3{font-size:29px}.card-copy h3 small{font-size:12px}.product-device{max-width:370px;transform:rotate(-3deg) translateY(16px);margin:0 auto}.device-inner{min-height:175px}.device-work svg{height:48px}.small-card-copy{margin-top:17px;max-width:76%}.small-card-copy h3{font-size:21px}.brain-art{width:190px;height:190px;bottom:-56px;left:-8px}.brain-nucleus{left:60px;top:58px}.tile-visual{opacity:.7;transform:scale(.85);transform-origin:bottom left;left:10px}.services-section{padding:20px 20px 80px}.service-grid{grid-template-columns:1fr 1fr;gap:9px}.service-card{padding:14px;min-height:230px}.service-card h3{font-size:12px}.service-card p{font-size:11px}.service-symbol{font-size:49px}.approach-section{padding-bottom:76px}.process-stage{min-height:345px;padding:20px}.stage-graphic{height:225px}.stage-orb{width:145px;height:145px}.stage-orb span{font-size:130px}.team-section{padding-bottom:76px}.team-grid{grid-template-columns:1fr;gap:20px}.person-visual{height:235px}.person-invite{min-height:245px}.invite-art{font-size:105px}.faq-section{padding-bottom:80px}.faq-wrap{padding:7px}.faq-item summary{min-height:64px;gap:10px;padding:12px}.faq-item summary strong{font-size:12px}.faq-item p{padding:0 42px 18px 25px;font-size:12px}.faq-num{font-size:10px}.contact-frame{margin:0 7px 7px;border-radius:17px}.contact-grid{padding:65px 18px 35px}.contact-form-wrap{padding:20px}.contact-copy p{font-size:12px}.site-footer{padding:45px 20px 25px}.footer-top{grid-template-columns:1fr 1fr;gap:25px}.footer-identity{grid-column:1/-1}.footer-bottom{flex-wrap:wrap;font-size:9px;justify-content:space-between}.footer-bottom>span:nth-child(2){display:none}} @media (max-width:355px){.site-header{width:calc(100% - 27px)}.cta-pill{font-size:0;gap:0;padding:4px}.hero-inner{padding-inline:16px}.hero-title{font-size:30px}.hero-tab strong{font-size:9px}.service-grid{grid-template-columns:1fr}.service-card{min-height:180px}.product-device{transform:rotate(-2deg) translateY(12px)}} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal,.has-js .reveal{opacity:1;transform:none}} .tile-visual-c{width:183px;height:123px;left:15px;bottom:14px}.tile-visual-c .node{position:absolute;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#f4ece3;border:1px solid #dbd0c4;color:#a5815d;font:24px 'DM Sans',sans-serif;z-index:2}.tile-visual-c .node-a{top:0;left:66px}.tile-visual-c .node-b{bottom:2px;left:0;background:#ecdecf}.tile-visual-c .node-c{bottom:2px;right:0;background:#e3e9e7;color:#6f8a83}.tile-visual-c .connector-line{position:absolute;width:100px;height:2px;background:#c7b6a4;top:60px;left:22px;transform:rotate(-36deg);z-index:1}.tile-visual-c .connector-b{left:69px;transform:rotate(36deg)} @media(max-width:570px){.card-standard{min-height:313px}.small-card-copy{max-width:100%;margin-bottom:100px}.small-card-copy p{max-width:100%;padding-inline-start:8px}.tile-visual,.brain-art{z-index:0}.small-card-copy{z-index:2}.tile-visual{bottom:17px}.bottom-caption{z-index:2;background:#fff9;padding:1px 3px;border-radius:2px}} /* OSARAA v3: design refinements, focus, mobile-first, motion affordances */ .site-header {top:20px;width:min(1190px,calc(100% - 58px));color:#fff;} .site-header .nav-inner{border-radius:100px;padding:7px 13px 7px 17px;background:rgba(36,32,30,.64);border:1px solid rgba(255,255,255,.21);box-shadow:0 13px 42px rgba(11,9,8,.15),inset 0 1px 0 rgba(255,255,255,.08);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%)} .site-header.scrolled .nav-inner{background:rgba(255,255,255,.86);border:1px solid rgba(238,235,232,.86);box-shadow:0 15px 44px rgba(22,19,15,.12);-webkit-backdrop-filter:blur(24px) saturate(175%);backdrop-filter:blur(24px) saturate(175%)} .site-header:not(.scrolled) .brand-mark:before,.site-header:not(.scrolled) .brand-mark i{background:#292522} .site-header .nav-tools{gap:12px} .hero-copy.scene-change .hero-title,.hero-copy.scene-change .hero-desc,.hero-copy.scene-change .eyebrow{animation:sceneEnter .58s cubic-bezier(.2,.8,.2,1) both} .hero-copy.scene-change .hero-desc{animation-delay:.09s}.hero-copy.scene-change .eyebrow{animation-delay:.04s} @keyframes sceneEnter{from{opacity:.15;transform:translateY(11px)}to{opacity:1;transform:translateY(0)}} .hero-frame[data-active-scene="1"] .hero-vignette{background:radial-gradient(ellipse 50% 55% at 72% 42%,#647c6952,transparent 74%),linear-gradient(145deg,transparent,#18272070)} .hero-frame[data-active-scene="2"] .hero-vignette{background:radial-gradient(ellipse 50% 55% at 70% 40%,#76647b65,transparent 75%),linear-gradient(145deg,transparent,#211c2770)} .hero-frame[data-active-scene="3"] .hero-vignette{background:radial-gradient(ellipse 50% 55% at 70% 40%,#8b64465a,transparent 75%),linear-gradient(145deg,transparent,#241f1b7a)} .hero-tab{min-height:44px;align-items:center;cursor:pointer} .hero-tab.active:before{width:100%;height:2px;transform-origin:right;animation:slideProgress 6.5s linear both} html[dir="ltr"] .hero-tab.active:before{transform-origin:left} .hero-frame.slide-manual .hero-tab.active:before{animation:none;width:100%} .motion-paused .hero-tab.active:before{animation-play-state:paused} @keyframes slideProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}} .hero-slide-info{position:absolute;bottom:84px;inset-inline-end:max(35px,calc((100% - 1190px)/2 + 25px));display:flex;align-items:center;gap:10px;color:#f1e5d7;z-index:5;font:700 10px 'Space Mono',monospace;letter-spacing:.06em;direction:ltr} .hero-slide-info strong{font-size:14px;color:#ffad68}.hero-slide-info .line{height:1px;width:35px;background:#ffffff66} .hero-art-label{position:absolute;bottom:15%;left:50%;transform:translateX(-50%);z-index:5;letter-spacing:.14em;font:700 10px 'Space Mono',monospace;color:#efc69e;text-align:center;white-space:nowrap;opacity:.85} .hero-art{isolation:isolate} .hero-copy .hero-title{min-height:2.7em} .team-section{scroll-margin-top:145px} /* Team: thoughtful abstract portrait system, no fabricated photography */ .team-section{padding-top:56px;padding-bottom:145px} .team-statement{padding:22px 27px;border:1px solid #e7e7e4;border-radius:17px;display:flex;align-items:center;gap:20px;margin:4px 0 25px;background:linear-gradient(120deg,#fbfaf8,#f7f8f7)} .team-statement .team-spark{width:48px;height:48px;border-radius:15px;background:#292522;flex-shrink:0;display:grid;place-items:center;color:#eda15d;font-size:24px} .team-statement strong{font-size:15px;font-weight:800}.team-statement p{font-size:12px;color:#6e6963;margin:4px 0 0;line-height:1.85} .team-grid-v3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} .team-profile{border:1px solid #e9e7e3;border-radius:22px;overflow:hidden;background:#fff;min-width:0;transition:transform .32s,box-shadow .32s,border-color .32s} .team-profile:hover{transform:translateY(-5px);box-shadow:0 24px 48px rgba(43,35,27,.08);border-color:#dcd7cf} .team-art{height:315px;position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center} .team-art.engineering{background:#eee9e1}.team-art.operations{background:#dfeae6} .team-art:before{content:"";position:absolute;inset:-25%;background-image:linear-gradient(#ffffff66 1px,transparent 1px),linear-gradient(90deg,#ffffff66 1px,transparent 1px);background-size:26px 26px;transform:perspective(480px) rotateX(28deg) rotate(-14deg);opacity:.45} .team-art:after{content:"";position:absolute;width:250px;height:250px;border-radius:40%;border:1px solid #fff9;transform:rotate(-25deg);box-shadow:0 0 0 25px #ffffff24,0 0 0 53px #ffffff1a} .team-art .team-monogram{font:800 clamp(100px,12vw,170px)/1 'DM Sans',sans-serif;letter-spacing:-.12em;z-index:2;color:#9e7e64;text-shadow:0 2px 0 #ffffff88;transform:translateY(-7px)} .team-art.operations .team-monogram{color:#507e72} .team-art .team-serial{position:absolute;top:21px;inset-inline-start:24px;z-index:3;font:700 10px 'Space Mono',monospace;letter-spacing:.1em;color:#6f665e} .team-art .team-aside{position:absolute;bottom:20px;inset-inline-end:24px;z-index:3;border:1px solid #ffffffa3;background:#ffffff78;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:30px;padding:5px 13px;font:700 10px 'Space Mono',monospace;color:#4a5651} .team-info{padding:24px 28px 26px} .team-info-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px} .team-info h3{font-size:23px;line-height:1.45;font-weight:800;margin:0} .team-info .team-role{font-size:13px;color:#726c65;margin:5px 0 0} .team-info .team-number{font:700 10px 'Space Mono',monospace;color:#a99e92;direction:ltr} .team-info .team-bio{font-size:12px;color:#625e59;margin:19px 0 18px;line-height:2.05;max-width:500px} .team-tags{display:flex;gap:7px;flex-wrap:wrap} .team-tags span{border-radius:35px;background:#f4f3f1;padding:6px 13px;font-size:11px;color:#5f5b56} .team-note{margin-top:19px;padding:23px 28px;border-radius:18px;background:#292522;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px} .team-note strong{font-size:16px}.team-note p{font-size:12px;margin:4px 0 0;color:#cfc6bf} .team-note a{flex-shrink:0;background:#ee9c52;color:#291e14;border-radius:28px;padding:11px 20px;font-size:12px;font-weight:800;transition:transform .25s} .team-note a:hover{transform:translateY(-2px)} .lang-alt-link{font-size:12px;color:#888;display:inline-block;margin-top:12px;text-decoration:underline;text-underline-offset:4px} @media (max-width:800px){.team-grid-v3{grid-template-columns:1fr}.team-art{height:260px}.team-info .team-bio{max-width:none}.site-header .nav-inner{padding:7px 10px}.hero-copy .hero-title{min-height:0}} @media (max-width:570px){.site-header{top:18px;width:calc(100% - 30px)}.site-header.scrolled{top:10px;width:calc(100% - 26px)}.site-header .nav-inner{padding:5px 8px;border-radius:50px}.site-header.scrolled .nav-inner{padding:5px 8px}.team-section{padding-bottom:100px}.team-art{height:230px}.team-info{padding:20px 19px 23px}.team-info h3{font-size:20px}.team-note{align-items:flex-start;flex-direction:column}.team-statement{padding:17px 18px}.team-art .team-monogram{font-size:110px}.hero-slide-info{bottom:110px;inset-inline-end:32px;font-size:9px}.hero-art-label{bottom:6%;font-size:9px}.hero-tab.active:before{animation-duration:6.5s}} @media (prefers-reduced-motion:reduce){.hero-tab.active:before{animation:none;width:100%}.team-profile,.team-profile:hover{transform:none}.hero-copy.scene-change *{animation:none!important}} /* OSARAA V4 — scroll-driven motion, editorial team, accessible progressive enhancement */ :root{--ease-studio:cubic-bezier(.22,1,.36,1);--story-progress:0;--hero-progress:0} /* Glass navigation: polished at load and on scroll */ .site-header .nav-inner{background:rgba(45,39,35,.53);border:1px solid rgba(255,255,255,.19);border-radius:56px;box-shadow:0 9px 36px rgba(0,0,0,.11),inset 0 1px rgba(255,255,255,.09);padding:6px 9px 6px 18px;backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3)} .site-header.scrolled .nav-inner{background:rgba(255,255,255,.84);border-color:rgba(255,255,255,.82);box-shadow:0 14px 42px rgba(29,24,21,.14),inset 0 1px #fff;backdrop-filter:blur(24px) saturate(1.35)} /* Real scroll-linked atmosphere, no scroll hijacking */ .hero-noise{transform:translate3d(0,calc(var(--hero-progress)*-29px),0);will-change:transform} .hero-vignette{opacity:calc(1 - var(--hero-progress)*.28)} .hero-copy{transform:translate3d(0,calc(var(--hero-progress)*-48px),0);opacity:calc(1 - var(--hero-progress)*.65);will-change:transform,opacity} .hero-art{transform:translate3d(0,calc(var(--hero-progress)*32px),0) scale(calc(1 - var(--hero-progress)*.07));transform-origin:center;will-change:transform} .hero-status{opacity:calc(1 - var(--hero-progress)*.8)} /* Slow editorial transitions, restrained interaction */ .product-card,.service-card{transition:box-shadow .35s var(--ease-studio),border-color .35s,transform .4s var(--ease-studio)} .product-card:hover{transform:translate3d(0,-5px,0);box-shadow:0 18px 45px rgba(36,32,27,.095)} .service-card:hover{transform:translate3d(0,-4px,0)} .product-grid .product-card:nth-child(2){transition-delay:.06s} .product-grid .product-card:nth-child(3){transition-delay:.12s} .product-grid .product-card:nth-child(4){transition-delay:.18s} .product-grid .product-card:nth-child(5){transition-delay:.24s} .service-grid .service-card:nth-child(2){transition-delay:.06s} .service-grid .service-card:nth-child(3){transition-delay:.12s} .service-grid .service-card:nth-child(4){transition-delay:.18s} /* Pinned, scroll-scrubbed brand storytelling */ .story-section{padding-top:115px;position:relative} .story-heading{padding-bottom:45px}.story-heading-row{display:flex;align-items:end;justify-content:space-between;gap:50px;margin-top:22px} .story-heading-row h2{font-size:clamp(30px,4.1vw,58px);font-weight:800;letter-spacing:-.045em;line-height:1.35;margin:0} .story-heading-row p{max-width:355px;color:#68645f;font-size:14px;line-height:2;margin:0 0 10px} .story-track{height:290svh;position:relative}.story-sticky{position:sticky;top:0;height:100svh;padding:12px;display:grid;place-items:center} .story-panel{width:100%;height:100%;min-height:530px;position:relative;display:grid;grid-template-columns:1fr 1fr;background:#24211f;border-radius:22px;color:#fff;overflow:hidden;isolation:isolate} .story-panel:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 54% 72% at 70% 42%,#67503a42,transparent),linear-gradient(135deg,#312b27,#201e1c)} .story-text{display:flex;flex-direction:column;padding:clamp(36px,5.3vw,94px) clamp(28px,6vw,100px);justify-content:space-between;position:relative;z-index:5;min-width:0} .story-overline,.story-kicker,.story-meter,.story-footnote,.story-axis,.team-ph-label,.team-ph-small,.team-person-top,.team-corner-label{font-family:'Space Mono',monospace;font-weight:700;font-size:10px;letter-spacing:.05em} .story-overline{display:flex;align-items:center;gap:12px;color:#cbbfb4}.story-overline em{margin-inline-start:auto;font-style:normal;color:#f0a45c} .story-pulse{height:7px;width:7px;border-radius:50%;background:#ef9645;box-shadow:0 0 0 5px #ef964518} .story-scenes{position:relative;min-height:350px;display:grid;align-items:center}.story-scene{position:absolute;inset-inline:0;top:50%;transform:translate3d(0,calc(-50% + 28px),0);opacity:0;pointer-events:none;transition:opacity .45s ease,transform .6s var(--ease-studio)} .story-scene.is-current{opacity:1;transform:translate3d(0,-50%,0);pointer-events:auto} .story-kicker{color:#e7a368;display:block;margin-bottom:17px}.story-scene h3{font-size:clamp(39px,4.1vw,67px);letter-spacing:-.045em;line-height:1.38;margin:0 0 26px;font-weight:800}.story-scene p{max-width:480px;color:#c9c1bb;line-height:2.1;font-size:15px;margin:0} .story-meter{display:flex;gap:20px;align-items:center;color:#998e85;direction:ltr}.story-meter-track{height:2px;background:#5a4c42;width:160px;overflow:hidden}.story-meter-track span{display:block;height:100%;background:#efa05c;width:calc(var(--story-progress)*100%);transform-origin:left} .story-visual{position:relative;overflow:hidden;isolation:isolate;min-width:0}.story-visual-grid{position:absolute;inset:0;background:radial-gradient(circle,#ffffff26 .8px,transparent 1px);background-size:23px 23px;mask-image:radial-gradient(ellipse 70% 75% at center,#000,transparent)} .story-visual-glow{position:absolute;inset:10% 0;background:radial-gradient(ellipse 38% 47% at 52% 50%,#c07b4330,transparent 100%);transform:scale(calc(1 + var(--story-progress)*.3))} .story-orbit{position:absolute;border:1px solid #b5855b3e;border-radius:50%;width:min(40vw,530px);height:min(40vw,530px);top:50%;left:50%;transform:translate(-50%,-50%) rotate(calc(var(--story-progress)*110deg));transition:border-color .4s}.orbit-two{width:min(29vw,380px);height:min(29vw,380px);border-style:dashed;transform:translate(-50%,-50%) rotate(calc(var(--story-progress)*-170deg))} .story-blueprint{position:absolute;inset:15%;transform:translateY(calc(var(--story-progress)*-24px)) rotate(calc(var(--story-progress)*-13deg));transition:transform .14s linear} .story-core{position:absolute;inset:25%;border:1px solid #ffc18855;background:linear-gradient(140deg,#4b3b30,#24211f 70%);display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 0 0 19px #e9975110,0 0 0 55px #e9975107;border-radius:26%;transform:rotate(calc(var(--story-progress)*90deg)) scale(calc(.93 + var(--story-progress)*.08))} .story-core-mark{font-size:clamp(80px,11vw,180px);font-family:'DM Sans',sans-serif;font-weight:800;letter-spacing:-.1em;color:#f2b378;line-height:1}.story-core-sub{font:8px 'Space Mono',monospace;color:#cbb5a2;letter-spacing:.05em} .blueprint-node{position:absolute;width:13px;height:13px;border-radius:50%;background:#eda76c;z-index:2;box-shadow:0 0 0 6px #eda76c20}.bp-one{top:9%;left:40%}.bp-two{top:54%;right:2%}.bp-three{bottom:7%;left:14%} .blueprint-line{position:absolute;border:1px solid #e1a26b57;border-radius:50%}.line-one{width:70%;height:60%;top:18%;left:10%;transform:rotate(32deg)}.line-two{width:70%;height:55%;top:20%;left:24%;transform:rotate(-37deg)}.line-three{width:50%;height:75%;top:15%;left:26%;transform:rotate(65deg)} .story-panel[data-story-step="1"] .story-core{border-radius:18%;box-shadow:0 0 0 36px #e997510a,0 0 0 75px #e9975106}.story-panel[data-story-step="2"] .story-core{border-radius:50%;background:linear-gradient(140deg,#6f523a,#24211f)} .story-axis{position:absolute;color:#a18c79;opacity:.75}.axis-x{top:10%;right:12%}.axis-y{bottom:11%;left:8%} .story-footnote{position:absolute;bottom:25px;inset-inline:32px;display:flex;justify-content:space-between;color:#91867d;font-size:9px;z-index:5} /* The people: tactile editorial visual identity without invented portraits */ .team-section{padding-top:115px;padding-bottom:125px}.team-head{margin-bottom:35px} .team-showcase{display:grid;grid-template-columns:.91fr 1.09fr;gap:14px;align-items:stretch} .team-philosophy{background:#252622;border-radius:24px;overflow:hidden;min-height:635px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;position:relative;isolation:isolate} .team-philosophy:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 43%,#71866d44,transparent 56%),radial-gradient(circle,#ffffff14 .7px,transparent 1px);background-size:auto,21px 21px} .team-ph-top{padding:28px 32px;display:flex;justify-content:space-between;align-items:center}.team-ph-label{color:#c5d1c3}.team-ph-star{font-size:24px;color:#d4e0cc} .team-ph-figure{position:absolute;inset:12% 8% 25%;display:grid;place-items:center}.team-orbit{position:absolute;border:1px solid #a0b69d4b;border-radius:50%;aspect-ratio:1/1}.team-orbit-outer{width:min(90%,370px);transform:rotate(calc(var(--team-progress)*50deg));border-style:dashed}.team-orbit-mid{width:min(70%,290px);transform:rotate(calc(var(--team-progress)*-100deg))}.team-orbit-inner{width:min(48%,200px);transform:scale(calc(.92 + var(--team-progress)*.13))} .team-ph-sign{font:800 clamp(90px,15vw,210px)/1 'DM Sans',sans-serif;letter-spacing:-.14em;color:#e2e8d9;transform:translateY(calc(var(--team-progress)*-23px));text-shadow:0 15px 45px #1118}.team-ph-sign span{color:#efaa64} .team-dot{position:absolute;width:12px;height:12px;background:#f0a863;border:3px solid #2d352b;border-radius:50%}.dot-a{top:14%;left:24%}.dot-b{right:15%;top:51%}.dot-c{bottom:8%;left:40%} .team-ph-bottom{padding:0 34px 36px;z-index:2}.team-ph-small{color:#d1b28f}.team-ph-bottom h3{font-size:clamp(26px,2.5vw,39px);line-height:1.5;margin:13px 0;font-weight:800;letter-spacing:-.03em}.team-ph-bottom p{font-size:13px;line-height:2;max-width:330px;color:#bbc6b9;margin:0} .team-people{display:grid;grid-template-rows:1fr 1fr;gap:14px;min-width:0}.team-person{position:relative;background:#f4f4f2;border:1px solid #e8e8e4;border-radius:22px;padding:24px 28px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:302px;transition:background .3s,box-shadow .3s,transform .35s var(--ease-studio)} .team-person:hover{background:#fafaf8;box-shadow:0 18px 40px #24221f12;transform:translateY(-3px)} .team-person:after{content:"";position:absolute;bottom:0;inset-inline:0;height:3px;background:linear-gradient(90deg,#eda365,#7e9b8c);transform:scaleX(0);transition:transform .5s var(--ease-studio);transform-origin:right}.team-person:hover:after{transform:scaleX(1)} .team-person-top{display:flex;justify-content:space-between;color:#827e78;font-size:10px;direction:ltr}.team-person-symbol{font-size:20px;color:#827e78;line-height:1} .team-person-center{display:flex;align-items:center;gap:21px;margin-top:15px;min-width:0}.team-avatar{width:91px;height:91px;flex:0 0 91px;display:grid;place-items:center;border-radius:24px;position:relative;overflow:hidden;font:800 32px 'DM Sans',sans-serif;letter-spacing:-.07em;isolation:isolate} .avatar-engineering{background:#e6dfd4;color:#654b34}.avatar-operations{background:#dee7df;color:#315d4c}.team-avatar:before{content:"";position:absolute;inset:8px;border:1px solid currentColor;opacity:.17;border-radius:17px}.avatar-orbit{position:absolute;width:100px;height:36px;border:1px solid currentColor;border-radius:50%;transform:rotate(-26deg);opacity:.22;z-index:-1} .team-person-detail{min-width:0}.team-person-detail h3{font-size:clamp(19px,2vw,25px);line-height:1.4;margin:0 0 3px;letter-spacing:-.025em}.team-person-detail p{color:#7a7169;margin:0;font-size:13px}.team-person-bio{font-size:13px;line-height:1.9;color:#605c57;margin:12px 0 0;max-width:530px}.team-specialties{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.team-specialties span{border:1px solid #dddcd7;background:#ffffffa8;border-radius:30px;padding:3px 11px;color:#6b655e;font-size:11px}.team-corner-label{position:absolute;inset-inline-end:25px;top:85px;color:#bbb8b3;font-size:8px;writing-mode:vertical-rl} .team-footer-cta{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:28px 30px;border:1px solid #e8e7e3;border-radius:20px;background:#fff} .team-footer-cta strong{display:block;font-size:19px;font-weight:800;margin:10px 0 2px}.team-footer-cta p{margin:0;color:#79736d;font-size:13px}.team-footer-cta .btn{flex-shrink:0} /* Rhythm of hover/focus/follow-through */ .btn,.inline-link,.card-link{transition:transform .22s var(--ease-studio),background .25s,border-color .25s,box-shadow .25s} .btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0) scale(.985)} /* Respect reduced motion and user pause; never hide content */ html.motion-paused .hero-copy,html.motion-paused .hero-art,html.motion-paused .hero-noise,html.motion-paused .team-ph-sign{transform:none!important;opacity:1!important;will-change:auto} html.motion-paused .story-blueprint,html.motion-paused .story-orbit,html.motion-paused .team-orbit{transform:none!important;transition:none!important} @media(max-width:1050px){.story-text{padding:45px 36px}.story-scene h3{font-size:clamp(32px,4.3vw,54px)}.team-showcase{grid-template-columns:.88fr 1.12fr}.team-philosophy{min-height:620px}.team-person{padding:20px}.team-corner-label{display:none}} @media(max-width:800px){.story-section{padding-top:75px}.story-heading-row{display:block}.story-heading-row p{margin-top:18px}.story-track{height:245svh}.story-sticky{padding:7px}.story-panel{grid-template-columns:1fr 0.7fr;min-height:520px}.story-text{padding:45px 24px}.story-scene h3{font-size:clamp(29px,4.7vw,45px)}.story-scene p{font-size:13px}.story-scenes{min-height:285px}.story-footnote{inset-inline:20px}.story-orbit{width:48vw;height:48vw}.orbit-two{width:34vw;height:34vw}.team-showcase{grid-template-columns:1fr}.team-philosophy{min-height:390px}.team-ph-figure{inset:6% 12% 12% auto;width:45%}.team-ph-sign{font-size:120px}.team-ph-bottom{max-width:65%}.team-people{grid-template-columns:1fr 1fr;grid-template-rows:auto}.team-person{min-height:350px}.team-person-center{flex-direction:column;align-items:flex-start}.team-person-detail{width:100%}} @media(max-width:570px){.hero-copy,.hero-art{will-change:auto}.story-section{padding-top:70px}.story-heading{padding-bottom:24px}.story-heading-row h2{font-size:31px}.story-track{height:220svh}.story-sticky{height:100svh;padding:7px}.story-panel{grid-template-columns:1fr;min-height:0}.story-text{padding:70px 24px 66px;z-index:5;justify-content:space-between}.story-overline{font-size:9px}.story-scenes{min-height:280px}.story-scene h3{font-size:34px;line-height:1.45}.story-scene p{font-size:13px;line-height:1.95;max-width:340px}.story-meter{gap:14px;font-size:8px}.story-meter-track{width:100px}.story-visual{position:absolute;inset:18% -22% 8% 34%;opacity:.16;z-index:1}.story-core-mark{font-size:150px}.story-footnote{bottom:20px;font-size:8px}.team-section{padding-top:85px;padding-bottom:85px}.team-philosophy{min-height:430px}.team-ph-figure{inset:10% 0 8% 23%;width:auto}.team-ph-bottom{max-width:80%}.team-ph-top{padding:22px}.team-ph-bottom{padding:22px}.team-people{grid-template-columns:1fr}.team-person{min-height:300px;padding:22px}.team-person-center{flex-direction:row;gap:16px}.team-avatar{width:78px;height:78px;flex-basis:78px;font-size:26px}.team-footer-cta{display:block;padding:24px}.team-footer-cta .btn{margin-top:18px}.team-corner-label{display:none}.team-person-bio{font-size:13px}.site-header .nav-inner{background:rgba(45,39,35,.77)}.site-header.scrolled .nav-inner{background:rgba(255,255,255,.9)}} @media(prefers-reduced-motion:reduce){.hero-copy,.hero-art,.hero-noise,.team-ph-sign{transform:none!important;opacity:1!important}.story-scene{transition:none}.story-blueprint,.story-orbit,.story-core,.team-orbit{transform:none!important;transition:none!important}.team-person:hover,.product-card:hover,.service-card:hover{transform:none}} html:not(.has-js) .story-scene:not(:first-child){display:none} html:not(.has-js) .story-scene:first-child{position:relative;transform:none;opacity:1;top:auto} /* Final mobile editorial polish and no-JS fallback */ @media(max-width:570px){.team-ph-figure{inset:0 0 30% 24%;opacity:.5}.team-ph-sign{font-size:110px}.team-ph-bottom{max-width:96%}.team-ph-bottom h3{font-size:28px}.team-ph-top{position:relative;z-index:3}} html:not(.has-js) .story-track{height:auto}html:not(.has-js) .story-sticky{position:relative;height:auto;min-height:640px}html:not(.has-js) .story-panel{min-height:620px} @media(max-width:570px){html:not(.has-js) .story-sticky{min-height:500px}html:not(.has-js) .story-panel{min-height:490px}} /* Accessible reading mode: all chapters become regular document flow. */ @media(prefers-reduced-motion:reduce){ .story-track{height:auto!important}.story-sticky{position:relative!important;height:auto!important;padding:9px!important} .story-panel{height:auto!important;min-height:540px!important} .story-text{min-height:540px!important} .story-scenes{display:block!important;min-height:unset!important;margin:38px 0} .story-scene{position:relative!important;inset:auto!important;top:auto!important;opacity:1!important;transform:none!important;pointer-events:auto!important;margin-bottom:40px} .story-scene:last-child{margin-bottom:0} .story-meter{display:none!important} } html.motion-paused .story-track{height:auto!important} html.motion-paused .story-sticky{position:relative!important;height:auto!important} html.motion-paused .story-panel{height:auto!important;min-height:540px!important} html.motion-paused .story-scenes{display:block!important;min-height:unset!important;margin:38px 0} html.motion-paused .story-scene{position:relative!important;inset:auto!important;top:auto!important;opacity:1!important;transform:none!important;pointer-events:auto!important;margin-bottom:40px} html.motion-paused .story-meter{display:none!important} html:not(.has-js) .story-scenes{display:block!important;min-height:unset!important} html:not(.has-js) .story-scene{display:block!important;position:relative!important;inset:auto!important;top:auto!important;opacity:1!important;transform:none!important;margin:28px 0!important} @media(max-width:570px){html.motion-paused .story-visual{display:none!important}.story-scene h3{overflow-wrap:anywhere}} /* OSARAA V4.1 — intentional glass materials & cross-viewport layout rhythm. */ :root{--osaraa-side:clamp(18px,2.8vw,32px);--osaraa-glass-ease:cubic-bezier(.2,.8,.2,1)} /* A truly translucent floating header: let the dotted hero remain visible. */ .site-header{top:clamp(17px,2vw,26px);width:min(1190px,calc(100% - 48px));transition:top .28s var(--osaraa-glass-ease),width .28s var(--osaraa-glass-ease),color .28s} .site-header .nav-inner{position:relative;isolation:isolate;min-height:58px;padding:6px 10px 6px 17px;border-radius:999px;background:linear-gradient(120deg,rgba(255,255,255,.115),rgba(52,45,40,.19) 53%,rgba(255,255,255,.09));border:1px solid rgba(255,255,255,.27);box-shadow:0 12px 34px rgba(12,10,9,.12),inset 0 1px rgba(255,255,255,.20),inset 0 -1px rgba(255,255,255,.055);-webkit-backdrop-filter:blur(13px) saturate(1.52);backdrop-filter:blur(13px) saturate(1.52);transition:background .32s,border-color .32s,box-shadow .32s,padding .28s} .site-header .nav-inner::after{content:"";position:absolute;inset:1px 10px auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.33) 30%,rgba(255,255,255,.10) 72%,transparent);pointer-events:none;border-radius:999px} .site-header.scrolled{top:12px;width:min(1170px,calc(100% - 44px));color:#211e1c} .site-header.scrolled .nav-inner{background:linear-gradient(115deg,rgba(255,255,255,.73),rgba(248,246,243,.59));border-color:rgba(255,255,255,.88);box-shadow:0 12px 38px rgba(35,29,24,.13),0 2px 7px rgba(40,34,29,.04),inset 0 1px rgba(255,255,255,.92);-webkit-backdrop-filter:blur(19px) saturate(1.45);backdrop-filter:blur(19px) saturate(1.45);padding:6px 10px 6px 17px} .site-header.scrolled .nav-inner::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 35%,rgba(255,255,255,.35) 75%,transparent)} .site-header .brand,.site-header .nav-links,.site-header .nav-tools{position:relative;z-index:1} .site-header .nav-links a,.site-header .lang-switch{text-shadow:0 1px 3px rgba(0,0,0,.10)} .site-header.scrolled .nav-links a,.site-header.scrolled .lang-switch{text-shadow:none} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.site-header .nav-inner{background:rgba(46,39,35,.93)}.site-header.scrolled .nav-inner{background:rgba(254,252,249,.97)}} /* Consistent optical margins and comfortable text wrapping across breakpoints. */ .section-wrap{padding-inline:var(--osaraa-side)} .hero-frame{margin:clamp(8px,1vw,14px)} .hero-inner{max-width:1190px;padding-inline:var(--osaraa-side)} .hero-copy,.hero-desc,.intro-main>*,.section-split-head>*,.product-card,.service-card,.process-grid>*,.team-person,.team-philosophy,.faq-grid>*,.contact-grid>*{min-width:0} .hero-title,.oversized-heading,.section-split-head h2,.center-heading h2,.team-head h2{text-wrap:balance} .hero-desc,.intro-side p,.team-person-bio,.service-card p,.faq-item p{overflow-wrap:break-word} .nav-links a{padding-block:11px} .nav-links a:after{bottom:3px} .menu-button,.lang-switch{min-height:40px} /* Make open navigation more touch-friendly and visually aligned with the floating glass shell. */ @media(max-width:800px){ .site-header{top:18px;width:calc(100% - 38px)} .site-header.scrolled{top:10px;width:calc(100% - 34px)} .nav-inner,.site-header.scrolled .nav-inner{min-height:56px;padding:5px 9px} .nav-links{top:calc(100% + 10px);border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);box-shadow:0 17px 42px rgba(31,27,24,.15);border-radius:19px;overflow:hidden;padding:8px} .nav-links a{min-height:46px;display:flex;align-items:center;padding:11px 14px;border-radius:10px;border-bottom:0} .nav-links a:hover,.nav-links a:focus-visible{background:rgba(237,148,69,.10)} .nav-links a:after{display:none} .site-header .nav-inner{background:linear-gradient(110deg,rgba(255,255,255,.16),rgba(40,34,31,.32));border-color:rgba(255,255,255,.25)} .site-header.scrolled .nav-inner{background:linear-gradient(110deg,rgba(255,255,255,.82),rgba(248,245,241,.68))} .hero-inner{padding-inline:clamp(20px,4vw,32px)} } @media(max-width:570px){ :root{--osaraa-side:20px} .site-header{top:16px;width:calc(100% - 30px)} .site-header.scrolled{top:9px;width:calc(100% - 26px)} .nav-inner,.site-header.scrolled .nav-inner{min-height:54px;padding:4px 8px;gap:6px} .site-header .nav-inner{background:linear-gradient(110deg,rgba(255,255,255,.18),rgba(42,37,33,.31));-webkit-backdrop-filter:blur(15px) saturate(1.45);backdrop-filter:blur(15px) saturate(1.45)} .site-header.scrolled .nav-inner{background:linear-gradient(110deg,rgba(255,255,255,.82),rgba(249,246,243,.68));-webkit-backdrop-filter:blur(18px) saturate(1.45);backdrop-filter:blur(18px) saturate(1.45)} .nav-tools{gap:4px} .hero-frame{margin:7px;border-radius:18px} .hero-inner{padding-inline:clamp(17px,5vw,26px)} .hero-selector{gap:clamp(3px,1.5vw,8px)} .hero-tab strong{line-height:1.45} .team-person,.faq-item,.product-card{min-width:0} .section-split-head,.center-heading{min-width:0} .contact-form-wrap input,.contact-form-wrap textarea,.contact-form-wrap select{max-width:100%} } @media(max-width:355px){:root{--osaraa-side:17px}.site-header{width:calc(100% - 24px)}.site-header.scrolled{width:calc(100% - 22px)}.hero-selector{left:56px;right:13px}.hero-tab strong{font-size:9px}.site-header .brand-name{font-size:17px}} @media(prefers-reduced-motion:reduce){.site-header,.site-header .nav-inner{transition:none!important}} /* OSARAA v4.2 — mobile menu is independent of the glass header, not clipped inside it */ .mobile-nav-scrim{position:fixed;inset:0;z-index:117;background:rgba(18,17,16,.27);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s,visibility .24s;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .mobile-nav-panel{display:none;position:fixed;top:var(--mobile-menu-top,90px);left:16px;right:16px;z-index:119;border:1px solid rgba(255,255,255,.82);border-radius:23px;padding:14px;background:rgba(255,255,255,.95);box-shadow:0 30px 70px rgba(20,16,13,.23);-webkit-backdrop-filter:blur(26px) saturate(1.25);backdrop-filter:blur(26px) saturate(1.25);color:#24201c;max-height:calc(100dvh - var(--mobile-menu-top,90px) - 14px);overflow-y:auto;overscroll-behavior:contain;opacity:0;transform:translateY(-9px) scale(.985);visibility:hidden;pointer-events:none;transition:opacity .22s,transform .22s,visibility .22s} .mobile-nav-heading{display:flex;justify-content:space-between;align-items:center;padding:6px 13px 12px;font:700 10px 'Space Mono',monospace;letter-spacing:.12em;color:#82776d} .mobile-nav-dot{width:8px;height:8px;background:#ee994a;border-radius:50%} .mobile-nav-panel a{display:flex;align-items:center;gap:16px;padding:13px 12px;border-radius:13px;color:#302823;transition:background .18s,transform .18s;min-height:51px} .mobile-nav-panel a+a{border-top:1px solid #f0edea} .mobile-nav-panel a>span{direction:ltr;flex:0 0 23px;font:600 10px 'Space Mono',monospace;color:#c47d42} .mobile-nav-panel a>strong{flex:1;font-size:14px;font-weight:750} .mobile-nav-panel a>b{font:700 16px 'DM Sans',sans-serif;color:#d48e53} .mobile-nav-panel a:hover,.mobile-nav-panel a:focus-visible{background:#f8f1e9} .mobile-nav-panel .mobile-nav-contact{background:#24201c;color:#fff;margin-top:10px;border:0} .mobile-nav-panel .mobile-nav-contact>strong{color:#fff} body.nav-open .mobile-nav-scrim{opacity:1;visibility:visible;pointer-events:auto} body.nav-open .mobile-nav-panel{opacity:1;transform:none;visibility:visible;pointer-events:auto} body.nav-open{overscroll-behavior:contain} @media(max-width:800px){.mobile-nav-panel{display:block}.site-header{z-index:120}.site-header .nav-links{display:none!important}} @media(max-width:420px){.mobile-nav-panel{left:11px;right:11px;padding:10px}.mobile-nav-panel a{padding:11px 10px}} /* Team editorial; portrait media is independently replaceable with real team photos */ .team-editorial{display:grid;grid-template-columns:minmax(250px,.82fr) minmax(0,1.42fr);gap:16px;align-items:stretch;margin-top:38px} .team-intro-panel{position:relative;isolation:isolate;border-radius:26px;background:#272a26;overflow:hidden;color:#fff;min-height:640px;padding:30px;display:flex;flex-direction:column;justify-content:space-between} .team-intro-panel:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 50% 40%,#8caa9861,transparent 60%),radial-gradient(circle,#ffffff1b .7px,transparent 1px);background-size:auto,22px 22px} .team-editorial-top{display:flex;justify-content:space-between;align-items:center;font:700 10px 'Space Mono',monospace;color:#cad5cb;letter-spacing:.05em}.team-studio-mark{font-size:28px;color:#f4a866} .team-intro-visual{position:relative;height:335px;display:grid;place-items:center}.team-arc{position:absolute;display:block;aspect-ratio:1/1;border:1px solid rgba(219,234,220,.28);border-radius:50%}.arc-a{width:310px;border-style:dashed;transform:rotate(calc(var(--team-progress,0)*40deg))}.arc-b{width:230px;transform:rotate(calc(var(--team-progress,0)*-70deg))}.arc-c{width:150px;background:#ffffff0b}.team-editorial-letter{font:800 154px/1 'DM Sans',sans-serif;letter-spacing:-.15em;transform:translateY(calc(var(--team-progress,0)*-14px))}.team-editorial-letter span{color:#f1a564} .team-editorial-bottom{position:relative;z-index:1}.team-editorial-bottom .mono-label{color:#f1ab6c;font-size:9px}.team-editorial-bottom h3{font-size:clamp(25px,2.6vw,39px);line-height:1.5;font-weight:800;margin:10px 0}.team-editorial-bottom p{font-size:13px;line-height:2;color:#c1cec2;margin:0} .team-member-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .member-card{min-width:0;display:flex;flex-direction:column;border:1px solid #ece8e3;border-radius:25px;overflow:hidden;background:#fbfaf8;box-shadow:0 4px 14px #28221d08;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s} .member-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px #28221d16} .member-cover{position:relative;display:block;aspect-ratio:4/4.25;margin:10px 10px 0;border-radius:18px;overflow:hidden;isolation:isolate;background:#d4d4ce} .member-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.22,1,.36,1)} .member-cover:hover img{transform:scale(1.045)}.member-cover:focus-visible{outline:3px solid #f1a564;outline-offset:4px} .member-cover:after{content:'';position:absolute;inset:42% 0 0;background:linear-gradient(transparent,rgba(25,24,22,.46));pointer-events:none} .member-cover-tag{position:absolute;z-index:1;bottom:16px;inset-inline-start:15px;font:700 9px 'Space Mono',monospace;color:white;letter-spacing:.02em} .member-cover-action{position:absolute;z-index:1;top:14px;inset-inline-end:14px;width:35px;height:35px;background:#fffdf4e8;border:1px solid #ffffffa9;border-radius:50%;display:grid;place-items:center;color:#23201e;font:700 18px 'DM Sans',sans-serif} .member-info{display:flex;justify-content:space-between;align-items:flex-end;padding:22px 23px 0;gap:10px}.member-overline{font:700 9px 'Space Mono',monospace!important;letter-spacing:.05em;color:#aa7d58!important;margin:0 0 9px!important}.member-info h3{font-size:clamp(21px,2vw,28px);line-height:1.4;margin:0 0 3px}.member-info p:not(.member-overline){margin:0;color:#827c74;font-size:12px}.member-index{font:700 12px 'Space Mono',monospace;color:#b1aaa1} .member-summary{font-size:12px;line-height:2;min-height:64px;color:#6d675f;padding:0 23px;margin:13px 0} .member-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0 23px 22px;margin-top:auto} .member-actions a{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;min-height:37px;padding:7px 14px;font-size:11px;font-weight:750;transition:transform .2s,background .2s} .member-actions a:first-child{background:#292521;color:white}.member-actions a:first-child:hover{background:#514234;transform:translateY(-1px)}.member-actions .member-page-link{border:1px solid #ddd5cc;background:white;color:#5e554c}.member-actions .member-page-link:hover{background:#efe8df} .team-dialog{position:fixed;inset:0;border:0;padding:0;width:min(900px,calc(100% - 34px));max-width:none;max-height:min(90dvh,780px);border-radius:26px;overflow:auto;background:#fffdfa;color:#292521;box-shadow:0 45px 120px #140e0b66} .team-dialog::backdrop{background:rgba(23,20,18,.63);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)} .team-dialog[open]{animation:dialog-enter .28s ease both}@keyframes dialog-enter{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} .team-dialog-grid{display:grid;grid-template-columns:.9fr 1.12fr;min-height:520px}.team-dialog-photo{position:relative;min-height:400px;background:#dedbd5;overflow:hidden}.team-dialog-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.team-dialog-serial{position:absolute;bottom:21px;inset-inline-start:23px;background:#ffffffd9;border-radius:50px;padding:7px 12px;font:700 10px 'Space Mono',monospace;z-index:1} .team-dialog-content{padding:30px 35px 32px;display:flex;flex-direction:column}.team-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.team-dialog-head .mono-label{color:#bd8656}.team-dialog-close{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;border:1px solid #ddd6cc;border-radius:50%;background:#faf8f5;color:#4b4038;font:26px/1 system-ui} .team-dialog-copy{margin:auto 0;padding:20px 0 28px}.team-dialog-eyebrow{font:700 10px 'Space Mono',monospace;color:#b47c4e;letter-spacing:.035em}.team-dialog-copy h2{font-size:clamp(34px,4vw,53px);margin:15px 0 0;line-height:1.25;letter-spacing:-.035em}.team-dialog-role{font-size:14px;color:#817870;margin:10px 0}.team-dialog-divider{height:1px;background:#ebe6e1;margin:24px 0}.team-dialog-bio{font-size:14px;color:#615e59;line-height:2.15}.team-dialog-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}.team-dialog-tags span{background:#f4efe8;color:#756455;padding:6px 12px;border-radius:50px;font-size:11px} .team-dialog-bottom{display:flex;flex-wrap:wrap;gap:10px}.team-dialog-primary,.team-dialog-secondary{display:flex;align-items:center;justify-content:center;gap:18px;min-height:46px;border-radius:999px;padding:10px 19px;font-size:12px;font-weight:800}.team-dialog-primary{background:#292521;color:#fff}.team-dialog-primary b{color:#f3ad6b}.team-dialog-secondary{border:1px solid #ddd7d0;color:#292521} @media(max-width:1130px){.team-editorial{grid-template-columns:1fr}.team-intro-panel{min-height:310px}.team-intro-visual{position:absolute;inset:0 0 0 40%;height:auto;opacity:.45}.team-editorial-bottom{max-width:65%}.member-cover{aspect-ratio:6/5}} @media(max-width:650px){.team-editorial{gap:14px;margin-top:24px}.team-intro-panel{min-height:355px;padding:23px}.team-intro-visual{inset:0 0 0 12%;opacity:.36}.team-editorial-bottom{max-width:95%}.team-editorial-bottom h3{font-size:27px}.team-member-grid{grid-template-columns:1fr}.member-card{border-radius:22px}.member-cover{aspect-ratio:5/4}.member-info{padding:18px 20px 0}.member-summary{padding:0 20px}.member-actions{padding:0 20px 20px}.team-dialog{width:calc(100% - 18px);max-height:94dvh;border-radius:21px}.team-dialog-grid{grid-template-columns:1fr}.team-dialog-photo{height:230px;min-height:230px}.team-dialog-content{padding:18px 22px 24px}.team-dialog-copy{padding:16px 0}.team-dialog-copy h2{font-size:32px}.team-dialog-divider{margin:14px 0}.team-dialog-bio{font-size:13px;margin:0}.team-dialog-tags{margin-top:14px}} @media(max-width:360px){.member-actions a{font-size:10px;padding-inline:12px}.team-dialog-photo{height:190px;min-height:190px}.team-dialog-content{padding-inline:16px}} @media(prefers-reduced-motion:reduce){.mobile-nav-panel,.mobile-nav-scrim,.member-card,.member-cover img,.team-dialog[open]{transition:none!important;animation:none!important}} /* OSARAA v4.3 — responsive full-view hero, deliberate hierarchy and uncluttered team */ html{scroll-behavior:auto} .hero-frame{ height:calc(100svh - 24px); height:calc(100dvh - 24px); min-height:0;max-height:none; display:flex;flex-direction:column; contain:layout style; } .hero-inner{ width:100%;min-height:0;flex:1; padding-block:clamp(88px,13dvh,140px) clamp(125px,16dvh,170px); gap:clamp(24px,3vw,54px); } .hero-copy{min-width:0;max-width:560px;z-index:4} .hero-title{font-size:clamp(36px,4.55vw,67px);line-height:1.29;margin:clamp(14px,2.8vh,25px) 0 clamp(12px,2vh,18px);text-wrap:balance} .hero-desc{max-width:480px;line-height:1.93;margin-bottom:clamp(16px,3vh,29px);text-wrap:pretty} .hero-micro{margin-top:clamp(18px,3.4vh,30px);min-height:18px;justify-content:flex-end} .typewriter{font-family:'Space Mono',var(--font);letter-spacing:.035em;white-space:nowrap;font-weight:700} .type-cursor{display:inline-block;width:2px;height:1.1em;background:#eca367;vertical-align:-.19em;animation:cursorPulse .87s steps(1) infinite;flex-shrink:0} @keyframes cursorPulse{50%{opacity:0}} .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} .hero-scroll-cue{position:absolute;bottom:clamp(85px,11.8vh,111px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;color:#dfd1c3;z-index:7;line-height:1.2;transition:color .2s,opacity .2s} .hero-scroll-cue:hover,.hero-scroll-cue:focus-visible{color:#fff} .scroll-mouse{width:22px;height:33px;border-radius:14px;border:1.5px solid currentColor;display:grid;place-items:start center;padding-top:7px;position:relative;opacity:.9} .scroll-mouse i{display:block;width:2px;height:8px;border-radius:5px;background:#f5a968;animation:mouseWheel 1.7s ease-in-out infinite} .scroll-cue-down{font-size:13px;line-height:1;animation:downDrift 1.7s ease-in-out infinite} .hero-scroll-word{font:700 9px/1.4 'Space Mono',var(--font);letter-spacing:.08em;white-space:nowrap} @keyframes mouseWheel{0%,100%{opacity:.9;transform:translateY(0)}65%{opacity:0;transform:translateY(7px)}} @keyframes downDrift{0%,100%{transform:translateY(0);opacity:.65}60%{transform:translateY(4px);opacity:1}} /* Keep every team card in a balanced two-column grid; remove the promotional filler panel. */ .team-head{margin-bottom:17px} .team-motion-label{display:flex;gap:12px;align-items:center;margin:0 0 23px;color:#8b8177;font-size:10px;direction:ltr;justify-content:flex-end;min-height:18px} .team-motion-line{display:block;width:34px;height:1px;background:#bdada0} .team-motion-label .type-cursor{height:11px} .team-member-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,25px);align-items:stretch;width:100%} .member-card-polished{border-radius:26px;background:#fcfbf9;border:1px solid #e9e4de;box-shadow:0 2px 12px #25201b0a;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s,border-color .4s} .member-card-polished:hover{transform:translateY(-5px);border-color:#d9d0c5;box-shadow:0 25px 65px #30271a18} .member-card-polished .member-cover{aspect-ratio:1.32 / 1;margin:11px 11px 0;border-radius:18px;background:#34342f} .member-card-polished .member-cover:after{content:"";position:absolute;inset:42% 0 0;background:linear-gradient(transparent,#100e0b83);pointer-events:none} .member-card-polished .member-cover img{object-position:center;filter:saturate(.89) contrast(1.035)} .member-card-polished .member-cover-tag{z-index:3;background:#ffffffce;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#2b2621;border-radius:50px} .member-card-polished .member-cover-action{z-index:3} .cover-bottom-mark{position:absolute;bottom:15px;inset-inline-start:17px;z-index:3;color:#fff;letter-spacing:.12em;font:700 10px 'Space Mono',monospace} .member-kicker{display:block;margin:23px 25px 0;font:700 9px 'Space Mono',monospace;letter-spacing:.1em;color:#9b8067} .member-card-polished .member-info{padding:8px 25px 0} .member-card-polished .member-info h3{font-size:clamp(22px,2.45vw,29px)} .member-card-polished .member-summary{padding:0 25px;margin:15px 0;line-height:1.9;max-width:550px} .member-card-polished .member-actions{padding:13px 25px 24px;margin-top:auto} .member-card-polished .member-actions a{min-height:40px} .team-dialog{border:1px solid #ffffffc0;box-shadow:0 40px 130px #110e0a75} .team-dialog-grid{grid-template-columns:.94fr 1.06fr} .team-dialog-photo img{object-position:center} .team-dialog-content{padding-inline:clamp(23px,3.4vw,48px)} .team-dialog-copy h2{font-size:clamp(27px,3.4vw,43px);line-height:1.35} @media(max-width:800px){ .hero-frame{height:calc(100svh - 20px);height:calc(100dvh - 20px);min-height:0;max-height:none} .hero-inner{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding:clamp(98px,13dvh,123px) clamp(19px,5vw,33px) clamp(128px,16dvh,158px);gap:clamp(4px,1.5vh,17px);align-content:center;align-items:center} .hero-art{height:100%;min-height:0;max-height:min(27dvh,245px);width:min(100%,490px);align-self:center;justify-self:center} .hero-copy{max-width:660px;align-self:end} .hero-title{font-size:clamp(35px,6vw,54px)} .hero-scroll-cue{bottom:88px} .team-member-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:570px){ .hero-frame{height:calc(100svh - 14px);height:calc(100dvh - 14px);margin:7px;min-height:0;max-height:none} .hero-inner{display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:clamp(84px,11dvh,108px) 20px clamp(122px,16dvh,145px);gap:clamp(2px,.7vh,8px)} .hero-copy{flex:0 0 auto;width:100%;max-width:none;align-self:center} .hero-title{font-size:clamp(29px,8.2vw,41px);line-height:1.32;min-height:0!important;margin:14px 0 10px} .hero-desc{font-size:clamp(11px,2.95vw,13px);line-height:1.83;margin-bottom:14px} .hero-actions{gap:7px}.hero-actions .btn{min-height:40px} .hero-micro{font-size:9px;margin-top:13px} .hero-art{flex:1 1 auto;min-height:0;max-height:clamp(85px,20dvh,175px);width:100%;height:auto;margin:0;align-self:stretch} .hero-art-label{display:none} .hero-selector{bottom:16px;left:62px;right:15px} .hero-scroll-cue{bottom:83px;gap:3px}.scroll-mouse{width:19px;height:29px;padding-top:5px}.hero-scroll-word{font-size:8px}.scroll-cue-down{font-size:11px} .hero-slide-info{display:none} .team-member-grid{grid-template-columns:1fr;gap:17px} .member-card-polished .member-cover{aspect-ratio:1.28/1} .member-card-polished .member-info{padding-inline:20px} .member-card-polished .member-summary{padding-inline:20px} .member-card-polished .member-actions{padding-inline:20px} .member-kicker{margin-inline:20px} .team-motion-label{justify-content:flex-start;max-width:100%;overflow:hidden} .team-dialog-grid{grid-template-columns:1fr} } @media(max-width:570px) and (max-height:710px){ .hero-inner{padding-top:84px;padding-bottom:119px;gap:0} .hero-title{font-size:clamp(27px,7.6vw,35px);margin:10px 0 8px} .hero-desc{line-height:1.65;margin-bottom:10px;font-size:11px} .hero-actions .btn{min-height:37px} .hero-micro{margin-top:9px} .hero-art{max-height:80px;min-height:0} .hero-scroll-cue{bottom:76px} .scroll-mouse{height:25px;width:17px}.hero-scroll-word{font-size:7px} } @media(max-width:570px) and (max-height:565px){.hero-art{display:none}.hero-micro{display:none}.hero-inner{padding-top:72px}.hero-title{font-size:27px}.hero-scroll-cue{bottom:72px}} @media(prefers-reduced-motion:reduce){.type-cursor,.scroll-mouse i,.scroll-cue-down{animation:none}.hero-scroll-cue{transition:none}} /* V4.3 finishing details: never stack two photo labels on one another. */ .member-card-polished .member-cover-tag{top:14px;bottom:auto;inset-inline-start:15px;max-width:calc(100% - 75px);padding:6px 11px;line-height:1.35;font-size:9px;color:#312923;text-shadow:none} .member-card-polished .cover-bottom-mark{font-size:9px;text-shadow:0 1px 12px #0009} @media(max-width:355px) and (max-height:700px){ .hero-title{font-size:26px;line-height:1.25} .hero-desc{font-size:10.5px;line-height:1.52} .hero-micro{display:none} .hero-actions .btn{font-size:10px;padding-inline:10px} } /* V4.4 audited interaction and precision: cohesive offsets and accessible detail states. */ #main, .intro-section, .products-section, .services-section, .approach-section, .team-section, .faq-section, .contact-frame, .story-section {scroll-margin-top:clamp(86px,10vh,112px)} [tabindex="-1"]:focus:not(:focus-visible){outline:none} body.nav-open{overflow:hidden;overscroll-behavior:none} .hero-tab:focus-visible,.process-tab:focus-visible,.member-cover:focus-visible{outline:2px solid #f8bb7f;outline-offset:3px;border-radius:4px} .member-card-polished .member-actions a:focus-visible{outline-offset:3px} @media(max-width:570px){.section-wrap{padding-inline:clamp(18px,5.4vw,26px)}.team-section .section-split-head{row-gap:16px}.team-dialog{max-height:calc(100dvh - 24px)}} @media(prefers-reduced-motion:reduce){.member-card-polished,.team-dialog[open],.hero-appear{animation:none!important;transition:none!important}} /* Final readability and touch refinements */ @media(max-width:570px){.hero-desc{font-size:clamp(12px,3.13vw,13.5px)}.hero-selector .hero-tab{min-height:41px}.member-card-polished .member-summary{font-size:13px}.member-card-polished .member-actions a{min-height:44px}} @media(max-width:355px) and (max-height:700px){.hero-desc{font-size:11.6px;line-height:1.5}.hero-art{max-height:60px}.hero-copy .eyebrow{font-size:9px}} /* WCAG-aware fine contrast without changing the quiet brand palette */ .muted{color:#77736e} .team-motion-label{color:#706761} .member-kicker{color:#795b44} .member-card-polished .member-overline,.member-card-polished .member-index{color:#735d4c} /* OSARAA v4.5 — restrained glass progress capsules. These tiny surfaces have compositor-only fill animation; they intentionally avoid full-screen blur. */ .hero-selector{ gap:clamp(5px,1vw,11px); align-items:stretch; } .hero-selector .hero-tab{ isolation:isolate; overflow:hidden; min-width:0; min-height:clamp(43px,5.3vh,53px); gap:clamp(5px,.85vw,11px); padding:9px clamp(8px,1.15vw,16px); border:1px solid rgba(255,255,255,.19); border-radius:999px; background:rgba(255,255,255,.065); color:rgba(242,229,216,.81); -webkit-backdrop-filter:blur(7px) saturate(1.16); backdrop-filter:blur(7px) saturate(1.16); box-shadow:inset 0 1px rgba(255,255,255,.1),0 2px 8px rgba(10,7,5,.08); transition:border-color .2s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease; } .hero-selector .hero-tab:hover, .hero-selector .hero-tab:focus-visible{ border-color:rgba(255,207,159,.54); background:rgba(255,255,255,.11); color:#fff; } .hero-selector .hero-tab.active{ border-color:rgba(250,182,119,.68); background:rgba(255,241,225,.1); box-shadow:inset 0 1px rgba(255,255,255,.18),0 3px 16px rgba(13,8,4,.12); color:#fff; } /* The underlay becomes the clock face. Scale transforms do not cause reflow. */ .hero-selector .hero-tab::before, .hero-selector .hero-tab.active::before, .hero-frame.slide-manual .hero-tab.active::before{ content:""; position:absolute; inset:2px; width:auto; height:auto; z-index:-1; border-radius:999px; background:linear-gradient(105deg,rgba(243,145,65,.12),rgba(255,193,125,.34)); transform:scaleX(0); transform-origin:right center; animation:none; pointer-events:none; } html[dir="ltr"] .hero-selector .hero-tab::before, html[dir="ltr"] .hero-selector .hero-tab.active::before{transform-origin:left center} .hero-selector.hero-timer-active .hero-tab.active::before{ animation:slideProgress 6.5s linear both; } .hero-selector .hero-tab::after{ content:""; position:absolute; inset:1px 12px auto; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent); pointer-events:none; } .hero-selector .hero-tab span,.hero-selector .hero-tab strong{ position:relative;z-index:1; } .hero-selector .hero-tab span{font-size:9px;opacity:.75} .hero-selector .hero-tab strong{font-size:clamp(9px,1vw,12px);line-height:1.4;overflow-wrap:normal} .hero-selector .hero-tab:focus-visible{outline-offset:3px} /* Small story progress surface: one layer of frosted glass, and a GPU-scale fill. */ .story-meter{gap:13px;color:#c4b5a8;min-width:0} .story-meter-track{ position:relative; flex:0 0 clamp(112px,13vw,164px); width:clamp(112px,13vw,164px); height:14px; padding:3px; overflow:hidden; border:1px solid rgba(255,255,255,.21); border-radius:999px; background:rgba(255,255,255,.095); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); box-shadow:inset 0 1px rgba(255,255,255,.12),0 2px 9px rgba(0,0,0,.1); } .story-meter-track span{ display:block; width:100%;height:100%; border-radius:999px; background:linear-gradient(90deg,#d9813f,#f8b676); box-shadow:0 0 9px rgba(249,163,89,.22); transform:scaleX(var(--story-progress,0)); transform-origin:left center; will-change:transform; } .story-meter>span{white-space:nowrap;letter-spacing:.07em} /* Glass is a subtle enhancement, not a required image filter. */ @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ .hero-selector .hero-tab{background:rgba(75,65,58,.93)} .story-meter-track{background:#514640} } @media(max-width:570px){ .hero-selector{gap:5px} .hero-selector .hero-tab{min-height:42px;padding:7px clamp(5px,1.7vw,9px);gap:4px} .hero-selector .hero-tab span{font-size:8px} .hero-selector .hero-tab strong{font-size:clamp(8.5px,2.6vw,10.5px)} .story-meter{gap:9px;font-size:8px} .story-meter-track{flex-basis:98px;width:98px;height:13px} } @media(max-width:355px){ .hero-selector{gap:4px} .hero-selector .hero-tab{padding-inline:5px;min-height:40px} .hero-selector .hero-tab strong{font-size:8px} .hero-selector .hero-tab span{font-size:7px} .story-meter-track{flex-basis:78px;width:78px} } @media(prefers-reduced-motion:reduce){ .hero-selector .hero-tab, .hero-selector .hero-tab::before{transition:none!important;animation:none!important} .hero-selector .hero-tab.active::before{transform:scaleX(1)} .story-meter-track span{will-change:auto} } html.motion-paused .hero-selector .hero-tab.active::before{ animation:none!important;transform:scaleX(1) } /* OSARAA v4.6 — smaller visual capsules, preserved 44px touch targets. */ .hero-selector{gap:clamp(3px,.55vw,7px)} .hero-selector .hero-tab,.hero-selector .hero-tab.active{min-height:44px;padding:7px clamp(5px,.8vw,12px);background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#efe3d7;overflow:visible;isolation:isolate} .hero-selector .hero-tab::after{content:"";position:absolute;inset:6px 1px;height:auto;z-index:-2;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.18);border-radius:999px;box-shadow:inset 0 1px rgba(255,255,255,.08);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .hero-selector .hero-tab:hover::after,.hero-selector .hero-tab:focus-visible::after{background:rgba(255,255,255,.13);border-color:rgba(251,205,159,.55)} .hero-selector .hero-tab.active::after{border-color:rgba(248,184,124,.53);background:rgba(255,239,215,.11)} .hero-selector .hero-tab::before,.hero-selector .hero-tab.active::before,.hero-frame.slide-manual .hero-tab.active::before{inset:8px 3px;height:auto;border-radius:999px;box-shadow:none} .hero-selector .hero-tab span{font-size:8px}.hero-selector .hero-tab strong{font-size:clamp(8px,.95vw,11px)} .story-meter-track{flex-basis:clamp(86px,10vw,116px);width:clamp(86px,10vw,116px);height:9px;padding:2px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} .story-meter-track span{box-shadow:none}.story-meter{gap:10px} @media(max-width:570px){.hero-selector{gap:2px}.hero-selector .hero-tab{min-height:44px;padding:7px 4px;gap:3px}.hero-selector .hero-tab strong{font-size:clamp(8px,2.38vw,10px)}.hero-selector .hero-tab::after{inset:6px 0}.hero-selector .hero-tab::before,.hero-selector .hero-tab.active::before{inset:8px 2px}.story-meter-track{flex-basis:80px;width:80px;height:8px}} @media(max-width:355px){.hero-selector .hero-tab span{font-size:7px}.hero-selector .hero-tab strong{font-size:8px}.story-meter-track{flex-basis:70px;width:70px}} /* Refined team cards: content first, soft rhythm, no extra heavy graphics. */ .team-member-grid{gap:clamp(12px,1.8vw,23px)} .member-card-polished{background:#fffdfb;box-shadow:0 5px 24px rgba(35,28,22,.055);border:1px solid #eae4dc;border-radius:24px} .member-card-polished .member-cover{aspect-ratio:1.52 / 1;border-radius:17px;margin:9px 9px 0} .member-card-polished .member-cover img{filter:none;object-fit:cover} .member-card-polished .member-info{align-items:start;padding:14px 24px 0} .member-card-polished .member-info h3{font-size:clamp(23px,2.5vw,31px)} .member-card-polished .member-summary{font-size:13px;line-height:2;min-height:auto;padding:0 24px;margin:12px 0 13px} .member-skills{display:flex;gap:6px;flex-wrap:wrap;padding:0 24px 15px} .member-skills span{border:1px solid #e8dfd4;background:#f8f4ee;padding:5px 10px;border-radius:99px;font-size:10.5px;color:#706052} .member-card-polished .member-actions{padding:8px 24px 22px;gap:8px} .member-card-polished .member-actions a{font-size:11px;min-height:44px} @media(max-width:650px){.member-card-polished .member-cover{aspect-ratio:1.45/1}.member-skills{padding-inline:20px}.member-card-polished .member-summary{padding-inline:20px}.member-card-polished .member-info,.member-card-polished .member-actions{padding-inline:20px}} @media(prefers-reduced-motion:reduce){.hero-selector .hero-tab::before{animation:none!important}.member-card-polished{transition:none!important}} /* OSARAA Brand: crisp SVG mark, also customizable from admin. */ .brand-mark:before,.brand-mark:after,.brand-mark i{display:none!important} .brand-mark{background:transparent!important;box-shadow:none!important;border:0!important;display:inline-flex!important;align-items:center;justify-content:center;overflow:visible} .brand-mark .osaraa-brand-img{display:block;width:100%;height:100%;object-fit:contain;filter:none} /* OSARAA v4.9 unified public branding — real uploaded asset, not pseudo-CSS logo. */ .brand-mark{width:34px!important;height:34px!important;flex:none;overflow:hidden;border-radius:10px!important;background:transparent!important;transform:none!important;display:inline-flex!important;align-items:center;justify-content:center} .brand-mark::before,.brand-mark::after,.brand-mark i{display:none!important} .brand-mark .osaraa-brand-img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;max-width:none} .brand.brand--wordmark{gap:0;max-width:190px} .brand.brand--wordmark .brand-mark{width:clamp(100px,12vw,150px)!important;height:39px!important;border-radius:0!important} .brand.brand--wordmark .brand-name{display:none!important} @media(max-width:570px){.brand-mark{width:30px!important;height:30px!important}.brand.brand--wordmark .brand-mark{width:110px!important;height:33px!important}} /* 5.0: portrait-first team cards */ .member-card-polished .member-cover{background:#eae4dd} .member-card-polished .member-cover img{object-position:center 30%} .member-card-polished .member-cover.is-placeholder{background:#eee9e3}