/* Scalenet public page: polish layer of 2026-10-11, loaded after every other sheet.
   Same identity: ink #070c20, blue #295cff, Arial, the stepped mark. What changes is scale, rhythm, depth and motion.
   Nothing here hides content unless polish-v13.js has put the class sn13 on the root element. */
:root{--sn-ease:cubic-bezier(.2,.75,.2,1);--sn-sky:#84aeff}
h1,h2,h3{text-wrap:balance}

/* Scale: nothing a visitor has to read sits under 11px any more. */
.eyebrow,.micro{font-size:11.5px;letter-spacing:.15em}
.lead{font-size:19px}
.pill{min-height:52px;padding:13px 26px;font-size:14.5px;transition:background .25s,border-color .25s,transform .35s var(--sn-ease),box-shadow .35s}
.pill.small{min-height:44px;padding:10px 20px;font-size:13.5px}
.pill.primary{box-shadow:0 14px 40px #295cff59}
.pill.primary:hover{box-shadow:0 18px 54px #295cff80}
.text-link{font-size:14.5px}

/* Header: it stays with the visitor, and turns to dark glass once the page moves. */
.site-header{position:fixed;height:86px;border-bottom-color:transparent;transition:height .35s var(--sn-ease),background .35s,border-color .35s}
.site-header.is-scrolled{height:68px;background:#070c20f2;border-bottom-color:#ffffff14;-webkit-backdrop-filter:saturate(1.5) blur(18px);backdrop-filter:saturate(1.5) blur(18px)}
.site-header .brand img{width:34px;height:34px}
.brand>span{font-size:27px}
.brand-sub{font-size:9px;letter-spacing:.42em}
.site-header nav{font-size:13.5px;gap:30px}
.site-header nav a{position:relative;padding:8px 0;color:#c9d6f2;transition:color .2s}
.site-header nav a:hover,.site-header nav a[data-active]{color:#fff}
.site-header nav a::after{content:'';position:absolute;inset:auto 0 0;height:1px;background:var(--sn-sky);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--sn-ease)}
html[dir=rtl] .site-header nav a::after{transform-origin:right}
.site-header nav a:hover::after,.site-header nav a[data-active]::after{transform:scaleX(1)}
/* The one door on the public page: the client's own space. */
.site-header nav a[href^="/client"]{padding:9px 18px;border:1px solid #ffffff3d;border-radius:999px;color:#fff;transition:background .25s,border-color .25s}
.site-header nav a[href^="/client"]:hover{background:#ffffff12;border-color:#ffffff75}
.site-header nav a[href^="/client"]::after{content:none}
.header-tools select{appearance:none;-webkit-appearance:none;max-width:none;min-height:40px;padding:8px 32px 8px 15px;border:1px solid #ffffff30;border-radius:999px;color:#fff;font-size:12.5px;cursor:pointer;background-color:transparent;background-image:linear-gradient(45deg,transparent 50%,#c9d6f2 50%),linear-gradient(135deg,#c9d6f2 50%,transparent 50%);background-repeat:no-repeat;background-size:5px 5px,5px 5px;background-position:calc(100% - 17px) 53%,calc(100% - 12px) 53%}
html[dir=rtl] .header-tools select{padding:8px 15px 8px 32px;background-position:17px 53%,12px 53%}
.header-tools select:hover{border-color:#ffffff75}

/* Reading position, one thin line at the very top. */
.sn-progress{position:fixed;inset:0 0 auto;height:2px;z-index:60;pointer-events:none}
.sn-progress i{display:block;height:100%;background:linear-gradient(90deg,#295cff,#9cc0ff);transform-origin:left;transform:scaleX(var(--p,0))}
html[dir=rtl] .sn-progress i{transform-origin:right;background:linear-gradient(270deg,#295cff,#9cc0ff)}

/* A soft light under the pointer, on screens that have one. */
.sn-glow{position:fixed;left:0;top:0;width:640px;height:640px;border-radius:50%;background:radial-gradient(closest-side,#3f6fff24,transparent 72%);mix-blend-mode:screen;pointer-events:none;z-index:15;opacity:0;transition:opacity .6s;will-change:transform}
.sn-glow.on{opacity:1}

/* Opening: the mark assembles along its own slope, the four disciplines light up, the curtain rises. No click. */
.opening{background:radial-gradient(120% 78% at 50% 112%,#17329a 0%,#0c1848 36%,#070c20 70%);clip-path:inset(0 0 0 0);transition:clip-path .9s cubic-bezier(.76,0,.18,1);cursor:pointer}
.opening.finished{opacity:1;transform:none;clip-path:inset(0 0 100% 0)}
.opening .intro-path{position:relative;display:block;width:128px!important;height:128px!important;margin:0 auto 30px!important}
.opening .intro-path::before{content:'';position:absolute;inset:-70%;border-radius:50%;background:radial-gradient(closest-side,#295cff73,transparent);opacity:0;animation:sn-halo 2.2s .75s ease-out both}
.intro-mark{position:relative;display:block;width:100%;height:100%;overflow:visible}
.intro-mark path{fill:#f4f7ff}
.im-a{animation:sn-half-a 1.05s var(--sn-ease) both}
.im-b{animation:sn-half-b 1.05s var(--sn-ease) both}
.opening>.eyebrow{font-size:12px;letter-spacing:.34em;color:#9db4e6;margin-bottom:16px;animation:sn-rise .7s .55s var(--sn-ease) both}
.opening h2{font-size:clamp(30px,4.2vw,52px);letter-spacing:-.05em;max-width:760px;margin:0 0 28px;animation:sn-rise .8s .7s var(--sn-ease) both}
.intro-words{gap:0;margin-bottom:24px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#b9cbf2}
.intro-words span{position:relative;padding:2px 14px;animation:sn-word .6s both;animation-delay:calc(1.05s + var(--w,0)*.28s)}
.intro-words span:nth-child(2){--w:1}.intro-words span:nth-child(3){--w:2}.intro-words span:nth-child(4){--w:3}
.intro-words span+span::before{content:'';position:absolute;inset-inline-start:0;top:50%;width:1px;height:10px;margin-top:-5px;background:#ffffff2e}
.intro-progress{width:min(260px,60vw);height:2px;margin:0 auto 22px;border-radius:2px;background:#ffffff1c;overflow:hidden}
.intro-progress i{display:block;height:100%;background:linear-gradient(90deg,#295cff,#9cc0ff);transform-origin:left;animation:sn-load 2.3s .2s cubic-bezier(.4,.1,.2,1) both}
html[dir=rtl] .intro-progress i{transform-origin:right}
.opening .pill{min-height:44px;padding:8px 14px;border:0;background:none;box-shadow:none;font-size:12.5px;color:#8ea5d6;text-decoration:underline;text-underline-offset:5px;animation:sn-rise .6s 1.5s both}
.opening .pill:hover{background:none;color:#fff;transform:none}
.opening .pill:focus-visible{outline:0;color:#dfe8ff;text-decoration-thickness:2px}
@keyframes sn-half-a{from{opacity:0;transform:translate(-36px,18px)}to{opacity:1;transform:none}}
@keyframes sn-half-b{from{opacity:0;transform:translate(36px,-18px)}to{opacity:1;transform:none}}
@keyframes sn-halo{0%{opacity:0;transform:scale(.6)}35%{opacity:1}100%{opacity:.5;transform:scale(1)}}
@keyframes sn-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes sn-word{from{opacity:0;color:#fff}55%{opacity:1;color:#fff}to{opacity:1;color:#b9cbf2}}
@keyframes sn-load{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.motion-paused .opening *,.motion-paused .opening .intro-path::before{animation:none!important}

/* Hero: the world settles as the curtain rises, the copy arrives line by line, a light breathes on the stairs. */
.hero-world>img{transform:scale(calc(1.04 + var(--hero-p,0)*.07)) translate3d(calc(var(--px,0)*-12px),calc(var(--hero-y,0px) + var(--py,0)*-8px),0);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
html[lang=ar] .hero-world>img{transform:scaleX(-1) scale(calc(1.04 + var(--hero-p,0)*.07)) translate3d(calc(var(--px,0)*-12px),calc(var(--hero-y,0px) + var(--py,0)*-8px),0)}
.hero-world::after{content:'';position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(34% 44% at 74% 30%,#6f9cff42,transparent 72%);animation:sn-breathe 7s ease-in-out infinite}
html[lang=ar] .hero-world::after{background:radial-gradient(34% 44% at 26% 30%,#6f9cff42,transparent 72%)}
@keyframes sn-breathe{0%,100%{opacity:.35}50%{opacity:1}}
.hero-world.offscreen::after,.motion-paused .hero-world::after,body.inactive .hero-world::after{animation-play-state:paused}
html.sn13 .hero-world{transform:scale(1.09);transition:transform 2.8s cubic-bezier(.16,.7,.2,1)}
html.sn13.sn-in .hero-world{transform:none}
html.sn13 .hero-copy>*{opacity:0;transform:translateY(28px)}
html.sn13.sn-in .hero-copy>*{opacity:1;transform:none;transition:opacity .9s var(--sn-ease),transform 1.1s var(--sn-ease);transition-delay:calc(.12s + var(--k,0)*.12s)}
.hero-copy>:nth-child(2){--k:1}.hero-copy>:nth-child(3){--k:2}.hero-copy>:nth-child(4){--k:3}
html.sn13 .hero-bottom{opacity:0;transition:opacity 1s .95s}
html.sn13.sn-in .hero-bottom{opacity:1}
html.sn13 .motion-paused .hero-copy>*,html.sn13 .motion-paused .hero-bottom{opacity:1;transform:none}
html.sn13 .motion-paused .hero-world{transform:none}
.hero-bottom,.hero-bottom button{font-size:11.5px}
.hero-copy{opacity:calc(1 - var(--hero-p,0)*1.5);transform:translate3d(0,calc(var(--hero-p,0)*-46px),0)}

/* How we work: the stage becomes an object, the chapter being read stands out. */
.story-stage{border:1px solid #ffffff14;border-radius:22px;background:linear-gradient(180deg,#0e1a44b3,#0a1230e6);box-shadow:0 40px 120px #02061a80,inset 0 1px 0 #ffffff12}
.scene-bottom{left:24px;right:24px;bottom:20px;font-size:11px}
.scene-progress{left:24px;right:24px;bottom:10px;height:2px;border-radius:2px}
.scene-progress i{height:2px}
.graphic-label{font-size:13px}
.graphic-label.top{top:30px;inset-inline-start:28px}
.graphic-label.bottom{bottom:62px}
.channel-names{font-size:12.5px}
.evidence-line{font-size:13px}.evidence-line b{font-size:11.5px}.evidence-line span{font-size:10.5px}.evidence-check{font-size:13.5px}
.scene-two .source-mark{width:46px;height:46px}
.page-top img{width:17px;height:17px}
.chapter .chapter-number{display:flex;align-items:center;gap:14px;font-size:15px;letter-spacing:.14em}
.chapter .chapter-number::after{content:'';width:56px;height:1px;background:linear-gradient(90deg,#426eea,transparent)}
html[dir=rtl] .chapter .chapter-number::after{background:linear-gradient(270deg,#426eea,transparent)}
.chapter p{font-size:18px;line-height:1.7}
.step-tags{gap:8px;margin-top:8px;font-size:13px}
.step-tags span{margin:0;padding:7px 14px;border:1px solid #ffffff1f;border-radius:999px;background:#ffffff08;color:#c3d2f1}
@media(min-width:821px){
 html.sn13 .chapter{transition:opacity .6s,transform .8s cubic-bezier(.23,1,.32,1)}
 html.sn13 .story-copy.has-current .chapter.visible:not(.is-current){opacity:.36}
}

/* Your workspace: one film, the client's side only, framed as the product it is. */
.platform-section .rd-demo{max-width:1040px}
.rd-kicker{font-size:11.5px}
.rd-intro-text{font-size:18px}
.rd-player{border-color:#ffffff24;border-radius:20px;box-shadow:0 50px 140px #010615a6,0 0 0 1px #ffffff0a}
.rd-bar{padding:14px 22px}
.rd-mark{width:25px;height:25px}
.rd-view{font:600 11.5px/1 Arial,Helvetica,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#b9ccec;padding:9px 14px;border:1px solid #48628e;border-radius:999px}
html[lang=ar] .rd-view{letter-spacing:0;font-size:12.5px}
.rd-demo button{padding:9px 16px;border-radius:999px;font-size:12.5px}
.rd-demo .rd-play{min-width:86px}
.rd-demo .rd-chapter{border-radius:12px}
.rd-elapsed,.rd-chapter-time{font-size:11.5px}
.rd-role{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
html[lang=ar] .rd-role{letter-spacing:0}
.rd-description{font-size:15px}
.rd-badge{font-size:12.5px}
.rd-notes{font-size:12.5px}
.rd-transcript{font-size:15px}
.rd-tools>summary,.rd-chapter-picker>summary{font-size:12.5px}
.workspace-links{justify-content:center;margin-top:44px}
.workspace-links .pill{min-height:56px;padding:14px 32px;font-size:15.5px}
.connection-band p:last-child{font-size:14px}
.vendor-mark{transition:transform .35s var(--sn-ease),box-shadow .35s}
.vendor-mark:hover{transform:translateY(-3px);box-shadow:0 16px 36px #02061a66}

/* What we do. */
.service-list summary{grid-template-columns:45px 1fr 40px;padding:30px 0}
.service-list summary .micro{font-size:12px}
.service-list summary h3{font-size:clamp(26px,2.6vw,36px);transition:color .25s,transform .4s var(--sn-ease)}
.service-list summary:hover h3{color:#a9c5ff;transform:translateX(8px)}
html[dir=rtl] .service-list summary:hover h3{transform:translateX(-8px)}
.service-list .plus{display:grid;place-items:center;width:40px;height:40px;border:1px solid #ffffff26;border-radius:50%;font-size:20px;transition:transform .3s,border-color .25s,background .25s}
.service-list summary:hover .plus{border-color:#ffffff66;background:#ffffff0d}
.service-detail p{font-size:17px;line-height:1.7}

/* The founders. */
.portrait{border-radius:18px}
.founder-caption .eyebrow{font-size:11px}
.founder-caption>p:last-child{font-size:16px;line-height:1.65}
.film-copy>p{font-size:17px}
.film-copy .micro{font-size:11px}
.founder-film video{border-radius:18px;box-shadow:0 40px 90px #1b3a6b40}

/* From the journal. */
.resource{transition:background .3s}
.resource:hover{background:#ffffff06}
.resource .micro{font-size:11px}
.resource p{font-size:16px}
.resource-arrow{transition:transform .4s var(--sn-ease)}
.resource:hover .resource-arrow{transform:translate(5px,-5px)}

/* Let's talk. */
.contact-section a{font-size:16px}
.contact-address{font-size:14px}
.contact-section label:not(.consent){gap:8px;font-size:13.5px}
.contact-section input:not([type=checkbox]),.contact-section textarea{padding:15px 16px;border:1px solid #ffffff3d;border-radius:12px;background:#0d2fa83d;font-size:16px;transition:border-color .2s,background .2s,box-shadow .2s}
.contact-section input:not([type=checkbox]):focus,.contact-section textarea:focus{border-color:#fff;background:#0d2fa870;box-shadow:0 0 0 4px #ffffff26;outline:0}
.consent{font-size:13px}
.contact-section .micro{font-size:11.5px}
.contact-section #form-status{font-size:14px}
.contact-section form .pill{background:#fff;border-color:#fff;color:#12276b;font-weight:600}
.contact-section form .pill:hover{background:#eaf0ff;border-color:#eaf0ff}

/* Footer. */
.footer-top p{font-size:15px}
.footer-resources{font-size:14px;line-height:2}
.footer-bottom,.footer-bottom button{font-size:12.5px}
.site-footer .brand img{width:32px;height:32px}

/* Arrival of what the page already holds; only when the script is there to bring it in. */
html.sn13 .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--sn-ease),transform .9s var(--sn-ease);transition-delay:calc(var(--i,0)*70ms)}
html.sn13 .rv.in{opacity:1;transform:none}
html.sn13 .motion-paused .rv{opacity:1;transform:none;transition:none}

@media(max-width:1100px){.site-header nav{gap:20px;font-size:13px}.site-header nav a[href^="/client"]{padding:8px 14px}}
@media(max-width:820px){
 .site-header{height:72px}.site-header.is-scrolled{height:62px}
 .site-header .brand img{width:28px;height:28px}
 .brand-sub{font-size:8px}
 .menu{min-height:44px;padding:0 6px;font-size:14px}
 .site-header nav{top:100%;gap:4px;padding:22px 24px 28px;font-size:17px;background:#0a1230f5;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
 .site-header nav a{width:100%;padding:12px 0}
 .site-header nav a::after{content:none}
 .site-header nav a[href^="/client"]{width:auto;margin-top:10px;padding:12px 22px}
 .header-tools{gap:10px}
 .header-tools select{min-height:44px}
 .hero .lead{font-size:17.5px}
 .hero-world::after{background:radial-gradient(60% 34% at 66% 56%,#6f9cff3d,transparent 72%)}
 html[lang=ar] .hero-world::after{background:radial-gradient(60% 34% at 34% 56%,#6f9cff3d,transparent 72%)}
 .hero-bottom,.hero-bottom button{font-size:11px}
 .chapter .eyebrow{font-size:11px}
 .chapter p{font-size:17px}
 .mobile-art .channel-names{top:32px}
 .mobile-art{border:1px solid #ffffff14;border-radius:18px;background:linear-gradient(180deg,#0e1a44b3,#0a1230e6)}
 .rd-intro-text{font-size:16.5px}
 .rd-view{padding:8px 11px;font-size:11px;letter-spacing:.1em}
 .workspace-links .pill{width:100%}
 .service-list summary{grid-template-columns:28px 1fr 36px}
 .service-list .plus{width:36px;height:36px}
 .service-list summary:hover h3{transform:none}
 .service-detail p{font-size:16px}
 .resource p{font-size:15.5px}
 .footer-bottom nav{flex-wrap:wrap;gap:10px 18px}
}
@media(max-width:699px){.rd-demo button{padding:8px 12px;font-size:12px}.rd-demo .rd-play{min-width:62px}}
@media(max-width:480px){
 .hero .eyebrow{font-size:11px;letter-spacing:.1em}
 .hero .lead{font-size:16.5px;max-width:340px}
 .hero-actions .pill{font-size:14px;padding-inline:22px}
 .hero-actions .text-link{font-size:13.5px}
 .graphic-label{font-size:11.5px}.channel-names{font-size:11.5px}
 .evidence-line b{font-size:10.5px}.evidence-line span{font-size:10px}.evidence-check{font-size:12px}
 .opening .intro-path{width:104px!important;height:104px!important;margin-bottom:24px!important}
 .intro-words{font-size:10.5px}.intro-words span{padding:2px 9px}
 .step-tags{font-size:12.5px}.step-tags span{padding:6px 12px}
}
@media(prefers-reduced-motion:reduce){
 html.sn13 .hero-copy>*,html.sn13 .hero-bottom,html.sn13 .rv{opacity:1;transform:none}
 html.sn13 .hero-world{transform:none}
 .sn-glow{display:none}
}

/* The opening mark opens its eyes before the curtain rises. */
.im-eyes{opacity:0;animation:sn-eyes .3s 1.2s both}
.im-eyes circle{fill:#0a1033}
.im-eyes .im-g{fill:#fff}
.im-eye{transform-box:fill-box;transform-origin:center;animation:sn-blink 1.5s 1.45s both}
@keyframes sn-eyes{to{opacity:1}}
@keyframes sn-blink{0%,36%,54%,100%{transform:scaleY(1)}45%{transform:scaleY(.08)}}

/* The funnel world: one picture for the whole method. */
.fn-world{position:absolute;inset:0}
.fn-world canvas{display:block;width:100%;height:100%}
.fn-levels{list-style:none;margin:0;padding:0}
.fn-levels li{position:absolute;inset-inline-start:26px;display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;gap:4px 9px;max-width:178px;transform:translateY(-50%);opacity:.5;transition:opacity .4s}
.fn-levels li:nth-child(1){top:17%}.fn-levels li:nth-child(2){top:45%}.fn-levels li:nth-child(3){top:70%}
.fn-levels b{padding:5px 9px;border:1px solid #ffffff33;border-radius:8px;font:700 11px/1 Arial,Helvetica,sans-serif;letter-spacing:.1em;color:#dfeaff;transition:background .35s,border-color .35s,color .35s}
.fn-levels span{font:600 15px/1.2 Arial,Helvetica,sans-serif;color:#fff}
html[lang=ar] .fn-levels span{font-size:17px}
.fn-levels small{grid-column:1/-1;max-height:0;overflow:hidden;opacity:0;font-size:12.5px;line-height:1.45;color:#a9b6d1;transition:max-height .45s,opacity .35s}
.fn-levels i{grid-column:1/-1;display:none;height:3px;margin-top:4px;border-radius:2px;background:#ffffff1f;overflow:hidden}
.fn-levels i::after{content:'';display:block;height:100%;background:linear-gradient(90deg,#295cff,#9cc0ff);transform-origin:left;transform:scaleX(.25)}
html[dir=rtl] .fn-levels i::after{transform-origin:right}
.fn-world[data-step="0"] li[data-level="0"],.fn-world[data-step="1"] li[data-level="1"],.fn-world[data-step="2"] li[data-level="2"],.fn-world[data-step="3"] li{opacity:1}
.fn-world[data-step="0"] li[data-level="0"] b,.fn-world[data-step="1"] li[data-level="1"] b,.fn-world[data-step="2"] li[data-level="2"] b{background:#295cff;border-color:#295cff;color:#fff}
.fn-world[data-step="0"] li[data-level="0"] small,.fn-world[data-step="1"] li[data-level="1"] small,.fn-world[data-step="2"] li[data-level="2"] small{max-height:96px;opacity:1}
.fn-world[data-step="3"] .fn-levels i{display:block}
.fn-world[data-step="3"] .fn-levels i::after{animation:fn-meter 2.6s ease-in-out infinite alternate}
.fn-world[data-step="3"] li:nth-child(2) i::after{animation-delay:.4s}.fn-world[data-step="3"] li:nth-child(3) i::after{animation-delay:.8s}
.fn-world[data-leak] li b{background:none;border-color:#ffffff33;color:#dfeaff}
.fn-world[data-leak="0"] li[data-level="0"] b,.fn-world[data-leak="1"] li[data-level="1"] b,.fn-world[data-leak="2"] li[data-level="2"] b{background:#fff;border-color:#fff;color:#0a1033}
@keyframes fn-meter{from{transform:scaleX(.25)}to{transform:scaleX(.9)}}
.fn-out{position:absolute;left:64%;top:86%;margin:0;padding:7px 14px;border:1px solid #ffffff38;border-radius:999px;background:#0b1535d9;color:#fff;font:600 12.5px/1 Arial,Helvetica,sans-serif;white-space:nowrap;transform:translateX(-50%)}
.fn-loop{position:absolute;top:79%;inset-inline-start:26px;max-width:172px;margin:0;font-size:12.5px;line-height:1.45;color:#a9c5ff;opacity:0;transition:opacity .5s}
.fn-world[data-step="3"] .fn-loop{opacity:1}
.story-scene.scene-fn{pointer-events:none}
.motion-paused .fn-levels i::after{animation:none}
@media(max-width:820px){
 .mobile-art .fn-levels li{inset-inline-start:12px;gap:4px 7px}
 .mobile-art .fn-levels span{font-size:14px}
 .mobile-art .fn-levels b{padding:5px 7px;font-size:10.5px}
 .mobile-art .fn-levels small,.mobile-art .fn-loop{display:none}
 .mobile-art .fn-out{top:87%;font-size:11.5px;padding:6px 11px}
}
@media(prefers-reduced-motion:reduce){.fn-levels i::after{animation:none}}