:root{--blue:#2B0FE0;--night:#050311;--light:#F4F1FF;--violet:#7563EB;--coral:#FF6B4A;--mint:#4DF0C8;--ease:cubic-bezier(.44,0,.56,1)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--blue);color:var(--light);font-family:'Public Sans',sans-serif}a{color:inherit;text-decoration:none}button,a,summary{-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid var(--mint);outline-offset:5px}header{padding:28px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff40}.logo{width:210px;height:auto}nav{display:flex;gap:34px;font-size:14px}nav a{padding:8px 0;border-bottom:1px solid transparent}nav a:hover{border-color:currentColor}.hero{padding:40px 5% 22px;min-height:710px;display:flex;flex-direction:column;justify-content:space-between}.hero-top{display:flex;justify-content:space-between;gap:20px}.eyebrow,.section-label,.hero-rule,figcaption,.number{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.08em;line-height:1.6}.eyebrow{margin:0}h1,h2,h3{font-family:'Inter Tight',sans-serif;font-weight:600;letter-spacing:-.055em;margin:0}h1{font-size:clamp(52px,7.6vw,120px);line-height:1.04;margin:68px 0 45px}h1 span{display:block}em{font-style:normal;color:var(--coral)}.hero-bottom{display:flex;gap:50px;align-items:center;margin-bottom:78px}.hero-bottom p{max-width:360px;font-size:18px;line-height:1.55}.button{display:inline-flex;position:relative;align-items:center;border:1px solid #ffffff70;border-radius:100px;height:54px;padding:0 23px 0 64px;font-size:14px;white-space:nowrap}.button i{position:absolute;left:4px;top:4px;width:44px;height:44px;border-radius:50%;background:var(--light);color:var(--blue);display:grid;place-items:center;font-style:normal;font-size:24px;transition:left .88s cubic-bezier(.3,.5,.2,1),transform .88s cubic-bezier(.3,.5,.2,1)}.button span{transition:transform .88s cubic-bezier(.3,.5,.2,1)}.button:hover i,.button:focus-visible i{left:calc(100% - 48px);transform:rotate(360deg)}.button:hover span,.button:focus-visible span{transform:translateX(-40px)}.scroll{margin-left:auto;font-size:32px}.hero-rule{border-top:1px solid #ffffff55;padding-top:20px;display:flex;justify-content:space-between}.section{padding:100px 5%}.section-label{margin-bottom:54px}h2{font-size:clamp(44px,5.8vw,86px);line-height:1.04}.approach{background:var(--light);color:var(--night)}.approach .section-label{color:var(--blue)}.approach-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:8%}.body-copy{max-width:490px;color:#464262;line-height:1.8;font-size:16px;margin-top:30px}.symbol-figure{position:relative;margin:0;min-height:430px;display:flex;align-items:center;justify-content:center;isolation:isolate}.symbol-figure img{width:65%;max-height:340px;object-fit:contain}.grid-bg{position:absolute;inset:0;z-index:-1;background-image:repeating-linear-gradient(30deg,transparent 0 39px,#2b0fe012 40px 41px),repeating-linear-gradient(150deg,transparent 0 39px,#2b0fe012 40px 41px)}figcaption{position:absolute;bottom:0;left:0;right:0;text-align:center;color:var(--blue);font-size:10px}.work{background:var(--night)}.work .section-label{color:#b6aaff}.disciplines{margin-top:64px}details{border-top:1px solid #ffffff35}details:last-child{border-bottom:1px solid #ffffff35}summary{display:flex;align-items:center;gap:32px;cursor:pointer;list-style:none;padding:28px 0}summary::-webkit-details-marker{display:none}.number{color:var(--coral)}h3{font-size:44px}.plus{margin-left:auto;font-size:34px;font-weight:400;transition:transform .4s}details[open] .plus{transform:rotate(45deg)}.detail{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:0 0 32px 52px;line-height:1.7;color:#c8c4d7}.detail p{margin:0;max-width:500px}.detail p:first-child{font-size:22px;color:var(--light)}.foundation{padding-top:55px}.foundation .eyebrow{color:#b6aaff}.foundation p{font-family:'Inter Tight';font-size:24px}.foundation b{color:var(--mint);padding:0 20px;font-weight:400}.pattern-section{background:var(--night);min-height:660px;position:relative;overflow:hidden;display:flex;align-items:center}.pattern{position:absolute;inset:0;background-image:url('assets/pattern.svg');background-size:820px auto;mask-image:linear-gradient(90deg,transparent 0%,#000 65%)}.pattern-text{position:relative;padding:90px 5%;background:linear-gradient(90deg,var(--night),transparent);width:75%}.pattern-text h2{font-size:clamp(50px,6vw,86px);margin:35px 0}.pattern-text>p:last-child{line-height:1.8;color:#cbc6df}.contact h2{font-size:clamp(64px,9vw,130px);margin:44px 0}.contact-row{display:flex;align-items:center;justify-content:space-between;gap:30px}.contact-row p{line-height:1.7}footer{padding:40px 5%;background:var(--night);display:flex;align-items:center;flex-wrap:wrap;gap:35px;font-size:12px}footer span{margin-left:auto;color:#bbb5ce}.skip{position:absolute;top:-100px;left:20px;z-index:20;background:var(--night);padding:15px}.skip:focus{top:10px}.motion .reveal{opacity:0;transform:translateY(24px);transition:opacity 1.2s var(--ease) var(--delay,0ms),transform 1.2s var(--ease) var(--delay,0ms)}.motion .reveal.visible{opacity:1;transform:none}@media(max-width:760px){header{padding:24px 6%}.logo{width:160px}nav{gap:16px;font-size:12px}nav a:first-child{display:none}.hero{padding:32px 6% 22px;min-height:700px}.hero-top>span{display:none}h1{font-size:clamp(48px,10vw,76px);margin:55px 0 30px}.hero-bottom{align-items:flex-start;flex-direction:column;gap:18px;margin-bottom:50px}.hero-bottom p{font-size:17px}.scroll{display:none}.hero-rule span:nth-child(2){display:none}.section{padding:70px 6%}.approach-grid{grid-template-columns:1fr}.symbol-figure{min-height:360px;margin-top:30px}.section-label{margin-bottom:34px}h3{font-size:35px}.detail{grid-template-columns:1fr;gap:12px}.foundation p{font-size:20px;line-height:1.8}.foundation b{padding:0 5px}.pattern-text{width:100%;padding:70px 6%}.pattern{opacity:.55}.contact-row{align-items:flex-start;flex-direction:column}footer{gap:25px}footer span{margin:0;width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.motion .reveal{opacity:1;transform:none}}

/* v2: official fine grain and vertical Noche shadow fade. */
.pattern-section{isolation:isolate}
.pattern{mask-image:none;opacity:1;background-position:center top}
.pattern-section::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(5,3,17,0) 0%,rgba(5,3,17,.03) 25%,rgba(5,3,17,.28) 45%,rgba(5,3,17,.68) 65%,rgba(5,3,17,.94) 86%,#050311 100%)}
.pattern-section::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:url('assets/grain.png') repeat;background-size:600px 750px;opacity:.085;mix-blend-mode:screen;mask-image:linear-gradient(#000 0%,#000 75%,transparent 100%)}
.pattern-text{z-index:3;background:linear-gradient(90deg,rgba(5,3,17,.94) 0%,rgba(5,3,17,.75) 48%,rgba(5,3,17,0) 100%)}
@media(max-width:760px){.pattern{opacity:1}.pattern-text{background:linear-gradient(90deg,rgba(5,3,17,.93),rgba(5,3,17,.40))}}

/* v3: brand aura, fine grain and slow liquid movement. */
header,.hero,.approach,.work,.contact,footer{position:relative;isolation:isolate}
.hero,.contact{overflow:hidden;background:#2110a8}
.hero::before,.contact::before{content:"";position:absolute;inset:-18%;z-index:-2;pointer-events:none;background:url('assets/aura.png') center 65% / cover no-repeat;transform:scale(1.06);animation:aura-flow 23s ease-in-out infinite alternate}
.hero::after,.contact::after{content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 72% 75%,#7563eb50 0%,transparent 44%),radial-gradient(ellipse at 15% 30%,#05031180 0%,transparent 65%),linear-gradient(110deg,#18077755,transparent);animation:liquid-flow 17s ease-in-out infinite alternate}
.contact::before{animation-delay:-9s;background-position:center 85%}.contact::after{animation-delay:-6s}
header{background:#2610c5 url('assets/aura.png') center 15% / cover}
.approach::after,.work::after,footer::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('assets/grain.png') repeat;background-size:600px 750px;opacity:.1;mix-blend-mode:screen}
.approach::after{opacity:.14;mix-blend-mode:multiply}
.hero .surface-grain,.contact .surface-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('assets/grain.png') repeat;background-size:600px 750px;mix-blend-mode:soft-light;opacity:.22}
.pattern-section::before{background:linear-gradient(180deg,rgba(5,3,17,0) 0%,rgba(5,3,17,.08) 22%,rgba(5,3,17,.42) 48%,rgba(5,3,17,.82) 70%,#050311 100%)}
@keyframes aura-flow{0%{transform:translate(-2%,-2%) scale(1.04) rotate(-3deg)}50%{transform:translate(2%,1%) scale(1.12,1.04) rotate(1deg)}100%{transform:translate(-1%,3%) scale(1.06,1.14) rotate(4deg)}}
@keyframes liquid-flow{0%{transform:translate(-3%,2%) rotate(-5deg) scale(1.05)}100%{transform:translate(5%,-4%) rotate(7deg) scale(1.17,.96)}}
@media(prefers-reduced-motion:reduce){.hero::before,.hero::after,.contact::before,.contact::after{animation:none!important;transform:none}}
.motion-paused::before,.motion-paused::after{animation-play-state:paused}

/* v5: restrained brand aura after rejection of the strong diagonal glass. */
.hero{background:#2410c5}
.hero::before{opacity:.48;animation-duration:32s}
.hero::after{opacity:.3;animation-duration:28s}
.hero .surface-grain{opacity:.13}
header{background:#2b0fe0 url('assets/aura.png') center 10% / cover;background-blend-mode:soft-light}

/* v6: navigation floats over the same continuous hero material. */
header{position:absolute;top:0;left:0;width:100%;z-index:10;background:none;border-bottom:0}
.hero{padding-top:150px;min-height:820px}
.health-accent{color:var(--mint)}
@media(max-width:760px){.hero{padding-top:135px;min-height:805px}}

/* v7: sharp lower pattern, progressive blur and disappearance toward the top. */
.pattern{opacity:1;mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.06) 10%,rgba(0,0,0,.28) 24%,rgba(0,0,0,.65) 36%,#000 48%,#000 100%)}
.pattern-section::before{background:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);mask-image:linear-gradient(to bottom,#000 0%,#000 12%,rgba(0,0,0,.75) 24%,rgba(0,0,0,.3) 36%,transparent 48%,transparent 100%)}
.pattern-section::after{mask-image:linear-gradient(to bottom,transparent 0%,#000 48%,#000 100%)}

/* v8: seamless merge — the pattern section rises over the end of "What we do"; no hard colour seam. */
.work{padding-bottom:300px}
.work::after{mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%)}
.pattern-section{margin-top:-300px;padding-top:300px;min-height:960px;z-index:2;background:linear-gradient(to bottom,rgba(5,3,17,0) 0,var(--night) 300px)}
.pattern{mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.08) 12%,rgba(0,0,0,.35) 26%,rgba(0,0,0,.75) 40%,#000 54%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.08) 12%,rgba(0,0,0,.35) 26%,rgba(0,0,0,.75) 40%,#000 54%,#000 100%)}
.pattern-section::before{mask-image:linear-gradient(to bottom,#000 0%,#000 14%,rgba(0,0,0,.6) 28%,transparent 54%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 14%,rgba(0,0,0,.6) 28%,transparent 54%,transparent 100%)}
.pattern-section::after{mask-image:linear-gradient(to bottom,transparent 0%,#000 54%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 54%,#000 100%)}
@media(max-width:760px){.work{padding-bottom:220px}.pattern-section{margin-top:-220px;padding-top:220px;min-height:820px;background:linear-gradient(to bottom,rgba(5,3,17,0) 0,var(--night) 220px)}}

/* v10: v8 layout; the soft Noche veil the user liked behind the text now covers the whole section evenly. */
.pattern-text{background:none}
.pattern-section::before{background:rgba(5,3,17,.5);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 100%)}
@media(max-width:760px){.pattern-text{background:none}}
/* v10b: veil + blur strongest at the top (pattern disappearing), gone by 75%; bottom pattern 100% sharp. Text veil from v8 restored. */
.pattern-text{background:linear-gradient(90deg,rgba(5,3,17,.94) 0%,rgba(5,3,17,.75) 48%,rgba(5,3,17,0) 100%)}
.pattern-section::before{background:rgba(5,3,17,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);mask-image:linear-gradient(to bottom,#000 0%,#000 25%,rgba(0,0,0,.65) 45%,rgba(0,0,0,.25) 62%,transparent 75%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 25%,rgba(0,0,0,.65) 45%,rgba(0,0,0,.25) 62%,transparent 75%,transparent 100%)}
@media(max-width:760px){.pattern-text{background:linear-gradient(90deg,rgba(5,3,17,.93),rgba(5,3,17,.40))}}
/* v10c: no boxed text veil — the left dimming is part of the pattern mask (vertical fade × horizontal); contact starts from Noche. */
.pattern-text{background:none}
.pattern{mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.08) 12%,rgba(0,0,0,.35) 26%,rgba(0,0,0,.75) 40%,#000 54%,#000 100%),linear-gradient(90deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.4) 38%,#000 68%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.08) 12%,rgba(0,0,0,.35) 26%,rgba(0,0,0,.75) 40%,#000 54%,#000 100%),linear-gradient(90deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.4) 38%,#000 68%,#000 100%);mask-composite:intersect;-webkit-mask-composite:source-in}
.contact-fade{position:absolute;left:0;right:0;top:0;height:240px;z-index:0;pointer-events:none;background:linear-gradient(to bottom,var(--night) 0%,rgba(5,3,17,.55) 45%,rgba(5,3,17,0) 100%)}
.contact>*:not(.contact-fade){position:relative;z-index:1}
@media(max-width:760px){.pattern-text{background:none}.pattern{mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 26%,#000 54%),linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.55));-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 26%,#000 54%),linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.55))}}
.pattern-section::before{mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 25%,rgba(0,0,0,.65) 45%,rgba(0,0,0,.25) 62%,transparent 75%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 25%,rgba(0,0,0,.65) 45%,rgba(0,0,0,.25) 62%,transparent 75%,transparent 100%)}
/* v10d: no visible start line. The work grain is fully gone (eased) before the pattern section begins, so the overlap is Noche on Noche;
   every fade uses eased stops instead of a straight ramp (a linear ramp starting from 0 reads as a line). */
.work::after{mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 560px),rgba(0,0,0,.85) calc(100% - 510px),rgba(0,0,0,.5) calc(100% - 440px),rgba(0,0,0,.18) calc(100% - 380px),rgba(0,0,0,.04) calc(100% - 330px),transparent calc(100% - 300px));-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 560px),rgba(0,0,0,.85) calc(100% - 510px),rgba(0,0,0,.5) calc(100% - 440px),rgba(0,0,0,.18) calc(100% - 380px),rgba(0,0,0,.04) calc(100% - 330px),transparent calc(100% - 300px))}
.pattern-section{background:linear-gradient(to bottom,rgba(5,3,17,0) 0,rgba(5,3,17,.04) 40px,rgba(5,3,17,.2) 100px,rgba(5,3,17,.5) 170px,rgba(5,3,17,.82) 240px,var(--night) 300px)}
.pattern-section::before{mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.05) 4%,rgba(0,0,0,.3) 9%,rgba(0,0,0,.75) 14%,#000 19%,#000 25%,rgba(0,0,0,.7) 42%,rgba(0,0,0,.3) 58%,rgba(0,0,0,.08) 68%,transparent 75%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.05) 4%,rgba(0,0,0,.3) 9%,rgba(0,0,0,.75) 14%,#000 19%,#000 25%,rgba(0,0,0,.7) 42%,rgba(0,0,0,.3) 58%,rgba(0,0,0,.08) 68%,transparent 75%,transparent 100%)}
.pattern-section::after{mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.06) 20%,rgba(0,0,0,.35) 32%,rgba(0,0,0,.8) 44%,#000 54%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.06) 20%,rgba(0,0,0,.35) 32%,rgba(0,0,0,.8) 44%,#000 54%,#000 100%)}
@media(max-width:760px){.work::after{mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 440px),rgba(0,0,0,.5) calc(100% - 340px),transparent calc(100% - 220px));-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 440px),rgba(0,0,0,.5) calc(100% - 340px),transparent calc(100% - 220px))}.pattern-section{background:linear-gradient(to bottom,rgba(5,3,17,0) 0,rgba(5,3,17,.2) 70px,rgba(5,3,17,.6) 140px,var(--night) 220px)}}
/* v10e: same blur + fade at the bottom edge, so the pattern also dissolves into Contact (blur top and bottom). */
.pattern{mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.08) 12%,rgba(0,0,0,.35) 26%,rgba(0,0,0,.75) 40%,#000 54%,#000 78%,rgba(0,0,0,.8) 84%,rgba(0,0,0,.42) 90%,rgba(0,0,0,.12) 96%,transparent 100%),linear-gradient(90deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.4) 38%,#000 68%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.08) 12%,rgba(0,0,0,.35) 26%,rgba(0,0,0,.75) 40%,#000 54%,#000 78%,rgba(0,0,0,.8) 84%,rgba(0,0,0,.42) 90%,rgba(0,0,0,.12) 96%,transparent 100%),linear-gradient(90deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.4) 38%,#000 68%,#000 100%)}
.pattern-section::before{mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.05) 4%,rgba(0,0,0,.3) 9%,rgba(0,0,0,.75) 14%,#000 19%,#000 25%,rgba(0,0,0,.7) 42%,rgba(0,0,0,.3) 58%,rgba(0,0,0,.08) 68%,transparent 75%,transparent 80%,rgba(0,0,0,.25) 86%,rgba(0,0,0,.7) 93%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.05) 4%,rgba(0,0,0,.3) 9%,rgba(0,0,0,.75) 14%,#000 19%,#000 25%,rgba(0,0,0,.7) 42%,rgba(0,0,0,.3) 58%,rgba(0,0,0,.08) 68%,transparent 75%,transparent 80%,rgba(0,0,0,.25) 86%,rgba(0,0,0,.7) 93%,#000 100%)}
.pattern-section::after{mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.06) 20%,rgba(0,0,0,.35) 32%,rgba(0,0,0,.8) 44%,#000 54%,#000 82%,rgba(0,0,0,.4) 92%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.06) 20%,rgba(0,0,0,.35) 32%,rgba(0,0,0,.8) 44%,#000 54%,#000 82%,rgba(0,0,0,.4) 92%,transparent 100%)}
.contact-fade{height:300px;background:linear-gradient(to bottom,var(--night) 0%,rgba(5,3,17,.85) 18%,rgba(5,3,17,.5) 45%,rgba(5,3,17,.16) 75%,rgba(5,3,17,0) 100%)}
.contact-fade{top:-3px;height:303px}
.pattern-section{margin-bottom:-2px}

/* v11: one identical background (Noche + same grain) under "What we do" and the pattern section — no veils, no backdrop blur
   (that blur turned bright icons into glow blobs). Only the icons fade: a sharp layer, plus a blurred copy where it dissolves. */
.work::after,.pattern-section::after{content:"";position:absolute;inset:0;pointer-events:none;background:url('assets/grain.png') repeat;background-size:600px 750px;opacity:.1;mix-blend-mode:screen;mask-image:none;-webkit-mask-image:none}
.work::after{z-index:-1}
.pattern-section{background:var(--night)}
.pattern-section::after{z-index:0}
.pattern-section::before{display:none}
.pattern,.pattern-soft{z-index:1}
.pattern-text{z-index:3}
.pattern{mask-image:linear-gradient(to bottom,transparent 0%,transparent 14%,rgba(0,0,0,.06) 22%,rgba(0,0,0,.25) 31%,rgba(0,0,0,.55) 39%,rgba(0,0,0,.82) 46%,#000 54%,#000 76%,rgba(0,0,0,.82) 82%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.2) 94%,transparent 100%),linear-gradient(90deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.42) 38%,#000 68%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 14%,rgba(0,0,0,.06) 22%,rgba(0,0,0,.25) 31%,rgba(0,0,0,.55) 39%,rgba(0,0,0,.82) 46%,#000 54%,#000 76%,rgba(0,0,0,.82) 82%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.2) 94%,transparent 100%),linear-gradient(90deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.42) 38%,#000 68%,#000 100%)}
.pattern-soft{filter:blur(7px);opacity:.5;mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.15) 8%,rgba(0,0,0,.45) 16%,rgba(0,0,0,.7) 26%,rgba(0,0,0,.45) 38%,transparent 50%,transparent 80%,rgba(0,0,0,.4) 90%,rgba(0,0,0,.15) 97%,transparent 100%),linear-gradient(90deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.42) 38%,#000 68%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.15) 8%,rgba(0,0,0,.45) 16%,rgba(0,0,0,.7) 26%,rgba(0,0,0,.45) 38%,transparent 50%,transparent 80%,rgba(0,0,0,.4) 90%,rgba(0,0,0,.15) 97%,transparent 100%),linear-gradient(90deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.42) 38%,#000 68%,#000 100%);mask-composite:intersect;-webkit-mask-composite:source-in}
.contact-fade{top:-3px;height:560px;background:linear-gradient(to bottom,var(--night) 0%,rgba(5,3,17,.94) 10%,rgba(5,3,17,.8) 22%,rgba(5,3,17,.6) 36%,rgba(5,3,17,.38) 52%,rgba(5,3,17,.18) 70%,rgba(5,3,17,.05) 87%,rgba(5,3,17,0) 100%)}
.contact-fade::after{content:"";position:absolute;inset:0;background:url('assets/grain.png') repeat;background-size:600px 750px;opacity:.1;mix-blend-mode:screen;mask-image:linear-gradient(to bottom,#000 0%,transparent 60%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 60%)}
.contact{padding-top:200px}
@media(max-width:760px){.pattern,.pattern-soft{mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.3) 30%,#000 54%,#000 80%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.3) 30%,#000 54%,#000 80%,transparent 100%)}.pattern{opacity:.6}.pattern-soft{display:none}.contact{padding-top:140px}}
.pattern-soft{filter:blur(5px);opacity:.35}

/* v12: liquid hero (WebGL, liquid.js) after the user's moving blue/white gradient reference. CSS aura stays as fallback. */
.liquid{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
.hero.liquid-on{background:var(--night)}
.hero.liquid-on::before,.hero.liquid-on::after{display:none}
.hero.liquid-on h1,.hero.liquid-on .hero-bottom p{text-shadow:0 1px 30px rgba(5,3,17,.25)}
.c-coral{color:var(--coral)}.c-mint{color:var(--mint)}.c-violet{color:var(--violet)}

/* v13: pattern moved to the end — it closes the page above the footer.
   work -> contact (contact-fade from Noche) -> pattern rising over the end of contact -> footer (same Noche + grain). */
.work{padding-bottom:100px}
.contact{padding-bottom:340px}
.pattern-section{margin-top:-300px;margin-bottom:0;padding-top:300px;background:linear-gradient(to bottom,rgba(5,3,17,0) 0,rgba(5,3,17,.05) 40px,rgba(5,3,17,.22) 100px,rgba(5,3,17,.52) 170px,rgba(5,3,17,.84) 240px,var(--night) 300px)}
.pattern-section::after{mask-image:linear-gradient(to bottom,transparent 0,transparent 120px,rgba(0,0,0,.35) 220px,#000 320px,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 120px,rgba(0,0,0,.35) 220px,#000 320px,#000 100%)}
footer{background:var(--night);margin-top:-2px}
footer::after{opacity:.1;mix-blend-mode:screen}
@media(max-width:760px){.contact{padding-bottom:260px}.pattern-section{margin-top:-220px;padding-top:220px;background:linear-gradient(to bottom,rgba(5,3,17,0) 0,rgba(5,3,17,.25) 80px,rgba(5,3,17,.65) 150px,var(--night) 220px)}}
/* hover de color en el footer: Advocacy coral, Policy violeta, Health menta, "Back to top" coral */
.pillars span,footer a.h-coral{transition:color .35s var(--ease);cursor:default}footer a.h-coral{cursor:pointer}
.h-coral:hover{color:var(--coral)}.h-violet:hover{color:var(--violet)}.h-mint:hover{color:var(--mint)}
/* Tres caras, tres colores (regla de marca): Advocacy coral, Policy violeta, Health menta. Hover/abierto pinta el título y lo desplaza. */
.face-coral{--face:var(--coral)}.face-violet{--face:var(--violet)}.face-mint{--face:var(--mint)}
details h3{transition:color .5s var(--ease),transform .6s cubic-bezier(.3,.5,.2,1)}
details .number,details .plus{transition:color .5s var(--ease),transform .4s}
details summary:hover h3,details[open] h3{color:var(--face);transform:translateX(10px)}
details summary:hover .number,details[open] .number,details summary:hover .plus{color:var(--face)}
@media(prefers-reduced-motion:reduce){details summary:hover h3,details[open] h3{transform:none}}

/* v14: general motion upgrade (all disabled by prefers-reduced-motion). */
:root{interpolate-size:allow-keywords;--ease-out:cubic-bezier(.2,.7,.1,1)}
/* títulos por líneas */
.line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.line>span{display:inline-block}
.motion .split .line>span{transform:translateY(108%);transition:transform 1.15s var(--ease-out) calc(var(--i,0)*110ms + var(--delay,0ms))}
.motion .split.visible .line>span,.motion .visible .split .line>span,.motion h1 .split.visible .line>span{transform:none}
.motion h2.reveal.split{opacity:1;transform:none}
.motion h1 .reveal.split{opacity:1;transform:none}
/* líneas divisorias que se dibujan */
details{border-top:none;position:relative}
details::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#ffffff35;transform-origin:left}
.motion details::before{transform:scaleX(0);transition:transform 1.4s var(--ease-out) .1s}
.motion details.visible::before{transform:scaleX(1)}
.hero-rule{border-top:none;position:relative}.hero-rule::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#ffffff55;transform-origin:left}
.motion .hero-rule::before{animation:draw 1.6s var(--ease-out) .5s both}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* acordeón con altura animada (Chrome/Edge; en otros abre sin animación) */
details::details-content{block-size:0;overflow:hidden;transition:block-size .7s var(--ease-out),content-visibility .7s allow-discrete}
details[open]::details-content{block-size:auto}
.detail{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease) .15s,transform .7s var(--ease-out) .15s}
details[open] .detail{opacity:1;transform:none}
/* cubo: flotación + parallax */
.symbol-figure img{transform:translateY(var(--py,0));transition:transform .2s linear}
.motion .symbol-figure img{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
/* patrón con deriva lenta (las dos capas juntas para que el blur coincida) */
.motion .pattern,.motion .pattern-soft{animation:drift 140s linear infinite}
@keyframes drift{from{background-position:center 0}to{background-position:center -820px}}
/* menú: subrayado que se desliza */
nav a{border-bottom:0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease-out)}
nav a:hover,nav a:focus-visible{background-size:100% 1px}
/* flechas de "What supports the work" */
.foundation b{display:inline-block;transition:transform .5s var(--ease-out),color .3s}
.foundation p:hover b{transform:translate(4px,-4px)}
@media(prefers-reduced-motion:reduce){.line>span,.symbol-figure img,.pattern,.pattern-soft{transform:none!important;animation:none!important;translate:none!important}details::before,.hero-rule::before{transform:none!important;animation:none!important}.detail{opacity:1;transform:none}}
/* Detalle tipográfico: palabras clave en itálica de Inter Tight (nunca serif), con color por cara cuando corresponde. */
i{font-family:'Inter Tight',sans-serif;font-style:italic;font-weight:500;letter-spacing:-.01em}
h1 i,h2 i,h3 i{font-weight:600;letter-spacing:-.045em;padding-right:.04em}
.body-copy i,.detail i,.contact-row i,.pattern-text p i,.hero-bottom p i{font-size:1.04em}

/* v15 ─ botones modernos: píldora clara, flecha en círculo que sale y vuelve a entrar, relleno de color que barre desde la izquierda. Nunca cambia de tamaño. */
.btn{--btn:var(--violet);position:relative;display:inline-flex;align-items:center;gap:14px;height:54px;padding:0 6px 0 26px;border-radius:100px;background:var(--light);color:var(--night);font-family:'Inter Tight',sans-serif;font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;isolation:isolate}
.btn[data-face=coral]{--btn:var(--coral)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--btn);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.3,.5,.2,1)}
.btn-label{transition:color .5s var(--ease)}
.btn-arrow{position:relative;width:42px;height:42px;border-radius:50%;background:var(--night);color:var(--light);overflow:hidden;flex:none}
.btn-arrow>span{position:absolute;inset:0;display:grid;place-items:center;transition:transform .6s cubic-bezier(.3,.5,.2,1)}
.btn-arrow>span:last-child{transform:translate(-120%,120%)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn:hover .btn-label,.btn:focus-visible .btn-label{color:var(--night)}
.btn[data-face=violet]:hover .btn-label,.btn[data-face=violet]:focus-visible .btn-label{color:var(--light)}
.btn:hover .btn-arrow>span:first-child,.btn:focus-visible .btn-arrow>span:first-child{transform:translate(120%,-120%)}
.btn:hover .btn-arrow>span:last-child,.btn:focus-visible .btn-arrow>span:last-child{transform:none}

/* hover en todo: color o posición, nunca tamaño */
.eyebrow,.section-label,.hero-rule span,figcaption,.number,.foundation p,.body-copy,.detail p,.pattern-text p,.contact-row p,.hero-bottom p,footer span{transition:color .4s var(--ease),transform .5s cubic-bezier(.3,.5,.2,1)}
.eyebrow:hover,.section-label:hover,.hero-rule span:hover,figcaption:hover{color:var(--violet);transform:translateX(4px)}
.approach .section-label:hover,.approach figcaption:hover{color:var(--violet)}
.hero-rule span{display:inline-block}
.body-copy:hover{color:var(--night)}
.detail p:hover,.pattern-text p:hover,.contact-row p:hover,.hero-bottom p:hover{color:var(--light)}
i{transition:color .4s var(--ease);display:inline-block;transition:color .4s var(--ease),transform .5s cubic-bezier(.3,.5,.2,1)}
i:hover{transform:translateY(-3px)}
i:not([class]):hover{color:var(--coral)}
h1 .line>span,h2 .line>span{transition:transform 1.15s var(--ease-out) calc(var(--i,0)*110ms + var(--delay,0ms)),color .4s}
.logo{transition:transform .5s cubic-bezier(.3,.5,.2,1),filter .4s}.logo:hover{transform:translateY(-2px)}
.foundation b{transition:transform .5s var(--ease-out),color .3s}
.foundation p:hover{color:var(--light)}
footer span:hover{color:var(--light);transform:translateX(-4px)}
.c-ultra{color:var(--blue)}

/* menú sticky que se adapta: blanco sobre fondos oscuros, noche sobre claros; vidrio suave para leerse sobre el hero líquido */
header{position:fixed;top:0;left:0;width:100%;z-index:50;padding:18px 5%;transition:background .5s var(--ease),color .4s var(--ease),padding .5s var(--ease),backdrop-filter .5s}
header.scrolled{background:rgba(5,3,17,.42);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
header.tone-light{color:var(--night)}
header.tone-light.scrolled{background:rgba(244,241,255,.6)}
header.tone-light .logo{filter:invert(1) brightness(.12)}
header nav a{text-shadow:none}
.hero{padding-top:170px}
@media(max-width:760px){header{padding:14px 6%}.hero{padding-top:140px}}
header{background:rgba(5,3,17,.2);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
header.tone-light{background:rgba(244,241,255,.45)}

/* Pantalla de carga: ícono Labcore que se llena de abajo arriba, contador 0–100 % y barra con los colores de las caras. */
body.loading{overflow:hidden}
#loader{position:fixed;inset:0;z-index:200;background:var(--night);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transition:transform 1s cubic-bezier(.76,0,.24,1)}
#loader::after{content:"";position:absolute;inset:0;background:url('assets/grain.png') repeat;background-size:600px 750px;opacity:.1;mix-blend-mode:screen;pointer-events:none}
.ld-mark{display:flex;align-items:center;gap:18px}
.ld-svg{width:74px;height:auto;overflow:visible}
.ld-base{fill:#F4F1FF;opacity:.12}
.ld-fill{fill:var(--light)}
.ld-word{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:34px;letter-spacing:-.03em;color:var(--light)}
.ld-meta{display:flex;justify-content:space-between;width:min(320px,70vw);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;color:#b6aaff}
.ld-count{color:var(--coral);font-variant-numeric:tabular-nums}
.ld-bar{width:min(320px,70vw);height:2px;background:#ffffff1a;overflow:hidden}
.ld-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--coral),var(--violet) 50%,var(--mint));transform:scaleX(0);transform-origin:left}
#loader.ld-out{transform:translateY(-100%)}
body.loading .hero .line>span{transform:translateY(108%)!important;transition:none!important}
body.loading .hero .reveal:not(.split){opacity:0!important;transition:none!important}
@media(prefers-reduced-motion:reduce){#loader{transition:opacity .4s}#loader.ld-out{transform:none;opacity:0}}
/* contacto con el mismo líquido del hero (menos blanco): fuera el aura estirada y el grano doble que se veían manchados */
.contact.liquid-on{background:var(--night)}.contact.liquid-on::before,.contact.liquid-on::after{display:none}
.contact.liquid-on .surface-grain{opacity:.07}.contact-fade::after{opacity:.06}
.contact>canvas.liquid{position:absolute;inset:0;z-index:0}.contact>.contact-fade{z-index:1}.contact>*:not(.contact-fade):not(.liquid){position:relative;z-index:2}
/* contacto con más aire: el líquido se difumina hacia abajo y desaparece antes de que suba el patrón (sin solaparse) */
.contact{min-height:1100px;padding-bottom:460px}
.contact>canvas.liquid{mask-image:linear-gradient(to bottom,#000 0%,#000 42%,rgba(0,0,0,.75) 52%,rgba(0,0,0,.4) 62%,rgba(0,0,0,.14) 70%,transparent 76%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 42%,rgba(0,0,0,.75) 52%,rgba(0,0,0,.4) 62%,rgba(0,0,0,.14) 70%,transparent 76%)}
@media(max-width:760px){.contact{min-height:860px;padding-bottom:340px}}
/* contacto HD: el aura PNG (1200×1500) se estiraba ×2 en pantallas grandes y se pixelaba. Ahora son degradados CSS
   (vectoriales, nítidos a cualquier resolución) con el mismo violeta/morado; el grano queda a su tamaño real. */
.contact{background:#2110a8}
.contact::before{background:
  radial-gradient(ellipse 70% 60% at 82% 88%,#7563ebd9 0%,#7563eb66 38%,transparent 70%),
  radial-gradient(ellipse 80% 70% at 30% 70%,#4a2fd8b3 0%,transparent 65%),
  radial-gradient(ellipse 60% 50% at 95% 40%,#5b46e080 0%,transparent 70%),
  linear-gradient(180deg,#1a0c86 0%,#2a14b8 45%,#3b24c8 75%,#5a44d6 100%)}
.contact .surface-grain{opacity:.1;mix-blend-mode:soft-light;background-size:600px 750px}
/* hero a pantalla completa (100 % del alto visible; svh descuenta la barra del navegador en móvil) */
.hero{min-height:100vh;min-height:100svh}
@media(max-width:760px){.hero{min-height:100svh}}
/* bruma del contacto: se pinta completa y se funde con el noche abajo */
.contact.liquid-on{background:#1a0c86}
.contact>canvas.liquid[data-mode=mist]{mask-image:linear-gradient(to bottom,#000 0%,#000 55%,rgba(0,0,0,.7) 66%,rgba(0,0,0,.3) 76%,transparent 86%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,rgba(0,0,0,.7) 66%,rgba(0,0,0,.3) 76%,transparent 86%)}
/* hero a pantalla completa con mejor distribución: eyebrows arriba, el bloque título + texto anclado al tercio inferior
   (lectura editorial), la regla al pie. El espacio libre queda arriba, sobre el líquido. */
.hero{justify-content:flex-end}
.hero-top{margin-bottom:auto}
.hero h1{font-size:clamp(56px,8.2vw,150px);line-height:.98;margin:0 0 44px}
.hero-bottom{margin-bottom:64px;gap:56px}
.hero-bottom p{max-width:420px;font-size:19px}
@media(max-width:760px){.hero h1{font-size:clamp(48px,13vw,80px);margin:0 0 28px}.hero-bottom{margin-bottom:40px;gap:22px}.hero-bottom p{font-size:17px}}
/* cierre limpio: (1) el humo azul del contacto se apaga a Noche antes del patrón, (2) sin la copia difuminada del patrón (se veía como orbes),
   (3) el patrón sigue completo por debajo del footer hasta el final de la página. */
.contact.liquid-on{background:linear-gradient(to bottom,#1a0c86 0%,#1a0c86 38%,#0d0640 55%,var(--night) 66%,var(--night) 100%)}
.contact>canvas.liquid[data-mode=mist]{mask-image:linear-gradient(to bottom,#000 0%,#000 40%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.2) 58%,transparent 64%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 40%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.2) 58%,transparent 64%)}
.pattern-soft{display:none}
.pattern-section{margin-bottom:-150px;padding-bottom:150px}
.pattern{mask-image:linear-gradient(to bottom,transparent 0%,transparent 14%,rgba(0,0,0,.06) 22%,rgba(0,0,0,.25) 31%,rgba(0,0,0,.55) 39%,rgba(0,0,0,.82) 46%,#000 54%,#000 100%),linear-gradient(90deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.42) 38%,#000 68%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 14%,rgba(0,0,0,.06) 22%,rgba(0,0,0,.25) 31%,rgba(0,0,0,.55) 39%,rgba(0,0,0,.82) 46%,#000 54%,#000 100%),linear-gradient(90deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.42) 38%,#000 68%,#000 100%)}
.pattern-section::after{mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.06) 20%,rgba(0,0,0,.35) 32%,rgba(0,0,0,.8) 44%,#000 54%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.06) 20%,rgba(0,0,0,.35) 32%,rgba(0,0,0,.8) 44%,#000 54%,#000 100%)}
footer{background:linear-gradient(to bottom,rgba(5,3,17,0) 0%,rgba(5,3,17,.55) 45%,rgba(5,3,17,.78) 100%);min-height:150px;z-index:3;margin-top:0}
footer::after{display:none}
@media(max-width:760px){.pattern-section{margin-bottom:-190px;padding-bottom:190px}footer{min-height:190px}}
.contact.liquid-on{background:linear-gradient(to bottom,#1a0c86 0%,#1a0c86 28%,#170a76 36%,#120860 44%,#0d0646 51%,#09041f 58%,var(--night) 64%,var(--night) 100%)}
.contact>canvas.liquid[data-mode=mist]{mask-image:linear-gradient(to bottom,#000 0%,#000 30%,rgba(0,0,0,.82) 37%,rgba(0,0,0,.58) 44%,rgba(0,0,0,.32) 51%,rgba(0,0,0,.12) 57%,transparent 63%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 30%,rgba(0,0,0,.82) 37%,rgba(0,0,0,.58) 44%,rgba(0,0,0,.32) 51%,rgba(0,0,0,.12) 57%,transparent 63%)}
/* contacto → patrón: degradado largo y suavizado (mismas paradas en el fondo y en la máscara de la bruma) desde el 40 % hasta el final,
   sin franja de noche vacía: el patrón empieza justo donde el morado termina de apagarse. */
.contact{min-height:980px;padding-bottom:320px}
.contact.liquid-on{background:linear-gradient(to bottom,#1a0c86 0%,#1a0c86 40%,#180a7c 48%,#140868 56%,#100653 64%,#0c053c 72%,#080327 80%,#060317 88%,var(--night) 96%,var(--night) 100%)}
.contact>canvas.liquid[data-mode=mist]{mask-image:linear-gradient(to bottom,#000 0%,#000 40%,rgba(0,0,0,.86) 48%,rgba(0,0,0,.68) 56%,rgba(0,0,0,.48) 64%,rgba(0,0,0,.3) 72%,rgba(0,0,0,.15) 80%,rgba(0,0,0,.05) 88%,transparent 96%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 40%,rgba(0,0,0,.86) 48%,rgba(0,0,0,.68) 56%,rgba(0,0,0,.48) 64%,rgba(0,0,0,.3) 72%,rgba(0,0,0,.15) 80%,rgba(0,0,0,.05) 88%,transparent 96%)}
@media(max-width:760px){.contact{min-height:820px;padding-bottom:260px}}
/* título del hero: cada frase en su propia línea en escritorio (sin "Evidence / into action.") */
.hero h1{font-size:clamp(52px,7vw,140px)}
@media(min-width:761px){.hero h1 > span{white-space:nowrap}}
/* párrafos: itálicas sin color también en hover (el color queda para títulos, máx. 2 palabras) */
p i:not([class]):hover{color:inherit}
/* el morado del contacto baja más: completo hasta ~55 %, se apaga entre 55 % y 100 % */
.contact.liquid-on{background:linear-gradient(to bottom,#1a0c86 0%,#1a0c86 55%,#180a7c 62%,#140868 69%,#100653 76%,#0c053c 82%,#080327 88%,#060317 94%,var(--night) 100%)}
.contact>canvas.liquid[data-mode=mist]{mask-image:linear-gradient(to bottom,#000 0%,#000 55%,rgba(0,0,0,.86) 62%,rgba(0,0,0,.68) 69%,rgba(0,0,0,.48) 76%,rgba(0,0,0,.3) 82%,rgba(0,0,0,.15) 88%,rgba(0,0,0,.05) 94%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,rgba(0,0,0,.86) 62%,rgba(0,0,0,.68) 69%,rgba(0,0,0,.48) 76%,rgba(0,0,0,.3) 82%,rgba(0,0,0,.15) 88%,rgba(0,0,0,.05) 94%,transparent 100%)}
/* velo morado sobre el inicio del patrón (en vez de franja negra): el contacto termina en morado profundo, ese morado sigue en el
   fondo de la sección del patrón y además cubre los íconos con un velo que se desvanece hacia el noche. */
.contact.liquid-on{background:linear-gradient(to bottom,#1a0c86 0%,#1a0c86 40%,#180a7c 52%,#150972 64%,#12076a 76%,#100662 88%,#0f065c 100%)}
.contact>canvas.liquid[data-mode=mist]{mask-image:linear-gradient(to bottom,#000 0%,#000 40%,rgba(0,0,0,.8) 55%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.35) 85%,rgba(0,0,0,.25) 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 40%,rgba(0,0,0,.8) 55%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.35) 85%,rgba(0,0,0,.25) 100%)}
.pattern-section{background:linear-gradient(to bottom,rgba(15,6,92,0) 0,#0f065c 300px,#0d0550 34%,#0a043a 42%,#070326 50%,#050311 58%,var(--night) 100%)}
.pattern-section::before{display:block;content:"";position:absolute;inset:0;z-index:2;pointer-events:none;backdrop-filter:none;-webkit-backdrop-filter:none;mask-image:none;-webkit-mask-image:none;
  background:linear-gradient(to bottom,rgba(15,6,92,0) 0,rgba(15,6,92,.92) 300px,rgba(15,6,92,.7) 30%,rgba(13,5,80,.42) 37%,rgba(10,4,58,.18) 44%,rgba(7,3,38,0) 52%)}
@media(max-width:760px){.pattern-section{background:linear-gradient(to bottom,rgba(15,6,92,0) 0,#0f065c 220px,#0a043a 40%,var(--night) 56%)}.pattern-section::before{background:linear-gradient(to bottom,rgba(15,6,92,0) 0,rgba(15,6,92,.9) 220px,rgba(13,5,80,.4) 36%,transparent 50%)}}
/* sin "horizonte": la bruma se apaga en un tramo largo y parejo (30 %→100 %) en vez de caer de golpe bajo el botón */
.contact>canvas.liquid[data-mode=mist]{mask-image:linear-gradient(to bottom,#000 0%,#000 22%,rgba(0,0,0,.94) 32%,rgba(0,0,0,.86) 42%,rgba(0,0,0,.76) 52%,rgba(0,0,0,.65) 62%,rgba(0,0,0,.54) 72%,rgba(0,0,0,.44) 82%,rgba(0,0,0,.36) 92%,rgba(0,0,0,.3) 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 22%,rgba(0,0,0,.94) 32%,rgba(0,0,0,.86) 42%,rgba(0,0,0,.76) 52%,rgba(0,0,0,.65) 62%,rgba(0,0,0,.54) 72%,rgba(0,0,0,.44) 82%,rgba(0,0,0,.36) 92%,rgba(0,0,0,.3) 100%)}
.contact.liquid-on{background:linear-gradient(to bottom,#1a0c86 0%,#190b82 30%,#170a7a 45%,#150972 60%,#13086a 72%,#110763 84%,#0f065c 100%)}
/* hover dinámico de textos pequeños: el color recorre la paleta de marca y se queda en coral (sin menta sobre claro) */
@keyframes brandcycle{0%{color:currentColor}30%{color:#7563EB}62%{color:#4DF0C8}100%{color:#FF6B4A}}
@keyframes brandcycle-light{0%{color:currentColor}35%{color:#7563EB}68%{color:#2B0FE0}100%{color:#FF6B4A}}
.eyebrow:hover,.section-label:hover,.hero-rule span:hover,figcaption:hover,.foundation .eyebrow:hover{animation:brandcycle .9s cubic-bezier(.4,0,.2,1) forwards;color:var(--coral)}
.approach .section-label:hover,.approach figcaption:hover{animation-name:brandcycle-light}
@media(prefers-reduced-motion:reduce){.eyebrow:hover,.section-label:hover,.hero-rule span:hover,figcaption:hover{animation:none;color:var(--coral)}}
/* señal de las tres caras en el hero: se encienden de a una (Advocacy coral → Policy violeta → Health menta) y el ciclo se repite */
.faces-signal .fs{color:var(--light);animation:fs-on 4.5s cubic-bezier(.4,0,.2,1) infinite}
.fs-a{--fs:var(--coral);animation-delay:0s!important}.fs-p{--fs:var(--violet);animation-delay:1.5s!important}.fs-h{--fs:var(--mint);animation-delay:3s!important}
@keyframes fs-on{0%{color:var(--light);text-shadow:none}8%,26%{color:var(--fs);text-shadow:0 0 14px color-mix(in srgb,var(--fs) 45%,transparent)}36%,100%{color:var(--light);text-shadow:none}}
.faces-signal:hover{animation:none}
@media(prefers-reduced-motion:reduce){.faces-signal .fs{animation:none}.fs-a{color:var(--coral)}.fs-p{color:var(--violet)}.fs-h{color:var(--mint)}}
/* punto "en vivo": cambia de color con la palabra encendida (mismo ciclo de 4,5 s) y late con un anillo */
.faces-signal{display:flex;align-items:center;gap:0}
.faces-signal .fs{margin:0 .45em}.faces-signal .fs:first-of-type{margin-left:0}
.live-dot{position:relative;width:8px;height:8px;border-radius:50%;margin-right:12px;flex:none;background:var(--coral);animation:live-color 4.5s steps(1,end) infinite}
.live-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid currentColor;color:inherit;animation:live-ring 1.5s cubic-bezier(.2,.7,.1,1) infinite}
@keyframes live-color{0%{background:var(--coral);color:var(--coral)}33.333%{background:var(--violet);color:var(--violet)}66.666%{background:var(--mint);color:var(--mint)}}
@keyframes live-ring{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.live-dot,.live-dot::after{animation:none}.live-dot::after{display:none}}
/* el punto cuelga en el margen: el texto arranca en la misma vertical que el título y el resto de elementos */
.live-dot{margin-left:-20px;margin-right:12px}
.faces-signal .fs-a{margin-left:0}
/* las palabras de color dentro del título van en línea (la regla vieja "h1 span{display:block}" las partía en líneas aparte) */
h1 .line>span span,h1 .line>span i,h1 .line>span em{display:inline}
/* la señal de las tres caras no tiene hover: solo su transición automática */
.eyebrow.faces-signal:hover{animation:none!important;transform:none!important;color:var(--light)}
.font-cycle{transition:opacity .22s ease,transform .3s cubic-bezier(.3,.5,.2,1),filter .22s ease}.font-cycle.fc-out{opacity:0;transform:translateY(-.08em);filter:blur(4px)}
/* señal sincronizada por JS (data-active): palabra y punto cambian juntos */
.faces-signal .fs{animation:none!important;transition:color .45s cubic-bezier(.4,0,.2,1),text-shadow .45s;color:var(--light)}
.live-dot{animation:none!important;transition:background .45s cubic-bezier(.4,0,.2,1),color .45s;background:var(--light);color:var(--light)}
.faces-signal[data-active=a] .fs-a{color:var(--coral);text-shadow:0 0 14px #ff6b4a55}
.faces-signal[data-active=p] .fs-p{color:var(--violet);text-shadow:0 0 14px #7563eb55}
.faces-signal[data-active=h] .fs-h{color:var(--mint);text-shadow:0 0 14px #4df0c855}
.faces-signal[data-active=a] .live-dot{background:var(--coral);color:var(--coral)}
.faces-signal[data-active=p] .live-dot{background:var(--violet);color:var(--violet)}
.faces-signal[data-active=h] .live-dot{background:var(--mint);color:var(--mint)}
/* hover arcoíris de marca en textos pequeños (como la barra de carga): degradado que se desliza */
@keyframes rainbow{from{background-position:0% 50%}to{background-position:200% 50%}}
.eyebrow:not(.faces-signal):hover,.section-label:hover,.hero-rule span:hover,figcaption:hover{animation:rainbow 1.6s linear infinite!important;color:transparent!important;background:linear-gradient(90deg,var(--coral),var(--violet),var(--mint),var(--coral)) 0 50%/200% 100%;-webkit-background-clip:text;background-clip:text}
.approach .section-label:hover,.approach figcaption:hover{background-image:linear-gradient(90deg,var(--coral),var(--violet),var(--blue),var(--coral))}
@media(prefers-reduced-motion:reduce){.eyebrow:not(.faces-signal):hover,.section-label:hover,.hero-rule span:hover,figcaption:hover{animation:none!important}}
/* "action." respira en peso (Inter Tight itálica variable 300 → 800), sin salir de la tipografía de marca */
@keyframes breathe{0%,100%{font-weight:300}50%{font-weight:800}}
.hero h1 i.weight-breathe{animation:breathe 3.2s cubic-bezier(.45,0,.55,1) infinite}
@media(prefers-reduced-motion:reduce){.hero h1 i.weight-breathe{animation:none;font-weight:600}}
.faces-signal .fs{transition:color .22s ease,text-shadow .22s}.live-dot{transition:background .22s ease,color .22s}.live-dot::after{animation-duration:.8s!important}
/* decodificación de "action.": sin respiración de peso; los caracteres de datos van en Plex Mono violeta, la palabra final en Inter Tight itálica coral */
.hero h1 i.decode{animation:none;font-weight:600}
.decode .dc{font-family:"IBM Plex Mono",monospace;font-style:normal;font-weight:500;color:var(--violet);font-size:.82em;display:inline-block;width:.62em;text-align:center}
/* decodificación suave */
.decode .ch{display:inline-block;text-align:center;transition:none}
.decode .ch.dc{font-family:"IBM Plex Mono",monospace;font-style:normal;font-weight:400;color:var(--violet);font-size:.7em;opacity:.85;width:auto}
.decode .ch.in{animation:ch-in .5s cubic-bezier(.2,.7,.1,1) both}
@keyframes ch-in{from{opacity:0;filter:blur(6px);transform:translateY(.12em)}to{opacity:1;filter:none;transform:none}}
.decode .dc{width:auto}